mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-15 12:09:20 +00:00
195 lines
3.3 KiB
Stylus
195 lines
3.3 KiB
Stylus
@import '../config'
|
|
|
|
// $transition = 10s linear
|
|
// $transitionTime = 10s
|
|
// $transitionFunction = linear
|
|
.sidebarBody
|
|
margin-left 300px
|
|
transition margin-left $transition
|
|
&.short
|
|
margin-left 56px
|
|
|
|
.sidebar
|
|
background var(--theme-50)
|
|
@media (prefers-color-scheme dark)
|
|
background var(--gray-800)
|
|
position fixed
|
|
left 0
|
|
top 0
|
|
padding 24px
|
|
height 100vh
|
|
width 300px
|
|
&.fullWidth
|
|
width 100%
|
|
z-index 100
|
|
display flex
|
|
flex-direction column
|
|
transition width $transition
|
|
|
|
.header
|
|
.userSpace
|
|
.header .imgContainer
|
|
> ul span
|
|
// transition all $transition
|
|
transition-property width, padding, margin, max-width
|
|
transition-duration $transitionTime
|
|
transition-timing-function $transitionFunction
|
|
overflow hidden
|
|
> ul span
|
|
width calc(100% - 40px)
|
|
max-width 100%
|
|
.header p
|
|
cursor pointer
|
|
|
|
.userSpace
|
|
cursor pointer
|
|
div, p
|
|
transition all $transition
|
|
p
|
|
overflow hidden
|
|
white-space nowrap
|
|
>div:last-child p
|
|
padding 8px 8px 4px
|
|
border-radius 8px
|
|
&:hover
|
|
color black
|
|
background var(--theme-100)
|
|
@media (prefers-color-scheme dark)
|
|
color white
|
|
background var(--gray-700)
|
|
&:active
|
|
color white
|
|
background var(--theme-500)
|
|
&.short
|
|
width 88px
|
|
.userSpace > div:not(:last-child)
|
|
.header > div:first-child
|
|
width 0
|
|
max-width 0
|
|
padding-left 0
|
|
.header
|
|
margin-left -16px
|
|
> div:first-child
|
|
padding-left 0 !important
|
|
|
|
.header > div svg
|
|
.header .imgContainer
|
|
> ul
|
|
span
|
|
svg:last-child
|
|
width 0
|
|
padding-left 0
|
|
padding-right 0
|
|
margin 0 !important
|
|
max-width 0
|
|
svg line:first-child
|
|
transform rotateX(0) !important
|
|
|
|
|
|
|
|
.header
|
|
margin-left -8px
|
|
//min-height 70px
|
|
svg
|
|
margin-right 8px
|
|
line:first-child
|
|
transition transform $transition
|
|
transform rotateZ(90deg)
|
|
min-height 24px
|
|
|
|
hr
|
|
margin 0
|
|
ul ul
|
|
padding-left 40px
|
|
max-height 0
|
|
opacity 0
|
|
overflow hidden
|
|
transition all $transition
|
|
position relative
|
|
&::before
|
|
content " "
|
|
position absolute
|
|
background black
|
|
@media (prefers-color-scheme dark)
|
|
background white
|
|
border-radius 2px
|
|
width 2px
|
|
height 100%
|
|
margin-top 8px
|
|
left 18px
|
|
li.activeMenu
|
|
svg:last-child
|
|
transform rotateX(180deg)
|
|
ul
|
|
opacity 1
|
|
// not the best but IDK what is better
|
|
max-height 100vh
|
|
ul li
|
|
margin-top 8px
|
|
div
|
|
width 100%
|
|
cursor pointer
|
|
border-radius 8px
|
|
transition all $transition
|
|
color black
|
|
@media (prefers-color-scheme dark)
|
|
color white
|
|
&:first-child
|
|
margin-top 0
|
|
&:hover
|
|
|
|
color black
|
|
background var(--theme-100)
|
|
@media (prefers-color-scheme dark)
|
|
color white
|
|
background var(--gray-700)
|
|
&:active
|
|
color white
|
|
background var(--theme-500)
|
|
|
|
padding 8px
|
|
display flex
|
|
align-items center
|
|
z-index 111
|
|
position relative
|
|
|
|
svg
|
|
transition color $transition, transform $transition
|
|
&:first-child + span
|
|
margin-left 16px
|
|
|
|
span
|
|
display inline-block
|
|
white-space nowrap
|
|
|
|
a
|
|
width 100%
|
|
display flex
|
|
//max-height 24px
|
|
|
|
&.link
|
|
padding 0
|
|
a
|
|
padding 8px
|
|
|
|
&.active > div
|
|
color white
|
|
background var(--theme-500)
|
|
ul
|
|
list-style none
|
|
margin 0
|
|
padding 0
|
|
|
|
.userMenu
|
|
position fixed
|
|
bottom 16px
|
|
left 316px
|
|
z-index 200
|
|
|
|
&.short
|
|
left 104px
|
|
|
|
&.fullWidth
|
|
left 16px
|
|
width calc(100% - 32px)
|