UI: Implement toggle-bars to My conference filters #103981
@ -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: 2.0rem
|
||||||
|
|
||||||
|
+media-lg
|
||||||
|
height: var(--spacer-4)
|
||||||
width: 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. */
|
||||||
|
Loading…
Reference in New Issue
Block a user