UI: Implement toggle-bars to My conference filters #103981

Merged
Márton Lente merged 5 commits from ui/my-conference-toggles into main 2024-10-29 15:20:31 +01:00
Showing only changes of commit 3c45fa1bf5 - Show all commits

View File

@ -148,7 +148,7 @@ $col-time-width: 8%
label
flex: 1
margin: 0
line-height: unset
line-height: var(--lh-sm)
+padding(2, x)
display: flex
align-items: center
@ -157,24 +157,39 @@ $col-time-width: 8%
&.toggle
i
--border-width: .075rem
background-color: transparent
// TODO: improve border-color contrast in theme light
border: var(--border-width) solid var(--border-color)
border: var(--border-width) solid currentColor
border-radius: var(--border-radius)
color: currentColor
height: var(--spacer-4)
height: 2.0rem
+margin(1, right)
position: relative
transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed)
width: var(--spacer-4)
width: 2.0rem
+media-lg
height: var(--spacer-4)
width: var(--spacer-4)
&:before
font-weight: bold
left: calc(var(--spacer-1) * -.5)
left: 0
opacity: 0
transform: scale(0)
position: relative
transition: opacity ease-in-out var(--transition-speed), transform ease-in-out var(--transition-speed)
top: calc(var(--spacer-1) * -1)
top: calc(var(--spacer-1) * -.5)
+media-sm
left: calc(var(--spacer-1) * -.75)
top: calc(var(--spacer-1) * -.75)
+media-lg
left: calc(var(--spacer-1) * -.25)
top: calc(var(--spacer-1) * -.25)
input:checked
&~label i
@ -242,7 +257,7 @@ $col-time-width: 8%
+padding(2, y)
position: sticky
top: 0
z-index: 10
z-index: calc(var(--zindex-fixed) + 2)
+media-lg
display: none
@ -395,7 +410,7 @@ body.is-scrolled
background-color: var(--color-bg)
+padding(2, y)
position: sticky
top: 0
top: var(--spacer-5)
z-index: calc(var(--zindex-fixed) + 1)
/* Vertical schedule scrolls to this during conference days. */