forked from fleg/hswro_org
update to bootstrap v4.6
This commit is contained in:
parent
9c3310b85d
commit
986d18016e
|
@ -1,3 +1,5 @@
|
||||||
|
// assets/css/style.scss is where Jekyll loads the main stylesheet
|
||||||
|
|
||||||
$grid-breakpoints: (
|
$grid-breakpoints: (
|
||||||
xs: 0,
|
xs: 0,
|
||||||
sm: 576px,
|
sm: 576px,
|
||||||
|
|
|
@ -34,6 +34,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
padding: $alert-padding-y $alert-padding-x;
|
padding: $alert-padding-y $alert-padding-x;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
padding-left: $breadcrumb-item-padding;
|
padding-left: $breadcrumb-item-padding;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
float: left; // Suppress inline spacings and underlining of the separator
|
||||||
padding-right: $breadcrumb-item-padding;
|
padding-right: $breadcrumb-item-padding;
|
||||||
color: $breadcrumb-divider-color;
|
color: $breadcrumb-divider-color;
|
||||||
content: escape-svg($breadcrumb-divider);
|
content: escape-svg($breadcrumb-divider);
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
white-space: $btn-white-space;
|
white-space: $btn-white-space;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: $btn-border-width solid transparent;
|
border: $btn-border-width solid transparent;
|
||||||
|
@ -37,12 +37,16 @@
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled):active,
|
&:not(:disabled):not(.disabled) {
|
||||||
&:not(:disabled):not(.disabled).active {
|
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
|
||||||
@include box-shadow($btn-active-box-shadow);
|
|
||||||
|
|
||||||
&:focus {
|
&:active,
|
||||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
&.active {
|
||||||
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -89,7 +93,6 @@ fieldset:disabled a.btn {
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
|
|
|
@ -19,16 +19,26 @@
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .list-group:first-child {
|
> .list-group {
|
||||||
.list-group-item:first-child {
|
border-top: inherit;
|
||||||
@include border-top-radius($card-border-radius);
|
border-bottom: inherit;
|
||||||
|
|
||||||
|
&: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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .list-group:last-child {
|
// Due to specificity of the above selector (`.card > .list-group`), we must
|
||||||
.list-group-item:last-child {
|
// use a child selector here to prevent double borders.
|
||||||
@include border-bottom-radius($card-border-radius);
|
> .card-header + .list-group,
|
||||||
}
|
> .list-group + .card-footer {
|
||||||
|
border-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,16 +90,11 @@
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .list-group {
|
|
||||||
.list-group-item:first-child {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
padding: $card-spacer-y $card-spacer-x;
|
padding: $card-spacer-y $card-spacer-x;
|
||||||
|
color: $card-cap-color;
|
||||||
background-color: $card-cap-bg;
|
background-color: $card-cap-bg;
|
||||||
border-top: $card-border-width solid $card-border-color;
|
border-top: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
|
@ -123,6 +128,7 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: $card-img-overlay-padding;
|
padding: $card-img-overlay-padding;
|
||||||
|
@include border-radius($card-inner-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img,
|
.card-img,
|
||||||
|
@ -200,12 +206,12 @@
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-header {
|
.card-header {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
}
|
}
|
||||||
.card-img-bottom,
|
.card-img-bottom,
|
||||||
.card-footer {
|
.card-footer {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -215,12 +221,12 @@
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-header {
|
.card-header {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
}
|
}
|
||||||
.card-img-bottom,
|
.card-img-bottom,
|
||||||
.card-footer {
|
.card-footer {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -258,6 +264,8 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.accordion {
|
.accordion {
|
||||||
|
overflow-anchor: none;
|
||||||
|
|
||||||
> .card {
|
> .card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: $carousel-control-icon-width;
|
width: $carousel-control-icon-width;
|
||||||
height: $carousel-control-icon-width;
|
height: $carousel-control-icon-width;
|
||||||
background: no-repeat 50% / 100% 100%;
|
background: 50% / 100% 100% no-repeat;
|
||||||
}
|
}
|
||||||
.carousel-control-prev-icon {
|
.carousel-control-prev-icon {
|
||||||
background-image: escape-svg($carousel-control-prev-icon-bg);
|
background-image: escape-svg($carousel-control-prev-icon-bg);
|
||||||
|
|
|
@ -30,7 +30,6 @@ button.close {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
appearance: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Future-proof disabling of clicks on `<a>` elements
|
// Future-proof disabling of clicks on `<a>` elements
|
||||||
|
|
|
@ -9,9 +9,11 @@
|
||||||
|
|
||||||
.custom-control {
|
.custom-control {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
display: block;
|
display: block;
|
||||||
min-height: $font-size-base * $line-height-base;
|
min-height: $font-size-base * $line-height-base;
|
||||||
padding-left: $custom-control-gutter + $custom-control-indicator-size;
|
padding-left: $custom-control-gutter + $custom-control-indicator-size;
|
||||||
|
color-adjust: exact; // Keep themed appearance for print
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-inline {
|
.custom-control-inline {
|
||||||
|
@ -37,7 +39,7 @@
|
||||||
&:focus ~ .custom-control-label::before {
|
&:focus ~ .custom-control-label::before {
|
||||||
// the mixin is not used here to make sure there is feedback
|
// the mixin is not used here to make sure there is feedback
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: $custom-control-indicator-focus-box-shadow;
|
box-shadow: $custom-control-indicator-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
@ -102,7 +104,7 @@
|
||||||
width: $custom-control-indicator-size;
|
width: $custom-control-indicator-size;
|
||||||
height: $custom-control-indicator-size;
|
height: $custom-control-indicator-size;
|
||||||
content: "";
|
content: "";
|
||||||
background: no-repeat 50% / #{$custom-control-indicator-bg-size};
|
background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -135,10 +137,10 @@
|
||||||
|
|
||||||
.custom-control-input:disabled {
|
.custom-control-input:disabled {
|
||||||
&:checked ~ .custom-control-label::before {
|
&:checked ~ .custom-control-label::before {
|
||||||
background-color: $custom-control-indicator-checked-disabled-bg;
|
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
||||||
}
|
}
|
||||||
&:indeterminate ~ .custom-control-label::before {
|
&:indeterminate ~ .custom-control-label::before {
|
||||||
background-color: $custom-control-indicator-checked-disabled-bg;
|
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -149,7 +151,7 @@
|
||||||
|
|
||||||
.custom-radio {
|
.custom-radio {
|
||||||
.custom-control-label::before {
|
.custom-control-label::before {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: $custom-radio-indicator-border-radius;
|
border-radius: $custom-radio-indicator-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -161,7 +163,7 @@
|
||||||
|
|
||||||
.custom-control-input:disabled {
|
.custom-control-input:disabled {
|
||||||
&:checked ~ .custom-control-label::before {
|
&:checked ~ .custom-control-label::before {
|
||||||
background-color: $custom-control-indicator-checked-disabled-bg;
|
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -179,7 +181,7 @@
|
||||||
left: -($custom-switch-width + $custom-control-gutter);
|
left: -($custom-switch-width + $custom-control-gutter);
|
||||||
width: $custom-switch-width;
|
width: $custom-switch-width;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: $custom-switch-indicator-border-radius;
|
border-radius: $custom-switch-indicator-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -189,7 +191,7 @@
|
||||||
width: $custom-switch-indicator-size;
|
width: $custom-switch-indicator-size;
|
||||||
height: $custom-switch-indicator-size;
|
height: $custom-switch-indicator-size;
|
||||||
background-color: $custom-control-indicator-border-color;
|
background-color: $custom-control-indicator-border-color;
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: $custom-switch-indicator-border-radius;
|
border-radius: $custom-switch-indicator-border-radius;
|
||||||
@include transition(transform .15s ease-in-out, $custom-forms-transition);
|
@include transition(transform .15s ease-in-out, $custom-forms-transition);
|
||||||
}
|
}
|
||||||
|
@ -204,7 +206,7 @@
|
||||||
|
|
||||||
.custom-control-input:disabled {
|
.custom-control-input:disabled {
|
||||||
&:checked ~ .custom-control-label::before {
|
&:checked ~ .custom-control-label::before {
|
||||||
background-color: $custom-control-indicator-checked-disabled-bg;
|
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -237,8 +239,9 @@
|
||||||
border-color: $custom-select-focus-border-color;
|
border-color: $custom-select-focus-border-color;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
@if $enable-shadows {
|
@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 {
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: $custom-select-focus-box-shadow;
|
box-shadow: $custom-select-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -312,6 +315,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:focus ~ .custom-file-label {
|
&:focus ~ .custom-file-label {
|
||||||
|
@ -344,6 +348,7 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
|
overflow: hidden;
|
||||||
font-family: $custom-file-font-family;
|
font-family: $custom-file-font-family;
|
||||||
font-weight: $custom-file-font-weight;
|
font-weight: $custom-file-font-weight;
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
|
@ -385,7 +390,7 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: 0;
|
||||||
|
|
||||||
// Pseudo-elements must be split across multiple rulesets to have an effect.
|
// Pseudo-elements must be split across multiple rulesets to have an effect.
|
||||||
// No box-shadow() mixin for focus accessibility.
|
// No box-shadow() mixin for focus accessibility.
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
display: none; // none by default, but block on "open" of the menu
|
display: none; // none by default, but block on "open" of the menu
|
||||||
float: left;
|
float: left;
|
||||||
min-width: $dropdown-min-width;
|
min-width: $dropdown-min-width;
|
||||||
padding: $dropdown-padding-y 0;
|
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||||
margin: $dropdown-spacer 0 0; // override default ul
|
margin: $dropdown-spacer 0 0; // override default ul
|
||||||
@include font-size($dropdown-font-size);
|
@include font-size($dropdown-font-size);
|
||||||
color: $dropdown-color;
|
color: $dropdown-color;
|
||||||
|
@ -100,7 +100,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When enabled Popper.js, reset basic dropdown position
|
// When Popper is enabled, reset the basic dropdown position
|
||||||
// stylelint-disable-next-line no-duplicate-selectors
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
&[x-placement^="top"],
|
&[x-placement^="top"],
|
||||||
|
@ -128,6 +128,7 @@
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
color: $dropdown-link-color;
|
color: $dropdown-link-color;
|
||||||
text-align: inherit; // For `<button>`s
|
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
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||||
background-color: transparent; // For `<button>`s
|
background-color: transparent; // For `<button>`s
|
||||||
border: 0; // For `<button>`s
|
border: 0; // For `<button>`s
|
||||||
|
@ -176,7 +177,7 @@
|
||||||
// Dropdown section headers
|
// Dropdown section headers
|
||||||
.dropdown-header {
|
.dropdown-header {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
padding: $dropdown-header-padding;
|
||||||
margin-bottom: 0; // for use with heading elements
|
margin-bottom: 0; // for use with heading elements
|
||||||
@include font-size($font-size-sm);
|
@include font-size($font-size-sm);
|
||||||
color: $dropdown-header-color;
|
color: $dropdown-header-color;
|
||||||
|
|
|
@ -59,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 {
|
select.form-control {
|
||||||
&:focus::-ms-value {
|
&:focus::-ms-value {
|
||||||
// Suppress the nested default white text on blue background highlight given to
|
// Suppress the nested default white text on blue background highlight given to
|
||||||
|
|
|
@ -23,10 +23,12 @@
|
||||||
// Starts at zero
|
// Starts at zero
|
||||||
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
// Used to ensure the min-width of the lowest breakpoint starts at 0.
|
||||||
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
|
||||||
$values: map-values($map);
|
@if length($map) > 0 {
|
||||||
$first-value: nth($values, 1);
|
$values: map-values($map);
|
||||||
@if $first-value != 0 {
|
$first-value: nth($values, 1);
|
||||||
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
@if $first-value != 0 {
|
||||||
|
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,10 +51,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// See https://codepen.io/kevinweber/pen/dXWoRw
|
// See https://codepen.io/kevinweber/pen/dXWoRw
|
||||||
|
//
|
||||||
|
// Requires the use of quotes around data URIs.
|
||||||
|
|
||||||
@function escape-svg($string) {
|
@function escape-svg($string) {
|
||||||
@if str-index($string, "data:image/svg+xml") {
|
@if str-index($string, "data:image/svg+xml") {
|
||||||
@each $char, $encoded in $escaped-characters {
|
@each $char, $encoded in $escaped-characters {
|
||||||
$string: str-replace($string, $char, $encoded);
|
// 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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,11 +4,7 @@
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
// Single container class with breakpoint max-widths
|
// Single container class with breakpoint max-widths
|
||||||
.container {
|
.container,
|
||||||
@include make-container();
|
|
||||||
@include make-container-max-widths();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 100% wide container at all breakpoints
|
// 100% wide container at all breakpoints
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
@include make-container();
|
@include make-container();
|
||||||
|
@ -25,11 +21,19 @@
|
||||||
max-width: $container-max-width;
|
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 {
|
@each $name, $width in $grid-breakpoints {
|
||||||
@if ($container-max-width > $width or $breakpoint == $name) {
|
@if ($extend-breakpoint) {
|
||||||
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||||
@extend %responsive-container-#{$breakpoint};
|
@extend %responsive-container-#{$breakpoint};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Once the current breakpoint is reached, stop extending
|
||||||
|
@if ($breakpoint == $name) {
|
||||||
|
$extend-breakpoint: false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
> .custom-select,
|
> .custom-select,
|
||||||
> .custom-file {
|
> .custom-file {
|
||||||
position: relative; // For focus state's z-index
|
position: relative; // For focus state's z-index
|
||||||
flex: 1 1 0%;
|
flex: 1 1 auto;
|
||||||
|
width: 1%;
|
||||||
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
@ -41,7 +42,6 @@
|
||||||
|
|
||||||
> .form-control,
|
> .form-control,
|
||||||
> .custom-select {
|
> .custom-select {
|
||||||
&:not(:last-child) { @include border-right-radius(0); }
|
|
||||||
&:not(:first-child) { @include border-left-radius(0); }
|
&:not(:first-child) { @include border-left-radius(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,9 +52,24 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:not(:last-child) .custom-file-label,
|
&:not(:last-child) .custom-file-label,
|
||||||
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
|
|
||||||
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
|
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.has-validation) {
|
||||||
|
> .form-control:not(:last-child),
|
||||||
|
> .custom-select:not(:last-child),
|
||||||
|
> .custom-file:not(:last-child) .custom-file-label::after {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-validation {
|
||||||
|
> .form-control:nth-last-child(n + 3),
|
||||||
|
> .custom-select:nth-last-child(n + 3),
|
||||||
|
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
|
||||||
|
@include border-right-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -174,8 +189,10 @@
|
||||||
|
|
||||||
.input-group > .input-group-prepend > .btn,
|
.input-group > .input-group-prepend > .btn,
|
||||||
.input-group > .input-group-prepend > .input-group-text,
|
.input-group > .input-group-prepend > .input-group-text,
|
||||||
.input-group > .input-group-append:not(:last-child) > .btn,
|
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
|
||||||
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
|
||||||
|
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
|
||||||
|
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
|
||||||
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
// No need to set list-style: none; since .list-group-item is block level
|
// No need to set list-style: none; since .list-group-item is block level
|
||||||
padding-left: 0; // reset padding because ul and ol
|
padding-left: 0; // reset padding because ul and ol
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
@include border-radius($list-group-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -46,15 +47,16 @@
|
||||||
display: block;
|
display: block;
|
||||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||||
color: $list-group-color;
|
color: $list-group-color;
|
||||||
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
background-color: $list-group-bg;
|
background-color: $list-group-bg;
|
||||||
border: $list-group-border-width solid $list-group-border-color;
|
border: $list-group-border-width solid $list-group-border-color;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-top-radius($list-group-border-radius);
|
@include border-top-radius(inherit);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-bottom-radius($list-group-border-radius);
|
@include border-bottom-radius(inherit);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
|
@ -94,7 +96,7 @@
|
||||||
.list-group-horizontal#{$infix} {
|
.list-group-horizontal#{$infix} {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
.list-group-item {
|
> .list-group-item {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-bottom-left-radius($list-group-border-radius);
|
@include border-bottom-left-radius($list-group-border-radius);
|
||||||
@include border-top-right-radius(0);
|
@include border-top-right-radius(0);
|
||||||
|
@ -109,7 +111,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
& + .list-group-item {
|
+ .list-group-item {
|
||||||
border-top-width: $list-group-border-width;
|
border-top-width: $list-group-border-width;
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
|
|
||||||
|
@ -130,18 +132,12 @@
|
||||||
// useful within other components (e.g., cards).
|
// useful within other components (e.g., cards).
|
||||||
|
|
||||||
.list-group-flush {
|
.list-group-flush {
|
||||||
.list-group-item {
|
@include border-radius(0);
|
||||||
border-right-width: 0;
|
|
||||||
border-left-width: 0;
|
|
||||||
@include border-radius(0);
|
|
||||||
|
|
||||||
&:first-child {
|
> .list-group-item {
|
||||||
border-top-width: 0;
|
border-width: 0 0 $list-group-border-width;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
.list-group-item:last-child {
|
|
||||||
border-bottom-width: 0;
|
border-bottom-width: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -83,6 +83,7 @@
|
||||||
&::before {
|
&::before {
|
||||||
display: block; // IE10
|
display: block; // IE10
|
||||||
height: subtract(100vh, $modal-dialog-margin * 2);
|
height: subtract(100vh, $modal-dialog-margin * 2);
|
||||||
|
height: min-content; // Reset height to 0 except on IE
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -181,7 +182,6 @@
|
||||||
// Place margin between footer elements
|
// Place margin between footer elements
|
||||||
// This solution is far from ideal because of the universal selector usage,
|
// This solution is far from ideal because of the universal selector usage,
|
||||||
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
// 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;
|
margin: $modal-footer-margin-between / 2;
|
||||||
}
|
}
|
||||||
|
@ -217,6 +217,7 @@
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
||||||
|
height: min-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
.nav-link {
|
.nav-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
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;
|
text-decoration: none;
|
||||||
|
@ -34,11 +35,8 @@
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
margin-bottom: -$nav-tabs-border-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
|
margin-bottom: -$nav-tabs-border-width;
|
||||||
border: $nav-tabs-border-width solid transparent;
|
border: $nav-tabs-border-width solid transparent;
|
||||||
@include border-top-radius($nav-tabs-border-radius);
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
|
@ -91,6 +89,7 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.nav-fill {
|
.nav-fill {
|
||||||
|
> .nav-link,
|
||||||
.nav-item {
|
.nav-item {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -98,6 +97,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
|
> .nav-link,
|
||||||
.nav-item {
|
.nav-item {
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
|
@ -136,8 +136,12 @@
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
content: "";
|
content: "";
|
||||||
background: no-repeat center center;
|
background: 50% / 100% 100% no-repeat;
|
||||||
background-size: 100% 100%;
|
}
|
||||||
|
|
||||||
|
.navbar-nav-scroll {
|
||||||
|
max-height: $navbar-nav-scroll-max-height;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
|
@ -199,6 +203,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-nav-scroll {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
margin-left: -$pagination-border-width;
|
margin-left: -$pagination-border-width;
|
||||||
line-height: $pagination-line-height;
|
line-height: $pagination-line-height;
|
||||||
color: $pagination-color;
|
color: $pagination-color;
|
||||||
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
background-color: $pagination-bg;
|
background-color: $pagination-bg;
|
||||||
border: $pagination-border-width solid $pagination-border-color;
|
border: $pagination-border-width solid $pagination-border-color;
|
||||||
|
|
||||||
|
@ -65,9 +66,9 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.pagination-lg {
|
.pagination-lg {
|
||||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-sm {
|
.pagination-sm {
|
||||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $progress-height;
|
height: $progress-height;
|
||||||
overflow: hidden; // force rounded corners by cropping it
|
overflow: hidden; // force rounded corners by cropping it
|
||||||
|
line-height: 0;
|
||||||
@include font-size($progress-font-size);
|
@include font-size($progress-font-size);
|
||||||
background-color: $progress-bg;
|
background-color: $progress-bg;
|
||||||
@include border-radius($progress-border-radius);
|
@include border-radius($progress-border-radius);
|
||||||
|
@ -35,7 +36,7 @@
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
.progress-bar-animated {
|
.progress-bar-animated {
|
||||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
animation: $progress-bar-animation-timing progress-bar-stripes;
|
||||||
|
|
||||||
@if $enable-prefers-reduced-motion-media-query {
|
@if $enable-prefers-reduced-motion-media-query {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
// Reboot
|
// Reboot
|
||||||
//
|
//
|
||||||
|
@ -199,7 +199,7 @@ a {
|
||||||
// causes specificity issues in many other styles that are too complex to fix.
|
// causes specificity issues in many other styles that are too complex to fix.
|
||||||
// See https://github.com/twbs/bootstrap/issues/19402
|
// See https://github.com/twbs/bootstrap/issues/19402
|
||||||
|
|
||||||
a:not([href]) {
|
a:not([href]):not([class]) {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
@ -229,6 +229,9 @@ pre {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
// Don't allow content to break outside
|
// Don't allow content to break outside
|
||||||
overflow: auto;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -275,10 +278,14 @@ caption {
|
||||||
caption-side: bottom;
|
caption-side: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Removes font-weight bold by inheriting
|
||||||
|
// 2. Matches default `<td>` alignment by inheriting `text-align`.
|
||||||
|
// 3. Fix alignment for Safari
|
||||||
|
|
||||||
th {
|
th {
|
||||||
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
font-weight: $table-th-font-weight; // 1
|
||||||
// closest parent with a set `text-align`.
|
text-align: inherit; // 2
|
||||||
text-align: inherit;
|
text-align: -webkit-match-parent; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -296,17 +303,17 @@ label {
|
||||||
//
|
//
|
||||||
// Details at https://github.com/twbs/bootstrap/issues/24093
|
// Details at https://github.com/twbs/bootstrap/issues/24093
|
||||||
button {
|
button {
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Work around a Firefox/IE bug where the transparent `button` background
|
// Explicitly remove focus outline in Chromium when it shouldn't be
|
||||||
// results in a loss of the default `button` focus styles.
|
// visible (e.g. as result of mouse click or touch tap). It already
|
||||||
//
|
// should be doing this automatically, but seems to currently be
|
||||||
// Credit: https://github.com/suitcss/base/
|
// confused and applies its very visible two-tone outline anyway.
|
||||||
button:focus {
|
|
||||||
outline: 1px dotted;
|
button:focus:not(:focus-visible) {
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
|
@ -330,6 +337,13 @@ select {
|
||||||
text-transform: none; // Remove the inheritance of text transform in Firefox
|
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.
|
// Remove the inheritance of word-wrap in Safari.
|
||||||
//
|
//
|
||||||
// Details at https://github.com/twbs/bootstrap/issues/24990
|
// Details at https://github.com/twbs/bootstrap/issues/24990
|
||||||
|
@ -376,18 +390,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 {
|
textarea {
|
||||||
overflow: auto; // Remove the default vertical scrollbar in IE.
|
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
// Do not forget to update getting-started/theming.md!
|
|
||||||
:root {
|
:root {
|
||||||
// Custom variable values only support SassScript inside `#{}`.
|
// Custom variable values only support SassScript inside `#{}`.
|
||||||
@each $color, $value in $colors {
|
@each $color, $value in $colors {
|
||||||
|
|
|
@ -13,9 +13,9 @@
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
border: $spinner-border-width solid currentColor;
|
border: $spinner-border-width solid currentColor;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spinner-border .75s linear infinite;
|
animation: .75s linear infinite spinner-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner-border-sm {
|
.spinner-border-sm {
|
||||||
|
@ -34,6 +34,7 @@
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,13 +44,22 @@
|
||||||
height: $spinner-height;
|
height: $spinner-height;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
// stylelint-disable-next-line property-blacklist
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: spinner-grow .75s linear infinite;
|
animation: .75s linear infinite spinner-grow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner-grow-sm {
|
.spinner-grow-sm {
|
||||||
width: $spinner-width-sm;
|
width: $spinner-width-sm;
|
||||||
height: $spinner-height-sm;
|
height: $spinner-height-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if $enable-prefers-reduced-motion-media-query {
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.spinner-border,
|
||||||
|
.spinner-grow {
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,13 +1,14 @@
|
||||||
.toast {
|
.toast {
|
||||||
|
// Prevents from shrinking in IE11, when in a flex container
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/28341
|
||||||
|
flex-basis: $toast-max-width;
|
||||||
max-width: $toast-max-width;
|
max-width: $toast-max-width;
|
||||||
overflow: hidden; // cheap rounded corners on nested items
|
|
||||||
@include font-size($toast-font-size);
|
@include font-size($toast-font-size);
|
||||||
color: $toast-color;
|
color: $toast-color;
|
||||||
background-color: $toast-background-color;
|
background-color: $toast-background-color;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $toast-border-width solid $toast-border-color;
|
border: $toast-border-width solid $toast-border-color;
|
||||||
box-shadow: $toast-box-shadow;
|
box-shadow: $toast-box-shadow;
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@include border-radius($toast-border-radius);
|
@include border-radius($toast-border-radius);
|
||||||
|
|
||||||
|
@ -37,6 +38,7 @@
|
||||||
background-color: $toast-header-background-color;
|
background-color: $toast-header-background-color;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-bottom: $toast-border-width solid $toast-header-border-color;
|
border-bottom: $toast-border-width solid $toast-header-border-color;
|
||||||
|
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-body {
|
.toast-body {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
|
// stylelint-disable selector-list-comma-newline-after
|
||||||
|
|
||||||
//
|
//
|
||||||
// Headings
|
// Headings
|
||||||
|
|
|
@ -6,12 +6,13 @@
|
||||||
@import "utilities/embed";
|
@import "utilities/embed";
|
||||||
@import "utilities/flex";
|
@import "utilities/flex";
|
||||||
@import "utilities/float";
|
@import "utilities/float";
|
||||||
|
@import "utilities/interactions";
|
||||||
@import "utilities/overflow";
|
@import "utilities/overflow";
|
||||||
@import "utilities/position";
|
@import "utilities/position";
|
||||||
@import "utilities/screenreaders";
|
@import "utilities/screenreaders";
|
||||||
@import "utilities/shadows";
|
@import "utilities/shadows";
|
||||||
@import "utilities/sizing";
|
@import "utilities/sizing";
|
||||||
@import "utilities/stretched-link";
|
|
||||||
@import "utilities/spacing";
|
@import "utilities/spacing";
|
||||||
|
@import "utilities/stretched-link";
|
||||||
@import "utilities/text";
|
@import "utilities/text";
|
||||||
@import "utilities/visibility";
|
@import "utilities/visibility";
|
||||||
|
|
|
@ -18,7 +18,6 @@ $gray-900: #212529 !default;
|
||||||
$black: #000 !default;
|
$black: #000 !default;
|
||||||
|
|
||||||
$grays: () !default;
|
$grays: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$grays: map-merge(
|
$grays: map-merge(
|
||||||
(
|
(
|
||||||
"100": $gray-100,
|
"100": $gray-100,
|
||||||
|
@ -46,7 +45,6 @@ $teal: #20c997 !default;
|
||||||
$cyan: #17a2b8 !default;
|
$cyan: #17a2b8 !default;
|
||||||
|
|
||||||
$colors: () !default;
|
$colors: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$colors: map-merge(
|
$colors: map-merge(
|
||||||
(
|
(
|
||||||
"blue": $blue,
|
"blue": $blue,
|
||||||
|
@ -76,7 +74,6 @@ $light: $gray-100 !default;
|
||||||
$dark: $gray-800 !default;
|
$dark: $gray-800 !default;
|
||||||
|
|
||||||
$theme-colors: () !default;
|
$theme-colors: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$theme-colors: map-merge(
|
$theme-colors: map-merge(
|
||||||
(
|
(
|
||||||
"primary": $primary,
|
"primary": $primary,
|
||||||
|
@ -103,9 +100,11 @@ $yiq-text-light: $white !default;
|
||||||
|
|
||||||
// Characters which are escaped by the escape-svg function
|
// Characters which are escaped by the escape-svg function
|
||||||
$escaped-characters: (
|
$escaped-characters: (
|
||||||
("<","%3c"),
|
("<", "%3c"),
|
||||||
(">","%3e"),
|
(">", "%3e"),
|
||||||
("#","%23"),
|
("#", "%23"),
|
||||||
|
("(", "%28"),
|
||||||
|
(")", "%29"),
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
|
|
||||||
|
@ -136,7 +135,6 @@ $enable-deprecation-messages: true !default;
|
||||||
|
|
||||||
$spacer: 1rem !default;
|
$spacer: 1rem !default;
|
||||||
$spacers: () !default;
|
$spacers: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$spacers: map-merge(
|
$spacers: map-merge(
|
||||||
(
|
(
|
||||||
0: 0,
|
0: 0,
|
||||||
|
@ -151,7 +149,6 @@ $spacers: map-merge(
|
||||||
|
|
||||||
// This variable affects the `.h-*` and `.w-*` classes.
|
// This variable affects the `.h-*` and `.w-*` classes.
|
||||||
$sizes: () !default;
|
$sizes: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$sizes: map-merge(
|
$sizes: map-merge(
|
||||||
(
|
(
|
||||||
25: 25%,
|
25: 25%,
|
||||||
|
@ -262,7 +259,6 @@ $transition-fade: opacity .15s linear !default;
|
||||||
$transition-collapse: height .35s ease !default;
|
$transition-collapse: height .35s ease !default;
|
||||||
|
|
||||||
$embed-responsive-aspect-ratios: () !default;
|
$embed-responsive-aspect-ratios: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$embed-responsive-aspect-ratios: join(
|
$embed-responsive-aspect-ratios: join(
|
||||||
(
|
(
|
||||||
(21 9),
|
(21 9),
|
||||||
|
@ -278,7 +274,7 @@ $embed-responsive-aspect-ratios: join(
|
||||||
// Font, line-height, and color for body text, headings, and more.
|
// Font, line-height, and color for body text, headings, and more.
|
||||||
|
|
||||||
// stylelint-disable value-keyword-case
|
// stylelint-disable value-keyword-case
|
||||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||||
$font-family-base: $font-family-sans-serif !default;
|
$font-family-base: $font-family-sans-serif !default;
|
||||||
// stylelint-enable value-keyword-case
|
// stylelint-enable value-keyword-case
|
||||||
|
@ -367,6 +363,7 @@ $table-border-color: $border-color !default;
|
||||||
|
|
||||||
$table-head-bg: $gray-200 !default;
|
$table-head-bg: $gray-200 !default;
|
||||||
$table-head-color: $gray-700 !default;
|
$table-head-color: $gray-700 !default;
|
||||||
|
$table-th-font-weight: null !default;
|
||||||
|
|
||||||
$table-dark-color: $white !default;
|
$table-dark-color: $white !default;
|
||||||
$table-dark-bg: $gray-800 !default;
|
$table-dark-bg: $gray-800 !default;
|
||||||
|
@ -544,7 +541,7 @@ $custom-control-label-disabled-color: $gray-600 !default;
|
||||||
$custom-control-indicator-checked-color: $component-active-color !default;
|
$custom-control-indicator-checked-color: $component-active-color !default;
|
||||||
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
||||||
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
|
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
|
||||||
$custom-control-indicator-checked-box-shadow: none !default;
|
$custom-control-indicator-checked-box-shadow: null !default;
|
||||||
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
|
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
|
||||||
|
|
||||||
$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
|
$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
|
||||||
|
@ -552,7 +549,7 @@ $custom-control-indicator-focus-border-color: $input-focus-border-color !defau
|
||||||
|
|
||||||
$custom-control-indicator-active-color: $component-active-color !default;
|
$custom-control-indicator-active-color: $component-active-color !default;
|
||||||
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
|
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
|
||||||
$custom-control-indicator-active-box-shadow: none !default;
|
$custom-control-indicator-active-box-shadow: null !default;
|
||||||
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
|
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
|
||||||
|
|
||||||
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
||||||
|
@ -561,7 +558,7 @@ $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xml
|
||||||
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
|
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
|
||||||
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
||||||
$custom-checkbox-indicator-icon-indeterminate: 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-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
|
||||||
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
$custom-checkbox-indicator-indeterminate-box-shadow: null !default;
|
||||||
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
|
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
|
||||||
|
|
||||||
$custom-radio-indicator-border-radius: 50% !default;
|
$custom-radio-indicator-border-radius: 50% !default;
|
||||||
|
@ -586,7 +583,7 @@ $custom-select-disabled-bg: $gray-200 !default;
|
||||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||||
$custom-select-indicator-color: $gray-800 !default;
|
$custom-select-indicator-color: $gray-800 !default;
|
||||||
$custom-select-indicator: 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-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-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||||
|
|
||||||
$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-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
|
||||||
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
||||||
|
@ -666,7 +663,6 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !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-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
||||||
|
|
||||||
$form-validation-states: () !default;
|
$form-validation-states: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
|
||||||
$form-validation-states: map-merge(
|
$form-validation-states: map-merge(
|
||||||
(
|
(
|
||||||
"valid": (
|
"valid": (
|
||||||
|
@ -735,6 +731,8 @@ $navbar-toggler-padding-x: .75rem !default;
|
||||||
$navbar-toggler-font-size: $font-size-lg !default;
|
$navbar-toggler-font-size: $font-size-lg !default;
|
||||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||||
|
|
||||||
|
$navbar-nav-scroll-max-height: 75vh !default;
|
||||||
|
|
||||||
$navbar-dark-color: rgba($white, .5) !default;
|
$navbar-dark-color: rgba($white, .5) !default;
|
||||||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||||
$navbar-dark-active-color: $white !default;
|
$navbar-dark-active-color: $white !default;
|
||||||
|
@ -760,6 +758,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||||
// Dropdown menu container and contents.
|
// Dropdown menu container and contents.
|
||||||
|
|
||||||
$dropdown-min-width: 10rem !default;
|
$dropdown-min-width: 10rem !default;
|
||||||
|
$dropdown-padding-x: 0 !default;
|
||||||
$dropdown-padding-y: .5rem !default;
|
$dropdown-padding-y: .5rem !default;
|
||||||
$dropdown-spacer: .125rem !default;
|
$dropdown-spacer: .125rem !default;
|
||||||
$dropdown-font-size: $font-size-base !default;
|
$dropdown-font-size: $font-size-base !default;
|
||||||
|
@ -775,17 +774,18 @@ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
||||||
|
|
||||||
$dropdown-link-color: $gray-900 !default;
|
$dropdown-link-color: $gray-900 !default;
|
||||||
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
||||||
$dropdown-link-hover-bg: $gray-100 !default;
|
$dropdown-link-hover-bg: $gray-200 !default;
|
||||||
|
|
||||||
$dropdown-link-active-color: $component-active-color !default;
|
$dropdown-link-active-color: $component-active-color !default;
|
||||||
$dropdown-link-active-bg: $component-active-bg !default;
|
$dropdown-link-active-bg: $component-active-bg !default;
|
||||||
|
|
||||||
$dropdown-link-disabled-color: $gray-600 !default;
|
$dropdown-link-disabled-color: $gray-500 !default;
|
||||||
|
|
||||||
$dropdown-item-padding-y: .25rem !default;
|
$dropdown-item-padding-y: .25rem !default;
|
||||||
$dropdown-item-padding-x: 1.5rem !default;
|
$dropdown-item-padding-x: 1.5rem !default;
|
||||||
|
|
||||||
$dropdown-header-color: $gray-600 !default;
|
$dropdown-header-color: $gray-600 !default;
|
||||||
|
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
|
||||||
|
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
|
@ -818,6 +818,8 @@ $pagination-disabled-color: $gray-600 !default;
|
||||||
$pagination-disabled-bg: $white !default;
|
$pagination-disabled-bg: $white !default;
|
||||||
$pagination-disabled-border-color: $gray-300 !default;
|
$pagination-disabled-border-color: $gray-300 !default;
|
||||||
|
|
||||||
|
$pagination-border-radius-sm: $border-radius-sm !default;
|
||||||
|
$pagination-border-radius-lg: $border-radius-lg !default;
|
||||||
|
|
||||||
// Jumbotron
|
// Jumbotron
|
||||||
|
|
||||||
|
@ -1135,6 +1137,7 @@ $pre-scrollable-max-height: 340px !default;
|
||||||
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
|
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
|
||||||
$overflows: auto, hidden !default;
|
$overflows: auto, hidden !default;
|
||||||
$positions: static, relative, absolute, fixed, sticky !default;
|
$positions: static, relative, absolute, fixed, sticky !default;
|
||||||
|
$user-selects: all, auto, none !default;
|
||||||
|
|
||||||
|
|
||||||
// Printing
|
// Printing
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
|
* Bootstrap Grid v4.6.0 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
@ -19,6 +19,7 @@ html {
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
|
@import "mixins/deprecate";
|
||||||
@import "mixins/breakpoints";
|
@import "mixins/breakpoints";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/grid-framework";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
|
* Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.4.1 (https://getbootstrap.com/)
|
* Bootstrap v4.6.0 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "functions";
|
@import "functions";
|
||||||
|
|
|
@ -15,8 +15,9 @@
|
||||||
@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
|
@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} {
|
#{$parent} {
|
||||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||||
}
|
}
|
||||||
|
@include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,22 @@
|
||||||
// stylelint-disable property-blacklist
|
// stylelint-disable property-disallowed-list
|
||||||
// Single side border-radius
|
// 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) {
|
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-radius: $radius;
|
border-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
@else if $fallback-border-radius != false {
|
@else if $fallback-border-radius != false {
|
||||||
border-radius: $fallback-border-radius;
|
border-radius: $fallback-border-radius;
|
||||||
|
@ -12,52 +25,52 @@
|
||||||
|
|
||||||
@mixin border-top-radius($radius) {
|
@mixin border-top-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: valid-radius($radius);
|
||||||
border-top-right-radius: $radius;
|
border-top-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-right-radius($radius) {
|
@mixin border-right-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: $radius;
|
border-top-right-radius: valid-radius($radius);
|
||||||
border-bottom-right-radius: $radius;
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-radius($radius) {
|
@mixin border-bottom-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: $radius;
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
border-bottom-left-radius: $radius;
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-left-radius($radius) {
|
@mixin border-left-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: valid-radius($radius);
|
||||||
border-bottom-left-radius: $radius;
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-top-left-radius($radius) {
|
@mixin border-top-left-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-top-right-radius($radius) {
|
@mixin border-top-right-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: $radius;
|
border-top-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-right-radius($radius) {
|
@mixin border-bottom-right-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: $radius;
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-left-radius($radius) {
|
@mixin border-bottom-left-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-left-radius: $radius;
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,10 +20,10 @@
|
||||||
color: color-yiq($hover-background);
|
color: color-yiq($hover-background);
|
||||||
@include gradient-bg($hover-background);
|
@include gradient-bg($hover-background);
|
||||||
border-color: $hover-border;
|
border-color: $hover-border;
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
|
||||||
} @else {
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -51,10 +51,10 @@
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
|
||||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
@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 {
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -90,10 +90,10 @@
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
|
||||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
@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 {
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,10 +16,10 @@
|
||||||
background-color: $input-focus-bg;
|
background-color: $input-focus-bg;
|
||||||
border-color: $input-focus-border-color;
|
border-color: $input-focus-border-color;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||||
} @else {
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: $input-focus-box-shadow;
|
box-shadow: $input-focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -53,6 +53,7 @@
|
||||||
.#{$state}-tooltip {
|
.#{$state}-tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
display: none;
|
display: none;
|
||||||
max-width: 100%; // Contain to parent when possible
|
max-width: 100%; // Contain to parent when possible
|
||||||
|
@ -63,6 +64,13 @@
|
||||||
color: color-yiq($color);
|
color: color-yiq($color);
|
||||||
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
||||||
@include border-radius($form-feedback-tooltip-border-radius);
|
@include border-radius($form-feedback-tooltip-border-radius);
|
||||||
|
|
||||||
|
// See https://github.com/twbs/bootstrap/pull/31557
|
||||||
|
// Align tooltip to form elements
|
||||||
|
.form-row > .col > &,
|
||||||
|
.form-row > [class*="col-"] > & {
|
||||||
|
left: $form-grid-gutter-width / 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include form-validation-state-selector($state) {
|
@include form-validation-state-selector($state) {
|
||||||
|
@ -107,7 +115,7 @@
|
||||||
|
|
||||||
@if $enable-validation-icons {
|
@if $enable-validation-icons {
|
||||||
padding-right: $custom-select-feedback-icon-padding-right;
|
padding-right: $custom-select-feedback-icon-padding-right;
|
||||||
background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
|
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
|
@ -15,12 +15,15 @@
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||||
|
|
||||||
// Allow columns to stretch full width below their breakpoints
|
@if $columns > 0 {
|
||||||
@for $i from 1 through $columns {
|
// Allow columns to stretch full width below their breakpoints
|
||||||
.col#{$infix}-#{$i} {
|
@for $i from 1 through $columns {
|
||||||
@extend %grid-column;
|
.col#{$infix}-#{$i} {
|
||||||
|
@extend %grid-column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.col#{$infix},
|
.col#{$infix},
|
||||||
.col#{$infix}-auto {
|
.col#{$infix}-auto {
|
||||||
@extend %grid-column;
|
@extend %grid-column;
|
||||||
|
@ -34,9 +37,11 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through $grid-row-columns {
|
@if $grid-row-columns > 0 {
|
||||||
.row-cols#{$infix}-#{$i} {
|
@for $i from 1 through $grid-row-columns {
|
||||||
@include row-cols($i);
|
.row-cols#{$infix}-#{$i} {
|
||||||
|
@include row-cols($i);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,9 +49,11 @@
|
||||||
@include make-col-auto();
|
@include make-col-auto();
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through $columns {
|
@if $columns > 0 {
|
||||||
.col#{$infix}-#{$i} {
|
@for $i from 1 through $columns {
|
||||||
@include make-col($i, $columns);
|
.col#{$infix}-#{$i} {
|
||||||
|
@include make-col($i, $columns);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -58,11 +65,13 @@
|
||||||
.order#{$infix}-#{$i} { order: $i; }
|
.order#{$infix}-#{$i} { order: $i; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
@if $columns > 0 {
|
||||||
@for $i from 0 through ($columns - 1) {
|
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
||||||
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
@for $i from 0 through ($columns - 1) {
|
||||||
.offset#{$infix}-#{$i} {
|
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
||||||
@include make-col-offset($i, $columns);
|
.offset#{$infix}-#{$i} {
|
||||||
|
@include make-col-offset($i, $columns);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,12 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin make-row($gutter: $grid-gutter-width) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -$gutter / 2;
|
||||||
|
margin-left: -$gutter / 2;
|
||||||
|
}
|
||||||
|
|
||||||
// For each breakpoint, define the maximum width of the container in a media query
|
// For each breakpoint, define the maximum width of the container in a media query
|
||||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||||
|
@ -18,13 +24,7 @@
|
||||||
max-width: $container-max-width;
|
max-width: $container-max-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
|
||||||
|
|
||||||
@mixin make-row($gutter: $grid-gutter-width) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-right: -$gutter / 2;
|
|
||||||
margin-left: -$gutter / 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
||||||
// style grid.
|
// style grid.
|
||||||
@mixin row-cols($count) {
|
@mixin row-cols($count) {
|
||||||
& > * {
|
> * {
|
||||||
flex: 0 0 100% / $count;
|
flex: 0 0 100% / $count;
|
||||||
max-width: 100% / $count;
|
max-width: 100% / $count;
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||||
// but doesn't convert dppx=>dpi.
|
// but doesn't convert dppx=>dpi.
|
||||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||||
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
// Compatibility info: https://caniuse.com/css-media-resolution
|
||||||
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||||
only screen and (min-resolution: 2dppx) { // Standardized
|
only screen and (min-resolution: 2dppx) { // Standardized
|
||||||
background-image: url($file-2x);
|
background-image: url($file-2x);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// Only display content to screen readers
|
// Only display content to screen readers
|
||||||
//
|
//
|
||||||
// See: https://a11yproject.com/posts/how-to-hide-content/
|
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
||||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||||
|
|
||||||
@mixin sr-only() {
|
@mixin sr-only() {
|
||||||
|
|
|
@ -1,16 +1,26 @@
|
||||||
// stylelint-disable property-blacklist
|
// stylelint-disable property-disallowed-list
|
||||||
@mixin transition($transition...) {
|
@mixin transition($transition...) {
|
||||||
@if $enable-transitions {
|
@if length($transition) == 0 {
|
||||||
@if length($transition) == 0 {
|
$transition: $transition-base;
|
||||||
transition: $transition-base;
|
}
|
||||||
} @else {
|
|
||||||
transition: $transition;
|
@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 {
|
@if $enable-transitions {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@if nth($transition, 1) != null {
|
||||||
transition: none;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
@include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// stylelint-disable property-blacklist, declaration-no-important
|
// stylelint-disable property-disallowed-list, declaration-no-important
|
||||||
|
|
||||||
//
|
//
|
||||||
// Border
|
// Border
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
|
@each $value in $user-selects {
|
||||||
|
.user-select-#{$value} { user-select: $value !important; }
|
||||||
|
}
|
|
@ -63,8 +63,8 @@
|
||||||
.text-decoration-none { text-decoration: none !important; }
|
.text-decoration-none { text-decoration: none !important; }
|
||||||
|
|
||||||
.text-break {
|
.text-break {
|
||||||
word-break: break-word !important; // IE & < Edge 18
|
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
|
||||||
overflow-wrap: break-word !important;
|
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset
|
// Reset
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
---
|
---
|
||||||
# this ensures Jekyll reads the file to be transformed into CSS later
|
|
||||||
---
|
---
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
|
|
Loading…
Reference in New Issue