Open guylepage3 opened 7 years ago
Go through _custom-variables.scss and adjust to new spacing variables from custom spacing in previous blockstack-bootstrap``v4-alpha2
_custom-variables.scss
blockstack-bootstrap``v4-alpha2
See https://github.com/blockstack/blockstack-bootstrap/issues/64
// 3. Spacing // // Control the default styling of most Bootstrap elements by modifying these // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. $spacer: 1rem !default; $spacer-x: $spacer !default; $spacer-y: $spacer !default; $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: ($spacer-x * .25), y: ($spacer-y * .25) ), 2: ( x: ($spacer-x * .5), y: ($spacer-y * .5) ), 3: ( x: $spacer-x, y: $spacer-y ), 4: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 5: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default; $border-width: 1px !default;
Also to be defined is utilities/_spacing.scss
utilities/_spacing.scss
// Width and height .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } // Margin and Padding .mx-auto { margin-right: auto !important; margin-left: auto !important; } @each $breakpoint in map-keys($grid-breakpoints) { @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $lengths in $spacers { $length-x: map-get($lengths, x); $length-y: map-get($lengths, y); @include media-breakpoint-up($breakpoint) { $min: breakpoint-min($breakpoint, $grid-breakpoints); @if $min { // everything else @media (min-width: $min) { .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } .#{$abbrev}x-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; #{$prop}-left: $length-x !important; } .#{$abbrev}y-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; #{$prop}-bottom: $length-y !important; } } } @else { // xs .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; } .#{$abbrev}x-#{$size} { #{$prop}-right: $length-x !important; #{$prop}-left: $length-x !important; } .#{$abbrev}y-#{$size} { #{$prop}-top: $length-y !important; #{$prop}-bottom: $length-y !important; } } } } } } // Positioning .pos-f-t { position: fixed; top: 0; right: 0; left: 0; z-index: $zindex-navbar-fixed; }
Go through
_custom-variables.scss
and adjust to new spacing variables from custom spacing in previousblockstack-bootstrap``v4-alpha2
See https://github.com/blockstack/blockstack-bootstrap/issues/64
Also to be defined is
utilities/_spacing.scss