Merge pull request #1104 from IanDelMar/bootstrap441

Update to Bootstrap 4.4.1
This commit is contained in:
UnderstrapFramework 2020-02-17 08:40:32 +00:00 committed by GitHub
commit 11760a7c55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
63 changed files with 3180 additions and 2439 deletions

File diff suppressed because one or more lines are too long

4
css/theme.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

2
js/theme.min.js vendored

File diff suppressed because one or more lines are too long

1447
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -27,14 +27,14 @@
}, },
"homepage": "https://understrap.com", "homepage": "https://understrap.com",
"dependencies": { "dependencies": {
"@babel/preset-env": "^7.4.5", "@babel/preset-env": "^7.7.7",
"bootstrap": "^4.4.1", "bootstrap": "^4.4.1",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.7",
"del": "^4.1.0", "del": "^4.1.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"gulp": "^4.0.0", "gulp": "^4.0.2",
"gulp-autoprefixer": "^6.0.0", "gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.0.0", "gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-ignore": "^2.0.2", "gulp-ignore": "^2.0.2",
"gulp-imagemin": "^5.0.3", "gulp-imagemin": "^5.0.3",
@ -52,8 +52,8 @@
"undescores-for-npm": "^1.0.0" "undescores-for-npm": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.4", "@babel/core": "^7.7.7",
"autoprefixer": "^9.5.1", "autoprefixer": "^9.7.3",
"gulp-babel": "^8.0.0", "gulp-babel": "^8.0.0",
"gulp-postcss": "^8.0.0" "gulp-postcss": "^8.0.0"
} }

View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v4.3.1 (https://getbootstrap.com/) * Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc. * Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
@include transition($badge-transition); @include transition($badge-transition);
@at-root a#{&} { @at-root a#{&} {
@include hover-focus { @include hover-focus() {
text-decoration: none; text-decoration: none;
} }
} }

View File

@ -3,6 +3,7 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x; padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom; margin-bottom: $breadcrumb-margin-bottom;
@include font-size($breadcrumb-font-size);
list-style: none; list-style: none;
background-color: $breadcrumb-bg; background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius); @include border-radius($breadcrumb-border-radius);
@ -17,7 +18,7 @@
display: inline-block; // Suppress underlining of the separator in modern browsers display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding; padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color; color: $breadcrumb-divider-color;
content: $breadcrumb-divider; content: escape-svg($breadcrumb-divider);
} }
} }

View File

@ -13,7 +13,7 @@
// Bring the hover, focused, and "active" buttons to the front to overlay // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly // the borders properly
@include hover { @include hover() {
z-index: 1; z-index: 1;
} }
&:focus, &:focus,

View File

@ -10,14 +10,16 @@
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
color: $body-color; color: $body-color;
text-align: center; text-align: center;
white-space: $btn-white-space;
vertical-align: middle; vertical-align: middle;
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
user-select: none; user-select: none;
background-color: transparent; background-color: transparent;
border: $btn-border-width solid transparent; border: $btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition); @include transition($btn-transition);
@include hover { @include hover() {
color: $body-color; color: $body-color;
text-decoration: none; text-decoration: none;
} }
@ -79,7 +81,7 @@ fieldset:disabled a.btn {
color: $link-color; color: $link-color;
text-decoration: $link-decoration; text-decoration: $link-decoration;
@include hover { @include hover() {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }

View File

@ -7,6 +7,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: $card-height;
word-wrap: break-word; word-wrap: break-word;
background-color: $card-bg; background-color: $card-bg;
background-clip: border-box; background-clip: border-box;
@ -35,6 +36,9 @@
// Enable `flex-grow: 1` for decks and groups so that card blocks take up // Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom. // as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto; flex: 1 1 auto;
// Workaround for the image size bug in IE
// See: https://github.com/twbs/bootstrap/pull/28855
min-height: 1px;
padding: $card-spacer-x; padding: $card-spacer-x;
color: $card-color; color: $card-color;
} }
@ -53,7 +57,7 @@
} }
.card-link { .card-link {
@include hover { @include hover() {
text-decoration: none; text-decoration: none;
} }
@ -121,19 +125,20 @@
padding: $card-img-overlay-padding; padding: $card-img-overlay-padding;
} }
.card-img { .card-img,
.card-img-top,
.card-img-bottom {
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-radius($card-inner-border-radius);
} }
// Card image caps .card-img,
.card-img-top { .card-img-top {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-top-radius($card-inner-border-radius); @include border-top-radius($card-inner-border-radius);
} }
.card-img,
.card-img-bottom { .card-img-bottom {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-bottom-radius($card-inner-border-radius); @include border-bottom-radius($card-inner-border-radius);
} }
@ -141,23 +146,19 @@
// Card deck // Card deck
.card-deck { .card-deck {
display: flex;
flex-direction: column;
.card { .card {
margin-bottom: $card-deck-margin; margin-bottom: $card-deck-margin;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-right: -$card-deck-margin; margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin; margin-left: -$card-deck-margin;
.card { .card {
display: flex;
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%; flex: 1 0 0%;
flex-direction: column;
margin-right: $card-deck-margin; margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default margin-bottom: 0; // Override the default
margin-left: $card-deck-margin; margin-left: $card-deck-margin;
@ -171,9 +172,6 @@
// //
.card-group { .card-group {
display: flex;
flex-direction: column;
// The child selector allows nested `.card` within `.card-group` // The child selector allows nested `.card` within `.card-group`
// to display properly. // to display properly.
> .card { > .card {
@ -181,6 +179,7 @@
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap; flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group` // The child selector allows nested `.card` within `.card-group`
// to display properly. // to display properly.
@ -262,27 +261,17 @@
> .card { > .card {
overflow: hidden; overflow: hidden;
&:not(:first-of-type) { &:not(:last-of-type) {
.card-header:first-child {
@include border-radius(0);
}
&:not(:last-of-type) {
border-bottom: 0;
@include border-radius(0);
}
}
&:first-of-type {
border-bottom: 0; border-bottom: 0;
@include border-bottom-radius(0); @include border-bottom-radius(0);
} }
&:last-of-type { &:not(:first-of-type) {
@include border-top-radius(0); @include border-top-radius(0);
} }
.card-header { > .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width; margin-bottom: -$card-border-width;
} }
} }

View File

@ -75,7 +75,7 @@
.active.carousel-item-right { .active.carousel-item-right {
z-index: 0; z-index: 0;
opacity: 0; opacity: 0;
@include transition(0s $carousel-transition-duration opacity); @include transition(opacity 0s $carousel-transition-duration);
} }
} }
@ -101,7 +101,7 @@
@include transition($carousel-control-transition); @include transition($carousel-control-transition);
// Hover/focus state // Hover/focus state
@include hover-focus { @include hover-focus() {
color: $carousel-control-color; color: $carousel-control-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
@ -111,13 +111,13 @@
.carousel-control-prev { .carousel-control-prev {
left: 0; left: 0;
@if $enable-gradients { @if $enable-gradients {
background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
} }
} }
.carousel-control-next { .carousel-control-next {
right: 0; right: 0;
@if $enable-gradients { @if $enable-gradients {
background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
} }
} }
@ -130,10 +130,10 @@
background: no-repeat 50% / 100% 100%; background: no-repeat 50% / 100% 100%;
} }
.carousel-control-prev-icon { .carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg; background-image: escape-svg($carousel-control-prev-icon-bg);
} }
.carousel-control-next-icon { .carousel-control-next-icon {
background-image: $carousel-control-next-icon-bg; background-image: escape-svg($carousel-control-next-icon-bg);
} }

View File

@ -8,13 +8,13 @@
opacity: .5; opacity: .5;
// Override <a>'s hover style // Override <a>'s hover style
@include hover { @include hover() {
color: $close-color; color: $close-color;
text-decoration: none; text-decoration: none;
} }
&:not(:disabled):not(.disabled) { &:not(:disabled):not(.disabled) {
@include hover-focus { @include hover-focus() {
opacity: .75; opacity: .75;
} }
} }

View File

@ -2,7 +2,7 @@
code { code {
@include font-size($code-font-size); @include font-size($code-font-size);
color: $code-color; color: $code-color;
word-break: break-word; word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more // Streamline the style when inside anchors to avoid broken underline and more
a > & { a > & {

View File

@ -21,7 +21,10 @@
.custom-control-input { .custom-control-input {
position: absolute; position: absolute;
left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text z-index: -1; // Put the input behind the label so it doesn't overlay text
width: $custom-control-indicator-size;
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
opacity: 0; opacity: 0;
&:checked ~ .custom-control-label::before { &:checked ~ .custom-control-label::before {
@ -51,6 +54,8 @@
@include box-shadow($custom-control-indicator-active-box-shadow); @include box-shadow($custom-control-indicator-active-box-shadow);
} }
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled { &:disabled {
~ .custom-control-label { ~ .custom-control-label {
color: $custom-control-label-disabled-color; color: $custom-control-label-disabled-color;
@ -69,7 +74,9 @@
.custom-control-label { .custom-control-label {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
color: $custom-control-label-color;
vertical-align: top; vertical-align: top;
cursor: $custom-control-cursor;
// Background-color and (when enabled) gradient // Background-color and (when enabled) gradient
&::before { &::before {
@ -111,7 +118,7 @@
.custom-control-input:checked ~ .custom-control-label { .custom-control-input:checked ~ .custom-control-label {
&::after { &::after {
background-image: $custom-checkbox-indicator-icon-checked; background-image: escape-svg($custom-checkbox-indicator-icon-checked);
} }
} }
@ -122,7 +129,7 @@
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
} }
&::after { &::after {
background-image: $custom-checkbox-indicator-icon-indeterminate; background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
} }
} }
@ -148,7 +155,7 @@
.custom-control-input:checked ~ .custom-control-label { .custom-control-input:checked ~ .custom-control-label {
&::after { &::after {
background-image: $custom-radio-indicator-icon-checked; background-image: escape-svg($custom-radio-indicator-icon-checked);
} }
} }
@ -177,8 +184,8 @@
} }
&::after { &::after {
top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size; width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size; height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color; background-color: $custom-control-indicator-border-color;
@ -220,8 +227,7 @@
line-height: $custom-select-line-height; line-height: $custom-select-line-height;
color: $custom-select-color; color: $custom-select-color;
vertical-align: middle; vertical-align: middle;
background: $custom-select-background; background: $custom-select-bg $custom-select-background;
background-color: $custom-select-bg;
border: $custom-select-border-width solid $custom-select-border-color; border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius, 0); @include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow); @include box-shadow($custom-select-box-shadow);
@ -263,6 +269,12 @@
&::-ms-expand { &::-ms-expand {
display: none; display: none;
} }
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $custom-select-color;
}
} }
.custom-select-sm { .custom-select-sm {
@ -307,6 +319,8 @@
box-shadow: $custom-file-focus-box-shadow; box-shadow: $custom-file-focus-box-shadow;
} }
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .custom-file-label,
&:disabled ~ .custom-file-label { &:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg; background-color: $custom-file-disabled-bg;
} }
@ -365,7 +379,7 @@
.custom-range { .custom-range {
width: 100%; width: 100%;
height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding padding: 0; // Need to reset padding
background-color: transparent; background-color: transparent;
appearance: none; appearance: none;

View File

@ -10,7 +10,7 @@
white-space: nowrap; white-space: nowrap;
// Generate the caret automatically // Generate the caret automatically
@include caret; @include caret();
} }
// The dropdown menu // The dropdown menu
@ -114,7 +114,7 @@
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y); @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
} }
// Links, buttons, and more within the dropdown menu // Links, buttons, and more within the dropdown menu
@ -144,7 +144,7 @@
} }
} }
@include hover-focus { @include hover-focus() {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
text-decoration: none; text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg); @include gradient-bg($dropdown-link-hover-bg);

View File

@ -30,8 +30,14 @@
border: 0; border: 0;
} }
// Remove select outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus(); @include form-control-focus($ignore-warning: true);
// Placeholder // Placeholder
&::placeholder { &::placeholder {
@ -80,23 +86,23 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label (or legend) // For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls. // text to align with the form controls.
.col-form-label { .col-form-label {
padding-top: calc(#{$input-padding-y} + #{$input-border-width}); padding-top: add($input-padding-y, $input-border-width);
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default margin-bottom: 0; // Override the `<label>/<legend>` default
@include font-size(inherit); // Override the `<legend>` default @include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height; line-height: $input-line-height;
} }
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: add($input-padding-y-lg, $input-border-width);
@include font-size($input-font-size-lg); @include font-size($input-font-size-lg);
line-height: $input-line-height-lg; line-height: $input-line-height-lg;
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: add($input-padding-y-sm, $input-border-width);
@include font-size($input-font-size-sm); @include font-size($input-font-size-sm);
line-height: $input-line-height-sm; line-height: $input-line-height-sm;
} }
@ -110,9 +116,9 @@ select.form-control {
.form-control-plaintext { .form-control-plaintext {
display: block; display: block;
width: 100%; width: 100%;
padding-top: $input-padding-y; padding: $input-padding-y 0;
padding-bottom: $input-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins margin-bottom: 0; // match inputs if this class comes on inputs with default margins
@include font-size($input-font-size);
line-height: $input-line-height; line-height: $input-line-height;
color: $input-plaintext-color; color: $input-plaintext-color;
background-color: transparent; background-color: transparent;
@ -210,6 +216,8 @@ textarea.form-control {
margin-top: $form-check-input-margin-y; margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter; margin-left: -$form-check-input-gutter;
// Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
&[disabled] ~ .form-check-label,
&:disabled ~ .form-check-label { &:disabled ~ .form-check-label {
color: $text-muted; color: $text-muted;
} }

View File

@ -8,7 +8,7 @@
$prev-key: null; $prev-key: null;
$prev-num: null; $prev-num: null;
@each $key, $num in $map { @each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" { @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// Do nothing // Do nothing
} @else if not comparable($prev-num, $num) { } @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@ -48,6 +48,17 @@
@return $string; @return $string;
} }
// See https://codepen.io/kevinweber/pen/dXWoRw
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
$string: str-replace($string, $char, $encoded);
}
}
@return $string;
}
// Color contrast // Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color); $r: red($color);
@ -84,3 +95,40 @@
@return mix($color-base, $color, $level * $theme-color-interval); @return mix($color-base, $color, $level * $theme-color-interval);
} }
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

View File

@ -3,26 +3,43 @@
// Set the container width, and override it for fixed navbars in media queries. // Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes { @if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container { .container {
@include make-container(); @include make-container();
@include make-container-max-widths(); @include make-container-max-widths();
} }
}
// Fluid container // 100% wide container at all breakpoints
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.
@if $enable-grid-classes {
.container-fluid { .container-fluid {
@include make-container(); @include make-container();
} }
// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
.container-#{$breakpoint} {
@extend .container-fluid;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
%responsive-container-#{$breakpoint} {
max-width: $container-max-width;
}
@each $name, $width in $grid-breakpoints {
@if ($container-max-width > $width or $breakpoint == $name) {
.container#{breakpoint-infix($name, $grid-breakpoints)} {
@extend %responsive-container-#{$breakpoint};
}
}
}
}
}
} }
// Row // Row
// //
// Rows contain and clear the floats of your columns. // Rows contain your columns.
@if $enable-grid-classes { @if $enable-grid-classes {
.row { .row {

View File

@ -6,7 +6,7 @@
// which weren't expecting the images within themselves to be involuntarily resized. // which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178 // See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid { .img-fluid {
@include img-fluid; @include img-fluid();
} }
@ -19,7 +19,7 @@
@include box-shadow($thumbnail-box-shadow); @include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide // Keep them at most 100% wide
@include img-fluid; @include img-fluid();
} }
// //

View File

@ -16,10 +16,8 @@
> .custom-select, > .custom-select,
> .custom-file { > .custom-file {
position: relative; // For focus state's z-index position: relative; // For focus state's z-index
flex: 1 1 auto; flex: 1 1 0%;
// Add width 1% and flex-basis auto to ensure that button will not wrap out min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
margin-bottom: 0; margin-bottom: 0;
+ .form-control, + .form-control,

View File

@ -23,7 +23,7 @@
text-align: inherit; // For `<button>`s (anchors inherit) text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state // Hover state
@include hover-focus { @include hover-focus() {
z-index: 1; // Place hover/focus items above their siblings for proper border styling z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color; color: $list-group-action-hover-color;
text-decoration: none; text-decoration: none;
@ -45,8 +45,6 @@
position: relative; position: relative;
display: block; display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x; padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
color: $list-group-color; color: $list-group-color;
background-color: $list-group-bg; background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color; border: $list-group-border-width solid $list-group-border-color;
@ -56,7 +54,6 @@
} }
&:last-child { &:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius); @include border-bottom-radius($list-group-border-radius);
} }
@ -74,6 +71,15 @@
background-color: $list-group-active-bg; background-color: $list-group-active-bg;
border-color: $list-group-active-border-color; border-color: $list-group-active-border-color;
} }
& + & {
border-top-width: 0;
&.active {
margin-top: -$list-group-border-width;
border-top-width: $list-group-border-width;
}
}
} }
@ -89,19 +95,29 @@
flex-direction: row; flex-direction: row;
.list-group-item { .list-group-item {
margin-right: -$list-group-border-width;
margin-bottom: 0;
&:first-child { &:first-child {
@include border-left-radius($list-group-border-radius); @include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0); @include border-top-right-radius(0);
} }
&:last-child { &:last-child {
margin-right: 0; @include border-top-right-radius($list-group-border-radius);
@include border-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0); @include border-bottom-left-radius(0);
} }
&.active {
margin-top: 0;
}
& + .list-group-item {
border-top-width: $list-group-border-width;
border-left-width: 0;
&.active {
margin-left: -$list-group-border-width;
border-left-width: $list-group-border-width;
}
}
} }
} }
} }
@ -115,25 +131,18 @@
.list-group-flush { .list-group-flush {
.list-group-item { .list-group-item {
border-right: 0; border-right-width: 0;
border-left: 0; border-left-width: 0;
@include border-radius(0); @include border-radius(0);
&:last-child { &:first-child {
margin-bottom: -$list-group-border-width; border-top-width: 0;
}
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
} }
} }
&:last-child { &:last-child {
.list-group-item:last-child { .list-group-item:last-child {
margin-bottom: 0; border-bottom-width: 0;
border-bottom: 0;
} }
} }
} }

View File

@ -22,7 +22,7 @@
@import "mixins/text-truncate"; @import "mixins/text-truncate";
@import "mixins/visibility"; @import "mixins/visibility";
// // Components // Components
@import "mixins/alert"; @import "mixins/alert";
@import "mixins/buttons"; @import "mixins/buttons";
@import "mixins/caret"; @import "mixins/caret";
@ -33,14 +33,14 @@
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/table-row"; @import "mixins/table-row";
// // Skins // Skins
@import "mixins/background-variant"; @import "mixins/background-variant";
@import "mixins/border-radius"; @import "mixins/border-radius";
@import "mixins/box-shadow"; @import "mixins/box-shadow";
@import "mixins/gradients"; @import "mixins/gradients";
@import "mixins/transition"; @import "mixins/transition";
// // Layout // Layout
@import "mixins/clearfix"; @import "mixins/clearfix";
@import "mixins/grid-framework"; @import "mixins/grid-framework";
@import "mixins/grid"; @import "mixins/grid";

View File

@ -48,14 +48,19 @@
.modal.show & { .modal.show & {
transform: $modal-show-transform; transform: $modal-show-transform;
} }
// When trying to close, animate focus to scale
.modal.modal-static & {
transform: $modal-scale-transform;
}
} }
.modal-dialog-scrollable { .modal-dialog-scrollable {
display: flex; // IE10/11 display: flex; // IE10/11
max-height: calc(100% - #{$modal-dialog-margin * 2}); max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content { .modal-content {
max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11 max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
overflow: hidden; overflow: hidden;
} }
@ -72,12 +77,12 @@
.modal-dialog-centered { .modal-dialog-centered {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: calc(100% - #{$modal-dialog-margin * 2}); min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11) // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before { &::before {
display: block; // IE10 display: block; // IE10
height: calc(100vh - #{$modal-dialog-margin * 2}); height: subtract(100vh, $modal-dialog-margin * 2);
content: ""; content: "";
} }
@ -138,7 +143,7 @@
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding; padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-border-radius); @include border-top-radius($modal-content-inner-border-radius);
.close { .close {
padding: $modal-header-padding; padding: $modal-header-padding;
@ -158,7 +163,7 @@
.modal-body { .modal-body {
position: relative; position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible // Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`. // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto; flex: 1 1 auto;
padding: $modal-inner-padding; padding: $modal-inner-padding;
} }
@ -166,15 +171,20 @@
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding; padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-border-radius); @include border-bottom-radius($modal-content-inner-border-radius);
// Easily place margin between footer elements // Place margin between footer elements
> :not(:first-child) { margin-left: .25rem; } // This solution is far from ideal because of the universal selector usage,
> :not(:last-child) { margin-right: .25rem; } // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
// stylelint-disable-next-line selector-max-universal
> * {
margin: $modal-footer-margin-between / 2;
}
} }
// Measure scrollbar width for padding body during modal show/hide // Measure scrollbar width for padding body during modal show/hide
@ -195,18 +205,18 @@
} }
.modal-dialog-scrollable { .modal-dialog-scrollable {
max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
.modal-content { .modal-content {
max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
} }
} }
.modal-dialog-centered { .modal-dialog-centered {
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before { &::before {
height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
} }
} }

View File

@ -1,7 +1,7 @@
// Base class // Base class
// //
// Kickstart any navigation component with a set of style resets. Works with // Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s. // `<nav>`s, `<ul>`s or `<ol>`s.
.nav { .nav {
display: flex; display: flex;
@ -15,7 +15,7 @@
display: block; display: block;
padding: $nav-link-padding-y $nav-link-padding-x; padding: $nav-link-padding-y $nav-link-padding-x;
@include hover-focus { @include hover-focus() {
text-decoration: none; text-decoration: none;
} }
@ -42,7 +42,7 @@
border: $nav-tabs-border-width solid transparent; border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius); @include border-top-radius($nav-tabs-border-radius);
@include hover-focus { @include hover-focus() {
border-color: $nav-tabs-link-hover-border-color; border-color: $nav-tabs-link-hover-border-color;
} }

View File

@ -25,13 +25,23 @@
// Because flex properties aren't inherited, we need to redeclare these first // Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly. // few properties so that content nested within behave properly.
> .container, %container-flex-properties {
> .container-fluid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.container,
.container-fluid {
@extend %container-flex-properties;
}
@each $breakpoint, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
@extend %container-flex-properties;
}
}
} }
@ -48,7 +58,7 @@
line-height: inherit; line-height: inherit;
white-space: nowrap; white-space: nowrap;
@include hover-focus { @include hover-focus() {
text-decoration: none; text-decoration: none;
} }
} }
@ -113,7 +123,7 @@
border: $border-width solid transparent; // remove default button style border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius); @include border-radius($navbar-toggler-border-radius);
@include hover-focus { @include hover-focus() {
text-decoration: none; text-decoration: none;
} }
} }
@ -139,11 +149,21 @@
&#{$infix} { &#{$infix} {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
> .container, %container-navbar-expand-#{$breakpoint} {
> .container-fluid {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
> .container,
> .container-fluid {
@extend %container-navbar-expand-#{$breakpoint};
}
@each $size, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($size, $container-max-widths)} {
@extend %container-navbar-expand-#{$breakpoint};
}
}
} }
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
@ -164,9 +184,19 @@
} }
// For nesting containers, have to redeclare for alignment purposes // For nesting containers, have to redeclare for alignment purposes
%container-nesting-#{$breakpoint} {
flex-wrap: nowrap;
}
> .container, > .container,
> .container-fluid { > .container-fluid {
flex-wrap: nowrap; @extend %container-nesting-#{$breakpoint};
}
@each $size, $container-max-width in $container-max-widths {
> .container#{breakpoint-infix($size, $container-max-widths)} {
@extend %container-nesting-#{$breakpoint};
}
} }
.navbar-collapse { .navbar-collapse {
@ -194,7 +224,7 @@
.navbar-brand { .navbar-brand {
color: $navbar-light-brand-color; color: $navbar-light-brand-color;
@include hover-focus { @include hover-focus() {
color: $navbar-light-brand-hover-color; color: $navbar-light-brand-hover-color;
} }
} }
@ -203,7 +233,7 @@
.nav-link { .nav-link {
color: $navbar-light-color; color: $navbar-light-color;
@include hover-focus { @include hover-focus() {
color: $navbar-light-hover-color; color: $navbar-light-hover-color;
} }
@ -226,7 +256,7 @@
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-light-toggler-icon-bg; background-image: escape-svg($navbar-light-toggler-icon-bg);
} }
.navbar-text { .navbar-text {
@ -234,7 +264,7 @@
a { a {
color: $navbar-light-active-color; color: $navbar-light-active-color;
@include hover-focus { @include hover-focus() {
color: $navbar-light-active-color; color: $navbar-light-active-color;
} }
} }
@ -246,7 +276,7 @@
.navbar-brand { .navbar-brand {
color: $navbar-dark-brand-color; color: $navbar-dark-brand-color;
@include hover-focus { @include hover-focus() {
color: $navbar-dark-brand-hover-color; color: $navbar-dark-brand-hover-color;
} }
} }
@ -255,7 +285,7 @@
.nav-link { .nav-link {
color: $navbar-dark-color; color: $navbar-dark-color;
@include hover-focus { @include hover-focus() {
color: $navbar-dark-hover-color; color: $navbar-dark-hover-color;
} }
@ -278,7 +308,7 @@
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg; background-image: escape-svg($navbar-dark-toggler-icon-bg);
} }
.navbar-text { .navbar-text {
@ -286,7 +316,7 @@
a { a {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
@include hover-focus { @include hover-focus() {
color: $navbar-dark-active-color; color: $navbar-dark-active-color;
} }
} }

View File

@ -23,7 +23,7 @@
} }
&:focus { &:focus {
z-index: 2; z-index: 3;
outline: $pagination-focus-outline; outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow; box-shadow: $pagination-focus-box-shadow;
} }
@ -43,7 +43,7 @@
} }
&.active .page-link { &.active .page-link {
z-index: 1; z-index: 3;
color: $pagination-active-color; color: $pagination-active-color;
background-color: $pagination-active-bg; background-color: $pagination-active-bg;
border-color: $pagination-active-border-color; border-color: $pagination-active-border-color;

View File

@ -22,7 +22,7 @@
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
height: $popover-arrow-height; height: $popover-arrow-height;
margin: 0 $border-radius-lg; margin: 0 $popover-border-radius;
&::before, &::before,
&::after { &::after {
@ -39,7 +39,7 @@
margin-bottom: $popover-arrow-height; margin-bottom: $popover-arrow-height;
> .arrow { > .arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); bottom: subtract(-$popover-arrow-height, $popover-border-width);
&::before { &::before {
bottom: 0; bottom: 0;
@ -59,10 +59,10 @@
margin-left: $popover-arrow-height; margin-left: $popover-arrow-height;
> .arrow { > .arrow {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before { &::before {
left: 0; left: 0;
@ -82,7 +82,7 @@
margin-top: $popover-arrow-height; margin-top: $popover-arrow-height;
> .arrow { > .arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); top: subtract(-$popover-arrow-height, $popover-border-width);
&::before { &::before {
top: 0; top: 0;
@ -114,10 +114,10 @@
margin-right: $popover-arrow-height; margin-right: $popover-arrow-height;
> .arrow { > .arrow {
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before { &::before {
right: 0; right: 0;
@ -157,8 +157,7 @@
color: $popover-header-color; color: $popover-header-color;
background-color: $popover-header-bg; background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); @include border-top-radius($popover-inner-border-radius);
@include border-top-radius($offset-border-width);
&:empty { &:empty {
display: none; display: none;

View File

@ -1,6 +1,6 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type // stylelint-disable declaration-no-important, selector-no-qualifying-type
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css // Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
// ========================================================================== // ==========================================================================
// Print styles. // Print styles.
@ -57,7 +57,7 @@
// //
// Printing Tables: // Printing Tables:
// http://css-discuss.incutio.com/wiki/Printing_Tables // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
// //
thead { thead {

View File

@ -20,6 +20,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow: hidden;
color: $progress-bar-color; color: $progress-bar-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -36,8 +37,10 @@
.progress-bar-animated { .progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing; animation: progress-bar-stripes $progress-bar-animation-timing;
@media (prefers-reduced-motion: reduce) { @if $enable-prefers-reduced-motion-media-query {
animation: none; @media (prefers-reduced-motion: reduce) {
animation: none;
}
} }
} }
} }

View File

@ -54,12 +54,16 @@ body {
background-color: $body-bg; // 2 background-color: $body-bg; // 2
} }
// Suppress the focus outline on elements that cannot be accessed via keyboard. // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
// This prevents an unwanted focus outline from appearing around elements that // on elements that programmatically receive focus but wouldn't normally show a visible
// might still respond to pointer events. // focus outline. In general, this would mean that the outline is only applied if the
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
// or the browser has somehow determined that the user is primarily a keyboard user and/or
// wants focus outlines to always be presented.
// //
// Credit: https://github.com/suitcss/base // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
[tabindex="-1"]:focus { // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important; outline: 0 !important;
} }
@ -184,30 +188,25 @@ a {
text-decoration: $link-decoration; text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10. background-color: transparent; // Remove the gray background on active links in IE 10.
@include hover { @include hover() {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
// And undo these styles for placeholder links/named anchors (without href) // And undo these styles for placeholder links/named anchors (without href).
// which have not been made explicitly keyboard-focusable (without tabindex).
// It would be more straightforward to just use a[href] in previous block, but that // It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix. // causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402 // See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) { a:not([href]) {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@include hover-focus { @include hover() {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
&:focus {
outline: 0;
}
} }

View File

@ -1,3 +1,4 @@
// Do not forget to update getting-started/theming.md!
:root { :root {
// Custom variable values only support SassScript inside `#{}`. // Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors { @each $color, $value in $colors {

View File

@ -84,7 +84,7 @@
.table-hover { .table-hover {
tbody tr { tbody tr {
@include hover { @include hover() {
color: $table-hover-color; color: $table-hover-color;
background-color: $table-hover-bg; background-color: $table-hover-bg;
} }
@ -142,14 +142,14 @@
} }
&.table-striped { &.table-striped {
tbody tr:nth-of-type(odd) { tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-dark-accent-bg; background-color: $table-dark-accent-bg;
} }
} }
&.table-hover { &.table-hover {
tbody tr { tbody tr {
@include hover { @include hover() {
color: $table-dark-hover-color; color: $table-dark-hover-color;
background-color: $table-dark-hover-bg; background-color: $table-dark-hover-bg;
} }

View File

@ -82,12 +82,12 @@ mark,
// //
.list-unstyled { .list-unstyled {
@include list-unstyled; @include list-unstyled();
} }
// Inline turns list items into inline-block // Inline turns list items into inline-block
.list-inline { .list-inline {
@include list-unstyled; @include list-unstyled();
} }
.list-inline-item { .list-inline-item {
display: inline-block; display: inline-block;

View File

@ -101,6 +101,13 @@ $yiq-contrasted-threshold: 150 !default;
$yiq-text-dark: $gray-900 !default; $yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default; $yiq-text-light: $white !default;
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<","%3c"),
(">","%3e"),
("#","%23"),
) !default;
// Options // Options
// //
@ -220,6 +227,7 @@ $container-max-widths: (
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 30px !default; $grid-gutter-width: 30px !default;
$grid-row-columns: 6 !default;
// Components // Components
@ -366,7 +374,6 @@ $table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-color: $table-dark-color !default; $table-dark-hover-color: $table-dark-color !default;
$table-dark-hover-bg: rgba($white, .075) !default; $table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
$table-dark-color: $white !default;
$table-striped-order: odd !default; $table-striped-order: odd !default;
@ -412,6 +419,7 @@ $btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default; $btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default; $btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default; $btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default;
@ -488,13 +496,13 @@ $input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default; $input-height-border: $input-border-width * 2 !default;
$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default; $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default; $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; $input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@ -518,6 +526,7 @@ $custom-forms-transition: background-color .15s ease-in-out, borde
$custom-control-gutter: .5rem !default; $custom-control-gutter: .5rem !default;
$custom-control-spacer-x: 1rem !default; $custom-control-spacer-x: 1rem !default;
$custom-control-cursor: null !default;
$custom-control-indicator-size: 1rem !default; $custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: $input-bg !default; $custom-control-indicator-bg: $input-bg !default;
@ -527,6 +536,8 @@ $custom-control-indicator-box-shadow: $input-box-shadow !default;
$custom-control-indicator-border-color: $gray-500 !default; $custom-control-indicator-border-color: $gray-500 !default;
$custom-control-indicator-border-width: $input-border-width !default; $custom-control-indicator-border-width: $input-border-width !default;
$custom-control-label-color: null !default;
$custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
$custom-control-label-disabled-color: $gray-600 !default; $custom-control-label-disabled-color: $gray-600 !default;
@ -545,20 +556,20 @@ $custom-control-indicator-active-box-shadow: none !default;
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
$custom-checkbox-indicator-border-radius: $border-radius !default; $custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
$custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
$custom-switch-width: $custom-control-indicator-size * 1.75 !default; $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
$custom-select-padding-y: $input-padding-y !default; $custom-select-padding-y: $input-padding-y !default;
$custom-select-padding-x: $input-padding-x !default; $custom-select-padding-x: $input-padding-x !default;
@ -574,10 +585,10 @@ $custom-select-bg: $input-bg !default;
$custom-select-disabled-bg: $gray-200 !default; $custom-select-disabled-bg: $gray-200 !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default; $custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) $custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default; $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
@ -650,9 +661,9 @@ $form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default; $form-feedback-invalid-color: theme-color("danger") !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default; $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
$form-validation-states: () !default; $form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
@ -728,14 +739,14 @@ $navbar-dark-color: rgba($white, .5) !default;
$navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default; $navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default; $navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .5) !default; $navbar-light-color: rgba($black, .5) !default;
$navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default; $navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default; $navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default; $navbar-light-toggler-border-color: rgba($black, .1) !default;
$navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-color: $navbar-light-active-color !default;
@ -757,7 +768,7 @@ $dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default; $dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default; $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default; $dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $gray-200 !default; $dropdown-divider-bg: $gray-200 !default;
$dropdown-divider-margin-y: $nav-divider-margin-y !default; $dropdown-divider-margin-y: $nav-divider-margin-y !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
@ -822,9 +833,10 @@ $card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default; $card-border-width: $border-width !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default; $card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg: rgba($black, .03) !default; $card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default; $card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default; $card-color: null !default;
$card-bg: $white !default; $card-bg: $white !default;
@ -871,6 +883,7 @@ $popover-max-width: 276px !default;
$popover-border-width: $border-width !default; $popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default; $popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default; $popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
$popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-bg: darken($popover-bg, 3%) !default;
@ -929,6 +942,9 @@ $badge-pill-border-radius: 10rem !default;
// Padding applied to the modal body // Padding applied to the modal body
$modal-inner-padding: 1rem !default; $modal-inner-padding: 1rem !default;
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default; $modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-dialog-margin-y-sm-up: 1.75rem !default;
@ -939,6 +955,7 @@ $modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default; $modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default; $modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default; $modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
@ -960,6 +977,7 @@ $modal-sm: 300px !default;
$modal-fade-transform: translate(0, -50px) !default; $modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default; $modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default; $modal-transition: transform .3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
// Alerts // Alerts
@ -1035,6 +1053,8 @@ $figure-caption-color: $gray-600 !default;
// Breadcrumbs // Breadcrumbs
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: .75rem !default; $breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default; $breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default; $breadcrumb-item-padding: .5rem !default;
@ -1069,8 +1089,8 @@ $carousel-caption-color: $white !default;
$carousel-control-icon-width: 20px !default; $carousel-control-icon-width: 20px !default;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
$carousel-transition-duration: .6s !default; $carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/) * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc. * Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc. * Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

View File

@ -1,5 +1,5 @@
/*! /*!
* Bootstrap v4.3.1 (https://getbootstrap.com/) * Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc. * Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

View File

@ -2,16 +2,17 @@
// Contextual backgrounds // Contextual backgrounds
@mixin bg-variant($parent, $color) { @mixin bg-variant($parent, $color, $ignore-warning: false) {
#{$parent} { #{$parent} {
background-color: $color !important; background-color: $color !important;
} }
a#{$parent}, a#{$parent},
button#{$parent} { button#{$parent} {
@include hover-focus { @include hover-focus() {
background-color: darken($color, 10%) !important; background-color: darken($color, 10%) !important;
} }
} }
@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
} }
@mixin bg-gradient-variant($parent, $color) { @mixin bg-gradient-variant($parent, $color) {

View File

@ -3,7 +3,7 @@
background-color: $bg; background-color: $bg;
@at-root a#{&} { @at-root a#{&} {
@include hover-focus { @include hover-focus() {
color: color-yiq($bg); color: color-yiq($bg);
background-color: darken($bg, 10%); background-color: darken($bg, 10%);
} }

View File

@ -9,7 +9,7 @@
border-color: $border; border-color: $border;
@include box-shadow($btn-box-shadow); @include box-shadow($btn-box-shadow);
@include hover { @include hover() {
color: color-yiq($hover-background); color: color-yiq($hover-background);
@include gradient-bg($hover-background); @include gradient-bg($hover-background);
border-color: $hover-border; border-color: $hover-border;
@ -17,6 +17,9 @@
&:focus, &:focus,
&.focus { &.focus {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
@ -62,7 +65,7 @@
color: $color; color: $color;
border-color: $color; border-color: $color;
@include hover { @include hover() {
color: $color-hover; color: $color-hover;
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;

View File

@ -1,25 +1,25 @@
@mixin caret-down { @mixin caret-down() {
border-top: $caret-width solid; border-top: $caret-width solid;
border-right: $caret-width solid transparent; border-right: $caret-width solid transparent;
border-bottom: 0; border-bottom: 0;
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
@mixin caret-up { @mixin caret-up() {
border-top: 0; border-top: 0;
border-right: $caret-width solid transparent; border-right: $caret-width solid transparent;
border-bottom: $caret-width solid; border-bottom: $caret-width solid;
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
@mixin caret-right { @mixin caret-right() {
border-top: $caret-width solid transparent; border-top: $caret-width solid transparent;
border-right: 0; border-right: 0;
border-bottom: $caret-width solid transparent; border-bottom: $caret-width solid transparent;
border-left: $caret-width solid; border-left: $caret-width solid;
} }
@mixin caret-left { @mixin caret-left() {
border-top: $caret-width solid transparent; border-top: $caret-width solid transparent;
border-right: $caret-width solid; border-right: $caret-width solid;
border-bottom: $caret-width solid transparent; border-bottom: $caret-width solid transparent;
@ -33,11 +33,11 @@
vertical-align: $caret-vertical-align; vertical-align: $caret-vertical-align;
content: ""; content: "";
@if $direction == down { @if $direction == down {
@include caret-down; @include caret-down();
} @else if $direction == up { } @else if $direction == up {
@include caret-up; @include caret-up();
} @else if $direction == right { } @else if $direction == right {
@include caret-right; @include caret-right();
} }
} }
@ -51,7 +51,7 @@
margin-right: $caret-spacing; margin-right: $caret-spacing;
vertical-align: $caret-vertical-align; vertical-align: $caret-vertical-align;
content: ""; content: "";
@include caret-left; @include caret-left();
} }
} }

View File

@ -1,14 +1,14 @@
// stylelint-disable declaration-no-important // stylelint-disable declaration-no-important
@mixin float-left { @mixin float-left() {
float: left !important; float: left !important;
@include deprecate("The `float-left` mixin", "v4.3.0", "v5"); @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
} }
@mixin float-right { @mixin float-right() {
float: right !important; float: right !important;
@include deprecate("The `float-right` mixin", "v4.3.0", "v5"); @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
} }
@mixin float-none { @mixin float-none() {
float: none !important; float: none !important;
@include deprecate("The `float-none` mixin", "v4.3.0", "v5"); @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
} }

View File

@ -10,7 +10,7 @@
// //
// Example usage: change the default blue border and shadow to white for better // Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background. // contrast against a dark gray background.
@mixin form-control-focus() { @mixin form-control-focus($ignore-warning: false) {
&:focus { &:focus {
color: $input-focus-color; color: $input-focus-color;
background-color: $input-focus-bg; background-color: $input-focus-bg;
@ -23,8 +23,23 @@
box-shadow: $input-focus-box-shadow; 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
@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) { @mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback { .#{$state}-feedback {
@ -50,16 +65,22 @@
@include border-radius($form-feedback-tooltip-border-radius); @include border-radius($form-feedback-tooltip-border-radius);
} }
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control { .form-control {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
border-color: $color; border-color: $color;
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-right: $input-height-inner;
background-image: $icon; background-image: escape-svg($icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right $input-height-inner-quarter; background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half; background-size: $input-height-inner-half $input-height-inner-half;
} }
@ -67,18 +88,12 @@
border-color: $color; border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25); box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
} }
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
} }
} }
// stylelint-disable-next-line selector-no-qualifying-type // stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control { textarea.form-control {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $input-height-inner; padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter; background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
@ -87,41 +102,23 @@
} }
.custom-select { .custom-select {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
border-color: $color; border-color: $color;
@if $enable-validation-icons { @if $enable-validation-icons {
padding-right: $custom-select-feedback-icon-padding-right; padding-right: $custom-select-feedback-icon-padding-right;
background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
} }
&:focus { &:focus {
border-color: $color; border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25); box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
} }
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.form-control-file {
.was-validated &:#{$state},
&.is-#{$state} {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
} }
} }
.form-check-input { .form-check-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
@ -134,8 +131,7 @@
} }
.custom-control-input { .custom-control-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .custom-control-label { ~ .custom-control-label {
color: $color; color: $color;
@ -144,11 +140,6 @@
} }
} }
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:checked { &:checked {
~ .custom-control-label::before { ~ .custom-control-label::before {
border-color: lighten($color, 10%); border-color: lighten($color, 10%);
@ -170,17 +161,11 @@
// custom file // custom file
.custom-file-input { .custom-file-input {
.was-validated &:#{$state}, @include form-validation-state-selector($state) {
&.is-#{$state} {
~ .custom-file-label { ~ .custom-file-label {
border-color: $color; border-color: $color;
} }
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:focus { &:focus {
~ .custom-file-label { ~ .custom-file-label {
border-color: $color; border-color: $color;

View File

@ -33,10 +33,15 @@
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100%;
} }
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
.col#{$infix}-auto { .col#{$infix}-auto {
flex: 0 0 auto; @include make-col-auto();
width: auto;
max-width: 100%; // Reset earlier grid tiers
} }
@for $i from 1 through $columns { @for $i from 1 through $columns {

View File

@ -45,7 +45,25 @@
max-width: percentage($size / $columns); max-width: percentage($size / $columns);
} }
@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) { @mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns; $num: $size / $columns;
margin-left: if($num == 0, 0, percentage($num)); margin-left: if($num == 0, 0, percentage($num));
} }
// Row columns
//
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
& > * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
}
}

View File

@ -9,18 +9,18 @@
// //
// Issue: https://github.com/twbs/bootstrap/issues/25195 // Issue: https://github.com/twbs/bootstrap/issues/25195
@mixin hover { @mixin hover() {
&:hover { @content; } &:hover { @content; }
} }
@mixin hover-focus { @mixin hover-focus() {
&:hover, &:hover,
&:focus { &:focus {
@content; @content;
} }
} }
@mixin plain-hover-focus { @mixin plain-hover-focus() {
&, &,
&:hover, &:hover,
&:focus { &:focus {
@ -28,7 +28,7 @@
} }
} }
@mixin hover-focus-active { @mixin hover-focus-active() {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {

View File

@ -7,7 +7,7 @@
// //
// Keep images from scaling beyond the width of their parents. // 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 // Part 1: Set a maximum relative to the parent
max-width: 100%; max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched // Part 2: Override the height to auto, otherwise images will be stretched

View File

@ -6,7 +6,7 @@
background-color: $background; background-color: $background;
&.list-group-item-action { &.list-group-item-action {
@include hover-focus { @include hover-focus() {
color: $color; color: $color;
background-color: darken($background, 5%); background-color: darken($background, 5%);
} }

View File

@ -1,7 +1,7 @@
// Lists // Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style // Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled { @mixin list-unstyled() {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
} }

View File

@ -2,9 +2,10 @@
// //
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
height: 0; height: 0;
margin: $margin-y 0; margin: $margin-y 0;
overflow: hidden; overflow: hidden;
border-top: 1px solid $color; border-top: 1px solid $color;
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
} }

View File

@ -1,4 +1,4 @@
@mixin reset-text { @mixin reset-text() {
font-family: $font-family-base; font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap. // We deliberately do NOT reset font-size or word-wrap.
font-style: normal; font-style: normal;

View File

@ -3,11 +3,12 @@
// See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only { @mixin sr-only() {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
@ -20,7 +21,7 @@
// //
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
@mixin sr-only-focusable { @mixin sr-only-focusable() {
&:active, &:active,
&:focus { &:focus {
position: static; position: static;

View File

@ -26,7 +26,7 @@
$hover-background: darken($background, 5%); $hover-background: darken($background, 5%);
.table-#{$state} { .table-#{$state} {
@include hover { @include hover() {
background-color: $hover-background; background-color: $hover-background;
> td, > td,

View File

@ -2,15 +2,16 @@
// Typography // Typography
@mixin text-emphasis-variant($parent, $color) { @mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
#{$parent} { #{$parent} {
color: $color !important; color: $color !important;
} }
@if $emphasized-link-hover-darken-percentage != 0 { @if $emphasized-link-hover-darken-percentage != 0 {
a#{$parent} { a#{$parent} {
@include hover-focus { @include hover-focus() {
color: darken($color, $emphasized-link-hover-darken-percentage) !important; color: darken($color, $emphasized-link-hover-darken-percentage) !important;
} }
} }
} }
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
} }

View File

@ -1,7 +1,7 @@
// stylelint-disable declaration-no-important // stylelint-disable declaration-no-important
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include bg-variant(".bg-#{$color}", $value); @include bg-variant(".bg-#{$color}", $value, true);
} }
@if $enable-gradients { @if $enable-gradients {

View File

@ -11,7 +11,7 @@
.text-justify { text-align: justify !important; } .text-justify { text-align: justify !important; }
.text-wrap { white-space: normal !important; } .text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; } .text-nowrap { white-space: nowrap !important; }
.text-truncate { @include text-truncate; } .text-truncate { @include text-truncate(); }
// Responsive alignment // Responsive alignment
@ -45,7 +45,7 @@
.text-white { color: $white !important; } .text-white { color: $white !important; }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include text-emphasis-variant(".text-#{$color}", $value); @include text-emphasis-variant(".text-#{$color}", $value, true);
} }
.text-body { color: $body-color !important; } .text-body { color: $body-color !important; }