Skip to content

Commit 5c1b9a4

Browse files
mosaic-promosaic-pro
committed
Add Sidebar Variables
1 parent 64c0252 commit 5c1b9a4

5 files changed

Lines changed: 77 additions & 52 deletions

File tree

‎src/sass/_scaffolding.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,4 @@ blockquote {
3636
border-left: 2px solid #efefef;
3737
padding-left: 10px;
3838
font-size: .9rem;
39-
}
40-
41-
.label-primary-outline {
42-
color: $brand-primary;
43-
background: #ffffff;
4439
}

‎src/sass/_variables.scss‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -96,19 +96,24 @@ $sidebar-dark-header-color: $sidebar-dark-color !default;
9696

9797
$sidebar-dark-link-color: #fff !default;
9898
$sidebar-dark-link-active-color: $sidebar-dark-link-color !default;
99+
99100
$sidebar-dark-link-hover-color: $sidebar-dark-link-color !default;
100101
$sidebar-dark-link-hover-bg: rgba(255,255,255, .12) !default;
101102
$sidebar-dark-link-active-bg: rgba(255,255,255, .12) !default;
102103
$sidebar-dark-link-open-active-bg: $sidebar-dark-link-active-bg !default;
103104

104105
$sidebar-dark-link-icon-color: rgba(255, 255, 255, .54) !default;
105-
$sidebar-dark-link-disabled-color: rgba(255,255,255, .24);
106+
$sidebar-dark-link-active-icon-color: $sidebar-dark-link-active-color !default;
107+
$sidebar-dark-link-hover-icon-color: $sidebar-dark-link-icon-color !default;
108+
$sidebar-dark-link-disabled-color: rgba(255,255,255, .24) !default;
106109

107110
$sidebar-dark-nav-border-b: 1px solid rgba(0,0,0, 0.05) !default;
108111

109112
$sidebar-dark-open-bg: rgba(0,0,0,.04) !default;
110113
$sidebar-dark-open-link-color: rgba(255, 255, 255, .54) !default;
114+
$sidebar-dark-open-direct-link-color: $sidebar-dark-open-link-color !default;
111115
$sidebar-dark-open-link-hover-bg: $sidebar-dark-link-hover-bg !default;
116+
$sidebar-dark-open-link-hover-color: $sidebar-dark-open-link-color !default;
112117
$sidebar-dark-open-link-active-color: $sidebar-dark-link-color !default;
113118

114119
$sidebar-dark-label-bg: rgba(0,0,0, .3) !default;
@@ -117,44 +122,46 @@ $sidebar-dark-caret-color: rgba(255, 255, 255, .54) !default;
117122
$sidebar-dark-caret-open-color: #ffffff !default;
118123

119124
// SIDEBAR LIGHT
120-
$sidebar-light-color: rgba(0,0,0, .54) !default;
121-
$sidebar-light-bg: #ffffff;
122-
$sidebar-light-p-color: $sidebar-light-color;
125+
$sidebar-light-color: rgba(0,0,0, .54) !default;
126+
$sidebar-light-bg: #ffffff;
127+
$sidebar-light-p-color: $sidebar-light-color;
123128

124-
$sidebar-light-border: 1px solid $border-color;
129+
$sidebar-light-border: 1px solid $border-color;
125130

126-
$sidebar-light-brand-bg: transparent;
127-
$sidebar-light-brand-color: $brand-primary;
128-
$sidebar-light-brand-border-b: 1px solid $border-color !default;
131+
$sidebar-light-brand-bg: transparent;
132+
$sidebar-light-brand-color: $brand-primary;
133+
$sidebar-light-brand-border-b: 1px solid $border-color !default;
129134

130-
$sidebar-light-header-color: $sidebar-light-color !default;
135+
$sidebar-light-header-color: $sidebar-light-color !default;
131136

132-
$sidebar-light-link-color: rgba(0,0,0, .54) !default;
133-
$sidebar-light-link-active-color: $brand-primary !default;
137+
$sidebar-light-link-color: rgba(0,0,0, .54) !default;
138+
$sidebar-light-link-active-color: $brand-primary !default;
134139

135-
$sidebar-light-link-hover-color: #212121 !default;
140+
$sidebar-light-link-hover-color: #212121 !default;
136141

137-
$sidebar-light-link-hover-bg: rgba(0,0,0, .03) !default;
138-
$sidebar-light-link-active-bg: rgba(0,0,0, .03) !default;
139-
$sidebar-light-link-open-active-bg: $sidebar-light-link-active-bg !default;
142+
$sidebar-light-link-hover-bg: rgba(0,0,0, .03) !default;
143+
$sidebar-light-link-active-bg: rgba(0,0,0, .03) !default;
144+
$sidebar-light-link-open-active-bg: $sidebar-light-link-active-bg !default;
140145

141-
$sidebar-light-link-icon-color: $sidebar-light-link-color !default;
142-
$sidebar-light-link-disabled-color: rgba(0,0,0, .24) !default;
146+
$sidebar-light-link-icon-color: $sidebar-light-link-color !default;
147+
$sidebar-light-link-hover-icon-color: $sidebar-light-link-icon-color !default;
148+
$sidebar-light-link-disabled-color: rgba(0,0,0, .24) !default;
143149

144-
$sidebar-light-nav-border-b: 1px solid rgba(0,0,0, 0.05) !default;
150+
$sidebar-light-nav-border-b: 1px solid rgba(0,0,0, 0.05) !default;
145151

146-
$sidebar-light-open-bg: rgba(0,0,0,.04) !default;
147-
$sidebar-light-open-link-color: $sidebar-light-link-color !default;
148-
$sidebar-light-open-link-hover-bg: $sidebar-light-link-hover-bg !default;
149-
$sidebar-light-open-link-active-color: $sidebar-light-link-active-color !default;
150-
$sidebar-light-open-link-hover-color: $sidebar-light-link-hover-color !default;
152+
$sidebar-light-open-bg: rgba(0,0,0,.04) !default;
153+
$sidebar-light-open-link-color: $sidebar-light-link-color !default;
154+
$sidebar-light-open-direct-link-color: $sidebar-light-open-link-color !default;
155+
$sidebar-light-open-link-hover-bg: $sidebar-light-link-hover-bg !default;
156+
$sidebar-light-open-link-active-color: $sidebar-light-link-active-color !default;
157+
$sidebar-light-open-link-hover-color: $sidebar-light-link-hover-color !default;
151158

152159

153-
$sidebar-light-label-bg: rgba(0,0,0, .3) !default;
154-
$sidebar-light-label-color: #ffffff !default;
160+
$sidebar-light-label-bg: rgba(0,0,0, .3) !default;
161+
$sidebar-light-label-color: #ffffff !default;
155162

156-
$sidebar-light-caret-color: rgba(0,0,0, .24) !default;
157-
$sidebar-light-caret-open-color: $sidebar-light-link-color !default;
163+
$sidebar-light-caret-color: rgba(0,0,0, .24) !default;
164+
$sidebar-light-caret-open-color: $sidebar-light-link-color !default;
158165

159166
// END SIDEBAR
160167

‎src/sass/sidebar/_sidebar-dark.scss‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
color: $sidebar-dark-brand-color;
1111
border-bottom: $sidebar-dark-brand-border-b;
1212
}
13-
13+
1414
// HEADER
1515
.sidebar-header { color:$sidebar-dark-header-color; }
1616

@@ -22,48 +22,64 @@
2222
// MENU ITEM STYLING
2323
a {
2424
color: $sidebar-dark-link-color;
25-
25+
26+
&:hover {
27+
color: $sidebar-dark-link-hover-color;
28+
background: $sidebar-dark-link-hover-bg;
29+
}
30+
2631
// ICON
2732
i { color: $sidebar-dark-link-icon-color; }
28-
33+
&:hover i { color: $sidebar-dark-link-hover-icon-color;}
2934
// LABEL
3035
.label {
3136
background: $sidebar-dark-label-bg;
3237
color: $sidebar-dark-label-color;
3338
}
3439
&.disabled { color: $sidebar-dark-link-disabled-color;}
35-
&:hover { background: $sidebar-dark-link-hover-bg; }
40+
3641
}
3742

3843
// OPEN
3944
&.open {
4045
background: $sidebar-dark-open-bg;
4146
border-top: 1px solid rgba(0,0,0, 0.05);
42-
43-
a {
44-
color: $sidebar-dark-open-link-color;
45-
&:hover { background: $sidebar-dark-open-link-hover-bg; }
47+
48+
a {
49+
color: $sidebar-dark-open-link-color;
50+
&:hover {
51+
color: $sidebar-dark-open-link-hover-color;
52+
background: $sidebar-dark-open-link-hover-bg;
53+
}
54+
}
55+
// DIRECT LINK
56+
> a {
57+
color: $sidebar-dark-open-direct-link-color;
58+
&:hover {
59+
background: none;
60+
}
4661
}
47-
> a:hover { background: none; }
4862
}
49-
50-
// ACTIVE
51-
&.active,
63+
64+
// ACTIVE
65+
&.active,
5266
> .active {
5367
background: $sidebar-dark-link-active-bg;
54-
a,
55-
a i {
56-
color: $sidebar-dark-link-active-color;
68+
a {
69+
color: $sidebar-dark-link-active-color;
70+
}
71+
a i {
72+
color: $sidebar-dark-link-active-icon-color;
5773
}
5874
}
5975
&.open .active {
6076
background: $sidebar-dark-link-open-active-bg;
61-
a,
62-
a i {
77+
a,
78+
a i {
6379
color: $sidebar-dark-open-link-active-color;
6480
}
6581
}
66-
82+
6783
// CARET COLOR
6884
a:not(:only-child):before { color: $sidebar-dark-caret-color; }
6985
// CARET COLOR OPEN

‎src/sass/sidebar/_sidebar-light.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,15 @@
3333

3434
// ICON
3535
i { color: $sidebar-light-link-icon-color; }
36+
&:hover i { color: $sidebar-light-link-hover-icon-color; }
3637

3738
// LABEL
3839
.label {
3940
background: $sidebar-light-label-bg;
4041
color: $sidebar-light-label-color;
4142
}
4243
}
43-
44+
4445
// OPEN
4546
&.open {
4647
background: $sidebar-light-open-bg;
@@ -53,7 +54,12 @@
5354
background: $sidebar-light-open-link-hover-bg;
5455
}
5556
}
56-
> a:hover { background: none; }
57+
58+
// DIRECT LINK
59+
> a {
60+
color: $sidebar-light-open-direct-link-color;
61+
&:hover { background: none; }
62+
}
5763
}
5864

5965
// ACTIVE

‎src/sass/sidebar/_sidebar.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@
44
@import 'components/heading';
55
@import 'components/menu';
66
@import 'components/type';
7+
78
@import 'sidebar-light';
89
@import 'sidebar-dark';

0 commit comments

Comments
 (0)