1
0
Fork 0

update to bootstrap v4.6

This commit is contained in:
Robert Austin 2021-10-06 12:09:23 +10:00
parent 9c3310b85d
commit 986d18016e
43 changed files with 336 additions and 207 deletions

View File

@ -1,3 +1,5 @@
// assets/css/style.scss is where Jekyll loads the main stylesheet
$grid-breakpoints: (
xs: 0,
sm: 576px,

View File

@ -34,6 +34,7 @@
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}

View File

@ -15,7 +15,7 @@
padding-left: $breadcrumb-item-padding;
&::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;
color: $breadcrumb-divider-color;
content: escape-svg($breadcrumb-divider);

View File

@ -10,9 +10,9 @@
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;
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
user-select: none;
background-color: transparent;
border: $btn-border-width solid transparent;
@ -37,8 +37,11 @@
@include box-shadow(none);
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active {
&:not(:disabled):not(.disabled) {
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
&:active,
&.active {
@include box-shadow($btn-active-box-shadow);
&:focus {
@ -46,6 +49,7 @@
}
}
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
@ -89,7 +93,6 @@ fieldset:disabled a.btn {
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
box-shadow: none;
}
&:disabled,

View File

@ -19,16 +19,26 @@
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;
&: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 {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
// Due to specificity of the above selector (`.card > .list-group`), we must
// use a child selector here to prevent double borders.
> .card-header + .list-group,
> .list-group + .card-footer {
border-top: 0;
}
}
@ -80,16 +90,11 @@
&:first-child {
@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 {
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;
@ -123,6 +128,7 @@
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
@include border-radius($card-inner-border-radius);
}
.card-img,
@ -200,12 +206,12 @@
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-bottom-right-radius: 0;
}
}
@ -215,12 +221,12 @@
.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-bottom-left-radius: 0;
}
}
@ -258,6 +264,8 @@
//
.accordion {
overflow-anchor: none;
> .card {
overflow: hidden;

View File

@ -127,7 +127,7 @@
display: inline-block;
width: $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 {
background-image: escape-svg($carousel-control-prev-icon-bg);

View File

@ -30,7 +30,6 @@ button.close {
padding: 0;
background-color: transparent;
border: 0;
appearance: none;
}
// Future-proof disabling of clicks on `<a>` elements

View File

@ -9,9 +9,11 @@
.custom-control {
position: relative;
z-index: 1;
display: block;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
color-adjust: exact; // Keep themed appearance for print
}
.custom-control-inline {
@ -37,7 +39,7 @@
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
@ -102,7 +104,7 @@
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
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 {
&: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 {
background-color: $custom-control-indicator-checked-disabled-bg;
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
@ -149,7 +151,7 @@
.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-radio-indicator-border-radius;
}
@ -161,7 +163,7 @@
.custom-control-input:disabled {
&: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);
width: $custom-switch-width;
pointer-events: all;
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;
}
@ -189,7 +191,7 @@
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
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;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
@ -204,7 +206,7 @@
.custom-control-input:disabled {
&: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;
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;
}
@ -312,6 +315,7 @@
width: 100%;
height: $custom-file-height;
margin: 0;
overflow: hidden;
opacity: 0;
&:focus ~ .custom-file-label {
@ -344,6 +348,7 @@
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
@ -385,7 +390,7 @@
appearance: none;
&:focus {
outline: none;
outline: 0;
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.

View File

@ -22,7 +22,7 @@
display: none; // none by default, but block on "open" of the menu
float: left;
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
@include font-size($dropdown-font-size);
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
.dropdown-menu {
&[x-placement^="top"],
@ -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
@ -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;

View File

@ -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 {
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to

View File

@ -23,12 +23,14 @@
// 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") {
@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}.";
}
}
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
@ -49,12 +51,20 @@
}
// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.
@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;
}

View File

@ -4,11 +4,7 @@
@if $enable-grid-classes {
// Single container class with breakpoint max-widths
.container {
@include make-container();
@include make-container-max-widths();
}
.container,
// 100% wide container at all breakpoints
.container-fluid {
@include make-container();
@ -25,11 +21,19 @@
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 ($container-max-width > $width or $breakpoint == $name) {
@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;
}
}
}
}

View File

@ -16,7 +16,8 @@
> .custom-select,
> .custom-file {
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
margin-bottom: 0;
@ -41,7 +42,6 @@
> .form-control,
> .custom-select {
&:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}
@ -52,9 +52,24 @@
align-items: center;
&: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(.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 > .input-group-text,
.input-group > .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) > .btn,
.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 > .input-group-text:not(:last-child) {
@include border-right-radius(0);

View File

@ -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);
}
@ -46,15 +47,16 @@
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
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 {
@include border-bottom-radius($list-group-border-radius);
@include border-bottom-radius(inherit);
}
&.disabled,
@ -94,7 +96,7 @@
.list-group-horizontal#{$infix} {
flex-direction: row;
.list-group-item {
> .list-group-item {
&:first-child {
@include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
@ -109,7 +111,7 @@
margin-top: 0;
}
& + .list-group-item {
+ .list-group-item {
border-top-width: $list-group-border-width;
border-left-width: 0;
@ -130,18 +132,12 @@
// useful within other components (e.g., cards).
.list-group-flush {
.list-group-item {
border-right-width: 0;
border-left-width: 0;
@include border-radius(0);
&:first-child {
border-top-width: 0;
}
}
> .list-group-item {
border-width: 0 0 $list-group-border-width;
&:last-child {
.list-group-item:last-child {
border-bottom-width: 0;
}
}

View File

@ -83,6 +83,7 @@
&::before {
display: block; // IE10
height: subtract(100vh, $modal-dialog-margin * 2);
height: min-content; // Reset height to 0 except on IE
content: "";
}
@ -181,7 +182,6 @@
// 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;
}
@ -217,6 +217,7 @@
&::before {
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
height: min-content;
}
}

View File

@ -14,6 +14,7 @@
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
text-decoration: if($link-decoration == none, null, none);
@include hover-focus() {
text-decoration: none;
@ -34,11 +35,8 @@
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-item {
margin-bottom: -$nav-tabs-border-width;
}
.nav-link {
margin-bottom: -$nav-tabs-border-width;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@ -91,6 +89,7 @@
//
.nav-fill {
> .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
@ -98,6 +97,7 @@
}
.nav-justified {
> .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;

View File

@ -136,8 +136,12 @@
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
background: 50% / 100% 100% no-repeat;
}
.navbar-nav-scroll {
max-height: $navbar-nav-scroll-max-height;
overflow-y: auto;
}
// Generate series of `.navbar-expand-*` responsive classes for configuring
@ -199,6 +203,10 @@
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important

View File

@ -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;
@ -65,9 +66,9 @@
//
.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 {
@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);
}

View File

@ -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);
@ -35,7 +36,7 @@
@if $enable-transitions {
.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 {
@media (prefers-reduced-motion: reduce) {

View File

@ -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
//
@ -199,7 +199,7 @@ a {
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]) {
a:not([href]):not([class]) {
color: inherit;
text-decoration: none;
@ -229,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;
}
@ -275,10 +278,14 @@ caption {
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 {
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.
text-align: inherit;
font-weight: $table-th-font-weight; // 1
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
}
@ -296,17 +303,17 @@ label {
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-radius: 0;
}
// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
// Explicitly remove focus outline in Chromium when it shouldn't be
// visible (e.g. as result of mouse click or touch tap). It already
// should be doing this automatically, but seems to currently be
// confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) {
outline: 0;
}
input,
@ -330,6 +337,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
@ -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 {
overflow: auto; // Remove the default vertical scrollbar in IE.
// Textareas should really only resize vertically so they don't break their (horizontal) containers.

View File

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

View File

@ -13,9 +13,9 @@
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
animation: spinner-border .75s linear infinite;
animation: .75s linear infinite spinner-border;
}
.spinner-border-sm {
@ -34,6 +34,7 @@
}
50% {
opacity: 1;
transform: none;
}
}
@ -43,13 +44,22 @@
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
// stylelint-disable-next-line property-blacklist
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;
animation: spinner-grow .75s linear infinite;
animation: .75s linear infinite spinner-grow;
}
.spinner-grow-sm {
width: $spinner-width-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;
}
}
}

View File

@ -1,13 +1,14 @@
.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;
overflow: hidden; // cheap rounded corners on nested items
@include font-size($toast-font-size);
color: $toast-color;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
backdrop-filter: blur(10px);
opacity: 0;
@include border-radius($toast-border-radius);
@ -37,6 +38,7 @@
background-color: $toast-header-background-color;
background-clip: padding-box;
border-bottom: $toast-border-width solid $toast-header-border-color;
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
}
.toast-body {

View File

@ -1,4 +1,4 @@
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
// stylelint-disable selector-list-comma-newline-after
//
// Headings

View File

@ -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";

View File

@ -18,7 +18,6 @@ $gray-900: #212529 !default;
$black: #000 !default;
$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
@ -46,7 +45,6 @@ $teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
(
"blue": $blue,
@ -76,7 +74,6 @@ $light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"primary": $primary,
@ -106,6 +103,8 @@ $escaped-characters: (
("<", "%3c"),
(">", "%3e"),
("#", "%23"),
("(", "%28"),
(")", "%29"),
) !default;
@ -136,7 +135,6 @@ $enable-deprecation-messages: true !default;
$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
(
0: 0,
@ -151,7 +149,6 @@ $spacers: map-merge(
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
(
25: 25%,
@ -262,7 +259,6 @@ $transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
$embed-responsive-aspect-ratios: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$embed-responsive-aspect-ratios: join(
(
(21 9),
@ -278,7 +274,7 @@ $embed-responsive-aspect-ratios: join(
// Font, line-height, and color for body text, headings, and more.
// 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-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
@ -367,6 +363,7 @@ $table-border-color: $border-color !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;
$table-th-font-weight: null !default;
$table-dark-color: $white !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-bg: $component-active-bg !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-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-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-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-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-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-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-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-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-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-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
(
"valid": (
@ -735,6 +731,8 @@ $navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !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-hover-color: rgba($white, .75) !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-min-width: 10rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !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-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-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-x: 1.5rem !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
// Pagination
@ -818,6 +818,8 @@ $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !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
@ -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;
$overflows: auto, hidden !default;
$positions: static, relative, absolute, fixed, sticky !default;
$user-selects: all, auto, none !default;
// Printing

View File

@ -1,8 +1,8 @@
/*!
* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Bootstrap Grid v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
html {
@ -19,6 +19,7 @@ html {
@import "functions";
@import "variables";
@import "mixins/deprecate";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

View File

@ -1,8 +1,8 @@
/*!
* Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* 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)
*/

View File

@ -1,8 +1,8 @@
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@import "functions";

View File

@ -15,8 +15,9 @@
@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);
}

View File

@ -1,9 +1,22 @@
// stylelint-disable property-blacklist
// stylelint-disable property-disallowed-list
// 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);
}
}

View File

@ -20,10 +20,10 @@
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
// Avoid using mixin so we can pass custom focus shadow properly
@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);
}
}
@ -51,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);
}
}
@ -90,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);
}
}

View File

@ -16,10 +16,10 @@
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;
}
}
@ -53,6 +53,7 @@
.#{$state}-tooltip {
position: absolute;
top: 100%;
left: 0;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
@ -63,6 +64,13 @@
color: color-yiq($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
@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) {
@ -107,7 +115,7 @@
@if $enable-validation-icons {
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 {

View File

@ -15,12 +15,15 @@
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@if $columns > 0 {
// Allow columns to stretch full width below their breakpoints
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@extend %grid-column;
}
}
}
.col#{$infix},
.col#{$infix}-auto {
@extend %grid-column;
@ -34,21 +37,25 @@
max-width: 100%;
}
@if $grid-row-columns > 0 {
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} {
@include row-cols($i);
}
}
}
.col#{$infix}-auto {
@include make-col-auto();
}
@if $columns > 0 {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
@include make-col($i, $columns);
}
}
}
.order#{$infix}-first { order: -1; }
@ -58,6 +65,7 @@
.order#{$infix}-#{$i} { order: $i; }
}
@if $columns > 0 {
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
@ -69,3 +77,4 @@
}
}
}
}

View File

@ -10,6 +10,12 @@
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
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@ -18,13 +24,7 @@
max-width: $container-max-width;
}
}
}
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
margin-right: -$gutter / 2;
margin-left: -$gutter / 2;
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
}
@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
// style grid.
@mixin row-cols($count) {
& > * {
> * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
}

View File

@ -26,7 +26,7 @@
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
// but doesn't convert dppx=>dpi.
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: https://caniuse.com/#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
only screen and (min-resolution: 2dppx) { // Standardized
background-image: url($file-2x);

View File

@ -1,6 +1,6 @@
// 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/
@mixin sr-only() {

View File

@ -1,16 +1,26 @@
// stylelint-disable property-blacklist
// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
@if $enable-transitions {
@if length($transition) == 0 {
transition: $transition-base;
} @else {
transition: $transition;
$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 {
@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;
}
}
}
}

View File

@ -6,7 +6,7 @@
@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);
}
}

View File

@ -1,4 +1,4 @@
// stylelint-disable property-blacklist, declaration-no-important
// stylelint-disable property-disallowed-list, declaration-no-important
//
// Border

View File

@ -0,0 +1,5 @@
// stylelint-disable declaration-no-important
@each $value in $user-selects {
.user-select-#{$value} { user-select: $value !important; }
}

View File

@ -63,8 +63,8 @@
.text-decoration-none { text-decoration: none !important; }
.text-break {
word-break: break-word !important; // IE & < Edge 18
overflow-wrap: break-word !important;
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
}
// Reset

View File

@ -1,5 +1,4 @@
---
# this ensures Jekyll reads the file to be transformed into CSS later
---
// Colors