mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-30 08:50:51 +01:00
Update to bootstrap 5
This commit is contained in:
Bill
parent
1aff81b5e4
commit
7bc06b0359
BIN
src/assets/images/icons/close.png
Normal file
BIN
src/assets/images/icons/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
116
src/assets/styles/bootstrap/_accordion.scss
Normal file
116
src/assets/styles/bootstrap/_accordion.scss
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: $accordion-button-padding-y $accordion-button-padding-x;
|
||||||
|
@include font-size($font-size-base);
|
||||||
|
color: $accordion-button-color;
|
||||||
|
text-align: left; // Reset button style
|
||||||
|
background-color: $accordion-button-bg;
|
||||||
|
border: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
overflow-anchor: none;
|
||||||
|
@include transition($accordion-transition);
|
||||||
|
|
||||||
|
&:not(.collapsed) {
|
||||||
|
color: $accordion-button-active-color;
|
||||||
|
background-color: $accordion-button-active-bg;
|
||||||
|
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background-image: escape-svg($accordion-button-active-icon);
|
||||||
|
transform: $accordion-icon-transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accordion icon
|
||||||
|
&::after {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: $accordion-icon-width;
|
||||||
|
height: $accordion-icon-width;
|
||||||
|
margin-left: auto;
|
||||||
|
content: "";
|
||||||
|
background-image: escape-svg($accordion-button-icon);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: $accordion-icon-width;
|
||||||
|
@include transition($accordion-icon-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 3;
|
||||||
|
border-color: $accordion-button-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $accordion-button-focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-item {
|
||||||
|
margin-bottom: -$accordion-border-width;
|
||||||
|
background-color: $accordion-bg;
|
||||||
|
border: $accordion-border-width solid $accordion-border-color;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
@include border-top-radius($accordion-border-radius);
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
@include border-top-radius($accordion-inner-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only set a border-radius on the last item if the accordion is collapsed
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
@include border-bottom-radius($accordion-border-radius);
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
&.collapsed {
|
||||||
|
@include border-bottom-radius($accordion-inner-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-collapse {
|
||||||
|
@include border-bottom-radius($accordion-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-body {
|
||||||
|
padding: $accordion-body-padding-y $accordion-body-padding-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flush accordion items
|
||||||
|
//
|
||||||
|
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||||
|
|
||||||
|
.accordion-flush {
|
||||||
|
.accordion-collapse {
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-item {
|
||||||
|
border-right: 0;
|
||||||
|
border-left: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
|
||||||
|
&:first-child { border-top: 0; }
|
||||||
|
&:last-child { border-bottom: 0; }
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -27,26 +27,31 @@
|
|||||||
// Expand the right padding and account for the close button's positioning.
|
// Expand the right padding and account for the close button's positioning.
|
||||||
|
|
||||||
.alert-dismissible {
|
.alert-dismissible {
|
||||||
padding-right: $close-font-size + $alert-padding-x * 2;
|
padding-right: $alert-dismissible-padding-r;
|
||||||
|
|
||||||
// Adjust close link position
|
// Adjust close link position
|
||||||
.close {
|
.btn-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2;
|
z-index: $stretched-link-z-index + 1;
|
||||||
padding: $alert-padding-y $alert-padding-x;
|
padding: $alert-padding-y * 1.25 $alert-padding-x;
|
||||||
color: inherit;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Alternate styles
|
// scss-docs-start alert-modifiers
|
||||||
//
|
|
||||||
// Generate contextual modifier classes for colorizing the alert.
|
// Generate contextual modifier classes for colorizing the alert.
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $state, $value in $theme-colors {
|
||||||
.alert-#{$color} {
|
$alert-background: shift-color($value, $alert-bg-scale);
|
||||||
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
|
$alert-border: shift-color($value, $alert-border-scale);
|
||||||
|
$alert-color: shift-color($value, $alert-color-scale);
|
||||||
|
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
|
||||||
|
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
|
||||||
|
}
|
||||||
|
.alert-#{$state} {
|
||||||
|
@include alert-variant($alert-background, $alert-border, $alert-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end alert-modifiers
|
||||||
|
|||||||
@ -8,17 +8,13 @@
|
|||||||
padding: $badge-padding-y $badge-padding-x;
|
padding: $badge-padding-y $badge-padding-x;
|
||||||
@include font-size($badge-font-size);
|
@include font-size($badge-font-size);
|
||||||
font-weight: $badge-font-weight;
|
font-weight: $badge-font-weight;
|
||||||
|
line-height: 1;
|
||||||
|
color: $badge-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
@include border-radius($badge-border-radius);
|
@include border-radius($badge-border-radius);
|
||||||
@include transition($badge-transition);
|
@include gradient-bg();
|
||||||
|
|
||||||
@at-root a#{&} {
|
|
||||||
@include hover-focus() {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Empty badges collapse automatically
|
// Empty badges collapse automatically
|
||||||
&:empty {
|
&:empty {
|
||||||
@ -29,24 +25,5 @@
|
|||||||
// Quick fix for badges in buttons
|
// Quick fix for badges in buttons
|
||||||
.btn .badge {
|
.btn .badge {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
top: -1px;
|
||||||
|
|
||||||
// Pill badges
|
|
||||||
//
|
|
||||||
// Make them extra rounded with a modifier to replace v3's badges.
|
|
||||||
|
|
||||||
.badge-pill {
|
|
||||||
padding-right: $badge-pill-padding-x;
|
|
||||||
padding-left: $badge-pill-padding-x;
|
|
||||||
@include border-radius($badge-pill-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
//
|
|
||||||
// Contextual variations (linked badges get darker on :hover).
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
.badge-#{$color} {
|
|
||||||
@include badge-variant($value);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,34 +10,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
display: flex;
|
|
||||||
|
|
||||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||||
+ .breadcrumb-item {
|
+ .breadcrumb-item {
|
||||||
padding-left: $breadcrumb-item-padding;
|
padding-left: $breadcrumb-item-padding-x;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
float: left; // Suppress inline spacings and underlining of the separator
|
||||||
padding-right: $breadcrumb-item-padding;
|
padding-right: $breadcrumb-item-padding-x;
|
||||||
color: $breadcrumb-divider-color;
|
color: $breadcrumb-divider-color;
|
||||||
content: escape-svg($breadcrumb-divider);
|
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
|
||||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
|
||||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
|
||||||
//
|
|
||||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
|
||||||
// underline and then immediately remove it.
|
|
||||||
+ .breadcrumb-item:hover::before {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
// stylelint-disable-next-line no-duplicate-selectors
|
|
||||||
+ .breadcrumb-item:hover::before {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $breadcrumb-active-color;
|
color: $breadcrumb-active-color;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
// stylelint-disable selector-no-qualifying-type
|
|
||||||
|
|
||||||
// Make the div behave like a button
|
// Make the div behave like a button
|
||||||
.btn-group,
|
.btn-group,
|
||||||
.btn-group-vertical {
|
.btn-group-vertical {
|
||||||
@ -10,17 +8,17 @@
|
|||||||
> .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
// the borders properly
|
// the borders properly
|
||||||
@include hover() {
|
> .btn-check:checked + .btn,
|
||||||
z-index: 1;
|
> .btn-check:focus + .btn,
|
||||||
}
|
> .btn:hover,
|
||||||
&:focus,
|
> .btn:focus,
|
||||||
&:active,
|
> .btn:active,
|
||||||
&.active {
|
> .btn.active {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -45,12 +43,17 @@
|
|||||||
// Reset rounded corners
|
// Reset rounded corners
|
||||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||||
> .btn-group:not(:last-child) > .btn {
|
> .btn-group:not(:last-child) > .btn {
|
||||||
@include border-right-radius(0);
|
@include border-end-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .btn:not(:first-child),
|
// The left radius should be 0 if the button is:
|
||||||
|
// - the "third or more" child
|
||||||
|
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
|
||||||
|
// - part of a btn-group which isn't the first child
|
||||||
|
> .btn:nth-child(n + 3),
|
||||||
|
> :not(.btn-check) + .btn,
|
||||||
> .btn-group:not(:first-child) > .btn {
|
> .btn-group:not(:first-child) > .btn {
|
||||||
@include border-left-radius(0);
|
@include border-start-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,11 +75,11 @@
|
|||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
.dropup &::after,
|
.dropup &::after,
|
||||||
.dropright &::after {
|
.dropend &::after {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropleft &::before {
|
.dropstart &::before {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -129,35 +132,8 @@
|
|||||||
@include border-bottom-radius(0);
|
@include border-bottom-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .btn:not(:first-child),
|
> .btn ~ .btn,
|
||||||
> .btn-group:not(:first-child) > .btn {
|
> .btn-group:not(:first-child) > .btn {
|
||||||
@include border-top-radius(0);
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Checkbox and radio options
|
|
||||||
//
|
|
||||||
// In order to support the browser's form validation feedback, powered by the
|
|
||||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
|
||||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
|
||||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
|
||||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
|
||||||
// This way, we ensure a DOM element is visible to position the popover from.
|
|
||||||
//
|
|
||||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
|
||||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
|
||||||
|
|
||||||
.btn-group-toggle {
|
|
||||||
> .btn,
|
|
||||||
> .btn-group > .btn {
|
|
||||||
margin-bottom: 0; // Override default `<label>` value
|
|
||||||
|
|
||||||
input[type="radio"],
|
|
||||||
input[type="checkbox"] {
|
|
||||||
position: absolute;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,61 +1,53 @@
|
|||||||
// stylelint-disable selector-no-qualifying-type
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: inline-block;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-family: $btn-font-family;
|
font-family: $btn-font-family;
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
|
line-height: $btn-line-height;
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: if($link-decoration == none, null, none);
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
white-space: $btn-white-space;
|
white-space: $btn-white-space;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: if($enable-button-pointers, pointer, null);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: $btn-border-width solid transparent;
|
border: $btn-border-width solid transparent;
|
||||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
|
||||||
@include transition($btn-transition);
|
@include transition($btn-transition);
|
||||||
|
|
||||||
@include hover() {
|
&:hover {
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-decoration: none;
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
.btn-check:focus + &,
|
||||||
&.focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: $btn-focus-box-shadow;
|
box-shadow: $btn-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled comes first so active can properly restyle
|
.btn-check:checked + &,
|
||||||
|
.btn-check:active + &,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
fieldset:disabled & {
|
||||||
|
pointer-events: none;
|
||||||
opacity: $btn-disabled-opacity;
|
opacity: $btn-disabled-opacity;
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled) {
|
|
||||||
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
@include box-shadow($btn-active-box-shadow);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Future-proof disabling of clicks on `<a>` elements
|
|
||||||
a.btn.disabled,
|
|
||||||
fieldset:disabled a.btn {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -63,9 +55,10 @@ fieldset:disabled a.btn {
|
|||||||
// Alternate buttons
|
// Alternate buttons
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// scss-docs-start btn-variant-loops
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
.btn-#{$color} {
|
.btn-#{$color} {
|
||||||
@include button-variant($value, $black);
|
@include button-variant($value, $value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,6 +67,7 @@ fieldset:disabled a.btn {
|
|||||||
@include button-outline-variant($value);
|
@include button-outline-variant($value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end btn-variant-loops
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -83,23 +77,21 @@ fieldset:disabled a.btn {
|
|||||||
// Make a button look and behave like a link
|
// Make a button look and behave like a link
|
||||||
.btn-link {
|
.btn-link {
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
color: $link-color;
|
color: $btn-link-color;
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
|
|
||||||
@include hover() {
|
&:hover {
|
||||||
color: $link-hover-color;
|
color: $btn-link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus {
|
||||||
&.focus {
|
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $btn-link-disabled-color;
|
color: $btn-link-disabled-color;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// No need for an active state here
|
// No need for an active state here
|
||||||
@ -111,33 +103,9 @@ fieldset:disabled a.btn {
|
|||||||
//
|
//
|
||||||
|
|
||||||
.btn-lg {
|
.btn-lg {
|
||||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
|
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Block button
|
|
||||||
//
|
|
||||||
|
|
||||||
.btn-block {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
// Vertically space out multiple block buttons
|
|
||||||
+ .btn-block {
|
|
||||||
margin-top: $btn-block-spacing-y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Specificity overrides
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="button"] {
|
|
||||||
&.btn-block {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,7 +13,6 @@
|
|||||||
background-clip: border-box;
|
background-clip: border-box;
|
||||||
border: $card-border-width solid $card-border-color;
|
border: $card-border-width solid $card-border-color;
|
||||||
@include border-radius($card-border-radius);
|
@include border-radius($card-border-radius);
|
||||||
@include box-shadow($card-shadow);
|
|
||||||
|
|
||||||
> hr {
|
> hr {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
@ -47,19 +46,16 @@
|
|||||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
// Workaround for the image size bug in IE
|
padding: $card-spacer-y $card-spacer-x;
|
||||||
// See: https://github.com/twbs/bootstrap/pull/28855
|
|
||||||
min-height: 1px;
|
|
||||||
padding: $card-spacer-x;
|
|
||||||
color: $card-color;
|
color: $card-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
margin-bottom: $card-spacer-y;
|
margin-bottom: $card-title-spacer-y;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-subtitle {
|
.card-subtitle {
|
||||||
margin-top: -$card-spacer-y / 2;
|
margin-top: -$card-title-spacer-y / 2;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,7 +64,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-link {
|
.card-link {
|
||||||
@include hover() {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,11 +78,11 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
padding: $card-spacer-y $card-spacer-x;
|
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||||
color: $card-cap-color;
|
color: $card-cap-color;
|
||||||
background-color: $card-cap-bg;
|
background-color: $card-cap-bg;
|
||||||
border-bottom: $card-cap-border-width solid $card-cap-border-color;
|
border-bottom: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||||
@ -94,10 +90,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
padding: $card-spacer-y $card-spacer-x;
|
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||||
color: $card-cap-color;
|
color: $card-cap-color;
|
||||||
background-color: $card-cap-bg;
|
background-color: $card-cap-bg;
|
||||||
border-top: $card-cap-border-width solid $card-cap-border-color;
|
border-top: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||||
@ -110,15 +106,22 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.card-header-tabs {
|
.card-header-tabs {
|
||||||
margin-right: -$card-spacer-x / 2;
|
margin-right: -$card-cap-padding-x / 2;
|
||||||
margin-bottom: -$card-spacer-y;
|
margin-bottom: -$card-cap-padding-y;
|
||||||
margin-left: -$card-spacer-x / 2;
|
margin-left: -$card-cap-padding-x / 2;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
||||||
|
@if $nav-tabs-link-active-bg != $card-bg {
|
||||||
|
.nav-link.active {
|
||||||
|
background-color: $card-bg;
|
||||||
|
border-bottom-color: $card-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header-pills {
|
.card-header-pills {
|
||||||
margin-right: -$card-spacer-x / 2;
|
margin-right: -$card-cap-padding-x / 2;
|
||||||
margin-left: -$card-spacer-x / 2;
|
margin-left: -$card-cap-padding-x / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card image
|
// Card image
|
||||||
@ -135,7 +138,6 @@
|
|||||||
.card-img,
|
.card-img,
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-img-bottom {
|
.card-img-bottom {
|
||||||
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
|
|
||||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,30 +152,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Card deck
|
|
||||||
|
|
||||||
.card-deck {
|
|
||||||
.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 {
|
|
||||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
|
||||||
flex: 1 0 0%;
|
|
||||||
margin-right: $card-deck-margin;
|
|
||||||
margin-bottom: 0; // Override the default
|
|
||||||
margin-left: $card-deck-margin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Card groups
|
// Card groups
|
||||||
//
|
//
|
||||||
@ -203,7 +181,7 @@
|
|||||||
// Handle rounded corners
|
// Handle rounded corners
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
@include border-right-radius(0);
|
@include border-end-radius(0);
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-header {
|
.card-header {
|
||||||
@ -218,7 +196,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
@include border-left-radius(0);
|
@include border-start-radius(0);
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-header {
|
.card-header {
|
||||||
@ -235,53 +213,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Columns
|
|
||||||
//
|
|
||||||
|
|
||||||
.card-columns {
|
|
||||||
.card {
|
|
||||||
margin-bottom: $card-columns-margin;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
column-count: $card-columns-count;
|
|
||||||
column-gap: $card-columns-gap;
|
|
||||||
orphans: 1;
|
|
||||||
widows: 1;
|
|
||||||
|
|
||||||
.card {
|
|
||||||
display: inline-block; // Don't let them vertically span multiple columns
|
|
||||||
width: 100%; // Don't let their width change
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Accordion
|
|
||||||
//
|
|
||||||
|
|
||||||
.accordion {
|
|
||||||
overflow-anchor: none;
|
|
||||||
|
|
||||||
> .card {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
border-bottom: 0;
|
|
||||||
@include border-bottom-radius(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
|
||||||
@include border-top-radius(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .card-header {
|
|
||||||
@include border-radius(0);
|
|
||||||
margin-bottom: -$card-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -3,12 +3,12 @@
|
|||||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||||
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
||||||
// we're preventing all actions instead
|
// we're preventing all actions instead
|
||||||
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
|
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
|
||||||
// the active slide is heading.
|
// the active slide is heading.
|
||||||
// 3. .active.carousel-item is the current slide.
|
// 3. .active.carousel-item is the current slide.
|
||||||
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
|
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
|
||||||
// slide in its in-transition state. Only one of these occurs at a time.
|
// slide in its in-transition state. Only one of these occurs at a time.
|
||||||
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
|
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
|
||||||
// is the upcoming slide in transition.
|
// is the upcoming slide in transition.
|
||||||
|
|
||||||
.carousel {
|
.carousel {
|
||||||
@ -42,16 +42,19 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item-next:not(.carousel-item-left),
|
/* rtl:begin:ignore */
|
||||||
.active.carousel-item-right {
|
.carousel-item-next:not(.carousel-item-start),
|
||||||
|
.active.carousel-item-end {
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item-prev:not(.carousel-item-right),
|
.carousel-item-prev:not(.carousel-item-end),
|
||||||
.active.carousel-item-left {
|
.active.carousel-item-start {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* rtl:end:ignore */
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Alternate transitions
|
// Alternate transitions
|
||||||
@ -65,14 +68,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item.active,
|
.carousel-item.active,
|
||||||
.carousel-item-next.carousel-item-left,
|
.carousel-item-next.carousel-item-start,
|
||||||
.carousel-item-prev.carousel-item-right {
|
.carousel-item-prev.carousel-item-end {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active.carousel-item-left,
|
.active.carousel-item-start,
|
||||||
.active.carousel-item-right {
|
.active.carousel-item-end {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@include transition(opacity 0s $carousel-transition-duration);
|
@include transition(opacity 0s $carousel-transition-duration);
|
||||||
@ -95,13 +98,17 @@
|
|||||||
align-items: center; // 2. vertically center contents
|
align-items: center; // 2. vertically center contents
|
||||||
justify-content: center; // 3. horizontally center contents
|
justify-content: center; // 3. horizontally center contents
|
||||||
width: $carousel-control-width;
|
width: $carousel-control-width;
|
||||||
|
padding: 0;
|
||||||
color: $carousel-control-color;
|
color: $carousel-control-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
opacity: $carousel-control-opacity;
|
opacity: $carousel-control-opacity;
|
||||||
@include transition($carousel-control-transition);
|
@include transition($carousel-control-transition);
|
||||||
|
|
||||||
// Hover/focus state
|
// Hover/focus state
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $carousel-control-color;
|
color: $carousel-control-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
@ -110,15 +117,11 @@
|
|||||||
}
|
}
|
||||||
.carousel-control-prev {
|
.carousel-control-prev {
|
||||||
left: 0;
|
left: 0;
|
||||||
@if $enable-gradients {
|
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
|
||||||
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.carousel-control-next {
|
.carousel-control-next {
|
||||||
right: 0;
|
right: 0;
|
||||||
@if $enable-gradients {
|
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
|
||||||
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icons for within
|
// Icons for within
|
||||||
@ -127,8 +130,19 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: $carousel-control-icon-width;
|
width: $carousel-control-icon-width;
|
||||||
height: $carousel-control-icon-width;
|
height: $carousel-control-icon-width;
|
||||||
background: no-repeat 50% / 100% 100%;
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* rtl:options: {
|
||||||
|
"autoRename": true,
|
||||||
|
"stringMap":[ {
|
||||||
|
"name" : "prev-next",
|
||||||
|
"search" : "prev",
|
||||||
|
"replace" : "next"
|
||||||
|
} ]
|
||||||
|
} */
|
||||||
.carousel-control-prev-icon {
|
.carousel-control-prev-icon {
|
||||||
background-image: escape-svg($carousel-control-prev-icon-bg);
|
background-image: escape-svg($carousel-control-prev-icon-bg);
|
||||||
}
|
}
|
||||||
@ -136,46 +150,48 @@
|
|||||||
background-image: escape-svg($carousel-control-next-icon-bg);
|
background-image: escape-svg($carousel-control-next-icon-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Optional indicator pips/controls
|
||||||
// Optional indicator pips
|
|
||||||
//
|
//
|
||||||
// Add an ordered list with the following class and add a list item for each
|
// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
|
||||||
// slide your carousel holds.
|
// like a button) with data-bs-target for each slide your carousel holds.
|
||||||
|
|
||||||
.carousel-indicators {
|
.carousel-indicators {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 15;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: 0; // override <ol> default
|
padding: 0;
|
||||||
// Use the .carousel-control's width as margin so we don't overlay those
|
// Use the .carousel-control's width as margin so we don't overlay those
|
||||||
margin-right: $carousel-control-width;
|
margin-right: $carousel-control-width;
|
||||||
|
margin-bottom: 1rem;
|
||||||
margin-left: $carousel-control-width;
|
margin-left: $carousel-control-width;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
[data-bs-target] {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
width: $carousel-indicator-width;
|
width: $carousel-indicator-width;
|
||||||
height: $carousel-indicator-height;
|
height: $carousel-indicator-height;
|
||||||
|
padding: 0;
|
||||||
margin-right: $carousel-indicator-spacer;
|
margin-right: $carousel-indicator-spacer;
|
||||||
margin-left: $carousel-indicator-spacer;
|
margin-left: $carousel-indicator-spacer;
|
||||||
text-indent: -999px;
|
text-indent: -999px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: $carousel-indicator-active-bg;
|
background-color: $carousel-indicator-active-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
border: 0;
|
||||||
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
||||||
border-top: $carousel-indicator-hit-area-height solid transparent;
|
border-top: $carousel-indicator-hit-area-height solid transparent;
|
||||||
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
||||||
opacity: .5;
|
opacity: $carousel-indicator-opacity;
|
||||||
@include transition($carousel-indicator-transition);
|
@include transition($carousel-indicator-transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
opacity: 1;
|
opacity: $carousel-indicator-active-opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -187,11 +203,27 @@
|
|||||||
.carousel-caption {
|
.carousel-caption {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: (100% - $carousel-caption-width) / 2;
|
right: (100% - $carousel-caption-width) / 2;
|
||||||
bottom: 20px;
|
bottom: $carousel-caption-spacer;
|
||||||
left: (100% - $carousel-caption-width) / 2;
|
left: (100% - $carousel-caption-width) / 2;
|
||||||
z-index: 10;
|
padding-top: $carousel-caption-padding-y;
|
||||||
padding-top: 20px;
|
padding-bottom: $carousel-caption-padding-y;
|
||||||
padding-bottom: 20px;
|
|
||||||
color: $carousel-caption-color;
|
color: $carousel-caption-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dark mode carousel
|
||||||
|
|
||||||
|
.carousel-dark {
|
||||||
|
.carousel-control-prev-icon,
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
filter: $carousel-dark-control-icon-filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-indicators [data-bs-target] {
|
||||||
|
background-color: $carousel-dark-indicator-active-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-caption {
|
||||||
|
color: $carousel-dark-caption-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,42 +1,40 @@
|
|||||||
.close {
|
// transparent background and border properties included for button version.
|
||||||
float: right;
|
|
||||||
@include font-size($close-font-size);
|
|
||||||
font-weight: $close-font-weight;
|
|
||||||
line-height: 1;
|
|
||||||
color: $close-color;
|
|
||||||
text-shadow: $close-text-shadow;
|
|
||||||
opacity: .5;
|
|
||||||
outline: none !important;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
// Override <a>'s hover style
|
|
||||||
@include hover() {
|
|
||||||
color: $close-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled) {
|
|
||||||
@include hover-focus() {
|
|
||||||
opacity: .75;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Additional properties for button version
|
|
||||||
// iOS requires the button element instead of an anchor tag.
|
// iOS requires the button element instead of an anchor tag.
|
||||||
// If you want the anchor version, it requires `href="#"`.
|
// If you want the anchor version, it requires `href="#"`.
|
||||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||||
|
|
||||||
// stylelint-disable-next-line selector-no-qualifying-type
|
.btn-close {
|
||||||
button.close {
|
box-sizing: content-box;
|
||||||
padding: 0;
|
width: $btn-close-width;
|
||||||
background-color: transparent;
|
height: $btn-close-height;
|
||||||
border: 0;
|
padding: $btn-close-padding-y $btn-close-padding-x;
|
||||||
|
color: $btn-close-color;
|
||||||
|
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
||||||
|
border: 0; // for button elements
|
||||||
|
@include border-radius();
|
||||||
|
opacity: $btn-close-opacity;
|
||||||
|
|
||||||
|
// Override <a>'s hover style
|
||||||
|
&:hover {
|
||||||
|
color: $btn-close-color;
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: $btn-close-hover-opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $btn-close-focus-shadow;
|
||||||
|
opacity: $btn-close-focus-opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
opacity: $btn-close-disabled-opacity;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Future-proof disabling of clicks on `<a>` elements
|
.btn-close-white {
|
||||||
|
filter: $btn-close-white-filter;
|
||||||
// stylelint-disable-next-line selector-no-qualifying-type
|
|
||||||
a.close.disabled {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +0,0 @@
|
|||||||
// Inline code
|
|
||||||
code {
|
|
||||||
@include font-size($code-font-size);
|
|
||||||
color: $code-color;
|
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
// Streamline the style when inside anchors to avoid broken underline and more
|
|
||||||
a > & {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// User input typically entered via keyboard
|
|
||||||
kbd {
|
|
||||||
padding: $kbd-padding-y $kbd-padding-x;
|
|
||||||
@include font-size($kbd-font-size);
|
|
||||||
color: $kbd-color;
|
|
||||||
background-color: $kbd-bg;
|
|
||||||
@include border-radius($border-radius-sm);
|
|
||||||
@include box-shadow($kbd-box-shadow);
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
padding: 0;
|
|
||||||
@include font-size(100%);
|
|
||||||
font-weight: $nested-kbd-font-weight;
|
|
||||||
@include box-shadow(none);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blocks of code
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
@include font-size($code-font-size);
|
|
||||||
color: $pre-color;
|
|
||||||
|
|
||||||
// Account for some code outputs that place code tags in pre tags
|
|
||||||
code {
|
|
||||||
@include font-size(inherit);
|
|
||||||
color: inherit;
|
|
||||||
word-break: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Enable scrollable blocks of code
|
|
||||||
.pre-scrollable {
|
|
||||||
max-height: $pre-scrollable-max-height;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
41
src/assets/styles/bootstrap/_containers.scss
Normal file
41
src/assets/styles/bootstrap/_containers.scss
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
// Container widths
|
||||||
|
//
|
||||||
|
// Set the container width, and override it for fixed navbars in media queries.
|
||||||
|
|
||||||
|
@if $enable-grid-classes {
|
||||||
|
// Single container class with breakpoint max-widths
|
||||||
|
.container,
|
||||||
|
// 100% wide container at all breakpoints
|
||||||
|
.container-fluid {
|
||||||
|
@include make-container();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive containers that are 100% wide until a breakpoint
|
||||||
|
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||||
|
.container-#{$breakpoint} {
|
||||||
|
@extend .container-fluid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||||
|
%responsive-container-#{$breakpoint} {
|
||||||
|
max-width: $container-max-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
||||||
|
$extend-breakpoint: true;
|
||||||
|
|
||||||
|
@each $name, $width in $grid-breakpoints {
|
||||||
|
@if ($extend-breakpoint) {
|
||||||
|
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||||
|
@extend %responsive-container-#{$breakpoint};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Once the current breakpoint is reached, stop extending
|
||||||
|
@if ($breakpoint == $name) {
|
||||||
|
$extend-breakpoint: false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,524 +0,0 @@
|
|||||||
// Embedded icons from Open Iconic.
|
|
||||||
// Released under MIT and copyright 2014 Waybury.
|
|
||||||
// https://useiconic.com/open
|
|
||||||
|
|
||||||
|
|
||||||
// Checkboxes and radios
|
|
||||||
//
|
|
||||||
// Base class takes care of all the key behavioral aspects.
|
|
||||||
|
|
||||||
.custom-control {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: block;
|
|
||||||
min-height: $font-size-base * $line-height-base;
|
|
||||||
padding-left: $custom-control-gutter + $custom-control-indicator-size;
|
|
||||||
color-adjust: exact; // Keep themed appearance for print
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control-inline {
|
|
||||||
display: inline-flex;
|
|
||||||
margin-right: $custom-control-spacer-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
color: $custom-control-indicator-checked-color;
|
|
||||||
border-color: $custom-control-indicator-checked-border-color;
|
|
||||||
@include gradient-bg($custom-control-indicator-checked-bg);
|
|
||||||
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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, $custom-control-indicator-focus-box-shadow;
|
|
||||||
} @else {
|
|
||||||
box-shadow: $custom-control-indicator-focus-box-shadow;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:not(:checked) ~ .custom-control-label::before {
|
|
||||||
border-color: $custom-control-indicator-focus-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):active ~ .custom-control-label::before {
|
|
||||||
color: $custom-control-indicator-active-color;
|
|
||||||
background-color: $custom-control-indicator-active-bg;
|
|
||||||
border-color: $custom-control-indicator-active-border-color;
|
|
||||||
@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;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-color: $custom-control-indicator-disabled-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom control indicators
|
|
||||||
//
|
|
||||||
// Build the custom controls out of pseudo-elements.
|
|
||||||
|
|
||||||
.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 + $custom-control-indicator-size);
|
|
||||||
display: block;
|
|
||||||
width: $custom-control-indicator-size;
|
|
||||||
height: $custom-control-indicator-size;
|
|
||||||
pointer-events: none;
|
|
||||||
content: "";
|
|
||||||
background-color: $custom-control-indicator-bg;
|
|
||||||
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
|
|
||||||
@include box-shadow($custom-control-indicator-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Foreground (icon)
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
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: no-repeat 50% / #{$custom-control-indicator-bg-size};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Checkboxes
|
|
||||||
//
|
|
||||||
// Tweak just a few things for checkboxes.
|
|
||||||
|
|
||||||
.custom-checkbox {
|
|
||||||
.custom-control-label::before {
|
|
||||||
@include border-radius($custom-checkbox-indicator-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-label {
|
|
||||||
&::after {
|
|
||||||
background-image: escape-svg($custom-checkbox-indicator-icon-checked);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control-input:indeterminate ~ .custom-control-label {
|
|
||||||
&::before {
|
|
||||||
border-color: $custom-checkbox-indicator-indeterminate-border-color;
|
|
||||||
@include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
|
|
||||||
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control-input:disabled {
|
|
||||||
&:checked ~ .custom-control-label::before {
|
|
||||||
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
|
||||||
}
|
|
||||||
&:indeterminate ~ .custom-control-label::before {
|
|
||||||
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Radios
|
|
||||||
//
|
|
||||||
// Tweak just a few things for radios.
|
|
||||||
|
|
||||||
.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: 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 {
|
|
||||||
@include gradient-bg($custom-control-indicator-checked-disabled-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Select
|
|
||||||
//
|
|
||||||
// Replaces the browser default select with a custom one, mostly pulled from
|
|
||||||
// https://primer.github.io/.
|
|
||||||
//
|
|
||||||
|
|
||||||
.custom-select {
|
|
||||||
display: inline-block;
|
|
||||||
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-bg $custom-select-background;
|
|
||||||
border: $custom-select-border-width solid $custom-select-border-color;
|
|
||||||
@include border-radius($custom-select-border-radius, 0);
|
|
||||||
@include box-shadow($custom-select-box-shadow);
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $custom-select-focus-border-color;
|
|
||||||
outline: 0;
|
|
||||||
@if $enable-shadows {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-value {
|
|
||||||
// For visual consistency with other platforms/browsers,
|
|
||||||
// suppress the default white text on blue background highlight given to
|
|
||||||
// the selected option text when the (still closed) <select> receives focus
|
|
||||||
// in IE and (under certain conditions) Edge.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
|
||||||
color: $input-color;
|
|
||||||
background-color: $input-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[multiple],
|
|
||||||
&[size]:not([size="1"]) {
|
|
||||||
height: auto;
|
|
||||||
padding-right: $custom-select-padding-x;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
color: $custom-select-disabled-color;
|
|
||||||
background-color: $custom-select-disabled-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hides the default caret in IE11
|
|
||||||
&::-ms-expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove outline from select box in FF
|
|
||||||
&:-moz-focusring {
|
|
||||||
color: transparent;
|
|
||||||
text-shadow: 0 0 0 $custom-select-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select-sm {
|
|
||||||
height: $custom-select-height-sm;
|
|
||||||
padding-top: $custom-select-padding-y-sm;
|
|
||||||
padding-bottom: $custom-select-padding-y-sm;
|
|
||||||
padding-left: $custom-select-padding-x-sm;
|
|
||||||
@include font-size($custom-select-font-size-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select-lg {
|
|
||||||
height: $custom-select-height-lg;
|
|
||||||
padding-top: $custom-select-padding-y-lg;
|
|
||||||
padding-bottom: $custom-select-padding-y-lg;
|
|
||||||
padding-left: $custom-select-padding-x-lg;
|
|
||||||
@include font-size($custom-select-font-size-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// File
|
|
||||||
//
|
|
||||||
// Custom file input.
|
|
||||||
|
|
||||||
.custom-file {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: $custom-file-height;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-file-input {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
width: 100%;
|
|
||||||
height: $custom-file-height;
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
&:focus ~ .custom-file-label {
|
|
||||||
border-color: $custom-file-focus-border-color;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $lang, $value in $custom-file-text {
|
|
||||||
&:lang(#{$lang}) ~ .custom-file-label::after {
|
|
||||||
content: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
~ .custom-file-label[data-browse]::after {
|
|
||||||
content: attr(data-browse);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-file-label {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
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;
|
|
||||||
background-color: $custom-file-bg;
|
|
||||||
border: $custom-file-border-width solid $custom-file-border-color;
|
|
||||||
@include border-radius($custom-file-border-radius);
|
|
||||||
@include box-shadow($custom-file-box-shadow);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 3;
|
|
||||||
display: block;
|
|
||||||
height: $custom-file-height-inner;
|
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
|
||||||
line-height: $custom-file-line-height;
|
|
||||||
color: $custom-file-button-color;
|
|
||||||
content: "Browse";
|
|
||||||
@include gradient-bg($custom-file-button-bg);
|
|
||||||
border-left: inherit;
|
|
||||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Range
|
|
||||||
//
|
|
||||||
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
|
||||||
// elements cannot be mixed. As such, there are no shared styles for focus or
|
|
||||||
// active states on prefixed selectors.
|
|
||||||
|
|
||||||
.custom-range {
|
|
||||||
width: 100%;
|
|
||||||
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;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
// Pseudo-elements must be split across multiple rulesets to have an effect.
|
|
||||||
// No box-shadow() mixin for focus accessibility.
|
|
||||||
&::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
|
|
||||||
&::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
|
|
||||||
&::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-focus-outer {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-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
|
|
||||||
@include gradient-bg($custom-range-thumb-bg);
|
|
||||||
border: $custom-range-thumb-border;
|
|
||||||
@include border-radius($custom-range-thumb-border-radius);
|
|
||||||
@include box-shadow($custom-range-thumb-box-shadow);
|
|
||||||
@include transition($custom-forms-transition);
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
@include gradient-bg($custom-range-thumb-active-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
width: $custom-range-track-width;
|
|
||||||
height: $custom-range-track-height;
|
|
||||||
color: transparent; // Why?
|
|
||||||
cursor: $custom-range-track-cursor;
|
|
||||||
background-color: $custom-range-track-bg;
|
|
||||||
border-color: transparent;
|
|
||||||
@include border-radius($custom-range-track-border-radius);
|
|
||||||
@include box-shadow($custom-range-track-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
width: $custom-range-thumb-width;
|
|
||||||
height: $custom-range-thumb-height;
|
|
||||||
@include gradient-bg($custom-range-thumb-bg);
|
|
||||||
border: $custom-range-thumb-border;
|
|
||||||
@include border-radius($custom-range-thumb-border-radius);
|
|
||||||
@include box-shadow($custom-range-thumb-box-shadow);
|
|
||||||
@include transition($custom-forms-transition);
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
@include gradient-bg($custom-range-thumb-active-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-track {
|
|
||||||
width: $custom-range-track-width;
|
|
||||||
height: $custom-range-track-height;
|
|
||||||
color: transparent;
|
|
||||||
cursor: $custom-range-track-cursor;
|
|
||||||
background-color: $custom-range-track-bg;
|
|
||||||
border-color: transparent; // Firefox specific?
|
|
||||||
@include border-radius($custom-range-track-border-radius);
|
|
||||||
@include box-shadow($custom-range-track-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-thumb {
|
|
||||||
width: $custom-range-thumb-width;
|
|
||||||
height: $custom-range-thumb-height;
|
|
||||||
margin-top: 0; // Edge specific
|
|
||||||
margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
|
|
||||||
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
|
|
||||||
@include gradient-bg($custom-range-thumb-bg);
|
|
||||||
border: $custom-range-thumb-border;
|
|
||||||
@include border-radius($custom-range-thumb-border-radius);
|
|
||||||
@include box-shadow($custom-range-thumb-box-shadow);
|
|
||||||
@include transition($custom-forms-transition);
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
@include gradient-bg($custom-range-thumb-active-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-track {
|
|
||||||
width: $custom-range-track-width;
|
|
||||||
height: $custom-range-track-height;
|
|
||||||
color: transparent;
|
|
||||||
cursor: $custom-range-track-cursor;
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
border-width: $custom-range-thumb-height / 2;
|
|
||||||
@include box-shadow($custom-range-track-box-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-fill-lower {
|
|
||||||
background-color: $custom-range-track-bg;
|
|
||||||
@include border-radius($custom-range-track-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-fill-upper {
|
|
||||||
margin-right: 15px; // arbitrary?
|
|
||||||
background-color: $custom-range-track-bg;
|
|
||||||
@include border-radius($custom-range-track-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
background-color: $custom-range-thumb-disabled-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
background-color: $custom-range-thumb-disabled-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-track {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-thumb {
|
|
||||||
background-color: $custom-range-thumb-disabled-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control-label::before,
|
|
||||||
.custom-file-label,
|
|
||||||
.custom-select {
|
|
||||||
@include transition($custom-forms-transition);
|
|
||||||
}
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
// The dropdown wrapper (`<div>`)
|
// The dropdown wrapper (`<div>`)
|
||||||
.dropup,
|
.dropup,
|
||||||
.dropright,
|
.dropend,
|
||||||
.dropdown,
|
.dropdown,
|
||||||
.dropleft {
|
.dropstart {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,13 +17,11 @@
|
|||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 0;
|
|
||||||
z-index: $zindex-dropdown;
|
z-index: $zindex-dropdown;
|
||||||
display: none; // none by default, but block on "open" of the menu
|
display: none; // none by default, but block on "open" of the menu
|
||||||
float: left;
|
|
||||||
min-width: $dropdown-min-width;
|
min-width: $dropdown-min-width;
|
||||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||||
margin: $dropdown-spacer 0 0; // override default ul
|
margin: 0; // Override default margin of ul
|
||||||
@include font-size($dropdown-font-size);
|
@include font-size($dropdown-font-size);
|
||||||
color: $dropdown-color;
|
color: $dropdown-color;
|
||||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||||
@ -33,28 +31,46 @@
|
|||||||
border: $dropdown-border-width solid $dropdown-border-color;
|
border: $dropdown-border-width solid $dropdown-border-color;
|
||||||
@include border-radius($dropdown-border-radius);
|
@include border-radius($dropdown-border-radius);
|
||||||
@include box-shadow($dropdown-box-shadow);
|
@include box-shadow($dropdown-box-shadow);
|
||||||
|
|
||||||
|
&[data-bs-popper] {
|
||||||
|
left: 0;
|
||||||
|
margin-top: $dropdown-spacer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// scss-docs-start responsive-breakpoints
|
||||||
|
// We deliberately hardcode the `bs-` prefix because we check
|
||||||
|
// this custom property in JS to determine Popper's positioning
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
.dropdown-menu#{$infix}-left {
|
.dropdown-menu#{$infix}-start {
|
||||||
right: auto;
|
--bs-position: start;
|
||||||
left: 0;
|
|
||||||
|
&[data-bs-popper] {
|
||||||
|
right: auto #{"/* rtl:ignore */"};
|
||||||
|
left: 0 #{"/* rtl:ignore */"};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu#{$infix}-right {
|
.dropdown-menu#{$infix}-end {
|
||||||
right: 0;
|
--bs-position: end;
|
||||||
left: auto;
|
|
||||||
|
&[data-bs-popper] {
|
||||||
|
right: 0 #{"/* rtl:ignore */"};
|
||||||
|
left: auto #{"/* rtl:ignore */"};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end responsive-breakpoints
|
||||||
|
|
||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
// Just add .dropup after the standard .dropdown class and you're set.
|
// Just add .dropup after the standard .dropdown class and you're set.
|
||||||
.dropup {
|
.dropup {
|
||||||
.dropdown-menu {
|
.dropdown-menu[data-bs-popper] {
|
||||||
top: auto;
|
top: auto;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@ -66,55 +82,53 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropright {
|
.dropend {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: auto;
|
right: auto;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
margin-top: 0;
|
|
||||||
margin-left: $dropdown-spacer;
|
&[data-bs-popper] {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: $dropdown-spacer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
@include caret(right);
|
@include caret(end);
|
||||||
&::after {
|
&::after {
|
||||||
vertical-align: 0;
|
vertical-align: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropleft {
|
.dropstart {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 100%;
|
right: 100%;
|
||||||
left: auto;
|
left: auto;
|
||||||
margin-top: 0;
|
|
||||||
margin-right: $dropdown-spacer;
|
&[data-bs-popper] {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $dropdown-spacer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
@include caret(left);
|
@include caret(start);
|
||||||
&::before {
|
&::before {
|
||||||
vertical-align: 0;
|
vertical-align: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When enabled Popper.js, reset basic dropdown position
|
|
||||||
// stylelint-disable-next-line no-duplicate-selectors
|
|
||||||
.dropdown-menu {
|
|
||||||
&[x-placement^="top"],
|
|
||||||
&[x-placement^="right"],
|
|
||||||
&[x-placement^="bottom"],
|
|
||||||
&[x-placement^="left"] {
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dividers (basically an `<hr>`) within the dropdown
|
// Dividers (basically an `<hr>`) within the dropdown
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
|
height: 0;
|
||||||
|
margin: $dropdown-divider-margin-y 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-top: 1px solid $dropdown-divider-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links, buttons, and more within the dropdown menu
|
// Links, buttons, and more within the dropdown menu
|
||||||
@ -145,9 +159,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $dropdown-link-hover-color;
|
color: $dropdown-link-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
@include gradient-bg($dropdown-link-hover-bg);
|
@include gradient-bg($dropdown-link-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,9 +179,7 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
// Remove CSS gradients if they're enabled
|
// Remove CSS gradients if they're enabled
|
||||||
@if $enable-gradients {
|
background-image: if($enable-gradients, none, null);
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -190,3 +203,44 @@
|
|||||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||||
color: $dropdown-link-color;
|
color: $dropdown-link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dark dropdowns
|
||||||
|
.dropdown-menu-dark {
|
||||||
|
color: $dropdown-dark-color;
|
||||||
|
background-color: $dropdown-dark-bg;
|
||||||
|
border-color: $dropdown-dark-border-color;
|
||||||
|
@include box-shadow($dropdown-dark-box-shadow);
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: $dropdown-dark-link-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $dropdown-dark-link-hover-color;
|
||||||
|
@include gradient-bg($dropdown-dark-link-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&:active {
|
||||||
|
color: $dropdown-dark-link-active-color;
|
||||||
|
@include gradient-bg($dropdown-dark-link-active-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
color: $dropdown-dark-link-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-divider {
|
||||||
|
border-color: $dropdown-dark-divider-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item-text {
|
||||||
|
color: $dropdown-dark-link-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
color: $dropdown-dark-header-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,347 +1,9 @@
|
|||||||
// stylelint-disable selector-no-qualifying-type
|
@import "forms/labels";
|
||||||
|
@import "forms/form-text";
|
||||||
//
|
@import "forms/form-control";
|
||||||
// Textual form controls
|
@import "forms/form-select";
|
||||||
//
|
@import "forms/form-check";
|
||||||
|
@import "forms/form-range";
|
||||||
.form-control {
|
@import "forms/floating-labels";
|
||||||
display: block;
|
@import "forms/input-group";
|
||||||
width: 100%;
|
@import "forms/validation";
|
||||||
height: $input-height;
|
|
||||||
padding: $input-padding-y $input-padding-x;
|
|
||||||
font-family: $input-font-family;
|
|
||||||
@include font-size($input-font-size);
|
|
||||||
font-weight: $input-font-weight;
|
|
||||||
line-height: $input-line-height;
|
|
||||||
color: $input-color;
|
|
||||||
background-color: $input-bg;
|
|
||||||
background-clip: padding-box;
|
|
||||||
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.
|
|
||||||
@include border-radius($input-border-radius, 0);
|
|
||||||
|
|
||||||
@include box-shadow($input-box-shadow);
|
|
||||||
@include transition($input-transition);
|
|
||||||
|
|
||||||
// Unstyle the caret on `<select>`s in IE10+.
|
|
||||||
&::-ms-expand {
|
|
||||||
background-color: transparent;
|
|
||||||
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($ignore-warning: true);
|
|
||||||
|
|
||||||
// Placeholder
|
|
||||||
&::placeholder {
|
|
||||||
color: $input-placeholder-color;
|
|
||||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disabled and read-only inputs
|
|
||||||
//
|
|
||||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
||||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
||||||
// don't honor that edge case; we style them as disabled anyway.
|
|
||||||
&:disabled,
|
|
||||||
&[readonly] {
|
|
||||||
background-color: $input-disabled-bg;
|
|
||||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
// the selected option text when the (still closed) <select> receives focus
|
|
||||||
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
|
||||||
// match the appearance of the native widget.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
|
||||||
color: $input-color;
|
|
||||||
background-color: $input-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make file inputs better match text inputs by forcing them to new lines.
|
|
||||||
.form-control-file,
|
|
||||||
.form-control-range {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Labels
|
|
||||||
//
|
|
||||||
|
|
||||||
// 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: add($input-padding-y, $input-border-width);
|
|
||||||
padding-bottom: add($input-padding-y, $input-border-width);
|
|
||||||
margin-bottom: 0; // Override the `<label>/<legend>` default
|
|
||||||
@include font-size(inherit); // Override the `<legend>` default
|
|
||||||
line-height: $input-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-form-label-lg {
|
|
||||||
padding-top: 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: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Readonly controls as plain text
|
|
||||||
//
|
|
||||||
// Apply class to a readonly input to make it appear like regular plain
|
|
||||||
// text (without any border, background color, focus indicator)
|
|
||||||
|
|
||||||
.form-control-plaintext {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
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;
|
|
||||||
border: solid transparent;
|
|
||||||
border-width: $input-border-width 0;
|
|
||||||
|
|
||||||
&.form-control-sm,
|
|
||||||
&.form-control-lg {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
|
||||||
// height and font-size of form controls.
|
|
||||||
//
|
|
||||||
// Repeated in `_input_group.scss` to avoid Sass extend issues.
|
|
||||||
|
|
||||||
.form-control-sm {
|
|
||||||
height: $input-height-sm;
|
|
||||||
padding: $input-padding-y-sm $input-padding-x-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;
|
|
||||||
@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
|
|
||||||
select.form-control {
|
|
||||||
&[size],
|
|
||||||
&[multiple] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.form-control {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form groups
|
|
||||||
//
|
|
||||||
// Designed to help with the organization and spacing of vertical forms. For
|
|
||||||
// horizontal forms, use the predefined grid classes.
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: $form-group-margin-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-text {
|
|
||||||
display: block;
|
|
||||||
margin-top: $form-text-margin-top;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form grid
|
|
||||||
//
|
|
||||||
// Special replacement for our grid system's `.row` for tighter form layouts.
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-right: -$form-grid-gutter-width / 2;
|
|
||||||
margin-left: -$form-grid-gutter-width / 2;
|
|
||||||
|
|
||||||
> .col,
|
|
||||||
> [class*="col-"] {
|
|
||||||
padding-right: $form-grid-gutter-width / 2;
|
|
||||||
padding-left: $form-grid-gutter-width / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Checkboxes and radios
|
|
||||||
//
|
|
||||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
|
||||||
|
|
||||||
.form-check {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
padding-left: $form-check-input-gutter;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-input {
|
|
||||||
position: absolute;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-label {
|
|
||||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-inline {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 0; // Override base .form-check
|
|
||||||
margin-right: $form-check-inline-margin-x;
|
|
||||||
|
|
||||||
// Undo .form-check-input defaults and add some `margin-right`.
|
|
||||||
.form-check-input {
|
|
||||||
position: static;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-right: $form-check-inline-input-margin-x;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Form validation
|
|
||||||
//
|
|
||||||
// Provide feedback to users when form field values are valid or invalid. Works
|
|
||||||
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
|
||||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
|
||||||
// server side validation.
|
|
||||||
|
|
||||||
@each $state, $data in $form-validation-states {
|
|
||||||
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline forms
|
|
||||||
//
|
|
||||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
|
||||||
// forms begin stacked on extra small (mobile) devices and then go inline when
|
|
||||||
// viewports reach <768px.
|
|
||||||
//
|
|
||||||
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
|
||||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
|
||||||
|
|
||||||
.form-inline {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
|
||||||
|
|
||||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
|
||||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
|
||||||
// so we force that here.
|
|
||||||
.form-check {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Kick in the inline
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline-block all the things for "inline"
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow folks to *not* use `.form-group`
|
|
||||||
.form-control {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make static controls behave like regular ones
|
|
||||||
.form-control-plaintext {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group,
|
|
||||||
.custom-select {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
|
||||||
// then undo the floating of radios and checkboxes to match.
|
|
||||||
.form-check {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: auto;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.form-check-input {
|
|
||||||
position: relative;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-right: $form-check-input-margin-x;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-control {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.custom-control-label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -32,6 +32,29 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Internal Bootstrap function to turn maps into its negative variant.
|
||||||
|
// It prefixes the keys with `n` and makes the value negative.
|
||||||
|
@function negativify-map($map) {
|
||||||
|
$result: ();
|
||||||
|
@each $key, $value in $map {
|
||||||
|
@if $key != 0 {
|
||||||
|
$result: map-merge($result, ("n" + $key: (-$value)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get multiple keys from a sass map
|
||||||
|
@function map-get-multiple($map, $values) {
|
||||||
|
$result: ();
|
||||||
|
@each $key, $value in $map {
|
||||||
|
@if (index($values, $key) != null) {
|
||||||
|
$result: map-merge($result, ($key: $value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
// Replace `$search` with `$replace` in `$string`
|
// Replace `$search` with `$replace` in `$string`
|
||||||
// Used on our SVG icon backgrounds for custom forms.
|
// Used on our SVG icon backgrounds for custom forms.
|
||||||
//
|
//
|
||||||
@ -70,42 +93,80 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Color contrast
|
// Color contrast
|
||||||
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
// See https://github.com/twbs/bootstrap/pull/30168
|
||||||
$r: red($color);
|
|
||||||
$g: green($color);
|
|
||||||
$b: blue($color);
|
|
||||||
|
|
||||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
|
||||||
|
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
|
||||||
|
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
||||||
|
|
||||||
@if ($yiq >= $yiq-contrasted-threshold) {
|
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
||||||
@return $dark;
|
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
||||||
} @else {
|
$max-ratio: 0;
|
||||||
@return $light;
|
$max-ratio-color: null;
|
||||||
|
|
||||||
|
@each $color in $foregrounds {
|
||||||
|
$contrast-ratio: contrast-ratio($background, $color);
|
||||||
|
@if $contrast-ratio > $min-contrast-ratio {
|
||||||
|
@return $color;
|
||||||
|
} @else if $contrast-ratio > $max-ratio {
|
||||||
|
$max-ratio: $contrast-ratio;
|
||||||
|
$max-ratio-color: $color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
||||||
|
|
||||||
|
@return $max-ratio-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Retrieve color Sass maps
|
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
||||||
@function color($key: "blue") {
|
$l1: luminance($background);
|
||||||
@return map-get($colors, $key);
|
$l2: luminance(opaque($background, $foreground));
|
||||||
|
|
||||||
|
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
|
||||||
}
|
}
|
||||||
|
|
||||||
@function theme-color($key: "primary") {
|
// Return WCAG2.0 relative luminance
|
||||||
@return map-get($theme-colors, $key);
|
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
|
||||||
|
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
||||||
|
@function luminance($color) {
|
||||||
|
$rgb: (
|
||||||
|
"r": red($color),
|
||||||
|
"g": green($color),
|
||||||
|
"b": blue($color)
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $name, $value in $rgb {
|
||||||
|
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
|
||||||
|
$rgb: map-merge($rgb, ($name: $value));
|
||||||
|
}
|
||||||
|
|
||||||
|
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
|
||||||
}
|
}
|
||||||
|
|
||||||
@function gray($key: "100") {
|
// Return opaque color
|
||||||
@return map-get($grays, $key);
|
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
|
||||||
|
@function opaque($background, $foreground) {
|
||||||
|
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Request a theme color level
|
// scss-docs-start color-functions
|
||||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
// Tint a color: mix a color with white
|
||||||
$color: theme-color($color-name);
|
@function tint-color($color, $weight) {
|
||||||
$color-base: if($level > 0, $black, $white);
|
@return mix(white, $color, $weight);
|
||||||
$level: abs($level);
|
|
||||||
|
|
||||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Shade a color: mix a color with black
|
||||||
|
@function shade-color($color, $weight) {
|
||||||
|
@return mix(black, $color, $weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shade the color if the weight is positive, else tint it
|
||||||
|
@function shift-color($color, $weight) {
|
||||||
|
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
||||||
|
}
|
||||||
|
// scss-docs-end color-functions
|
||||||
|
|
||||||
// Return valid calc
|
// Return valid calc
|
||||||
@function add($value1, $value2, $return-calc: true) {
|
@function add($value1, $value2, $return-calc: true) {
|
||||||
@if $value1 == null {
|
@if $value1 == null {
|
||||||
|
|||||||
@ -1,46 +1,3 @@
|
|||||||
// Container widths
|
|
||||||
//
|
|
||||||
// Set the container width, and override it for fixed navbars in media queries.
|
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
|
||||||
// Single container class with breakpoint max-widths
|
|
||||||
.container,
|
|
||||||
// 100% wide container at all breakpoints
|
|
||||||
.container-fluid {
|
|
||||||
@include make-container();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive containers that are 100% wide until a breakpoint
|
|
||||||
@each $breakpoint, $container-max-width in $container-max-widths {
|
|
||||||
.container-#{$breakpoint} {
|
|
||||||
@extend .container-fluid;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
|
||||||
%responsive-container-#{$breakpoint} {
|
|
||||||
max-width: $container-max-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extend each breakpoint which is smaller or equal to the current breakpoint
|
|
||||||
$extend-breakpoint: true;
|
|
||||||
|
|
||||||
@each $name, $width in $grid-breakpoints {
|
|
||||||
@if ($extend-breakpoint) {
|
|
||||||
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
|
||||||
@extend %responsive-container-#{$breakpoint};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Once the current breakpoint is reached, stop extending
|
|
||||||
@if ($breakpoint == $name) {
|
|
||||||
$extend-breakpoint: false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Row
|
// Row
|
||||||
//
|
//
|
||||||
// Rows contain your columns.
|
// Rows contain your columns.
|
||||||
@ -48,22 +5,14 @@
|
|||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
.row {
|
.row {
|
||||||
@include make-row();
|
@include make-row();
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the negative margin from default .row, then the horizontal padding
|
> * {
|
||||||
// from all immediate children columns (to prevent runaway style inheritance).
|
@include make-col-ready();
|
||||||
.no-gutters {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
> .col,
|
|
||||||
> [class*="col-"] {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Columns
|
// Columns
|
||||||
//
|
//
|
||||||
// Common styles for small and large grid columns
|
// Common styles for small and large grid columns
|
||||||
|
|||||||
7
src/assets/styles/bootstrap/_helpers.scss
Normal file
7
src/assets/styles/bootstrap/_helpers.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
@import "helpers/clearfix";
|
||||||
|
@import "helpers/colored-links";
|
||||||
|
@import "helpers/ratio";
|
||||||
|
@import "helpers/position";
|
||||||
|
@import "helpers/visually-hidden";
|
||||||
|
@import "helpers/stretched-link";
|
||||||
|
@import "helpers/text-truncation";
|
||||||
@ -1,192 +0,0 @@
|
|||||||
// stylelint-disable selector-no-qualifying-type
|
|
||||||
|
|
||||||
//
|
|
||||||
// Base styles
|
|
||||||
//
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap; // For form validation feedback
|
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
> .form-control,
|
|
||||||
> .form-control-plaintext,
|
|
||||||
> .custom-select,
|
|
||||||
> .custom-file {
|
|
||||||
position: relative; // For focus state's z-index
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
+ .form-control,
|
|
||||||
+ .custom-select,
|
|
||||||
+ .custom-file {
|
|
||||||
margin-left: -$input-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bring the "active" form control to the top of surrounding elements
|
|
||||||
> .form-control:focus,
|
|
||||||
> .custom-select:focus,
|
|
||||||
> .custom-file .custom-file-input:focus ~ .custom-file-label {
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bring the custom file input above the label
|
|
||||||
> .custom-file .custom-file-input:focus {
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .form-control,
|
|
||||||
> .custom-select {
|
|
||||||
&:not(:last-child) { @include border-right-radius(0); }
|
|
||||||
&:not(:first-child) { @include border-left-radius(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom file inputs have more complex markup, thus requiring different
|
|
||||||
// border-radius overrides.
|
|
||||||
> .custom-file {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:not(:last-child) .custom-file-label,
|
|
||||||
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
|
|
||||||
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Prepend and append
|
|
||||||
//
|
|
||||||
// While it requires one extra layer of HTML for each, dedicated prepend and
|
|
||||||
// append elements allow us to 1) be less clever, 2) simplify our selectors, and
|
|
||||||
// 3) support HTML5 form validation.
|
|
||||||
|
|
||||||
.input-group-prepend,
|
|
||||||
.input-group-append {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
// Ensure buttons are always above inputs for more visually pleasing borders.
|
|
||||||
// This isn't needed for `.input-group-text` since it shares the same border-color
|
|
||||||
// as our inputs.
|
|
||||||
.btn {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn + .btn,
|
|
||||||
.btn + .input-group-text,
|
|
||||||
.input-group-text + .input-group-text,
|
|
||||||
.input-group-text + .btn {
|
|
||||||
margin-left: -$input-border-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-prepend { margin-right: -$input-border-width; }
|
|
||||||
.input-group-append { margin-left: -$input-border-width; }
|
|
||||||
|
|
||||||
|
|
||||||
// Textual addons
|
|
||||||
//
|
|
||||||
// Serves as a catch-all element for any text or radio/checkbox input you wish
|
|
||||||
// to prepend or append to an input.
|
|
||||||
|
|
||||||
.input-group-text {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: $input-padding-y $input-padding-x;
|
|
||||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
|
||||||
@include font-size($input-font-size); // Match inputs
|
|
||||||
font-weight: $font-weight-normal;
|
|
||||||
line-height: $input-line-height;
|
|
||||||
color: $input-group-addon-color;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: $input-group-addon-bg;
|
|
||||||
border: $input-border-width solid $input-group-addon-border-color;
|
|
||||||
@include border-radius($input-border-radius);
|
|
||||||
|
|
||||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
|
||||||
input[type="radio"],
|
|
||||||
input[type="checkbox"] {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
//
|
|
||||||
// Remix the default form control sizing classes into new ones for easier
|
|
||||||
// manipulation.
|
|
||||||
|
|
||||||
.input-group-lg > .form-control:not(textarea),
|
|
||||||
.input-group-lg > .custom-select {
|
|
||||||
height: $input-height-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-lg > .form-control,
|
|
||||||
.input-group-lg > .custom-select,
|
|
||||||
.input-group-lg > .input-group-prepend > .input-group-text,
|
|
||||||
.input-group-lg > .input-group-append > .input-group-text,
|
|
||||||
.input-group-lg > .input-group-prepend > .btn,
|
|
||||||
.input-group-lg > .input-group-append > .btn {
|
|
||||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
|
||||||
@include font-size($input-font-size-lg);
|
|
||||||
line-height: $input-line-height-lg;
|
|
||||||
@include border-radius($input-border-radius-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-sm > .form-control:not(textarea),
|
|
||||||
.input-group-sm > .custom-select {
|
|
||||||
height: $input-height-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-sm > .form-control,
|
|
||||||
.input-group-sm > .custom-select,
|
|
||||||
.input-group-sm > .input-group-prepend > .input-group-text,
|
|
||||||
.input-group-sm > .input-group-append > .input-group-text,
|
|
||||||
.input-group-sm > .input-group-prepend > .btn,
|
|
||||||
.input-group-sm > .input-group-append > .btn {
|
|
||||||
padding: $input-padding-y-sm $input-padding-x-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Prepend and append rounded corners
|
|
||||||
//
|
|
||||||
// These rulesets must come after the sizing ones to properly override sm and lg
|
|
||||||
// border-radius values when extending. They're more specific than we'd like
|
|
||||||
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
|
||||||
|
|
||||||
|
|
||||||
.input-group > .input-group-prepend > .btn,
|
|
||||||
.input-group > .input-group-prepend > .input-group-text,
|
|
||||||
.input-group > .input-group-append:not(:last-child) > .btn,
|
|
||||||
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
|
||||||
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
|
||||||
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
|
||||||
@include border-right-radius(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group > .input-group-append > .btn,
|
|
||||||
.input-group > .input-group-append > .input-group-text,
|
|
||||||
.input-group > .input-group-prepend:not(:first-child) > .btn,
|
|
||||||
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
|
|
||||||
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
|
|
||||||
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
|
|
||||||
@include border-left-radius(0);
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
.jumbotron {
|
|
||||||
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
|
||||||
margin-bottom: $jumbotron-padding;
|
|
||||||
color: $jumbotron-color;
|
|
||||||
background-color: $jumbotron-bg;
|
|
||||||
@include border-radius($border-radius-lg);
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-fluid {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
@include border-radius(0);
|
|
||||||
}
|
|
||||||
@ -12,6 +12,17 @@
|
|||||||
@include border-radius($list-group-border-radius);
|
@include border-radius($list-group-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-group-numbered {
|
||||||
|
list-style-type: none;
|
||||||
|
counter-reset: section;
|
||||||
|
|
||||||
|
> li::before {
|
||||||
|
// Increments only this instance of the section counter
|
||||||
|
content: counters(section, ".") ". ";
|
||||||
|
counter-increment: section;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Interactive list items
|
// Interactive list items
|
||||||
//
|
//
|
||||||
@ -24,7 +35,8 @@
|
|||||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||||
|
|
||||||
// Hover state
|
// Hover state
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
||||||
color: $list-group-action-hover-color;
|
color: $list-group-action-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -98,13 +110,13 @@
|
|||||||
|
|
||||||
> .list-group-item {
|
> .list-group-item {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-bottom-left-radius($list-group-border-radius);
|
@include border-bottom-start-radius($list-group-border-radius);
|
||||||
@include border-top-right-radius(0);
|
@include border-top-end-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-top-right-radius($list-group-border-radius);
|
@include border-top-end-radius($list-group-border-radius);
|
||||||
@include border-bottom-left-radius(0);
|
@include border-bottom-start-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@ -144,11 +156,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Contextual variants
|
// scss-docs-start list-group-modifiers
|
||||||
|
// List group contextual variants
|
||||||
//
|
//
|
||||||
// Add modifier classes to change text and background color on individual items.
|
// Add modifier classes to change text and background color on individual items.
|
||||||
// Organizationally, this must come after the `:hover` states.
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $state, $value in $theme-colors {
|
||||||
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
$list-group-background: shift-color($value, $list-group-item-bg-scale);
|
||||||
|
$list-group-color: shift-color($value, $list-group-item-color-scale);
|
||||||
|
@if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
|
||||||
|
$list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
|
||||||
|
}
|
||||||
|
|
||||||
|
@include list-group-item-variant($state, $list-group-background, $list-group-color);
|
||||||
}
|
}
|
||||||
|
// scss-docs-end list-group-modifiers
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
.media {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-body {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
@ -8,19 +8,16 @@
|
|||||||
// Deprecate
|
// Deprecate
|
||||||
@import "mixins/deprecate";
|
@import "mixins/deprecate";
|
||||||
|
|
||||||
// Utilities
|
// Helpers
|
||||||
@import "mixins/breakpoints";
|
@import "mixins/breakpoints";
|
||||||
@import "mixins/hover";
|
|
||||||
@import "mixins/image";
|
@import "mixins/image";
|
||||||
@import "mixins/badge";
|
|
||||||
@import "mixins/resize";
|
@import "mixins/resize";
|
||||||
@import "mixins/screen-reader";
|
@import "mixins/visually-hidden";
|
||||||
@import "mixins/size";
|
|
||||||
@import "mixins/reset-text";
|
@import "mixins/reset-text";
|
||||||
@import "mixins/text-emphasis";
|
|
||||||
@import "mixins/text-hide";
|
|
||||||
@import "mixins/text-truncate";
|
@import "mixins/text-truncate";
|
||||||
@import "mixins/visibility";
|
|
||||||
|
// Utilities
|
||||||
|
@import "mixins/utilities";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import "mixins/alert";
|
@import "mixins/alert";
|
||||||
@ -29,12 +26,10 @@
|
|||||||
@import "mixins/pagination";
|
@import "mixins/pagination";
|
||||||
@import "mixins/lists";
|
@import "mixins/lists";
|
||||||
@import "mixins/list-group";
|
@import "mixins/list-group";
|
||||||
@import "mixins/nav-divider";
|
|
||||||
@import "mixins/forms";
|
@import "mixins/forms";
|
||||||
@import "mixins/table-row";
|
@import "mixins/table-variants";
|
||||||
|
|
||||||
// Skins
|
// Skins
|
||||||
@import "mixins/background-variant";
|
|
||||||
@import "mixins/border-radius";
|
@import "mixins/border-radius";
|
||||||
@import "mixins/box-shadow";
|
@import "mixins/box-shadow";
|
||||||
@import "mixins/gradients";
|
@import "mixins/gradients";
|
||||||
@ -42,6 +37,5 @@
|
|||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
@import "mixins/clearfix";
|
@import "mixins/clearfix";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/container";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
@import "mixins/float";
|
|
||||||
|
|||||||
@ -56,19 +56,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-scrollable {
|
.modal-dialog-scrollable {
|
||||||
display: flex; // IE10/11
|
height: subtract(100%, $modal-dialog-margin * 2);
|
||||||
max-height: subtract(100%, $modal-dialog-margin * 2);
|
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
|
max-height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header,
|
|
||||||
.modal-footer {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
@ -78,29 +72,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: subtract(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: 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
|
// Actual modal
|
||||||
@ -140,16 +111,16 @@
|
|||||||
// Top section of the modal w/ title and dismiss
|
// Top section of the modal w/ title and dismiss
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start; // so the close btn always stays on the upper right corner
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||||
padding: $modal-header-padding;
|
padding: $modal-header-padding;
|
||||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||||
@include border-top-radius($modal-content-inner-border-radius);
|
@include border-top-radius($modal-content-inner-border-radius);
|
||||||
|
|
||||||
.close {
|
.btn-close {
|
||||||
padding: $modal-header-padding;
|
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
|
||||||
// auto on the left force icon to the right even when there is no .modal-title
|
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
|
||||||
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -173,6 +144,7 @@
|
|||||||
.modal-footer {
|
.modal-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
flex-shrink: 0;
|
||||||
align-items: center; // vertically center
|
align-items: center; // vertically center
|
||||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||||
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
||||||
@ -205,20 +177,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-scrollable {
|
.modal-dialog-scrollable {
|
||||||
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
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 {
|
.modal-dialog-centered {
|
||||||
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||||
|
|
||||||
&::before {
|
|
||||||
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
|
||||||
height: min-content;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
@ -238,3 +201,37 @@
|
|||||||
@include media-breakpoint-up(xl) {
|
@include media-breakpoint-up(xl) {
|
||||||
.modal-xl { max-width: $modal-xl; }
|
.modal-xl { max-width: $modal-xl; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// scss-docs-start modal-fullscreen-loop
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
$postfix: if($infix != "", $infix + "-down", "");
|
||||||
|
|
||||||
|
@include media-breakpoint-down($breakpoint) {
|
||||||
|
.modal-fullscreen#{$postfix} {
|
||||||
|
width: 100vw;
|
||||||
|
max-width: none;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end modal-fullscreen-loop
|
||||||
|
|||||||
@ -14,10 +14,16 @@
|
|||||||
.nav-link {
|
.nav-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||||
|
@include font-size($nav-link-font-size);
|
||||||
|
font-weight: $nav-link-font-weight;
|
||||||
|
color: $nav-link-color;
|
||||||
text-decoration: if($link-decoration == none, null, none);
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
|
@include transition($nav-link-transition);
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
text-decoration: none;
|
&:focus {
|
||||||
|
color: $nav-link-hover-color;
|
||||||
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled state lightens text
|
// Disabled state lightens text
|
||||||
@ -35,16 +41,39 @@
|
|||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
margin-bottom: -$nav-tabs-border-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
border: $nav-tabs-border-width solid transparent;
|
position: relative;
|
||||||
|
margin-bottom: -$nav-tabs-border-width;
|
||||||
|
background-color: $nav-tabs-link-bg;
|
||||||
|
border: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||||
@include border-top-radius($nav-tabs-border-radius);
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
@include hover-focus() {
|
&.active {
|
||||||
|
&:before {
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 93%;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
top: 1.5px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
background: #C2C9D1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
border-color: $nav-tabs-link-hover-border-color;
|
border-color: $nav-tabs-link-hover-border-color;
|
||||||
|
//background: $nav-tabs-link-hover-bg;
|
||||||
|
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
||||||
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
@ -76,13 +105,15 @@
|
|||||||
|
|
||||||
.nav-pills {
|
.nav-pills {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
@include border-radius($nav-pills-border-radius);
|
@include border-radius($nav-pills-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link.active,
|
.nav-link.active,
|
||||||
.show > .nav-link {
|
.show > .nav-link {
|
||||||
color: $nav-pills-link-active-color;
|
color: $nav-pills-link-active-color;
|
||||||
background-color: $nav-pills-link-active-bg;
|
@include gradient-bg($nav-pills-link-active-bg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -108,6 +139,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-fill,
|
||||||
|
.nav-justified {
|
||||||
|
.nav-item .nav-link {
|
||||||
|
width: 100%; // Make sure button will grow
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Tabbable tabs
|
// Tabbable tabs
|
||||||
//
|
//
|
||||||
|
|||||||
@ -4,7 +4,6 @@
|
|||||||
// Navbar brand
|
// Navbar brand
|
||||||
// Navbar nav
|
// Navbar nav
|
||||||
// Navbar text
|
// Navbar text
|
||||||
// Navbar divider
|
|
||||||
// Responsive navbar
|
// Responsive navbar
|
||||||
// Navbar position
|
// Navbar position
|
||||||
// Navbar themes
|
// Navbar themes
|
||||||
@ -21,19 +20,24 @@
|
|||||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between; // space out brand from logo
|
justify-content: space-between; // space out brand from logo
|
||||||
padding: $navbar-padding-y $navbar-padding-x;
|
padding-top: $navbar-padding-y;
|
||||||
|
padding-right: $navbar-padding-x; // default: null
|
||||||
|
padding-bottom: $navbar-padding-y;
|
||||||
|
padding-left: $navbar-padding-x; // default: null
|
||||||
|
@include gradient-bg();
|
||||||
|
|
||||||
// Because flex properties aren't inherited, we need to redeclare these first
|
// Because flex properties aren't inherited, we need to redeclare these first
|
||||||
// few properties so that content nested within behave properly.
|
// few properties so that content nested within behave properly.
|
||||||
|
// The `flex-wrap` property is inherited to simplify the expanded navbars
|
||||||
%container-flex-properties {
|
%container-flex-properties {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: inherit;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container,
|
> .container,
|
||||||
.container-fluid {
|
> .container-fluid {
|
||||||
@extend %container-flex-properties;
|
@extend %container-flex-properties;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -50,16 +54,16 @@
|
|||||||
// Used for brand, project, or site names.
|
// Used for brand, project, or site names.
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
display: inline-block;
|
|
||||||
padding-top: $navbar-brand-padding-y;
|
padding-top: $navbar-brand-padding-y;
|
||||||
padding-bottom: $navbar-brand-padding-y;
|
padding-bottom: $navbar-brand-padding-y;
|
||||||
margin-right: $navbar-padding-x;
|
margin-right: $navbar-brand-margin-end;
|
||||||
@include font-size($navbar-brand-font-size);
|
@include font-size($navbar-brand-font-size);
|
||||||
line-height: inherit;
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
text-decoration: none;
|
&:focus {
|
||||||
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,7 +86,6 @@
|
|||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
position: static;
|
position: static;
|
||||||
float: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,7 +95,6 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
display: inline-block;
|
|
||||||
padding-top: $nav-link-padding-y;
|
padding-top: $nav-link-padding-y;
|
||||||
padding-bottom: $nav-link-padding-y;
|
padding-bottom: $nav-link-padding-y;
|
||||||
}
|
}
|
||||||
@ -122,10 +124,17 @@
|
|||||||
background-color: transparent; // remove default button style
|
background-color: transparent; // remove default button style
|
||||||
border: $border-width solid transparent; // remove default button style
|
border: $border-width solid transparent; // remove default button style
|
||||||
@include border-radius($navbar-toggler-border-radius);
|
@include border-radius($navbar-toggler-border-radius);
|
||||||
|
@include transition($navbar-toggler-transition);
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 $navbar-toggler-focus-width;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keep as a separate element so folks can easily override it with another icon
|
// Keep as a separate element so folks can easily override it with another icon
|
||||||
@ -135,11 +144,17 @@
|
|||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
content: "";
|
background-repeat: no-repeat;
|
||||||
background: no-repeat center center;
|
background-position: center;
|
||||||
background-size: 100% 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-nav-scroll {
|
||||||
|
max-height: var(--#{$variable-prefix}scroll-height, 75vh);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// scss-docs-start navbar-expand-loop
|
||||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
// where your navbar collapses.
|
// where your navbar collapses.
|
||||||
.navbar-expand {
|
.navbar-expand {
|
||||||
@ -147,27 +162,10 @@
|
|||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
// stylelint-disable-next-line scss/selector-no-union-class-name
|
||||||
&#{$infix} {
|
&#{$infix} {
|
||||||
@include media-breakpoint-down($breakpoint) {
|
|
||||||
%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) {
|
@include media-breakpoint-up($next) {
|
||||||
flex-flow: row nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
@ -183,26 +181,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// For nesting containers, have to redeclare for alignment purposes
|
.navbar-nav-scroll {
|
||||||
%container-nesting-#{$breakpoint} {
|
overflow: visible;
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .container,
|
|
||||||
> .container-fluid {
|
|
||||||
@extend %container-nesting-#{$breakpoint};
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $size, $container-max-width in $container-max-widths {
|
|
||||||
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
|
||||||
@extend %container-nesting-#{$breakpoint};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
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;
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -213,6 +197,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end navbar-expand-loop
|
||||||
|
|
||||||
|
|
||||||
// Navbar themes
|
// Navbar themes
|
||||||
@ -224,7 +209,8 @@
|
|||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $navbar-light-brand-color;
|
color: $navbar-light-brand-color;
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $navbar-light-brand-hover-color;
|
color: $navbar-light-brand-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -233,7 +219,8 @@
|
|||||||
.nav-link {
|
.nav-link {
|
||||||
color: $navbar-light-color;
|
color: $navbar-light-color;
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $navbar-light-hover-color;
|
color: $navbar-light-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -243,8 +230,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.show > .nav-link,
|
.show > .nav-link,
|
||||||
.active > .nav-link,
|
|
||||||
.nav-link.show,
|
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
color: $navbar-light-active-color;
|
color: $navbar-light-active-color;
|
||||||
}
|
}
|
||||||
@ -261,12 +246,11 @@
|
|||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: $navbar-light-color;
|
color: $navbar-light-color;
|
||||||
a {
|
|
||||||
color: $navbar-light-active-color;
|
|
||||||
|
|
||||||
@include hover-focus() {
|
a,
|
||||||
color: $navbar-light-active-color;
|
a:hover,
|
||||||
}
|
a:focus {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -276,7 +260,8 @@
|
|||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $navbar-dark-brand-color;
|
color: $navbar-dark-brand-color;
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $navbar-dark-brand-hover-color;
|
color: $navbar-dark-brand-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -285,7 +270,8 @@
|
|||||||
.nav-link {
|
.nav-link {
|
||||||
color: $navbar-dark-color;
|
color: $navbar-dark-color;
|
||||||
|
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $navbar-dark-hover-color;
|
color: $navbar-dark-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,8 +281,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.show > .nav-link,
|
.show > .nav-link,
|
||||||
.active > .nav-link,
|
|
||||||
.nav-link.show,
|
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
color: $navbar-dark-active-color;
|
color: $navbar-dark-active-color;
|
||||||
}
|
}
|
||||||
@ -313,12 +297,10 @@
|
|||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: $navbar-dark-color;
|
color: $navbar-dark-color;
|
||||||
a {
|
a,
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
color: $navbar-dark-active-color;
|
color: $navbar-dark-active-color;
|
||||||
|
|
||||||
@include hover-focus() {
|
|
||||||
color: $navbar-dark-active-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
77
src/assets/styles/bootstrap/_offcanvas.scss
Normal file
77
src/assets/styles/bootstrap/_offcanvas.scss
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
.offcanvas {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: $zindex-offcanvas;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 100%;
|
||||||
|
color: $offcanvas-color;
|
||||||
|
visibility: hidden;
|
||||||
|
background-color: $offcanvas-bg-color;
|
||||||
|
background-clip: padding-box;
|
||||||
|
outline: 0;
|
||||||
|
@include box-shadow($offcanvas-box-shadow);
|
||||||
|
@include transition(transform $offcanvas-transition-duration ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $offcanvas-padding-y $offcanvas-padding-x;
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
|
||||||
|
margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-title {
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: $offcanvas-title-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-body {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: $offcanvas-padding-y $offcanvas-padding-x;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-start {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: $offcanvas-horizontal-width;
|
||||||
|
border-right: $offcanvas-border-width solid $offcanvas-border-color;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-end {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: $offcanvas-horizontal-width;
|
||||||
|
border-left: $offcanvas-border-width solid $offcanvas-border-color;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-bottom {
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: $offcanvas-vertical-height;
|
||||||
|
max-height: 100%;
|
||||||
|
border-top: $offcanvas-border-width solid $offcanvas-border-color;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas.show {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offcanvas-backdrop::before {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-offcanvas - 1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
content: "";
|
||||||
|
background-color: $offcanvas-body-backdrop-color;
|
||||||
|
}
|
||||||
@ -1,60 +1,49 @@
|
|||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
@include list-unstyled();
|
@include list-unstyled();
|
||||||
@include border-radius();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-link {
|
.page-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $pagination-padding-y $pagination-padding-x;
|
|
||||||
margin-left: -$pagination-border-width;
|
|
||||||
line-height: $pagination-line-height;
|
|
||||||
color: $pagination-color;
|
color: $pagination-color;
|
||||||
text-decoration: if($link-decoration == none, null, none);
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
background-color: $pagination-bg;
|
background-color: $pagination-bg;
|
||||||
border: $pagination-border-width solid $pagination-border-color;
|
border: $pagination-border-width solid $pagination-border-color;
|
||||||
|
@include transition($pagination-transition);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: $pagination-hover-color;
|
color: $pagination-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
background-color: $pagination-hover-bg;
|
background-color: $pagination-hover-bg;
|
||||||
border-color: $pagination-hover-border-color;
|
border-color: $pagination-hover-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
color: $pagination-focus-color;
|
||||||
|
background-color: $pagination-focus-bg;
|
||||||
outline: $pagination-focus-outline;
|
outline: $pagination-focus-outline;
|
||||||
box-shadow: $pagination-focus-box-shadow;
|
box-shadow: $pagination-focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item {
|
.page-item {
|
||||||
&:first-child {
|
&:not(:first-child) .page-link {
|
||||||
.page-link {
|
margin-left: $pagination-margin-start;
|
||||||
margin-left: 0;
|
|
||||||
@include border-left-radius($border-radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
.page-link {
|
|
||||||
@include border-right-radius($border-radius);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active .page-link {
|
&.active .page-link {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
color: $pagination-active-color;
|
color: $pagination-active-color;
|
||||||
background-color: $pagination-active-bg;
|
@include gradient-bg($pagination-active-bg);
|
||||||
border-color: $pagination-active-border-color;
|
border-color: $pagination-active-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled .page-link {
|
&.disabled .page-link {
|
||||||
color: $pagination-disabled-color;
|
color: $pagination-disabled-color;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
// Opinionated: remove the "hand" cursor set previously for .page-link
|
|
||||||
cursor: auto;
|
|
||||||
background-color: $pagination-disabled-bg;
|
background-color: $pagination-disabled-bg;
|
||||||
border-color: $pagination-disabled-border-color;
|
border-color: $pagination-disabled-border-color;
|
||||||
}
|
}
|
||||||
@ -64,11 +53,12 @@
|
|||||||
//
|
//
|
||||||
// Sizing
|
// Sizing
|
||||||
//
|
//
|
||||||
|
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
|
||||||
|
|
||||||
.pagination-lg {
|
.pagination-lg {
|
||||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-sm {
|
.pagination-sm {
|
||||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.popover {
|
.popover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0 #{"/* rtl:ignore */"};
|
||||||
z-index: $zindex-popover;
|
z-index: $zindex-popover;
|
||||||
display: block;
|
display: block;
|
||||||
max-width: $popover-max-width;
|
max-width: $popover-max-width;
|
||||||
@ -17,12 +17,11 @@
|
|||||||
@include border-radius($popover-border-radius);
|
@include border-radius($popover-border-radius);
|
||||||
@include box-shadow($popover-box-shadow);
|
@include box-shadow($popover-box-shadow);
|
||||||
|
|
||||||
.arrow {
|
.popover-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: $popover-arrow-width;
|
width: $popover-arrow-width;
|
||||||
height: $popover-arrow-height;
|
height: $popover-arrow-height;
|
||||||
margin: 0 $popover-border-radius;
|
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
@ -36,9 +35,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-top {
|
.bs-popover-top {
|
||||||
margin-bottom: $popover-arrow-height;
|
> .popover-arrow {
|
||||||
|
|
||||||
> .arrow {
|
|
||||||
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -55,14 +52,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-right {
|
.bs-popover-end {
|
||||||
margin-left: $popover-arrow-height;
|
> .popover-arrow {
|
||||||
|
|
||||||
> .arrow {
|
|
||||||
left: subtract(-$popover-arrow-height, $popover-border-width);
|
left: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
width: $popover-arrow-height;
|
width: $popover-arrow-height;
|
||||||
height: $popover-arrow-width;
|
height: $popover-arrow-width;
|
||||||
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -79,9 +73,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-bottom {
|
.bs-popover-bottom {
|
||||||
margin-top: $popover-arrow-height;
|
> .popover-arrow {
|
||||||
|
|
||||||
> .arrow {
|
|
||||||
top: subtract(-$popover-arrow-height, $popover-border-width);
|
top: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
@ -110,14 +102,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-left {
|
.bs-popover-start {
|
||||||
margin-right: $popover-arrow-height;
|
> .popover-arrow {
|
||||||
|
|
||||||
> .arrow {
|
|
||||||
right: subtract(-$popover-arrow-height, $popover-border-width);
|
right: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
width: $popover-arrow-height;
|
width: $popover-arrow-height;
|
||||||
height: $popover-arrow-width;
|
height: $popover-arrow-width;
|
||||||
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -134,21 +123,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bs-popover-auto {
|
.bs-popover-auto {
|
||||||
&[x-placement^="top"] {
|
&[data-popper-placement^="top"] {
|
||||||
@extend .bs-popover-top;
|
@extend .bs-popover-top;
|
||||||
}
|
}
|
||||||
&[x-placement^="right"] {
|
&[data-popper-placement^="right"] {
|
||||||
@extend .bs-popover-right;
|
@extend .bs-popover-end;
|
||||||
}
|
}
|
||||||
&[x-placement^="bottom"] {
|
&[data-popper-placement^="bottom"] {
|
||||||
@extend .bs-popover-bottom;
|
@extend .bs-popover-bottom;
|
||||||
}
|
}
|
||||||
&[x-placement^="left"] {
|
&[data-popper-placement^="left"] {
|
||||||
@extend .bs-popover-left;
|
@extend .bs-popover-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Offset the popover to account for the popover arrow
|
// Offset the popover to account for the popover arrow
|
||||||
.popover-header {
|
.popover-header {
|
||||||
padding: $popover-header-padding-y $popover-header-padding-x;
|
padding: $popover-header-padding-y $popover-header-padding-x;
|
||||||
@ -156,7 +144,7 @@
|
|||||||
@include font-size($font-size-base);
|
@include font-size($font-size-base);
|
||||||
color: $popover-header-color;
|
color: $popover-header-color;
|
||||||
background-color: $popover-header-bg;
|
background-color: $popover-header-bg;
|
||||||
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
|
border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
|
||||||
@include border-top-radius($popover-inner-border-radius);
|
@include border-top-radius($popover-inner-border-radius);
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
|
|||||||
@ -1,141 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
|
||||||
|
|
||||||
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Print styles.
|
|
||||||
// Inlined to avoid the additional HTTP request:
|
|
||||||
// https://www.phpied.com/delay-loading-your-print-css/
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
@if $enable-print-styles {
|
|
||||||
@media print {
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
// Bootstrap specific; comment out `color` and `background`
|
|
||||||
//color: $black !important; // Black prints faster
|
|
||||||
text-shadow: none !important;
|
|
||||||
//background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
&:not(.btn) {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap specific; comment the following selector out
|
|
||||||
//a[href]::after {
|
|
||||||
// content: " (" attr(href) ")";
|
|
||||||
//}
|
|
||||||
|
|
||||||
abbr[title]::after {
|
|
||||||
content: " (" attr(title) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap specific; comment the following selector out
|
|
||||||
//
|
|
||||||
// Don't show links that are fragment identifiers,
|
|
||||||
// or use the `javascript:` pseudo protocol
|
|
||||||
//
|
|
||||||
|
|
||||||
//a[href^="#"]::after,
|
|
||||||
//a[href^="javascript:"]::after {
|
|
||||||
// content: "";
|
|
||||||
//}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
}
|
|
||||||
pre,
|
|
||||||
blockquote {
|
|
||||||
border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Printing Tables:
|
|
||||||
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
|
||||||
//
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: table-header-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr,
|
|
||||||
img {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
orphans: 3;
|
|
||||||
widows: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap specific changes start
|
|
||||||
|
|
||||||
// Specify a size and min-width to make printing closer across browsers.
|
|
||||||
// We don't set margin here because it breaks `size` in Chrome. We also
|
|
||||||
// don't use `!important` on `size` as it breaks in Chrome.
|
|
||||||
@page {
|
|
||||||
size: $print-page-size;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
min-width: $print-body-min-width !important;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
min-width: $print-body-min-width !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap components
|
|
||||||
.navbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.badge {
|
|
||||||
border: $border-width solid $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
border-collapse: collapse !important;
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
background-color: $white !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-bordered {
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
border: 1px solid $gray-300 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-dark {
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
th,
|
|
||||||
td,
|
|
||||||
thead th,
|
|
||||||
tbody + tbody {
|
|
||||||
border-color: $table-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table .thead-dark th {
|
|
||||||
color: inherit;
|
|
||||||
border-color: $table-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap specific changes end
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,16 +1,17 @@
|
|||||||
// Disable animation if transitions are disabled
|
// Disable animation if transitions are disabled
|
||||||
|
|
||||||
|
// scss-docs-start progress-keyframes
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
@keyframes progress-bar-stripes {
|
@keyframes progress-bar-stripes {
|
||||||
from { background-position: $progress-height 0; }
|
0% { background-position-x: $progress-height; }
|
||||||
to { background-position: 0 0; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end progress-keyframes
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $progress-height;
|
height: $progress-height;
|
||||||
overflow: hidden; // force rounded corners by cropping it
|
overflow: hidden; // force rounded corners by cropping it
|
||||||
line-height: 0;
|
|
||||||
@include font-size($progress-font-size);
|
@include font-size($progress-font-size);
|
||||||
background-color: $progress-bg;
|
background-color: $progress-bg;
|
||||||
@include border-radius($progress-border-radius);
|
@include border-radius($progress-border-radius);
|
||||||
@ -36,9 +37,9 @@
|
|||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
.progress-bar-animated {
|
.progress-bar-animated {
|
||||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
animation: $progress-bar-animation-timing progress-bar-stripes;
|
||||||
|
|
||||||
@if $enable-prefers-reduced-motion-media-query {
|
@if $enable-reduced-motion {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
|
|
||||||
// Reboot
|
// Reboot
|
||||||
//
|
//
|
||||||
@ -10,38 +11,37 @@
|
|||||||
|
|
||||||
// Document
|
// Document
|
||||||
//
|
//
|
||||||
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||||
// 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. Change the default tap highlight to be completely transparent in iOS.
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box; // 1
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif; // 2
|
// Root
|
||||||
line-height: 1.15; // 3
|
//
|
||||||
-webkit-text-size-adjust: 100%; // 4
|
// Ability to the value of the root font sizes, affecting the value of `rem`.
|
||||||
-webkit-tap-highlight-color: rgba($black, 0); // 5
|
// null by default, thus nothing is generated.
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-size: $font-size-root;
|
||||||
|
|
||||||
|
@if $enable-smooth-scroll {
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
|
||||||
// TODO: remove in v5
|
|
||||||
// stylelint-disable-next-line selector-list-comma-newline-after
|
|
||||||
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Body
|
// Body
|
||||||
//
|
//
|
||||||
// 1. Remove the margin in all browsers.
|
// 1. Remove the margin in all browsers.
|
||||||
// 2. As a best practice, apply a default `background-color`.
|
// 2. As a best practice, apply a default `background-color`.
|
||||||
// 3. Set an explicit initial text-align value so that we can later use
|
// 3. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
// the `inherit` value on things like `<th>` elements.
|
// 4. Change the default tap highlight to be completely transparent in iOS.
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
@ -50,82 +50,120 @@ body {
|
|||||||
font-weight: $font-weight-base;
|
font-weight: $font-weight-base;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-align: left; // 3
|
text-align: $body-text-align;
|
||||||
background-color: $body-bg; // 2
|
background-color: $body-bg; // 2
|
||||||
}
|
-webkit-text-size-adjust: 100%; // 3
|
||||||
|
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||||
// 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.
|
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Content grouping
|
// Content grouping
|
||||||
//
|
//
|
||||||
// 1. Add the correct box sizing in Firefox.
|
// 1. Reset Firefox's gray color
|
||||||
// 2. Show the overflow in Edge and IE.
|
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
box-sizing: content-box; // 1
|
margin: $hr-margin-y 0;
|
||||||
height: 0; // 1
|
color: $hr-color; // 1
|
||||||
overflow: visible; // 2
|
background-color: currentColor;
|
||||||
|
border: 0;
|
||||||
|
opacity: $hr-opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr:not([size]) {
|
||||||
|
height: $hr-height; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Typography
|
// Typography
|
||||||
//
|
//
|
||||||
|
// 1. Remove top margins from headings
|
||||||
|
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||||
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
|
||||||
// Remove top margins from headings
|
%heading {
|
||||||
//
|
margin-top: 0; // 1
|
||||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
|
||||||
// margin for easier control within type scales as it avoids margin collapsing.
|
|
||||||
// stylelint-disable-next-line selector-list-comma-newline-after
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: $headings-margin-bottom;
|
margin-bottom: $headings-margin-bottom;
|
||||||
|
font-family: $headings-font-family;
|
||||||
|
font-style: $headings-font-style;
|
||||||
|
font-weight: $headings-font-weight;
|
||||||
|
line-height: $headings-line-height;
|
||||||
|
color: $headings-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h1-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h2-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h3-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h4-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h5-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h6-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Reset margins on paragraphs
|
// Reset margins on paragraphs
|
||||||
//
|
//
|
||||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||||
// bottom margin to use `rem` units instead of `em`.
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: $paragraph-margin-bottom;
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
//
|
//
|
||||||
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
|
// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
|
||||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
|
||||||
// 3. Add explicit cursor to indicate changed behavior.
|
// 3. Add explicit cursor to indicate changed behavior.
|
||||||
// 4. Remove the bottom border in Firefox 39-.
|
// 4. Prevent the text-decoration to be skipped.
|
||||||
// 5. Prevent the text-decoration to be skipped.
|
|
||||||
|
|
||||||
abbr[title],
|
abbr[title],
|
||||||
abbr[data-original-title] { // 1
|
abbr[data-bs-original-title] { // 1
|
||||||
text-decoration: underline; // 2
|
|
||||||
text-decoration: underline dotted; // 2
|
text-decoration: underline dotted; // 2
|
||||||
cursor: help; // 3
|
cursor: help; // 3
|
||||||
border-bottom: 0; // 4
|
text-decoration-skip-ink: none; // 4
|
||||||
text-decoration-skip-ink: none; // 5
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Address
|
||||||
|
|
||||||
address {
|
address {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Lists
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
dl {
|
dl {
|
||||||
@ -144,33 +182,57 @@ dt {
|
|||||||
font-weight: $dt-font-weight;
|
font-weight: $dt-font-weight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Undo browser default
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
margin-left: 0; // Undo browser default
|
margin-left: 0; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Blockquote
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Strong
|
||||||
|
//
|
||||||
|
// Add the correct font weight in Chrome, Edge, and Safari
|
||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
font-weight: $font-weight-bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Small
|
||||||
|
//
|
||||||
|
// Add the correct font size in all browsers
|
||||||
|
|
||||||
small {
|
small {
|
||||||
@include font-size(80%); // Add the correct font size in all browsers
|
@include font-size($small-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Mark
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: $mark-padding;
|
||||||
|
background-color: $mark-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sub and Sup
|
||||||
//
|
//
|
||||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
// all browsers.
|
// all browsers.
|
||||||
//
|
|
||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
@include font-size(75%);
|
@include font-size($sub-sup-font-size);
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
@ -179,16 +241,13 @@ sub { bottom: -.25em; }
|
|||||||
sup { top: -.5em; }
|
sup { top: -.5em; }
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Links
|
// Links
|
||||||
//
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
background-color: transparent; // Remove the gray background on active links in IE 10.
|
|
||||||
|
|
||||||
@include hover() {
|
&:hover {
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
@ -200,82 +259,103 @@ a {
|
|||||||
// See https://github.com/twbs/bootstrap/issues/19402
|
// See https://github.com/twbs/bootstrap/issues/19402
|
||||||
|
|
||||||
a:not([href]):not([class]) {
|
a:not([href]):not([class]) {
|
||||||
color: inherit;
|
&,
|
||||||
text-decoration: none;
|
&:hover {
|
||||||
|
|
||||||
@include hover() {
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Code
|
// Code
|
||||||
//
|
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: $font-family-monospace;
|
font-family: $font-family-code;
|
||||||
@include 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.
|
||||||
|
direction: ltr #{"/* rtl:ignore */"};
|
||||||
|
unicode-bidi: bidi-override;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Remove browser default top margin
|
||||||
|
// 2. Reset browser default of `1em` to use `rem`s
|
||||||
|
// 3. Don't allow content to break outside
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
// Remove browser default top margin
|
display: block;
|
||||||
margin-top: 0;
|
margin-top: 0; // 1
|
||||||
// Reset browser default of `1em` to use `rem`s
|
margin-bottom: 1rem; // 2
|
||||||
margin-bottom: 1rem;
|
overflow: auto; // 3
|
||||||
// Don't allow content to break outside
|
@include font-size($code-font-size);
|
||||||
overflow: auto;
|
color: $pre-color;
|
||||||
// Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
|
|
||||||
// making it impossible to interact with the content
|
// Account for some code outputs that place code tags in pre tags
|
||||||
-ms-overflow-style: scrollbar;
|
code {
|
||||||
|
@include font-size(inherit);
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
@include font-size($code-font-size);
|
||||||
|
color: $code-color;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
// Streamline the style when inside anchors to avoid broken underline and more
|
||||||
|
a > & {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: $kbd-padding-y $kbd-padding-x;
|
||||||
|
@include font-size($kbd-font-size);
|
||||||
|
color: $kbd-color;
|
||||||
|
background-color: $kbd-bg;
|
||||||
|
@include border-radius($border-radius-sm);
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0;
|
||||||
|
@include font-size(1em);
|
||||||
|
font-weight: $nested-kbd-font-weight;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Figures
|
// Figures
|
||||||
//
|
//
|
||||||
|
// Apply a consistent margin strategy (matches our type styles).
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
// Apply a consistent margin strategy (matches our type styles).
|
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Images and content
|
// Images and content
|
||||||
//
|
|
||||||
|
|
||||||
img {
|
|
||||||
vertical-align: middle;
|
|
||||||
border-style: none; // Remove the border on images inside links in IE 10-.
|
|
||||||
}
|
|
||||||
|
|
||||||
|
img,
|
||||||
svg {
|
svg {
|
||||||
// Workaround for the SVG overflow bug in IE10/11 is still required.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/26878
|
|
||||||
overflow: hidden;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Tables
|
// Tables
|
||||||
//
|
//
|
||||||
|
// Prevent double borders
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse; // Prevent double borders
|
caption-side: bottom;
|
||||||
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
padding-top: $table-cell-padding;
|
padding-top: $table-cell-padding-y;
|
||||||
padding-bottom: $table-cell-padding;
|
padding-bottom: $table-cell-padding-y;
|
||||||
color: $table-caption-color;
|
color: $table-caption-color;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
caption-side: bottom;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Removes font-weight bold by inheriting
|
// 1. Removes font-weight bold by inheriting
|
||||||
@ -288,55 +368,61 @@ th {
|
|||||||
text-align: -webkit-match-parent; // 3
|
text-align: -webkit-match-parent; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Forms
|
// Forms
|
||||||
//
|
//
|
||||||
|
// 1. Allow labels to use `margin` for spacing.
|
||||||
|
|
||||||
label {
|
label {
|
||||||
// Allow labels to use `margin` for spacing.
|
display: inline-block; // 1
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: $label-margin-bottom;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the default `border-radius` that macOS Chrome adds.
|
// Remove the default `border-radius` that macOS Chrome adds.
|
||||||
//
|
// See https://github.com/twbs/bootstrap/issues/24093
|
||||||
// Details at https://github.com/twbs/bootstrap/issues/24093
|
|
||||||
button {
|
button {
|
||||||
// stylelint-disable-next-line property-disallowed-list
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Work around a Firefox/IE bug where the transparent `button` background
|
// Explicitly remove focus outline in Chromium when it shouldn't be
|
||||||
// results in a loss of the default `button` focus styles.
|
// visible (e.g. as result of mouse click or touch tap). It already
|
||||||
//
|
// should be doing this automatically, but seems to currently be
|
||||||
// Credit: https://github.com/suitcss/base/
|
// confused and applies its very visible two-tone outline anyway.
|
||||||
button:focus {
|
|
||||||
outline: 1px dotted;
|
button:focus:not(:focus-visible) {
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Remove the margin in Firefox and Safari
|
||||||
|
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
select,
|
select,
|
||||||
optgroup,
|
optgroup,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0; // Remove the margin in Firefox and Safari
|
margin: 0; // 1
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
@include font-size(inherit);
|
@include font-size(inherit);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
// Remove the inheritance of text transform in Firefox
|
||||||
input {
|
|
||||||
overflow: visible; // Show the overflow in Edge
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
text-transform: none; // Remove the inheritance of text transform in Firefox
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the cursor for non-`<button>` buttons
|
// Set the cursor for non-`<button>` buttons
|
||||||
//
|
//
|
||||||
// Details at https://github.com/twbs/bootstrap/pull/30562
|
// Details at https://github.com/twbs/bootstrap/pull/30562
|
||||||
@ -344,141 +430,192 @@ select {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inheritance of word-wrap in Safari.
|
|
||||||
//
|
|
||||||
// Details at https://github.com/twbs/bootstrap/issues/24990
|
|
||||||
select {
|
select {
|
||||||
|
// Remove the inheritance of word-wrap in Safari.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/24990
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
|
|
||||||
|
// Undo the opacity change from Chrome
|
||||||
|
&:disabled {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove the dropdown arrow in Chrome from inputs built with datalists.
|
||||||
|
// See https://stackoverflow.com/a/54997118
|
||||||
|
|
||||||
|
[list]::-webkit-calendar-picker-indicator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
// controls in Android 4.
|
// controls in Android 4.
|
||||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"], // 1
|
[type="button"], // 1
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button; // 2
|
-webkit-appearance: button; // 2
|
||||||
}
|
|
||||||
|
|
||||||
// Opinionated: add "hand" cursor to non-disabled button elements.
|
@if $enable-button-pointers {
|
||||||
@if $enable-pointer-cursor-for-buttons {
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
&:not(:disabled) {
|
&:not(:disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer; // 3
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
::-moz-focus-inner {
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"],
|
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
input[type="checkbox"] {
|
|
||||||
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
|
|
||||||
padding: 0; // 2. Remove the padding in IE 10-
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto; // Remove the default vertical scrollbar in IE.
|
resize: vertical; // 1
|
||||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
|
||||||
resize: vertical;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
|
||||||
|
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||||
|
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/12359
|
||||||
|
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||||
|
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
// Browsers set a default `min-width: min-content;` on fieldsets,
|
min-width: 0; // 1
|
||||||
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
padding: 0; // 2
|
||||||
// So we reset that to ensure fieldsets behave more like a standard block element.
|
margin: 0; // 2
|
||||||
// See https://github.com/twbs/bootstrap/issues/12359
|
border: 0; // 2
|
||||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
|
||||||
min-width: 0;
|
|
||||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the text wrapping in Edge and IE.
|
// 1. By using `float: left`, the legend will behave like a block element.
|
||||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
// This way the border of a fieldset wraps around the legend if present.
|
||||||
|
// 2. Fix wrapping bug.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/29712
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
display: block;
|
float: left; // 1
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%; // 1
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: $legend-margin-bottom;
|
||||||
@include font-size(1.5rem);
|
@include font-size($legend-font-size);
|
||||||
|
font-weight: $legend-font-weight;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
color: inherit; // 2
|
|
||||||
white-space: normal; // 1
|
+ * {
|
||||||
|
clear: left; // 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
// Fix height of inputs with a type of datetime-local, date, month, week, or time
|
||||||
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
// See https://github.com/twbs/bootstrap/issues/18842
|
||||||
|
|
||||||
|
::-webkit-datetime-edit-fields-wrapper,
|
||||||
|
::-webkit-datetime-edit-text,
|
||||||
|
::-webkit-datetime-edit-minute,
|
||||||
|
::-webkit-datetime-edit-hour-field,
|
||||||
|
::-webkit-datetime-edit-day-field,
|
||||||
|
::-webkit-datetime-edit-month-field,
|
||||||
|
::-webkit-datetime-edit-year-field {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
::-webkit-inner-spin-button {
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Correct the outline style in Safari.
|
||||||
|
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
|
||||||
|
// `.form-control` class can properly style them. Note that this cannot simply
|
||||||
|
// be added to `.form-control` as it's not specific enough. For details, see
|
||||||
|
// https://github.com/twbs/bootstrap/issues/11586.
|
||||||
|
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
outline-offset: -2px; // 1
|
||||||
// `.form-control` class can properly style them. Note that this cannot simply
|
-webkit-appearance: textfield; // 2
|
||||||
// be added to `.form-control` as it's not specific enough. For details, see
|
|
||||||
// https://github.com/twbs/bootstrap/issues/11586.
|
|
||||||
outline-offset: -2px; // 2. Correct the outline style in Safari.
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
// 1. A few input types should stay LTR
|
||||||
|
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
|
||||||
|
// 2. RTL only output
|
||||||
|
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
|
||||||
|
|
||||||
|
/* rtl:raw:
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="email"],
|
||||||
|
[type="number"] {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
// Remove the inner padding in Chrome and Safari on macOS.
|
// Remove the inner padding in Chrome and Safari on macOS.
|
||||||
//
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
// Remove padding around color pickers in webkit browsers
|
||||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
// 2. Change font properties to `inherit` in Safari.
|
::-webkit-color-swatch-wrapper {
|
||||||
//
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Inherit font family and line height for file input buttons
|
||||||
|
|
||||||
|
::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Change font properties to `inherit`
|
||||||
|
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
font: inherit; // 2
|
font: inherit; // 1
|
||||||
-webkit-appearance: button; // 1
|
-webkit-appearance: button; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
// Correct element displays
|
// Correct element displays
|
||||||
//
|
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove border from iframe
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Summary
|
||||||
|
//
|
||||||
|
// 1. Add the correct display in all browsers
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item; // Add the correct display in all browsers
|
display: list-item; // 1
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
template {
|
|
||||||
display: none; // Add the correct display in IE
|
// Progress
|
||||||
|
//
|
||||||
|
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
|
||||||
// Needed for proper display in IE 10-.
|
// Hidden attribute
|
||||||
|
//
|
||||||
|
// Always hide an element with the `hidden` HTML attribute.
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,16 @@
|
|||||||
// Do not forget to update getting-started/theming.md!
|
|
||||||
:root {
|
:root {
|
||||||
// Custom variable values only support SassScript inside `#{}`.
|
// Custom variable values only support SassScript inside `#{}`.
|
||||||
@each $color, $value in $colors {
|
@each $color, $value in $colors {
|
||||||
--#{$color}: #{$value};
|
--#{$variable-prefix}#{$color}: #{$value};
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
--#{$color}: #{$value};
|
--#{$variable-prefix}#{$color}: #{$value};
|
||||||
}
|
|
||||||
|
|
||||||
@each $bp, $value in $grid-breakpoints {
|
|
||||||
--breakpoint-#{$bp}: #{$value};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use `inspect` for lists so that quoted items keep the quotes.
|
// Use `inspect` for lists so that quoted items keep the quotes.
|
||||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||||
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
||||||
--font-family-monospace: #{inspect($font-family-monospace)};
|
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
|
||||||
|
--#{$variable-prefix}gradient: #{$gradient};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,9 +2,11 @@
|
|||||||
// Rotating border
|
// Rotating border
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// scss-docs-start spinner-border-keyframes
|
||||||
@keyframes spinner-border {
|
@keyframes spinner-border {
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
|
||||||
}
|
}
|
||||||
|
// scss-docs-end spinner-border-keyframes
|
||||||
|
|
||||||
.spinner-border {
|
.spinner-border {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -15,7 +17,7 @@
|
|||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
// stylelint-disable-next-line property-disallowed-list
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spinner-border .75s linear infinite;
|
animation: $spinner-animation-speed linear infinite spinner-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner-border-sm {
|
.spinner-border-sm {
|
||||||
@ -28,6 +30,7 @@
|
|||||||
// Growing circle
|
// Growing circle
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// scss-docs-start spinner-grow-keyframes
|
||||||
@keyframes spinner-grow {
|
@keyframes spinner-grow {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
@ -37,6 +40,7 @@
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end spinner-grow-keyframes
|
||||||
|
|
||||||
.spinner-grow {
|
.spinner-grow {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -47,10 +51,19 @@
|
|||||||
// stylelint-disable-next-line property-disallowed-list
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: spinner-grow .75s linear infinite;
|
animation: $spinner-animation-speed linear infinite spinner-grow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner-grow-sm {
|
.spinner-grow-sm {
|
||||||
width: $spinner-width-sm;
|
width: $spinner-width-sm;
|
||||||
height: $spinner-height-sm;
|
height: $spinner-height-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if $enable-reduced-motion {
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.spinner-border,
|
||||||
|
.spinner-grow {
|
||||||
|
animation-duration: $spinner-animation-speed * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -3,37 +3,64 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
|
--#{$variable-prefix}table-bg: #{$table-bg};
|
||||||
|
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
|
||||||
|
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
|
||||||
|
--#{$variable-prefix}table-active-color: #{$table-active-color};
|
||||||
|
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
|
||||||
|
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
|
||||||
|
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
color: $table-color;
|
color: $table-color;
|
||||||
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
|
vertical-align: $table-cell-vertical-align;
|
||||||
|
border-color: $table-border-color;
|
||||||
|
|
||||||
th,
|
// Target th & td
|
||||||
td {
|
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
|
||||||
padding: $table-cell-padding;
|
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
|
||||||
vertical-align: top;
|
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
|
||||||
border-top: $table-border-width solid $table-border-color;
|
// stylelint-disable-next-line selector-max-universal
|
||||||
|
> :not(caption) > * > * {
|
||||||
|
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||||
|
background-color: var(--#{$variable-prefix}table-bg);
|
||||||
|
border-bottom-width: $table-border-width;
|
||||||
|
box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th {
|
> tbody {
|
||||||
|
vertical-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
> thead {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody + tbody {
|
// Highlight border color between thead, tbody and tfoot.
|
||||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
> :not(:last-child) > :last-child > * {
|
||||||
|
border-bottom-color: $table-group-separator-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Change placement of captions with a class
|
||||||
|
//
|
||||||
|
|
||||||
|
.caption-top {
|
||||||
|
caption-side: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Condensed table w/ half padding
|
// Condensed table w/ half padding
|
||||||
//
|
//
|
||||||
|
|
||||||
.table-sm {
|
.table-sm {
|
||||||
th,
|
// stylelint-disable-next-line selector-max-universal
|
||||||
td {
|
> :not(caption) > * > * {
|
||||||
padding: $table-cell-padding-sm;
|
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -41,29 +68,27 @@
|
|||||||
// Border versions
|
// Border versions
|
||||||
//
|
//
|
||||||
// Add or remove borders all around the table and between all the columns.
|
// Add or remove borders all around the table and between all the columns.
|
||||||
|
//
|
||||||
|
// When borders are added on all sides of the cells, the corners can render odd when
|
||||||
|
// these borders do not have the same color or if they are semi-transparent.
|
||||||
|
// Therefor we add top and border bottoms to the `tr`s and left and right borders
|
||||||
|
// to the `td`s or `th`s
|
||||||
|
|
||||||
.table-bordered {
|
.table-bordered {
|
||||||
border: $table-border-width solid $table-border-color;
|
> :not(caption) > * {
|
||||||
|
border-width: $table-border-width 0;
|
||||||
|
|
||||||
th,
|
// stylelint-disable-next-line selector-max-universal
|
||||||
td {
|
> * {
|
||||||
border: $table-border-width solid $table-border-color;
|
border-width: 0 $table-border-width;
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
border-bottom-width: 2 * $table-border-width;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-borderless {
|
.table-borderless {
|
||||||
th,
|
// stylelint-disable-next-line selector-max-universal
|
||||||
td,
|
> :not(caption) > * > * {
|
||||||
thead th,
|
border-bottom-width: 0;
|
||||||
tbody + tbody {
|
|
||||||
border: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,114 +97,54 @@
|
|||||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||||
|
|
||||||
.table-striped {
|
.table-striped {
|
||||||
tbody tr:nth-of-type(#{$table-striped-order}) {
|
> tbody > tr:nth-of-type(#{$table-striped-order}) {
|
||||||
background-color: $table-accent-bg;
|
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
|
||||||
|
color: var(--#{$variable-prefix}table-striped-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Active table
|
||||||
|
//
|
||||||
|
// The `.table-active` class can be added to highlight rows or cells
|
||||||
|
|
||||||
|
.table-active {
|
||||||
|
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
|
||||||
|
color: var(--#{$variable-prefix}table-active-color);
|
||||||
|
}
|
||||||
|
|
||||||
// Hover effect
|
// Hover effect
|
||||||
//
|
//
|
||||||
// Placed here since it has to come after the potential zebra striping
|
// Placed here since it has to come after the potential zebra striping
|
||||||
|
|
||||||
.table-hover {
|
.table-hover {
|
||||||
tbody tr {
|
> tbody > tr:hover {
|
||||||
@include hover() {
|
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
|
||||||
color: $table-hover-color;
|
color: var(--#{$variable-prefix}table-hover-color);
|
||||||
background-color: $table-hover-bg;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Table backgrounds
|
// Table variants
|
||||||
//
|
//
|
||||||
// Exact selectors below required to override `.table-striped` and prevent
|
// Table variants set the table cell backgrounds, border colors
|
||||||
// inheritance to nested tables.
|
// and the colors of the striped, hovered & active tables
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $table-variants {
|
||||||
@include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
|
@include table-variant($color, $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include table-row-variant(active, $table-active-bg);
|
|
||||||
|
|
||||||
|
|
||||||
// Dark styles
|
|
||||||
//
|
|
||||||
// Same table markup, but inverted color scheme: dark background and light text.
|
|
||||||
|
|
||||||
// stylelint-disable-next-line no-duplicate-selectors
|
|
||||||
.table {
|
|
||||||
.thead-dark {
|
|
||||||
th {
|
|
||||||
color: $table-dark-color;
|
|
||||||
background-color: $table-dark-bg;
|
|
||||||
border-color: $table-dark-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.thead-light {
|
|
||||||
th {
|
|
||||||
color: $table-head-color;
|
|
||||||
background-color: $table-head-bg;
|
|
||||||
border-color: $table-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-dark {
|
|
||||||
color: $table-dark-color;
|
|
||||||
background-color: $table-dark-bg;
|
|
||||||
|
|
||||||
th,
|
|
||||||
td,
|
|
||||||
thead th {
|
|
||||||
border-color: $table-dark-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-bordered {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-striped {
|
|
||||||
tbody tr:nth-of-type(#{$table-striped-order}) {
|
|
||||||
background-color: $table-dark-accent-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.table-hover {
|
|
||||||
tbody tr {
|
|
||||||
@include hover() {
|
|
||||||
color: $table-dark-hover-color;
|
|
||||||
background-color: $table-dark-hover-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Responsive tables
|
// Responsive tables
|
||||||
//
|
//
|
||||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||||
// size of where your table will overflow.
|
// size of where your table will overflow.
|
||||||
|
|
||||||
.table-responsive {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
|
||||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
|
||||||
|
|
||||||
&#{$infix} {
|
@include media-breakpoint-down($breakpoint) {
|
||||||
@include media-breakpoint-down($breakpoint) {
|
.table-responsive#{$infix} {
|
||||||
display: block;
|
overflow-x: auto;
|
||||||
width: 100%;
|
-webkit-overflow-scrolling: touch;
|
||||||
overflow-x: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
// Prevent double border on horizontal scroll due to use of `display: block;`
|
|
||||||
> .table-bordered {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,28 +1,17 @@
|
|||||||
.toast {
|
.toast {
|
||||||
// Prevents from shrinking in IE11, when in a flex container
|
width: $toast-max-width;
|
||||||
// See https://github.com/twbs/bootstrap/issues/28341
|
max-width: 100%;
|
||||||
flex-basis: $toast-max-width;
|
|
||||||
max-width: $toast-max-width;
|
|
||||||
@include font-size($toast-font-size);
|
@include font-size($toast-font-size);
|
||||||
color: $toast-color;
|
color: $toast-color;
|
||||||
|
pointer-events: auto;
|
||||||
background-color: $toast-background-color;
|
background-color: $toast-background-color;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $toast-border-width solid $toast-border-color;
|
border: $toast-border-width solid $toast-border-color;
|
||||||
box-shadow: $toast-box-shadow;
|
box-shadow: $toast-box-shadow;
|
||||||
opacity: 0;
|
|
||||||
@include border-radius($toast-border-radius);
|
@include border-radius($toast-border-radius);
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(.showing):not(.show) {
|
||||||
margin-bottom: $toast-padding-x;
|
opacity: 0;
|
||||||
}
|
|
||||||
|
|
||||||
&.showing {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
@ -30,6 +19,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast-container {
|
||||||
|
width: max-content;
|
||||||
|
max-width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
> :not(:last-child) {
|
||||||
|
margin-bottom: $toast-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.toast-header {
|
.toast-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -39,8 +38,14 @@
|
|||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-bottom: $toast-border-width solid $toast-header-border-color;
|
border-bottom: $toast-border-width solid $toast-header-border-color;
|
||||||
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
|
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
margin-right: $toast-padding-x / -2;
|
||||||
|
margin-left: $toast-padding-x;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-body {
|
.toast-body {
|
||||||
padding: $toast-padding-x; // apply to both vertical and horizontal
|
padding: $toast-padding-x; // apply to both vertical and horizontal
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
&.show { opacity: $tooltip-opacity; }
|
&.show { opacity: $tooltip-opacity; }
|
||||||
|
|
||||||
.arrow {
|
.tooltip-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: $tooltip-arrow-width;
|
width: $tooltip-arrow-width;
|
||||||
@ -32,27 +32,27 @@
|
|||||||
.bs-tooltip-top {
|
.bs-tooltip-top {
|
||||||
padding: $tooltip-arrow-height 0;
|
padding: $tooltip-arrow-height 0;
|
||||||
|
|
||||||
.arrow {
|
.tooltip-arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: 0;
|
top: -1px;
|
||||||
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||||
border-top-color: $tooltip-arrow-color;
|
border-top-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-tooltip-right {
|
.bs-tooltip-end {
|
||||||
padding: 0 $tooltip-arrow-height;
|
padding: 0 $tooltip-arrow-height;
|
||||||
|
|
||||||
.arrow {
|
.tooltip-arrow {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: $tooltip-arrow-height;
|
width: $tooltip-arrow-height;
|
||||||
height: $tooltip-arrow-width;
|
height: $tooltip-arrow-width;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
right: 0;
|
right: -1px;
|
||||||
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
|
||||||
border-right-color: $tooltip-arrow-color;
|
border-right-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
@ -62,27 +62,27 @@
|
|||||||
.bs-tooltip-bottom {
|
.bs-tooltip-bottom {
|
||||||
padding: $tooltip-arrow-height 0;
|
padding: $tooltip-arrow-height 0;
|
||||||
|
|
||||||
.arrow {
|
.tooltip-arrow {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: 0;
|
bottom: -1px;
|
||||||
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||||
border-bottom-color: $tooltip-arrow-color;
|
border-bottom-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-tooltip-left {
|
.bs-tooltip-start {
|
||||||
padding: 0 $tooltip-arrow-height;
|
padding: 0 $tooltip-arrow-height;
|
||||||
|
|
||||||
.arrow {
|
.tooltip-arrow {
|
||||||
right: 0;
|
right: 0;
|
||||||
width: $tooltip-arrow-height;
|
width: $tooltip-arrow-height;
|
||||||
height: $tooltip-arrow-width;
|
height: $tooltip-arrow-width;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: 0;
|
left: -1px;
|
||||||
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
|
||||||
border-left-color: $tooltip-arrow-color;
|
border-left-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
@ -90,17 +90,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bs-tooltip-auto {
|
.bs-tooltip-auto {
|
||||||
&[x-placement^="top"] {
|
&[data-popper-placement^="top"] {
|
||||||
@extend .bs-tooltip-top;
|
@extend .bs-tooltip-top;
|
||||||
}
|
}
|
||||||
&[x-placement^="right"] {
|
&[data-popper-placement^="right"] {
|
||||||
@extend .bs-tooltip-right;
|
@extend .bs-tooltip-end;
|
||||||
}
|
}
|
||||||
&[x-placement^="bottom"] {
|
&[data-popper-placement^="bottom"] {
|
||||||
@extend .bs-tooltip-bottom;
|
@extend .bs-tooltip-bottom;
|
||||||
}
|
}
|
||||||
&[x-placement^="left"] {
|
&[data-popper-placement^="left"] {
|
||||||
@extend .bs-tooltip-left;
|
@extend .bs-tooltip-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// scss-docs-start collapse-classes
|
||||||
.collapse {
|
.collapse {
|
||||||
&:not(.show) {
|
&:not(.show) {
|
||||||
display: none;
|
display: none;
|
||||||
@ -13,8 +14,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.collapsing {
|
.collapsing {
|
||||||
position: relative;
|
|
||||||
height: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@include transition($transition-collapse);
|
@include transition($transition-collapse);
|
||||||
}
|
}
|
||||||
|
// scss-docs-end collapse-classes
|
||||||
|
|||||||
@ -1,24 +1,30 @@
|
|||||||
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Headings
|
// Headings
|
||||||
//
|
//
|
||||||
|
.h1 {
|
||||||
h1, h2, h3, h4, h5, h6,
|
@extend h1;
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
}
|
||||||
margin-bottom: $headings-margin-bottom;
|
|
||||||
font-family: $headings-font-family;
|
.h2 {
|
||||||
font-weight: $headings-font-weight;
|
@extend h2;
|
||||||
line-height: $headings-line-height;
|
}
|
||||||
color: $headings-color;
|
|
||||||
|
.h3 {
|
||||||
|
@extend h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h4 {
|
||||||
|
@extend h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5 {
|
||||||
|
@extend h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h6 {
|
||||||
|
@extend h6;
|
||||||
}
|
}
|
||||||
|
|
||||||
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 {
|
.lead {
|
||||||
@include font-size($lead-font-size);
|
@include font-size($lead-font-size);
|
||||||
@ -26,57 +32,25 @@ h6, .h6 { @include font-size($h6-font-size); }
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Type display classes
|
// Type display classes
|
||||||
.display-1 {
|
@each $display, $font-size in $display-font-sizes {
|
||||||
@include font-size($display1-size);
|
.display-#{$display} {
|
||||||
font-weight: $display1-weight;
|
@include font-size($font-size);
|
||||||
line-height: $display-line-height;
|
font-weight: $display-font-weight;
|
||||||
|
line-height: $display-line-height;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.display-2 {
|
|
||||||
@include font-size($display2-size);
|
|
||||||
font-weight: $display2-weight;
|
|
||||||
line-height: $display-line-height;
|
|
||||||
}
|
|
||||||
.display-3 {
|
|
||||||
@include font-size($display3-size);
|
|
||||||
font-weight: $display3-weight;
|
|
||||||
line-height: $display-line-height;
|
|
||||||
}
|
|
||||||
.display-4 {
|
|
||||||
@include font-size($display4-size);
|
|
||||||
font-weight: $display4-weight;
|
|
||||||
line-height: $display-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Horizontal rules
|
|
||||||
//
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: $hr-margin-y;
|
|
||||||
margin-bottom: $hr-margin-y;
|
|
||||||
border: 0;
|
|
||||||
border-top: $hr-border-width solid $hr-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Emphasis
|
// Emphasis
|
||||||
//
|
//
|
||||||
|
|
||||||
small,
|
|
||||||
.small {
|
.small {
|
||||||
@include font-size($small-font-size);
|
@extend small;
|
||||||
font-weight: $font-weight-normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mark,
|
|
||||||
.mark {
|
.mark {
|
||||||
padding: $mark-padding;
|
@extend mark;
|
||||||
background-color: $mark-bg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Lists
|
// Lists
|
||||||
//
|
//
|
||||||
@ -104,20 +78,25 @@ mark,
|
|||||||
|
|
||||||
// Builds on `abbr`
|
// Builds on `abbr`
|
||||||
.initialism {
|
.initialism {
|
||||||
@include font-size(90%);
|
@include font-size($initialism-font-size);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blockquotes
|
// Blockquotes
|
||||||
.blockquote {
|
.blockquote {
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $blockquote-margin-y;
|
||||||
@include font-size($blockquote-font-size);
|
@include font-size($blockquote-font-size);
|
||||||
|
|
||||||
|
> :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blockquote-footer {
|
.blockquote-footer {
|
||||||
display: block;
|
margin-top: -$blockquote-margin-y;
|
||||||
@include font-size($blockquote-small-font-size);
|
margin-bottom: $blockquote-margin-y;
|
||||||
color: $blockquote-small-color;
|
@include font-size($blockquote-footer-font-size);
|
||||||
|
color: $blockquote-footer-color;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "\2014\00A0"; // em dash, nbsp
|
content: "\2014\00A0"; // em dash, nbsp
|
||||||
|
|||||||
@ -1,18 +1,594 @@
|
|||||||
@import "utilities/align";
|
// stylelint-disable indentation
|
||||||
@import "utilities/background";
|
|
||||||
@import "utilities/borders";
|
// Utilities
|
||||||
@import "utilities/clearfix";
|
|
||||||
@import "utilities/display";
|
$utilities: () !default;
|
||||||
@import "utilities/embed";
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
@import "utilities/flex";
|
$utilities: map-merge(
|
||||||
@import "utilities/float";
|
(
|
||||||
@import "utilities/interactions";
|
// scss-docs-start utils-vertical-align
|
||||||
@import "utilities/overflow";
|
"align": (
|
||||||
@import "utilities/position";
|
property: vertical-align,
|
||||||
@import "utilities/screenreaders";
|
class: align,
|
||||||
@import "utilities/shadows";
|
values: baseline top middle bottom text-bottom text-top
|
||||||
@import "utilities/sizing";
|
),
|
||||||
@import "utilities/spacing";
|
// scss-docs-end utils-vertical-align
|
||||||
@import "utilities/stretched-link";
|
// scss-docs-start utils-float
|
||||||
@import "utilities/text";
|
"float": (
|
||||||
@import "utilities/visibility";
|
responsive: true,
|
||||||
|
property: float,
|
||||||
|
values: (
|
||||||
|
start: left,
|
||||||
|
end: right,
|
||||||
|
none: none,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-float
|
||||||
|
// scss-docs-start utils-overflow
|
||||||
|
"overflow": (
|
||||||
|
property: overflow,
|
||||||
|
values: auto hidden visible scroll,
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-overflow
|
||||||
|
// scss-docs-start utils-display
|
||||||
|
"display": (
|
||||||
|
responsive: true,
|
||||||
|
print: true,
|
||||||
|
property: display,
|
||||||
|
class: d,
|
||||||
|
values: inline inline-block block grid table table-row table-cell flex inline-flex none
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-display
|
||||||
|
// scss-docs-start utils-shadow
|
||||||
|
"shadow": (
|
||||||
|
property: box-shadow,
|
||||||
|
class: shadow,
|
||||||
|
values: (
|
||||||
|
null: $box-shadow,
|
||||||
|
sm: $box-shadow-sm,
|
||||||
|
lg: $box-shadow-lg,
|
||||||
|
none: none,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-shadow
|
||||||
|
// scss-docs-start utils-position
|
||||||
|
"position": (
|
||||||
|
property: position,
|
||||||
|
values: static relative absolute fixed sticky
|
||||||
|
),
|
||||||
|
"top": (
|
||||||
|
property: top,
|
||||||
|
values: $position-values
|
||||||
|
),
|
||||||
|
"bottom": (
|
||||||
|
property: bottom,
|
||||||
|
values: $position-values
|
||||||
|
),
|
||||||
|
"start": (
|
||||||
|
property: left,
|
||||||
|
class: start,
|
||||||
|
values: $position-values
|
||||||
|
),
|
||||||
|
"end": (
|
||||||
|
property: right,
|
||||||
|
class: end,
|
||||||
|
values: $position-values
|
||||||
|
),
|
||||||
|
"translate-middle": (
|
||||||
|
property: transform,
|
||||||
|
class: translate-middle,
|
||||||
|
values: (
|
||||||
|
null: translate(-50%, -50%),
|
||||||
|
x: translateX(-50%),
|
||||||
|
y: translateY(-50%),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-position
|
||||||
|
// scss-docs-start utils-borders
|
||||||
|
"border": (
|
||||||
|
property: border,
|
||||||
|
values: (
|
||||||
|
null: $border-width solid $border-color,
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-top": (
|
||||||
|
property: border-top,
|
||||||
|
values: (
|
||||||
|
null: $border-width solid $border-color,
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-end": (
|
||||||
|
property: border-right,
|
||||||
|
class: border-end,
|
||||||
|
values: (
|
||||||
|
null: $border-width solid $border-color,
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-bottom": (
|
||||||
|
property: border-bottom,
|
||||||
|
values: (
|
||||||
|
null: $border-width solid $border-color,
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-start": (
|
||||||
|
property: border-left,
|
||||||
|
class: border-start,
|
||||||
|
values: (
|
||||||
|
null: $border-width solid $border-color,
|
||||||
|
0: 0,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"border-color": (
|
||||||
|
property: border-color,
|
||||||
|
class: border,
|
||||||
|
values: map-merge($theme-colors, ("white": $white))
|
||||||
|
),
|
||||||
|
"border-width": (
|
||||||
|
property: border-width,
|
||||||
|
class: border,
|
||||||
|
values: $border-widths
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-borders
|
||||||
|
// Sizing utilities
|
||||||
|
// scss-docs-start utils-sizing
|
||||||
|
"width": (
|
||||||
|
property: width,
|
||||||
|
class: w,
|
||||||
|
values: (
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"max-width": (
|
||||||
|
property: max-width,
|
||||||
|
class: mw,
|
||||||
|
values: (100: 100%)
|
||||||
|
),
|
||||||
|
"viewport-width": (
|
||||||
|
property: width,
|
||||||
|
class: vw,
|
||||||
|
values: (100: 100vw)
|
||||||
|
),
|
||||||
|
"min-viewport-width": (
|
||||||
|
property: min-width,
|
||||||
|
class: min-vw,
|
||||||
|
values: (100: 100vw)
|
||||||
|
),
|
||||||
|
"height": (
|
||||||
|
property: height,
|
||||||
|
class: h,
|
||||||
|
values: (
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"max-height": (
|
||||||
|
property: max-height,
|
||||||
|
class: mh,
|
||||||
|
values: (100: 100%)
|
||||||
|
),
|
||||||
|
"viewport-height": (
|
||||||
|
property: height,
|
||||||
|
class: vh,
|
||||||
|
values: (100: 100vh)
|
||||||
|
),
|
||||||
|
"min-viewport-height": (
|
||||||
|
property: min-height,
|
||||||
|
class: min-vh,
|
||||||
|
values: (100: 100vh)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-sizing
|
||||||
|
// Flex utilities
|
||||||
|
// scss-docs-start utils-flex
|
||||||
|
"flex": (
|
||||||
|
responsive: true,
|
||||||
|
property: flex,
|
||||||
|
values: (fill: 1 1 auto)
|
||||||
|
),
|
||||||
|
"flex-direction": (
|
||||||
|
responsive: true,
|
||||||
|
property: flex-direction,
|
||||||
|
class: flex,
|
||||||
|
values: row column row-reverse column-reverse
|
||||||
|
),
|
||||||
|
"flex-grow": (
|
||||||
|
responsive: true,
|
||||||
|
property: flex-grow,
|
||||||
|
class: flex,
|
||||||
|
values: (
|
||||||
|
grow-0: 0,
|
||||||
|
grow-1: 1,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"flex-shrink": (
|
||||||
|
responsive: true,
|
||||||
|
property: flex-shrink,
|
||||||
|
class: flex,
|
||||||
|
values: (
|
||||||
|
shrink-0: 0,
|
||||||
|
shrink-1: 1,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"flex-wrap": (
|
||||||
|
responsive: true,
|
||||||
|
property: flex-wrap,
|
||||||
|
class: flex,
|
||||||
|
values: wrap nowrap wrap-reverse
|
||||||
|
),
|
||||||
|
"gap": (
|
||||||
|
responsive: true,
|
||||||
|
property: gap,
|
||||||
|
class: gap,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"justify-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
evenly: space-evenly,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"align-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-items,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"align-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"align-self": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-self,
|
||||||
|
values: (
|
||||||
|
auto: auto,
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"order": (
|
||||||
|
responsive: true,
|
||||||
|
property: order,
|
||||||
|
values: (
|
||||||
|
first: -1,
|
||||||
|
0: 0,
|
||||||
|
1: 1,
|
||||||
|
2: 2,
|
||||||
|
3: 3,
|
||||||
|
4: 4,
|
||||||
|
5: 5,
|
||||||
|
last: 6,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-flex
|
||||||
|
// Margin utilities
|
||||||
|
// scss-docs-start utils-spacing
|
||||||
|
"margin": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin,
|
||||||
|
class: m,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-x": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-right margin-left,
|
||||||
|
class: mx,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-y": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-top margin-bottom,
|
||||||
|
class: my,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-top": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-top,
|
||||||
|
class: mt,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-end": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-right,
|
||||||
|
class: me,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-bottom": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-bottom,
|
||||||
|
class: mb,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
"margin-start": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-left,
|
||||||
|
class: ms,
|
||||||
|
values: map-merge($spacers, (auto: auto))
|
||||||
|
),
|
||||||
|
// Negative margin utilities
|
||||||
|
"negative-margin": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin,
|
||||||
|
class: m,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-x": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-right margin-left,
|
||||||
|
class: mx,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-y": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-top margin-bottom,
|
||||||
|
class: my,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-top": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-top,
|
||||||
|
class: mt,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-end": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-right,
|
||||||
|
class: me,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-bottom": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-bottom,
|
||||||
|
class: mb,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
"negative-margin-start": (
|
||||||
|
responsive: true,
|
||||||
|
property: margin-left,
|
||||||
|
class: ms,
|
||||||
|
values: $negative-spacers
|
||||||
|
),
|
||||||
|
// Padding utilities
|
||||||
|
"padding": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding,
|
||||||
|
class: p,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-x": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-right padding-left,
|
||||||
|
class: px,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-y": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-top padding-bottom,
|
||||||
|
class: py,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-top": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-top,
|
||||||
|
class: pt,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-end": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-right,
|
||||||
|
class: pe,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-bottom": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-bottom,
|
||||||
|
class: pb,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
"padding-start": (
|
||||||
|
responsive: true,
|
||||||
|
property: padding-left,
|
||||||
|
class: ps,
|
||||||
|
values: $spacers
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-spacing
|
||||||
|
// Text
|
||||||
|
// scss-docs-start utils-text
|
||||||
|
"font-family": (
|
||||||
|
property: font-family,
|
||||||
|
class: font,
|
||||||
|
values: (monospace: var(--#{$variable-prefix}font-monospace))
|
||||||
|
),
|
||||||
|
"font-size": (
|
||||||
|
rfs: true,
|
||||||
|
property: font-size,
|
||||||
|
class: fs,
|
||||||
|
values: $font-sizes
|
||||||
|
),
|
||||||
|
"font-style": (
|
||||||
|
property: font-style,
|
||||||
|
class: fst,
|
||||||
|
values: italic normal
|
||||||
|
),
|
||||||
|
"font-weight": (
|
||||||
|
property: font-weight,
|
||||||
|
class: fw,
|
||||||
|
values: (
|
||||||
|
light: $font-weight-light,
|
||||||
|
lighter: $font-weight-lighter,
|
||||||
|
normal: $font-weight-normal,
|
||||||
|
bold: $font-weight-bold,
|
||||||
|
bolder: $font-weight-bolder
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"line-height": (
|
||||||
|
property: line-height,
|
||||||
|
class: lh,
|
||||||
|
values: (
|
||||||
|
1: 1,
|
||||||
|
sm: $line-height-sm,
|
||||||
|
base: $line-height-base,
|
||||||
|
lg: $line-height-lg,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"text-align": (
|
||||||
|
responsive: true,
|
||||||
|
property: text-align,
|
||||||
|
class: text,
|
||||||
|
values: (
|
||||||
|
start: left,
|
||||||
|
end: right,
|
||||||
|
center: center,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"text-decoration": (
|
||||||
|
property: text-decoration,
|
||||||
|
values: none underline line-through
|
||||||
|
),
|
||||||
|
"text-transform": (
|
||||||
|
property: text-transform,
|
||||||
|
class: text,
|
||||||
|
values: lowercase uppercase capitalize
|
||||||
|
),
|
||||||
|
"white-space": (
|
||||||
|
property: white-space,
|
||||||
|
class: text,
|
||||||
|
values: (
|
||||||
|
wrap: normal,
|
||||||
|
nowrap: nowrap,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"word-wrap": (
|
||||||
|
property: word-wrap word-break,
|
||||||
|
class: text,
|
||||||
|
values: (break: break-word),
|
||||||
|
rtl: false
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-text
|
||||||
|
// scss-docs-start utils-color
|
||||||
|
"color": (
|
||||||
|
property: color,
|
||||||
|
class: text,
|
||||||
|
values: map-merge(
|
||||||
|
$theme-colors,
|
||||||
|
(
|
||||||
|
"white": $white,
|
||||||
|
"body": $body-color,
|
||||||
|
"muted": $text-muted,
|
||||||
|
"black-50": rgba($black, .5),
|
||||||
|
"white-50": rgba($white, .5),
|
||||||
|
"reset": inherit,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-color
|
||||||
|
// scss-docs-start utils-bg-color
|
||||||
|
"background-color": (
|
||||||
|
property: background-color,
|
||||||
|
class: bg,
|
||||||
|
values: map-merge(
|
||||||
|
$theme-colors,
|
||||||
|
(
|
||||||
|
"body": $body-bg,
|
||||||
|
"white": $white,
|
||||||
|
"transparent": transparent
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-bg-color
|
||||||
|
"gradient": (
|
||||||
|
property: background-image,
|
||||||
|
class: bg,
|
||||||
|
values: (gradient: var(--#{$variable-prefix}gradient))
|
||||||
|
),
|
||||||
|
// scss-docs-start utils-interaction
|
||||||
|
"user-select": (
|
||||||
|
property: user-select,
|
||||||
|
values: all auto none
|
||||||
|
),
|
||||||
|
"pointer-events": (
|
||||||
|
property: pointer-events,
|
||||||
|
class: pe,
|
||||||
|
values: none auto,
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-interaction
|
||||||
|
// scss-docs-start utils-border-radius
|
||||||
|
"rounded": (
|
||||||
|
property: border-radius,
|
||||||
|
class: rounded,
|
||||||
|
values: (
|
||||||
|
null: $border-radius,
|
||||||
|
0: 0,
|
||||||
|
1: $border-radius-sm,
|
||||||
|
2: $border-radius,
|
||||||
|
3: $border-radius-lg,
|
||||||
|
circle: 50%,
|
||||||
|
pill: $border-radius-pill
|
||||||
|
)
|
||||||
|
),
|
||||||
|
"rounded-top": (
|
||||||
|
property: border-top-left-radius border-top-right-radius,
|
||||||
|
class: rounded-top,
|
||||||
|
values: (null: $border-radius)
|
||||||
|
),
|
||||||
|
"rounded-end": (
|
||||||
|
property: border-top-right-radius border-bottom-right-radius,
|
||||||
|
class: rounded-end,
|
||||||
|
values: (null: $border-radius)
|
||||||
|
),
|
||||||
|
"rounded-bottom": (
|
||||||
|
property: border-bottom-right-radius border-bottom-left-radius,
|
||||||
|
class: rounded-bottom,
|
||||||
|
values: (null: $border-radius)
|
||||||
|
),
|
||||||
|
"rounded-start": (
|
||||||
|
property: border-bottom-left-radius border-top-left-radius,
|
||||||
|
class: rounded-start,
|
||||||
|
values: (null: $border-radius)
|
||||||
|
),
|
||||||
|
// scss-docs-end utils-border-radius
|
||||||
|
// scss-docs-start utils-visibility
|
||||||
|
"visibility": (
|
||||||
|
property: visibility,
|
||||||
|
class: null,
|
||||||
|
values: (
|
||||||
|
visible: visible,
|
||||||
|
invisible: hidden,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
// scss-docs-end utils-visibility
|
||||||
|
),
|
||||||
|
$utilities
|
||||||
|
);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
70
src/assets/styles/bootstrap/bootstrap-grid.scss
vendored
70
src/assets/styles/bootstrap/bootstrap-grid.scss
vendored
@ -1,29 +1,65 @@
|
|||||||
/*!
|
/*!
|
||||||
* Bootstrap Grid v4.5.3 (https://getbootstrap.com/)
|
* Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2020 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2020 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
$include-column-box-sizing: true !default;
|
||||||
box-sizing: border-box;
|
|
||||||
-ms-overflow-style: scrollbar;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
|
@import "mixins/lists";
|
||||||
@import "mixins/breakpoints";
|
@import "mixins/breakpoints";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/container";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
|
@import "mixins/utilities";
|
||||||
|
|
||||||
|
@import "vendor/rfs";
|
||||||
|
|
||||||
|
@import "containers";
|
||||||
@import "grid";
|
@import "grid";
|
||||||
@import "utilities/display";
|
|
||||||
@import "utilities/flex";
|
@import "utilities";
|
||||||
@import "utilities/spacing";
|
// Only use the utilities we need
|
||||||
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
|
$utilities: map-get-multiple(
|
||||||
|
$utilities,
|
||||||
|
(
|
||||||
|
"display",
|
||||||
|
"order",
|
||||||
|
"flex",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-grow",
|
||||||
|
"flex-shrink",
|
||||||
|
"flex-wrap",
|
||||||
|
"justify-content",
|
||||||
|
"align-items",
|
||||||
|
"align-content",
|
||||||
|
"align-self",
|
||||||
|
"margin",
|
||||||
|
"margin-x",
|
||||||
|
"margin-y",
|
||||||
|
"margin-top",
|
||||||
|
"margin-end",
|
||||||
|
"margin-bottom",
|
||||||
|
"margin-start",
|
||||||
|
"negative-margin",
|
||||||
|
"negative-margin-x",
|
||||||
|
"negative-margin-y",
|
||||||
|
"negative-margin-top",
|
||||||
|
"negative-margin-end",
|
||||||
|
"negative-margin-bottom",
|
||||||
|
"negative-margin-start",
|
||||||
|
"padding",
|
||||||
|
"padding-x",
|
||||||
|
"padding-y",
|
||||||
|
"padding-top",
|
||||||
|
"padding-end",
|
||||||
|
"padding-bottom",
|
||||||
|
"padding-start",
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
@import "utilities/api";
|
||||||
|
|||||||
@ -1,12 +1,15 @@
|
|||||||
/*!
|
/*!
|
||||||
* Bootstrap Reboot v4.5.3 (https://getbootstrap.com/)
|
* Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2020 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2020 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
// Prevent the usage of custom properties since we don't add them to `:root` in reboot
|
||||||
|
$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
|
||||||
|
$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
|
|||||||
18
src/assets/styles/bootstrap/bootstrap-utilities.scss
vendored
Normal file
18
src/assets/styles/bootstrap/bootstrap-utilities.scss
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
@import "functions";
|
||||||
|
@import "variables";
|
||||||
|
@import "mixins";
|
||||||
|
@import "utilities";
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@import "helpers";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import "utilities/api";
|
||||||
28
src/assets/styles/bootstrap/bootstrap.scss
vendored
28
src/assets/styles/bootstrap/bootstrap.scss
vendored
@ -1,18 +1,23 @@
|
|||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.5.3 (https://getbootstrap.com/)
|
* Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2020 The Bootstrap Authors
|
* Copyright 2011-2021 The Bootstrap Authors
|
||||||
* Copyright 2011-2020 Twitter, Inc.
|
* Copyright 2011-2021 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// scss-docs-start import-stack
|
||||||
|
// Configuration
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
@import "utilities";
|
||||||
|
|
||||||
|
// Layout & components
|
||||||
@import "root";
|
@import "root";
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
@import "type";
|
@import "type";
|
||||||
@import "images";
|
@import "images";
|
||||||
@import "code";
|
@import "containers";
|
||||||
@import "grid";
|
@import "grid";
|
||||||
@import "tables";
|
@import "tables";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@ -20,18 +25,15 @@
|
|||||||
@import "transitions";
|
@import "transitions";
|
||||||
@import "dropdown";
|
@import "dropdown";
|
||||||
@import "button-group";
|
@import "button-group";
|
||||||
@import "input-group";
|
|
||||||
@import "custom-forms";
|
|
||||||
@import "nav";
|
@import "nav";
|
||||||
@import "navbar";
|
@import "navbar";
|
||||||
@import "card";
|
@import "card";
|
||||||
|
@import "accordion";
|
||||||
@import "breadcrumb";
|
@import "breadcrumb";
|
||||||
@import "pagination";
|
@import "pagination";
|
||||||
@import "badge";
|
@import "badge";
|
||||||
@import "jumbotron";
|
|
||||||
@import "alert";
|
@import "alert";
|
||||||
@import "progress";
|
@import "progress";
|
||||||
@import "media";
|
|
||||||
@import "list-group";
|
@import "list-group";
|
||||||
@import "close";
|
@import "close";
|
||||||
@import "toasts";
|
@import "toasts";
|
||||||
@ -40,5 +42,11 @@
|
|||||||
@import "popover";
|
@import "popover";
|
||||||
@import "carousel";
|
@import "carousel";
|
||||||
@import "spinners";
|
@import "spinners";
|
||||||
@import "utilities";
|
@import "offcanvas";
|
||||||
@import "print";
|
|
||||||
|
// Helpers
|
||||||
|
@import "helpers";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import "utilities/api";
|
||||||
|
// scss-docs-end import-stack
|
||||||
|
|||||||
61
src/assets/styles/bootstrap/forms/_floating-labels.scss
Normal file
61
src/assets/styles/bootstrap/forms/_floating-labels.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
.form-floating {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> .form-control,
|
||||||
|
> .form-select {
|
||||||
|
height: $form-floating-height;
|
||||||
|
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
> label {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%; // allow textareas
|
||||||
|
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||||
|
pointer-events: none;
|
||||||
|
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
||||||
|
transform-origin: 0 0;
|
||||||
|
@include transition($form-floating-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
// stylelint-disable no-duplicate-selectors
|
||||||
|
> .form-control {
|
||||||
|
&::placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:not(:placeholder-shown) {
|
||||||
|
padding-top: $form-floating-input-padding-t;
|
||||||
|
padding-bottom: $form-floating-input-padding-b;
|
||||||
|
}
|
||||||
|
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||||
|
&:-webkit-autofill {
|
||||||
|
padding-top: $form-floating-input-padding-t;
|
||||||
|
padding-bottom: $form-floating-input-padding-b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .form-select {
|
||||||
|
padding-top: $form-floating-input-padding-t;
|
||||||
|
padding-bottom: $form-floating-input-padding-b;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .form-control:focus,
|
||||||
|
> .form-control:not(:placeholder-shown),
|
||||||
|
> .form-select {
|
||||||
|
~ label {
|
||||||
|
opacity: $form-floating-label-opacity;
|
||||||
|
transform: $form-floating-label-transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
||||||
|
> .form-control:-webkit-autofill {
|
||||||
|
~ label {
|
||||||
|
opacity: $form-floating-label-opacity;
|
||||||
|
transform: $form-floating-label-transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// stylelint-enable no-duplicate-selectors
|
||||||
|
}
|
||||||
152
src/assets/styles/bootstrap/forms/_form-check.scss
Normal file
152
src/assets/styles/bootstrap/forms/_form-check.scss
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
//
|
||||||
|
// Check/radio
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-check {
|
||||||
|
display: block;
|
||||||
|
min-height: $form-check-min-height;
|
||||||
|
padding-left: $form-check-padding-start;
|
||||||
|
margin-bottom: $form-check-margin-bottom;
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
float: left;
|
||||||
|
margin-left: $form-check-padding-start * -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
width: $form-check-input-width;
|
||||||
|
height: $form-check-input-width;
|
||||||
|
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
|
||||||
|
vertical-align: top;
|
||||||
|
background-color: $form-check-input-bg;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
border: $form-check-input-border;
|
||||||
|
appearance: none;
|
||||||
|
color-adjust: exact; // Keep themed appearance for print
|
||||||
|
@include transition($form-check-transition);
|
||||||
|
|
||||||
|
&[type="checkbox"] {
|
||||||
|
@include border-radius($form-check-input-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type="radio"] {
|
||||||
|
// stylelint-disable-next-line property-disallowed-list
|
||||||
|
border-radius: $form-check-radio-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
filter: $form-check-input-active-filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $form-check-input-focus-border;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: $form-check-input-focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: $form-check-input-checked-bg-color;
|
||||||
|
border-color: $form-check-input-checked-border-color;
|
||||||
|
|
||||||
|
&[type="checkbox"] {
|
||||||
|
@if $enable-gradients {
|
||||||
|
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||||
|
} @else {
|
||||||
|
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type="radio"] {
|
||||||
|
@if $enable-gradients {
|
||||||
|
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||||
|
} @else {
|
||||||
|
background-image: escape-svg($form-check-radio-checked-bg-image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type="checkbox"]:indeterminate {
|
||||||
|
background-color: $form-check-input-indeterminate-bg-color;
|
||||||
|
border-color: $form-check-input-indeterminate-border-color;
|
||||||
|
|
||||||
|
@if $enable-gradients {
|
||||||
|
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
|
||||||
|
} @else {
|
||||||
|
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
filter: none;
|
||||||
|
opacity: $form-check-input-disabled-opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use disabled attribute in addition of :disabled pseudo-class
|
||||||
|
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||||
|
&[disabled],
|
||||||
|
&:disabled {
|
||||||
|
~ .form-check-label {
|
||||||
|
opacity: $form-check-label-disabled-opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-label {
|
||||||
|
color: $form-check-label-color;
|
||||||
|
cursor: $form-check-label-cursor;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Switch
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-switch {
|
||||||
|
padding-left: $form-switch-padding-start;
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
width: $form-switch-width;
|
||||||
|
margin-left: $form-switch-padding-start * -1;
|
||||||
|
background-image: escape-svg($form-switch-bg-image);
|
||||||
|
background-position: left center;
|
||||||
|
@include border-radius($form-switch-border-radius);
|
||||||
|
@include transition($form-switch-transition);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-image: escape-svg($form-switch-focus-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-position: $form-switch-checked-bg-position;
|
||||||
|
|
||||||
|
@if $enable-gradients {
|
||||||
|
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||||
|
} @else {
|
||||||
|
background-image: escape-svg($form-switch-checked-bg-image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-inline {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: $form-check-inline-margin-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-check {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
&[disabled],
|
||||||
|
&:disabled {
|
||||||
|
+ .btn {
|
||||||
|
pointer-events: none;
|
||||||
|
filter: none;
|
||||||
|
opacity: $form-check-btn-check-disabled-opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
219
src/assets/styles/bootstrap/forms/_form-control.scss
Normal file
219
src/assets/styles/bootstrap/forms/_form-control.scss
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
//
|
||||||
|
// General form controls (plus a few specific high-level interventions)
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
font-family: $input-font-family;
|
||||||
|
@include font-size($input-font-size);
|
||||||
|
font-weight: $input-font-weight;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: $input-border-width solid $input-border-color;
|
||||||
|
appearance: none; // Fix appearance for date inputs in Safari
|
||||||
|
|
||||||
|
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||||
|
@include border-radius($input-border-radius, 0);
|
||||||
|
|
||||||
|
@include box-shadow($input-box-shadow);
|
||||||
|
@include transition($input-transition);
|
||||||
|
|
||||||
|
&[type="file"] {
|
||||||
|
overflow: hidden; // prevent pseudo element button overlap
|
||||||
|
|
||||||
|
&:not(:disabled):not([readonly]) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Customize the `:focus` state to imitate native WebKit styles.
|
||||||
|
&:focus {
|
||||||
|
color: $input-focus-color;
|
||||||
|
background-color: $input-focus-bg;
|
||||||
|
border-color: $input-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add some height to date inputs on iOS
|
||||||
|
// https://github.com/twbs/bootstrap/issues/23307
|
||||||
|
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
|
||||||
|
&::-webkit-date-and-time-value {
|
||||||
|
// Multiply line-height by 1em if it has no unit
|
||||||
|
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Placeholder
|
||||||
|
&::placeholder {
|
||||||
|
color: $input-placeholder-color;
|
||||||
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled and read-only inputs
|
||||||
|
//
|
||||||
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||||
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||||
|
// don't honor that edge case; we style them as disabled anyway.
|
||||||
|
&:disabled,
|
||||||
|
&[readonly] {
|
||||||
|
background-color: $input-disabled-bg;
|
||||||
|
border-color: $input-disabled-border-color;
|
||||||
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// File input buttons theming
|
||||||
|
&::file-selector-button {
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
margin: (-$input-padding-y) (-$input-padding-x);
|
||||||
|
margin-inline-end: $input-padding-x;
|
||||||
|
color: $form-file-button-color;
|
||||||
|
@include gradient-bg($form-file-button-bg);
|
||||||
|
pointer-events: none;
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
border-inline-end-width: $input-border-width;
|
||||||
|
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||||
|
@include transition($btn-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||||
|
background-color: $form-file-button-hover-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-file-upload-button {
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
margin: (-$input-padding-y) (-$input-padding-x);
|
||||||
|
margin-inline-end: $input-padding-x;
|
||||||
|
color: $form-file-button-color;
|
||||||
|
@include gradient-bg($form-file-button-bg);
|
||||||
|
pointer-events: none;
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
border-inline-end-width: $input-border-width;
|
||||||
|
border-radius: 0; // stylelint-disable-line property-disallowed-list
|
||||||
|
@include transition($btn-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
|
||||||
|
background-color: $form-file-button-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Readonly controls as plain text
|
||||||
|
//
|
||||||
|
// Apply class to a readonly input to make it appear like regular plain
|
||||||
|
// text (without any border, background color, focus indicator)
|
||||||
|
|
||||||
|
.form-control-plaintext {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: $input-padding-y 0;
|
||||||
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-plaintext-color;
|
||||||
|
background-color: transparent;
|
||||||
|
border: solid transparent;
|
||||||
|
border-width: $input-border-width 0;
|
||||||
|
|
||||||
|
&.form-control-sm,
|
||||||
|
&.form-control-lg {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form control sizing
|
||||||
|
//
|
||||||
|
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||||
|
// height and font-size of form controls.
|
||||||
|
//
|
||||||
|
// Repeated in `_input_group.scss` to avoid Sass extend issues.
|
||||||
|
|
||||||
|
.form-control-sm {
|
||||||
|
min-height: $input-height-sm;
|
||||||
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
|
@include font-size($input-font-size-sm);
|
||||||
|
@include border-radius($input-border-radius-sm);
|
||||||
|
|
||||||
|
&::file-selector-button {
|
||||||
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
|
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||||
|
margin-inline-end: $input-padding-x-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-file-upload-button {
|
||||||
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
|
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||||
|
margin-inline-end: $input-padding-x-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-lg {
|
||||||
|
min-height: $input-height-lg;
|
||||||
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
|
@include font-size($input-font-size-lg);
|
||||||
|
@include border-radius($input-border-radius-lg);
|
||||||
|
|
||||||
|
&::file-selector-button {
|
||||||
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
|
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||||
|
margin-inline-end: $input-padding-x-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-file-upload-button {
|
||||||
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
|
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||||
|
margin-inline-end: $input-padding-x-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make sure textareas don't shrink too much when resized
|
||||||
|
// https://github.com/twbs/bootstrap/pull/29124
|
||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
textarea {
|
||||||
|
&.form-control {
|
||||||
|
min-height: $input-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.form-control-sm {
|
||||||
|
min-height: $input-height-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.form-control-lg {
|
||||||
|
min-height: $input-height-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// stylelint-enable selector-no-qualifying-type
|
||||||
|
|
||||||
|
.form-control-color {
|
||||||
|
max-width: 3rem;
|
||||||
|
height: auto; // Override fixed browser height
|
||||||
|
padding: $input-padding-y;
|
||||||
|
|
||||||
|
&:not(:disabled):not([readonly]) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-color-swatch {
|
||||||
|
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||||
|
@include border-radius($input-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch {
|
||||||
|
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
|
||||||
|
@include border-radius($input-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
91
src/assets/styles/bootstrap/forms/_form-range.scss
Normal file
91
src/assets/styles/bootstrap/forms/_form-range.scss
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
// Range
|
||||||
|
//
|
||||||
|
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
|
||||||
|
// elements cannot be mixed. As such, there are no shared styles for focus or
|
||||||
|
// active states on prefixed selectors.
|
||||||
|
|
||||||
|
.form-range {
|
||||||
|
width: 100%;
|
||||||
|
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
|
||||||
|
padding: 0; // Need to reset padding
|
||||||
|
background-color: transparent;
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
// Pseudo-elements must be split across multiple rulesets to have an effect.
|
||||||
|
// No box-shadow() mixin for focus accessibility.
|
||||||
|
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
|
||||||
|
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-outer {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
width: $form-range-thumb-width;
|
||||||
|
height: $form-range-thumb-height;
|
||||||
|
margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
|
||||||
|
@include gradient-bg($form-range-thumb-bg);
|
||||||
|
border: $form-range-thumb-border;
|
||||||
|
@include border-radius($form-range-thumb-border-radius);
|
||||||
|
@include box-shadow($form-range-thumb-box-shadow);
|
||||||
|
@include transition($form-range-thumb-transition);
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include gradient-bg($form-range-thumb-active-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
width: $form-range-track-width;
|
||||||
|
height: $form-range-track-height;
|
||||||
|
color: transparent; // Why?
|
||||||
|
cursor: $form-range-track-cursor;
|
||||||
|
background-color: $form-range-track-bg;
|
||||||
|
border-color: transparent;
|
||||||
|
@include border-radius($form-range-track-border-radius);
|
||||||
|
@include box-shadow($form-range-track-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
width: $form-range-thumb-width;
|
||||||
|
height: $form-range-thumb-height;
|
||||||
|
@include gradient-bg($form-range-thumb-bg);
|
||||||
|
border: $form-range-thumb-border;
|
||||||
|
@include border-radius($form-range-thumb-border-radius);
|
||||||
|
@include box-shadow($form-range-thumb-box-shadow);
|
||||||
|
@include transition($form-range-thumb-transition);
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
@include gradient-bg($form-range-thumb-active-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
width: $form-range-track-width;
|
||||||
|
height: $form-range-track-height;
|
||||||
|
color: transparent;
|
||||||
|
cursor: $form-range-track-cursor;
|
||||||
|
background-color: $form-range-track-bg;
|
||||||
|
border-color: transparent; // Firefox specific?
|
||||||
|
@include border-radius($form-range-track-border-radius);
|
||||||
|
@include box-shadow($form-range-track-box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
background-color: $form-range-thumb-disabled-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
background-color: $form-range-thumb-disabled-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
67
src/assets/styles/bootstrap/forms/_form-select.scss
Normal file
67
src/assets/styles/bootstrap/forms/_form-select.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
// Select
|
||||||
|
//
|
||||||
|
// Replaces the browser default select with a custom one, mostly pulled from
|
||||||
|
// https://primer.github.io/.
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
||||||
|
font-family: $form-select-font-family;
|
||||||
|
@include font-size($form-select-font-size);
|
||||||
|
font-weight: $form-select-font-weight;
|
||||||
|
line-height: $form-select-line-height;
|
||||||
|
color: $form-select-color;
|
||||||
|
background-color: $form-select-bg;
|
||||||
|
background-image: escape-svg($form-select-indicator);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: $form-select-bg-position;
|
||||||
|
background-size: $form-select-bg-size;
|
||||||
|
border: $form-select-border-width solid $form-select-border-color;
|
||||||
|
@include border-radius($form-select-border-radius, 0);
|
||||||
|
@include box-shadow($form-select-box-shadow);
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $form-select-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $form-select-focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[multiple],
|
||||||
|
&[size]:not([size="1"]) {
|
||||||
|
padding-right: $form-select-padding-x;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $form-select-disabled-color;
|
||||||
|
background-color: $form-select-disabled-bg;
|
||||||
|
border-color: $form-select-disabled-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove outline from select box in FF
|
||||||
|
&:-moz-focusring {
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 0 $form-select-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-sm {
|
||||||
|
padding-top: $form-select-padding-y-sm;
|
||||||
|
padding-bottom: $form-select-padding-y-sm;
|
||||||
|
padding-left: $form-select-padding-x-sm;
|
||||||
|
@include font-size($form-select-font-size-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-lg {
|
||||||
|
padding-top: $form-select-padding-y-lg;
|
||||||
|
padding-bottom: $form-select-padding-y-lg;
|
||||||
|
padding-left: $form-select-padding-x-lg;
|
||||||
|
@include font-size($form-select-font-size-lg);
|
||||||
|
}
|
||||||
11
src/assets/styles/bootstrap/forms/_form-text.scss
Normal file
11
src/assets/styles/bootstrap/forms/_form-text.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
//
|
||||||
|
// Form text
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-text {
|
||||||
|
margin-top: $form-text-margin-top;
|
||||||
|
@include font-size($form-text-font-size);
|
||||||
|
font-style: $form-text-font-style;
|
||||||
|
font-weight: $form-text-font-weight;
|
||||||
|
color: $form-text-color;
|
||||||
|
}
|
||||||
121
src/assets/styles/bootstrap/forms/_input-group.scss
Normal file
121
src/assets/styles/bootstrap/forms/_input-group.scss
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; // For form validation feedback
|
||||||
|
align-items: stretch;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> .form-control,
|
||||||
|
> .form-select {
|
||||||
|
position: relative; // For focus state's z-index
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 1%;
|
||||||
|
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bring the "active" form control to the top of surrounding elements
|
||||||
|
> .form-control:focus,
|
||||||
|
> .form-select:focus {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure buttons are always above inputs for more visually pleasing borders.
|
||||||
|
// This isn't needed for `.input-group-text` since it shares the same border-color
|
||||||
|
// as our inputs.
|
||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Textual addons
|
||||||
|
//
|
||||||
|
// Serves as a catch-all element for any text or radio/checkbox input you wish
|
||||||
|
// to prepend or append to an input.
|
||||||
|
|
||||||
|
.input-group-text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
|
||||||
|
@include font-size($input-font-size); // Match inputs
|
||||||
|
font-weight: $input-group-addon-font-weight;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-group-addon-color;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: $input-group-addon-bg;
|
||||||
|
border: $input-border-width solid $input-group-addon-border-color;
|
||||||
|
@include border-radius($input-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sizing
|
||||||
|
//
|
||||||
|
// Remix the default form control sizing classes into new ones for easier
|
||||||
|
// manipulation.
|
||||||
|
|
||||||
|
.input-group-lg > .form-control,
|
||||||
|
.input-group-lg > .form-select,
|
||||||
|
.input-group-lg > .input-group-text,
|
||||||
|
.input-group-lg > .btn {
|
||||||
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
|
@include font-size($input-font-size-lg);
|
||||||
|
@include border-radius($input-border-radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-sm > .form-control,
|
||||||
|
.input-group-sm > .form-select,
|
||||||
|
.input-group-sm > .input-group-text,
|
||||||
|
.input-group-sm > .btn {
|
||||||
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
|
@include font-size($input-font-size-sm);
|
||||||
|
@include border-radius($input-border-radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-lg > .form-select,
|
||||||
|
.input-group-sm > .form-select {
|
||||||
|
padding-right: $form-select-padding-x + $form-select-indicator-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Rounded corners
|
||||||
|
//
|
||||||
|
// These rulesets must come after the sizing ones to properly override sm and lg
|
||||||
|
// border-radius values when extending. They're more specific than we'd like
|
||||||
|
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
||||||
|
|
||||||
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
|
.input-group {
|
||||||
|
&:not(.has-validation) {
|
||||||
|
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
|
||||||
|
> .dropdown-toggle:nth-last-child(n + 3) {
|
||||||
|
@include border-end-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-validation {
|
||||||
|
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
|
||||||
|
> .dropdown-toggle:nth-last-child(n + 4) {
|
||||||
|
@include border-end-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$validation-messages: "";
|
||||||
|
@each $state in map-keys($form-validation-states) {
|
||||||
|
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
||||||
|
}
|
||||||
|
|
||||||
|
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
|
||||||
|
margin-left: -$input-border-width;
|
||||||
|
@include border-start-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
36
src/assets/styles/bootstrap/forms/_labels.scss
Normal file
36
src/assets/styles/bootstrap/forms/_labels.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
//
|
||||||
|
// Labels
|
||||||
|
//
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
margin-bottom: $form-label-margin-bottom;
|
||||||
|
@include font-size($form-label-font-size);
|
||||||
|
font-style: $form-label-font-style;
|
||||||
|
font-weight: $form-label-font-weight;
|
||||||
|
color: $form-label-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: add($input-padding-y, $input-border-width);
|
||||||
|
padding-bottom: add($input-padding-y, $input-border-width);
|
||||||
|
margin-bottom: 0; // Override the `<legend>` default
|
||||||
|
@include font-size(inherit); // Override the `<legend>` default
|
||||||
|
font-style: $form-label-font-style;
|
||||||
|
font-weight: $form-label-font-weight;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $form-label-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-form-label-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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-form-label-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);
|
||||||
|
}
|
||||||
12
src/assets/styles/bootstrap/forms/_validation.scss
Normal file
12
src/assets/styles/bootstrap/forms/_validation.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
// Form validation
|
||||||
|
//
|
||||||
|
// Provide feedback to users when form field values are valid or invalid. Works
|
||||||
|
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
||||||
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
|
// server-side validation.
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-states-loop
|
||||||
|
@each $state, $data in $form-validation-states {
|
||||||
|
@include form-validation-state($state, $data...);
|
||||||
|
}
|
||||||
|
// scss-docs-end form-validation-states-loop
|
||||||
12
src/assets/styles/bootstrap/helpers/_colored-links.scss
Normal file
12
src/assets/styles/bootstrap/helpers/_colored-links.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.link-#{$color} {
|
||||||
|
color: $value;
|
||||||
|
|
||||||
|
@if $link-shade-percentage != 0 {
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
src/assets/styles/bootstrap/helpers/_position.scss
Normal file
30
src/assets/styles/bootstrap/helpers/_position.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
// Shorthand
|
||||||
|
|
||||||
|
.fixed-top {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-bottom {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $zindex-fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive sticky top
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
@include media-breakpoint-up($breakpoint) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
.sticky#{$infix}-top {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: $zindex-sticky;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
26
src/assets/styles/bootstrap/helpers/_ratio.scss
Normal file
26
src/assets/styles/bootstrap/helpers/_ratio.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||||
|
|
||||||
|
.ratio {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
padding-top: var(--#{$variable-prefix}aspect-ratio);
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $ratio in $aspect-ratios {
|
||||||
|
.ratio-#{$key} {
|
||||||
|
--#{$variable-prefix}aspect-ratio: #{$ratio};
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/assets/styles/bootstrap/helpers/_stretched-link.scss
Normal file
15
src/assets/styles/bootstrap/helpers/_stretched-link.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
//
|
||||||
|
// Stretched link
|
||||||
|
//
|
||||||
|
|
||||||
|
.stretched-link {
|
||||||
|
&::#{$stretched-link-pseudo-element} {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $stretched-link-z-index;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
//
|
||||||
|
// Text truncation
|
||||||
|
//
|
||||||
|
|
||||||
|
.text-truncate {
|
||||||
|
@include text-truncate();
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
//
|
||||||
|
// Visually hidden
|
||||||
|
//
|
||||||
|
|
||||||
|
.visually-hidden,
|
||||||
|
.visually-hidden-focusable:not(:focus):not(:focus-within) {
|
||||||
|
@include visually-hidden();
|
||||||
|
}
|
||||||
@ -1,13 +1,11 @@
|
|||||||
|
// scss-docs-start alert-variant-mixin
|
||||||
@mixin alert-variant($background, $border, $color) {
|
@mixin alert-variant($background, $border, $color) {
|
||||||
color: $color;
|
color: $color;
|
||||||
@include gradient-bg($background);
|
@include gradient-bg($background);
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
|
|
||||||
hr {
|
|
||||||
border-top-color: darken($border, 5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-link {
|
.alert-link {
|
||||||
color: darken($color, 10%);
|
color: shade-color($color, 20%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end alert-variant-mixin
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
// Contextual backgrounds
|
|
||||||
|
|
||||||
@mixin bg-variant($parent, $color, $ignore-warning: false) {
|
|
||||||
#{$parent} {
|
|
||||||
background-color: $color !important;
|
|
||||||
}
|
|
||||||
a#{$parent},
|
|
||||||
button#{$parent} {
|
|
||||||
@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, $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);
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
@mixin badge-variant($bg) {
|
|
||||||
color: color-yiq($bg);
|
|
||||||
background-color: $bg;
|
|
||||||
|
|
||||||
@at-root a#{&} {
|
|
||||||
@include hover-focus() {
|
|
||||||
color: color-yiq($bg);
|
|
||||||
background-color: darken($bg, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&.focus {
|
|
||||||
outline: 0;
|
|
||||||
box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -14,6 +14,7 @@
|
|||||||
@return $return;
|
@return $return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// scss-docs-start border-radius-mixins
|
||||||
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-radius: valid-radius($radius);
|
border-radius: valid-radius($radius);
|
||||||
@ -23,54 +24,55 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-top-radius($radius) {
|
@mixin border-top-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: valid-radius($radius);
|
border-top-left-radius: valid-radius($radius);
|
||||||
border-top-right-radius: valid-radius($radius);
|
border-top-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-right-radius($radius) {
|
@mixin border-end-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: valid-radius($radius);
|
border-top-right-radius: valid-radius($radius);
|
||||||
border-bottom-right-radius: valid-radius($radius);
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-radius($radius) {
|
@mixin border-bottom-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: valid-radius($radius);
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
border-bottom-left-radius: valid-radius($radius);
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-left-radius($radius) {
|
@mixin border-start-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: valid-radius($radius);
|
border-top-left-radius: valid-radius($radius);
|
||||||
border-bottom-left-radius: valid-radius($radius);
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-top-left-radius($radius) {
|
@mixin border-top-start-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-left-radius: valid-radius($radius);
|
border-top-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-top-right-radius($radius) {
|
@mixin border-top-end-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: valid-radius($radius);
|
border-top-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-right-radius($radius) {
|
@mixin border-bottom-end-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: valid-radius($radius);
|
border-bottom-right-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-bottom-left-radius($radius) {
|
@mixin border-bottom-start-radius($radius: $border-radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-left-radius: valid-radius($radius);
|
border-bottom-left-radius: valid-radius($radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end border-radius-mixins
|
||||||
|
|||||||
@ -2,17 +2,15 @@
|
|||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
$result: ();
|
$result: ();
|
||||||
|
|
||||||
@if (length($shadow) == 1) {
|
@each $value in $shadow {
|
||||||
// We can pass `@include box-shadow(none);`
|
@if $value != null {
|
||||||
$result: $shadow;
|
$result: append($result, $value, "comma");
|
||||||
} @else {
|
}
|
||||||
// Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
|
@if $value == none and length($shadow) > 1 {
|
||||||
@for $i from 1 through length($shadow) {
|
@warn "The keyword 'none' must be used as a single argument.";
|
||||||
@if nth($shadow, $i) != "none" {
|
|
||||||
$result: append($result, nth($shadow, $i), "comma");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if (length($result) > 0) {
|
@if (length($result) > 0) {
|
||||||
box-shadow: $result;
|
box-shadow: $result;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,10 @@
|
|||||||
// md
|
// md
|
||||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||||
$n: index($breakpoint-names, $name);
|
$n: index($breakpoint-names, $name);
|
||||||
@return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
@if not $n {
|
||||||
|
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
||||||
|
}
|
||||||
|
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||||
@ -28,18 +31,18 @@
|
|||||||
@return if($min != 0, $min, null);
|
@return if($min != 0, $min, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
// Maximum breakpoint width.
|
||||||
// The maximum value is calculated as the minimum of the next one less 0.02px
|
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||||
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
|
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||||
//
|
//
|
||||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// 767.98px
|
// 767.98px
|
||||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||||
$next: breakpoint-next($name, $breakpoints);
|
$max: map-get($breakpoints, $name);
|
||||||
@return if($next, breakpoint-min($next, $breakpoints) - .02, null);
|
@return if($max and $max > 0, $max - .02, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
|
||||||
@ -104,8 +107,9 @@
|
|||||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||||
$min: breakpoint-min($name, $breakpoints);
|
$min: breakpoint-min($name, $breakpoints);
|
||||||
$max: breakpoint-max($name, $breakpoints);
|
$next: breakpoint-next($name, $breakpoints);
|
||||||
|
$max: breakpoint-max($next);
|
||||||
|
|
||||||
@if $min != null and $max != null {
|
@if $min != null and $max != null {
|
||||||
@media (min-width: $min) and (max-width: $max) {
|
@media (min-width: $min) and (max-width: $max) {
|
||||||
@ -116,7 +120,7 @@
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else if $min == null {
|
} @else if $min == null {
|
||||||
@include media-breakpoint-down($name, $breakpoints) {
|
@include media-breakpoint-down($next, $breakpoints) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,114 +3,131 @@
|
|||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
// and disabled options for all buttons
|
// and disabled options for all buttons
|
||||||
|
|
||||||
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
|
// scss-docs-start btn-variant-mixin
|
||||||
color: color-yiq($background);
|
@mixin button-variant(
|
||||||
|
$background,
|
||||||
|
$border,
|
||||||
|
$color: color-contrast($background),
|
||||||
|
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
||||||
|
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
||||||
|
$hover-color: color-contrast($hover-background),
|
||||||
|
$active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
||||||
|
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
||||||
|
$active-color: color-contrast($active-background),
|
||||||
|
$disabled-background: $background,
|
||||||
|
$disabled-border: $border,
|
||||||
|
$disabled-color: color-contrast($disabled-background)
|
||||||
|
) {
|
||||||
|
color: $color;
|
||||||
@include gradient-bg($background);
|
@include gradient-bg($background);
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
@include box-shadow($btn-box-shadow);
|
@include box-shadow($btn-box-shadow);
|
||||||
|
|
||||||
@include hover() {
|
&:hover {
|
||||||
&:not(.nohover){
|
color: $hover-color;
|
||||||
color: color-yiq($hover-background);
|
@include gradient-bg($hover-background);
|
||||||
@include gradient-bg($hover-background);
|
border-color: $hover-border;
|
||||||
border-color: $hover-border;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
.btn-check:focus + &,
|
||||||
&.focus {
|
&:focus {
|
||||||
color: color-yiq($hover-background);
|
color: $hover-color;
|
||||||
@include gradient-bg($hover-background);
|
@include gradient-bg($hover-background);
|
||||||
border-color: $hover-border;
|
border-color: $hover-border;
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
@include 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, $border, 15%), .5));
|
||||||
} @else {
|
} @else {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled comes first so active can properly restyle
|
.btn-check:checked + &,
|
||||||
&.disabled,
|
.btn-check:active + &,
|
||||||
&:disabled {
|
&:active,
|
||||||
color: color-yiq($background);
|
&.active,
|
||||||
background-color: $background;
|
|
||||||
border-color: $border;
|
|
||||||
// Remove CSS gradients if they're enabled
|
|
||||||
@if $enable-gradients {
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled):active,
|
|
||||||
&:not(:disabled):not(.disabled).active,
|
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
&:not(.nohover){
|
color: $active-color;
|
||||||
color: color-yiq($active-background);
|
background-color: $active-background;
|
||||||
background-color: $active-background;
|
// Remove CSS gradients if they're enabled
|
||||||
@if $enable-gradients {
|
background-image: if($enable-gradients, none, null);
|
||||||
background-image: none; // Remove the gradient for the pressed/active state
|
border-color: $active-border;
|
||||||
}
|
|
||||||
border-color: $active-border;
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
@if $enable-shadows {
|
||||||
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
|
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
|
||||||
} @else {
|
} @else {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
color: $disabled-color;
|
||||||
|
background-color: $disabled-background;
|
||||||
|
// Remove CSS gradients if they're enabled
|
||||||
|
background-image: if($enable-gradients, none, null);
|
||||||
|
border-color: $disabled-border;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end btn-variant-mixin
|
||||||
|
|
||||||
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
|
// scss-docs-start btn-outline-variant-mixin
|
||||||
|
@mixin button-outline-variant(
|
||||||
|
$color,
|
||||||
|
$color-hover: color-contrast($color),
|
||||||
|
$active-background: $color,
|
||||||
|
$active-border: $color,
|
||||||
|
$active-color: color-contrast($active-background)
|
||||||
|
) {
|
||||||
color: $color;
|
color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover() {
|
&:hover {
|
||||||
color: $color-hover;
|
color: $color-hover;
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
.btn-check:focus + &,
|
||||||
&.focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
.btn-check:checked + &,
|
||||||
&:disabled {
|
.btn-check:active + &,
|
||||||
color: $color;
|
&:active,
|
||||||
background-color: transparent;
|
&.active,
|
||||||
}
|
&.dropdown-toggle.show {
|
||||||
|
color: $active-color;
|
||||||
|
background-color: $active-background;
|
||||||
|
border-color: $active-border;
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled):active,
|
&:focus {
|
||||||
&:not(:disabled):not(.disabled).active,
|
@if $enable-shadows {
|
||||||
.show > &.dropdown-toggle {
|
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
|
||||||
&:not(.nohover){
|
} @else {
|
||||||
color: color-yiq($active-background);
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
background-color: $active-background;
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
border-color: $active-border;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
|
||||||
@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
|
&:disabled,
|
||||||
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
&.disabled {
|
||||||
|
color: $color;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end btn-outline-variant-mixin
|
||||||
|
|
||||||
|
// scss-docs-start btn-size-mixin
|
||||||
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
padding: $padding-y $padding-x;
|
padding: $padding-y $padding-x;
|
||||||
@include font-size($font-size);
|
@include font-size($font-size);
|
||||||
line-height: $line-height;
|
|
||||||
// Manually declare to provide an override to the browser default
|
// Manually declare to provide an override to the browser default
|
||||||
@include border-radius($border-radius, 0);
|
@include border-radius($border-radius, 0);
|
||||||
}
|
}
|
||||||
|
// scss-docs-end btn-size-mixin
|
||||||
|
|||||||
@ -1,25 +1,26 @@
|
|||||||
@mixin caret-down() {
|
// scss-docs-start caret-mixins
|
||||||
|
@mixin caret-down {
|
||||||
border-top: $caret-width solid;
|
border-top: $caret-width solid;
|
||||||
border-right: $caret-width solid transparent;
|
border-right: $caret-width solid transparent;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
border-left: $caret-width solid transparent;
|
border-left: $caret-width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin caret-up() {
|
@mixin caret-up {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-right: $caret-width solid transparent;
|
border-right: $caret-width solid transparent;
|
||||||
border-bottom: $caret-width solid;
|
border-bottom: $caret-width solid;
|
||||||
border-left: $caret-width solid transparent;
|
border-left: $caret-width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin caret-right() {
|
@mixin caret-end {
|
||||||
border-top: $caret-width solid transparent;
|
border-top: $caret-width solid transparent;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: $caret-width solid transparent;
|
border-bottom: $caret-width solid transparent;
|
||||||
border-left: $caret-width solid;
|
border-left: $caret-width solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin caret-left() {
|
@mixin caret-start {
|
||||||
border-top: $caret-width solid transparent;
|
border-top: $caret-width solid transparent;
|
||||||
border-right: $caret-width solid;
|
border-right: $caret-width solid;
|
||||||
border-bottom: $caret-width solid transparent;
|
border-bottom: $caret-width solid transparent;
|
||||||
@ -36,12 +37,12 @@
|
|||||||
@include caret-down();
|
@include caret-down();
|
||||||
} @else if $direction == up {
|
} @else if $direction == up {
|
||||||
@include caret-up();
|
@include caret-up();
|
||||||
} @else if $direction == right {
|
} @else if $direction == end {
|
||||||
@include caret-right();
|
@include caret-end();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $direction == left {
|
@if $direction == start {
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -51,7 +52,7 @@
|
|||||||
margin-right: $caret-spacing;
|
margin-right: $caret-spacing;
|
||||||
vertical-align: $caret-vertical-align;
|
vertical-align: $caret-vertical-align;
|
||||||
content: "";
|
content: "";
|
||||||
@include caret-left();
|
@include caret-start();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,3 +61,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end caret-mixins
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
// scss-docs-start clearfix
|
||||||
@mixin clearfix() {
|
@mixin clearfix() {
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
@ -5,3 +6,4 @@
|
|||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end clearfix
|
||||||
|
|||||||
9
src/assets/styles/bootstrap/mixins/_container.scss
Normal file
9
src/assets/styles/bootstrap/mixins/_container.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// Container mixins
|
||||||
|
|
||||||
|
@mixin make-container($gutter: $container-padding-x) {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
|
||||||
|
padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
@ -1,14 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
@mixin float-left() {
|
|
||||||
float: left !important;
|
|
||||||
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
@mixin float-right() {
|
|
||||||
float: right !important;
|
|
||||||
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
@mixin float-none() {
|
|
||||||
float: none !important;
|
|
||||||
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
@ -1,33 +1,7 @@
|
|||||||
// Form control focus state
|
|
||||||
//
|
|
||||||
// Generate a customized focus state and for any input with the specified color,
|
|
||||||
// which defaults to the `$input-focus-border-color` variable.
|
|
||||||
//
|
|
||||||
// We highly encourage you to not customize the default value, but instead use
|
|
||||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
|
||||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
|
||||||
// usability and accessibility should be taken into account with any change.
|
|
||||||
//
|
|
||||||
// Example usage: change the default blue border and shadow to white for better
|
|
||||||
// contrast against a dark gray background.
|
|
||||||
@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;
|
|
||||||
@if $enable-shadows {
|
|
||||||
@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
|
// 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
|
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
||||||
|
|
||||||
|
// scss-docs-start form-validation-mixins
|
||||||
@mixin form-validation-state-selector($state) {
|
@mixin form-validation-state-selector($state) {
|
||||||
@if ($state == "valid" or $state == "invalid") {
|
@if ($state == "valid" or $state == "invalid") {
|
||||||
.was-validated #{if(&, "&", "")}:#{$state},
|
.was-validated #{if(&, "&", "")}:#{$state},
|
||||||
@ -41,19 +15,26 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin form-validation-state($state, $color, $icon) {
|
@mixin form-validation-state(
|
||||||
|
$state,
|
||||||
|
$color,
|
||||||
|
$icon,
|
||||||
|
$tooltip-color: color-contrast($color),
|
||||||
|
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
||||||
|
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
|
||||||
|
) {
|
||||||
.#{$state}-feedback {
|
.#{$state}-feedback {
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: $form-feedback-margin-top;
|
margin-top: $form-feedback-margin-top;
|
||||||
@include font-size($form-feedback-font-size);
|
@include font-size($form-feedback-font-size);
|
||||||
|
font-style: $form-feedback-font-style;
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$state}-tooltip {
|
.#{$state}-tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 0;
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
display: none;
|
display: none;
|
||||||
max-width: 100%; // Contain to parent when possible
|
max-width: 100%; // Contain to parent when possible
|
||||||
@ -61,8 +42,8 @@
|
|||||||
margin-top: .1rem;
|
margin-top: .1rem;
|
||||||
@include font-size($form-feedback-tooltip-font-size);
|
@include font-size($form-feedback-tooltip-font-size);
|
||||||
line-height: $form-feedback-tooltip-line-height;
|
line-height: $form-feedback-tooltip-line-height;
|
||||||
color: color-yiq($color);
|
color: $tooltip-color;
|
||||||
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
background-color: $tooltip-bg-color;
|
||||||
@include border-radius($form-feedback-tooltip-border-radius);
|
@include border-radius($form-feedback-tooltip-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -87,7 +68,7 @@
|
|||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
box-shadow: $focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -102,77 +83,52 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-select {
|
.form-select {
|
||||||
@include form-validation-state-selector($state) {
|
@include form-validation-state-selector($state) {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@if $enable-validation-icons {
|
@if $enable-validation-icons {
|
||||||
padding-right: $custom-select-feedback-icon-padding-right;
|
padding-right: $form-select-feedback-icon-padding-end;
|
||||||
background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
|
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
||||||
|
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||||
|
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
box-shadow: $focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
@include form-validation-state-selector($state) {
|
@include form-validation-state-selector($state) {
|
||||||
|
border-color: $color;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: $focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
~ .form-check-label {
|
~ .form-check-label {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
~ .#{$state}-feedback,
|
}
|
||||||
~ .#{$state}-tooltip {
|
.form-check-inline .form-check-input {
|
||||||
display: block;
|
~ .#{$state}-feedback {
|
||||||
}
|
margin-left: .5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input {
|
.input-group .form-control,
|
||||||
|
.input-group .form-select {
|
||||||
@include form-validation-state-selector($state) {
|
@include form-validation-state-selector($state) {
|
||||||
~ .custom-control-label {
|
z-index: 3;
|
||||||
color: $color;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked {
|
|
||||||
~ .custom-control-label::before {
|
|
||||||
border-color: lighten($color, 10%);
|
|
||||||
@include gradient-bg(lighten($color, 10%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
~ .custom-control-label::before {
|
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:checked) ~ .custom-control-label::before {
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// custom file
|
|
||||||
.custom-file-input {
|
|
||||||
@include form-validation-state-selector($state) {
|
|
||||||
~ .custom-file-label {
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
~ .custom-file-label {
|
|
||||||
border-color: $color;
|
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end form-validation-mixins
|
||||||
|
|||||||
@ -1,45 +1,47 @@
|
|||||||
// Gradients
|
// Gradients
|
||||||
|
|
||||||
@mixin gradient-bg($color) {
|
// scss-docs-start gradient-bg-mixin
|
||||||
|
@mixin gradient-bg($color: null) {
|
||||||
|
background-color: $color;
|
||||||
|
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
background-image: var(--#{$variable-prefix}gradient);
|
||||||
} @else {
|
|
||||||
background-color: $color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end gradient-bg-mixin
|
||||||
|
|
||||||
|
// scss-docs-start gradient-mixins
|
||||||
// Horizontal gradient, from left to right
|
// Horizontal gradient, from left to right
|
||||||
//
|
//
|
||||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||||
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
||||||
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
||||||
background-repeat: repeat-x;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vertical gradient, from top to bottom
|
// Vertical gradient, from top to bottom
|
||||||
//
|
//
|
||||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||||
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
|
||||||
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
||||||
background-repeat: repeat-x;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
||||||
background-image: linear-gradient($deg, $start-color, $end-color);
|
background-image: linear-gradient($deg, $start-color, $end-color);
|
||||||
background-repeat: repeat-x;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
||||||
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
||||||
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
||||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
||||||
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||||
}
|
}
|
||||||
|
// scss-docs-end gradient-mixins
|
||||||
|
|||||||
@ -1,80 +0,0 @@
|
|||||||
// Framework grid generation
|
|
||||||
//
|
|
||||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
||||||
// any value of `$grid-columns`.
|
|
||||||
|
|
||||||
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
|
||||||
// Common properties for all breakpoints
|
|
||||||
%grid-column {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding-right: $gutter / 2;
|
|
||||||
padding-left: $gutter / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
||||||
|
|
||||||
@if $columns > 0 {
|
|
||||||
// Allow columns to stretch full width below their breakpoints
|
|
||||||
@for $i from 1 through $columns {
|
|
||||||
.col#{$infix}-#{$i} {
|
|
||||||
@extend %grid-column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.col#{$infix},
|
|
||||||
.col#{$infix}-auto {
|
|
||||||
@extend %grid-column;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
||||||
.col#{$infix} {
|
|
||||||
flex-basis: 0;
|
|
||||||
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 {
|
|
||||||
@include make-col-auto();
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $columns > 0 {
|
|
||||||
@for $i from 1 through $columns {
|
|
||||||
.col#{$infix}-#{$i} {
|
|
||||||
@include make-col($i, $columns);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order#{$infix}-first { order: -1; }
|
|
||||||
|
|
||||||
.order#{$infix}-last { order: $columns + 1; }
|
|
||||||
|
|
||||||
@for $i from 0 through $columns {
|
|
||||||
.order#{$infix}-#{$i} { order: $i; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $columns > 0 {
|
|
||||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
||||||
@for $i from 0 through ($columns - 1) {
|
|
||||||
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
|
||||||
.offset#{$infix}-#{$i} {
|
|
||||||
@include make-col-offset($i, $columns);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,53 +2,38 @@
|
|||||||
//
|
//
|
||||||
// Generate semantic grid columns with these mixins.
|
// Generate semantic grid columns with these mixins.
|
||||||
|
|
||||||
@mixin make-container($gutter: $grid-gutter-width) {
|
|
||||||
width: 100%;
|
|
||||||
padding-right: $gutter / 2;
|
|
||||||
padding-left: $gutter / 2;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-row($gutter: $grid-gutter-width) {
|
@mixin make-row($gutter: $grid-gutter-width) {
|
||||||
|
--#{$variable-prefix}gutter-x: #{$gutter};
|
||||||
|
--#{$variable-prefix}gutter-y: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-right: -$gutter / 2;
|
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
|
||||||
margin-left: -$gutter / 2;
|
margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
|
||||||
}
|
margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
|
||||||
|
|
||||||
// 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) {
|
|
||||||
@each $breakpoint, $container-max-width in $max-widths {
|
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
||||||
max-width: $container-max-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
||||||
position: relative;
|
// Add box sizing if only the grid is loaded
|
||||||
|
box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
|
||||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||||
// always setting `width: 100%;`. This works because we use `flex` values
|
// always setting `width: 100%;`. This works because we set the width
|
||||||
// later on to override this initial width.
|
// later on to override this initial width.
|
||||||
|
flex-shrink: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: $gutter / 2;
|
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
||||||
padding-left: $gutter / 2;
|
padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
|
||||||
|
padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
|
||||||
|
margin-top: var(--#{$variable-prefix}gutter-y);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col($size, $columns: $grid-columns) {
|
@mixin make-col($size, $columns: $grid-columns) {
|
||||||
flex: 0 0 percentage($size / $columns);
|
flex: 0 0 auto;
|
||||||
// Add a `max-width` to ensure content within each column does not blow out
|
width: percentage($size / $columns);
|
||||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
||||||
// do not appear to require this.
|
|
||||||
max-width: percentage($size / $columns);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-auto() {
|
@mixin make-col-auto() {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 100%; // Reset earlier grid tiers
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||||
@ -63,7 +48,73 @@
|
|||||||
// style grid.
|
// style grid.
|
||||||
@mixin row-cols($count) {
|
@mixin row-cols($count) {
|
||||||
> * {
|
> * {
|
||||||
flex: 0 0 100% / $count;
|
flex: 0 0 auto;
|
||||||
max-width: 100% / $count;
|
width: 100% / $count;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Framework grid generation
|
||||||
|
//
|
||||||
|
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||||
|
// any value of `$grid-columns`.
|
||||||
|
|
||||||
|
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||||
|
|
||||||
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||||
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||||
|
.col#{$infix} {
|
||||||
|
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-cols#{$infix}-auto > * {
|
||||||
|
@include make-col-auto();
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $grid-row-columns > 0 {
|
||||||
|
@for $i from 1 through $grid-row-columns {
|
||||||
|
.row-cols#{$infix}-#{$i} {
|
||||||
|
@include row-cols($i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col#{$infix}-auto {
|
||||||
|
@include make-col-auto();
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $columns > 0 {
|
||||||
|
@for $i from 1 through $columns {
|
||||||
|
.col#{$infix}-#{$i} {
|
||||||
|
@include make-col($i, $columns);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// `$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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gutters
|
||||||
|
//
|
||||||
|
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
|
||||||
|
@each $key, $value in $gutters {
|
||||||
|
.g#{$infix}-#{$key},
|
||||||
|
.gx#{$infix}-#{$key} {
|
||||||
|
--#{$variable-prefix}gutter-x: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
.g#{$infix}-#{$key},
|
||||||
|
.gy#{$infix}-#{$key} {
|
||||||
|
--#{$variable-prefix}gutter-y: #{$value};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,37 +0,0 @@
|
|||||||
// Hover mixin and `$enable-hover-media-query` are deprecated.
|
|
||||||
//
|
|
||||||
// Originally added during our alphas and maintained during betas, this mixin was
|
|
||||||
// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
|
|
||||||
// would persist after initial touch.
|
|
||||||
//
|
|
||||||
// For backward compatibility, we've kept these mixins and updated them to
|
|
||||||
// always return their regular pseudo-classes instead of a shimmed media query.
|
|
||||||
//
|
|
||||||
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
|
||||||
|
|
||||||
@mixin hover() {
|
|
||||||
&:hover { @content; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin hover-focus() {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin plain-hover-focus() {
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin hover-focus-active() {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -7,30 +7,10 @@
|
|||||||
//
|
//
|
||||||
// Keep images from scaling beyond the width of their parents.
|
// Keep images from scaling beyond the width of their parents.
|
||||||
|
|
||||||
@mixin img-fluid() {
|
@mixin img-fluid {
|
||||||
// Part 1: Set a maximum relative to the parent
|
// Part 1: Set a maximum relative to the parent
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
// Part 2: Override the height to auto, otherwise images will be stretched
|
// Part 2: Override the height to auto, otherwise images will be stretched
|
||||||
// when setting a width and height attribute on the img element.
|
// when setting a width and height attribute on the img element.
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Retina image
|
|
||||||
//
|
|
||||||
// Short retina mixin for setting background-image and -size.
|
|
||||||
|
|
||||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
|
||||||
background-image: url($file-1x);
|
|
||||||
|
|
||||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
|
||||||
// but doesn't convert dppx=>dpi.
|
|
||||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
|
||||||
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
|
||||||
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
|
||||||
only screen and (min-resolution: 2dppx) { // Standardized
|
|
||||||
background-image: url($file-2x);
|
|
||||||
background-size: $width-1x $height-1x;
|
|
||||||
}
|
|
||||||
@include deprecate("`img-retina()`", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,14 +1,16 @@
|
|||||||
// List Groups
|
// List Groups
|
||||||
|
|
||||||
|
// scss-docs-start list-group-mixin
|
||||||
@mixin list-group-item-variant($state, $background, $color) {
|
@mixin list-group-item-variant($state, $background, $color) {
|
||||||
.list-group-item-#{$state} {
|
.list-group-item-#{$state} {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
|
|
||||||
&.list-group-item-action {
|
&.list-group-item-action {
|
||||||
@include hover-focus() {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: darken($background, 5%);
|
background-color: shade-color($background, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@ -19,3 +21,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end list-group-mixin
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// Lists
|
// Lists
|
||||||
|
|
||||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||||
@mixin list-unstyled() {
|
@mixin list-unstyled {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
// Horizontal dividers
|
|
||||||
//
|
|
||||||
// Dividers (basically an hr) within dropdowns and nav lists
|
|
||||||
|
|
||||||
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
|
|
||||||
height: 0;
|
|
||||||
margin: $margin-y 0;
|
|
||||||
overflow: hidden;
|
|
||||||
border-top: 1px solid $color;
|
|
||||||
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
|
|
||||||
}
|
|
||||||
@ -1,22 +1,31 @@
|
|||||||
// Pagination
|
// Pagination
|
||||||
|
|
||||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
// scss-docs-start pagination-mixin
|
||||||
|
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||||
.page-link {
|
.page-link {
|
||||||
padding: $padding-y $padding-x;
|
padding: $padding-y $padding-x;
|
||||||
@include font-size($font-size);
|
@include font-size($font-size);
|
||||||
line-height: $line-height;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item {
|
.page-item {
|
||||||
&:first-child {
|
@if $pagination-margin-start == (-$pagination-border-width) {
|
||||||
.page-link {
|
&:first-child {
|
||||||
@include border-left-radius($border-radius);
|
.page-link {
|
||||||
|
@include border-start-radius($border-radius);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
.page-link {
|
||||||
|
@include border-end-radius($border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
//Add border-radius to all pageLinks in case they have left margin
|
||||||
.page-link {
|
.page-link {
|
||||||
@include border-right-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-docs-end pagination-mixin
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@mixin reset-text() {
|
@mixin reset-text {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or word-wrap.
|
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
|
|||||||
@ -1,34 +0,0 @@
|
|||||||
// Only display content to screen readers
|
|
||||||
//
|
|
||||||
// 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() {
|
|
||||||
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;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
|
||||||
//
|
|
||||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
|
||||||
//
|
|
||||||
// Credit: HTML5 Boilerplate
|
|
||||||
|
|
||||||
@mixin sr-only-focusable() {
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
position: static;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
overflow: visible;
|
|
||||||
clip: auto;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
// Sizing shortcuts
|
|
||||||
|
|
||||||
@mixin size($width, $height: $width) {
|
|
||||||
width: $width;
|
|
||||||
height: $height;
|
|
||||||
@include deprecate("`size()`", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
// Tables
|
|
||||||
|
|
||||||
@mixin table-row-variant($state, $background, $border: null) {
|
|
||||||
// Exact selectors below required to override `.table-striped` and prevent
|
|
||||||
// inheritance to nested tables.
|
|
||||||
.table-#{$state} {
|
|
||||||
&,
|
|
||||||
> th,
|
|
||||||
> td {
|
|
||||||
background-color: $background;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $border != null {
|
|
||||||
th,
|
|
||||||
td,
|
|
||||||
thead th,
|
|
||||||
tbody + tbody {
|
|
||||||
border-color: $border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover states for `.table-hover`
|
|
||||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
|
||||||
.table-hover {
|
|
||||||
$hover-background: darken($background, 5%);
|
|
||||||
|
|
||||||
.table-#{$state} {
|
|
||||||
@include hover() {
|
|
||||||
background-color: $hover-background;
|
|
||||||
|
|
||||||
> td,
|
|
||||||
> th {
|
|
||||||
background-color: $hover-background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
21
src/assets/styles/bootstrap/mixins/_table-variants.scss
Normal file
21
src/assets/styles/bootstrap/mixins/_table-variants.scss
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
// scss-docs-start table-variant
|
||||||
|
@mixin table-variant($state, $background) {
|
||||||
|
.table-#{$state} {
|
||||||
|
$color: color-contrast(opaque($body-bg, $background));
|
||||||
|
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
|
||||||
|
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
|
||||||
|
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
|
||||||
|
|
||||||
|
--#{$variable-prefix}table-bg: #{$background};
|
||||||
|
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
|
||||||
|
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||||
|
--#{$variable-prefix}table-active-bg: #{$active-bg};
|
||||||
|
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
|
||||||
|
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
|
||||||
|
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||||
|
|
||||||
|
color: $color;
|
||||||
|
border-color: mix($color, $background, percentage($table-border-factor));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// scss-docs-end table-variant
|
||||||
@ -1,17 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
|
|
||||||
@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
|
|
||||||
#{$parent} {
|
|
||||||
color: $color !important;
|
|
||||||
}
|
|
||||||
@if $emphasized-link-hover-darken-percentage != 0 {
|
|
||||||
a#{$parent} {
|
|
||||||
@include hover-focus() {
|
|
||||||
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
// CSS image replacement
|
|
||||||
@mixin text-hide($ignore-warning: false) {
|
|
||||||
// stylelint-disable-next-line font-family-no-missing-generic-family-keyword
|
|
||||||
font: 0/0 a;
|
|
||||||
color: transparent;
|
|
||||||
text-shadow: none;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
@include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
|
|
||||||
}
|
|
||||||
@ -17,7 +17,7 @@
|
|||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
|
@if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|||||||
68
src/assets/styles/bootstrap/mixins/_utilities.scss
Normal file
68
src/assets/styles/bootstrap/mixins/_utilities.scss
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
// Utility generator
|
||||||
|
// Used to generate utilities & print utilities
|
||||||
|
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
|
||||||
|
$values: map-get($utility, values);
|
||||||
|
|
||||||
|
// If the values are a list or string, convert it into a map
|
||||||
|
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
||||||
|
$values: zip($values, $values);
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $value in $values {
|
||||||
|
$properties: map-get($utility, property);
|
||||||
|
|
||||||
|
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
||||||
|
@if type-of($properties) == "string" {
|
||||||
|
$properties: append((), $properties);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use custom class if present
|
||||||
|
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
||||||
|
$property-class: if($property-class == null, "", $property-class);
|
||||||
|
|
||||||
|
// State params to generate pseudo-classes
|
||||||
|
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
||||||
|
|
||||||
|
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
||||||
|
|
||||||
|
// Don't prefix if value key is null (eg. with shadow class)
|
||||||
|
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
||||||
|
|
||||||
|
@if map-get($utility, rfs) {
|
||||||
|
// Inside the media query
|
||||||
|
@if $is-rfs-media-query {
|
||||||
|
$val: rfs-value($value);
|
||||||
|
|
||||||
|
// Do not render anything if fluid and non fluid values are the same
|
||||||
|
$value: if($val == rfs-fluid-value($value), null, $val);
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
$value: rfs-fluid-value($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$is-rtl: map-get($utility, rtl);
|
||||||
|
|
||||||
|
@if $value != null {
|
||||||
|
@if $is-rtl == false {
|
||||||
|
/* rtl:begin:remove */
|
||||||
|
}
|
||||||
|
.#{$property-class + $infix + $property-class-modifier} {
|
||||||
|
@each $property in $properties {
|
||||||
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $pseudo in $state {
|
||||||
|
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
||||||
|
@each $property in $properties {
|
||||||
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@if $is-rtl == false {
|
||||||
|
/* rtl:end:remove */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
// Visibility
|
|
||||||
|
|
||||||
@mixin invisible($visibility) {
|
|
||||||
visibility: $visibility !important;
|
|
||||||
@include deprecate("`invisible()`", "v4.3.0", "v5");
|
|
||||||
}
|
|
||||||
29
src/assets/styles/bootstrap/mixins/_visually-hidden.scss
Normal file
29
src/assets/styles/bootstrap/mixins/_visually-hidden.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
|
// Hide content visually while keeping it accessible to assistive technologies
|
||||||
|
//
|
||||||
|
// 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 visually-hidden() {
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
height: 1px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||||
|
overflow: hidden !important;
|
||||||
|
clip: rect(0, 0, 0, 0) !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use to only display content when it's focused, or one of its child elements is focused
|
||||||
|
// (i.e. when focus is within the element/container that the class was applied to)
|
||||||
|
//
|
||||||
|
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||||
|
|
||||||
|
@mixin visually-hidden-focusable() {
|
||||||
|
&:not(:focus):not(:focus-within) {
|
||||||
|
@include visually-hidden();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
|
||||||
.align-top { vertical-align: top !important; }
|
|
||||||
.align-middle { vertical-align: middle !important; }
|
|
||||||
.align-bottom { vertical-align: bottom !important; }
|
|
||||||
.align-text-bottom { vertical-align: text-bottom !important; }
|
|
||||||
.align-text-top { vertical-align: text-top !important; }
|
|
||||||
47
src/assets/styles/bootstrap/utilities/_api.scss
Normal file
47
src/assets/styles/bootstrap/utilities/_api.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
// Loop over each breakpoint
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
|
||||||
|
// Generate media query if needed
|
||||||
|
@include media-breakpoint-up($breakpoint) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
// Loop over each utility property
|
||||||
|
@each $key, $utility in $utilities {
|
||||||
|
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||||
|
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||||
|
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
||||||
|
@include generate-utility($utility, $infix);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// RFS rescaling
|
||||||
|
@media (min-width: $rfs-mq-value) {
|
||||||
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
||||||
|
// Loop over each utility property
|
||||||
|
@each $key, $utility in $utilities {
|
||||||
|
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||||
|
// Only proceed if responsive media queries are enabled or if it's the base media query
|
||||||
|
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
|
||||||
|
@include generate-utility($utility, $infix, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Print utilities
|
||||||
|
@media print {
|
||||||
|
@each $key, $utility in $utilities {
|
||||||
|
// The utility can be disabled with `false`, thus check if the utility is a map first
|
||||||
|
// Then check if the utility needs print styles
|
||||||
|
@if type-of($utility) == "map" and map-get($utility, print) == true {
|
||||||
|
@include generate-utility($utility, "-print");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,19 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
@include bg-variant(".bg-#{$color}", $value, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $enable-gradients {
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background-color: $white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-transparent {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
// stylelint-disable property-disallowed-list, declaration-no-important
|
|
||||||
|
|
||||||
//
|
|
||||||
// Border
|
|
||||||
//
|
|
||||||
|
|
||||||
.border { border: $border-width solid $border-color !important; }
|
|
||||||
.border-top { border-top: $border-width solid $border-color !important; }
|
|
||||||
.border-right { border-right: $border-width solid $border-color !important; }
|
|
||||||
.border-bottom { border-bottom: $border-width solid $border-color !important; }
|
|
||||||
.border-left { border-left: $border-width solid $border-color !important; }
|
|
||||||
|
|
||||||
.border-0 { border: 0 !important; }
|
|
||||||
.border-top-0 { border-top: 0 !important; }
|
|
||||||
.border-right-0 { border-right: 0 !important; }
|
|
||||||
.border-bottom-0 { border-bottom: 0 !important; }
|
|
||||||
.border-left-0 { border-left: 0 !important; }
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
.border-#{$color} {
|
|
||||||
border-color: $value !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-white {
|
|
||||||
border-color: $white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rounded-pill {
|
|
||||||
border-radius: $rounded-pill !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rounded-0 {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
//
|
|
||||||
// Utilities for common `display` values
|
|
||||||
//
|
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
||||||
|
|
||||||
@each $value in $displays {
|
|
||||||
.d#{$infix}-#{$value} { display: $value !important; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Utilities for toggling `display` in print
|
|
||||||
//
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
@each $value in $displays {
|
|
||||||
.d-print-#{$value} { display: $value !important; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
// Credit: Nicolas Gallagher and SUIT CSS.
|
|
||||||
|
|
||||||
.embed-responsive {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-responsive-item,
|
|
||||||
iframe,
|
|
||||||
embed,
|
|
||||||
object,
|
|
||||||
video {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
|
|
||||||
$embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
|
|
||||||
$embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
|
|
||||||
|
|
||||||
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
|
|
||||||
&::before {
|
|
||||||
padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
// stylelint-disable declaration-no-important
|
|
||||||
|
|
||||||
// Flex variation
|
|
||||||
//
|
|
||||||
// Custom styles for additional flex alignment options.
|
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
||||||
|
|
||||||
.flex#{$infix}-row { flex-direction: row !important; }
|
|
||||||
.flex#{$infix}-column { flex-direction: column !important; }
|
|
||||||
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
|
|
||||||
.flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
|
|
||||||
|
|
||||||
.flex#{$infix}-wrap { flex-wrap: wrap !important; }
|
|
||||||
.flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
|
|
||||||
.flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
|
||||||
.flex#{$infix}-fill { flex: 1 1 auto !important; }
|
|
||||||
.flex#{$infix}-grow-0 { flex-grow: 0 !important; }
|
|
||||||
.flex#{$infix}-grow-1 { flex-grow: 1 !important; }
|
|
||||||
.flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
|
|
||||||
.flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
|
|
||||||
|
|
||||||
.justify-content#{$infix}-start { justify-content: flex-start !important; }
|
|
||||||
.justify-content#{$infix}-end { justify-content: flex-end !important; }
|
|
||||||
.justify-content#{$infix}-center { justify-content: center !important; }
|
|
||||||
.justify-content#{$infix}-between { justify-content: space-between !important; }
|
|
||||||
.justify-content#{$infix}-around { justify-content: space-around !important; }
|
|
||||||
|
|
||||||
.align-items#{$infix}-start { align-items: flex-start !important; }
|
|
||||||
.align-items#{$infix}-end { align-items: flex-end !important; }
|
|
||||||
.align-items#{$infix}-center { align-items: center !important; }
|
|
||||||
.align-items#{$infix}-baseline { align-items: baseline !important; }
|
|
||||||
.align-items#{$infix}-stretch { align-items: stretch !important; }
|
|
||||||
|
|
||||||
.align-content#{$infix}-start { align-content: flex-start !important; }
|
|
||||||
.align-content#{$infix}-end { align-content: flex-end !important; }
|
|
||||||
.align-content#{$infix}-center { align-content: center !important; }
|
|
||||||
.align-content#{$infix}-between { align-content: space-between !important; }
|
|
||||||
.align-content#{$infix}-around { align-content: space-around !important; }
|
|
||||||
.align-content#{$infix}-stretch { align-content: stretch !important; }
|
|
||||||
|
|
||||||
.align-self#{$infix}-auto { align-self: auto !important; }
|
|
||||||
.align-self#{$infix}-start { align-self: flex-start !important; }
|
|
||||||
.align-self#{$infix}-end { align-self: flex-end !important; }
|
|
||||||
.align-self#{$infix}-center { align-self: center !important; }
|
|
||||||
.align-self#{$infix}-baseline { align-self: baseline !important; }
|
|
||||||
.align-self#{$infix}-stretch { align-self: stretch !important; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user