Skip to content

Commit

Permalink
Define dedicated variables for bootstrap variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoispluchino
francoispluchino committed Sep 21, 2021
1 parent 070a769 commit b9eb3f4
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 62 deletions.
12 changes: 6 additions & 6 deletions scss/_sidebar-core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@

.fxp-sidebar-group {
> span {
font-family: $headings-font-family;
font-family: $sidebar-headings-font-family;
font-size: $sidebar-default-group-size;
border-top: 1px solid transparent;

Expand Down Expand Up @@ -188,7 +188,7 @@
}

.fxp-sidebar-force-open ~ & {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
z-index: -1;
opacity: 0;
}
Expand Down Expand Up @@ -282,7 +282,7 @@
// Responsive
// -------------------------

@media (max-width: (map-get($grid-breakpoints, 'md') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'md') - 1)) {
.fxp-sidebar {
width: 80%;
-webkit-transform: translate3d(-100%, 0px, 0px);
Expand Down Expand Up @@ -320,15 +320,15 @@
}
}

@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
.fxp-sidebar-force-open {
&.fxp-sidebar:not(.fxp-sidebar-open) + .fxp-sidebar-swipe {
left: 0;
}
}
}

@media (min-width: ((map-get($grid-breakpoints, 'lg') - 1) + 1)) {
@media (min-width: ((map-get($sidebar-grid-breakpoints, 'lg') - 1) + 1)) {
.fxp-sidebar {
&.fxp-sidebar-open-init {
-webkit-transform: translate3d(0px, 0px, 0px);
Expand Down Expand Up @@ -379,7 +379,7 @@
}
}

@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
.fxp-sidebar,
.fxp-sidebar-swipe {
top: 0 !important;
Expand Down
2 changes: 1 addition & 1 deletion scss/_sidebar-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
// Responsive
// -------------------------

@media (min-width: map-get($grid-breakpoints, 'lg')) {
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
.fxp-sidebar.fxp-sidebar-locked {
&.fxp-sidebar-default {
border-color: $sidebar-default-border-color;
Expand Down
18 changes: 18 additions & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
// COMPONENT VARIABLES
// --------------------------------------------------

// Text
// -------------------------

$sidebar-headings-font-family: $headings-font-family !default;

// Z-index master list
// -------------------------

Expand All @@ -21,6 +26,17 @@ $zindex-sidebar-obfuscator: $zindex-sidebar - 1 !default;
$zindex-sidebar-obfuscator-fixed: $zindex-sidebar-fixed - 1 !default;
$zindex-sidebar-obfuscator-static: $zindex-sidebar-static - 1 !default;

// Grid
// -------------------------

$sidebar-grid-gutter-width: $grid-gutter-width !default;

$sidebar-container-padding-x: $sidebar-grid-gutter-width / 2 !default;

$sidebar-grid-breakpoints: $grid-breakpoints !default;

$sidebar-container-max-widths: $container-max-widths !default;

// Custom Sidebar
// -------------------------

Expand All @@ -30,6 +46,8 @@ $sidebar-mini-width: round($sidebar-width / 3) !default;
$sidebar-clickable-swipe-bg: fade($primary, 23%) !default;
$sidebar-obfuscator-bg: rgba(0, 0, 0, 0.5) !default;
$sidebar-obfuscator-duration: '0.3s' !default;
$sidebar-navbar-height: $navbar-height !default;

$sidebar-default-font-size: $font-size-base !default;
$sidebar-default-color: $gray-900 !default;
$sidebar-default-bg: #fff !default;
Expand Down
110 changes: 55 additions & 55 deletions scss/_wrapper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
}

&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
z-index: $zindex-sidebar-obfuscator-fixed;
}
}
}
}

@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
.fxp-sidebar:not(.fxp-sidebar-full-locked) {
&.fxp-sidebar-fixed-top,
&.fxp-sidebar-fixed-bottom {
Expand All @@ -36,7 +36,7 @@
}
}

@media (min-width: map-get($grid-breakpoints, 'lg')) {
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked) {
&.fxp-sidebar-static-top,
&.fxp-sidebar-static-bottom {
Expand All @@ -47,21 +47,21 @@
}

&.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
@media (max-width: (map-get($grid-breakpoints, 'lg') - 1)) {
@media (max-width: (map-get($sidebar-grid-breakpoints, 'lg') - 1)) {
z-index: $zindex-sidebar-obfuscator-static;
}
}
}

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

.fxp-sidebar-menu {
> .fxp-sidebar-group:first-child,
> .fxp-sidebar-item:first-child {
padding-top: $navbar-height + 1;
padding-top: $sidebar-navbar-height + 1;
}
}
}
Expand All @@ -70,17 +70,17 @@
.fxp-sidebar-menu {
> .fxp-sidebar-group:last-child,
> .fxp-sidebar-item:last-child {
padding-bottom: $navbar-height;
padding-bottom: $sidebar-navbar-height;
}
}
}

&.fxp-sidebar-fixed-top {
top: $navbar-height;
top: $sidebar-navbar-height;
}

&.fxp-sidebar-fixed-bottom {
bottom: $navbar-height;
bottom: $sidebar-navbar-height;
}
}

Expand All @@ -97,7 +97,7 @@

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

> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
Expand All @@ -107,7 +107,7 @@
}

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

> .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
Expand All @@ -120,37 +120,37 @@
&.container-force-open-right {
> .container,
> .navbar > .container {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: map-get($container-max-widths, 'lg') - $sidebar-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
}
@media (min-width: map-get($grid-breakpoints, 'xl')) {
width: map-get($container-max-widths, 'lg') - $sidebar-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-width)) {
width: map-get($container-max-widths, 'lg');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-width)) {
width: map-get($sidebar-container-max-widths, 'lg');
}
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
width: map-get($container-max-widths, 'xl') - $sidebar-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-width)) {
width: map-get($container-max-widths, 'xl');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-width)) {
width: map-get($sidebar-container-max-widths, 'xl');
}
}
}

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

&.container-force-open-right {
> .navbar > .container-fluid {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
padding-right: unquote('calc(#{$sidebar-width} + #{$container-padding-x})');
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
padding-right: unquote('calc(#{$sidebar-width} + #{$sidebar-container-padding-x})');
}
}
}
Expand All @@ -159,50 +159,50 @@
&.container-force-open-left.container-force-open-right {
> .container,
> .navbar > .container {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: map-get($container-max-widths, 'lg') - ($sidebar-width * 2);
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
}
@media (min-width: map-get($grid-breakpoints, 'xl')) {
width: map-get($container-max-widths, 'lg') - ($sidebar-width * 2);
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
width: map-get($sidebar-container-max-widths, 'lg') - ($sidebar-width * 2);
}
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-width)) {
width: map-get($container-max-widths, 'lg') - $sidebar-width;
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-width)) {
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xl') + ($sidebar-width * 2))) {
width: map-get($container-max-widths, 'lg');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + ($sidebar-width * 2))) {
width: map-get($sidebar-container-max-widths, 'lg');
}
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
width: map-get($container-max-widths, 'xl') - ($sidebar-width * 2);
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
width: map-get($sidebar-container-max-widths, 'xl') - ($sidebar-width * 2);
}
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-width)) {
width: map-get($container-max-widths, 'xl') - $sidebar-width;
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-width)) {
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xxl') + ($sidebar-width * 2))) {
width: map-get($container-max-widths, 'xl');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + ($sidebar-width * 2))) {
width: map-get($sidebar-container-max-widths, 'xl');
}
}
}

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

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

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

> .navbar > .container-fluid {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
padding-right: unquote('calc(#{$sidebar-mini-width} + #{$container-padding-x})');
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
padding-right: unquote('calc(#{$sidebar-mini-width} + #{$sidebar-container-padding-x})');
}
}
}
Expand All @@ -211,20 +211,20 @@
&.container-mini-right {
> .container,
> .navbar > .container {
@media (min-width: map-get($grid-breakpoints, 'lg')) {
width: map-get($container-max-widths, 'lg') - $sidebar-mini-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'lg')) {
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-mini-width;
}
@media (min-width: map-get($grid-breakpoints, 'xl')) {
width: map-get($container-max-widths, 'lg') - $sidebar-mini-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'xl')) {
width: map-get($sidebar-container-max-widths, 'lg') - $sidebar-mini-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xl') + $sidebar-mini-width)) {
width: map-get($container-max-widths, 'lg');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xl') + $sidebar-mini-width)) {
width: map-get($sidebar-container-max-widths, 'lg');
}
@media (min-width: map-get($grid-breakpoints, 'xxl')) {
width: map-get($container-max-widths, 'xl') - $sidebar-mini-width;
@media (min-width: map-get($sidebar-grid-breakpoints, 'xxl')) {
width: map-get($sidebar-container-max-widths, 'xl') - $sidebar-mini-width;
}
@media (min-width: (map-get($grid-breakpoints, 'xxl') + $sidebar-mini-width)) {
width: map-get($container-max-widths, 'xl');
@media (min-width: (map-get($sidebar-grid-breakpoints, 'xxl') + $sidebar-mini-width)) {
width: map-get($sidebar-container-max-widths, 'xl');
}
}
}
Expand Down

0 comments on commit b9eb3f4

Please sign in to comment.