Шпаргалка по Bootstrap 5 🚀
Интерактивный список классов, переменных и миксин в Bootstrap 5. 🎁 Единственная шпаргалка по Bootstrap 5, которая вам когда-либо понадобится. 🎊
Скопировано!!! 👍
RFS
-
@mixin _rfs-media-query@mixin _rfs-media-query { @if $rfs-two-dimensional { @if $rfs-mode == max-media-query { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { @content; } } @else { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { @content; } } } @else { @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { @content; } } }
-
@mixin _rfs-rule@mixin _rfs-rule { @if $rfs-class == disable and $rfs-mode == max-media-query { &, .disable-rfs &, &.disable-rfs { @content; } } @else if $rfs-class == enable and $rfs-mode == min-media-query { .enable-rfs &, &.enable-rfs { @content; } } @else { @content; } }
-
@mixin _rfs-media-query-rule@mixin _rfs-media-query-rule { @if $rfs-class == enable { @if $rfs-mode == min-media-query { @content; } @include _rfs-media-query { .enable-rfs &, &.enable-rfs { @content; } } } @else { @if $rfs-class == disable and $rfs-mode == min-media-query { .disable-rfs &, &.disable-rfs { @content; } } @include _rfs-media-query { @content; } } }
-
@mixin rfs($values, $property: font-size)@mixin rfs($values, $property: font-size) { @if $values != null { $val: rfs-value($values); $fluidVal: rfs-fluid-value($values); @if $val == $fluidVal { #{$property}: $val; } @else { @include _rfs-rule { #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal); min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); } @include _rfs-media-query-rule { #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val); } } } }
-
@mixin font-size($value)@mixin font-size($value) { @include rfs($value); }
-
@mixin padding($value)@mixin padding($value) { @include rfs($value, padding); }
-
@mixin padding-top($value)@mixin padding-top($value) { @include rfs($value, padding-top); }
-
@mixin padding-right($value)@mixin padding-right($value) { @include rfs($value, padding-right); }
-
@mixin padding-bottom($value)@mixin padding-bottom($value) { @include rfs($value, padding-bottom); }
-
@mixin padding-left($value)@mixin padding-left($value) { @include rfs($value, padding-left); }
-
@mixin margin($value)@mixin margin($value) { @include rfs($value, margin); }
-
@mixin margin-top($value)@mixin margin-top($value) { @include rfs($value, margin-top); }
-
@mixin margin-right($value)@mixin margin-right($value) { @include rfs($value, margin-right); }
-
@mixin margin-bottom($value)@mixin margin-bottom($value) { @include rfs($value, margin-bottom); }
-
@mixin margin-left($value)@mixin margin-left($value) { @include rfs($value, margin-left); }
Deprecate
-
@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false)@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { @if ($enable-deprecation-messages != false and $ignore-warning != true) { @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; } }
Breakpoints
-
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { @media (min-width: $min) { @content; } } @else { @content; } }
-
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { $max: breakpoint-max($name, $breakpoints); @if $max { @media (max-width: $max) { @content; } } @else { @content; } }
-
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @content; } } @else if $max == null { @include media-breakpoint-up($lower, $breakpoints) { @content; } } @else if $min == null { @include media-breakpoint-down($upper, $breakpoints) { @content; } } }
-
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); $next: breakpoint-next($name, $breakpoints); $max: breakpoint-max($next); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @content; } } @else if $max == null { @include media-breakpoint-up($name, $breakpoints) { @content; } } @else if $min == null { @include media-breakpoint-down($next, $breakpoints) { @content; } } }
Image
-
@mixin img-fluid@mixin img-fluid { max-width: 100%; height: auto; }
Resize
-
@mixin resizable($direction)@mixin resizable($direction) { overflow: auto; resize: $direction; }
Visually Hidden
-
@mixin visually-hidden()@mixin visually-hidden() { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
-
@mixin visually-hidden-focusable()@mixin visually-hidden-focusable() { &:not(:focus):not(:focus-within) { @include visually-hidden(); } }
Reset Text
-
@mixin reset-text@mixin reset-text { font-family: $font-family-base; font-style: normal; font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; }
Text Truncate
-
@mixin text-truncate()@mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Utilities
-
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false)@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { $values: map-get($utility, values); @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { $values: zip($values, $values); } @each $key, $value in $values { $properties: map-get($utility, property); @if type-of($properties) == "string" { $properties: append((), $properties); } $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if($property-class == null, "", $property-class); $state: if(map-has-key($utility, state), map-get($utility, state), ()); $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); @if map-get($utility, rfs) { @if $is-rfs-media-query { $val: rfs-value($value); $value: if($val == rfs-fluid-value($value), null, $val); } @else { $value: rfs-fluid-value($value); } } $is-rtl: map-get($utility, rtl); @if $value != null { @if $is-rtl == false { /* rtl:begin:remove */ } .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { #{$property}: $value if($enable-important-utilities, !important, null); } } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { @each $property in $properties { #{$property}: $value if($enable-important-utilities, !important, null); } } } @if $is-rtl == false { /* rtl:end:remove */ } } } }
Alert
-
@mixin alert-variant($background, $border, $color)@mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); border-color: $border; .alert-link { color: shade-color($color, 20%); } }
Buttons
-
@mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) )@mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) { color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; } .btn-check:focus + &, &:focus { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows { @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } } &:disabled, &.disabled { color: $disabled-color; background-color: $disabled-background; background-image: if($enable-gradients, none, null); border-color: $disabled-border; } }
-
@mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) )@mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) { color: $color; border-color: $color; &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } .btn-check:focus + &, &:focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show { color: $active-color; background-color: $active-background; border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } } } &:disabled, &.disabled { color: $color; background-color: transparent; } }
-
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius)@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); @include border-radius($border-radius, 0); }
Caret
-
@mixin caret-down@mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; }
-
@mixin caret-up@mixin caret-up { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; }
-
@mixin caret-end@mixin caret-end { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; }
-
@mixin caret-start@mixin caret-start { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; }
-
@mixin caret($direction: down)@mixin caret($direction: down) { @if $enable-caret { &::after { display: inline-block; margin-left: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down(); } @else if $direction == up { @include caret-up(); } @else if $direction == end { @include caret-end(); } } @if $direction == start { &::after { display: none; } &::before { display: inline-block; margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @include caret-start(); } } &:empty::after { margin-left: 0; } } }
Pagination
-
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius)@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { .page-link { padding: $padding-y $padding-x; @include font-size($font-size); } .page-item { @if $pagination-margin-start == (-$pagination-border-width) { &:first-child { .page-link { @include border-start-radius($border-radius); } } &:last-child { .page-link { @include border-end-radius($border-radius); } } } @else { .page-link { @include border-radius($border-radius); } } } }
Lists
-
@mixin list-unstyled@mixin list-unstyled { padding-left: 0; list-style: none; }
List Group
-
@mixin list-group-item-variant($state, $background, $color)@mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { &:hover, &:focus { color: $color; background-color: shade-color($background, 10%); } &.active { color: $white; background-color: $color; border-color: $color; } } } }
Forms
-
@mixin form-validation-state-selector($state)@mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, #{if(&, "&", "")}.is-#{$state} { @content; } } @else { #{if(&, "&", "")}.is-#{$state} { @content; } } }
-
@mixin form-validation-state( $state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity) )@mixin form-validation-state( $state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity) ) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; @include font-size($form-feedback-tooltip-font-size); line-height: $form-feedback-tooltip-line-height; color: $tooltip-color; background-color: $tooltip-bg-color; @include border-radius($form-feedback-tooltip-border-radius); } @include form-validation-state-selector($state) { ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } .form-control { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } textarea.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .form-select { @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $form-select-feedback-icon-padding-end; background-image: escape-svg($form-select-indicator), escape-svg($icon); background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; } &:focus { border-color: $color; box-shadow: $focus-box-shadow; } } } .form-check-input { @include form-validation-state-selector($state) { border-color: $color; &:checked { background-color: $color; } &:focus { box-shadow: $focus-box-shadow; } ~ .form-check-label { color: $color; } } } .form-check-inline .form-check-input { ~ .#{$state}-feedback { margin-left: .5em; } } }
Table
-
@mixin table-variant($state, $background)@mixin table-variant($state, $background) { .table-#{$state} { $color: color-contrast(opaque($body-bg, $background)); $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor)); --#{$variable-prefix}table-bg: #{$background}; --#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-active-bg: #{$active-bg}; --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; --#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; color: $color; border-color: mix($color, $background, percentage($table-border-factor)); } }
Border Radius
-
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false)@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: valid-radius($radius); } @else if $fallback-border-radius != false { border-radius: $fallback-border-radius; } }
-
@mixin border-top-radius($radius: $border-radius)@mixin border-top-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); } }
-
@mixin border-end-radius($radius: $border-radius)@mixin border-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); } }
-
@mixin border-bottom-radius($radius: $border-radius)@mixin border-bottom-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } }
-
@mixin border-start-radius($radius: $border-radius)@mixin border-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } }
-
@mixin border-top-start-radius($radius: $border-radius)@mixin border-top-start-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); } }
-
@mixin border-top-end-radius($radius: $border-radius)@mixin border-top-end-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); } }
-
@mixin border-bottom-end-radius($radius: $border-radius)@mixin border-bottom-end-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); } }
-
@mixin border-bottom-start-radius($radius: $border-radius)@mixin border-bottom-start-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); } }
Box Shadow
-
@mixin box-shadow($shadow...)@mixin box-shadow($shadow...) { @if $enable-shadows { $result: (); @each $value in $shadow { @if $value != null { $result: append($result, $value, "comma"); } @if $value == none and length($shadow) > 1 { @warn "The keyword 'none' must be used as a single argument."; } } @if (length($result) > 0) { box-shadow: $result; } } }
Gradients
-
@mixin gradient-bg($color: null)@mixin gradient-bg($color: null) { background-color: $color; @if $enable-gradients { background-image: var(--#{$variable-prefix}gradient); } }
-
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%)@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); }
-
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null)@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); }
-
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg)@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); }
-
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); }
-
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); }
-
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800)@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); }
-
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg)@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); }
Transition
-
@mixin transition($transition...)@mixin transition($transition...) { @if length($transition) == 0 { $transition: $transition-base; } @if length($transition) > 1 { @each $value in $transition { @if $value == null or $value == none { @warn "The keyword 'none' or 'null' must be used as a single argument."; } } } @if $enable-transitions { @if nth($transition, 1) != null { transition: $transition; } @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } } } }
Clearfix
-
@mixin clearfix()@mixin clearfix() { &::after { display: block; clear: both; content: ""; } }
Container
-
@mixin make-container($gutter: $container-padding-x)@mixin make-container($gutter: $container-padding-x) { width: 100%; padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); margin-right: auto; margin-left: auto; }
Grid
-
@mixin make-row($gutter: $grid-gutter-width)@mixin make-row($gutter: $grid-gutter-width) { --#{$variable-prefix}gutter-x: #{$gutter}; --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); }
-
@mixin make-col-ready($gutter: $grid-gutter-width)@mixin make-col-ready($gutter: $grid-gutter-width) { box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); margin-top: var(--#{$variable-prefix}gutter-y); }
-
@mixin make-col($size, $columns: $grid-columns)@mixin make-col($size, $columns: $grid-columns) { flex: 0 0 auto; width: percentage($size / $columns); }
-
@mixin make-col-auto()@mixin make-col-auto() { flex: 0 0 auto; width: auto; }
-
@mixin make-col-offset($size, $columns: $grid-columns)@mixin make-col-offset($size, $columns: $grid-columns) { $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); }
-
@mixin row-cols($count)@mixin row-cols($count) { > * { flex: 0 0 auto; width: 100% / $count; } }
-
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints)@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix} { flex: 1 0 0%; } .row-cols#{$infix}-auto > * { @include make-col-auto(); } @if $grid-row-columns > 0 { @for $i from 1 through $grid-row-columns { .row-cols#{$infix}-#{$i} { @include row-cols($i); } } } .col#{$infix}-auto { @include make-col-auto(); } @if $columns > 0 { @for $i from 1 through $columns { .col#{$infix}-#{$i} { @include make-col($i, $columns); } } @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } } } } @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { --#{$variable-prefix}gutter-x: #{$value}; } .g#{$infix}-#{$key}, .gy#{$infix}-#{$key} { --#{$variable-prefix}gutter-y: #{$value}; } } } } }