mirror of
https://github.com/retspen/webvirtcloud
synced 2025-07-31 12:41:08 +00:00
catborise
GitHub
parent
1663a49cee
commit
073b7b6717
244 changed files with 9494 additions and 8597 deletions
8
dev/scss/bootstrap/mixins/_alert.scss
Normal file → Executable file
8
dev/scss/bootstrap/mixins/_alert.scss
Normal file → Executable file
|
|
@ -1,13 +1,11 @@
|
|||
// scss-docs-start alert-variant-mixin
|
||||
@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%);
|
||||
color: shade-color($color, 20%);
|
||||
}
|
||||
}
|
||||
// scss-docs-end alert-variant-mixin
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Contextual backgrounds
|
||||
|
||||
@mixin bg-variant($parent, $color, $ignore-warning: false) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus() {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
|
||||
#{$parent} {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||
}
|
||||
@include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@mixin badge-variant($bg) {
|
||||
color: color-yiq($bg);
|
||||
background-color: $bg;
|
||||
|
||||
@at-root a#{&} {
|
||||
@include hover-focus() {
|
||||
color: color-yiq($bg);
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
18
dev/scss/bootstrap/mixins/_border-radius.scss
Normal file → Executable file
18
dev/scss/bootstrap/mixins/_border-radius.scss
Normal file → Executable file
|
|
@ -14,6 +14,7 @@
|
|||
@return $return;
|
||||
}
|
||||
|
||||
// scss-docs-start border-radius-mixins
|
||||
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
||||
@if $enable-rounded {
|
||||
border-radius: valid-radius($radius);
|
||||
|
|
@ -23,54 +24,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin border-top-radius($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-right-radius($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) {
|
||||
@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-left-radius($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-left-radius($radius) {
|
||||
@mixin border-top-start-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-right-radius($radius) {
|
||||
@mixin border-top-end-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
@mixin border-bottom-end-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
@mixin border-bottom-start-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
// scss-docs-end border-radius-mixins
|
||||
|
|
|
|||
16
dev/scss/bootstrap/mixins/_box-shadow.scss
Normal file → Executable file
16
dev/scss/bootstrap/mixins/_box-shadow.scss
Normal file → Executable file
|
|
@ -2,17 +2,15 @@
|
|||
@if $enable-shadows {
|
||||
$result: ();
|
||||
|
||||
@if (length($shadow) == 1) {
|
||||
// We can pass `@include box-shadow(none);`
|
||||
$result: $shadow;
|
||||
} @else {
|
||||
// Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
|
||||
@for $i from 1 through length($shadow) {
|
||||
@if nth($shadow, $i) != "none" {
|
||||
$result: append($result, nth($shadow, $i), "comma");
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
24
dev/scss/bootstrap/mixins/_breakpoints.scss
Normal file → Executable file
24
dev/scss/bootstrap/mixins/_breakpoints.scss
Normal file → Executable file
|
|
@ -16,7 +16,10 @@
|
|||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
@if not $n {
|
||||
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
||||
}
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
|
|
@ -28,18 +31,18 @@
|
|||
@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.
|
||||
// Maximum breakpoint width.
|
||||
// The maximum value is reduced by 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))
|
||||
// >> breakpoint-max(md, (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) - .02, null);
|
||||
$max: map-get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
||||
|
|
@ -104,8 +107,9 @@
|
|||
// 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);
|
||||
$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) {
|
||||
|
|
@ -116,7 +120,7 @@
|
|||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
@include media-breakpoint-down($name, $breakpoints) {
|
||||
@include media-breakpoint-down($next, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
123
dev/scss/bootstrap/mixins/_buttons.scss
Normal file → Executable file
123
dev/scss/bootstrap/mixins/_buttons.scss
Normal file → Executable file
|
|
@ -3,94 +3,110 @@
|
|||
// 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);
|
||||
// scss-docs-start btn-variant-mixin
|
||||
@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);
|
||||
|
||||
@include hover() {
|
||||
color: color-yiq($hover-background);
|
||||
&:hover {
|
||||
color: $hover-color;
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: color-yiq($hover-background);
|
||||
.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-yiq($background), $border, 15%), .5));
|
||||
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: color-yiq($background);
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $disabled-color;
|
||||
background-color: $disabled-background;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none, null);
|
||||
border-color: $disabled-border;
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-variant-mixin
|
||||
|
||||
// scss-docs-start btn-outline-variant-mixin
|
||||
@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;
|
||||
|
||||
@include hover() {
|
||||
&:hover {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
.btn-check: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);
|
||||
.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 and $btn-active-box-shadow != none {
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
|
|
@ -98,13 +114,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// scss-docs-end btn-outline-variant-mixin
|
||||
|
||||
// scss-docs-start btn-size-mixin
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
@include font-size($font-size);
|
||||
line-height: $line-height;
|
||||
// Manually declare to provide an override to the browser default
|
||||
@include border-radius($border-radius, 0);
|
||||
}
|
||||
// scss-docs-end btn-size-mixin
|
||||
|
|
|
|||
18
dev/scss/bootstrap/mixins/_caret.scss
Normal file → Executable file
18
dev/scss/bootstrap/mixins/_caret.scss
Normal file → Executable file
|
|
@ -1,25 +1,26 @@
|
|||
@mixin caret-down() {
|
||||
// scss-docs-start caret-mixins
|
||||
@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-right() {
|
||||
@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-left() {
|
||||
@mixin caret-start {
|
||||
border-top: $caret-width solid transparent;
|
||||
border-right: $caret-width solid;
|
||||
border-bottom: $caret-width solid transparent;
|
||||
|
|
@ -36,12 +37,12 @@
|
|||
@include caret-down();
|
||||
} @else if $direction == up {
|
||||
@include caret-up();
|
||||
} @else if $direction == right {
|
||||
@include caret-right();
|
||||
} @else if $direction == end {
|
||||
@include caret-end();
|
||||
}
|
||||
}
|
||||
|
||||
@if $direction == left {
|
||||
@if $direction == start {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
margin-right: $caret-spacing;
|
||||
vertical-align: $caret-vertical-align;
|
||||
content: "";
|
||||
@include caret-left();
|
||||
@include caret-start();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,3 +61,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end caret-mixins
|
||||
|
|
|
|||
2
dev/scss/bootstrap/mixins/_clearfix.scss
Normal file → Executable file
2
dev/scss/bootstrap/mixins/_clearfix.scss
Normal file → Executable file
|
|
@ -1,3 +1,4 @@
|
|||
// scss-docs-start clearfix
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
display: block;
|
||||
|
|
@ -5,3 +6,4 @@
|
|||
content: "";
|
||||
}
|
||||
}
|
||||
// scss-docs-end clearfix
|
||||
|
|
|
|||
7
dev/scss/bootstrap/mixins/_color-scheme.scss
Executable file
7
dev/scss/bootstrap/mixins/_color-scheme.scss
Executable file
|
|
@ -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
|
||||
9
dev/scss/bootstrap/mixins/_container.scss
Executable file
9
dev/scss/bootstrap/mixins/_container.scss
Executable file
|
|
@ -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;
|
||||
}
|
||||
0
dev/scss/bootstrap/mixins/_deprecate.scss
Normal file → Executable file
0
dev/scss/bootstrap/mixins/_deprecate.scss
Normal file → Executable file
|
|
@ -1,14 +0,0 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@mixin float-left() {
|
||||
float: left !important;
|
||||
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-right() {
|
||||
float: right !important;
|
||||
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-none() {
|
||||
float: none !important;
|
||||
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
133
dev/scss/bootstrap/mixins/_forms.scss
Normal file → Executable file
133
dev/scss/bootstrap/mixins/_forms.scss
Normal file → Executable file
|
|
@ -1,33 +1,7 @@
|
|||
// 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($ignore-warning: false) {
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
||||
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
||||
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
||||
|
||||
// scss-docs-start form-validation-mixins
|
||||
@mixin form-validation-state-selector($state) {
|
||||
@if ($state == "valid" or $state == "invalid") {
|
||||
.was-validated #{if(&, "&", "")}:#{$state},
|
||||
|
|
@ -41,19 +15,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin form-validation-state($state, $color, $icon) {
|
||||
@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 $input-btn-focus-blur $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%;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
|
|
@ -61,16 +42,9 @@
|
|||
margin-top: .1rem;
|
||||
@include font-size($form-feedback-tooltip-font-size);
|
||||
line-height: $form-feedback-tooltip-line-height;
|
||||
color: color-yiq($color);
|
||||
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
||||
color: $tooltip-color;
|
||||
background-color: $tooltip-bg-color;
|
||||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
|
||||
// See https://github.com/twbs/bootstrap/pull/31557
|
||||
// Align tooltip to form elements
|
||||
.form-row > .col > &,
|
||||
.form-row > [class*="col-"] > & {
|
||||
left: $form-grid-gutter-width / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@include form-validation-state-selector($state) {
|
||||
|
|
@ -94,7 +68,7 @@
|
|||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,77 +83,62 @@
|
|||
}
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
.form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
@if $enable-validation-icons {
|
||||
padding-right: $custom-select-feedback-icon-padding-right;
|
||||
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
|
||||
&:not([multiple]):not([size]),
|
||||
&:not([multiple])[size="1"] {
|
||||
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: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
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;
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-inline .form-check-input {
|
||||
~ .#{$state}-feedback {
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
.input-group .form-control,
|
||||
.input-group .form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
&::before {
|
||||
border-color: $color;
|
||||
}
|
||||
@if $state == "valid" {
|
||||
z-index: 1;
|
||||
} @else if $state == "invalid" {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
border-color: lighten($color, 10%);
|
||||
@include gradient-bg(lighten($color, 10%));
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
|
||||
&:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom file
|
||||
.custom-file-input {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end form-validation-mixins
|
||||
|
|
|
|||
24
dev/scss/bootstrap/mixins/_gradients.scss
Normal file → Executable file
24
dev/scss/bootstrap/mixins/_gradients.scss
Normal file → Executable file
|
|
@ -1,45 +1,47 @@
|
|||
// Gradients
|
||||
|
||||
@mixin gradient-bg($color) {
|
||||
// scss-docs-start gradient-bg-mixin
|
||||
@mixin gradient-bg($color: null) {
|
||||
background-color: $color;
|
||||
|
||||
@if $enable-gradients {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
||||
} @else {
|
||||
background-color: $color;
|
||||
background-image: var(--#{$variable-prefix}gradient);
|
||||
}
|
||||
}
|
||||
// scss-docs-end gradient-bg-mixin
|
||||
|
||||
// scss-docs-start gradient-mixins
|
||||
// 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: $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);
|
||||
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: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
||||
@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);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
||||
background-image: linear-gradient($deg, $start-color, $end-color);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@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);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@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);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
// scss-docs-end gradient-mixins
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
// 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%;
|
||||
padding-right: $gutter / 2;
|
||||
padding-left: $gutter / 2;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@if $columns > 0 {
|
||||
// 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%;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order#{$infix}-first { order: -1; }
|
||||
|
||||
.order#{$infix}-last { order: $columns + 1; }
|
||||
|
||||
@for $i from 0 through $columns {
|
||||
.order#{$infix}-#{$i} { order: $i; }
|
||||
}
|
||||
|
||||
@if $columns > 0 {
|
||||
// `$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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
133
dev/scss/bootstrap/mixins/_grid.scss
Normal file → Executable file
133
dev/scss/bootstrap/mixins/_grid.scss
Normal file → Executable file
|
|
@ -1,58 +1,49 @@
|
|||
/// Grid system
|
||||
// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container($gutter: $grid-gutter-width) {
|
||||
width: 100%;
|
||||
padding-right: $gutter / 2;
|
||||
padding-left: $gutter / 2;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
--#{$variable-prefix}gutter-x: #{$gutter};
|
||||
--#{$variable-prefix}gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -$gutter / 2;
|
||||
margin-left: -$gutter / 2;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
|
||||
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // 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) {
|
||||
position: relative;
|
||||
// Add box sizing if only the grid is loaded
|
||||
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// always setting `width: 100%;`. This works because we set the width
|
||||
// later on to override this initial width.
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
padding-right: $gutter / 2;
|
||||
padding-left: $gutter / 2;
|
||||
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
||||
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, $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($size: false, $columns: $grid-columns) {
|
||||
@if $size {
|
||||
flex: 0 0 auto;
|
||||
width: percentage(divide($size, $columns));
|
||||
|
||||
} @else {
|
||||
flex: 1 1 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col-auto() {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%; // Reset earlier grid tiers
|
||||
}
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
$num: $size / $columns;
|
||||
$num: divide($size, $columns);
|
||||
margin-left: if($num == 0, 0, percentage($num));
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +54,79 @@
|
|||
// style grid.
|
||||
@mixin row-cols($count) {
|
||||
> * {
|
||||
flex: 0 0 100% / $count;
|
||||
max-width: 100% / $count;
|
||||
flex: 0 0 auto;
|
||||
width: divide(100%, $count);
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
@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} {
|
||||
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
.col#{$infix}-auto {
|
||||
@include make-col-auto();
|
||||
}
|
||||
|
||||
@if $columns > 0 {
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
// `$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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gutters
|
||||
//
|
||||
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the 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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
// Hover mixin and `$enable-hover-media-query` are deprecated.
|
||||
//
|
||||
// Originally 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 pseudo-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;
|
||||
}
|
||||
}
|
||||
22
dev/scss/bootstrap/mixins/_image.scss
Normal file → Executable file
22
dev/scss/bootstrap/mixins/_image.scss
Normal file → Executable file
|
|
@ -7,30 +7,10 @@
|
|||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
@mixin img-fluid() {
|
||||
@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.
|
||||
|
||||
@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/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;
|
||||
}
|
||||
@include deprecate("`img-retina()`", "v4.3.0", "v5");
|
||||
}
|
||||
|
|
|
|||
7
dev/scss/bootstrap/mixins/_list-group.scss
Normal file → Executable file
7
dev/scss/bootstrap/mixins/_list-group.scss
Normal file → Executable file
|
|
@ -1,14 +1,16 @@
|
|||
// List Groups
|
||||
|
||||
// scss-docs-start list-group-mixin
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
|
||||
&.list-group-item-action {
|
||||
@include hover-focus() {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
background-color: shade-color($background, 10%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -19,3 +21,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end list-group-mixin
|
||||
|
|
|
|||
2
dev/scss/bootstrap/mixins/_lists.scss
Normal file → Executable file
2
dev/scss/bootstrap/mixins/_lists.scss
Normal file → Executable file
|
|
@ -1,7 +1,7 @@
|
|||
// Lists
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
@mixin list-unstyled() {
|
||||
@mixin list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
// Horizontal dividers
|
||||
//
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
|
||||
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
|
||||
height: 0;
|
||||
margin: $margin-y 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $color;
|
||||
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
25
dev/scss/bootstrap/mixins/_pagination.scss
Normal file → Executable file
25
dev/scss/bootstrap/mixins/_pagination.scss
Normal file → Executable file
|
|
@ -1,22 +1,31 @@
|
|||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
// scss-docs-start pagination-mixin
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
.page-link {
|
||||
padding: $padding-y $padding-x;
|
||||
@include font-size($font-size);
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-left-radius($border-radius);
|
||||
@if $pagination-margin-start == (-$pagination-border-width) {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-start-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-end-radius($border-radius);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
//Add border-radius to all pageLinks in case they have left margin
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// scss-docs-end pagination-mixin
|
||||
|
|
|
|||
4
dev/scss/bootstrap/mixins/_reset-text.scss
Normal file → Executable file
4
dev/scss/bootstrap/mixins/_reset-text.scss
Normal file → Executable file
|
|
@ -1,6 +1,6 @@
|
|||
@mixin reset-text() {
|
||||
@mixin reset-text {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $line-height-base;
|
||||
|
|
|
|||
0
dev/scss/bootstrap/mixins/_resize.scss
Normal file → Executable file
0
dev/scss/bootstrap/mixins/_resize.scss
Normal file → Executable file
|
|
@ -1,34 +0,0 @@
|
|||
// Only display content to screen readers
|
||||
//
|
||||
// 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 sr-only() {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// Sizing shortcuts
|
||||
|
||||
@mixin size($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
@include deprecate("`size()`", "v4.3.0", "v5");
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// Tables
|
||||
|
||||
@mixin table-row-variant($state, $background, $border: null) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table-#{$state} {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@if $border != null {
|
||||
th,
|
||||
td,
|
||||
thead th,
|
||||
tbody + tbody {
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
dev/scss/bootstrap/mixins/_table-variants.scss
Executable file
21
dev/scss/bootstrap/mixins/_table-variants.scss
Executable file
|
|
@ -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
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Typography
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
@if $emphasized-link-hover-darken-percentage != 0 {
|
||||
a#{$parent} {
|
||||
@include hover-focus() {
|
||||
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// CSS image replacement
|
||||
@mixin text-hide($ignore-warning: false) {
|
||||
// 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;
|
||||
|
||||
@include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
|
||||
}
|
||||
0
dev/scss/bootstrap/mixins/_text-truncate.scss
Normal file → Executable file
0
dev/scss/bootstrap/mixins/_text-truncate.scss
Normal file → Executable file
2
dev/scss/bootstrap/mixins/_transition.scss
Normal file → Executable file
2
dev/scss/bootstrap/mixins/_transition.scss
Normal file → Executable file
|
|
@ -17,7 +17,7 @@
|
|||
transition: $transition;
|
||||
}
|
||||
|
||||
@if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
|
||||
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
|
|
|
|||
68
dev/scss/bootstrap/mixins/_utilities.scss
Executable file
68
dev/scss/bootstrap/mixins/_utilities.scss
Executable file
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Visibility
|
||||
|
||||
@mixin invisible($visibility) {
|
||||
visibility: $visibility !important;
|
||||
@include deprecate("`invisible()`", "v4.3.0", "v5");
|
||||
}
|
||||
29
dev/scss/bootstrap/mixins/_visually-hidden.scss
Executable file
29
dev/scss/bootstrap/mixins/_visually-hidden.scss
Executable file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue