diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
7 files changed, 151 insertions, 10 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index c06fa4a98..b67499668 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -11,7 +11,7 @@ $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-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, diff --git a/vendor/twbs/bootstrap/scss/mixins/_color-scheme.scss b/vendor/twbs/bootstrap/scss/mixins/_color-scheme.scss new file mode 100644 index 000000000..90497aa0a --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_color-scheme.scss @@ -0,0 +1,7 @@ +// scss-docs-start mixin-color-scheme +@mixin color-scheme($name) { + @media (prefers-color-scheme: #{$name}) { + @content; + } +} +// scss-docs-end mixin-color-scheme diff --git a/vendor/twbs/bootstrap/scss/mixins/_container.scss b/vendor/twbs/bootstrap/scss/mixins/_container.scss new file mode 100644 index 000000000..ee6044d0d --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_container.scss @@ -0,0 +1,9 @@ +// Container mixins + +@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; +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index d757eac74..ff6941c46 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -1,4 +1,4 @@ -/// Grid system +// Grid system // // Generate semantic grid columns with these mixins. @@ -8,8 +8,8 @@ display: flex; flex-wrap: wrap; margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list - margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list - margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list + margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list + margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -21,15 +21,16 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list + padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list margin-top: var(--#{$variable-prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: percentage(divide($size, $columns)); + } @else { flex: 1 1 0; max-width: 100%; @@ -42,7 +43,7 @@ } @mixin make-col-offset($size, $columns: $grid-columns) { - $num: $size / $columns; + $num: divide($size, $columns); margin-left: if($num == 0, 0, percentage($num)); } @@ -54,7 +55,7 @@ @mixin row-cols($count) { > * { flex: 0 0 auto; - width: 100% / $count; + width: divide(100%, $count); } } @@ -65,8 +66,8 @@ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { + // .row-cols defaults must all appear before .col overrides so they can be overridden. $infix: breakpoint-infix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { @@ -84,7 +85,13 @@ } } } + } + } + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix}-auto { @include make-col-auto(); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss b/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss new file mode 100644 index 000000000..9fd0fb02a --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_table-variants.scss @@ -0,0 +1,21 @@ +// scss-docs-start table-variant +@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)); + } +} +// scss-docs-end table-variant diff --git a/vendor/twbs/bootstrap/scss/mixins/_utilities.scss b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss new file mode 100644 index 000000000..4d2370a0b --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_utilities.scss @@ -0,0 +1,68 @@ +// Utility generator +// Used to generate utilities & print utilities +@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { + $values: map-get($utility, values); + + // If the values are a list or string, convert it into a map + @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); + + // Multiple properties are possible, for example with vertical or horizontal margins or paddings + @if type-of($properties) == "string" { + $properties: append((), $properties); + } + + // Use custom class if present + $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); + $property-class: if($property-class == null, "", $property-class); + + // State params to generate pseudo-classes + $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); + + // Don't prefix if value key is null (eg. with shadow class) + $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); + + @if map-get($utility, rfs) { + // Inside the media query + @if $is-rfs-media-query { + $val: rfs-value($value); + + // Do not render anything if fluid and non fluid values are the same + $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 */ + } + } + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss b/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss new file mode 100644 index 000000000..ed7bc9c13 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_visually-hidden.scss @@ -0,0 +1,29 @@ +// stylelint-disable declaration-no-important + +// Hide content visually while keeping it accessible to assistive technologies +// +// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ +// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ + +@mixin visually-hidden() { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +// Use to only display content when it's focused, or one of its child elements is focused +// (i.e. when focus is within the element/container that the class was applied to) +// +// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 + +@mixin visually-hidden-focusable() { + &:not(:focus):not(:focus-within) { + @include visually-hidden(); + } +} |