Newer
Older
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
@import '../base/color';
@import '../base/breakpoint';
.o-sidebar {
background-color: $primary-color;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12),
0px 8px 10px rgba(0, 0, 0, 0.14);
border-top: unset;
border-right: unset;
// justify-content: flex-end;
z-index: 19;
// position: fixed;
// bottom: 0;
// left: 0;
// display: block;
// width: 100%;
@media #{$tablet} {
background-color: $primary-color;
}
}
.c-nav-link {
padding: 0 1rem;
.on {
display: none;
}
.off {
display: block;
}
}
// .c-nav {
// display: flex;
// list-style: none;
// justify-content: space-around;
// }
.c-nav-link .c-nav-icon {
padding-right: 0.5rem;
width: 50px;
height: 36px;
fill: none;
}
.c-nav-link.is-active {
box-shadow: inset 0.25rem 0 0 0 $gold;
}
.c-nav-link.is-active .c-nav-icon {
fill: $gold !important;
}
.c-nav-link.is-active {
color: $white;
text-decoration: none;
.on {
display: block;
}
.off {
display: none;
}
}
@media #{$tablet} {
.o-sidebar {
height: 56px;
}
.c-nav-link {
padding: 0;
}
.c-nav-link .c-nav-icon {
padding: 0;
margin: auto;
}
.c-nav-link.is-active {
box-shadow: unset;
}
}
@media #{$large-phone} {
left: 25px;
padding: 4px;
width: 0.75rem;
height: 0.75rem;
top: 0px;
}
position: absolute;
border-radius: 50%;
z-index: 1;
height: 1.2rem;
width: 1.2rem;
background: $blue-radial-gradient;
left: 45px;
top: 7px;
text-align: center;