// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
- padding-right: ($close-font-size + $alert-padding-x * 2);
+ padding-right: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
+ z-index: 2;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
- font-size: $badge-font-size;
+ @include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
-/*
+ @include transition($badge-transition);
+
@at-root a#{&} {
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
}
-*/
+
// Empty badges collapse automatically
&:empty {
display: none;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
+ @include font-size($breadcrumb-font-size);
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius);
}
.breadcrumb-item {
+ display: flex;
+
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
- content: $breadcrumb-divider;
+ content: escape-svg($breadcrumb-divider);
}
}
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
- @include hover {
+ @include hover() {
z-index: 1;
}
&:focus,
.btn {
display: inline-block;
+ font-family: $btn-font-family;
font-weight: $btn-font-weight;
color: $body-color;
text-align: center;
+ text-decoration: if($link-decoration == none, null, none);
+ white-space: $btn-white-space;
vertical-align: middle;
user-select: none;
background-color: transparent;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
@include transition($btn-transition);
- @include hover {
+ @include hover() {
color: $body-color;
text-decoration: none;
}
@include box-shadow(none);
}
- // Opinionated: add "hand" cursor to non-disabled .btn elements
&:not(:disabled):not(.disabled) {
- cursor: pointer;
- }
+ cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
- &:not(:disabled):not(.disabled):active,
- &:not(:disabled):not(.disabled).active {
- @include box-shadow($btn-active-box-shadow);
+ &:active,
+ &.active {
+ @include box-shadow($btn-active-box-shadow);
- &:focus {
- @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+ &:focus {
+ @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+ }
}
}
}
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
+ text-decoration: $link-decoration;
- @include hover {
+ @include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&:focus,
&.focus {
text-decoration: $link-hover-decoration;
- box-shadow: none;
}
&:disabled,
position: relative;
display: flex;
flex-direction: column;
- min-width: 0;
+ min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+ height: $card-height;
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
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);
}
- }
- > .list-group:last-child {
- .list-group-item:last-child {
- @include border-bottom-radius($card-border-radius);
+ &:last-child {
+ border-bottom-width: 0;
+ @include border-bottom-radius($card-inner-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;
+ }
}
.card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
+ // Workaround for the image size bug in IE
+ // See: https://github.com/twbs/bootstrap/pull/28855
+ min-height: 1px;
padding: $card-spacer-x;
+ color: $card-color;
}
.card-title {
}
.card-subtitle {
- margin-top: -($card-spacer-y / 2);
+ margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
}
.card-link {
- @include hover {
+ @include hover() {
text-decoration: none;
}
&: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;
//
.card-header-tabs {
- margin-right: -($card-spacer-x / 2);
+ margin-right: -$card-spacer-x / 2;
margin-bottom: -$card-spacer-y;
- margin-left: -($card-spacer-x / 2);
+ margin-left: -$card-spacer-x / 2;
border-bottom: 0;
}
.card-header-pills {
- margin-right: -($card-spacer-x / 2);
- margin-left: -($card-spacer-x / 2);
+ margin-right: -$card-spacer-x / 2;
+ margin-left: -$card-spacer-x / 2;
}
// Card image
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
+ @include border-radius($card-inner-border-radius);
}
-.card-img {
+.card-img,
+.card-img-top,
+.card-img-bottom {
+ flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
- @include border-radius($card-inner-border-radius);
}
-// Card image caps
+.card-img,
.card-img-top {
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-top-radius($card-inner-border-radius);
}
+.card-img,
.card-img-bottom {
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-bottom-radius($card-inner-border-radius);
}
// Card deck
.card-deck {
- display: flex;
- flex-direction: column;
-
.card {
margin-bottom: $card-deck-margin;
}
@include media-breakpoint-up(sm) {
+ display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card {
- display: flex;
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
- flex-direction: column;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
//
.card-group {
- display: flex;
- flex-direction: column;
-
// The child selector allows nested `.card` within `.card-group`
// to display properly.
> .card {
}
@include media-breakpoint-up(sm) {
+ display: flex;
flex-flow: row wrap;
// The child selector allows nested `.card` within `.card-group`
// to display properly.
// Handle rounded corners
@if $enable-rounded {
- &:first-child {
+ &:not(:last-child) {
@include border-right-radius(0);
.card-img-top,
.card-header {
+ // stylelint-disable-next-line property-disallowed-list
border-top-right-radius: 0;
}
.card-img-bottom,
.card-footer {
+ // stylelint-disable-next-line property-disallowed-list
border-bottom-right-radius: 0;
}
}
- &:last-child {
+ &:not(:first-child) {
@include border-left-radius(0);
.card-img-top,
.card-header {
+ // stylelint-disable-next-line property-disallowed-list
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
+ // stylelint-disable-next-line property-disallowed-list
border-bottom-left-radius: 0;
}
}
-
- &:only-child {
- @include border-radius($card-border-radius);
-
- .card-img-top,
- .card-header {
- @include border-top-radius($card-border-radius);
- }
- .card-img-bottom,
- .card-footer {
- @include border-bottom-radius($card-border-radius);
- }
- }
-
- &:not(:first-child):not(:last-child):not(:only-child) {
- @include border-radius(0);
-
- .card-img-top,
- .card-img-bottom,
- .card-header,
- .card-footer {
- @include border-radius(0);
- }
- }
}
}
}
//
.accordion {
- .card {
- overflow: hidden;
-
- &:not(:first-of-type) {
- .card-header:first-child {
- border-radius: 0;
- }
+ overflow-anchor: none;
- &:not(:last-of-type) {
- border-bottom: 0;
- border-radius: 0;
- }
- }
+ > .card {
+ overflow: hidden;
- &:first-of-type {
+ &:not(:last-of-type) {
border-bottom: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
+ @include border-bottom-radius(0);
}
- &:last-of-type {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
+ &:not(:first-of-type) {
+ @include border-top-radius(0);
}
- .card-header {
+ > .card-header {
+ @include border-radius(0);
margin-bottom: -$card-border-width;
}
}
.active.carousel-item-right {
z-index: 0;
opacity: 0;
- @include transition(0s $carousel-transition-duration opacity);
+ @include transition(opacity 0s $carousel-transition-duration);
}
}
@include transition($carousel-control-transition);
// Hover/focus state
- @include hover-focus {
+ @include hover-focus() {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
.carousel-control-prev {
left: 0;
@if $enable-gradients {
- background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+ background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
}
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
- background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+ background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
}
}
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
- background: transparent no-repeat center center;
- background-size: 100% 100%;
+ background: no-repeat 50% / 100% 100%;
}
.carousel-control-prev-icon {
- background-image: $carousel-control-prev-icon-bg;
+ background-image: escape-svg($carousel-control-prev-icon-bg);
}
.carousel-control-next-icon {
- background-image: $carousel-control-next-icon-bg;
+ background-image: escape-svg($carousel-control-next-icon-bg);
}
.carousel-caption {
position: absolute;
- right: ((100% - $carousel-caption-width) / 2);
+ right: (100% - $carousel-caption-width) / 2;
bottom: 20px;
- left: ((100% - $carousel-caption-width) / 2);
+ left: (100% - $carousel-caption-width) / 2;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
.close {
float: right;
- font-size: $close-font-size;
+ @include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
opacity: .5;
// Override <a>'s hover style
- @include hover {
+ @include hover() {
color: $close-color;
text-decoration: none;
}
&:not(:disabled):not(.disabled) {
- @include hover-focus {
+ @include hover-focus() {
opacity: .75;
}
-
- // Opinionated: add "hand" cursor to non-disabled .close elements
- cursor: pointer;
}
}
padding: 0;
background-color: transparent;
border: 0;
- appearance: none;
}
// Future-proof disabling of clicks on `<a>` elements
// Inline code
code {
- font-size: $code-font-size;
+ @include font-size($code-font-size);
color: $code-color;
- word-break: break-word;
+ word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
- font-size: $kbd-font-size;
+ @include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
- font-size: 100%;
+ @include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
// Blocks of code
pre {
display: block;
- font-size: $code-font-size;
+ @include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
- font-size: inherit;
+ @include font-size(inherit);
color: inherit;
word-break: normal;
}
.custom-control {
position: relative;
+ z-index: 1;
display: block;
- min-height: ($font-size-base * $line-height-base);
- padding-left: $custom-control-gutter;
+ 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 {
.custom-control-input {
position: absolute;
+ left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
+ width: $custom-control-indicator-size;
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
opacity: 0;
&:checked ~ .custom-control-label::before {
&: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;
}
@include box-shadow($custom-control-indicator-active-box-shadow);
}
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
&:disabled {
~ .custom-control-label {
color: $custom-control-label-disabled-color;
.custom-control-label {
position: relative;
margin-bottom: 0;
+ color: $custom-control-label-color;
vertical-align: top;
+ cursor: $custom-control-cursor;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
- left: -$custom-control-gutter;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
// Foreground (icon)
&::after {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
- left: -$custom-control-gutter;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
- background-repeat: no-repeat;
- background-position: center center;
- background-size: $custom-control-indicator-bg-size;
+ background: no-repeat 50% / #{$custom-control-indicator-bg-size};
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
- background-image: $custom-checkbox-indicator-icon-checked;
+ background-image: escape-svg($custom-checkbox-indicator-icon-checked);
}
}
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
- background-image: $custom-checkbox-indicator-icon-indeterminate;
+ background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
}
}
.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);
}
}
}
.custom-radio {
.custom-control-label::before {
+ // stylelint-disable-next-line property-disallowed-list
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
- background-image: $custom-radio-indicator-icon-checked;
+ background-image: escape-svg($custom-radio-indicator-icon-checked);
+ }
+ }
+
+ .custom-control-input:disabled {
+ &:checked ~ .custom-control-label::before {
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+ }
+ }
+}
+
+
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+ padding-left: $custom-switch-width + $custom-control-gutter;
+
+ .custom-control-label {
+ &::before {
+ left: -($custom-switch-width + $custom-control-gutter);
+ width: $custom-switch-width;
+ pointer-events: all;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $custom-switch-indicator-border-radius;
+ }
+
+ &::after {
+ top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+ left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
+ width: $custom-switch-indicator-size;
+ height: $custom-switch-indicator-size;
+ background-color: $custom-control-indicator-border-color;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $custom-switch-indicator-border-radius;
+ @include transition(transform .15s ease-in-out, $custom-forms-transition);
+ }
+ }
+
+ .custom-control-input:checked ~ .custom-control-label {
+ &::after {
+ background-color: $custom-control-indicator-bg;
+ transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.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);
}
}
}
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+ font-family: $custom-select-font-family;
+ @include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
- background: $custom-select-background;
- background-color: $custom-select-bg;
+ background: $custom-select-bg $custom-select-background;
border: $custom-select-border-width solid $custom-select-border-color;
- @if $enable-rounded {
- border-radius: $custom-select-border-radius;
- } @else {
- border-radius: 0;
- }
+ @include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow);
appearance: none;
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;
}
// Hides the default caret in IE11
&::-ms-expand {
- opacity: 0;
+ display: none;
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $custom-select-color;
}
}
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
- font-size: $custom-select-font-size-sm;
+ @include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
- font-size: $custom-select-font-size-lg;
+ @include font-size($custom-select-font-size-lg);
}
box-shadow: $custom-file-focus-box-shadow;
}
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+ &[disabled] ~ .custom-file-label,
&:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
+ font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
.custom-range {
width: 100%;
- height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
+ height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
- margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+ margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
- border-width: ($custom-range-thumb-height * .5);
+ border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}
}
.dropdown-toggle {
+ white-space: nowrap;
+
// Generate the caret automatically
- @include caret;
+ @include caret();
}
// The dropdown menu
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
- font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
- color: $body-color;
+ @include font-size($dropdown-font-size);
+ color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
@include box-shadow($dropdown-box-shadow);
}
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .dropdown-menu#{$infix}-right {
- right: 0;
- left: auto;
- }
- }
-}
-
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
right: auto;
left: 0;
}
+
+ .dropdown-menu#{$infix}-right {
+ right: 0;
+ left: auto;
+ }
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
- @include nav-divider($dropdown-divider-bg);
+ @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
}
// Links, buttons, and more within the dropdown menu
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
- &:first-child {
- @include border-top-radius($dropdown-inner-border-radius);
- }
+ // Prevent dropdown overflow if there's no padding
+ // See https://github.com/twbs/bootstrap/pull/27703
+ @if $dropdown-padding-y == 0 {
+ &:first-child {
+ @include border-top-radius($dropdown-inner-border-radius);
+ }
- &:last-child {
- @include border-bottom-radius($dropdown-inner-border-radius);
+ &:last-child {
+ @include border-bottom-radius($dropdown-inner-border-radius);
+ }
}
- @include hover-focus {
+ @include hover-focus() {
color: $dropdown-link-hover-color;
text-decoration: none;
@include gradient-bg($dropdown-link-hover-bg);
// 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
- font-size: $font-size-sm;
+ @include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
- font-size: $input-font-size;
+ font-family: $input-font-family;
+ @include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
border: $input-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
- @if $enable-rounded {
- // Manually use the if/else instead of the mixin to account for iOS override
- border-radius: $input-border-radius;
- } @else {
- // Otherwise undo the iOS default
- border-radius: 0;
- }
+ @include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);
border: 0;
}
+ // Remove select outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $input-color;
+ }
+
// Customize the `:focus` state to imitate native WebKit styles.
- @include form-control-focus();
+ @include form-control-focus($ignore-warning: true);
// Placeholder
&::placeholder {
}
}
+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
// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
- padding-top: calc(#{$input-padding-y} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+ padding-top: add($input-padding-y, $input-border-width);
+ padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default
- font-size: inherit; // Override the `<legend>` default
+ @include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
- padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
- font-size: $input-font-size-lg;
+ padding-top: add($input-padding-y-lg, $input-border-width);
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
}
.col-form-label-sm {
- padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
- padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
- font-size: $input-font-size-sm;
+ padding-top: add($input-padding-y-sm, $input-border-width);
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
}
.form-control-plaintext {
display: block;
width: 100%;
- padding-top: $input-padding-y;
- padding-bottom: $input-padding-y;
+ padding: $input-padding-y 0;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+ @include font-size($input-font-size);
line-height: $input-line-height;
color: $input-plaintext-color;
background-color: transparent;
.form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
- font-size: $input-font-size-sm;
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
- font-size: $input-font-size-lg;
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
}
}
-// stylelint-disable-next-line no-duplicate-selectors
textarea.form-control {
height: auto;
}
.form-row {
display: flex;
flex-wrap: wrap;
- margin-right: -5px;
- margin-left: -5px;
+ margin-right: -$form-grid-gutter-width / 2;
+ margin-left: -$form-grid-gutter-width / 2;
> .col,
> [class*="col-"] {
- padding-right: 5px;
- padding-left: 5px;
+ padding-right: $form-grid-gutter-width / 2;
+ padding-left: $form-grid-gutter-width / 2;
}
}
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
+ // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+ &[disabled] ~ .form-check-label,
&:disabled ~ .form-check-label {
color: $text-muted;
}
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
-@include form-validation-state("valid", $form-feedback-valid-color);
-@include form-validation-state("invalid", $form-feedback-invalid-color);
+@each $state, $data in $form-validation-states {
+ @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}
// Inline forms
//
}
.form-check-input {
position: relative;
+ flex-shrink: 0;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
- @if $prev-num == null or unit($num) == "%" {
+ @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
// Starts at zero
-// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map) {
- $values: map-values($map);
- $first-value: nth($values, 1);
- @if $first-value != 0 {
- @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+// 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}.";
+ }
}
}
@return $string;
}
+// 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;
+}
+
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
@return mix($color-base, $color, $level * $theme-color-interval);
}
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+ @if $value1 == null {
+ @return $value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 + $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+ @if $value1 == null and $value2 == null {
+ @return null;
+ }
+
+ @if $value1 == null {
+ @return -$value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+ @return $value1 - $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
- .container {
+ // Single container class with breakpoint max-widths
+ .container,
+ // 100% wide container at all breakpoints
+ .container-fluid {
@include make-container();
- @include make-container-max-widths();
}
-}
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but with 100% width for
-// fluid, full width layouts.
+ // Responsive containers that are 100% wide until a breakpoint
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ .container-#{$breakpoint} {
+ @extend .container-fluid;
+ }
-@if $enable-grid-classes {
- .container-fluid {
- @include make-container();
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ %responsive-container-#{$breakpoint} {
+ max-width: $container-max-width;
+ }
+
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
+ $extend-breakpoint: true;
+
+ @each $name, $width in $grid-breakpoints {
+ @if ($extend-breakpoint) {
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
+ @extend %responsive-container-#{$breakpoint};
+ }
+
+ // Once the current breakpoint is reached, stop extending
+ @if ($breakpoint == $name) {
+ $extend-breakpoint: false;
+ }
+ }
+ }
+ }
}
}
+
// Row
//
-// Rows contain and clear the floats of your columns.
+// Rows contain your columns.
@if $enable-grid-classes {
.row {
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
- @include img-fluid;
+ @include img-fluid();
}
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
- @include img-fluid;
+ @include img-fluid();
}
//
}
.figure-img {
- margin-bottom: ($spacer / 2);
+ margin-bottom: $spacer / 2;
line-height: 1;
}
.figure-caption {
- font-size: $figure-caption-font-size;
+ @include font-size($figure-caption-font-size);
color: $figure-caption-color;
}
> .custom-file {
position: relative; // For focus state's z-index
flex: 1 1 auto;
- // Add width 1% and flex-basis auto to ensure that button will not wrap out
- // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
margin-bottom: 0;
+ .form-control,
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
- font-size: $font-size-base; // Match inputs
+ @include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
- font-size: $input-font-size-lg;
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
- font-size: $input-font-size-sm;
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
- padding-right: ($custom-select-padding-x + $custom-select-indicator-padding);
+ padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
+ color: $jumbotron-color;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
// 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);
}
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
- @include hover-focus {
+ @include hover-focus() {
+ z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: $list-group-action-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
- // Place the border on the list items and negative margin up for better styling
- margin-bottom: -$list-group-border-width;
+ color: $list-group-color;
+ text-decoration: if($link-decoration == none, null, none);
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
- @include border-top-radius($list-group-border-radius);
+ @include border-top-radius(inherit);
}
&:last-child {
- margin-bottom: 0;
- @include border-bottom-radius($list-group-border-radius);
- }
-
- @include hover-focus {
- z-index: 1; // Place hover/active items above their siblings for proper border styling
- text-decoration: none;
+ @include border-bottom-radius(inherit);
}
&.disabled,
background-color: $list-group-active-bg;
border-color: $list-group-active-border-color;
}
+
+ & + & {
+ border-top-width: 0;
+
+ &.active {
+ margin-top: -$list-group-border-width;
+ border-top-width: $list-group-border-width;
+ }
+ }
+}
+
+
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .list-group-horizontal#{$infix} {
+ flex-direction: row;
+
+ > .list-group-item {
+ &:first-child {
+ @include border-bottom-left-radius($list-group-border-radius);
+ @include border-top-right-radius(0);
+ }
+
+ &:last-child {
+ @include border-top-right-radius($list-group-border-radius);
+ @include border-bottom-left-radius(0);
+ }
+
+ &.active {
+ margin-top: 0;
+ }
+
+ + .list-group-item {
+ border-top-width: $list-group-border-width;
+ border-left-width: 0;
+
+ &.active {
+ margin-left: -$list-group-border-width;
+ border-left-width: $list-group-border-width;
+ }
+ }
+ }
+ }
+ }
}
// useful within other components (e.g., cards).
.list-group-flush {
- .list-group-item {
- border-right: 0;
- border-left: 0;
- @include border-radius(0);
+ @include border-radius(0);
- &:last-child {
- margin-bottom: -$list-group-border-width;
- }
- }
+ > .list-group-item {
+ border-width: 0 0 $list-group-border-width;
- &:first-child {
- .list-group-item:first-child {
- border-top: 0;
- }
- }
-
- &:last-child {
- .list-group-item:last-child {
- margin-bottom: 0;
- border-bottom: 0;
+ &:last-child {
+ border-bottom-width: 0;
}
}
}
//
// Used in conjunction with global variables to enable certain theme features.
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
// Utilities
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/text-truncate";
@import "mixins/visibility";
-// // Components
+// Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/forms";
@import "mixins/table-row";
-// // Skins
+// Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
-// // Layout
+// Layout
@import "mixins/clearfix";
@import "mixins/grid-framework";
@import "mixins/grid";
.modal.show & {
transform: $modal-show-transform;
}
+
+ // When trying to close, animate focus to scale
+ .modal.modal-static & {
+ transform: $modal-scale-transform;
+ }
+}
+
+.modal-dialog-scrollable {
+ display: flex; // IE10/11
+ max-height: subtract(100%, $modal-dialog-margin * 2);
+
+ .modal-content {
+ max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
+ overflow: hidden;
+ }
+
+ .modal-header,
+ .modal-footer {
+ flex-shrink: 0;
+ }
+
+ .modal-body {
+ overflow-y: auto;
+ }
}
.modal-dialog-centered {
display: flex;
align-items: center;
- min-height: calc(100% - (#{$modal-dialog-margin} * 2));
+ min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
- height: calc(100vh - (#{$modal-dialog-margin} * 2));
+ height: subtract(100vh, $modal-dialog-margin * 2);
+ height: min-content; // Reset height to 0 except on IE
content: "";
}
+
+ // Ensure `.modal-body` shows scrollbar (IE10/11)
+ &.modal-dialog-scrollable {
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+
+ .modal-content {
+ max-height: none;
+ }
+
+ &::before {
+ content: none;
+ }
+ }
}
// Actual modal
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
// counteract the pointer-events: none; in the .modal-dialog
+ color: $modal-content-color;
pointer-events: auto;
background-color: $modal-content-bg;
background-clip: padding-box;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
- @include border-top-radius($modal-content-border-radius);
+ @include border-top-radius($modal-content-inner-border-radius);
.close {
padding: $modal-header-padding;
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
- // when should there be a fixed height on `.modal-dialog`.
+ // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
display: flex;
+ flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
- padding: $modal-inner-padding;
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
- @include border-bottom-radius($modal-content-border-radius);
+ @include border-bottom-radius($modal-content-inner-border-radius);
- // Easily place margin between footer elements
- > :not(:first-child) { margin-left: .25rem; }
- > :not(:last-child) { margin-right: .25rem; }
+ // Place margin between footer elements
+ // This solution is far from ideal because of the universal selector usage,
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+ > * {
+ margin: $modal-footer-margin-between / 2;
+ }
}
// Measure scrollbar width for padding body during modal show/hide
margin: $modal-dialog-margin-y-sm-up auto;
}
+ .modal-dialog-scrollable {
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+
+ .modal-content {
+ max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+ }
+ }
+
.modal-dialog-centered {
- min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
- height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
+ height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+ height: min-content;
}
}
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
-// `<nav>`s or `<ul>`s.
+// `<nav>`s, `<ul>`s or `<ol>`s.
.nav {
display: flex;
.nav-link {
display: block;
padding: $nav-link-padding-y $nav-link-padding-x;
+ text-decoration: if($link-decoration == none, null, none);
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
- @include hover-focus {
+ @include hover-focus() {
border-color: $nav-tabs-link-hover-border-color;
}
//
.nav-fill {
+ > .nav-link,
.nav-item {
flex: 1 1 auto;
text-align: center;
}
.nav-justified {
+ > .nav-link,
.nav-item {
flex-basis: 0;
flex-grow: 1;
// Because flex properties aren't inherited, we need to redeclare these first
// few properties so that content nested within behave properly.
- > .container,
- > .container-fluid {
+ %container-flex-properties {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
+
+ .container,
+ .container-fluid {
+ @extend %container-flex-properties;
+ }
+
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+ @extend %container-flex-properties;
+ }
+ }
}
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
- font-size: $navbar-brand-font-size;
+ @include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
}
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
- font-size: $navbar-toggler-font-size;
+ @include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
- @include hover-focus {
+ @include hover-focus() {
text-decoration: none;
}
-
- // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
- &:not(:disabled):not(.disabled) {
- cursor: pointer;
- }
}
// Keep as a separate element so folks can easily override it with another icon
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
- > .container,
- > .container-fluid {
+ %container-navbar-expand-#{$breakpoint} {
padding-right: 0;
padding-left: 0;
}
+
+ > .container,
+ > .container-fluid {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-navbar-expand-#{$breakpoint};
+ }
+ }
}
@include media-breakpoint-up($next) {
}
// For nesting containers, have to redeclare for alignment purposes
+ %container-nesting-#{$breakpoint} {
+ flex-wrap: nowrap;
+ }
+
> .container,
> .container-fluid {
- flex-wrap: nowrap;
+ @extend %container-nesting-#{$breakpoint};
+ }
+
+ @each $size, $container-max-width in $container-max-widths {
+ > .container#{breakpoint-infix($size, $container-max-widths)} {
+ @extend %container-nesting-#{$breakpoint};
+ }
}
.navbar-collapse {
- display: flex !important; // stylelint-disable-line declaration-no-important
+ display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
.navbar-brand {
color: $navbar-light-brand-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-brand-hover-color;
}
}
.nav-link {
color: $navbar-light-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-hover-color;
}
}
.navbar-toggler-icon {
- background-image: $navbar-light-toggler-icon-bg;
+ background-image: escape-svg($navbar-light-toggler-icon-bg);
}
.navbar-text {
a {
color: $navbar-light-active-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-light-active-color;
}
}
.navbar-brand {
color: $navbar-dark-brand-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-brand-hover-color;
}
}
.nav-link {
color: $navbar-dark-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-hover-color;
}
}
.navbar-toggler-icon {
- background-image: $navbar-dark-toggler-icon-bg;
+ background-image: escape-svg($navbar-dark-toggler-icon-bg);
}
.navbar-text {
a {
color: $navbar-dark-active-color;
- @include hover-focus {
+ @include hover-focus() {
color: $navbar-dark-active-color;
}
}
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;
}
&:focus {
- z-index: 2;
+ z-index: 3;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
-
- // Opinionated: add "hand" cursor to non-disabled .page-link elements
- &:not(:disabled):not(.disabled) {
- cursor: pointer;
- }
}
.page-item {
}
&.active .page-link {
- z-index: 1;
+ z-index: 3;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- font-size: $popover-font-size;
+ @include font-size($popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
- margin: 0 $border-radius-lg;
+ margin: 0 $popover-border-radius;
&::before,
&::after {
.bs-popover-top {
margin-bottom: $popover-arrow-height;
- .arrow {
- bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
- }
+ > .arrow {
+ bottom: subtract(-$popover-arrow-height, $popover-border-width);
- .arrow::before,
- .arrow::after {
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
- }
-
- .arrow::before {
- bottom: 0;
- border-top-color: $popover-arrow-outer-color;
- }
+ &::before {
+ bottom: 0;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-outer-color;
+ }
- .arrow::after {
- bottom: $popover-border-width;
- border-top-color: $popover-arrow-color;
+ &::after {
+ bottom: $popover-border-width;
+ border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-top-color: $popover-arrow-color;
+ }
}
}
.bs-popover-right {
margin-left: $popover-arrow-height;
- .arrow {
- left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ > .arrow {
+ left: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
- }
-
- .arrow::before,
- .arrow::after {
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
- }
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
- .arrow::before {
- left: 0;
- border-right-color: $popover-arrow-outer-color;
- }
+ &::before {
+ left: 0;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-outer-color;
+ }
- .arrow::after {
- left: $popover-border-width;
- border-right-color: $popover-arrow-color;
+ &::after {
+ left: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-right-color: $popover-arrow-color;
+ }
}
}
.bs-popover-bottom {
margin-top: $popover-arrow-height;
- .arrow {
- top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
- }
-
- .arrow::before,
- .arrow::after {
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
- }
+ > .arrow {
+ top: subtract(-$popover-arrow-height, $popover-border-width);
- .arrow::before {
- top: 0;
- border-bottom-color: $popover-arrow-outer-color;
- }
+ &::before {
+ top: 0;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-bottom-color: $popover-arrow-outer-color;
+ }
- .arrow::after {
- top: $popover-border-width;
- border-bottom-color: $popover-arrow-color;
+ &::after {
+ top: $popover-border-width;
+ border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-bottom-color: $popover-arrow-color;
+ }
}
// This will remove the popover-header's border just below the arrow
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: ($popover-arrow-width / -2);
+ margin-left: -$popover-arrow-width / 2;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
.bs-popover-left {
margin-right: $popover-arrow-height;
- .arrow {
- right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+ > .arrow {
+ right: subtract(-$popover-arrow-height, $popover-border-width);
width: $popover-arrow-height;
height: $popover-arrow-width;
- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
- }
-
- .arrow::before,
- .arrow::after {
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
- }
+ margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
- .arrow::before {
- right: 0;
- border-left-color: $popover-arrow-outer-color;
- }
+ &::before {
+ right: 0;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-outer-color;
+ }
- .arrow::after {
- right: $popover-border-width;
- border-left-color: $popover-arrow-color;
+ &::after {
+ right: $popover-border-width;
+ border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-left-color: $popover-arrow-color;
+ }
}
}
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot
- font-size: $font-size-base;
+ @include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
- $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
- @include border-top-radius($offset-border-width);
+ @include border-top-radius($popover-inner-border-radius);
&:empty {
display: none;
// stylelint-disable declaration-no-important, selector-no-qualifying-type
-// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
+// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
// ==========================================================================
// Print styles.
}
pre,
blockquote {
- border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
+ border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
page-break-inside: avoid;
}
//
// Printing Tables:
- // http://css-discuss.incutio.com/wiki/Printing_Tables
+ // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
-@keyframes progress-bar-stripes {
- from { background-position: $progress-height 0; }
- to { background-position: 0 0; }
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+ @keyframes progress-bar-stripes {
+ from { background-position: $progress-height 0; }
+ to { background-position: 0 0; }
+ }
}
.progress {
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
- font-size: $progress-font-size;
+ line-height: 0;
+ @include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
display: flex;
flex-direction: column;
justify-content: center;
+ overflow: hidden;
color: $progress-bar-color;
text-align: center;
white-space: nowrap;
background-size: $progress-height $progress-height;
}
-.progress-bar-animated {
- animation: progress-bar-stripes $progress-bar-animation-timing;
+@if $enable-transitions {
+ .progress-bar-animated {
+ animation: progress-bar-stripes $progress-bar-animation-timing;
+
+ @if $enable-prefers-reduced-motion-media-query {
+ @media (prefers-reduced-motion: reduce) {
+ animation: none;
+ }
+ }
+ }
}
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
-// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-// 6. Change the default tap highlight to be completely transparent in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
*,
*::before,
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
- -ms-overflow-style: scrollbar; // 5
- -webkit-tap-highlight-color: rgba($black, 0); // 6
-}
-
-// IE10+ doesn't honor `<meta name="viewport">` in some cases.
-@at-root {
- @-ms-viewport {
- width: device-width;
- }
+ -webkit-tap-highlight-color: rgba($black, 0); // 5
}
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use the
+// 3. Set an explicit initial text-align value so that we can later use
// the `inherit` value on things like `<th>` elements.
body {
margin: 0; // 1
font-family: $font-family-base;
- font-size: $font-size-base;
+ @include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
background-color: $body-bg; // 2
}
-// Suppress the focus outline on elements that cannot be accessed via keyboard.
-// This prevents an unwanted focus outline from appearing around elements that
-// might still respond to pointer events.
+// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
+// on elements that programmatically receive focus but wouldn't normally show a visible
+// focus outline. In general, this would mean that the outline is only applied if the
+// interaction that led to the element receiving programmatic focus was a keyboard interaction,
+// or the browser has somehow determined that the user is primarily a keyboard user and/or
+// wants focus outlines to always be presented.
//
-// Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
b,
strong {
- font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+ font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
}
small {
- font-size: 80%; // Add the correct font size in all browsers
+ @include font-size(80%); // Add the correct font size in all browsers
}
//
sub,
sup {
position: relative;
- font-size: 75%;
+ @include font-size(75%);
line-height: 0;
vertical-align: baseline;
}
text-decoration: $link-decoration;
background-color: transparent; // Remove the gray background on active links in IE 10.
- @include hover {
+ @include hover() {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
}
-// And undo these styles for placeholder links/named anchors (without href)
-// which have not been made explicitly keyboard-focusable (without tabindex).
+// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
-a:not([href]):not([tabindex]) {
+a:not([href]):not([class]) {
color: inherit;
text-decoration: none;
- @include hover-focus {
+ @include hover() {
color: inherit;
text-decoration: none;
}
-
- &:focus {
- outline: 0;
- }
}
kbd,
samp {
font-family: $font-family-monospace;
- font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
pre {
margin-bottom: 1rem;
// Don't allow content to break outside
overflow: auto;
- // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
- // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+ // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
+ // making it impossible to interact with the content
-ms-overflow-style: scrollbar;
}
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
}
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
+ // stylelint-disable-next-line property-disallowed-list
border-radius: 0;
}
textarea {
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
- font-size: inherit;
+ @include font-size(inherit);
line-height: inherit;
}
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
+select {
+ word-wrap: normal;
+}
+
+
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
-webkit-appearance: button; // 2
}
+// Opinionated: add "hand" cursor to non-disabled button elements.
+@if $enable-pointer-cursor-for-buttons {
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+ &:not(:disabled) {
+ cursor: pointer;
+ }
+ }
+}
+
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
}
-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.
max-width: 100%; // 1
padding: 0;
margin-bottom: .5rem;
- font-size: 1.5rem;
+ @include font-size(1.5rem);
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
}
//
-// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+// Remove the inner padding in Chrome and Safari on macOS.
//
[type="search"]::-webkit-search-decoration {
+// Do not forget to update getting-started/theming.md!
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
- overflow: hidden;
- text-indent: -999em;
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
+ // stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
animation: spinner-border .75s linear infinite;
}
}
50% {
opacity: 1;
+ transform: none;
}
}
display: inline-block;
width: $spinner-width;
height: $spinner-height;
- overflow: hidden;
- text-indent: -999em;
vertical-align: text-bottom;
background-color: currentColor;
+ // stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;
animation: spinner-grow .75s linear infinite;
.table {
width: 100%;
margin-bottom: $spacer;
+ color: $table-color;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th,
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
-
- .table {
- background-color: $body-bg;
- }
}
thead {
th,
td {
- border-bottom-width: (2 * $table-border-width);
+ border-bottom-width: 2 * $table-border-width;
}
}
}
.table-hover {
tbody tr {
- @include hover {
+ @include hover() {
+ color: $table-hover-color;
background-color: $table-hover-bg;
}
}
}
&.table-striped {
- tbody tr:nth-of-type(odd) {
+ tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
- @include hover {
+ @include hover() {
+ color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
}
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
- -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {
.toast {
- display: none;
+ // 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
- font-size: $toast-font-size; // knock it down to 14px
+ @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;
- border-radius: $toast-border-radius;
box-shadow: $toast-box-shadow;
- backdrop-filter: blur(10px);
+ opacity: 0;
+ @include border-radius($toast-border-radius);
- + .toast {
- margin-top: $toast-padding-x;
+ &:not(:last-child) {
+ margin-bottom: $toast-padding-x;
+ }
+
+ &.showing {
+ opacity: 1;
}
&.show {
display: block;
+ opacity: 1;
+ }
+
+ &.hide {
+ display: none;
}
}
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 {
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- font-size: $tooltip-font-size;
+ @include font-size($tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
-// stylelint-disable selector-no-qualifying-type
-
.fade {
@include transition($transition-fade);
color: $headings-color;
}
-h1, .h1 { font-size: $h1-font-size; }
-h2, .h2 { font-size: $h2-font-size; }
-h3, .h3 { font-size: $h3-font-size; }
-h4, .h4 { font-size: $h4-font-size; }
-h5, .h5 { font-size: $h5-font-size; }
-h6, .h6 { font-size: $h6-font-size; }
+h1, .h1 { @include font-size($h1-font-size); }
+h2, .h2 { @include font-size($h2-font-size); }
+h3, .h3 { @include font-size($h3-font-size); }
+h4, .h4 { @include font-size($h4-font-size); }
+h5, .h5 { @include font-size($h5-font-size); }
+h6, .h6 { @include font-size($h6-font-size); }
.lead {
- font-size: $lead-font-size;
+ @include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
- font-size: $display1-size;
+ @include font-size($display1-size);
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2 {
- font-size: $display2-size;
+ @include font-size($display2-size);
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
- font-size: $display3-size;
+ @include font-size($display3-size);
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
- font-size: $display4-size;
+ @include font-size($display4-size);
font-weight: $display4-weight;
line-height: $display-line-height;
}
small,
.small {
- font-size: $small-font-size;
+ @include font-size($small-font-size);
font-weight: $font-weight-normal;
}
//
.list-unstyled {
- @include list-unstyled;
+ @include list-unstyled();
}
// Inline turns list items into inline-block
.list-inline {
- @include list-unstyled;
+ @include list-unstyled();
}
.list-inline-item {
display: inline-block;
// Builds on `abbr`
.initialism {
- font-size: 90%;
+ @include font-size(90%);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $spacer;
- font-size: $blockquote-font-size;
+ @include font-size($blockquote-font-size);
}
.blockquote-footer {
display: block;
- font-size: $blockquote-small-font-size;
+ @include font-size($blockquote-small-font-size);
color: $blockquote-small-color;
&::before {
@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/spacing";
+@import "utilities/stretched-link";
@import "utilities/text";
@import "utilities/visibility";
// Color system
-@import "functions";
-
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$black: #000 !default;
$grays: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
$cyan: #17a2b8 !default;
$colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
(
"blue": $blue,
$dark: $gray-800 !default;
$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"primary": $primary,
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
// Options
//
$enable-prefers-reduced-motion-media-query: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
+$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
+$enable-responsive-font-sizes: false !default;
$enable-validation-icons: true !default;
+$enable-deprecation-messages: true !default;
// Spacing
$spacer: 1rem !default;
$spacers: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
(
0: 0,
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
$sizes: map-merge(
(
25: 25%,
//
// Style anchor elements.
-$link-color: $primary !default;
+$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
-$grid-breakpoints: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$grid-breakpoints: map-merge(
- (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px
- ),
- $grid-breakpoints
-);
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px
+) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints);
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
-$container-max-widths: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$container-max-widths: map-merge(
- (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px
- ),
- $container-max-widths
-);
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px
+) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
+$grid-row-columns: 6 !default;
// Components
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$component-active-color: $white !default;
-$component-active-bg: $primary !default;
+$component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
$transition-base: all .2s ease-in-out !default;
$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),
(16 9),
- (3 4),
+ (4 3),
(1 1),
),
$embed-responsive-aspect-ratios
);
-// Fonts
+// Typography
//
// 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", 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
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: ($font-size-base * 1.25) !default;
-$font-size-sm: ($font-size-base * .875) !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+$font-size-sm: $font-size-base * .875 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
-$headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family: inherit !default;
+$headings-margin-bottom: $spacer / 2 !default;
+$headings-font-family: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
-$headings-color: inherit !default;
+$headings-color: null !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
-$lead-font-size: ($font-size-base * 1.25) !default;
+$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: ($font-size-base * 1.25) !default;
+$blockquote-font-size: $font-size-base * 1.25 !default;
$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;
$table-cell-padding: .75rem !default;
$table-cell-padding-sm: .3rem !default;
-$table-bg: transparent !default;
+$table-color: $body-color !default;
+$table-bg: null !default;
$table-accent-bg: rgba($black, .05) !default;
+$table-hover-color: $table-color !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
-$table-border-color: $gray-300 !default;
+$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-bg: $gray-900 !default;
+$table-dark-color: $white !default;
+$table-dark-bg: $gray-800 !default;
$table-dark-accent-bg: rgba($white, .05) !default;
+$table-dark-hover-color: $table-dark-color !default;
$table-dark-hover-bg: rgba($white, .075) !default;
-$table-dark-border-color: lighten($gray-900, 7.5%) !default;
-$table-dark-color: $white !default;
+$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
$table-striped-order: odd !default;
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
+$input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-height-border: $input-border-width * 2 !default;
-$input-height-inner: ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
-
-$input-height-inner-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
-$input-height-inner-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-check-inline-margin-x: .75rem !default;
$form-check-inline-input-margin-x: .3125rem !default;
+$form-grid-gutter-width: 10px !default;
$form-group-margin-bottom: 1rem !default;
$input-group-addon-color: $input-color !default;
$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-$custom-control-gutter: 1.5rem !default;
+$custom-control-gutter: .5rem !default;
$custom-control-spacer-x: 1rem !default;
+$custom-control-cursor: null !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: $input-bg !default;
$custom-control-indicator-border-color: $gray-500 !default;
$custom-control-indicator-border-width: $input-border-width !default;
+$custom-control-label-color: null !default;
+
$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
$custom-control-label-disabled-color: $gray-600 !default;
$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($primary, .5) !default;
-$custom-control-indicator-checked-box-shadow: none !default;
+$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !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-btn-focus-box-shadow !default;
+$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
$custom-control-indicator-focus-border-color: $input-focus-border-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-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;
-$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow: none !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: null !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
$custom-radio-indicator-border-radius: 50% !default;
-$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
+
+$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
-$custom-select-padding-y: $input-btn-padding-y !default;
-$custom-select-padding-x: $input-btn-padding-x !default;
+$custom-select-padding-y: $input-padding-y !default;
+$custom-select-padding-x: $input-padding-x !default;
+$custom-select-font-family: $input-font-family !default;
+$custom-select-font-size: $input-font-size !default;
$custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-font-weight: $input-font-weight !default;
$custom-select-disabled-bg: $gray-200 !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default;
-$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default;
+$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$custom-select-border-width: $input-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-width: $input-focus-width !default;
-$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
$custom-select-padding-y-sm: $input-padding-y-sm !default;
$custom-select-padding-x-sm: $input-padding-x-sm !default;
-$custom-select-font-size-sm: $input-btn-font-size-sm !default;
+$custom-select-font-size-sm: $input-font-size-sm !default;
$custom-select-height-sm: $input-height-sm !default;
$custom-select-padding-y-lg: $input-padding-y-lg !default;
$custom-select-padding-x-lg: $input-padding-x-lg !default;
-$custom-select-font-size-lg: $input-btn-font-size-lg !default;
+$custom-select-font-size-lg: $input-font-size-lg !default;
$custom-select-height-lg: $input-height-lg !default;
$custom-range-track-width: 100% !default;
$custom-file-padding-y: $input-padding-y !default;
$custom-file-padding-x: $input-padding-x !default;
$custom-file-line-height: $input-line-height !default;
+$custom-file-font-family: $input-font-family !default;
$custom-file-font-weight: $input-font-weight !default;
$custom-file-color: $input-color !default;
$custom-file-bg: $input-bg !default;
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default;
-$form-feedback-valid-color: $success !default;
-$form-feedback-invalid-color: $danger !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
-$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-y: .5rem !default;
-$dropdown-spacer: .125rem !default;
-$dropdown-bg: $white !default;
-$dropdown-border-color: rgba($black, .15) !default;
-$dropdown-border-radius: $border-radius !default;
-$dropdown-border-width: $border-width !default;
-$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg: $gray-200 !default;
-$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-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: $gray-600 !default;
-
-$dropdown-item-padding-y: .25rem !default;
-$dropdown-item-padding-x: 1.5rem !default;
-
-$dropdown-header-color: $gray-600 !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: map-merge(
+ (
+ "valid": (
+ "color": $form-feedback-valid-color,
+ "icon": $form-feedback-icon-valid
+ ),
+ "invalid": (
+ "color": $form-feedback-invalid-color,
+ "icon": $form-feedback-icon-invalid
+ ),
+ ),
+ $form-validation-states
+);
// Z-index master list
//
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: ($spacer / 2) !default;
+$nav-divider-margin-y: $spacer / 2 !default;
// Navbar
-$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .5) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// Dropdowns
+//
+// 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;
+$dropdown-color: $body-color !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, .15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg: $gray-200 !default;
+$dropdown-divider-margin-y: $nav-divider-margin-y !default;
+$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg: $gray-100 !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-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
$pagination-padding-y: .5rem !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
+$jumbotron-color: null !default;
$jumbotron-bg: $gray-200 !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg: rgba($black, .03) !default;
-$card-cap-color: inherit !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
-$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
+$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
// Toasts
-$toast-max-width: 350px !default;
-$toast-padding-x: .75rem !default;
-$toast-padding-y: .25rem !default;
-$toast-font-size: .875rem !default;
-$toast-background-color: rgba($white, .85) !default;
-$toast-border-width: 1px !default;
-$toast-border-color: rgba(0, 0, 0, .1) !default;
-$toast-border-radius: .25rem !default;
-$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
-$toast-header-color: $gray-600 !default;
-$toast-header-background-color: rgba($white, .85) !default;
-$toast-header-border-color: rgba(0, 0, 0, .05) !default;
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .25rem !default;
+$toast-font-size: .875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba($white, .85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba(0, 0, 0, .1) !default;
+$toast-border-radius: .25rem !default;
+$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color: $gray-600 !default;
+$toast-header-background-color: rgba($white, .85) !default;
+$toast-header-border-color: rgba(0, 0, 0, .05) !default;
// Badges
$badge-padding-x: .4em !default;
$badge-border-radius: $border-radius !default;
+$badge-transition: $btn-transition !default;
+$badge-focus-width: $input-btn-focus-width !default;
+
$badge-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
// Padding applied to the modal body
$modal-inner-padding: 1rem !default;
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
+$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
-$modal-header-border-color: $gray-200 !default;
+$modal-header-border-color: $border-color !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
// Alerts
// Progress bars
$progress-height: 1rem !default;
-$progress-font-size: ($font-size-base * .75) !default;
+$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color: $white !default;
-$progress-bar-bg: $primary !default;
+$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// List group
+$list-group-color: null !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
// Breadcrumbs
+$breadcrumb-font-size: null !default;
+
$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$carousel-control-icon-width: 20px !default;
-$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
$carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// Utilities
+$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
/*!
- * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Bootstrap Grid v4.5.3 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
-@at-root {
- @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
-}
-
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
/*!
- * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Bootstrap Reboot v4.5.3 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 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)
*/
/*!
- * Bootstrap v4.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Bootstrap v4.5.3 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
-
/*
Caller should import variables (which in turn includes functions..)
@import "functions";
// Contextual backgrounds
-@mixin bg-variant($parent, $color) {
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
- @include hover-focus {
+ @include hover-focus() {
background-color: darken($color, 10%) !important;
}
}
+ @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
}
-@mixin bg-gradient-variant($parent, $color) {
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
}
+ @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
}
color: color-yiq($bg);
background-color: $bg;
- &[href] {
- @include hover-focus {
+ @at-root a#{&} {
+ @include hover-focus() {
color: color-yiq($bg);
- text-decoration: none;
background-color: darken($bg, 10%);
}
+
+ &:focus,
+ &.focus {
+ outline: 0;
+ box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+ }
}
-}
\ No newline at end of file
+}
+// stylelint-disable property-disallowed-list
// Single side border-radius
-@mixin border-radius($radius: $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;
}
}
@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: valid-radius($radius);
+ }
+}
+
+@mixin border-top-right-radius($radius) {
+ @if $enable-rounded {
+ border-top-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-bottom-right-radius($radius) {
+ @if $enable-rounded {
+ border-bottom-right-radius: valid-radius($radius);
+ }
+}
+
+@mixin border-bottom-left-radius($radius) {
+ @if $enable-rounded {
+ border-bottom-left-radius: valid-radius($radius);
}
}
@mixin box-shadow($shadow...) {
@if $enable-shadows {
- box-shadow: $shadow;
+ $result: ();
+
+ @if (length($shadow) == 1) {
+ // We can pass `@include box-shadow(none);`
+ $result: $shadow;
+ } @else {
+ // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+ @for $i from 1 through length($shadow) {
+ @if nth($shadow, $i) != "none" {
+ $result: append($result, nth($shadow, $i), "comma");
+ }
+ }
+ }
+ @if (length($result) > 0) {
+ box-shadow: $result;
+ }
}
}
border-color: $border;
@include box-shadow($btn-box-shadow);
- @include hover {
+ @include hover() {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
&:focus,
&.focus {
- // Avoid using mixin so we can pass custom focus shadow properly
+ color: color-yiq($hover-background);
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
@if $enable-shadows {
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}
}
border-color: $active-border;
&:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+ @if $enable-shadows and $btn-active-box-shadow != none {
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
} @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);
}
}
color: $color;
border-color: $color;
- @include hover {
+ @include hover() {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
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);
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
- font-size: $font-size;
+ @include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default
- @if $enable-rounded {
- border-radius: $border-radius;
- } @else {
- border-radius: 0;
- }
+ @include border-radius($border-radius, 0);
}
-@mixin caret-down {
+@mixin caret-down() {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
-@mixin caret-up {
+@mixin caret-up() {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
-@mixin caret-right {
+@mixin caret-right() {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
-@mixin caret-left {
+@mixin caret-left() {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@if $enable-caret {
&::after {
display: inline-block;
- margin-left: $caret-width * .85;
- vertical-align: $caret-width * .85;
+ margin-left: $caret-spacing;
+ vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
- @include caret-down;
+ @include caret-down();
} @else if $direction == up {
- @include caret-up;
+ @include caret-up();
} @else if $direction == right {
- @include caret-right;
+ @include caret-right();
}
}
&::before {
display: inline-block;
- margin-right: $caret-width * .85;
- vertical-align: $caret-width * .85;
+ margin-right: $caret-spacing;
+ vertical-align: $caret-vertical-align;
content: "";
- @include caret-left;
+ @include caret-left();
}
}
--- /dev/null
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+ @if ($enable-deprecation-messages != false and $ignore-warning != true) {
+ @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+ }
+}
// stylelint-disable declaration-no-important
-@mixin float-left {
+@mixin float-left() {
float: left !important;
+ @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
}
-@mixin float-right {
+@mixin float-right() {
float: right !important;
+ @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
}
-@mixin float-none {
+@mixin float-none() {
float: none !important;
+ @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
}
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
-@mixin form-control-focus() {
+@mixin form-control-focus($ignore-warning: false) {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
- // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
}
+ @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
}
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+ @if ($state == "valid" or $state == "invalid") {
+ .was-validated #{if(&, "&", "")}:#{$state},
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ } @else {
+ #{if(&, "&", "")}.is-#{$state} {
+ @content;
+ }
+ }
+}
-@mixin form-validation-state($state, $color) {
+@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
- font-size: $form-feedback-font-size;
+ @include font-size($form-feedback-font-size);
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
+ left: 0;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
- font-size: $form-feedback-tooltip-font-size;
+ @include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: color-yiq($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
@include border-radius($form-feedback-tooltip-border-radius);
}
+ @include form-validation-state-selector($state) {
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+
.form-control {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
+ background-image: escape-svg($icon);
background-repeat: no-repeat;
- background-position: center right calc(#{$input-height-inner} / 4);
- background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
-
- @if $state == "valid" {
- background-image: $form-feedback-icon-valid;
- } @else {
- background-image: $form-feedback-icon-invalid;
- }
+ background-position: right $input-height-inner-quarter center;
+ background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
- background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.custom-select {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
- $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
padding-right: $custom-select-feedback-icon-padding-right;
- background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+ background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
-
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
- }
- }
-
-
- .form-control-file {
- .was-validated &:#{$state},
- &.is-#{$state} {
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
}
}
.form-check-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
~ .form-check-label {
color: $color;
}
}
.custom-control-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
~ .custom-control-label {
color: $color;
}
}
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
-
&:checked {
~ .custom-control-label::before {
border-color: lighten($color, 10%);
// custom file
.custom-file-input {
- .was-validated &:#{$state},
- &.is-#{$state} {
+ @include form-validation-state-selector($state) {
~ .custom-file-label {
border-color: $color;
}
- ~ .#{$state}-feedback,
- ~ .#{$state}-tooltip {
- display: block;
- }
-
&:focus {
~ .custom-file-label {
border-color: $color;
%grid-column {
position: relative;
width: 100%;
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
- // Allow columns to stretch full width below their breakpoints
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @extend %grid-column;
+ @if $columns > 0 {
+ // Allow columns to stretch full width below their breakpoints
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @extend %grid-column;
+ }
}
}
+
.col#{$infix},
.col#{$infix}-auto {
@extend %grid-column;
flex-grow: 1;
max-width: 100%;
}
+
+ @if $grid-row-columns > 0 {
+ @for $i from 1 through $grid-row-columns {
+ .row-cols#{$infix}-#{$i} {
+ @include row-cols($i);
+ }
+ }
+ }
+
.col#{$infix}-auto {
- flex: 0 0 auto;
- width: auto;
- max-width: 100%; // Reset earlier grid tiers
+ @include make-col-auto();
}
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @include make-col($i, $columns);
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
}
}
.order#{$infix}-#{$i} { order: $i; }
}
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
- @for $i from 0 through ($columns - 1) {
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
- .offset#{$infix}-#{$i} {
- @include make-col-offset($i, $columns);
+ @if $columns > 0 {
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
}
}
}
//
// Generate semantic grid columns with these mixins.
-@mixin make-container() {
+@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
margin-right: 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
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
max-width: $container-max-width;
}
}
+ @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
}
-@mixin make-row() {
- display: flex;
- flex-wrap: wrap;
- margin-right: ($grid-gutter-width / -2);
- margin-left: ($grid-gutter-width / -2);
-}
-
-@mixin make-col-ready() {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
+ padding-right: $gutter / 2;
+ padding-left: $gutter / 2;
}
@mixin make-col($size, $columns: $grid-columns) {
max-width: percentage($size / $columns);
}
+@mixin make-col-auto() {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: 100%; // Reset earlier grid tiers
+}
+
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
margin-left: if($num == 0, 0, percentage($num));
}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+ > * {
+ flex: 0 0 100% / $count;
+ max-width: 100% / $count;
+ }
+}
//
// Issue: https://github.com/twbs/bootstrap/issues/25195
-@mixin hover {
+@mixin hover() {
&:hover { @content; }
}
-@mixin hover-focus {
+@mixin hover-focus() {
&:hover,
&:focus {
@content;
}
}
-@mixin plain-hover-focus {
+@mixin plain-hover-focus() {
&,
&:hover,
&:focus {
}
}
-@mixin hover-focus-active {
+@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
//
// Keep images from scaling beyond the width of their parents.
-@mixin img-fluid {
+@mixin img-fluid() {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
//
// Short retina mixin for setting background-image and -size.
-// stylelint-disable indentation, media-query-list-comma-newline-after
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
background-image: url($file-1x);
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
@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-size: $width-1x $height-1x;
}
+ @include deprecate("`img-retina()`", "v4.3.0", "v5");
}
background-color: $background;
&.list-group-item-action {
- @include hover-focus {
+ @include hover-focus() {
color: $color;
background-color: darken($background, 5%);
}
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
-@mixin list-unstyled {
+@mixin list-unstyled() {
padding-left: 0;
list-style: none;
}
//
// Dividers (basically an hr) within dropdowns and nav lists
-@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
+@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
height: 0;
margin: $margin-y 0;
overflow: hidden;
border-top: 1px solid $color;
+ @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
}
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
- font-size: $font-size;
+ @include font-size($font-size);
line-height: $line-height;
}
-@mixin reset-text {
+@mixin reset-text() {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal;
font-weight: $font-weight-normal;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
- text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
+ text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
// 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 {
+@mixin sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
+ margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
//
// Credit: HTML5 Boilerplate
-@mixin sr-only-focusable {
+@mixin sr-only-focusable() {
&:active,
&:focus {
position: static;
@mixin size($width, $height: $width) {
width: $width;
height: $height;
+ @include deprecate("`size()`", "v4.3.0", "v5");
}
$hover-background: darken($background, 5%);
.table-#{$state} {
- @include hover {
+ @include hover() {
background-color: $hover-background;
> td,
// Typography
-@mixin text-emphasis-variant($parent, $color) {
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
#{$parent} {
color: $color !important;
}
- a#{$parent} {
- @include hover-focus {
- color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+ @if $emphasized-link-hover-darken-percentage != 0 {
+ a#{$parent} {
+ @include hover-focus() {
+ color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+ }
}
}
+ @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
}
background-color: transparent;
border: 0;
- @if ($ignore-warning != true) {
- @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
- }
+ @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
}
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
@mixin transition($transition...) {
+ @if length($transition) == 0 {
+ $transition: $transition-base;
+ }
+
+ @if length($transition) > 1 {
+ @each $value in $transition {
+ @if $value == null or $value == none {
+ @warn "The keyword 'none' or 'null' must be used as a single argument.";
+ }
+ }
+ }
+
@if $enable-transitions {
- @if length($transition) == 0 {
- transition: $transition-base;
- } @else {
+ @if nth($transition, 1) != null {
transition: $transition;
}
- }
- @if $enable-prefers-reduced-motion-media-query {
- @media screen and (prefers-reduced-motion: reduce) {
- transition: none;
+ @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
}
}
}
@mixin invisible($visibility) {
visibility: $visibility !important;
+ @include deprecate("`invisible()`", "v4.3.0", "v5");
}
// stylelint-disable declaration-no-important
@each $color, $value in $theme-colors {
- @include bg-variant(".bg-#{$color}", $value);
+ @include bg-variant(".bg-#{$color}", $value, true);
}
@if $enable-gradients {
@each $color, $value in $theme-colors {
- @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
}
}
-// stylelint-disable declaration-no-important
+// stylelint-disable property-disallowed-list, declaration-no-important
//
// Border
// Border-radius
//
+.rounded-sm {
+ border-radius: $border-radius-sm !important;
+}
+
.rounded {
border-radius: $border-radius !important;
}
+
.rounded-top {
border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important;
}
+
.rounded-right {
border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important;
}
+
.rounded-bottom {
border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
+
.rounded-left {
border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
+.rounded-lg {
+ border-radius: $border-radius-lg !important;
+}
+
.rounded-circle {
border-radius: 50% !important;
}
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- .d#{$infix}-none { display: none !important; }
- .d#{$infix}-inline { display: inline !important; }
- .d#{$infix}-inline-block { display: inline-block !important; }
- .d#{$infix}-block { display: block !important; }
- .d#{$infix}-table { display: table !important; }
- .d#{$infix}-table-row { display: table-row !important; }
- .d#{$infix}-table-cell { display: table-cell !important; }
- .d#{$infix}-flex { display: flex !important; }
- .d#{$infix}-inline-flex { display: inline-flex !important; }
+ @each $value in $displays {
+ .d#{$infix}-#{$value} { display: $value !important; }
+ }
}
}
//
@media print {
- .d-print-none { display: none !important; }
- .d-print-inline { display: inline !important; }
- .d-print-inline-block { display: inline-block !important; }
- .d-print-block { display: block !important; }
- .d-print-table { display: table !important; }
- .d-print-table-row { display: table-row !important; }
- .d-print-table-cell { display: table-cell !important; }
- .d-print-flex { display: flex !important; }
- .d-print-inline-flex { display: inline-flex !important; }
+ @each $value in $displays {
+ .d-print-#{$value} { display: $value !important; }
+ }
}
+// stylelint-disable declaration-no-important
+
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- .float#{$infix}-left { @include float-left; }
- .float#{$infix}-right { @include float-right; }
- .float#{$infix}-none { @include float-none; }
+ .float#{$infix}-left { float: left !important; }
+ .float#{$infix}-right { float: right !important; }
+ .float#{$infix}-none { float: none !important; }
}
}
--- /dev/null
+// stylelint-disable declaration-no-important
+
+@each $value in $user-selects {
+ .user-select-#{$value} { user-select: $value !important; }
+}
--- /dev/null
+//
+// Stretched link
+//
+
+.stretched-link {
+ &::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ // Just in case `pointer-events: none` is set on a parent
+ pointer-events: auto;
+ content: "";
+ // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
+ background-color: rgba(0, 0, 0, 0);
+ }
+}
// Text
//
-.text-monospace { font-family: $font-family-monospace; }
+.text-monospace { font-family: $font-family-monospace !important; }
// Alignment
.text-justify { text-align: justify !important; }
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
-.text-truncate { @include text-truncate; }
+.text-truncate { @include text-truncate(); }
// Responsive alignment
.text-white { color: $white !important; }
@each $color, $value in $theme-colors {
- @include text-emphasis-variant(".text-#{$color}", $value);
+ @include text-emphasis-variant(".text-#{$color}", $value, true);
}
.text-body { color: $body-color !important; }
.text-decoration-none { text-decoration: none !important; }
+.text-break {
+ 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
.text-reset { color: inherit !important; }
+// stylelint-disable declaration-no-important
+
//
// Visibility utilities
//
.visible {
- @include invisible(visible);
+ visibility: visible !important;
}
.invisible {
- @include invisible(hidden);
+ visibility: hidden !important;
}
--- /dev/null
+// stylelint-disable property-blacklist, scss/dollar-variable-default
+
+// SCSS RFS mixin
+//
+// Automated font-resizing
+//
+// See https://github.com/twbs/rfs
+
+// Configuration
+
+// Base font size
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+// Resize font-size based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+ @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
+}
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: unit($rfs-base-font-size);
+
+// Remove px-unit from $rfs-base-font-size for calculations
+@if $rfs-base-font-size-unit == "px" {
+ $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+}
+@else if $rfs-base-font-size-unit == "rem" {
+ $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == "px" {
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+}
+@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+}
+
+// Responsive font-size mixin
+@mixin rfs($fs, $important: false) {
+ // Cache $fs unit
+ $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+
+ // Add !important suffix if needed
+ $rfs-suffix: if($important, " !important", "");
+
+ // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
+ font-size: #{$fs}#{$rfs-suffix};
+ }
+ @else {
+ // Variables for storing static and fluid rescaling
+ $rfs-static: null;
+ $rfs-fluid: null;
+
+ // Remove px-unit from $fs for calculations
+ @if $fs-unit == "px" {
+ $fs: $fs / ($fs * 0 + 1);
+ }
+ @else if $fs-unit == "rem" {
+ $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+ }
+
+ // Set default font-size
+ @if $rfs-font-size-unit == rem {
+ $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+ }
+ @else if $rfs-font-size-unit == px {
+ $rfs-static: #{$fs}px#{$rfs-suffix};
+ }
+ @else {
+ @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+ }
+
+ // Only add media query if font-size is bigger as the minimum font-size
+ // If $rfs-factor == 1, no rescaling will take place
+ @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
+ $min-width: null;
+ $variable-unit: null;
+
+ // Calculate minimum font-size for given font-size
+ $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
+
+ // Calculate difference between given font-size and minimum font-size for given font-size
+ $fs-diff: $fs - $fs-min;
+
+ // Base font-size formatting
+ // No need to check if the unit is valid, because we did that before
+ $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+
+ // If two-dimensional, use smallest of screen width and height
+ $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+ // Calculate the variable width between 0 and $rfs-breakpoint
+ $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+
+ // Set the calculated font-size.
+ $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+ }
+
+ // Rendering
+ @if $rfs-fluid == null {
+ // Only render static font-size if no fluid font-size is available
+ font-size: $rfs-static;
+ }
+ @else {
+ $mq-value: null;
+
+ // RFS breakpoint formatting
+ @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
+ $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
+ }
+ @else if $rfs-breakpoint-unit == px {
+ $mq-value: #{$rfs-breakpoint}px;
+ }
+ @else {
+ @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+ }
+
+ @if $rfs-class == "disable" {
+ // Adding an extra class increases specificity,
+ // which prevents the media query to override the font size
+ &,
+ .disable-responsive-font-size &,
+ &.disable-responsive-font-size {
+ font-size: $rfs-static;
+ }
+ }
+ @else {
+ font-size: $rfs-static;
+ }
+
+ @if $rfs-two-dimensional {
+ @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+ @if $rfs-class == "enable" {
+ .enable-responsive-font-size &,
+ &.enable-responsive-font-size {
+ font-size: $rfs-fluid;
+ }
+ }
+ @else {
+ font-size: $rfs-fluid;
+ }
+
+ @if $rfs-safari-iframe-resize-bug-fix {
+ // stylelint-disable-next-line length-zero-no-unit
+ min-width: 0vw;
+ }
+ }
+ }
+ @else {
+ @media (max-width: #{$mq-value}) {
+ @if $rfs-class == "enable" {
+ .enable-responsive-font-size &,
+ &.enable-responsive-font-size {
+ font-size: $rfs-fluid;
+ }
+ }
+ @else {
+ font-size: $rfs-fluid;
+ }
+
+ @if $rfs-safari-iframe-resize-bug-fix {
+ // stylelint-disable-next-line length-zero-no-unit
+ min-width: 0vw;
+ }
+ }
+ }
+ }
+ }
+}
+
+// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
+@mixin font-size($fs, $important: false) {
+ @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+ @include rfs($fs, $important);
+}
projects / roojs1 / commitdiff