From 7074e13047bac237226570363fde297d5c0f6caa Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Thu, 13 Feb 2025 12:59:09 +0200 Subject: [PATCH 1/5] Fix: Visible calendar items when selected --- src/routes/Calendar/List/Item/Item.less | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index aba6bba09..051e092df 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -7,8 +7,6 @@ flex-direction: column; background-color: var(--overlay-color); border-radius: var(--border-radius); - border: 0.15rem solid transparent; - transition: border-color 0.1s ease-out; .heading { flex: none; @@ -82,6 +80,19 @@ } } + &::before { + border: 0.15rem solid transparent; + border-radius: var(--border-radius); + box-sizing: border-box; + content: ""; + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; + z-index: 1; + transition: border-color 0.1s ease-out; + } + &.today { .heading { background-color: var(--primary-accent-color); @@ -89,7 +100,9 @@ } &.active { - border-color: var(--primary-foreground-color); + &::before { + border-color: var(--primary-foreground-color); + } } &:not(.active):hover { From 6e806d5c8483b6d2f10a70c8ac5a2ea880fe4c87 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 14:11:28 +0200 Subject: [PATCH 2/5] Revert previous changes and added margin/padding block --- src/routes/Calendar/List/Item/Item.less | 25 +++++++++---------------- src/routes/Calendar/List/List.less | 6 ++++++ 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 051e092df..e850d3e49 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -7,6 +7,8 @@ flex-direction: column; background-color: var(--overlay-color); border-radius: var(--border-radius); + border: 0.15rem solid transparent; + transition: border-color 0.1s ease-out; .heading { flex: none; @@ -80,19 +82,6 @@ } } - &::before { - border: 0.15rem solid transparent; - border-radius: var(--border-radius); - box-sizing: border-box; - content: ""; - width: 100%; - height: 100%; - position: absolute; - pointer-events: none; - z-index: 1; - transition: border-color 0.1s ease-out; - } - &.today { .heading { background-color: var(--primary-accent-color); @@ -100,12 +89,16 @@ } &.active { - &::before { - border-color: var(--primary-foreground-color); - } + border-color: var(--primary-foreground-color); } &:not(.active):hover { border-color: var(--overlay-color); } } + +@supports (scroll-margin-block-start: 2px) { + .item { + scroll-margin-block-start: 2px; + } +} \ No newline at end of file diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index f63078680..9a1904a70 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -35,3 +35,9 @@ display: none; } } + +@supports (scroll-padding-block-start: 2px) { + .list { + scroll-padding-block-start: 2px; + } +} \ No newline at end of file From 91ed45625bae6ada202c131148df845498512546 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 15:21:06 +0200 Subject: [PATCH 3/5] Moved scroll padding/margin inside the classes --- src/routes/Calendar/List/Item/Item.less | 7 +------ src/routes/Calendar/List/List.less | 7 +------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index e850d3e49..90cc07f27 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -9,6 +9,7 @@ border-radius: var(--border-radius); border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; + scroll-margin-block-start: 2px; .heading { flex: none; @@ -95,10 +96,4 @@ &:not(.active):hover { border-color: var(--overlay-color); } -} - -@supports (scroll-margin-block-start: 2px) { - .item { - scroll-margin-block-start: 2px; - } } \ No newline at end of file diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 9a1904a70..21c5dc588 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -10,6 +10,7 @@ width: 20rem; padding: 0 1rem; overflow-y: auto; + scroll-padding-block-start: 2px; } @media only screen and (max-width: @small) and (orientation: portrait) { @@ -34,10 +35,4 @@ .list { display: none; } -} - -@supports (scroll-padding-block-start: 2px) { - .list { - scroll-padding-block-start: 2px; - } } \ No newline at end of file From 5c316f4a332036bc32a748f68a7e6e22a81f5904 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 15:27:19 +0200 Subject: [PATCH 4/5] Added supports check --- src/routes/Calendar/List/Item/Item.less | 5 ++++- src/routes/Calendar/List/List.less | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 90cc07f27..742cc1e5b 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -9,7 +9,10 @@ border-radius: var(--border-radius); border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; - scroll-margin-block-start: 2px; + + @supports (scroll-margin-block-start: 2px) { + scroll-margin-block-start: 2px; + } .heading { flex: none; diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 21c5dc588..768ac8c24 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -10,7 +10,10 @@ width: 20rem; padding: 0 1rem; overflow-y: auto; - scroll-padding-block-start: 2px; + + @supports (scroll-padding-block-start: 2px) { + scroll-padding-block-start: 2px; + } } @media only screen and (max-width: @small) and (orientation: portrait) { From 878691fffbb9dc86834b37c153d1f037152121a8 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 17 Feb 2025 18:57:33 +0200 Subject: [PATCH 5/5] Removed margin block and convert padding to rem --- src/routes/Calendar/List/Item/Item.less | 4 ---- src/routes/Calendar/List/List.less | 4 ++-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less index 742cc1e5b..b11feda2a 100644 --- a/src/routes/Calendar/List/Item/Item.less +++ b/src/routes/Calendar/List/Item/Item.less @@ -10,10 +10,6 @@ border: 0.15rem solid transparent; transition: border-color 0.1s ease-out; - @supports (scroll-margin-block-start: 2px) { - scroll-margin-block-start: 2px; - } - .heading { flex: none; position: relative; diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less index 768ac8c24..9f2dfd774 100644 --- a/src/routes/Calendar/List/List.less +++ b/src/routes/Calendar/List/List.less @@ -11,8 +11,8 @@ padding: 0 1rem; overflow-y: auto; - @supports (scroll-padding-block-start: 2px) { - scroll-padding-block-start: 2px; + @supports (scroll-padding-block-start: 0.15rem) { + scroll-padding-block-start: 0.15rem; } }