105 lines
1.8 KiB
Plaintext
Raw Normal View History

const sidebar-spacing-y = 0.7rem
2017-07-19 14:56:02 +00:00
#sidebar
vertical
position fixed
left 0
top 0
2017-07-22 13:04:54 +00:00
z-index 10
2017-11-30 02:39:00 +00:00
width 70vw
2017-12-03 18:34:09 +00:00
max-width 300px
2017-07-19 14:56:02 +00:00
height 100%
2017-11-05 05:56:09 +00:00
background sidebar-opaque-background
2017-07-19 14:56:02 +00:00
transform translateX(-100%)
overflow-x hidden
overflow-y auto
opacity 0
pointer-events none
2017-11-30 02:39:00 +00:00
box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)
2017-07-19 14:56:02 +00:00
transition opacity transition-speed ease, transform transition-speed ease
2017-10-20 00:43:02 +00:00
will-change opacity, transition
2017-07-19 14:56:02 +00:00
.user-image-container
horizontal
2018-02-28 11:12:58 +00:00
position relative
2017-07-19 14:56:02 +00:00
justify-content center
margin 0.8rem 0
2017-10-14 12:23:12 +00:00
flex-shrink 0
2017-07-19 14:56:02 +00:00
2017-07-22 14:31:25 +00:00
> 800px
2017-07-22 13:04:54 +00:00
#sidebar
opacity 1
2017-11-29 18:23:14 +00:00
width 180px
2017-07-22 13:04:54 +00:00
transform none
position static
2017-10-20 00:43:02 +00:00
pointer-events auto
2017-07-22 13:04:54 +00:00
box-shadow none
border-right ui-border
2017-11-05 05:56:09 +00:00
background sidebar-background
2017-07-22 13:04:54 +00:00
2017-11-08 14:50:48 +00:00
> 1400px
#sidebar
2017-11-29 18:23:14 +00:00
width 200px
2017-11-08 14:50:48 +00:00
2017-07-19 14:56:02 +00:00
.sidebar-visible
transform translateX(0) !important
2017-10-20 00:43:02 +00:00
pointer-events auto !important
2017-07-19 14:56:02 +00:00
opacity 1 !important
.sidebar-link
2017-07-22 13:04:54 +00:00
color text-color
2017-11-08 14:50:48 +00:00
2017-07-19 14:56:02 +00:00
&.active
.sidebar-button
2017-11-04 07:45:39 +00:00
color tab-active-color
background tab-active-background
2017-11-04 16:11:47 +00:00
text-shadow tab-active-text-shadow
2017-11-04 07:45:39 +00:00
background tab-active-background
2017-07-19 14:56:02 +00:00
.sidebar-button
horizontal
align-items center
2017-07-22 13:04:54 +00:00
padding sidebar-spacing-y 1rem
2017-07-19 14:56:02 +00:00
// background ui-background
.icon
2017-07-22 13:04:54 +00:00
font-size 1rem
2017-11-16 14:15:35 +00:00
margin-right 0.75rem
2018-02-28 11:12:58 +00:00
.badge
2018-02-28 15:26:49 +00:00
horizontal
justify-content center
align-items center
2018-02-28 11:12:58 +00:00
position absolute
top 50%
background reverse-light-color
border-radius 50%
transform translateY(-50%)
padding 0.5rem
color text-color
2018-02-28 15:26:49 +00:00
width 30px
height 30px
2018-02-28 11:12:58 +00:00
2018-02-28 11:48:57 +00:00
:hover
color text-color
background reverse-light-hover-color
2018-02-28 11:12:58 +00:00
:active
transform translateY(-50%) translateY(3px)
.left-badge
left 12%
.right-badge
right 12%
2018-02-28 15:26:49 +00:00
.badge-important
background badge-important-bg-color
color badge-important-text-color
font-weight bold
2018-02-28 22:26:06 +00:00
:hover
background badge-important-hover-bg-color
color badge-important-text-color
text-shadow none