芝麻web文件管理V1.00
编辑当前文件:/home/asmplong/www/mixins.tar
_box-shadow.scss 0000666 00000000127 15017045536 0007665 0 ustar 00 @mixin box-shadow($shadow...) { @if $enable-shadows { box-shadow: $shadow; } } _buttons.scss 0000666 00000006156 15017045536 0007320 0 ustar 00 // Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { color: color-yiq($background); @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); @include hover { color: color-yiq($hover-background); @include gradient-bg($hover-background); border-color: $hover-border; } &:focus, &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); } } // Disabled comes first so active can properly restyle &.disabled, &:disabled { color: color-yiq($background); background-color: $background; border-color: $border; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; @if $enable-gradients { background-image: none; // Remove the gradient for the pressed/active state } border-color: $active-border; &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); } @else { box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); } } } } @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; background-color: transparent; background-image: none; border-color: $color; &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } &:focus, &.focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } &.disabled, &:disabled { color: $color; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { 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); } } } } // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; // Manually declare to provide an override to the browser default @if $enable-rounded { border-radius: $border-radius; } @else { border-radius: 0; } } _badge.scss 0000666 00000000346 15017045536 0006657 0 ustar 00 @mixin badge-variant($bg) { color: color-yiq($bg); background-color: $bg; &[href] { @include hover-focus { color: color-yiq($bg); text-decoration: none; background-color: darken($bg, 10%); } } } _transition.scss 0000666 00000000300 15017045536 0007775 0 ustar 00 @mixin transition($transition...) { @if $enable-transitions { @if length($transition) == 0 { transition: $transition-base; } @else { transition: $transition; } } } _lists.scss 0000666 00000000250 15017045536 0006745 0 ustar 00 // Lists // Unstyled keeps list items block level, just removes default browser padding and list-style @mixin list-unstyled { padding-left: 0; list-style: none; } _size.scss 0000666 00000000142 15017045536 0006561 0 ustar 00 // Sizing shortcuts @mixin size($width, $height: $width) { width: $width; height: $height; } _clearfix.scss 0000666 00000000135 15017045536 0007406 0 ustar 00 @mixin clearfix() { &::after { display: block; clear: both; content: ""; } } _float.scss 0000666 00000000301 15017045536 0006711 0 ustar 00 // stylelint-disable declaration-no-important @mixin float-left { float: left !important; } @mixin float-right { float: right !important; } @mixin float-none { float: none !important; } _visibility.scss 0000666 00000000206 15017045536 0007777 0 ustar 00 // stylelint-disable declaration-no-important // Visibility @mixin invisible($visibility) { visibility: $visibility !important; } _border-radius.scss 0000666 00000001322 15017045536 0010352 0 ustar 00 // Single side border-radius @mixin border-radius($radius: $border-radius) { @if $enable-rounded { border-radius: $radius; } } @mixin border-top-radius($radius) { @if $enable-rounded { border-top-left-radius: $radius; border-top-right-radius: $radius; } } @mixin border-right-radius($radius) { @if $enable-rounded { border-top-right-radius: $radius; border-bottom-right-radius: $radius; } } @mixin border-bottom-radius($radius) { @if $enable-rounded { border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; } } @mixin border-left-radius($radius) { @if $enable-rounded { border-top-left-radius: $radius; border-bottom-left-radius: $radius; } } _screen-reader.scss 0000666 00000001412 15017045536 0010327 0 ustar 00 // Only display content to screen readers // // See: http://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; } // Use in conjunction with .sr-only to only display content when it's focused. // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // // Credit: HTML5 Boilerplate @mixin sr-only-focusable { &:active, &:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; clip-path: none; } } _text-truncate.scss 0000666 00000000250 15017045536 0010416 0 ustar 00 // Text truncate // Requires inline-block or block for proper styling @mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } _breakpoints.scss 0000666 00000010564 15017045536 0010141 0 ustar 00 // Breakpoint viewport sizes and media queries. // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. // // >> breakpoint-next(sm) // md // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); } // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.02px // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. // Useful for making responsive utilities. // // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "" (Returns a blank string) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { @media (min-width: $min) { @content; } } @else { @content; } } // Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Makes the @content apply to the given breakpoint and narrower. @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { $max: breakpoint-max($name, $breakpoints); @if $max { @media (max-width: $max) { @content; } } @else { @content; } } // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max 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; } } } // Media between the breakpoint's minimum and maximum widths. // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); $max: breakpoint-max($name, $breakpoints); @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($name, $breakpoints) { @content; } } } _alert.scss 0000666 00000000362 15017045536 0006722 0 ustar 00 @mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); border-color: $border; hr { border-top-color: darken($border, 5%); } .alert-link { color: darken($color, 10%); } } _image.scss 0000666 00000002224 15017045536 0006674 0 ustar 00 // Image Mixins // - Responsive image // - Retina image // Responsive image // // Keep images from scaling beyond the width of their parents. @mixin img-fluid { // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 2: Override the height to auto, otherwise images will be stretched // when setting a width and height attribute on the img element. height: auto; } // Retina image // // Short retina mixin for setting background-image and -size. // stylelint-disable indentation, media-query-list-comma-newline-after @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } } _table-row.scss 0000666 00000001207 15017045536 0007506 0 ustar 00 // Tables @mixin table-row-variant($state, $background) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { &, > th, > td { background-color: $background; } } // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. .table-hover { $hover-background: darken($background, 5%); .table-#{$state} { @include hover { background-color: $hover-background; > td, > th { background-color: $hover-background; } } } } } _nav-divider.scss 0000666 00000000334 15017045536 0010022 0 ustar 00 // Horizontal dividers // // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($color: #e5e5e5) { height: 0; margin: ($spacer / 2) 0; overflow: hidden; border-top: 1px solid $color; } _text-emphasis.scss 0000666 00000000403 15017045536 0010402 0 ustar 00 // stylelint-disable declaration-no-important // Typography @mixin text-emphasis-variant($parent, $color) { #{$parent} { color: $color !important; } a#{$parent} { @include hover-focus { color: darken($color, 10%) !important; } } } _grid.scss 0000666 00000003106 15017045536 0006537 0 ustar 00 /// Grid system // // Generate semantic grid columns with these mixins. @mixin make-container() { width: 100%; padding-right: ($grid-gutter-width / 2); padding-left: ($grid-gutter-width / 2); margin-right: auto; margin-left: auto; } // For each breakpoint, define the maximum width of the container in a media query @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; } } } @mixin make-row() { display: flex; flex-wrap: wrap; margin-right: ($grid-gutter-width / -2); margin-left: ($grid-gutter-width / -2); } @mixin make-col-ready() { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; min-height: 1px; // Prevent collapsing padding-right: ($grid-gutter-width / 2); padding-left: ($grid-gutter-width / 2); } @mixin make-col($size, $columns: $grid-columns) { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. max-width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) { $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); } _hover.scss 0000666 00000001417 15017045536 0006740 0 ustar 00 // stylelint-disable indentation // Hover mixin and `$enable-hover-media-query` are deprecated. // // Origally added during our alphas and maintained during betas, this mixin was // designed to prevent `:hover` stickiness on iOS—an issue where hover styles // would persist after initial touch. // // For backward compatibility, we've kept these mixins and updated them to // always return their regular psuedo-classes instead of a shimmed media query. // // Issue: https://github.com/twbs/bootstrap/issues/25195 @mixin hover { &:hover { @content; } } @mixin hover-focus { &:hover, &:focus { @content; } } @mixin plain-hover-focus { &, &:hover, &:focus { @content; } } @mixin hover-focus-active { &:hover, &:focus, &:active { @content; } } _forms.scss 0000666 00000006177 15017045536 0006753 0 ustar 00 // Form control focus state // // Generate a customized focus state and for any input with the specified color, // which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on // WebKit's default styles, but applicable to a wider range of browsers. Its // usability and accessibility should be taken into account with any change. // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. @mixin form-control-focus() { &:focus { color: $input-focus-color; background-color: $input-focus-bg; border-color: $input-focus-border-color; outline: 0; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $input-box-shadow, $input-focus-box-shadow; } @else { box-shadow: $input-focus-box-shadow; } } } @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; font-size: $form-feedback-font-size; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible padding: .5rem; margin-top: .1rem; font-size: .875rem; line-height: 1; color: #fff; background-color: rgba($color, .8); border-radius: .2rem; } .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .form-check-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .form-check-label { color: $color; } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } } } .custom-control-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .custom-control-label { color: $color; &::before { background-color: lighten($color, 25%); } } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } &:checked { ~ .custom-control-label::before { @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); } } } } // custom file .custom-file-input { .was-validated &:#{$state}, &.is-#{$state} { ~ .custom-file-label { border-color: $color; &::before { border-color: inherit; } } ~ .#{$state}-feedback, ~ .#{$state}-tooltip { display: block; } &:focus { ~ .custom-file-label { box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } } } } _reset-text.scss 0000666 00000001043 15017045536 0007714 0 ustar 00 @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; } _pagination.scss 0000666 00000000705 15017045536 0007745 0 ustar 00 // Pagination @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; } .page-item { &:first-child { .page-link { @include border-left-radius($border-radius); } } &:last-child { .page-link { @include border-right-radius($border-radius); } } } } _navbar-align.scss 0000666 00000000601 15017045536 0010150 0 ustar 00 // Navbar vertical align // // Vertically center elements in the navbar. // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` // to calculate the appropriate top margin. // @mixin navbar-vertical-align($element-height) { // margin-top: (($navbar-height - $element-height) / 2); // margin-bottom: (($navbar-height - $element-height) / 2); // } _resize.scss 0000666 00000000312 15017045536 0007107 0 ustar 00 // Resize anything @mixin resizable($direction) { overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` resize: $direction; // Options: horizontal, vertical, both } _background-variant.scss 0000666 00000000732 15017045536 0011375 0 ustar 00 // stylelint-disable declaration-no-important // Contextual backgrounds @mixin bg-variant($parent, $color) { #{$parent} { background-color: $color !important; } a#{$parent}, button#{$parent} { @include hover-focus { background-color: darken($color, 10%) !important; } } } @mixin bg-gradient-variant($parent, $color) { #{$parent} { background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; } } _list-group.scss 0000666 00000000655 15017045536 0007725 0 ustar 00 // List Groups @mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; background-color: $background; &.list-group-item-action { @include hover-focus { color: $color; background-color: darken($background, 5%); } &.active { color: #fff; background-color: $color; border-color: $color; } } } } _gradients.scss 0000666 00000003750 15017045536 0007577 0 ustar 00 // Gradients @mixin gradient-bg($color) { @if $enable-gradients { background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; } @else { background-color: $color; } } // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } @mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } @mixin gradient-radial($inner-color: #555, $outer-color: #333) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } _text-hide.scss 0000666 00000000347 15017045536 0007511 0 ustar 00 // CSS image replacement @mixin text-hide() { // stylelint-disable-next-line font-family-no-missing-generic-family-keyword font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } _caret.scss 0000666 00000002663 15017045536 0006717 0 ustar 00 @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 { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; } @mixin caret-right { border-top: $caret-width solid transparent; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @mixin caret-left { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; } @mixin caret($direction: down) { @if $enable-caret { &::after { display: inline-block; width: 0; height: 0; margin-left: $caret-width * .85; vertical-align: $caret-width * .85; content: ""; @if $direction == down { @include caret-down; } @else if $direction == up { @include caret-up; } @else if $direction == right { @include caret-right; } } @if $direction == left { &::after { display: none; } &::before { display: inline-block; width: 0; height: 0; margin-right: $caret-width * .85; vertical-align: $caret-width * .85; content: ""; @include caret-left; } } &:empty::after { margin-left: 0; } } } _grid-framework.scss 0000666 00000003553 15017045536 0010540 0 ustar 00 // Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { // Common properties for all breakpoints %grid-column { position: relative; width: 100%; min-height: 1px; // Prevent columns from collapsing when empty padding-right: ($gutter / 2); padding-left: ($gutter / 2); } @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); // Allow columns to stretch full width below their breakpoints @for $i from 1 through $columns { .col#{$infix}-#{$i} { @extend %grid-column; } } .col#{$infix}, .col#{$infix}-auto { @extend %grid-column; } @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col#{$infix}-auto { flex: 0 0 auto; width: auto; max-width: none; // Reset earlier grid tiers } @for $i from 1 through $columns { .col#{$infix}-#{$i} { @include make-col($i, $columns); } } .order#{$infix}-first { order: -1; } .order#{$infix}-last { order: $columns + 1; } @for $i from 0 through $columns { .order#{$infix}-#{$i} { order: $i; } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } } } } } }