Skip to content
This repository was archived by the owner on Apr 21, 2026. It is now read-only.

Commit a5d7bb7

Browse files
author
dpatanin
committed
restyle sidebar
1 parent efdb192 commit a5d7bb7

1 file changed

Lines changed: 91 additions & 86 deletions

File tree

‎src/scss/components/_sidebar.scss‎

Lines changed: 91 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,102 +2,107 @@
22
//original selectors
33
//a, a:hover, a:focus
44
%extend_1 {
5-
color: inherit;
6-
text-decoration: none;
7-
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
8-
transition: all 0.3s;
5+
color: inherit;
6+
text-decoration: none;
7+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
8+
transition: all 0.3s;
99
}
1010

11-
1211
body {
13-
font-family: $font-family-base;
14-
background: #fafafa;
12+
font-family: $font-family-base;
13+
background: #fafafa;
1514
}
1615
p {
17-
font-family: $font-family-base;
18-
font-size: 1.1em;
19-
font-weight: 300;
20-
line-height: 1.7em;
21-
color: #999;
16+
font-family: $font-family-base;
17+
font-size: 1.1em;
18+
font-weight: 300;
19+
line-height: 1.7em;
20+
color: #999;
2221
}
2322
a {
24-
@extend %extend_1;
25-
&:hover {
26-
@extend %extend_1;
27-
}
28-
&:focus {
29-
@extend %extend_1;
30-
}
23+
@extend %extend_1;
24+
&:hover {
25+
@extend %extend_1;
26+
}
27+
&:focus {
28+
@extend %extend_1;
29+
}
3130
}
32-
.sidebar-wrapper{
33-
display: flex;
31+
.sidebar-wrapper {
32+
display: flex;
3433
}
3534
.sidebar {
36-
@include media-breakpoint-down(sm) {
37-
display: none;
38-
}
39-
width: 250px;
40-
background: $secureCodeBlue;
41-
height: 100vh;
42-
position: sticky;
43-
top: 50px;
44-
z-index: 9;
45-
overflow-y: auto;
46-
color: $white;
47-
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
48-
transition: all 0.3s;
49-
.active-Link {
50-
color: $white;
51-
background: $highlight;
35+
@include media-breakpoint-down(sm) {
36+
display: none;
37+
}
38+
width: 250px;
39+
background: $white;
40+
height: 100vh;
41+
position: sticky;
42+
top: 50px;
43+
z-index: 9;
44+
overflow-y: auto;
45+
// color: $white;
46+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
47+
transition: all 0.3s;
48+
.active-Link {
49+
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
50+
}
51+
&.active {
52+
min-width: 10px;
53+
max-width: 10px;
54+
text-align: center;
55+
.sidebar-header {
56+
h3 {
57+
display: none;
58+
}
59+
strong {
60+
display: block;
61+
}
62+
}
63+
}
64+
ul {
65+
display: none;
66+
li {
67+
a {
68+
text-align: left;
69+
padding: 10px;
70+
font-size: 1.1em;
71+
display: block;
72+
&:hover {
73+
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
74+
}
75+
i {
76+
margin-right: 10px;
77+
}
78+
}
79+
&.active > a {
80+
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
81+
}
5282
}
53-
&.active {
54-
min-width: 10px;
55-
max-width: 10px;
56-
text-align: center;
57-
.sidebar-header {
58-
h3 {
59-
display: none;
60-
}
61-
strong {
62-
display: block;
63-
}
64-
}
65-
}
66-
ul {
67-
display: none;
68-
li {
69-
a {
70-
text-align: left;
71-
padding: 10px;
72-
font-size: 1.1em;
73-
display: block;
74-
&:hover {
75-
color: $white;
76-
background: $highlight;
77-
}
78-
i {
79-
margin-right: 10px;
80-
}
81-
}
82-
&.active > a {
83-
color: $white;
84-
background: $highlight;
85-
}
86-
}
87-
&.components {
88-
}
89-
}
90-
.sidebar-header {
91-
padding: 20px;
92-
background: $highlight;
93-
width: auto;
94-
font-size: 1.3rem;
95-
}
83+
}
84+
.sidebar-header {
85+
margin-bottom: 0px;
86+
padding: 20px;
87+
width: auto;
88+
font-size: 1.3rem;
89+
// disable text selection on sidebar
90+
-webkit-touch-callout: none; /* iOS Safari */
91+
-webkit-user-select: none; /* Safari */
92+
-khtml-user-select: none; /* Konqueror HTML */
93+
-moz-user-select: none; /* Old versions of Firefox */
94+
-ms-user-select: none; /* Internet Explorer/Edge */
95+
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
96+
}
97+
.sidebar-header:hover {
98+
cursor: pointer;
99+
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
100+
}
96101
}
97102
#content {
98-
width: auto;
99-
padding: 20px;
100-
min-height: 100vh;
101-
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
102-
transition: all 0.3s;
103-
}
103+
width: auto;
104+
padding: 20px;
105+
min-height: 100vh;
106+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
107+
transition: all 0.3s;
108+
}

0 commit comments

Comments
 (0)