Skip to content

Commit 088cfe8

Browse files
francoispluchinofrancoispluchino
committed
Add width variable for sidebar right
1 parent 73fc5c6 commit 088cfe8

File tree

3 files changed

+50
-18
lines changed

3 files changed

+50
-18
lines changed

‎scss/_sidebar-core.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,9 @@
203203
right: 0;
204204
border-right: none;
205205
border-left: 1px solid transparent;
206-
-webkit-transform: translate3d($sidebar-width, 0px, 0px);
207-
transform: translate3d($sidebar-width, 0px, 0px);
206+
width: $sidebar-right-width;
207+
-webkit-transform: translate3d($sidebar-right-width, 0px, 0px);
208+
transform: translate3d($sidebar-right-width, 0px, 0px);
208209

209210
&.fxp-sidebar-open {
210211
-webkit-transform: translate3d(0px, 0px, 0px);
@@ -238,7 +239,7 @@
238239

239240
&.fxp-sidebar-open + .fxp-sidebar-swipe,
240241
&.fxp-sidebar-force-open + .fxp-sidebar-swipe {
241-
right: $sidebar-width;
242+
right: $sidebar-right-width;
242243
}
243244
}
244245

@@ -340,8 +341,8 @@
340341
transform: translate3d((-$sidebar-width + $sidebar-mini-width), 0px, 0px);
341342

342343
&.fxp-sidebar-right {
343-
-webkit-transform: translate3d(($sidebar-width - $sidebar-mini-width), 0px, 0px);
344-
transform: translate3d(($sidebar-width - $sidebar-mini-width), 0px, 0px);
344+
-webkit-transform: translate3d(($sidebar-right-width - $sidebar-mini-width), 0px, 0px);
345+
transform: translate3d(($sidebar-right-width - $sidebar-mini-width), 0px, 0px);
345346
}
346347
}
347348
}

‎scss/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ $sidebar-mobile-breakpoint: 'md' !default;
4646
$sidebar-prefix: 'fxp-' !default;
4747
$sidebar-width: 210px !default;
4848
$sidebar-mini-width: round($sidebar-width / 3) !default;
49+
$sidebar-right-width: $sidebar-width !default;
50+
$sidebar-right-mini-width: round($sidebar-right-width / 3) !default;
4951
$sidebar-clickable-swipe-bg: fade($primary, 23%) !default;
5052
$sidebar-obfuscator-bg: rgba(0, 0, 0, 0.5) !default;
5153
$sidebar-obfuscator-duration: '0.3s' !default;

‎scss/_wrapper.scss‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -108,16 +108,15 @@
108108

109109
&.container-force-open-right {
110110
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
111-
padding-right: $sidebar-width;
111+
padding-right: $sidebar-right-width;
112112

113113
> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
114-
margin-right: -$sidebar-width;
114+
margin-right: -$sidebar-right-width;
115115
}
116116
}
117117
}
118118

119-
&.container-force-open-left,
120-
&.container-force-open-right {
119+
&.container-force-open-left {
121120
> .container,
122121
> .navbar > .container {
123122
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
@@ -147,6 +146,36 @@
147146
}
148147
}
149148

149+
&.container-force-open-right {
150+
> .container,
151+
> .navbar > .container {
152+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
153+
width: map-get($sidebar-container-max-widths, 'xs') - $sidebar-right-width;
154+
}
155+
@media (min-width: map-get($sidebar-grid-breakpoints, 'sm')) {
156+
width: map-get($sidebar-container-max-widths, 'sm') - $sidebar-right-width;
157+
}
158+
@media (min-width: map-get($sidebar-grid-breakpoints, 'md')) {
159+
width: map-get($sidebar-container-max-widths, 'md') - $sidebar-right-width;
160+
}
161+
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
162+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-right-width;
163+
}
164+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
165+
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-right-width;
166+
}
167+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-right-width)) {
168+
width: map-get($sidebar-container-max-widths, 'lg');
169+
}
170+
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
171+
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-right-width;
172+
}
173+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-right-width)) {
174+
width: map-get($sidebar-container-max-widths, 'xl');
175+
}
176+
}
177+
}
178+
150179
&.container-full-locked {
151180
&.container-force-open-left {
152181
> .navbar > .container-fluid {
@@ -159,7 +188,7 @@
159188
&.container-force-open-right {
160189
> .navbar > .container-fluid {
161190
@media (min-width: map-get($sidebar-grid-breakpoints, $sidebar-force-open-breakpoint)) {
162-
padding-right: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
191+
padding-right: unquote('calc(#{$sidebar-right-width} + #{$sidebar-container-padding-x})');
163192
}
164193
}
165194
}
@@ -169,33 +198,33 @@
169198
> .container,
170199
> .navbar > .container {
171200
@media (min-width: map-get($sidebar-grid-breakpoints, 'xs')) {
172-
width: map-get($sidebar-container-max-widths, 'xs') - ($sidebar-width * 2);
201+
width: map-get($sidebar-container-max-widths, 'xs') - ($sidebar-width + $sidebar-right-width);
173202
}
174203
@media (min-width: map-get($sidebar-grid-breakpoints, 'sm')) {
175-
width: map-get($sidebar-container-max-widths, 'sm') - ($sidebar-width * 2);
204+
width: map-get($sidebar-container-max-widths, 'sm') - ($sidebar-width + $sidebar-right-width);
176205
}
177206
@media (min-width: map-get($sidebar-grid-breakpoints, 'md')) {
178-
width: map-get($sidebar-container-max-widths, 'md') - ($sidebar-width * 2);
207+
width: map-get($sidebar-container-max-widths, 'md') - ($sidebar-width + $sidebar-right-width);
179208
}
180209
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
181-
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
210+
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width + $sidebar-right-width);
182211
}
183212
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
184-
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
213+
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width + $sidebar-right-width);
185214
}
186215
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-width)) {
187216
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
188217
}
189-
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + ($sidebar-width * 2))) {
218+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + ($sidebar-width + $sidebar-right-width))) {
190219
width: map-get($sidebar-container-max-widths, 'lg');
191220
}
192221
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
193-
width: map-get($sidebar-container-max-widths, 'xl') - ($sidebar-width * 2);
222+
width: map-get($sidebar-container-max-widths, 'xl') - ($sidebar-width + $sidebar-right-width);
194223
}
195224
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-width)) {
196225
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-width;
197226
}
198-
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + ($sidebar-width * 2))) {
227+
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + ($sidebar-width + $sidebar-right-width))) {
199228
width: map-get($sidebar-container-max-widths, 'xl');
200229
}
201230
}

0 commit comments

Comments
 (0)