Merge branch 'master' into node-dependencies
This commit is contained in:
IanDelMar
GitHub
commit
01ca1652e9
Binary file not shown.
1275
css/theme.css
1275
css/theme.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
739
js/theme.js
739
js/theme.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1689,6 +1689,28 @@
|
||||||
"socket.io": "2.1.1",
|
"socket.io": "2.1.1",
|
||||||
"ua-parser-js": "0.7.17",
|
"ua-parser-js": "0.7.17",
|
||||||
"yargs": "6.4.0"
|
"yargs": "6.4.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"micromatch": {
|
||||||
|
"version": "3.1.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
|
||||||
|
"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
|
||||||
|
"requires": {
|
||||||
|
"arr-diff": "^4.0.0",
|
||||||
|
"array-unique": "^0.3.2",
|
||||||
|
"braces": "^2.3.1",
|
||||||
|
"define-property": "^2.0.2",
|
||||||
|
"extend-shallow": "^3.0.2",
|
||||||
|
"extglob": "^2.0.4",
|
||||||
|
"fragment-cache": "^0.2.1",
|
||||||
|
"kind-of": "^6.0.2",
|
||||||
|
"nanomatch": "^1.2.9",
|
||||||
|
"object.pick": "^1.3.0",
|
||||||
|
"regex-not": "^1.0.0",
|
||||||
|
"snapdragon": "^0.8.1",
|
||||||
|
"to-regex": "^3.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"browser-sync-client": {
|
"browser-sync-client": {
|
||||||
|
|
@ -2872,6 +2894,21 @@
|
||||||
"ws": "~6.1.0",
|
"ws": "~6.1.0",
|
||||||
"xmlhttprequest-ssl": "~1.5.4",
|
"xmlhttprequest-ssl": "~1.5.4",
|
||||||
"yeast": "0.1.2"
|
"yeast": "0.1.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"debug": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||||
|
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||||
|
"requires": {
|
||||||
|
"ms": "^2.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ms": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"engine.io-parser": {
|
"engine.io-parser": {
|
||||||
|
|
@ -5052,6 +5089,11 @@
|
||||||
"toidentifier": "1.0.0"
|
"toidentifier": "1.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"inherits": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
|
||||||
|
},
|
||||||
"statuses": {
|
"statuses": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
||||||
|
|
@ -8046,6 +8088,21 @@
|
||||||
"parseuri": "0.0.5",
|
"parseuri": "0.0.5",
|
||||||
"socket.io-parser": "~3.3.0",
|
"socket.io-parser": "~3.3.0",
|
||||||
"to-array": "0.1.4"
|
"to-array": "0.1.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"debug": {
|
||||||
|
"version": "4.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||||
|
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||||
|
"requires": {
|
||||||
|
"ms": "^2.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ms": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"socket.io-parser": {
|
"socket.io-parser": {
|
||||||
|
|
|
||||||
14
package.json
14
package.json
|
|
@ -27,14 +27,14 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://understrap.com",
|
"homepage": "https://understrap.com",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/preset-env": "^7.4.5",
|
"@babel/preset-env": "^7.7.7",
|
||||||
"bootstrap": "^4.4.1",
|
"bootstrap": "^4.4.1",
|
||||||
"browser-sync": "^2.26.7",
|
"browser-sync": "^2.26.7",
|
||||||
"del": "^4.1.0",
|
"del": "^4.1.1",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"gulp": "^4.0.0",
|
"gulp": "^4.0.2",
|
||||||
"gulp-autoprefixer": "^6.0.0",
|
"gulp-autoprefixer": "^6.1.0",
|
||||||
"gulp-clean-css": "^4.0.0",
|
"gulp-clean-css": "^4.2.0",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-ignore": "^2.0.2",
|
"gulp-ignore": "^2.0.2",
|
||||||
"gulp-imagemin": "^5.0.3",
|
"gulp-imagemin": "^5.0.3",
|
||||||
|
|
@ -50,8 +50,8 @@
|
||||||
"undescores-for-npm": "^1.0.0"
|
"undescores-for-npm": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.4.4",
|
"@babel/core": "^7.7.7",
|
||||||
"autoprefixer": "^9.5.1",
|
"autoprefixer": "^9.7.3",
|
||||||
"gulp-babel": "^8.0.0",
|
"gulp-babel": "^8.0.0",
|
||||||
"gulp-postcss": "^8.0.0"
|
"gulp-postcss": "^8.0.0"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.3.1 (https://getbootstrap.com/)
|
* Bootstrap v4.4.1 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2019 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2019 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,7 @@
|
||||||
@include transition($badge-transition);
|
@include transition($badge-transition);
|
||||||
|
|
||||||
@at-root a#{&} {
|
@at-root a#{&} {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
margin-bottom: $breadcrumb-margin-bottom;
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
|
@include font-size($breadcrumb-font-size);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: $breadcrumb-bg;
|
background-color: $breadcrumb-bg;
|
||||||
@include border-radius($breadcrumb-border-radius);
|
@include border-radius($breadcrumb-border-radius);
|
||||||
|
|
@ -17,7 +18,7 @@
|
||||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||||
padding-right: $breadcrumb-item-padding;
|
padding-right: $breadcrumb-item-padding;
|
||||||
color: $breadcrumb-divider-color;
|
color: $breadcrumb-divider-color;
|
||||||
content: $breadcrumb-divider;
|
content: escape-svg($breadcrumb-divider);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
// the borders properly
|
// the borders properly
|
||||||
@include hover {
|
@include hover() {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,16 @@
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
white-space: $btn-white-space;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: $btn-border-width solid transparent;
|
border: $btn-border-width solid transparent;
|
||||||
@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-line-height, $btn-border-radius);
|
||||||
@include transition($btn-transition);
|
@include transition($btn-transition);
|
||||||
|
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -79,7 +81,7 @@ fieldset:disabled a.btn {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
|
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||||
|
height: $card-height;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
background-color: $card-bg;
|
background-color: $card-bg;
|
||||||
background-clip: border-box;
|
background-clip: border-box;
|
||||||
|
|
@ -35,6 +36,9 @@
|
||||||
// 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
|
||||||
|
// See: https://github.com/twbs/bootstrap/pull/28855
|
||||||
|
min-height: 1px;
|
||||||
padding: $card-spacer-x;
|
padding: $card-spacer-x;
|
||||||
color: $card-color;
|
color: $card-color;
|
||||||
}
|
}
|
||||||
|
|
@ -53,7 +57,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-link {
|
.card-link {
|
||||||
@include hover {
|
@include hover() {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -121,19 +125,20 @@
|
||||||
padding: $card-img-overlay-padding;
|
padding: $card-img-overlay-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img {
|
.card-img,
|
||||||
|
.card-img-top,
|
||||||
|
.card-img-bottom {
|
||||||
|
flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
|
||||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||||
@include border-radius($card-inner-border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card image caps
|
.card-img,
|
||||||
.card-img-top {
|
.card-img-top {
|
||||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
||||||
@include border-top-radius($card-inner-border-radius);
|
@include border-top-radius($card-inner-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-img,
|
||||||
.card-img-bottom {
|
.card-img-bottom {
|
||||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
|
||||||
@include border-bottom-radius($card-inner-border-radius);
|
@include border-bottom-radius($card-inner-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -141,23 +146,19 @@
|
||||||
// Card deck
|
// Card deck
|
||||||
|
|
||||||
.card-deck {
|
.card-deck {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
margin-bottom: $card-deck-margin;
|
margin-bottom: $card-deck-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
@include media-breakpoint-up(sm) {
|
||||||
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
margin-right: -$card-deck-margin;
|
margin-right: -$card-deck-margin;
|
||||||
margin-left: -$card-deck-margin;
|
margin-left: -$card-deck-margin;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: flex;
|
|
||||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||||
flex: 1 0 0%;
|
flex: 1 0 0%;
|
||||||
flex-direction: column;
|
|
||||||
margin-right: $card-deck-margin;
|
margin-right: $card-deck-margin;
|
||||||
margin-bottom: 0; // Override the default
|
margin-bottom: 0; // Override the default
|
||||||
margin-left: $card-deck-margin;
|
margin-left: $card-deck-margin;
|
||||||
|
|
@ -171,9 +172,6 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.card-group {
|
.card-group {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
// The child selector allows nested `.card` within `.card-group`
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
// to display properly.
|
// to display properly.
|
||||||
> .card {
|
> .card {
|
||||||
|
|
@ -181,6 +179,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
@include media-breakpoint-up(sm) {
|
||||||
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
// The child selector allows nested `.card` within `.card-group`
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
// to display properly.
|
// to display properly.
|
||||||
|
|
@ -262,27 +261,17 @@
|
||||||
> .card {
|
> .card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:last-of-type) {
|
||||||
.card-header:first-child {
|
|
||||||
@include border-radius(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
border-bottom: 0;
|
|
||||||
@include border-radius(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
@include border-bottom-radius(0);
|
@include border-bottom-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:not(:first-of-type) {
|
||||||
@include border-top-radius(0);
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
> .card-header {
|
||||||
|
@include border-radius(0);
|
||||||
margin-bottom: -$card-border-width;
|
margin-bottom: -$card-border-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
.active.carousel-item-right {
|
.active.carousel-item-right {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@include transition(0s $carousel-transition-duration opacity);
|
@include transition(opacity 0s $carousel-transition-duration);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
@include transition($carousel-control-transition);
|
@include transition($carousel-control-transition);
|
||||||
|
|
||||||
// Hover/focus state
|
// Hover/focus state
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $carousel-control-color;
|
color: $carousel-control-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
@ -111,13 +111,13 @@
|
||||||
.carousel-control-prev {
|
.carousel-control-prev {
|
||||||
left: 0;
|
left: 0;
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.carousel-control-next {
|
.carousel-control-next {
|
||||||
right: 0;
|
right: 0;
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -130,10 +130,10 @@
|
||||||
background: no-repeat 50% / 100% 100%;
|
background: no-repeat 50% / 100% 100%;
|
||||||
}
|
}
|
||||||
.carousel-control-prev-icon {
|
.carousel-control-prev-icon {
|
||||||
background-image: $carousel-control-prev-icon-bg;
|
background-image: escape-svg($carousel-control-prev-icon-bg);
|
||||||
}
|
}
|
||||||
.carousel-control-next-icon {
|
.carousel-control-next-icon {
|
||||||
background-image: $carousel-control-next-icon-bg;
|
background-image: escape-svg($carousel-control-next-icon-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
|
|
||||||
// Override <a>'s hover style
|
// Override <a>'s hover style
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $close-color;
|
color: $close-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):not(.disabled) {
|
&:not(:disabled):not(.disabled) {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
code {
|
code {
|
||||||
@include font-size($code-font-size);
|
@include font-size($code-font-size);
|
||||||
color: $code-color;
|
color: $code-color;
|
||||||
word-break: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
// Streamline the style when inside anchors to avoid broken underline and more
|
// Streamline the style when inside anchors to avoid broken underline and more
|
||||||
a > & {
|
a > & {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,10 @@
|
||||||
|
|
||||||
.custom-control-input {
|
.custom-control-input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
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;
|
opacity: 0;
|
||||||
|
|
||||||
&:checked ~ .custom-control-label::before {
|
&:checked ~ .custom-control-label::before {
|
||||||
|
|
@ -51,6 +54,8 @@
|
||||||
@include box-shadow($custom-control-indicator-active-box-shadow);
|
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
|
||||||
|
&[disabled],
|
||||||
&:disabled {
|
&:disabled {
|
||||||
~ .custom-control-label {
|
~ .custom-control-label {
|
||||||
color: $custom-control-label-disabled-color;
|
color: $custom-control-label-disabled-color;
|
||||||
|
|
@ -69,7 +74,9 @@
|
||||||
.custom-control-label {
|
.custom-control-label {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
color: $custom-control-label-color;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
cursor: $custom-control-cursor;
|
||||||
|
|
||||||
// Background-color and (when enabled) gradient
|
// Background-color and (when enabled) gradient
|
||||||
&::before {
|
&::before {
|
||||||
|
|
@ -111,7 +118,7 @@
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-label {
|
.custom-control-input:checked ~ .custom-control-label {
|
||||||
&::after {
|
&::after {
|
||||||
background-image: $custom-checkbox-indicator-icon-checked;
|
background-image: escape-svg($custom-checkbox-indicator-icon-checked);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -122,7 +129,7 @@
|
||||||
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,7 +155,7 @@
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-label {
|
.custom-control-input:checked ~ .custom-control-label {
|
||||||
&::after {
|
&::after {
|
||||||
background-image: $custom-radio-indicator-icon-checked;
|
background-image: escape-svg($custom-radio-indicator-icon-checked);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -177,8 +184,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
|
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
|
||||||
left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$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;
|
width: $custom-switch-indicator-size;
|
||||||
height: $custom-switch-indicator-size;
|
height: $custom-switch-indicator-size;
|
||||||
background-color: $custom-control-indicator-border-color;
|
background-color: $custom-control-indicator-border-color;
|
||||||
|
|
@ -220,8 +227,7 @@
|
||||||
line-height: $custom-select-line-height;
|
line-height: $custom-select-line-height;
|
||||||
color: $custom-select-color;
|
color: $custom-select-color;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background: $custom-select-background;
|
background: $custom-select-bg $custom-select-background;
|
||||||
background-color: $custom-select-bg;
|
|
||||||
border: $custom-select-border-width solid $custom-select-border-color;
|
border: $custom-select-border-width solid $custom-select-border-color;
|
||||||
@include border-radius($custom-select-border-radius, 0);
|
@include border-radius($custom-select-border-radius, 0);
|
||||||
@include box-shadow($custom-select-box-shadow);
|
@include box-shadow($custom-select-box-shadow);
|
||||||
|
|
@ -263,6 +269,12 @@
|
||||||
&::-ms-expand {
|
&::-ms-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove outline from select box in FF
|
||||||
|
&:-moz-focusring {
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 0 $custom-select-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-select-sm {
|
.custom-select-sm {
|
||||||
|
|
@ -307,6 +319,8 @@
|
||||||
box-shadow: $custom-file-focus-box-shadow;
|
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 {
|
&:disabled ~ .custom-file-label {
|
||||||
background-color: $custom-file-disabled-bg;
|
background-color: $custom-file-disabled-bg;
|
||||||
}
|
}
|
||||||
|
|
@ -365,7 +379,7 @@
|
||||||
|
|
||||||
.custom-range {
|
.custom-range {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
|
height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
|
||||||
padding: 0; // Need to reset padding
|
padding: 0; // Need to reset padding
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
// Generate the caret automatically
|
// Generate the caret automatically
|
||||||
@include caret;
|
@include caret();
|
||||||
}
|
}
|
||||||
|
|
||||||
// The dropdown menu
|
// The dropdown menu
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
|
|
||||||
// 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);
|
@include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links, buttons, and more within the dropdown menu
|
// Links, buttons, and more within the dropdown menu
|
||||||
|
|
@ -144,7 +144,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $dropdown-link-hover-color;
|
color: $dropdown-link-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@include gradient-bg($dropdown-link-hover-bg);
|
@include gradient-bg($dropdown-link-hover-bg);
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,14 @@
|
||||||
border: 0;
|
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.
|
// Customize the `:focus` state to imitate native WebKit styles.
|
||||||
@include form-control-focus();
|
@include form-control-focus($ignore-warning: true);
|
||||||
|
|
||||||
// Placeholder
|
// Placeholder
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
|
|
@ -80,23 +86,23 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the label (or legend)
|
// For use with horizontal and inline forms, when you need the label (or legend)
|
||||||
// text to align with the form controls.
|
// text to align with the form controls.
|
||||||
.col-form-label {
|
.col-form-label {
|
||||||
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
|
padding-top: add($input-padding-y, $input-border-width);
|
||||||
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
|
padding-bottom: add($input-padding-y, $input-border-width);
|
||||||
margin-bottom: 0; // Override the `<label>/<legend>` default
|
margin-bottom: 0; // Override the `<label>/<legend>` default
|
||||||
@include font-size(inherit); // Override the `<legend>` default
|
@include font-size(inherit); // Override the `<legend>` default
|
||||||
line-height: $input-line-height;
|
line-height: $input-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-lg {
|
.col-form-label-lg {
|
||||||
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
padding-top: add($input-padding-y-lg, $input-border-width);
|
||||||
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
padding-bottom: add($input-padding-y-lg, $input-border-width);
|
||||||
@include font-size($input-font-size-lg);
|
@include font-size($input-font-size-lg);
|
||||||
line-height: $input-line-height-lg;
|
line-height: $input-line-height-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-sm {
|
.col-form-label-sm {
|
||||||
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
padding-top: add($input-padding-y-sm, $input-border-width);
|
||||||
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
padding-bottom: add($input-padding-y-sm, $input-border-width);
|
||||||
@include font-size($input-font-size-sm);
|
@include font-size($input-font-size-sm);
|
||||||
line-height: $input-line-height-sm;
|
line-height: $input-line-height-sm;
|
||||||
}
|
}
|
||||||
|
|
@ -110,9 +116,9 @@ select.form-control {
|
||||||
.form-control-plaintext {
|
.form-control-plaintext {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: $input-padding-y;
|
padding: $input-padding-y 0;
|
||||||
padding-bottom: $input-padding-y;
|
|
||||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
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;
|
line-height: $input-line-height;
|
||||||
color: $input-plaintext-color;
|
color: $input-plaintext-color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -210,6 +216,8 @@ textarea.form-control {
|
||||||
margin-top: $form-check-input-margin-y;
|
margin-top: $form-check-input-margin-y;
|
||||||
margin-left: -$form-check-input-gutter;
|
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 {
|
&:disabled ~ .form-check-label {
|
||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
$prev-key: null;
|
$prev-key: null;
|
||||||
$prev-num: null;
|
$prev-num: null;
|
||||||
@each $key, $num in $map {
|
@each $key, $num in $map {
|
||||||
@if $prev-num == null or unit($num) == "%" {
|
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
|
||||||
// Do nothing
|
// Do nothing
|
||||||
} @else if not comparable($prev-num, $num) {
|
} @else if not comparable($prev-num, $num) {
|
||||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||||
|
|
@ -48,6 +48,17 @@
|
||||||
@return $string;
|
@return $string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// See https://codepen.io/kevinweber/pen/dXWoRw
|
||||||
|
@function escape-svg($string) {
|
||||||
|
@if str-index($string, "data:image/svg+xml") {
|
||||||
|
@each $char, $encoded in $escaped-characters {
|
||||||
|
$string: str-replace($string, $char, $encoded);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $string;
|
||||||
|
}
|
||||||
|
|
||||||
// Color contrast
|
// Color contrast
|
||||||
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
||||||
$r: red($color);
|
$r: red($color);
|
||||||
|
|
@ -84,3 +95,40 @@
|
||||||
|
|
||||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Return valid calc
|
||||||
|
@function add($value1, $value2, $return-calc: true) {
|
||||||
|
@if $value1 == null {
|
||||||
|
@return $value2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $value2 == null {
|
||||||
|
@return $value1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||||
|
@return $value1 + $value2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function subtract($value1, $value2, $return-calc: true) {
|
||||||
|
@if $value1 == null and $value2 == null {
|
||||||
|
@return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $value1 == null {
|
||||||
|
@return -$value2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $value2 == null {
|
||||||
|
@return $value1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
|
||||||
|
@return $value1 - $value2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,26 +3,43 @@
|
||||||
// Set the container width, and override it for fixed navbars in media queries.
|
// Set the container width, and override it for fixed navbars in media queries.
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
|
// Single container class with breakpoint max-widths
|
||||||
.container {
|
.container {
|
||||||
@include make-container();
|
@include make-container();
|
||||||
@include make-container-max-widths();
|
@include make-container-max-widths();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Fluid container
|
// 100% wide container at all breakpoints
|
||||||
//
|
|
||||||
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
|
||||||
// fluid, full width layouts.
|
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
@include make-container();
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $width in $grid-breakpoints {
|
||||||
|
@if ($container-max-width > $width or $breakpoint == $name) {
|
||||||
|
.container#{breakpoint-infix($name, $grid-breakpoints)} {
|
||||||
|
@extend %responsive-container-#{$breakpoint};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Row
|
// Row
|
||||||
//
|
//
|
||||||
// Rows contain and clear the floats of your columns.
|
// Rows contain your columns.
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
.row {
|
.row {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||||
.img-fluid {
|
.img-fluid {
|
||||||
@include img-fluid;
|
@include img-fluid();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
@include box-shadow($thumbnail-box-shadow);
|
@include box-shadow($thumbnail-box-shadow);
|
||||||
|
|
||||||
// Keep them at most 100% wide
|
// Keep them at most 100% wide
|
||||||
@include img-fluid;
|
@include img-fluid();
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,8 @@
|
||||||
> .custom-select,
|
> .custom-select,
|
||||||
> .custom-file {
|
> .custom-file {
|
||||||
position: relative; // For focus state's z-index
|
position: relative; // For focus state's z-index
|
||||||
flex: 1 1 auto;
|
flex: 1 1 0%;
|
||||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
||||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
|
||||||
width: 1%;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
+ .form-control,
|
+ .form-control,
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||||
|
|
||||||
// Hover state
|
// Hover state
|
||||||
@include hover-focus {
|
@include 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;
|
||||||
|
|
@ -45,8 +45,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||||
// Place the border on the list items and negative margin up for better styling
|
|
||||||
margin-bottom: -$list-group-border-width;
|
|
||||||
color: $list-group-color;
|
color: $list-group-color;
|
||||||
background-color: $list-group-bg;
|
background-color: $list-group-bg;
|
||||||
border: $list-group-border-width solid $list-group-border-color;
|
border: $list-group-border-width solid $list-group-border-color;
|
||||||
|
|
@ -56,7 +54,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
|
||||||
@include border-bottom-radius($list-group-border-radius);
|
@include border-bottom-radius($list-group-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -74,6 +71,15 @@
|
||||||
background-color: $list-group-active-bg;
|
background-color: $list-group-active-bg;
|
||||||
border-color: $list-group-active-border-color;
|
border-color: $list-group-active-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& + & {
|
||||||
|
border-top-width: 0;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
margin-top: -$list-group-border-width;
|
||||||
|
border-top-width: $list-group-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -89,19 +95,29 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
margin-right: -$list-group-border-width;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-left-radius($list-group-border-radius);
|
@include border-bottom-left-radius($list-group-border-radius);
|
||||||
@include border-top-right-radius(0);
|
@include border-top-right-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
@include border-top-right-radius($list-group-border-radius);
|
||||||
@include border-right-radius($list-group-border-radius);
|
|
||||||
@include border-bottom-left-radius(0);
|
@include border-bottom-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + .list-group-item {
|
||||||
|
border-top-width: $list-group-border-width;
|
||||||
|
border-left-width: 0;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
margin-left: -$list-group-border-width;
|
||||||
|
border-left-width: $list-group-border-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -115,25 +131,18 @@
|
||||||
|
|
||||||
.list-group-flush {
|
.list-group-flush {
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
border-right: 0;
|
border-right-width: 0;
|
||||||
border-left: 0;
|
border-left-width: 0;
|
||||||
@include border-radius(0);
|
@include border-radius(0);
|
||||||
|
|
||||||
&:last-child {
|
&:first-child {
|
||||||
margin-bottom: -$list-group-border-width;
|
border-top-width: 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
.list-group-item:first-child {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
.list-group-item:last-child {
|
.list-group-item:last-child {
|
||||||
margin-bottom: 0;
|
border-bottom-width: 0;
|
||||||
border-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
@import "mixins/text-truncate";
|
@import "mixins/text-truncate";
|
||||||
@import "mixins/visibility";
|
@import "mixins/visibility";
|
||||||
|
|
||||||
// // Components
|
// Components
|
||||||
@import "mixins/alert";
|
@import "mixins/alert";
|
||||||
@import "mixins/buttons";
|
@import "mixins/buttons";
|
||||||
@import "mixins/caret";
|
@import "mixins/caret";
|
||||||
|
|
@ -33,14 +33,14 @@
|
||||||
@import "mixins/forms";
|
@import "mixins/forms";
|
||||||
@import "mixins/table-row";
|
@import "mixins/table-row";
|
||||||
|
|
||||||
// // Skins
|
// Skins
|
||||||
@import "mixins/background-variant";
|
@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";
|
||||||
@import "mixins/transition";
|
@import "mixins/transition";
|
||||||
|
|
||||||
// // Layout
|
// Layout
|
||||||
@import "mixins/clearfix";
|
@import "mixins/clearfix";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/grid-framework";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
|
|
|
||||||
|
|
@ -48,14 +48,19 @@
|
||||||
.modal.show & {
|
.modal.show & {
|
||||||
transform: $modal-show-transform;
|
transform: $modal-show-transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// When trying to close, animate focus to scale
|
||||||
|
.modal.modal-static & {
|
||||||
|
transform: $modal-scale-transform;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-scrollable {
|
.modal-dialog-scrollable {
|
||||||
display: flex; // IE10/11
|
display: flex; // IE10/11
|
||||||
max-height: calc(100% - #{$modal-dialog-margin * 2});
|
max-height: subtract(100%, $modal-dialog-margin * 2);
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
|
max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,12 +77,12 @@
|
||||||
.modal-dialog-centered {
|
.modal-dialog-centered {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: calc(100% - #{$modal-dialog-margin * 2});
|
min-height: subtract(100%, $modal-dialog-margin * 2);
|
||||||
|
|
||||||
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
|
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
|
||||||
&::before {
|
&::before {
|
||||||
display: block; // IE10
|
display: block; // IE10
|
||||||
height: calc(100vh - #{$modal-dialog-margin * 2});
|
height: subtract(100vh, $modal-dialog-margin * 2);
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -138,7 +143,7 @@
|
||||||
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-border-radius);
|
@include border-top-radius($modal-content-inner-border-radius);
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
padding: $modal-header-padding;
|
padding: $modal-header-padding;
|
||||||
|
|
@ -158,7 +163,7 @@
|
||||||
.modal-body {
|
.modal-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||||
// when should there be a fixed height on `.modal-dialog`.
|
// when there should be a fixed height on `.modal-dialog`.
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
padding: $modal-inner-padding;
|
padding: $modal-inner-padding;
|
||||||
}
|
}
|
||||||
|
|
@ -166,15 +171,20 @@
|
||||||
// Footer (for actions)
|
// Footer (for actions)
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
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;
|
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
||||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||||
@include border-bottom-radius($modal-content-border-radius);
|
@include border-bottom-radius($modal-content-inner-border-radius);
|
||||||
|
|
||||||
// Easily place margin between footer elements
|
// Place margin between footer elements
|
||||||
> :not(:first-child) { margin-left: .25rem; }
|
// This solution is far from ideal because of the universal selector usage,
|
||||||
> :not(:last-child) { margin-right: .25rem; }
|
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
||||||
|
// stylelint-disable-next-line selector-max-universal
|
||||||
|
> * {
|
||||||
|
margin: $modal-footer-margin-between / 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Measure scrollbar width for padding body during modal show/hide
|
// Measure scrollbar width for padding body during modal show/hide
|
||||||
|
|
@ -195,18 +205,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-scrollable {
|
.modal-dialog-scrollable {
|
||||||
max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
|
max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
|
max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-centered {
|
.modal-dialog-centered {
|
||||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
|
min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
|
height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Kickstart any navigation component with a set of style resets. Works with
|
// Kickstart any navigation component with a set of style resets. Works with
|
||||||
// `<nav>`s or `<ul>`s.
|
// `<nav>`s, `<ul>`s or `<ol>`s.
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
border: $nav-tabs-border-width solid transparent;
|
border: $nav-tabs-border-width solid transparent;
|
||||||
@include border-top-radius($nav-tabs-border-radius);
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
border-color: $nav-tabs-link-hover-border-color;
|
border-color: $nav-tabs-link-hover-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,13 +25,23 @@
|
||||||
|
|
||||||
// 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.
|
||||||
> .container,
|
%container-flex-properties {
|
||||||
> .container-fluid {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
@extend %container-flex-properties;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $breakpoint, $container-max-width in $container-max-widths {
|
||||||
|
> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
|
||||||
|
@extend %container-flex-properties;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -48,7 +58,7 @@
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -113,7 +123,7 @@
|
||||||
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 hover-focus {
|
@include hover-focus() {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -139,11 +149,21 @@
|
||||||
|
|
||||||
&#{$infix} {
|
&#{$infix} {
|
||||||
@include media-breakpoint-down($breakpoint) {
|
@include media-breakpoint-down($breakpoint) {
|
||||||
> .container,
|
%container-navbar-expand-#{$breakpoint} {
|
||||||
> .container-fluid {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 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) {
|
||||||
|
|
@ -164,9 +184,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// For nesting containers, have to redeclare for alignment purposes
|
// For nesting containers, have to redeclare for alignment purposes
|
||||||
|
%container-nesting-#{$breakpoint} {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
> .container,
|
> .container,
|
||||||
> .container-fluid {
|
> .container-fluid {
|
||||||
flex-wrap: nowrap;
|
@extend %container-nesting-#{$breakpoint};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $size, $container-max-width in $container-max-widths {
|
||||||
|
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
||||||
|
@extend %container-nesting-#{$breakpoint};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
|
|
@ -194,7 +224,7 @@
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $navbar-light-brand-color;
|
color: $navbar-light-brand-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-light-brand-hover-color;
|
color: $navbar-light-brand-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -203,7 +233,7 @@
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: $navbar-light-color;
|
color: $navbar-light-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-light-hover-color;
|
color: $navbar-light-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -226,7 +256,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler-icon {
|
.navbar-toggler-icon {
|
||||||
background-image: $navbar-light-toggler-icon-bg;
|
background-image: escape-svg($navbar-light-toggler-icon-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
|
|
@ -234,7 +264,7 @@
|
||||||
a {
|
a {
|
||||||
color: $navbar-light-active-color;
|
color: $navbar-light-active-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-light-active-color;
|
color: $navbar-light-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -246,7 +276,7 @@
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $navbar-dark-brand-color;
|
color: $navbar-dark-brand-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-dark-brand-hover-color;
|
color: $navbar-dark-brand-hover-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -255,7 +285,7 @@
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: $navbar-dark-color;
|
color: $navbar-dark-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-dark-hover-color;
|
color: $navbar-dark-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -278,7 +308,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler-icon {
|
.navbar-toggler-icon {
|
||||||
background-image: $navbar-dark-toggler-icon-bg;
|
background-image: escape-svg($navbar-dark-toggler-icon-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
|
|
@ -286,7 +316,7 @@
|
||||||
a {
|
a {
|
||||||
color: $navbar-dark-active-color;
|
color: $navbar-dark-active-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $navbar-dark-active-color;
|
color: $navbar-dark-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
outline: $pagination-focus-outline;
|
outline: $pagination-focus-outline;
|
||||||
box-shadow: $pagination-focus-box-shadow;
|
box-shadow: $pagination-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active .page-link {
|
&.active .page-link {
|
||||||
z-index: 1;
|
z-index: 3;
|
||||||
color: $pagination-active-color;
|
color: $pagination-active-color;
|
||||||
background-color: $pagination-active-bg;
|
background-color: $pagination-active-bg;
|
||||||
border-color: $pagination-active-border-color;
|
border-color: $pagination-active-border-color;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: $popover-arrow-width;
|
width: $popover-arrow-width;
|
||||||
height: $popover-arrow-height;
|
height: $popover-arrow-height;
|
||||||
margin: 0 $border-radius-lg;
|
margin: 0 $popover-border-radius;
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
margin-bottom: $popover-arrow-height;
|
margin-bottom: $popover-arrow-height;
|
||||||
|
|
||||||
> .arrow {
|
> .arrow {
|
||||||
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
bottom: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -59,10 +59,10 @@
|
||||||
margin-left: $popover-arrow-height;
|
margin-left: $popover-arrow-height;
|
||||||
|
|
||||||
> .arrow {
|
> .arrow {
|
||||||
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
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: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
|
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -82,7 +82,7 @@
|
||||||
margin-top: $popover-arrow-height;
|
margin-top: $popover-arrow-height;
|
||||||
|
|
||||||
> .arrow {
|
> .arrow {
|
||||||
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
top: subtract(-$popover-arrow-height, $popover-border-width);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -114,10 +114,10 @@
|
||||||
margin-right: $popover-arrow-height;
|
margin-right: $popover-arrow-height;
|
||||||
|
|
||||||
> .arrow {
|
> .arrow {
|
||||||
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
|
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: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
|
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -157,8 +157,7 @@
|
||||||
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 darken($popover-header-bg, 5%);
|
||||||
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
@include border-top-radius($popover-inner-border-radius);
|
||||||
@include border-top-radius($offset-border-width);
|
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||||
|
|
||||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
|
||||||
|
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Print styles.
|
// Print styles.
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
|
|
||||||
//
|
//
|
||||||
// Printing Tables:
|
// Printing Tables:
|
||||||
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||||
//
|
//
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
color: $progress-bar-color;
|
color: $progress-bar-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -36,8 +37,10 @@
|
||||||
.progress-bar-animated {
|
.progress-bar-animated {
|
||||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@if $enable-prefers-reduced-motion-media-query {
|
||||||
animation: none;
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -54,12 +54,16 @@ body {
|
||||||
background-color: $body-bg; // 2
|
background-color: $body-bg; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
|
||||||
// This prevents an unwanted focus outline from appearing around elements that
|
// on elements that programmatically receive focus but wouldn't normally show a visible
|
||||||
// might still respond to pointer events.
|
// focus outline. In general, this would mean that the outline is only applied if the
|
||||||
|
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
|
||||||
|
// or the browser has somehow determined that the user is primarily a keyboard user and/or
|
||||||
|
// wants focus outlines to always be presented.
|
||||||
//
|
//
|
||||||
// Credit: https://github.com/suitcss/base
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
|
||||||
[tabindex="-1"]:focus {
|
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
|
||||||
|
[tabindex="-1"]:focus:not(:focus-visible) {
|
||||||
outline: 0 !important;
|
outline: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -184,30 +188,25 @@ a {
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
background-color: transparent; // Remove the gray background on active links in IE 10.
|
background-color: transparent; // Remove the gray background on active links in IE 10.
|
||||||
|
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// And undo these styles for placeholder links/named anchors (without href)
|
// And undo these styles for placeholder links/named anchors (without href).
|
||||||
// which have not been made explicitly keyboard-focusable (without tabindex).
|
|
||||||
// It would be more straightforward to just use a[href] in previous block, but that
|
// It would be more straightforward to just use a[href] in previous block, but that
|
||||||
// causes specificity issues in many other styles that are too complex to fix.
|
// causes specificity issues in many other styles that are too complex to fix.
|
||||||
// See https://github.com/twbs/bootstrap/issues/19402
|
// See https://github.com/twbs/bootstrap/issues/19402
|
||||||
|
|
||||||
a:not([href]):not([tabindex]) {
|
a:not([href]) {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover() {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// 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 {
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
|
|
||||||
.table-hover {
|
.table-hover {
|
||||||
tbody tr {
|
tbody tr {
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $table-hover-color;
|
color: $table-hover-color;
|
||||||
background-color: $table-hover-bg;
|
background-color: $table-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
@ -142,14 +142,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.table-striped {
|
&.table-striped {
|
||||||
tbody tr:nth-of-type(odd) {
|
tbody tr:nth-of-type(#{$table-striped-order}) {
|
||||||
background-color: $table-dark-accent-bg;
|
background-color: $table-dark-accent-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.table-hover {
|
&.table-hover {
|
||||||
tbody tr {
|
tbody tr {
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $table-dark-hover-color;
|
color: $table-dark-hover-color;
|
||||||
background-color: $table-dark-hover-bg;
|
background-color: $table-dark-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -82,12 +82,12 @@ mark,
|
||||||
//
|
//
|
||||||
|
|
||||||
.list-unstyled {
|
.list-unstyled {
|
||||||
@include list-unstyled;
|
@include list-unstyled();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Inline turns list items into inline-block
|
// Inline turns list items into inline-block
|
||||||
.list-inline {
|
.list-inline {
|
||||||
@include list-unstyled;
|
@include list-unstyled();
|
||||||
}
|
}
|
||||||
.list-inline-item {
|
.list-inline-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -101,6 +101,13 @@ $yiq-contrasted-threshold: 150 !default;
|
||||||
$yiq-text-dark: $gray-900 !default;
|
$yiq-text-dark: $gray-900 !default;
|
||||||
$yiq-text-light: $white !default;
|
$yiq-text-light: $white !default;
|
||||||
|
|
||||||
|
// Characters which are escaped by the escape-svg function
|
||||||
|
$escaped-characters: (
|
||||||
|
("<","%3c"),
|
||||||
|
(">","%3e"),
|
||||||
|
("#","%23"),
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
|
||||||
// Options
|
// Options
|
||||||
//
|
//
|
||||||
|
|
@ -220,6 +227,7 @@ $container-max-widths: (
|
||||||
|
|
||||||
$grid-columns: 12 !default;
|
$grid-columns: 12 !default;
|
||||||
$grid-gutter-width: 30px !default;
|
$grid-gutter-width: 30px !default;
|
||||||
|
$grid-row-columns: 6 !default;
|
||||||
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|
@ -366,7 +374,6 @@ $table-dark-accent-bg: rgba($white, .05) !default;
|
||||||
$table-dark-hover-color: $table-dark-color !default;
|
$table-dark-hover-color: $table-dark-color !default;
|
||||||
$table-dark-hover-bg: rgba($white, .075) !default;
|
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||||
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
|
$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
|
||||||
$table-dark-color: $white !default;
|
|
||||||
|
|
||||||
$table-striped-order: odd !default;
|
$table-striped-order: odd !default;
|
||||||
|
|
||||||
|
|
@ -412,6 +419,7 @@ $btn-padding-x: $input-btn-padding-x !default;
|
||||||
$btn-font-family: $input-btn-font-family !default;
|
$btn-font-family: $input-btn-font-family !default;
|
||||||
$btn-font-size: $input-btn-font-size !default;
|
$btn-font-size: $input-btn-font-size !default;
|
||||||
$btn-line-height: $input-btn-line-height !default;
|
$btn-line-height: $input-btn-line-height !default;
|
||||||
|
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
|
||||||
|
|
||||||
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||||
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||||
|
|
@ -488,13 +496,13 @@ $input-plaintext-color: $body-color !default;
|
||||||
|
|
||||||
$input-height-border: $input-border-width * 2 !default;
|
$input-height-border: $input-border-width * 2 !default;
|
||||||
|
|
||||||
$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
|
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
||||||
$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
|
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
||||||
$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
|
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
|
||||||
|
|
||||||
$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
|
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
|
||||||
$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
|
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
|
||||||
$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
|
$input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
|
||||||
|
|
||||||
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||||
|
|
||||||
|
|
@ -518,6 +526,7 @@ $custom-forms-transition: background-color .15s ease-in-out, borde
|
||||||
|
|
||||||
$custom-control-gutter: .5rem !default;
|
$custom-control-gutter: .5rem !default;
|
||||||
$custom-control-spacer-x: 1rem !default;
|
$custom-control-spacer-x: 1rem !default;
|
||||||
|
$custom-control-cursor: null !default;
|
||||||
|
|
||||||
$custom-control-indicator-size: 1rem !default;
|
$custom-control-indicator-size: 1rem !default;
|
||||||
$custom-control-indicator-bg: $input-bg !default;
|
$custom-control-indicator-bg: $input-bg !default;
|
||||||
|
|
@ -527,6 +536,8 @@ $custom-control-indicator-box-shadow: $input-box-shadow !default;
|
||||||
$custom-control-indicator-border-color: $gray-500 !default;
|
$custom-control-indicator-border-color: $gray-500 !default;
|
||||||
$custom-control-indicator-border-width: $input-border-width !default;
|
$custom-control-indicator-border-width: $input-border-width !default;
|
||||||
|
|
||||||
|
$custom-control-label-color: null !default;
|
||||||
|
|
||||||
$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
|
$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
|
||||||
$custom-control-label-disabled-color: $gray-600 !default;
|
$custom-control-label-disabled-color: $gray-600 !default;
|
||||||
|
|
||||||
|
|
@ -545,20 +556,20 @@ $custom-control-indicator-active-box-shadow: none !default;
|
||||||
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
|
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
|
||||||
|
|
||||||
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
||||||
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
|
||||||
|
|
||||||
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
|
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
|
||||||
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
||||||
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
|
||||||
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
||||||
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
|
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
|
||||||
|
|
||||||
$custom-radio-indicator-border-radius: 50% !default;
|
$custom-radio-indicator-border-radius: 50% !default;
|
||||||
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
|
||||||
|
|
||||||
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
|
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
|
||||||
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
|
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
|
||||||
$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
|
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
|
||||||
|
|
||||||
$custom-select-padding-y: $input-padding-y !default;
|
$custom-select-padding-y: $input-padding-y !default;
|
||||||
$custom-select-padding-x: $input-padding-x !default;
|
$custom-select-padding-x: $input-padding-x !default;
|
||||||
|
|
@ -574,10 +585,10 @@ $custom-select-bg: $input-bg !default;
|
||||||
$custom-select-disabled-bg: $gray-200 !default;
|
$custom-select-disabled-bg: $gray-200 !default;
|
||||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||||
$custom-select-indicator-color: $gray-800 !default;
|
$custom-select-indicator-color: $gray-800 !default;
|
||||||
$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
||||||
$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||||
|
|
||||||
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
|
$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
|
||||||
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
||||||
$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
||||||
|
|
||||||
|
|
@ -650,9 +661,9 @@ $form-feedback-valid-color: theme-color("success") !default;
|
||||||
$form-feedback-invalid-color: theme-color("danger") !default;
|
$form-feedback-invalid-color: theme-color("danger") !default;
|
||||||
|
|
||||||
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
|
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
|
||||||
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
||||||
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
||||||
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
|
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
||||||
|
|
||||||
$form-validation-states: () !default;
|
$form-validation-states: () !default;
|
||||||
// stylelint-disable-next-line scss/dollar-variable-default
|
// stylelint-disable-next-line scss/dollar-variable-default
|
||||||
|
|
@ -728,14 +739,14 @@ $navbar-dark-color: rgba($white, .5) !default;
|
||||||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||||
$navbar-dark-active-color: $white !default;
|
$navbar-dark-active-color: $white !default;
|
||||||
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
||||||
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||||
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||||
|
|
||||||
$navbar-light-color: rgba($black, .5) !default;
|
$navbar-light-color: rgba($black, .5) !default;
|
||||||
$navbar-light-hover-color: rgba($black, .7) !default;
|
$navbar-light-hover-color: rgba($black, .7) !default;
|
||||||
$navbar-light-active-color: rgba($black, .9) !default;
|
$navbar-light-active-color: rgba($black, .9) !default;
|
||||||
$navbar-light-disabled-color: rgba($black, .3) !default;
|
$navbar-light-disabled-color: rgba($black, .3) !default;
|
||||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||||
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
||||||
|
|
||||||
$navbar-light-brand-color: $navbar-light-active-color !default;
|
$navbar-light-brand-color: $navbar-light-active-color !default;
|
||||||
|
|
@ -757,7 +768,7 @@ $dropdown-bg: $white !default;
|
||||||
$dropdown-border-color: rgba($black, .15) !default;
|
$dropdown-border-color: rgba($black, .15) !default;
|
||||||
$dropdown-border-radius: $border-radius !default;
|
$dropdown-border-radius: $border-radius !default;
|
||||||
$dropdown-border-width: $border-width !default;
|
$dropdown-border-width: $border-width !default;
|
||||||
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
|
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
|
||||||
$dropdown-divider-bg: $gray-200 !default;
|
$dropdown-divider-bg: $gray-200 !default;
|
||||||
$dropdown-divider-margin-y: $nav-divider-margin-y !default;
|
$dropdown-divider-margin-y: $nav-divider-margin-y !default;
|
||||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
||||||
|
|
@ -822,9 +833,10 @@ $card-spacer-x: 1.25rem !default;
|
||||||
$card-border-width: $border-width !default;
|
$card-border-width: $border-width !default;
|
||||||
$card-border-radius: $border-radius !default;
|
$card-border-radius: $border-radius !default;
|
||||||
$card-border-color: rgba($black, .125) !default;
|
$card-border-color: rgba($black, .125) !default;
|
||||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
||||||
$card-cap-bg: rgba($black, .03) !default;
|
$card-cap-bg: rgba($black, .03) !default;
|
||||||
$card-cap-color: null !default;
|
$card-cap-color: null !default;
|
||||||
|
$card-height: null !default;
|
||||||
$card-color: null !default;
|
$card-color: null !default;
|
||||||
$card-bg: $white !default;
|
$card-bg: $white !default;
|
||||||
|
|
||||||
|
|
@ -871,6 +883,7 @@ $popover-max-width: 276px !default;
|
||||||
$popover-border-width: $border-width !default;
|
$popover-border-width: $border-width !default;
|
||||||
$popover-border-color: rgba($black, .2) !default;
|
$popover-border-color: rgba($black, .2) !default;
|
||||||
$popover-border-radius: $border-radius-lg !default;
|
$popover-border-radius: $border-radius-lg !default;
|
||||||
|
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
|
||||||
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
||||||
|
|
||||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||||
|
|
@ -929,6 +942,9 @@ $badge-pill-border-radius: 10rem !default;
|
||||||
// Padding applied to the modal body
|
// Padding applied to the modal body
|
||||||
$modal-inner-padding: 1rem !default;
|
$modal-inner-padding: 1rem !default;
|
||||||
|
|
||||||
|
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
|
||||||
|
$modal-footer-margin-between: .5rem !default;
|
||||||
|
|
||||||
$modal-dialog-margin: .5rem !default;
|
$modal-dialog-margin: .5rem !default;
|
||||||
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
||||||
|
|
||||||
|
|
@ -939,6 +955,7 @@ $modal-content-bg: $white !default;
|
||||||
$modal-content-border-color: rgba($black, .2) !default;
|
$modal-content-border-color: rgba($black, .2) !default;
|
||||||
$modal-content-border-width: $border-width !default;
|
$modal-content-border-width: $border-width !default;
|
||||||
$modal-content-border-radius: $border-radius-lg !default;
|
$modal-content-border-radius: $border-radius-lg !default;
|
||||||
|
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
||||||
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
||||||
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
||||||
|
|
||||||
|
|
@ -960,6 +977,7 @@ $modal-sm: 300px !default;
|
||||||
$modal-fade-transform: translate(0, -50px) !default;
|
$modal-fade-transform: translate(0, -50px) !default;
|
||||||
$modal-show-transform: none !default;
|
$modal-show-transform: none !default;
|
||||||
$modal-transition: transform .3s ease-out !default;
|
$modal-transition: transform .3s ease-out !default;
|
||||||
|
$modal-scale-transform: scale(1.02) !default;
|
||||||
|
|
||||||
|
|
||||||
// Alerts
|
// Alerts
|
||||||
|
|
@ -1035,6 +1053,8 @@ $figure-caption-color: $gray-600 !default;
|
||||||
|
|
||||||
// Breadcrumbs
|
// Breadcrumbs
|
||||||
|
|
||||||
|
$breadcrumb-font-size: null !default;
|
||||||
|
|
||||||
$breadcrumb-padding-y: .75rem !default;
|
$breadcrumb-padding-y: .75rem !default;
|
||||||
$breadcrumb-padding-x: 1rem !default;
|
$breadcrumb-padding-x: 1rem !default;
|
||||||
$breadcrumb-item-padding: .5rem !default;
|
$breadcrumb-item-padding: .5rem !default;
|
||||||
|
|
@ -1069,8 +1089,8 @@ $carousel-caption-color: $white !default;
|
||||||
|
|
||||||
$carousel-control-icon-width: 20px !default;
|
$carousel-control-icon-width: 20px !default;
|
||||||
|
|
||||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
|
||||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
|
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
|
||||||
|
|
||||||
$carousel-transition-duration: .6s !default;
|
$carousel-transition-duration: .6s !default;
|
||||||
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
|
* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2019 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2019 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
* Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2019 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2019 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.3.1 (https://getbootstrap.com/)
|
* Bootstrap v4.4.1 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2019 The Bootstrap Authors
|
* Copyright 2011-2019 The Bootstrap Authors
|
||||||
* Copyright 2011-2019 Twitter, Inc.
|
* Copyright 2011-2019 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,17 @@
|
||||||
|
|
||||||
// Contextual backgrounds
|
// Contextual backgrounds
|
||||||
|
|
||||||
@mixin bg-variant($parent, $color) {
|
@mixin bg-variant($parent, $color, $ignore-warning: false) {
|
||||||
#{$parent} {
|
#{$parent} {
|
||||||
background-color: $color !important;
|
background-color: $color !important;
|
||||||
}
|
}
|
||||||
a#{$parent},
|
a#{$parent},
|
||||||
button#{$parent} {
|
button#{$parent} {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
background-color: darken($color, 10%) !important;
|
background-color: darken($color, 10%) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin bg-gradient-variant($parent, $color) {
|
@mixin bg-gradient-variant($parent, $color) {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
|
|
||||||
@at-root a#{&} {
|
@at-root a#{&} {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: color-yiq($bg);
|
color: color-yiq($bg);
|
||||||
background-color: darken($bg, 10%);
|
background-color: darken($bg, 10%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
@include box-shadow($btn-box-shadow);
|
@include box-shadow($btn-box-shadow);
|
||||||
|
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: color-yiq($hover-background);
|
color: color-yiq($hover-background);
|
||||||
@include gradient-bg($hover-background);
|
@include gradient-bg($hover-background);
|
||||||
border-color: $hover-border;
|
border-color: $hover-border;
|
||||||
|
|
@ -17,6 +17,9 @@
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
|
color: color-yiq($hover-background);
|
||||||
|
@include gradient-bg($hover-background);
|
||||||
|
border-color: $hover-border;
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
|
||||||
|
|
@ -62,7 +65,7 @@
|
||||||
color: $color;
|
color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover {
|
@include hover() {
|
||||||
color: $color-hover;
|
color: $color-hover;
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
@mixin caret-down {
|
@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-right() {
|
||||||
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-left() {
|
||||||
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;
|
||||||
|
|
@ -33,11 +33,11 @@
|
||||||
vertical-align: $caret-vertical-align;
|
vertical-align: $caret-vertical-align;
|
||||||
content: "";
|
content: "";
|
||||||
@if $direction == down {
|
@if $direction == down {
|
||||||
@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 == right {
|
||||||
@include caret-right;
|
@include caret-right();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,7 +51,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-left();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
// stylelint-disable declaration-no-important
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
@mixin float-left {
|
@mixin float-left() {
|
||||||
float: left !important;
|
float: left !important;
|
||||||
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
@include deprecate("The `float-left` mixin", "v4.3.0", "v5");
|
||||||
}
|
}
|
||||||
@mixin float-right {
|
@mixin float-right() {
|
||||||
float: right !important;
|
float: right !important;
|
||||||
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
@include deprecate("The `float-right` mixin", "v4.3.0", "v5");
|
||||||
}
|
}
|
||||||
@mixin float-none {
|
@mixin float-none() {
|
||||||
float: none !important;
|
float: none !important;
|
||||||
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
@include deprecate("The `float-none` mixin", "v4.3.0", "v5");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
//
|
//
|
||||||
// Example usage: change the default blue border and shadow to white for better
|
// Example usage: change the default blue border and shadow to white for better
|
||||||
// contrast against a dark gray background.
|
// contrast against a dark gray background.
|
||||||
@mixin form-control-focus() {
|
@mixin form-control-focus($ignore-warning: false) {
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $input-focus-color;
|
color: $input-focus-color;
|
||||||
background-color: $input-focus-bg;
|
background-color: $input-focus-bg;
|
||||||
|
|
@ -23,8 +23,23 @@
|
||||||
box-shadow: $input-focus-box-shadow;
|
box-shadow: $input-focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
||||||
|
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
||||||
|
@mixin form-validation-state-selector($state) {
|
||||||
|
@if ($state == "valid" or $state == "invalid") {
|
||||||
|
.was-validated #{if(&, "&", "")}:#{$state},
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
#{if(&, "&", "")}.is-#{$state} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin form-validation-state($state, $color, $icon) {
|
@mixin form-validation-state($state, $color, $icon) {
|
||||||
.#{$state}-feedback {
|
.#{$state}-feedback {
|
||||||
|
|
@ -50,16 +65,22 @@
|
||||||
@include border-radius($form-feedback-tooltip-border-radius);
|
@include border-radius($form-feedback-tooltip-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include form-validation-state-selector($state) {
|
||||||
|
~ .#{$state}-feedback,
|
||||||
|
~ .#{$state}-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$state} {
|
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@if $enable-validation-icons {
|
@if $enable-validation-icons {
|
||||||
padding-right: $input-height-inner;
|
padding-right: $input-height-inner;
|
||||||
background-image: $icon;
|
background-image: escape-svg($icon);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center right $input-height-inner-quarter;
|
background-position: right $input-height-inner-quarter center;
|
||||||
background-size: $input-height-inner-half $input-height-inner-half;
|
background-size: $input-height-inner-half $input-height-inner-half;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,18 +88,12 @@
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .#{$state}-feedback,
|
|
||||||
~ .#{$state}-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// stylelint-disable-next-line selector-no-qualifying-type
|
// stylelint-disable-next-line selector-no-qualifying-type
|
||||||
textarea.form-control {
|
textarea.form-control {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$state} {
|
|
||||||
@if $enable-validation-icons {
|
@if $enable-validation-icons {
|
||||||
padding-right: $input-height-inner;
|
padding-right: $input-height-inner;
|
||||||
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
||||||
|
|
@ -87,41 +102,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-select {
|
.custom-select {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$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: $custom-select-feedback-icon-padding-right;
|
||||||
background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
|
background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .#{$state}-feedback,
|
|
||||||
~ .#{$state}-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-control-file {
|
|
||||||
.was-validated &:#{$state},
|
|
||||||
&.is-#{$state} {
|
|
||||||
~ .#{$state}-feedback,
|
|
||||||
~ .#{$state}-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$state} {
|
|
||||||
~ .form-check-label {
|
~ .form-check-label {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
|
@ -134,8 +131,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input {
|
.custom-control-input {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$state} {
|
|
||||||
~ .custom-control-label {
|
~ .custom-control-label {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
|
||||||
|
|
@ -144,11 +140,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .#{$state}-feedback,
|
|
||||||
~ .#{$state}-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
~ .custom-control-label::before {
|
~ .custom-control-label::before {
|
||||||
border-color: lighten($color, 10%);
|
border-color: lighten($color, 10%);
|
||||||
|
|
@ -170,17 +161,11 @@
|
||||||
|
|
||||||
// custom file
|
// custom file
|
||||||
.custom-file-input {
|
.custom-file-input {
|
||||||
.was-validated &:#{$state},
|
@include form-validation-state-selector($state) {
|
||||||
&.is-#{$state} {
|
|
||||||
~ .custom-file-label {
|
~ .custom-file-label {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .#{$state}-feedback,
|
|
||||||
~ .#{$state}-tooltip {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
~ .custom-file-label {
|
~ .custom-file-label {
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
|
||||||
|
|
@ -33,10 +33,15 @@
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $grid-row-columns {
|
||||||
|
.row-cols#{$infix}-#{$i} {
|
||||||
|
@include row-cols($i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.col#{$infix}-auto {
|
.col#{$infix}-auto {
|
||||||
flex: 0 0 auto;
|
@include make-col-auto();
|
||||||
width: auto;
|
|
||||||
max-width: 100%; // Reset earlier grid tiers
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through $columns {
|
@for $i from 1 through $columns {
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,25 @@
|
||||||
max-width: percentage($size / $columns);
|
max-width: percentage($size / $columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin make-col-auto() {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%; // Reset earlier grid tiers
|
||||||
|
}
|
||||||
|
|
||||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||||
$num: $size / $columns;
|
$num: $size / $columns;
|
||||||
margin-left: if($num == 0, 0, percentage($num));
|
margin-left: if($num == 0, 0, percentage($num));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Row columns
|
||||||
|
//
|
||||||
|
// Specify on a parent element(e.g., .row) to force immediate children into NN
|
||||||
|
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
||||||
|
// style grid.
|
||||||
|
@mixin row-cols($count) {
|
||||||
|
& > * {
|
||||||
|
flex: 0 0 100% / $count;
|
||||||
|
max-width: 100% / $count;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,18 +9,18 @@
|
||||||
//
|
//
|
||||||
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
// Issue: https://github.com/twbs/bootstrap/issues/25195
|
||||||
|
|
||||||
@mixin hover {
|
@mixin hover() {
|
||||||
&:hover { @content; }
|
&:hover { @content; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin hover-focus {
|
@mixin hover-focus() {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin plain-hover-focus {
|
@mixin plain-hover-focus() {
|
||||||
&,
|
&,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin hover-focus-active {
|
@mixin hover-focus-active() {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
//
|
//
|
||||||
// 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
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
|
|
||||||
&.list-group-item-action {
|
&.list-group-item-action {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: darken($background, 5%);
|
background-color: darken($background, 5%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,10 @@
|
||||||
//
|
//
|
||||||
// Dividers (basically an hr) within dropdowns and nav lists
|
// Dividers (basically an hr) within dropdowns and nav lists
|
||||||
|
|
||||||
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
|
@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) {
|
||||||
height: 0;
|
height: 0;
|
||||||
margin: $margin-y 0;
|
margin: $margin-y 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-top: 1px solid $color;
|
border-top: 1px solid $color;
|
||||||
|
@include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@mixin reset-text {
|
@mixin reset-text() {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or word-wrap.
|
// We deliberately do NOT reset font-size or word-wrap.
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,12 @@
|
||||||
// See: https://a11yproject.com/posts/how-to-hide-content/
|
// See: https://a11yproject.com/posts/how-to-hide-content/
|
||||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||||
|
|
||||||
@mixin sr-only {
|
@mixin sr-only() {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -20,7 +21,7 @@
|
||||||
//
|
//
|
||||||
// Credit: HTML5 Boilerplate
|
// Credit: HTML5 Boilerplate
|
||||||
|
|
||||||
@mixin sr-only-focusable {
|
@mixin sr-only-focusable() {
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
position: static;
|
position: static;
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
$hover-background: darken($background, 5%);
|
$hover-background: darken($background, 5%);
|
||||||
|
|
||||||
.table-#{$state} {
|
.table-#{$state} {
|
||||||
@include hover {
|
@include hover() {
|
||||||
background-color: $hover-background;
|
background-color: $hover-background;
|
||||||
|
|
||||||
> td,
|
> td,
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,16 @@
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
|
|
||||||
@mixin text-emphasis-variant($parent, $color) {
|
@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
|
||||||
#{$parent} {
|
#{$parent} {
|
||||||
color: $color !important;
|
color: $color !important;
|
||||||
}
|
}
|
||||||
@if $emphasized-link-hover-darken-percentage != 0 {
|
@if $emphasized-link-hover-darken-percentage != 0 {
|
||||||
a#{$parent} {
|
a#{$parent} {
|
||||||
@include hover-focus {
|
@include hover-focus() {
|
||||||
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
color: darken($color, $emphasized-link-hover-darken-percentage) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// stylelint-disable declaration-no-important
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@include bg-variant(".bg-#{$color}", $value);
|
@include bg-variant(".bg-#{$color}", $value, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
.text-justify { text-align: justify !important; }
|
.text-justify { text-align: justify !important; }
|
||||||
.text-wrap { white-space: normal !important; }
|
.text-wrap { white-space: normal !important; }
|
||||||
.text-nowrap { white-space: nowrap !important; }
|
.text-nowrap { white-space: nowrap !important; }
|
||||||
.text-truncate { @include text-truncate; }
|
.text-truncate { @include text-truncate(); }
|
||||||
|
|
||||||
// Responsive alignment
|
// Responsive alignment
|
||||||
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
.text-white { color: $white !important; }
|
.text-white { color: $white !important; }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@include text-emphasis-variant(".text-#{$color}", $value);
|
@include text-emphasis-variant(".text-#{$color}", $value, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-body { color: $body-color !important; }
|
.text-body { color: $body-color !important; }
|
||||||
|
|
|
||||||
Reference in New Issue