Skip to content

Commit b9eb3f4

Browse files
francoispluchinofrancoispluchino
committed
Define dedicated variables for bootstrap variables
1 parent 070a769 commit b9eb3f4

File tree

4 files changed

+80
-62
lines changed

4 files changed

+80
-62
lines changed

‎scss/_sidebar-core.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104

105105
.fxp-sidebar-group {
106106
> span {
107-
font-family: $headings-font-family;
107+
font-family: $sidebar-headings-font-family;
108108
font-size: $sidebar-default-group-size;
109109
border-top: 1px solid transparent;
110110

@@ -188,7 +188,7 @@
188188
}
189189

190190
.fxp-sidebar-force-open ~ & {
191-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
191+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
192192
z-index: -1;
193193
opacity: 0;
194194
}
@@ -282,7 +282,7 @@
282282
// Responsive
283283
// -------------------------
284284

285-
@media (max-width: (map-get($grid-breakpoints, 'md') - 1)) {
285+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'md') - 1)) {
286286
.fxp-sidebar {
287287
width: 80%;
288288
-webkit-transform: translate3d(-100%, 0px, 0px);
@@ -320,15 +320,15 @@
320320
}
321321
}
322322

323-
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
323+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
324324
.fxp-sidebar-force-open {
325325
&.fxp-sidebar:not(.fxp-sidebar-open) + .fxp-sidebar-swipe {
326326
left: 0;
327327
}
328328
}
329329
}
330330

331-
@media (min-width: ((map-get($grid-breakpoints, 'lg') - 1) + 1)) {
331+
@media (min-width: ((map-get($sidebar-grid-breakpoints, 'lg') - 1) + 1)) {
332332
.fxp-sidebar {
333333
&.fxp-sidebar-open-init {
334334
-webkit-transform: translate3d(0px, 0px, 0px);
@@ -379,7 +379,7 @@
379379
}
380380
}
381381

382-
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
382+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
383383
.fxp-sidebar,
384384
.fxp-sidebar-swipe {
385385
top: 0 !important;

‎scss/_sidebar-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
// Responsive
130130
// -------------------------
131131

132-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
132+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
133133
.fxp-sidebar.fxp-sidebar-locked {
134134
&.fxp-sidebar-default {
135135
border-color: $sidebar-default-border-color;

‎scss/_variables.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
// COMPONENT VARIABLES
77
// --------------------------------------------------
88

9+
// Text
10+
// -------------------------
11+
12+
$sidebar-headings-font-family: $headings-font-family !default;
13+
914
// Z-index master list
1015
// -------------------------
1116

@@ -21,6 +26,17 @@ $zindex-sidebar-obfuscator: $zindex-sidebar - 1 !default;
2126
$zindex-sidebar-obfuscator-fixed: $zindex-sidebar-fixed - 1 !default;
2227
$zindex-sidebar-obfuscator-static: $zindex-sidebar-static - 1 !default;
2328

29+
// Grid
30+
// -------------------------
31+
32+
$sidebar-grid-gutter-width: $grid-gutter-width !default;
33+
34+
$sidebar-container-padding-x: $sidebar-grid-gutter-width / 2 !default;
35+
36+
$sidebar-grid-breakpoints: $grid-breakpoints !default;
37+
38+
$sidebar-container-max-widths: $container-max-widths !default;
39+
2440
// Custom Sidebar
2541
// -------------------------
2642

@@ -30,6 +46,8 @@ $sidebar-mini-width: round($sidebar-width / 3) !default;
3046
$sidebar-clickable-swipe-bg: fade($primary, 23%) !default;
3147
$sidebar-obfuscator-bg: rgba(0, 0, 0, 0.5) !default;
3248
$sidebar-obfuscator-duration: '0.3s' !default;
49+
$sidebar-navbar-height: $navbar-height !default;
50+
3351
$sidebar-default-font-size: $font-size-base !default;
3452
$sidebar-default-color: $gray-900 !default;
3553
$sidebar-default-bg: #fff !default;

‎scss/_wrapper.scss‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
}
1313

1414
&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
15-
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
15+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
1616
z-index: $zindex-sidebar-obfuscator-fixed;
1717
}
1818
}
1919
}
2020
}
2121

22-
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
22+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
2323
.fxp-sidebar:not(.fxp-sidebar-full-locked) {
2424
&.fxp-sidebar-fixed-top,
2525
&.fxp-sidebar-fixed-bottom {
@@ -36,7 +36,7 @@
3636
}
3737
}
3838

39-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
39+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
4040
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked) {
4141
&.fxp-sidebar-static-top,
4242
&.fxp-sidebar-static-bottom {
@@ -47,21 +47,21 @@
4747
}
4848

4949
&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
50-
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
50+
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
5151
z-index: $zindex-sidebar-obfuscator-static;
5252
}
5353
}
5454
}
5555

5656
&.fxp-sidebar-static-top {
5757
> .sticky-header {
58-
padding-top: $navbar-height + 1 !important;
58+
padding-top: $sidebar-navbar-height + 1 !important;
5959
}
6060

6161
.fxp-sidebar-menu {
6262
> .fxp-sidebar-group:first-child,
6363
> .fxp-sidebar-item:first-child {
64-
padding-top: $navbar-height + 1;
64+
padding-top: $sidebar-navbar-height + 1;
6565
}
6666
}
6767
}
@@ -70,17 +70,17 @@
7070
.fxp-sidebar-menu {
7171
> .fxp-sidebar-group:last-child,
7272
> .fxp-sidebar-item:last-child {
73-
padding-bottom: $navbar-height;
73+
padding-bottom: $sidebar-navbar-height;
7474
}
7575
}
7676
}
7777

7878
&.fxp-sidebar-fixed-top {
79-
top: $navbar-height;
79+
top: $sidebar-navbar-height;
8080
}
8181

8282
&.fxp-sidebar-fixed-bottom {
83-
bottom: $navbar-height;
83+
bottom: $sidebar-navbar-height;
8484
}
8585
}
8686

@@ -97,7 +97,7 @@
9797

9898
.container-main {
9999
&.container-force-open-left {
100-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
100+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
101101
padding-left: $sidebar-width;
102102

103103
> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
@@ -107,7 +107,7 @@
107107
}
108108

109109
&.container-force-open-right {
110-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
110+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
111111
padding-right: $sidebar-width;
112112

113113
> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
@@ -120,37 +120,37 @@
120120
&.container-force-open-right {
121121
> .container,
122122
> .navbar > .container {
123-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
124-
width: map-get($container-max-widths, 'lg') - $sidebar-width;
123+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
124+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
125125
}
126-
@media (min-width: map-get($grid-breakpoints, 'xl')) {
127-
width: map-get($container-max-widths, 'lg') - $sidebar-width;
126+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
127+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
128128
}
129-
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-width)) {
130-
width: map-get($container-max-widths, 'lg');
129+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-width)) {
130+
width: map-get($sidebar-container-max-widths, 'lg');
131131
}
132-
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
133-
width: map-get($container-max-widths, 'xl') - $sidebar-width;
132+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
133+
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-width;
134134
}
135-
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-width)) {
136-
width: map-get($container-max-widths, 'xl');
135+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-width)) {
136+
width: map-get($sidebar-container-max-widths, 'xl');
137137
}
138138
}
139139
}
140140

141141
&.container-full-locked {
142142
&.container-force-open-left {
143143
> .navbar > .container-fluid {
144-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
145-
padding-left: unquote('calc(#{$sidebar-width} + #{$container-padding-x})');
144+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
145+
padding-left: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
146146
}
147147
}
148148
}
149149

150150
&.container-force-open-right {
151151
> .navbar > .container-fluid {
152-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
153-
padding-right: unquote('calc(#{$sidebar-width} + #{$container-padding-x})');
152+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
153+
padding-right: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
154154
}
155155
}
156156
}
@@ -159,50 +159,50 @@
159159
&.container-force-open-left.container-force-open-right {
160160
> .container,
161161
> .navbar > .container {
162-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
163-
width: map-get($container-max-widths, 'lg') - ($sidebar-width * 2);
162+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
163+
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
164164
}
165-
@media (min-width: map-get($grid-breakpoints, 'xl')) {
166-
width: map-get($container-max-widths, 'lg') - ($sidebar-width * 2);
165+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
166+
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
167167
}
168-
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-width)) {
169-
width: map-get($container-max-widths, 'lg') - $sidebar-width;
168+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-width)) {
169+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
170170
}
171-
@media (min-width: (map-get($grid-breakpoints, 'xl') + ($sidebar-width * 2))) {
172-
width: map-get($container-max-widths, 'lg');
171+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + ($sidebar-width * 2))) {
172+
width: map-get($sidebar-container-max-widths, 'lg');
173173
}
174-
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
175-
width: map-get($container-max-widths, 'xl') - ($sidebar-width * 2);
174+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
175+
width: map-get($sidebar-container-max-widths, 'xl') - ($sidebar-width * 2);
176176
}
177-
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-width)) {
178-
width: map-get($container-max-widths, 'xl') - $sidebar-width;
177+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-width)) {
178+
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-width;
179179
}
180-
@media (min-width: (map-get($grid-breakpoints, 'xxl') + ($sidebar-width * 2))) {
181-
width: map-get($container-max-widths, 'xl');
180+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + ($sidebar-width * 2))) {
181+
width: map-get($sidebar-container-max-widths, 'xl');
182182
}
183183
}
184184
}
185185

186186
&.container-mini-left {
187-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
187+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
188188
padding-left: $sidebar-mini-width;
189189
}
190190

191191
> .navbar > .container-fluid {
192-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
193-
padding-left: unquote('calc(#{$sidebar-mini-width} + #{$container-padding-x})');
192+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
193+
padding-left: unquote('calc(#{$sidebar-mini-width} + #{$sidebar-container-padding-x})');
194194
}
195195
}
196196
}
197197

198198
&.container-mini-right {
199-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
199+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
200200
padding-right: $sidebar-mini-width;
201201
}
202202

203203
> .navbar > .container-fluid {
204-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
205-
padding-right: unquote('calc(#{$sidebar-mini-width} + #{$container-padding-x})');
204+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
205+
padding-right: unquote('calc(#{$sidebar-mini-width} + #{$sidebar-container-padding-x})');
206206
}
207207
}
208208
}
@@ -211,20 +211,20 @@
211211
&.container-mini-right {
212212
> .container,
213213
> .navbar > .container {
214-
@media (min-width: map-get($grid-breakpoints, 'lg')) {
215-
width: map-get($container-max-widths, 'lg') - $sidebar-mini-width;
214+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
215+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-mini-width;
216216
}
217-
@media (min-width: map-get($grid-breakpoints, 'xl')) {
218-
width: map-get($container-max-widths, 'lg') - $sidebar-mini-width;
217+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
218+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-mini-width;
219219
}
220-
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-mini-width)) {
221-
width: map-get($container-max-widths, 'lg');
220+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-mini-width)) {
221+
width: map-get($sidebar-container-max-widths, 'lg');
222222
}
223-
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
224-
width: map-get($container-max-widths, 'xl') - $sidebar-mini-width;
223+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
224+
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-mini-width;
225225
}
226-
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-mini-width)) {
227-
width: map-get($container-max-widths, 'xl');
226+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-mini-width)) {
227+
width: map-get($sidebar-container-max-widths, 'xl');
228228
}
229229
}
230230
}

0 commit comments

Comments
 (0)