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