-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
_sidebar.scss
107 lines (105 loc) · 3.06 KB
/
_sidebar.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
$sidebar-background: $modal-background-background-color !default;
$sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
$sidebar-width: 260px !default;
$sidebar-mobile-width: 80px !default;
$sidebar-mobile-breakpoint: $tablet !default;
$sidebar-colors: $navbar-colors !default;
$sidebar-close-button-background: rgba(10,10,10,.3) !default;
$sidebar-close-button-dark-background: rgba(10,10,10,.86) !default;
.b-sidebar {
.sidebar-content {
background-color: $background;
box-shadow: $sidebar-box-shadow;
width: $sidebar-width;
z-index: 39;
@each $name, $pair in $sidebar-colors {
$color: nth($pair, 1);
&.is-#{$name} {
background-color: $color;
}
}
&.is-fixed {
position: fixed;
left: 0;
top: 0;
&.is-right {
left: auto;
right: 0;
}
}
&.is-absolute {
position: absolute;
left: 0;
top: 0;
&.is-right {
left: auto;
right: 0;
}
}
&.is-mini {
width: $sidebar-mobile-width;
&.is-mini-expand:hover:not(.is-mini-delayed) {
transition: width $speed-slow $easing;
&:not(.is-fullwidth) {
width: $sidebar-width;
&.is-mini-expand-fixed {
position: fixed;
}
}
}
}
&.is-static {
position: static;
}
&.is-absolute, &.is-static {
transition: width $speed-slow $easing;
}
&.is-fullwidth {
width: 100%;
max-width: 100%;
}
&.is-fullheight {
height: 100%;
max-height: 100%;
overflow: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
align-content: stretch;
}
@media screen and (max-width: $sidebar-mobile-breakpoint - 1px) {
&.is-mini-mobile {
width: $sidebar-mobile-width;
&.is-mini-expand:hover {
&:not(.is-fullwidth-mobile) {
width: $sidebar-width;
&.is-mini-expand-fixed {
position: fixed;
}
}
}
}
&.is-hidden-mobile {
width: 0;
height: 0;
overflow: hidden;
}
&.is-fullwidth-mobile {
width: 100%;
max-width: 100%;
}
}
.sidebar-close {
background: $sidebar-close-button-background;
&:hover {
background: $sidebar-close-button-dark-background;
}
}
}
.sidebar-background {
@include overlay;
background: $sidebar-background;
position: fixed;
z-index: 38;
}
}