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