python-gallery/gallery/themes/default/components/navigation.sass

167 lines
2.8 KiB
Sass
Raw Normal View History

.navigation
margin: 0
padding: 0
width: 3.5rem
height: 100%
height: 100dvh
display: flex
flex-direction: column
justify-content: space-between
position: fixed
top: 0
left: 0
2023-03-25 16:22:32 +00:00
background-color: RGB($bg-100)
color: RGB($fg-white)
z-index: 69
.logo
margin: 0
padding: 0
width: 3.5rem
height: 3.5rem
min-height: 3.5rem
display: flex
flex-direction: row
align-items: center
2023-03-25 16:22:32 +00:00
.navigation-spacer
height: 100%
.navigation-item
margin: 0
2023-03-25 16:22:32 +00:00
padding: 0
width: 3.5rem
height: 3.5rem
2023-03-25 16:22:32 +00:00
min-height: 3.5rem
position: relative
display: flex
flex-direction: row
2023-03-25 16:22:32 +00:00
justify-content: center
align-items: center
2023-03-25 16:22:32 +00:00
background-color: transparent
border: none
text-decoration: none
> svg
margin: 0
2023-03-25 16:22:32 +00:00
padding: 0.5rem
width: 2.5rem
height: 2.5rem
color: RGB($fg-white)
border-radius: $rad-inner
transition: color 0.2s ease-out, transform 0.2s ease-out
span
margin: 0
2023-03-25 16:22:32 +00:00
padding: 0.35rem 0.7rem
display: block
position: absolute
top: 50%
left: 3rem
transform: translateY(-50%)
2023-03-25 16:22:32 +00:00
font-size: 0.9rem
font-weight: 700
background-color: #000000
2023-03-25 16:22:32 +00:00
color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
svg
margin: 0
font-size: 1rem
width: 0.75rem
height: 0.75rem
display: block
position: absolute
top: 50%
left: -0.45rem
transform: translateY(-50%)
color: #000000
&:hover
> svg
2023-03-25 16:22:32 +00:00
background: RGB($bg-300)
span
opacity: 1
left: 3.9rem
2023-03-25 16:22:32 +00:00
&.selected::before
content: ''
display: block
2023-03-25 16:22:32 +00:00
position: absolute
top: 3px
left: 0
2023-03-25 16:22:32 +00:00
width: 3px
height: calc(100% - 6px)
2023-03-25 16:22:32 +00:00
background-color: RGB($primary)
border-radius: $rad-inner
@media (max-width: $breakpoint)
.navigation
width: 100vw
height: 3.5rem
flex-direction: row
justify-content: space-around
position: fixed
top: unset
bottom: 0
left: 0
> span
display: none
.logo
display: none
.navigation-item
margin: 0.25rem
padding: 0
width: 3rem
height: 3rem
2023-03-25 16:22:32 +00:00
min-height: 3rem
span
display: none
2023-03-25 16:22:32 +00:00
&.selected::before
top: unset
bottom: 0
left: 0
width: 100%
height: 3px