Update Bootstrap to version 4.5.0
This commit is contained in:
parent
6cc1a9e967
commit
9d8a2c427d
|
@ -16,7 +16,7 @@
|
|||
@include transition($badge-transition);
|
||||
|
||||
@at-root a#{&} {
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,12 +3,15 @@
|
|||
flex-wrap: wrap;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $breadcrumb-margin-bottom;
|
||||
@include font-size($breadcrumb-font-size);
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($breadcrumb-border-radius);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item {
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
|
@ -17,7 +20,7 @@
|
|||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: $breadcrumb-divider;
|
||||
content: escape-svg($breadcrumb-divider);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
@include hover() {
|
||||
z-index: 1;
|
||||
}
|
||||
&:focus,
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
font-weight: $btn-font-weight;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: $btn-white-space;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
|
@ -17,7 +19,7 @@
|
|||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $body-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
@ -35,12 +37,16 @@
|
|||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
&:active,
|
||||
&.active {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -79,7 +85,7 @@ fieldset:disabled a.btn {
|
|||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
@ -87,7 +93,6 @@ fieldset:disabled a.btn {
|
|||
&:focus,
|
||||
&.focus {
|
||||
text-decoration: $link-hover-decoration;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
height: $card-height;
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
|
@ -18,15 +19,18 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
> .list-group {
|
||||
border-top: inherit;
|
||||
border-bottom: inherit;
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -35,6 +39,9 @@
|
|||
// 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.
|
||||
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;
|
||||
color: $card-color;
|
||||
}
|
||||
|
@ -53,7 +60,7 @@
|
|||
}
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
@include hover() {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -86,6 +93,7 @@
|
|||
|
||||
.card-footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
color: $card-cap-color;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
|
@ -121,19 +129,20 @@
|
|||
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
|
||||
@include border-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
// Card image caps
|
||||
.card-img,
|
||||
.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);
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.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);
|
||||
}
|
||||
|
||||
|
@ -141,23 +150,19 @@
|
|||
// Card deck
|
||||
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-deck-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
flex: 1 0 0%;
|
||||
flex-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Override the default
|
||||
margin-left: $card-deck-margin;
|
||||
|
@ -171,9 +176,6 @@
|
|||
//
|
||||
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
|
@ -181,6 +183,7 @@
|
|||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
|
@ -262,27 +265,17 @@
|
|||
> .card {
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
.card-header:first-child {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 0;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&:not(:first-of-type) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
> .card-header {
|
||||
@include border-radius(0);
|
||||
margin-bottom: -$card-border-width;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
.active.carousel-item-right {
|
||||
z-index: 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);
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
|
@ -111,13 +111,13 @@
|
|||
.carousel-control-prev {
|
||||
left: 0;
|
||||
@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 {
|
||||
right: 0;
|
||||
@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%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
background-image: escape-svg($carousel-control-prev-icon-bg);
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
background-image: escape-svg($carousel-control-next-icon-bg);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
opacity: .5;
|
||||
|
||||
// Override <a>'s hover style
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
@ -30,7 +30,6 @@ button.close {
|
|||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
code {
|
||||
@include font-size($code-font-size);
|
||||
color: $code-color;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
|
|
|
@ -21,7 +21,10 @@
|
|||
|
||||
.custom-control-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
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;
|
||||
|
||||
&:checked ~ .custom-control-label::before {
|
||||
|
@ -51,6 +54,8 @@
|
|||
@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 {
|
||||
~ .custom-control-label {
|
||||
color: $custom-control-label-disabled-color;
|
||||
|
@ -69,7 +74,9 @@
|
|||
.custom-control-label {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
color: $custom-control-label-color;
|
||||
vertical-align: top;
|
||||
cursor: $custom-control-cursor;
|
||||
|
||||
// Background-color and (when enabled) gradient
|
||||
&::before {
|
||||
|
@ -111,7 +118,7 @@
|
|||
|
||||
.custom-control-input:checked ~ .custom-control-label {
|
||||
&::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);
|
||||
}
|
||||
&::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 {
|
||||
&::after {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
background-image: escape-svg($custom-radio-indicator-icon-checked);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -177,8 +184,8 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
top: calc(#{(($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});
|
||||
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $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;
|
||||
height: $custom-switch-indicator-size;
|
||||
background-color: $custom-control-indicator-border-color;
|
||||
|
@ -220,8 +227,7 @@
|
|||
line-height: $custom-select-line-height;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: $custom-select-background;
|
||||
background-color: $custom-select-bg;
|
||||
background: $custom-select-bg $custom-select-background;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@include border-radius($custom-select-border-radius, 0);
|
||||
@include box-shadow($custom-select-box-shadow);
|
||||
|
@ -231,8 +237,9 @@
|
|||
border-color: $custom-select-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
|
||||
@include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $custom-select-focus-box-shadow;
|
||||
}
|
||||
|
||||
|
@ -263,6 +270,12 @@
|
|||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Remove outline from select box in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $custom-select-color;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
|
@ -307,6 +320,8 @@
|
|||
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 {
|
||||
background-color: $custom-file-disabled-bg;
|
||||
}
|
||||
|
@ -365,7 +380,7 @@
|
|||
|
||||
.custom-range {
|
||||
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
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
// Generate the caret automatically
|
||||
@include caret;
|
||||
@include caret();
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
|
@ -114,7 +114,7 @@
|
|||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.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
|
||||
|
@ -128,6 +128,7 @@
|
|||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
@ -144,7 +145,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
|
@ -176,7 +177,7 @@
|
|||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
padding: $dropdown-header-padding;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
@include font-size($font-size-sm);
|
||||
color: $dropdown-header-color;
|
||||
|
|
|
@ -30,8 +30,14 @@
|
|||
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.
|
||||
@include form-control-focus();
|
||||
@include form-control-focus($ignore-warning: true);
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
|
@ -53,6 +59,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
&.form-control {
|
||||
appearance: none; // Fix appearance for date inputs in Safari
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:focus::-ms-value {
|
||||
// Suppress the nested default white text on blue background highlight given to
|
||||
|
@ -80,23 +95,23 @@ select.form-control {
|
|||
// For use with horizontal and inline forms, when you need the label (or legend)
|
||||
// text to align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
|
||||
padding-top: add($input-padding-y, $input-border-width);
|
||||
padding-bottom: add($input-padding-y, $input-border-width);
|
||||
margin-bottom: 0; // Override the `<label>/<legend>` default
|
||||
@include font-size(inherit); // Override the `<legend>` default
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||
padding-top: add($input-padding-y-lg, $input-border-width);
|
||||
padding-bottom: add($input-padding-y-lg, $input-border-width);
|
||||
@include font-size($input-font-size-lg);
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||
padding-top: add($input-padding-y-sm, $input-border-width);
|
||||
padding-bottom: add($input-padding-y-sm, $input-border-width);
|
||||
@include font-size($input-font-size-sm);
|
||||
line-height: $input-line-height-sm;
|
||||
}
|
||||
|
@ -110,9 +125,9 @@ select.form-control {
|
|||
.form-control-plaintext {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
padding: $input-padding-y 0;
|
||||
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;
|
||||
color: $input-plaintext-color;
|
||||
background-color: transparent;
|
||||
|
@ -210,6 +225,8 @@ textarea.form-control {
|
|||
margin-top: $form-check-input-margin-y;
|
||||
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 {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@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
|
||||
} @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}' !";
|
||||
|
@ -23,10 +23,12 @@
|
|||
// Starts at zero
|
||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||
@if length($map) > 0 {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -48,6 +50,22 @@
|
|||
@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 {
|
||||
// Do not escape the url brackets
|
||||
@if str-index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
||||
} @else {
|
||||
$string: str-replace($string, $char, $encoded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
||||
$r: red($color);
|
||||
|
@ -84,3 +102,40 @@
|
|||
|
||||
@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);
|
||||
}
|
||||
|
|
|
@ -3,26 +3,51 @@
|
|||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
// Single container class with breakpoint max-widths
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
||||
// fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
// 100% wide container at all breakpoints
|
||||
.container-fluid {
|
||||
@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;
|
||||
}
|
||||
|
||||
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
||||
$extend-breakpoint: true;
|
||||
|
||||
@each $name, $width in $grid-breakpoints {
|
||||
@if ($extend-breakpoint) {
|
||||
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||
@extend %responsive-container-#{$breakpoint};
|
||||
}
|
||||
|
||||
// Once the current breakpoint is reached, stop extending
|
||||
@if ($breakpoint == $name) {
|
||||
$extend-breakpoint: false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
// Rows contain your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
|
||||
|
@ -19,7 +19,7 @@
|
|||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid;
|
||||
@include img-fluid();
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
@ -17,9 +17,8 @@
|
|||
> .custom-file {
|
||||
position: relative; // For focus state's z-index
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
width: 1%;
|
||||
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .form-control,
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
|
||||
|
@ -23,7 +24,7 @@
|
|||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
||||
color: $list-group-action-hover-color;
|
||||
text-decoration: none;
|
||||
|
@ -45,19 +46,17 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
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;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
@include border-top-radius(inherit);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
@include border-bottom-radius(inherit);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
@ -74,6 +73,15 @@
|
|||
background-color: $list-group-active-bg;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -88,20 +96,30 @@
|
|||
.list-group-horizontal#{$infix} {
|
||||
flex-direction: row;
|
||||
|
||||
.list-group-item {
|
||||
margin-right: -$list-group-border-width;
|
||||
margin-bottom: 0;
|
||||
|
||||
> .list-group-item {
|
||||
&: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);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
@include border-right-radius($list-group-border-radius);
|
||||
@include border-top-right-radius($list-group-border-radius);
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -114,26 +132,13 @@
|
|||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
@include border-radius(0);
|
||||
@include border-radius(0);
|
||||
|
||||
> .list-group-item {
|
||||
border-width: 0 0 $list-group-border-width;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -$list-group-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
@import "mixins/text-truncate";
|
||||
@import "mixins/visibility";
|
||||
|
||||
// // Components
|
||||
// Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
|
@ -33,14 +33,14 @@
|
|||
@import "mixins/forms";
|
||||
@import "mixins/table-row";
|
||||
|
||||
// // Skins
|
||||
// Skins
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/box-shadow";
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/transition";
|
||||
|
||||
// // Layout
|
||||
// Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
|
|
|
@ -48,14 +48,19 @@
|
|||
.modal.show & {
|
||||
transform: $modal-show-transform;
|
||||
}
|
||||
|
||||
// When trying to close, animate focus to scale
|
||||
.modal.modal-static & {
|
||||
transform: $modal-scale-transform;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
display: flex; // IE10/11
|
||||
max-height: calc(100% - #{$modal-dialog-margin * 2});
|
||||
max-height: subtract(100%, $modal-dialog-margin * 2);
|
||||
|
||||
.modal-content {
|
||||
max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
|
||||
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
@ -72,12 +77,13 @@
|
|||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
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)
|
||||
&::before {
|
||||
display: block; // IE10
|
||||
height: calc(100vh - #{$modal-dialog-margin * 2});
|
||||
height: subtract(100vh, $modal-dialog-margin * 2);
|
||||
height: min-content; // Reset height to 0 except on IE
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
@ -138,7 +144,7 @@
|
|||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding;
|
||||
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 {
|
||||
padding: $modal-header-padding;
|
||||
|
@ -158,7 +164,7 @@
|
|||
.modal-body {
|
||||
position: relative;
|
||||
// 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;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
@ -166,15 +172,20 @@
|
|||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center; // vertically center
|
||||
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;
|
||||
@include border-bottom-radius($modal-content-border-radius);
|
||||
@include border-bottom-radius($modal-content-inner-border-radius);
|
||||
|
||||
// Easily place margin between footer elements
|
||||
> :not(:first-child) { margin-left: .25rem; }
|
||||
> :not(:last-child) { margin-right: .25rem; }
|
||||
// Place margin between footer elements
|
||||
// This solution is far from ideal because of the universal selector usage,
|
||||
// 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
|
||||
|
@ -195,18 +206,19 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
|
||||
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||
|
||||
&::before {
|
||||
height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
|
||||
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
||||
height: min-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// Base class
|
||||
//
|
||||
// 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 {
|
||||
display: flex;
|
||||
|
@ -14,8 +14,9 @@
|
|||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -42,7 +43,7 @@
|
|||
border: $nav-tabs-border-width solid transparent;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
border-color: $nav-tabs-link-hover-border-color;
|
||||
}
|
||||
|
||||
|
|
|
@ -25,13 +25,23 @@
|
|||
|
||||
// Because flex properties aren't inherited, we need to redeclare these first
|
||||
// few properties so that content nested within behave properly.
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
%container-flex-properties {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
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;
|
||||
white-space: nowrap;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -113,7 +123,7 @@
|
|||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -139,11 +149,21 @@
|
|||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
%container-navbar-expand-#{$breakpoint} {
|
||||
padding-right: 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) {
|
||||
|
@ -164,9 +184,19 @@
|
|||
}
|
||||
|
||||
// For nesting containers, have to redeclare for alignment purposes
|
||||
%container-nesting-#{$breakpoint} {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
> .container,
|
||||
> .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 {
|
||||
|
@ -194,7 +224,7 @@
|
|||
.navbar-brand {
|
||||
color: $navbar-light-brand-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-light-brand-hover-color;
|
||||
}
|
||||
}
|
||||
|
@ -203,7 +233,7 @@
|
|||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
|
@ -226,7 +256,7 @@
|
|||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-light-toggler-icon-bg;
|
||||
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
|
@ -234,7 +264,7 @@
|
|||
a {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
@ -246,7 +276,7 @@
|
|||
.navbar-brand {
|
||||
color: $navbar-dark-brand-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-dark-brand-hover-color;
|
||||
}
|
||||
}
|
||||
|
@ -255,7 +285,7 @@
|
|||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
|
@ -278,7 +308,7 @@
|
|||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-dark-toggler-icon-bg;
|
||||
background-image: escape-svg($navbar-dark-toggler-icon-bg);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
|
@ -286,7 +316,7 @@
|
|||
a {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
margin-left: -$pagination-border-width;
|
||||
line-height: $pagination-line-height;
|
||||
color: $pagination-color;
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
|
||||
|
@ -23,7 +24,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
outline: $pagination-focus-outline;
|
||||
box-shadow: $pagination-focus-box-shadow;
|
||||
}
|
||||
|
@ -43,7 +44,7 @@
|
|||
}
|
||||
|
||||
&.active .page-link {
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border-color;
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
display: block;
|
||||
width: $popover-arrow-width;
|
||||
height: $popover-arrow-height;
|
||||
margin: 0 $border-radius-lg;
|
||||
margin: 0 $popover-border-radius;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
@ -39,7 +39,7 @@
|
|||
margin-bottom: $popover-arrow-height;
|
||||
|
||||
> .arrow {
|
||||
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
|
@ -59,10 +59,10 @@
|
|||
margin-left: $popover-arrow-height;
|
||||
|
||||
> .arrow {
|
||||
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||
left: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
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 {
|
||||
left: 0;
|
||||
|
@ -82,7 +82,7 @@
|
|||
margin-top: $popover-arrow-height;
|
||||
|
||||
> .arrow {
|
||||
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||
top: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
|
@ -114,10 +114,10 @@
|
|||
margin-right: $popover-arrow-height;
|
||||
|
||||
> .arrow {
|
||||
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
||||
right: subtract(-$popover-arrow-height, $popover-border-width);
|
||||
width: $popover-arrow-height;
|
||||
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 {
|
||||
right: 0;
|
||||
|
@ -157,8 +157,7 @@
|
|||
color: $popover-header-color;
|
||||
background-color: $popover-header-bg;
|
||||
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($offset-border-width);
|
||||
@include border-top-radius($popover-inner-border-radius);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// 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.
|
||||
|
@ -57,7 +57,7 @@
|
|||
|
||||
//
|
||||
// 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 {
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
display: flex;
|
||||
height: $progress-height;
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
line-height: 0;
|
||||
@include font-size($progress-font-size);
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
|
@ -20,6 +21,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: $progress-bar-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
@ -36,8 +38,10 @@
|
|||
.progress-bar-animated {
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
@if $enable-prefers-reduced-motion-media-query {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -54,12 +54,16 @@ body {
|
|||
background-color: $body-bg; // 2
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
|
||||
// on elements that programmatically receive focus but wouldn't normally show a visible
|
||||
// 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
|
||||
[tabindex="-1"]:focus {
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
|
||||
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
|
||||
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
|
@ -184,30 +188,25 @@ a {
|
|||
text-decoration: $link-decoration;
|
||||
background-color: transparent; // Remove the gray background on active links in IE 10.
|
||||
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href)
|
||||
// which have not been made explicitly keyboard-focusable (without tabindex).
|
||||
// And undo these styles for placeholder links/named anchors (without href).
|
||||
// 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.
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@include hover-focus {
|
||||
@include hover() {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -230,6 +229,9 @@ pre {
|
|||
margin-bottom: 1rem;
|
||||
// Don't allow content to break outside
|
||||
overflow: auto;
|
||||
// Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
|
||||
// making it impossible to interact with the content
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
|
||||
|
@ -331,6 +333,13 @@ select {
|
|||
text-transform: none; // Remove the inheritance of text transform in Firefox
|
||||
}
|
||||
|
||||
// Set the cursor for non-`<button>` buttons
|
||||
//
|
||||
// Details at https://github.com/twbs/bootstrap/pull/30562
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Remove the inheritance of word-wrap in Safari.
|
||||
//
|
||||
// Details at https://github.com/twbs/bootstrap/issues/24990
|
||||
|
@ -377,18 +386,6 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
// and https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// Do not forget to update getting-started/theming.md!
|
||||
:root {
|
||||
// Custom variable values only support SassScript inside `#{}`.
|
||||
@each $color, $value in $colors {
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $table-hover-color;
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
|
@ -142,14 +142,14 @@
|
|||
}
|
||||
|
||||
&.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
tbody tr:nth-of-type(#{$table-striped-order}) {
|
||||
background-color: $table-dark-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $table-dark-hover-color;
|
||||
background-color: $table-dark-hover-bg;
|
||||
}
|
||||
|
|
|
@ -82,12 +82,12 @@ mark,
|
|||
//
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled;
|
||||
@include list-unstyled();
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@include list-unstyled;
|
||||
@include list-unstyled();
|
||||
}
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
|
|
@ -6,12 +6,13 @@
|
|||
@import "utilities/embed";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/float";
|
||||
@import "utilities/interactions";
|
||||
@import "utilities/overflow";
|
||||
@import "utilities/position";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/shadows";
|
||||
@import "utilities/sizing";
|
||||
@import "utilities/stretched-link";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/stretched-link";
|
||||
@import "utilities/text";
|
||||
@import "utilities/visibility";
|
||||
|
|
|
@ -101,6 +101,15 @@ $yiq-contrasted-threshold: 150 !default;
|
|||
$yiq-text-dark: $gray-900 !default;
|
||||
$yiq-text-light: $white !default;
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (
|
||||
("<","%3c"),
|
||||
(">","%3e"),
|
||||
("#","%23"),
|
||||
("(","%28"),
|
||||
(")","%29"),
|
||||
) !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
|
@ -220,6 +229,7 @@ $container-max-widths: (
|
|||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
$grid-row-columns: 6 !default;
|
||||
|
||||
|
||||
// Components
|
||||
|
@ -366,7 +376,6 @@ $table-dark-accent-bg: rgba($white, .05) !default;
|
|||
$table-dark-hover-color: $table-dark-color !default;
|
||||
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
|
||||
$table-dark-color: $white !default;
|
||||
|
||||
$table-striped-order: odd !default;
|
||||
|
||||
|
@ -412,6 +421,7 @@ $btn-padding-x: $input-btn-padding-x !default;
|
|||
$btn-font-family: $input-btn-font-family !default;
|
||||
$btn-font-size: $input-btn-font-size !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-x-sm: $input-btn-padding-x-sm !default;
|
||||
|
@ -488,13 +498,13 @@ $input-plaintext-color: $body-color !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-half: calc(#{$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: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
||||
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !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-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
|
||||
$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 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: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !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;
|
||||
|
||||
|
@ -518,6 +528,7 @@ $custom-forms-transition: background-color .15s ease-in-out, borde
|
|||
|
||||
$custom-control-gutter: .5rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
$custom-control-cursor: null !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-bg: $input-bg !default;
|
||||
|
@ -527,6 +538,8 @@ $custom-control-indicator-box-shadow: $input-box-shadow !default;
|
|||
$custom-control-indicator-border-color: $gray-500 !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-label-disabled-color: $gray-600 !default;
|
||||
|
||||
|
@ -545,20 +558,20 @@ $custom-control-indicator-active-box-shadow: none !default;
|
|||
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !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-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-border-color: $custom-checkbox-indicator-indeterminate-bg !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-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-x: $input-padding-x !default;
|
||||
|
@ -574,10 +587,10 @@ $custom-select-bg: $input-bg !default;
|
|||
$custom-select-disabled-bg: $gray-200 !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$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-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-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: 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-size: $input-height-inner-half $input-height-inner-half !default;
|
||||
|
||||
|
@ -650,9 +663,9 @@ $form-feedback-valid-color: theme-color("success") !default;
|
|||
$form-feedback-invalid-color: theme-color("danger") !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: 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;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
|
@ -728,14 +741,14 @@ $navbar-dark-color: rgba($white, .5) !default;
|
|||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||
$navbar-dark-active-color: $white !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-light-color: rgba($black, .5) !default;
|
||||
$navbar-light-hover-color: rgba($black, .7) !default;
|
||||
$navbar-light-active-color: rgba($black, .9) !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-brand-color: $navbar-light-active-color !default;
|
||||
|
@ -757,7 +770,7 @@ $dropdown-bg: $white !default;
|
|||
$dropdown-border-color: rgba($black, .15) !default;
|
||||
$dropdown-border-radius: $border-radius !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-margin-y: $nav-divider-margin-y !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
||||
|
@ -775,6 +788,7 @@ $dropdown-item-padding-y: .25rem !default;
|
|||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-600 !default;
|
||||
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
|
@ -822,9 +836,10 @@ $card-spacer-x: 1.25rem !default;
|
|||
$card-border-width: $border-width !default;
|
||||
$card-border-radius: $border-radius !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-color: null !default;
|
||||
$card-height: null !default;
|
||||
$card-color: null !default;
|
||||
$card-bg: $white !default;
|
||||
|
||||
|
@ -871,6 +886,7 @@ $popover-max-width: 276px !default;
|
|||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black, .2) !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-header-bg: darken($popover-bg, 3%) !default;
|
||||
|
@ -929,6 +945,9 @@ $badge-pill-border-radius: 10rem !default;
|
|||
// Padding applied to the modal body
|
||||
$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-y-sm-up: 1.75rem !default;
|
||||
|
||||
|
@ -939,6 +958,7 @@ $modal-content-bg: $white !default;
|
|||
$modal-content-border-color: rgba($black, .2) !default;
|
||||
$modal-content-border-width: $border-width !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-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
||||
|
||||
|
@ -960,6 +980,7 @@ $modal-sm: 300px !default;
|
|||
$modal-fade-transform: translate(0, -50px) !default;
|
||||
$modal-show-transform: none !default;
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
$modal-scale-transform: scale(1.02) !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
|
@ -1035,6 +1056,8 @@ $figure-caption-color: $gray-600 !default;
|
|||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-font-size: null !default;
|
||||
|
||||
$breadcrumb-padding-y: .75rem !default;
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
$breadcrumb-item-padding: .5rem !default;
|
||||
|
@ -1069,8 +1092,8 @@ $carousel-caption-color: $white !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-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-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: 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: 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`)
|
||||
|
@ -1115,6 +1138,7 @@ $pre-scrollable-max-height: 340px !default;
|
|||
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
|
||||
$overflows: auto, hidden !default;
|
||||
$positions: static, relative, absolute, fixed, sticky !default;
|
||||
$user-selects: all, auto, none !default;
|
||||
|
||||
|
||||
// Printing
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Bootstrap Grid v4.5.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Bootstrap Reboot v4.5.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Bootstrap v4.5.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
@ -2,20 +2,22 @@
|
|||
|
||||
// Contextual backgrounds
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
@mixin bg-variant($parent, $color, $ignore-warning: false) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
@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) {
|
||||
@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);
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
background-color: $bg;
|
||||
|
||||
@at-root a#{&} {
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: color-yiq($bg);
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,22 @@
|
|||
// stylelint-disable property-blacklist
|
||||
// Single side border-radius
|
||||
|
||||
// Helper function to replace negative values with 0
|
||||
@function valid-radius($radius) {
|
||||
$return: ();
|
||||
@each $value in $radius {
|
||||
@if type-of($value) == number {
|
||||
$return: append($return, max($value, 0));
|
||||
} @else {
|
||||
$return: append($return, $value);
|
||||
}
|
||||
}
|
||||
@return $return;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
border-radius: valid-radius($radius);
|
||||
}
|
||||
@else if $fallback-border-radius != false {
|
||||
border-radius: $fallback-border-radius;
|
||||
|
@ -12,52 +25,52 @@
|
|||
|
||||
@mixin border-top-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: valid-radius($radius);
|
||||
border-top-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: valid-radius($radius);
|
||||
border-bottom-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: valid-radius($radius);
|
||||
border-bottom-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: valid-radius($radius);
|
||||
border-bottom-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-right-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-left-radius: valid-radius($radius);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
|
@ -17,10 +17,13 @@
|
|||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
@if $enable-shadows {
|
||||
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-yiq($background), $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);
|
||||
}
|
||||
}
|
||||
|
@ -48,10 +51,10 @@
|
|||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $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);
|
||||
}
|
||||
}
|
||||
|
@ -62,7 +65,7 @@
|
|||
color: $color;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
@include hover() {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
@ -87,10 +90,10 @@
|
|||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
@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
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
@mixin caret-down {
|
||||
@mixin caret-down() {
|
||||
border-top: $caret-width solid;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret-up {
|
||||
@mixin caret-up() {
|
||||
border-top: 0;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: $caret-width solid;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret-right {
|
||||
@mixin caret-right() {
|
||||
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-left() {
|
||||
border-top: $caret-width solid transparent;
|
||||
border-right: $caret-width solid;
|
||||
border-bottom: $caret-width solid transparent;
|
||||
|
@ -33,11 +33,11 @@
|
|||
vertical-align: $caret-vertical-align;
|
||||
content: "";
|
||||
@if $direction == down {
|
||||
@include caret-down;
|
||||
@include caret-down();
|
||||
} @else if $direction == up {
|
||||
@include caret-up;
|
||||
@include caret-up();
|
||||
} @else if $direction == right {
|
||||
@include caret-right;
|
||||
@include caret-right();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -51,7 +51,7 @@
|
|||
margin-right: $caret-spacing;
|
||||
vertical-align: $caret-vertical-align;
|
||||
content: "";
|
||||
@include caret-left;
|
||||
@include caret-left();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@mixin float-left {
|
||||
@mixin float-left() {
|
||||
float: left !important;
|
||||
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-right {
|
||||
@mixin float-right() {
|
||||
float: right !important;
|
||||
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
@mixin float-none {
|
||||
@mixin float-none() {
|
||||
float: none !important;
|
||||
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
||||
}
|
||||
|
|
|
@ -10,21 +10,36 @@
|
|||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
@mixin form-control-focus() {
|
||||
@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;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
@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
|
||||
@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) {
|
||||
.#{$state}-feedback {
|
||||
|
@ -50,16 +65,22 @@
|
|||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
}
|
||||
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
@if $enable-validation-icons {
|
||||
padding-right: $input-height-inner;
|
||||
background-image: $icon;
|
||||
background-image: escape-svg($icon);
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -67,18 +88,12 @@
|
|||
border-color: $color;
|
||||
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
|
||||
textarea.form-control {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@include form-validation-state-selector($state) {
|
||||
@if $enable-validation-icons {
|
||||
padding-right: $input-height-inner;
|
||||
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
||||
|
@ -87,41 +102,23 @@
|
|||
}
|
||||
|
||||
.custom-select {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@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, $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 {
|
||||
border-color: $color;
|
||||
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 {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
|
@ -134,8 +131,7 @@
|
|||
}
|
||||
|
||||
.custom-control-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
|
@ -144,11 +140,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
border-color: lighten($color, 10%);
|
||||
|
@ -170,17 +161,11 @@
|
|||
|
||||
// custom file
|
||||
.custom-file-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
|
|
|
@ -15,12 +15,15 @@
|
|||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@extend %grid-column;
|
||||
@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;
|
||||
|
@ -31,17 +34,27 @@
|
|||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
|
||||
max-width: 100%;
|
||||
}
|
||||
.col#{$infix}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%; // Reset earlier grid tiers
|
||||
|
||||
@if $grid-row-columns > 0 {
|
||||
@for $i from 1 through $grid-row-columns {
|
||||
.row-cols#{$infix}-#{$i} {
|
||||
@include row-cols($i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
.col#{$infix}-auto {
|
||||
@include make-col-auto();
|
||||
}
|
||||
|
||||
@if $columns > 0 {
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -53,11 +66,13 @@
|
|||
.order#{$infix}-#{$i} { order: $i; }
|
||||
}
|
||||
|
||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
||||
@for $i from 0 through ($columns - 1) {
|
||||
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
||||
.offset#{$infix}-#{$i} {
|
||||
@include make-col-offset($i, $columns);
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -45,7 +45,25 @@
|
|||
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) {
|
||||
$num: $size / $columns;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,18 +9,18 @@
|
|||
//
|
||||
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
||||
|
||||
@mixin hover {
|
||||
@mixin hover() {
|
||||
&:hover { @content; }
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
@mixin hover-focus() {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin plain-hover-focus {
|
||||
@mixin plain-hover-focus() {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus-active {
|
||||
@mixin hover-focus-active() {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
//
|
||||
// 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
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
background-color: $background;
|
||||
|
||||
&.list-group-item-action {
|
||||
@include hover-focus {
|
||||
@include hover-focus() {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -2,9 +2,10 @@
|
|||
//
|
||||
// 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;
|
||||
margin: $margin-y 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid $color;
|
||||
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@mixin reset-text {
|
||||
@mixin reset-text() {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
font-style: normal;
|
||||
|
|
|
@ -3,11 +3,12 @@
|
|||
// See: https://a11yproject.com/posts/how-to-hide-content/
|
||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
|
||||
@mixin sr-only {
|
||||
@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;
|
||||
|
@ -20,7 +21,7 @@
|
|||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
@mixin sr-only-focusable {
|
||||
@mixin sr-only-focusable() {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
$hover-background: darken($background, 5%);
|
||||
|
||||
.table-#{$state} {
|
||||
@include hover {
|
||||
@include hover() {
|
||||
background-color: $hover-background;
|
||||
|
||||
> td,
|
||||
|
|
|
@ -2,15 +2,16 @@
|
|||
|
||||
// Typography
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
@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 {
|
||||
@include hover-focus() {
|
||||
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
|
|
@ -1,16 +1,26 @@
|
|||
// stylelint-disable property-blacklist
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
@if length($transition) == 0 {
|
||||
$transition: $transition-base;
|
||||
}
|
||||
|
||||
@if length($transition) > 1 {
|
||||
@each $value in $transition {
|
||||
@if $value == null or $value == none {
|
||||
@warn "The keyword 'none' or 'null' must be used as a single argument.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-prefers-reduced-motion-media-query {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
@if $enable-transitions {
|
||||
@if nth($transition, 1) != null {
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
@if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
@include bg-variant(".bg-#{$color}", $value, true);
|
||||
}
|
||||
|
||||
@if $enable-gradients {
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@each $value in $user-selects {
|
||||
.user-select-#{$value} { user-select: $value !important; }
|
||||
}
|
|
@ -11,7 +11,7 @@
|
|||
.text-justify { text-align: justify !important; }
|
||||
.text-wrap { white-space: normal !important; }
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
.text-truncate { @include text-truncate; }
|
||||
.text-truncate { @include text-truncate(); }
|
||||
|
||||
// Responsive alignment
|
||||
|
||||
|
@ -45,7 +45,7 @@
|
|||
.text-white { color: $white !important; }
|
||||
|
||||
@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; }
|
||||
|
@ -63,8 +63,7 @@
|
|||
.text-decoration-none { text-decoration: none !important; }
|
||||
|
||||
.text-break {
|
||||
word-break: break-word !important; // IE & < Edge 18
|
||||
overflow-wrap: break-word !important;
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
|
||||
// Reset
|
||||
|
|
Loading…
Reference in New Issue