Preparing change to Bootstrap 4 Beta
This commit is contained in:
Holger Könemann
parent
66e12804c0
commit
432b9ba9c8
5635
css/theme.css
5635
css/theme.css
File diff suppressed because it is too large
Load Diff
2849
js/theme.js
2849
js/theme.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,7 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://understrap.com",
|
"homepage": "https://understrap.com",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.0.0-alpha.6",
|
"bootstrap": "4.0.0-beta",
|
||||||
"browser-sync": "^2.18.11",
|
"browser-sync": "^2.18.11",
|
||||||
"del": "^2.2.2",
|
"del": "^2.2.2",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
|
|
@ -49,6 +49,9 @@
|
||||||
"merge2": "^1.0.3",
|
"merge2": "^1.0.3",
|
||||||
"run-sequence": "^1.2.2",
|
"run-sequence": "^1.2.2",
|
||||||
"gulp-sequence": "^0.4.6",
|
"gulp-sequence": "^0.4.6",
|
||||||
"undescores-for-npm": "^1.0.0"
|
"undescores-for-npm": "^1.0.0",
|
||||||
|
"jquery": "3.0.0",
|
||||||
|
"popper.js": "1.11.0"
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,14 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
|
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
|
||||||
* Copyright 2011-2017 The Bootstrap Authors
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
* Copyright 2011-2017 Twitter, Inc.
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Core variables and mixins
|
@import "../../src/sass/bootstrap4/functions";
|
||||||
@import "../../src/sass/bootstrap4/variables";
|
@import "../../src/sass/bootstrap4/variables";
|
||||||
@import "../../src/sass/bootstrap4/mixins";
|
@import "../../src/sass/bootstrap4/mixins";
|
||||||
@import "../../src/sass/bootstrap4/custom";
|
|
||||||
|
|
||||||
// Reset and dependencies
|
|
||||||
@import "../../src/sass/bootstrap4/normalize";
|
|
||||||
@import "../../src/sass/bootstrap4/print";
|
@import "../../src/sass/bootstrap4/print";
|
||||||
|
|
||||||
// Core CSS
|
|
||||||
@import "../../src/sass/bootstrap4/reboot";
|
@import "../../src/sass/bootstrap4/reboot";
|
||||||
@import "../../src/sass/bootstrap4/type";
|
@import "../../src/sass/bootstrap4/type";
|
||||||
@import "../../src/sass/bootstrap4/images";
|
@import "../../src/sass/bootstrap4/images";
|
||||||
|
|
@ -23,8 +17,6 @@
|
||||||
@import "../../src/sass/bootstrap4/tables";
|
@import "../../src/sass/bootstrap4/tables";
|
||||||
@import "../../src/sass/bootstrap4/forms";
|
@import "../../src/sass/bootstrap4/forms";
|
||||||
@import "../../src/sass/bootstrap4/buttons";
|
@import "../../src/sass/bootstrap4/buttons";
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "../../src/sass/bootstrap4/transitions";
|
@import "../../src/sass/bootstrap4/transitions";
|
||||||
@import "../../src/sass/bootstrap4/dropdown";
|
@import "../../src/sass/bootstrap4/dropdown";
|
||||||
@import "../../src/sass/bootstrap4/button-group";
|
@import "../../src/sass/bootstrap4/button-group";
|
||||||
|
|
@ -41,15 +33,10 @@
|
||||||
@import "../../src/sass/bootstrap4/progress";
|
@import "../../src/sass/bootstrap4/progress";
|
||||||
@import "../../src/sass/bootstrap4/media";
|
@import "../../src/sass/bootstrap4/media";
|
||||||
@import "../../src/sass/bootstrap4/list-group";
|
@import "../../src/sass/bootstrap4/list-group";
|
||||||
@import "../../src/sass/bootstrap4/responsive-embed";
|
|
||||||
@import "../../src/sass/bootstrap4/close";
|
@import "../../src/sass/bootstrap4/close";
|
||||||
|
|
||||||
// Components w/ JavaScript
|
|
||||||
@import "../../src/sass/bootstrap4/modal";
|
@import "../../src/sass/bootstrap4/modal";
|
||||||
@import "../../src/sass/bootstrap4/tooltip";
|
@import "../../src/sass/bootstrap4/tooltip";
|
||||||
@import "../../src/sass/bootstrap4/popover";
|
@import "../../src/sass/bootstrap4/popover";
|
||||||
@import "../../src/sass/bootstrap4/carousel";
|
@import "../../src/sass/bootstrap4/carousel";
|
||||||
|
|
||||||
// Utility classes
|
|
||||||
@import "../../src/sass/bootstrap4/utilities";
|
@import "../../src/sass/bootstrap4/utilities";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -61,13 +61,13 @@
|
||||||
|
|
||||||
// not valid tip for each control
|
// not valid tip for each control
|
||||||
.wpcf7-not-valid-tip {
|
.wpcf7-not-valid-tip {
|
||||||
color: $brand-danger !important;
|
color: theme-color("danger");
|
||||||
}
|
}
|
||||||
|
|
||||||
// validation errors ourput bottom of form
|
// validation errors ourput bottom of form
|
||||||
.wpcf7-validation-errors {
|
.wpcf7-validation-errors {
|
||||||
@extend .form-control;
|
@extend .form-control;
|
||||||
color: $brand-danger !important;
|
color: theme-color("danger");
|
||||||
border: 1px solid $gray-lighter !important;
|
border: 1px solid $gray-200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// Some basic padding for all wrappers
|
// Some basic padding for all wrappers
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: $grid-gutter-width-base 0; }
|
padding: $grid-gutter-width 0; }
|
||||||
|
|
||||||
// Reset hero wrapper padding to 0
|
// Reset hero wrapper padding to 0
|
||||||
#wrapper-hero { padding: 0px !important; }
|
#wrapper-hero { padding: 0px !important; }
|
||||||
|
|
@ -13,11 +13,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Separate sticky wrapper from main content
|
// Separate sticky wrapper from main content
|
||||||
.wrapper#wrapper-sticky { border-bottom: 1px solid $gray-light; }
|
.wrapper#wrapper-sticky { border-bottom: 1px solid $gray-300; }
|
||||||
|
|
||||||
// Adding some contrast background color to footer full widget
|
// Adding some contrast background color to footer full widget
|
||||||
#wrapper-footer-full,
|
#wrapper-footer-full,
|
||||||
#wrapper-static-hero { background-color: $gray-lighter; }
|
#wrapper-static-hero { background-color: $gray-200; }
|
||||||
|
|
||||||
// Necessary WP classes
|
// Necessary WP classes
|
||||||
.wp-caption { font-size: inherit; }
|
.wp-caption { font-size: inherit; }
|
||||||
|
|
@ -72,15 +72,15 @@ a.skip-link {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-primary .dropdown-menu {
|
.bg-primary .dropdown-menu {
|
||||||
background-color:$brand-primary;
|
background-color:theme-color("primary");
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-success .dropdown-menu {
|
.bg-success .dropdown-menu {
|
||||||
background-color:$brand-success;
|
background-color:theme-color("success");
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-inverse .dropdown-menu {
|
.bg-inverse .dropdown-menu {
|
||||||
background-color:$brand-inverse;
|
background-color:$navbar-dark-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fixing BS dropdown in a dropdown
|
// Fixing BS dropdown in a dropdown
|
||||||
|
|
@ -103,12 +103,10 @@ background-color:$brand-inverse;
|
||||||
.dropdown-menu .menu-item {
|
.dropdown-menu .menu-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
a.nav-link{
|
a.nav-link{
|
||||||
margin:0px;
|
|
||||||
padding:$nav-link-padding;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
a.nav-link:hover {
|
a.nav-link:hover {
|
||||||
background-color: $brand-primary;
|
background-color: theme-color("primary");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.tether-element {
|
|
||||||
position: absolute;
|
|
||||||
display: none; }
|
|
||||||
.tether-element.tether-open {
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
.tether-element.tether-theme-arrows-dark {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%; }
|
|
||||||
.tether-element.tether-theme-arrows-dark .tether-content {
|
|
||||||
border-radius: 5px;
|
|
||||||
position: relative;
|
|
||||||
font-family: inherit;
|
|
||||||
background: #000;
|
|
||||||
color: #fff;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 1.1em;
|
|
||||||
line-height: 1.5em; }
|
|
||||||
.tether-element.tether-theme-arrows-dark .tether-content:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-width: 16px;
|
|
||||||
border-style: solid; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -16px;
|
|
||||||
border-top-color: #000;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -16px;
|
|
||||||
border-bottom-color: #000;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -16px;
|
|
||||||
border-left-color: #000;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
|
|
||||||
right: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -16px;
|
|
||||||
border-right-color: #000;
|
|
||||||
border-left: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-target-attached-center .tether-content {
|
|
||||||
left: -32px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-target-attached-center .tether-content {
|
|
||||||
left: 32px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-bottom-color: #000;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-bottom-color: #000;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-top-color: #000;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-top-color: #000;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-bottom-color: #000;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-bottom-color: #000;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-top-color: #000;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-top-color: #000;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
|
||||||
top: 16px;
|
|
||||||
left: 100%;
|
|
||||||
border-left-color: #000;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
|
||||||
top: 16px;
|
|
||||||
right: 100%;
|
|
||||||
border-right-color: #000;
|
|
||||||
border-left: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
|
||||||
bottom: 16px;
|
|
||||||
left: 100%;
|
|
||||||
border-left-color: #000;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
|
||||||
bottom: 16px;
|
|
||||||
right: 100%;
|
|
||||||
border-right-color: #000;
|
|
||||||
border-left: 0; }
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,154 +0,0 @@
|
||||||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.tether-element {
|
|
||||||
position: absolute;
|
|
||||||
display: none; }
|
|
||||||
.tether-element.tether-open {
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
.tether-element.tether-theme-arrows {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%; }
|
|
||||||
.tether-element.tether-theme-arrows .tether-content {
|
|
||||||
border-radius: 5px;
|
|
||||||
position: relative;
|
|
||||||
font-family: inherit;
|
|
||||||
background: #fff;
|
|
||||||
color: inherit;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 1.1em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
|
||||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
|
|
||||||
.tether-element.tether-theme-arrows .tether-content:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-width: 16px;
|
|
||||||
border-style: solid; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -16px;
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -16px;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
|
|
||||||
left: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -16px;
|
|
||||||
border-left-color: #fff;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
|
|
||||||
right: 100%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -16px;
|
|
||||||
border-right-color: #fff;
|
|
||||||
border-left: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-target-attached-center .tether-content {
|
|
||||||
left: -32px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-target-attached-center .tether-content {
|
|
||||||
left: 32px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
|
|
||||||
margin-top: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
|
|
||||||
bottom: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
border-top: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
left: 16px;
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
|
|
||||||
margin-bottom: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
|
|
||||||
top: 100%;
|
|
||||||
right: 16px;
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-bottom: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
|
||||||
top: 16px;
|
|
||||||
left: 100%;
|
|
||||||
border-left-color: #fff;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
|
||||||
top: 16px;
|
|
||||||
right: 100%;
|
|
||||||
border-right-color: #fff;
|
|
||||||
border-left: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
|
|
||||||
margin-right: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
|
|
||||||
bottom: 16px;
|
|
||||||
left: 100%;
|
|
||||||
border-left-color: #fff;
|
|
||||||
border-right: 0; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
|
|
||||||
margin-left: 16px; }
|
|
||||||
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
|
|
||||||
bottom: 16px;
|
|
||||||
right: 100%;
|
|
||||||
border-right-color: #fff;
|
|
||||||
border-left: 0; }
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,21 +0,0 @@
|
||||||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.tether-element {
|
|
||||||
position: absolute;
|
|
||||||
display: none; }
|
|
||||||
.tether-element.tether-open {
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
.tether-element.tether-theme-basic {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%; }
|
|
||||||
.tether-element.tether-theme-basic .tether-content {
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
font-family: inherit;
|
|
||||||
background: #fff;
|
|
||||||
color: inherit;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 1.1em;
|
|
||||||
line-height: 1.5em; }
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.tether-element {
|
|
||||||
position: absolute;
|
|
||||||
display: none; }
|
|
||||||
.tether-element.tether-open {
|
|
||||||
display: block; }
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
476
src/js/core.js
476
src/js/core.js
|
|
@ -1,476 +0,0 @@
|
||||||
/* global Symbol */
|
|
||||||
// Defining this global in .eslintrc.json would create a danger of using the global
|
|
||||||
// unguarded in another place, it seems safer to define global only for this module
|
|
||||||
|
|
||||||
define( [
|
|
||||||
"./var/arr",
|
|
||||||
"./var/document",
|
|
||||||
"./var/getProto",
|
|
||||||
"./var/slice",
|
|
||||||
"./var/concat",
|
|
||||||
"./var/push",
|
|
||||||
"./var/indexOf",
|
|
||||||
"./var/class2type",
|
|
||||||
"./var/toString",
|
|
||||||
"./var/hasOwn",
|
|
||||||
"./var/fnToString",
|
|
||||||
"./var/ObjectFunctionString",
|
|
||||||
"./var/support",
|
|
||||||
"./core/DOMEval"
|
|
||||||
], function( arr, document, getProto, slice, concat, push, indexOf,
|
|
||||||
class2type, toString, hasOwn, fnToString, ObjectFunctionString,
|
|
||||||
support, DOMEval ) {
|
|
||||||
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var
|
|
||||||
version = "3.2.1",
|
|
||||||
|
|
||||||
// Define a local copy of jQuery
|
|
||||||
jQuery = function( selector, context ) {
|
|
||||||
|
|
||||||
// The jQuery object is actually just the init constructor 'enhanced'
|
|
||||||
// Need init if jQuery is called (just allow error to be thrown if not included)
|
|
||||||
return new jQuery.fn.init( selector, context );
|
|
||||||
},
|
|
||||||
|
|
||||||
// Support: Android <=4.0 only
|
|
||||||
// Make sure we trim BOM and NBSP
|
|
||||||
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
|
|
||||||
|
|
||||||
// Matches dashed string for camelizing
|
|
||||||
rmsPrefix = /^-ms-/,
|
|
||||||
rdashAlpha = /-([a-z])/g,
|
|
||||||
|
|
||||||
// Used by jQuery.camelCase as callback to replace()
|
|
||||||
fcamelCase = function( all, letter ) {
|
|
||||||
return letter.toUpperCase();
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery.fn = jQuery.prototype = {
|
|
||||||
|
|
||||||
// The current version of jQuery being used
|
|
||||||
jquery: version,
|
|
||||||
|
|
||||||
constructor: jQuery,
|
|
||||||
|
|
||||||
// The default length of a jQuery object is 0
|
|
||||||
length: 0,
|
|
||||||
|
|
||||||
toArray: function() {
|
|
||||||
return slice.call( this );
|
|
||||||
},
|
|
||||||
|
|
||||||
// Get the Nth element in the matched element set OR
|
|
||||||
// Get the whole matched element set as a clean array
|
|
||||||
get: function( num ) {
|
|
||||||
|
|
||||||
// Return all the elements in a clean array
|
|
||||||
if ( num == null ) {
|
|
||||||
return slice.call( this );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return just the one element from the set
|
|
||||||
return num < 0 ? this[ num + this.length ] : this[ num ];
|
|
||||||
},
|
|
||||||
|
|
||||||
// Take an array of elements and push it onto the stack
|
|
||||||
// (returning the new matched element set)
|
|
||||||
pushStack: function( elems ) {
|
|
||||||
|
|
||||||
// Build a new jQuery matched element set
|
|
||||||
var ret = jQuery.merge( this.constructor(), elems );
|
|
||||||
|
|
||||||
// Add the old object onto the stack (as a reference)
|
|
||||||
ret.prevObject = this;
|
|
||||||
|
|
||||||
// Return the newly-formed element set
|
|
||||||
return ret;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Execute a callback for every element in the matched set.
|
|
||||||
each: function( callback ) {
|
|
||||||
return jQuery.each( this, callback );
|
|
||||||
},
|
|
||||||
|
|
||||||
map: function( callback ) {
|
|
||||||
return this.pushStack( jQuery.map( this, function( elem, i ) {
|
|
||||||
return callback.call( elem, i, elem );
|
|
||||||
} ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
slice: function() {
|
|
||||||
return this.pushStack( slice.apply( this, arguments ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
first: function() {
|
|
||||||
return this.eq( 0 );
|
|
||||||
},
|
|
||||||
|
|
||||||
last: function() {
|
|
||||||
return this.eq( -1 );
|
|
||||||
},
|
|
||||||
|
|
||||||
eq: function( i ) {
|
|
||||||
var len = this.length,
|
|
||||||
j = +i + ( i < 0 ? len : 0 );
|
|
||||||
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
|
|
||||||
},
|
|
||||||
|
|
||||||
end: function() {
|
|
||||||
return this.prevObject || this.constructor();
|
|
||||||
},
|
|
||||||
|
|
||||||
// For internal use only.
|
|
||||||
// Behaves like an Array's method, not like a jQuery method.
|
|
||||||
push: push,
|
|
||||||
sort: arr.sort,
|
|
||||||
splice: arr.splice
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery.extend = jQuery.fn.extend = function() {
|
|
||||||
var options, name, src, copy, copyIsArray, clone,
|
|
||||||
target = arguments[ 0 ] || {},
|
|
||||||
i = 1,
|
|
||||||
length = arguments.length,
|
|
||||||
deep = false;
|
|
||||||
|
|
||||||
// Handle a deep copy situation
|
|
||||||
if ( typeof target === "boolean" ) {
|
|
||||||
deep = target;
|
|
||||||
|
|
||||||
// Skip the boolean and the target
|
|
||||||
target = arguments[ i ] || {};
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle case when target is a string or something (possible in deep copy)
|
|
||||||
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
|
|
||||||
target = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extend jQuery itself if only one argument is passed
|
|
||||||
if ( i === length ) {
|
|
||||||
target = this;
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
|
|
||||||
for ( ; i < length; i++ ) {
|
|
||||||
|
|
||||||
// Only deal with non-null/undefined values
|
|
||||||
if ( ( options = arguments[ i ] ) != null ) {
|
|
||||||
|
|
||||||
// Extend the base object
|
|
||||||
for ( name in options ) {
|
|
||||||
src = target[ name ];
|
|
||||||
copy = options[ name ];
|
|
||||||
|
|
||||||
// Prevent never-ending loop
|
|
||||||
if ( target === copy ) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Recurse if we're merging plain objects or arrays
|
|
||||||
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
|
|
||||||
( copyIsArray = Array.isArray( copy ) ) ) ) {
|
|
||||||
|
|
||||||
if ( copyIsArray ) {
|
|
||||||
copyIsArray = false;
|
|
||||||
clone = src && Array.isArray( src ) ? src : [];
|
|
||||||
|
|
||||||
} else {
|
|
||||||
clone = src && jQuery.isPlainObject( src ) ? src : {};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Never move original objects, clone them
|
|
||||||
target[ name ] = jQuery.extend( deep, clone, copy );
|
|
||||||
|
|
||||||
// Don't bring in undefined values
|
|
||||||
} else if ( copy !== undefined ) {
|
|
||||||
target[ name ] = copy;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return the modified object
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery.extend( {
|
|
||||||
|
|
||||||
// Unique for each copy of jQuery on the page
|
|
||||||
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
|
|
||||||
|
|
||||||
// Assume jQuery is ready without the ready module
|
|
||||||
isReady: true,
|
|
||||||
|
|
||||||
error: function( msg ) {
|
|
||||||
throw new Error( msg );
|
|
||||||
},
|
|
||||||
|
|
||||||
noop: function() {},
|
|
||||||
|
|
||||||
isFunction: function( obj ) {
|
|
||||||
return jQuery.type( obj ) === "function";
|
|
||||||
},
|
|
||||||
|
|
||||||
isWindow: function( obj ) {
|
|
||||||
return obj != null && obj === obj.window;
|
|
||||||
},
|
|
||||||
|
|
||||||
isNumeric: function( obj ) {
|
|
||||||
|
|
||||||
// As of jQuery 3.0, isNumeric is limited to
|
|
||||||
// strings and numbers (primitives or objects)
|
|
||||||
// that can be coerced to finite numbers (gh-2662)
|
|
||||||
var type = jQuery.type( obj );
|
|
||||||
return ( type === "number" || type === "string" ) &&
|
|
||||||
|
|
||||||
// parseFloat NaNs numeric-cast false positives ("")
|
|
||||||
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
|
|
||||||
// subtraction forces infinities to NaN
|
|
||||||
!isNaN( obj - parseFloat( obj ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
isPlainObject: function( obj ) {
|
|
||||||
var proto, Ctor;
|
|
||||||
|
|
||||||
// Detect obvious negatives
|
|
||||||
// Use toString instead of jQuery.type to catch host objects
|
|
||||||
if ( !obj || toString.call( obj ) !== "[object Object]" ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
proto = getProto( obj );
|
|
||||||
|
|
||||||
// Objects with no prototype (e.g., `Object.create( null )`) are plain
|
|
||||||
if ( !proto ) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Objects with prototype are plain iff they were constructed by a global Object function
|
|
||||||
Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
|
|
||||||
return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
|
|
||||||
},
|
|
||||||
|
|
||||||
isEmptyObject: function( obj ) {
|
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */
|
|
||||||
// See https://github.com/eslint/eslint/issues/6125
|
|
||||||
var name;
|
|
||||||
|
|
||||||
for ( name in obj ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
|
|
||||||
type: function( obj ) {
|
|
||||||
if ( obj == null ) {
|
|
||||||
return obj + "";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Support: Android <=2.3 only (functionish RegExp)
|
|
||||||
return typeof obj === "object" || typeof obj === "function" ?
|
|
||||||
class2type[ toString.call( obj ) ] || "object" :
|
|
||||||
typeof obj;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Evaluates a script in a global context
|
|
||||||
globalEval: function( code ) {
|
|
||||||
DOMEval( code );
|
|
||||||
},
|
|
||||||
|
|
||||||
// Convert dashed to camelCase; used by the css and data modules
|
|
||||||
// Support: IE <=9 - 11, Edge 12 - 13
|
|
||||||
// Microsoft forgot to hump their vendor prefix (#9572)
|
|
||||||
camelCase: function( string ) {
|
|
||||||
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
|
|
||||||
},
|
|
||||||
|
|
||||||
each: function( obj, callback ) {
|
|
||||||
var length, i = 0;
|
|
||||||
|
|
||||||
if ( isArrayLike( obj ) ) {
|
|
||||||
length = obj.length;
|
|
||||||
for ( ; i < length; i++ ) {
|
|
||||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for ( i in obj ) {
|
|
||||||
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Support: Android <=4.0 only
|
|
||||||
trim: function( text ) {
|
|
||||||
return text == null ?
|
|
||||||
"" :
|
|
||||||
( text + "" ).replace( rtrim, "" );
|
|
||||||
},
|
|
||||||
|
|
||||||
// results is for internal usage only
|
|
||||||
makeArray: function( arr, results ) {
|
|
||||||
var ret = results || [];
|
|
||||||
|
|
||||||
if ( arr != null ) {
|
|
||||||
if ( isArrayLike( Object( arr ) ) ) {
|
|
||||||
jQuery.merge( ret,
|
|
||||||
typeof arr === "string" ?
|
|
||||||
[ arr ] : arr
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
push.call( ret, arr );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
},
|
|
||||||
|
|
||||||
inArray: function( elem, arr, i ) {
|
|
||||||
return arr == null ? -1 : indexOf.call( arr, elem, i );
|
|
||||||
},
|
|
||||||
|
|
||||||
// Support: Android <=4.0 only, PhantomJS 1 only
|
|
||||||
// push.apply(_, arraylike) throws on ancient WebKit
|
|
||||||
merge: function( first, second ) {
|
|
||||||
var len = +second.length,
|
|
||||||
j = 0,
|
|
||||||
i = first.length;
|
|
||||||
|
|
||||||
for ( ; j < len; j++ ) {
|
|
||||||
first[ i++ ] = second[ j ];
|
|
||||||
}
|
|
||||||
|
|
||||||
first.length = i;
|
|
||||||
|
|
||||||
return first;
|
|
||||||
},
|
|
||||||
|
|
||||||
grep: function( elems, callback, invert ) {
|
|
||||||
var callbackInverse,
|
|
||||||
matches = [],
|
|
||||||
i = 0,
|
|
||||||
length = elems.length,
|
|
||||||
callbackExpect = !invert;
|
|
||||||
|
|
||||||
// Go through the array, only saving the items
|
|
||||||
// that pass the validator function
|
|
||||||
for ( ; i < length; i++ ) {
|
|
||||||
callbackInverse = !callback( elems[ i ], i );
|
|
||||||
if ( callbackInverse !== callbackExpect ) {
|
|
||||||
matches.push( elems[ i ] );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return matches;
|
|
||||||
},
|
|
||||||
|
|
||||||
// arg is for internal usage only
|
|
||||||
map: function( elems, callback, arg ) {
|
|
||||||
var length, value,
|
|
||||||
i = 0,
|
|
||||||
ret = [];
|
|
||||||
|
|
||||||
// Go through the array, translating each of the items to their new values
|
|
||||||
if ( isArrayLike( elems ) ) {
|
|
||||||
length = elems.length;
|
|
||||||
for ( ; i < length; i++ ) {
|
|
||||||
value = callback( elems[ i ], i, arg );
|
|
||||||
|
|
||||||
if ( value != null ) {
|
|
||||||
ret.push( value );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Go through every key on the object,
|
|
||||||
} else {
|
|
||||||
for ( i in elems ) {
|
|
||||||
value = callback( elems[ i ], i, arg );
|
|
||||||
|
|
||||||
if ( value != null ) {
|
|
||||||
ret.push( value );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Flatten any nested arrays
|
|
||||||
return concat.apply( [], ret );
|
|
||||||
},
|
|
||||||
|
|
||||||
// A global GUID counter for objects
|
|
||||||
guid: 1,
|
|
||||||
|
|
||||||
// Bind a function to a context, optionally partially applying any
|
|
||||||
// arguments.
|
|
||||||
proxy: function( fn, context ) {
|
|
||||||
var tmp, args, proxy;
|
|
||||||
|
|
||||||
if ( typeof context === "string" ) {
|
|
||||||
tmp = fn[ context ];
|
|
||||||
context = fn;
|
|
||||||
fn = tmp;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Quick check to determine if target is callable, in the spec
|
|
||||||
// this throws a TypeError, but we will just return undefined.
|
|
||||||
if ( !jQuery.isFunction( fn ) ) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Simulated bind
|
|
||||||
args = slice.call( arguments, 2 );
|
|
||||||
proxy = function() {
|
|
||||||
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
|
|
||||||
};
|
|
||||||
|
|
||||||
// Set the guid of unique handler to the same of original handler, so it can be removed
|
|
||||||
proxy.guid = fn.guid = fn.guid || jQuery.guid++;
|
|
||||||
|
|
||||||
return proxy;
|
|
||||||
},
|
|
||||||
|
|
||||||
now: Date.now,
|
|
||||||
|
|
||||||
// jQuery.support is not used in Core but other projects attach their
|
|
||||||
// properties to it so it needs to exist.
|
|
||||||
support: support
|
|
||||||
} );
|
|
||||||
|
|
||||||
if ( typeof Symbol === "function" ) {
|
|
||||||
jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate the class2type map
|
|
||||||
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
|
|
||||||
function( i, name ) {
|
|
||||||
class2type[ "[object " + name + "]" ] = name.toLowerCase();
|
|
||||||
} );
|
|
||||||
|
|
||||||
function isArrayLike( obj ) {
|
|
||||||
|
|
||||||
// Support: real iOS 8.2 only (not reproducible in simulator)
|
|
||||||
// `in` check used to prevent JIT error (gh-2145)
|
|
||||||
// hasOwn isn't used here due to false negatives
|
|
||||||
// regarding Nodelist length in IE
|
|
||||||
var length = !!obj && "length" in obj && obj.length,
|
|
||||||
type = jQuery.type( obj );
|
|
||||||
|
|
||||||
if ( type === "function" || jQuery.isWindow( obj ) ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return type === "array" || length === 0 ||
|
|
||||||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
return jQuery;
|
|
||||||
} );
|
|
||||||
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
1811
src/js/tether.js
1811
src/js/tether.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -41,15 +41,8 @@
|
||||||
//
|
//
|
||||||
// Generate contextual modifier classes for colorizing the alert.
|
// Generate contextual modifier classes for colorizing the alert.
|
||||||
|
|
||||||
.alert-success {
|
@each $color, $value in $theme-colors {
|
||||||
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
|
.alert-#{$color} {
|
||||||
}
|
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
|
||||||
.alert-info {
|
}
|
||||||
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
|
|
||||||
}
|
|
||||||
.alert-warning {
|
|
||||||
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
|
|
||||||
}
|
|
||||||
.alert-danger {
|
|
||||||
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,17 +27,6 @@
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable QualifyingElement
|
|
||||||
// Add hover effects, but only for links
|
|
||||||
a.badge {
|
|
||||||
@include hover-focus {
|
|
||||||
color: $badge-link-hover-color;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-lint:enable QualifyingElement
|
|
||||||
|
|
||||||
// Pill badges
|
// Pill badges
|
||||||
//
|
//
|
||||||
// Make them extra rounded with a modifier to replace v3's badges.
|
// Make them extra rounded with a modifier to replace v3's badges.
|
||||||
|
|
@ -52,26 +41,8 @@ a.badge {
|
||||||
//
|
//
|
||||||
// Contextual variations (linked badges get darker on :hover).
|
// Contextual variations (linked badges get darker on :hover).
|
||||||
|
|
||||||
.badge-default {
|
@each $color, $value in $theme-colors {
|
||||||
@include badge-variant($badge-default-bg);
|
.badge-#{$color} {
|
||||||
}
|
@include badge-variant($value);
|
||||||
|
}
|
||||||
.badge-primary {
|
|
||||||
@include badge-variant($badge-primary-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-success {
|
|
||||||
@include badge-variant($badge-success-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-info {
|
|
||||||
@include badge-variant($badge-info-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-warning {
|
|
||||||
@include badge-variant($badge-warning-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-danger {
|
|
||||||
@include badge-variant($badge-danger-bg);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
margin-bottom: $spacer-y;
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: $breadcrumb-bg;
|
background-color: $breadcrumb-bg;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,9 @@
|
||||||
> .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
// Bring the hover, focused, and "active" buttons to the fron 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: 2;
|
z-index: 2;
|
||||||
|
|
@ -35,6 +36,7 @@
|
||||||
// Optional: Group multiple button groups together for a toolbar
|
// Optional: Group multiple button groups together for a toolbar
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
|
|
@ -77,12 +79,6 @@
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// On active and open, don't show outline
|
|
||||||
.btn-group .dropdown-toggle:active,
|
|
||||||
.btn-group.open .dropdown-toggle {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Sizing
|
// Sizing
|
||||||
//
|
//
|
||||||
|
|
@ -97,8 +93,8 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn + .dropdown-toggle-split {
|
.btn + .dropdown-toggle-split {
|
||||||
padding-right: $btn-padding-x * .75;
|
padding-right: $input-btn-padding-x * .75;
|
||||||
padding-left: $btn-padding-x * .75;
|
padding-left: $input-btn-padding-x * .75;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -106,19 +102,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm + .dropdown-toggle-split {
|
.btn-sm + .dropdown-toggle-split {
|
||||||
padding-right: $btn-padding-x-sm * .75;
|
padding-right: $input-btn-padding-x-sm * .75;
|
||||||
padding-left: $btn-padding-x-sm * .75;
|
padding-left: $input-btn-padding-x-sm * .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-lg + .dropdown-toggle-split {
|
.btn-lg + .dropdown-toggle-split {
|
||||||
padding-right: $btn-padding-x-lg * .75;
|
padding-right: $input-btn-padding-x-lg * .75;
|
||||||
padding-left: $btn-padding-x-lg * .75;
|
padding-left: $input-btn-padding-x-lg * .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// The clickable button for toggling the menu
|
// The clickable button for toggling the menu
|
||||||
// Remove the gradient and set the same inset shadow as the :active state
|
// Set the same inset shadow as the :active state
|
||||||
.btn-group.open .dropdown-toggle {
|
.btn-group.show .dropdown-toggle {
|
||||||
@include box-shadow($btn-active-box-shadow);
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
||||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,12 @@
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
line-height: $btn-line-height;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border: $input-btn-border-width solid transparent;
|
border: $input-btn-border-width solid transparent;
|
||||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
|
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
|
||||||
@include transition($btn-transition);
|
@include transition($btn-transition);
|
||||||
|
|
||||||
// Share hover and focus styles
|
// Share hover and focus styles
|
||||||
|
|
@ -29,7 +28,6 @@
|
||||||
// Disabled comes first so active can properly restyle
|
// Disabled comes first so active can properly restyle
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: $cursor-disabled;
|
|
||||||
opacity: .65;
|
opacity: .65;
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
@ -52,43 +50,16 @@ fieldset[disabled] a.btn {
|
||||||
// Alternate buttons
|
// Alternate buttons
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn-primary {
|
@each $color, $value in $theme-colors {
|
||||||
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
.btn-#{$color} {
|
||||||
}
|
@include button-variant($value, $value);
|
||||||
.btn-secondary {
|
}
|
||||||
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
|
||||||
}
|
|
||||||
.btn-info {
|
|
||||||
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
|
||||||
}
|
|
||||||
.btn-success {
|
|
||||||
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
|
||||||
}
|
|
||||||
.btn-warning {
|
|
||||||
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
|
||||||
}
|
|
||||||
.btn-danger {
|
|
||||||
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove all backgrounds
|
@each $color, $value in $theme-colors {
|
||||||
.btn-outline-primary {
|
.btn-outline-#{$color} {
|
||||||
@include button-outline-variant($btn-primary-bg);
|
@include button-outline-variant($value, #fff);
|
||||||
}
|
}
|
||||||
.btn-outline-secondary {
|
|
||||||
@include button-outline-variant($btn-secondary-border);
|
|
||||||
}
|
|
||||||
.btn-outline-info {
|
|
||||||
@include button-outline-variant($btn-info-bg);
|
|
||||||
}
|
|
||||||
.btn-outline-success {
|
|
||||||
@include button-outline-variant($btn-success-bg);
|
|
||||||
}
|
|
||||||
.btn-outline-warning {
|
|
||||||
@include button-outline-variant($btn-warning-bg);
|
|
||||||
}
|
|
||||||
.btn-outline-danger {
|
|
||||||
@include button-outline-variant($btn-danger-bg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -113,6 +84,7 @@ fieldset[disabled] a.btn {
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
@include hover {
|
@include hover {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
@ -137,12 +109,11 @@ fieldset[disabled] a.btn {
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn-lg {
|
.btn-lg {
|
||||||
// line-height: ensure even-numbered height of button next to large input
|
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
// line-height: ensure proper height of button next to small input
|
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,15 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
background-color: $card-bg;
|
background-color: $card-bg;
|
||||||
|
background-clip: border-box;
|
||||||
border: $card-border-width solid $card-border-color;
|
border: $card-border-width solid $card-border-color;
|
||||||
@include border-radius($card-border-radius);
|
@include border-radius($card-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-block {
|
.card-body {
|
||||||
// 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;
|
||||||
|
|
@ -67,7 +70,7 @@
|
||||||
border-bottom: $card-border-width solid $card-border-color;
|
border-bottom: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,7 +80,7 @@
|
||||||
border-top: $card-border-width solid $card-border-color;
|
border-top: $card-border-width solid $card-border-color;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,70 +101,7 @@
|
||||||
margin-left: -($card-spacer-x / 2);
|
margin-left: -($card-spacer-x / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Background variations
|
|
||||||
//
|
|
||||||
|
|
||||||
.card-primary {
|
|
||||||
@include card-variant($brand-primary, $brand-primary);
|
|
||||||
}
|
|
||||||
.card-success {
|
|
||||||
@include card-variant($brand-success, $brand-success);
|
|
||||||
}
|
|
||||||
.card-info {
|
|
||||||
@include card-variant($brand-info, $brand-info);
|
|
||||||
}
|
|
||||||
.card-warning {
|
|
||||||
@include card-variant($brand-warning, $brand-warning);
|
|
||||||
}
|
|
||||||
.card-danger {
|
|
||||||
@include card-variant($brand-danger, $brand-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove all backgrounds
|
|
||||||
.card-outline-primary {
|
|
||||||
@include card-outline-variant($btn-primary-bg);
|
|
||||||
}
|
|
||||||
.card-outline-secondary {
|
|
||||||
@include card-outline-variant($btn-secondary-border);
|
|
||||||
}
|
|
||||||
.card-outline-info {
|
|
||||||
@include card-outline-variant($btn-info-bg);
|
|
||||||
}
|
|
||||||
.card-outline-success {
|
|
||||||
@include card-outline-variant($btn-success-bg);
|
|
||||||
}
|
|
||||||
.card-outline-warning {
|
|
||||||
@include card-outline-variant($btn-warning-bg);
|
|
||||||
}
|
|
||||||
.card-outline-danger {
|
|
||||||
@include card-outline-variant($btn-danger-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Inverse text within a card for use with dark backgrounds
|
|
||||||
//
|
|
||||||
|
|
||||||
.card-inverse {
|
|
||||||
@include card-inverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Blockquote
|
|
||||||
//
|
|
||||||
|
|
||||||
.card-blockquote {
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Card image
|
// Card image
|
||||||
.card-img {
|
|
||||||
// margin: -1.325rem;
|
|
||||||
@include border-radius($card-border-radius-inner);
|
|
||||||
}
|
|
||||||
.card-img-overlay {
|
.card-img-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -171,14 +111,20 @@
|
||||||
padding: $card-img-overlay-padding;
|
padding: $card-img-overlay-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
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 image caps
|
||||||
.card-img-top {
|
.card-img-top {
|
||||||
@include border-top-radius($card-border-radius-inner);
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||||
|
@include border-top-radius($card-inner-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-bottom {
|
.card-img-bottom {
|
||||||
@include border-bottom-radius($card-border-radius-inner);
|
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||||
|
@include border-bottom-radius($card-inner-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -188,17 +134,15 @@
|
||||||
.card-deck {
|
.card-deck {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
margin-right: -$card-deck-margin;
|
||||||
|
margin-left: -$card-deck-margin;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-right: $card-deck-margin;
|
||||||
// Selectively apply horizontal margins to cards to avoid doing the
|
margin-left: $card-deck-margin;
|
||||||
// negative margin dance like our grid. This differs from the grid
|
|
||||||
// due to the use of margins as gutters instead of padding.
|
|
||||||
&:not(:first-child) { margin-left: $card-deck-margin; }
|
|
||||||
&:not(:last-child) { margin-right: $card-deck-margin; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -214,7 +158,7 @@
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
|
|
||||||
+ .card {
|
+ .card {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -262,15 +206,18 @@
|
||||||
// Columns
|
// Columns
|
||||||
//
|
//
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
.card-columns {
|
||||||
.card-columns {
|
.card {
|
||||||
|
margin-bottom: $card-columns-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
column-count: $card-columns-count;
|
column-count: $card-columns-count;
|
||||||
column-gap: $card-columns-gap;
|
column-gap: $card-columns-gap;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: inline-block; // Don't let them vertically span multiple columns
|
display: inline-block; // Don't let them vertically span multiple columns
|
||||||
width: 100%; // Don't let their width change
|
width: 100%; // Don't let their width change
|
||||||
margin-bottom: $card-columns-margin;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,19 +12,17 @@
|
||||||
.carousel-item {
|
.carousel-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@include transition($carousel-transition);
|
||||||
@include if-supports-3d-transforms() {
|
backface-visibility: hidden;
|
||||||
@include transition($carousel-transition);
|
perspective: 1000px;
|
||||||
backface-visibility: hidden;
|
|
||||||
perspective: 1000px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item.active,
|
.carousel-item.active,
|
||||||
.carousel-item-next,
|
.carousel-item-next,
|
||||||
.carousel-item-prev {
|
.carousel-item-prev {
|
||||||
display: flex;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-item-next,
|
.carousel-item-next,
|
||||||
|
|
@ -34,19 +32,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// CSS3 transforms when supported by the browser
|
// CSS3 transforms when supported by the browser
|
||||||
@include if-supports-3d-transforms() {
|
.carousel-item-next.carousel-item-left,
|
||||||
.carousel-item-next.carousel-item-left,
|
.carousel-item-prev.carousel-item-right {
|
||||||
.carousel-item-prev.carousel-item-right {
|
transform: translateX(0);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.carousel-item-next,
|
.carousel-item-next,
|
||||||
.active.carousel-item-right {
|
.active.carousel-item-right {
|
||||||
|
transform: translateX(100%);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.carousel-item-prev,
|
.carousel-item-prev,
|
||||||
.active.carousel-item-left {
|
.active.carousel-item-left {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
|
||||||
|
@supports (transform-style: preserve-3d) {
|
||||||
transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,13 +133,12 @@
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 0 auto;
|
flex: 0 1 auto;
|
||||||
max-width: $carousel-indicator-width;
|
width: $carousel-indicator-width;
|
||||||
height: $carousel-indicator-height;
|
height: $carousel-indicator-height;
|
||||||
margin-right: $carousel-indicator-spacer;
|
margin-right: $carousel-indicator-spacer;
|
||||||
margin-left: $carousel-indicator-spacer;
|
margin-left: $carousel-indicator-spacer;
|
||||||
text-indent: -999px;
|
text-indent: -999px;
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba($carousel-indicator-active-bg, .5);
|
background-color: rgba($carousel-indicator-active-bg, .5);
|
||||||
|
|
||||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $close-color;
|
color: $close-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -23,7 +22,6 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// scss-lint:disable QualifyingElement
|
||||||
button.close {
|
button.close {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable PropertyCount
|
// scss-lint:disable PropertyCount, VendorPrefix
|
||||||
|
|
||||||
// Embedded icons from Open Iconic.
|
// Embedded icons from Open Iconic.
|
||||||
// Released under MIT and copyright 2014 Waybury.
|
// Released under MIT and copyright 2014 Waybury.
|
||||||
|
|
@ -15,7 +15,6 @@
|
||||||
min-height: (1rem * $line-height-base);
|
min-height: (1rem * $line-height-base);
|
||||||
padding-left: $custom-control-gutter;
|
padding-left: $custom-control-gutter;
|
||||||
margin-right: $custom-control-spacer-x;
|
margin-right: $custom-control-spacer-x;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input {
|
.custom-control-input {
|
||||||
|
|
@ -24,31 +23,29 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:checked ~ .custom-control-indicator {
|
&:checked ~ .custom-control-indicator {
|
||||||
color: $custom-control-checked-indicator-color;
|
color: $custom-control-indicator-checked-color;
|
||||||
background-color: $custom-control-checked-indicator-bg;
|
background-color: $custom-control-indicator-checked-bg;
|
||||||
@include box-shadow($custom-control-checked-indicator-box-shadow);
|
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus ~ .custom-control-indicator {
|
&:focus ~ .custom-control-indicator {
|
||||||
// the mixin is not used here to make sure there is feedback
|
// the mixin is not used here to make sure there is feedback
|
||||||
box-shadow: $custom-control-focus-indicator-box-shadow;
|
box-shadow: $custom-control-indicator-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active ~ .custom-control-indicator {
|
&:active ~ .custom-control-indicator {
|
||||||
color: $custom-control-active-indicator-color;
|
color: $custom-control-indicator-active-color;
|
||||||
background-color: $custom-control-active-indicator-bg;
|
background-color: $custom-control-indicator-active-bg;
|
||||||
@include box-shadow($custom-control-active-indicator-box-shadow);
|
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
~ .custom-control-indicator {
|
~ .custom-control-indicator {
|
||||||
cursor: $custom-control-disabled-cursor;
|
background-color: $custom-control-indicator-disabled-bg;
|
||||||
background-color: $custom-control-disabled-indicator-bg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .custom-control-description {
|
~ .custom-control-description {
|
||||||
color: $custom-control-disabled-description-color;
|
color: $custom-control-description-disabled-color;
|
||||||
cursor: $custom-control-disabled-cursor;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -79,17 +76,17 @@
|
||||||
|
|
||||||
.custom-checkbox {
|
.custom-checkbox {
|
||||||
.custom-control-indicator {
|
.custom-control-indicator {
|
||||||
@include border-radius($custom-checkbox-radius);
|
@include border-radius($custom-checkbox-indicator-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-indicator {
|
.custom-control-input:checked ~ .custom-control-indicator {
|
||||||
background-image: $custom-checkbox-checked-icon;
|
background-image: $custom-checkbox-indicator-icon-checked;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||||
background-color: $custom-checkbox-indeterminate-bg;
|
background-color: $custom-checkbox-indicator-indeterminate-bg;
|
||||||
background-image: $custom-checkbox-indeterminate-icon;
|
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
||||||
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
|
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,11 +96,11 @@
|
||||||
|
|
||||||
.custom-radio {
|
.custom-radio {
|
||||||
.custom-control-indicator {
|
.custom-control-indicator {
|
||||||
border-radius: $custom-radio-radius;
|
border-radius: $custom-radio-indicator-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-indicator {
|
.custom-control-input:checked ~ .custom-control-indicator {
|
||||||
background-image: $custom-radio-checked-icon;
|
background-image: $custom-radio-indicator-icon-checked;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -136,19 +133,21 @@
|
||||||
.custom-select {
|
.custom-select {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
$select-border-width: ($border-width * 2);
|
height: $input-height;
|
||||||
height: calc(#{$input-height} + #{$select-border-width});
|
|
||||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||||
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-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||||
|
background-clip: padding-box;
|
||||||
background-size: $custom-select-bg-size;
|
background-size: $custom-select-bg-size;
|
||||||
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);
|
@if $enable-rounded {
|
||||||
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
|
border-radius: $custom-select-border-radius;
|
||||||
-moz-appearance: none;
|
} @else {
|
||||||
-webkit-appearance: none;
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $custom-select-focus-border-color;
|
border-color: $custom-select-focus-border-color;
|
||||||
|
|
@ -168,7 +167,6 @@
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: $custom-select-disabled-color;
|
color: $custom-select-disabled-color;
|
||||||
cursor: $cursor-disabled;
|
|
||||||
background-color: $custom-select-disabled-bg;
|
background-color: $custom-select-disabled-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -179,14 +177,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-select-sm {
|
.custom-select-sm {
|
||||||
|
height: $custom-select-height-sm;
|
||||||
padding-top: $custom-select-padding-y;
|
padding-top: $custom-select-padding-y;
|
||||||
padding-bottom: $custom-select-padding-y;
|
padding-bottom: $custom-select-padding-y;
|
||||||
font-size: $custom-select-sm-font-size;
|
font-size: $custom-select-font-size-sm;
|
||||||
|
|
||||||
// &:not([multiple]) {
|
|
||||||
// height: 26px;
|
|
||||||
// min-height: 26px;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -200,7 +194,6 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-file-input {
|
.custom-file-input {
|
||||||
|
|
@ -208,11 +201,10 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
filter: alpha(opacity = 0);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:focus ~ .custom-file-control {
|
&:focus ~ .custom-file-control {
|
||||||
@include box-shadow($custom-file-focus-box-shadow);
|
box-shadow: $custom-file-focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -223,36 +215,36 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
|
overflow: hidden;
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
color: $custom-file-color;
|
color: $custom-file-color;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: $custom-file-bg;
|
background-color: $custom-file-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
border: $custom-file-border-width solid $custom-file-border-color;
|
border: $custom-file-border-width solid $custom-file-border-color;
|
||||||
@include border-radius($custom-file-border-radius);
|
@include border-radius($custom-file-border-radius);
|
||||||
@include box-shadow($custom-file-box-shadow);
|
@include box-shadow($custom-file-box-shadow);
|
||||||
|
|
||||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||||
&:lang(#{$lang})::after {
|
&:lang(#{$lang}):empty::after {
|
||||||
content: $text;
|
content: $text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -$custom-file-border-width;
|
top: 0;
|
||||||
right: -$custom-file-border-width;
|
right: 0;
|
||||||
bottom: -$custom-file-border-width;
|
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
display: block;
|
display: block;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
color: $custom-file-button-color;
|
color: $custom-file-button-color;
|
||||||
background-color: $custom-file-button-bg;
|
background-color: $custom-file-button-bg;
|
||||||
border: $custom-file-border-width solid $custom-file-border-color;
|
border-left: $custom-file-border-width solid $custom-file-border-color;
|
||||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
// Bootstrap overrides
|
|
||||||
//
|
|
||||||
// Copy variables from `_variables.scss` to this file to override default values
|
|
||||||
// without modifying source files.
|
|
||||||
|
|
@ -10,21 +10,27 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
margin-left: $caret-width;
|
margin-left: $caret-width * .85;
|
||||||
vertical-align: middle;
|
vertical-align: $caret-width * .85;
|
||||||
content: "";
|
content: "";
|
||||||
border-top: $caret-width solid;
|
border-top: $caret-width solid;
|
||||||
border-right: $caret-width solid transparent;
|
border-right: $caret-width solid transparent;
|
||||||
border-left: $caret-width solid transparent;
|
border-left: $caret-width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
&:empty::after {
|
||||||
&:focus {
|
margin-left: 0;
|
||||||
outline: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
|
// Just add .dropup after the standard .dropdown class and you're set.
|
||||||
.dropup {
|
.dropup {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
&::after {
|
&::after {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
|
@ -43,7 +49,7 @@
|
||||||
float: left;
|
float: left;
|
||||||
min-width: $dropdown-min-width;
|
min-width: $dropdown-min-width;
|
||||||
padding: $dropdown-padding-y 0;
|
padding: $dropdown-padding-y 0;
|
||||||
margin: $dropdown-margin-top 0 0; // override default ul
|
margin: $dropdown-spacer 0 0; // override default ul
|
||||||
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||||
|
|
@ -66,7 +72,7 @@
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%; // For `<button>`s
|
width: 100%; // For `<button>`s
|
||||||
padding: 3px $dropdown-item-padding-x;
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||||
clear: both;
|
clear: both;
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
color: $dropdown-link-color;
|
color: $dropdown-link-color;
|
||||||
|
|
@ -91,7 +97,6 @@
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: $dropdown-link-disabled-color;
|
color: $dropdown-link-disabled-color;
|
||||||
cursor: $cursor-disabled;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
// Remove CSS gradients if they're enabled
|
// Remove CSS gradients if they're enabled
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
|
|
@ -102,29 +107,14 @@
|
||||||
|
|
||||||
// Open state for the dropdown
|
// Open state for the dropdown
|
||||||
.show {
|
.show {
|
||||||
// Show the menu
|
|
||||||
> .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the outline when :focus is triggered
|
// Remove the outline when :focus is triggered
|
||||||
> a {
|
> a {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Menu positioning
|
.dropdown-menu.show {
|
||||||
//
|
display: block;
|
||||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
|
||||||
// menu with the parent.
|
|
||||||
.dropdown-menu-right {
|
|
||||||
right: 0;
|
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-left {
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdown section headers
|
// Dropdown section headers
|
||||||
|
|
@ -136,26 +126,3 @@
|
||||||
color: $dropdown-header-color;
|
color: $dropdown-header-color;
|
||||||
white-space: nowrap; // as with > li > a
|
white-space: nowrap; // as with > li > a
|
||||||
}
|
}
|
||||||
|
|
||||||
// Backdrop to catch body clicks on mobile, etc.
|
|
||||||
.dropdown-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: $zindex-dropdown-backdrop;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
||||||
//
|
|
||||||
// Just add .dropup after the standard .dropdown class and you're set.
|
|
||||||
|
|
||||||
.dropup {
|
|
||||||
// Different positioning for bottom up menu
|
|
||||||
.dropdown-menu {
|
|
||||||
top: auto;
|
|
||||||
bottom: 100%;
|
|
||||||
margin-bottom: $dropdown-margin-top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// scss-lint:disable QualifyingElement, VendorPrefix
|
||||||
|
|
||||||
//
|
//
|
||||||
// Textual form controls
|
// Textual form controls
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||||
// height: $input-height;
|
// height: $input-height;
|
||||||
padding: $input-padding-y $input-padding-x;
|
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: $input-line-height;
|
line-height: $input-btn-line-height;
|
||||||
color: $input-color;
|
color: $input-color;
|
||||||
background-color: $input-bg;
|
background-color: $input-bg;
|
||||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
// Placeholder
|
// Placeholder
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $input-color-placeholder;
|
color: $input-placeholder-color;
|
||||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -54,20 +54,15 @@
|
||||||
// don't honor that edge case; we style them as disabled anyway.
|
// don't honor that edge case; we style them as disabled anyway.
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&[readonly] {
|
&[readonly] {
|
||||||
background-color: $input-bg-disabled;
|
background-color: $input-disabled-bg;
|
||||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
cursor: $cursor-disabled;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
select.form-control {
|
select.form-control {
|
||||||
&:not([size]):not([multiple]) {
|
&:not([size]):not([multiple]) {
|
||||||
$select-border-width: ($border-width * 2);
|
height: $input-height;
|
||||||
height: calc(#{$input-height} + #{$select-border-width});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus::-ms-value {
|
&:focus::-ms-value {
|
||||||
|
|
@ -95,20 +90,20 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the label text to
|
// For use with horizontal and inline forms, when you need the label text to
|
||||||
// align with the form controls.
|
// align with the form controls.
|
||||||
.col-form-label {
|
.col-form-label {
|
||||||
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
||||||
margin-bottom: 0; // Override the `<label>` default
|
margin-bottom: 0; // Override the `<label>` default
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-lg {
|
.col-form-label-lg {
|
||||||
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-sm {
|
.col-form-label-sm {
|
||||||
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -120,23 +115,23 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the legend text to
|
// For use with horizontal and inline forms, when you need the legend text to
|
||||||
// be the same size as regular labels, and to align with the form controls.
|
// be the same size as regular labels, and to align with the form controls.
|
||||||
.col-form-legend {
|
.col-form-legend {
|
||||||
padding-top: $input-padding-y;
|
padding-top: $input-btn-padding-y;
|
||||||
padding-bottom: $input-padding-y;
|
padding-bottom: $input-btn-padding-y;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Static form control text
|
// Readonly controls as plain text
|
||||||
//
|
//
|
||||||
// Apply class to an element to make any string of text align with labels in a
|
// Apply class to a readonly input to make it appear like regular plain
|
||||||
// horizontal form layout.
|
// text (without any border, background color, focus indicator)
|
||||||
|
|
||||||
.form-control-static {
|
.form-control-plaintext {
|
||||||
padding-top: $input-padding-y;
|
padding-top: $input-btn-padding-y;
|
||||||
padding-bottom: $input-padding-y;
|
padding-bottom: $input-btn-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
|
||||||
line-height: $input-line-height;
|
line-height: $input-btn-line-height;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
border-width: $input-btn-border-width 0;
|
border-width: $input-btn-border-width 0;
|
||||||
|
|
||||||
|
|
@ -157,8 +152,9 @@ select.form-control {
|
||||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||||
|
|
||||||
.form-control-sm {
|
.form-control-sm {
|
||||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
|
line-height: $input-btn-line-height-sm;
|
||||||
@include border-radius($input-border-radius-sm);
|
@include border-radius($input-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -169,8 +165,9 @@ select.form-control-sm {
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-lg {
|
.form-control-lg {
|
||||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
|
line-height: $input-btn-line-height-lg;
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -196,6 +193,24 @@ select.form-control-lg {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Form grid
|
||||||
|
//
|
||||||
|
// Special replacement for our grid system's `.row` for tighter form layouts.
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
|
||||||
|
> .col,
|
||||||
|
> [class*="col-"] {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Checkboxes and radios
|
// Checkboxes and radios
|
||||||
//
|
//
|
||||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||||
|
|
@ -208,7 +223,6 @@ select.form-control-lg {
|
||||||
&.disabled {
|
&.disabled {
|
||||||
.form-check-label {
|
.form-check-label {
|
||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
cursor: $cursor-disabled;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -216,17 +230,12 @@ select.form-control-lg {
|
||||||
.form-check-label {
|
.form-check-label {
|
||||||
padding-left: $form-check-input-gutter;
|
padding-left: $form-check-input-gutter;
|
||||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
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;
|
||||||
|
|
||||||
&:only-child {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Radios and checkboxes on same line
|
// Radios and checkboxes on same line
|
||||||
|
|
@ -243,48 +252,37 @@ select.form-control-lg {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Form control feedback states
|
// Form validation
|
||||||
//
|
//
|
||||||
// Apply contextual and semantic states to individual form controls.
|
// Provide feedback to users when form field values are valid or invalid. Works
|
||||||
|
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
||||||
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
|
// server side validation.
|
||||||
|
|
||||||
.form-control-feedback {
|
.invalid-feedback {
|
||||||
margin-top: $form-feedback-margin-top;
|
display: none;
|
||||||
|
margin-top: .25rem;
|
||||||
|
font-size: .875rem;
|
||||||
|
color: $form-feedback-invalid-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-success,
|
.invalid-tooltip {
|
||||||
.form-control-warning,
|
position: absolute;
|
||||||
.form-control-danger {
|
top: 100%;
|
||||||
padding-right: ($input-padding-x * 3);
|
z-index: 5;
|
||||||
background-repeat: no-repeat;
|
display: none;
|
||||||
background-position: center right ($input-height / 4);
|
width: 250px;
|
||||||
background-size: ($input-height / 2) ($input-height / 2);
|
padding: .5rem;
|
||||||
}
|
margin-top: .1rem;
|
||||||
|
font-size: .875rem;
|
||||||
// Form validation states
|
line-height: 1;
|
||||||
.has-success {
|
color: #fff;
|
||||||
@include form-control-validation($brand-success);
|
background-color: rgba($form-feedback-invalid-color,.8);
|
||||||
|
border-radius: .2rem;
|
||||||
.form-control-success {
|
|
||||||
background-image: $form-icon-success;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-warning {
|
|
||||||
@include form-control-validation($brand-warning);
|
|
||||||
|
|
||||||
.form-control-warning {
|
|
||||||
background-image: $form-icon-warning;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-danger {
|
|
||||||
@include form-control-validation($brand-danger);
|
|
||||||
|
|
||||||
.form-control-danger {
|
|
||||||
background-image: $form-icon-danger;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include form-validation-state("valid", $form-feedback-valid-color);
|
||||||
|
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
||||||
|
|
||||||
// Inline forms
|
// Inline forms
|
||||||
//
|
//
|
||||||
|
|
@ -333,7 +331,7 @@ select.form-control-lg {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make static controls behave like regular ones
|
// Make static controls behave like regular ones
|
||||||
.form-control-static {
|
.form-control-plaintext {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
// Bootstrap functions
|
||||||
|
//
|
||||||
|
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||||
|
|
||||||
|
// Ascending
|
||||||
|
// Used to evaluate Sass maps like our grid breakpoints.
|
||||||
|
@mixin _assert-ascending($map, $map-name) {
|
||||||
|
$prev-key: null;
|
||||||
|
$prev-num: null;
|
||||||
|
@each $key, $num in $map {
|
||||||
|
@if $prev-num == null {
|
||||||
|
// Do nothing
|
||||||
|
} @else if not comparable($prev-num, $num) {
|
||||||
|
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||||
|
} @else if $prev-num >= $num {
|
||||||
|
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||||
|
}
|
||||||
|
$prev-key: $key;
|
||||||
|
$prev-num: $num;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starts at zero
|
||||||
|
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||||
|
@mixin _assert-starts-at-zero($map) {
|
||||||
|
$values: map-values($map);
|
||||||
|
$first-value: nth($values, 1);
|
||||||
|
@if $first-value != 0 {
|
||||||
|
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Replace `$search` with `$replace` in `$string`
|
||||||
|
// Used on our SVG icon backgrounds for custom forms.
|
||||||
|
//
|
||||||
|
// @author Hugo Giraudel
|
||||||
|
// @param {String} $string - Initial string
|
||||||
|
// @param {String} $search - Substring to replace
|
||||||
|
// @param {String} $replace ('') - New value
|
||||||
|
// @return {String} - Updated string
|
||||||
|
@function str-replace($string, $search, $replace: "") {
|
||||||
|
$index: str-index($string, $search);
|
||||||
|
|
||||||
|
@if $index {
|
||||||
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color contrast
|
||||||
|
@mixin color-yiq($color) {
|
||||||
|
$r: red($color);
|
||||||
|
$g: green($color);
|
||||||
|
$b: blue($color);
|
||||||
|
|
||||||
|
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||||
|
|
||||||
|
@if ($yiq >= 150) {
|
||||||
|
color: #111;
|
||||||
|
} @else {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retreive color Sass maps
|
||||||
|
@function color($key: "blue") {
|
||||||
|
@return map-get($colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function theme-color($key: "primary") {
|
||||||
|
@return map-get($theme-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function grayscale($key: "100") {
|
||||||
|
@return map-get($grays, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Request a theme color level
|
||||||
|
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||||
|
$color: theme-color($color-name);
|
||||||
|
$color-base: if($level > 0, #000, #fff);
|
||||||
|
|
||||||
|
@if $level < 0 {
|
||||||
|
// Lighter values need a quick double negative for the Sass math to work
|
||||||
|
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
|
||||||
|
} @else {
|
||||||
|
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,11 +11,12 @@
|
||||||
|
|
||||||
// Fluid container
|
// Fluid container
|
||||||
//
|
//
|
||||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
||||||
// width for fluid, full width layouts.
|
// fluid, full width layouts.
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
|
width: 100%;
|
||||||
@include make-container();
|
@include make-container();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.figure-img {
|
.figure-img {
|
||||||
margin-bottom: ($spacer-y / 2);
|
margin-bottom: ($spacer / 2);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,7 @@
|
||||||
.input-group .form-control {
|
.input-group .form-control {
|
||||||
// Vertically centers the content of the addons within the input group
|
// Vertically centers the content of the addons within the input group
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child) {
|
&:not(:first-child):not(:last-child) {
|
||||||
@include border-radius(0);
|
@include border-radius(0);
|
||||||
|
|
@ -67,25 +66,27 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.input-group-addon {
|
.input-group-addon {
|
||||||
padding: $input-padding-y $input-padding-x;
|
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||||
font-size: $font-size-base; // Match inputs
|
font-size: $font-size-base; // Match inputs
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
line-height: $input-line-height;
|
line-height: $input-btn-line-height;
|
||||||
color: $input-color;
|
color: $input-group-addon-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $input-group-addon-bg;
|
background-color: $input-group-addon-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||||
@include border-radius($input-border-radius);
|
@include border-radius($input-border-radius);
|
||||||
|
|
||||||
// Sizing
|
// Sizing
|
||||||
&.form-control-sm {
|
&.form-control-sm {
|
||||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
@include border-radius($input-border-radius-sm);
|
@include border-radius($input-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.form-control-lg {
|
&.form-control-lg {
|
||||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
@ -144,8 +145,8 @@
|
||||||
// element above the siblings.
|
// element above the siblings.
|
||||||
> .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Vertically stretch the button and center its content
|
background-clip: padding-box;
|
||||||
flex: 1;
|
border: $input-btn-border-width solid $input-group-btn-border-color;
|
||||||
|
|
||||||
+ .btn {
|
+ .btn {
|
||||||
margin-left: (-$input-btn-border-width);
|
margin-left: (-$input-btn-border-width);
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron-hr {
|
|
||||||
border-top-color: darken($jumbotron-bg, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-fluid {
|
.jumbotron-fluid {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
|
||||||
|
|
@ -19,23 +19,19 @@
|
||||||
|
|
||||||
.list-group-item-action {
|
.list-group-item-action {
|
||||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||||
color: $list-group-link-color;
|
color: $list-group-action-color;
|
||||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||||
|
|
||||||
.list-group-item-heading {
|
|
||||||
color: $list-group-link-heading-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover state
|
// Hover state
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $list-group-link-hover-color;
|
color: $list-group-action-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $list-group-hover-bg;
|
background-color: $list-group-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: $list-group-link-active-color;
|
color: $list-group-action-active-color;
|
||||||
background-color: $list-group-link-active-bg;
|
background-color: $list-group-action-active-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,9 +42,7 @@
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: block;
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
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
|
// Place the border on the list items and negative margin up for better styling
|
||||||
margin-bottom: -$list-group-border-width;
|
margin-bottom: -$list-group-border-width;
|
||||||
|
|
@ -71,16 +65,7 @@
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: $list-group-disabled-color;
|
color: $list-group-disabled-color;
|
||||||
cursor: $cursor-disabled;
|
|
||||||
background-color: $list-group-disabled-bg;
|
background-color: $list-group-disabled-bg;
|
||||||
|
|
||||||
// Force color to inherit for custom content
|
|
||||||
.list-group-item-heading {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
.list-group-item-text {
|
|
||||||
color: $list-group-disabled-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Include both here for `<a>`s and `<button>`s
|
// Include both here for `<a>`s and `<button>`s
|
||||||
|
|
@ -88,18 +73,7 @@
|
||||||
z-index: 2; // Place active items above their siblings for proper border styling
|
z-index: 2; // Place active items above their siblings for proper border styling
|
||||||
color: $list-group-active-color;
|
color: $list-group-active-color;
|
||||||
background-color: $list-group-active-bg;
|
background-color: $list-group-active-bg;
|
||||||
border-color: $list-group-active-border;
|
border-color: $list-group-active-border-color;
|
||||||
|
|
||||||
// Force color to inherit for custom content
|
|
||||||
.list-group-item-heading,
|
|
||||||
.list-group-item-heading > small,
|
|
||||||
.list-group-item-heading > .small {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item-text {
|
|
||||||
color: $list-group-active-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -135,7 +109,6 @@
|
||||||
// Add modifier classes to change text and background color on individual items.
|
// Add modifier classes to change text and background color on individual items.
|
||||||
// Organizationally, this must come after the `:hover` states.
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
|
@each $color, $value in $theme-colors {
|
||||||
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
|
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
||||||
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
|
}
|
||||||
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
|
|
||||||
|
|
|
||||||
|
|
@ -2,22 +2,6 @@
|
||||||
//
|
//
|
||||||
// Used in conjunction with global variables to enable certain theme features.
|
// Used in conjunction with global variables to enable certain theme features.
|
||||||
|
|
||||||
@mixin box-shadow($shadow...) {
|
|
||||||
@if $enable-shadows {
|
|
||||||
box-shadow: $shadow;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin transition($transition...) {
|
|
||||||
@if $enable-transitions {
|
|
||||||
@if length($transition) == 0 {
|
|
||||||
transition: $transition-base;
|
|
||||||
} @else {
|
|
||||||
transition: $transition;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@import "mixins/breakpoints";
|
@import "mixins/breakpoints";
|
||||||
@import "mixins/hover";
|
@import "mixins/hover";
|
||||||
|
|
@ -30,13 +14,11 @@
|
||||||
@import "mixins/text-emphasis";
|
@import "mixins/text-emphasis";
|
||||||
@import "mixins/text-hide";
|
@import "mixins/text-hide";
|
||||||
@import "mixins/text-truncate";
|
@import "mixins/text-truncate";
|
||||||
@import "mixins/transforms";
|
|
||||||
@import "mixins/visibility";
|
@import "mixins/visibility";
|
||||||
|
|
||||||
// // Components
|
// // Components
|
||||||
@import "mixins/alert";
|
@import "mixins/alert";
|
||||||
@import "mixins/buttons";
|
@import "mixins/buttons";
|
||||||
@import "mixins/cards";
|
|
||||||
@import "mixins/pagination";
|
@import "mixins/pagination";
|
||||||
@import "mixins/lists";
|
@import "mixins/lists";
|
||||||
@import "mixins/list-group";
|
@import "mixins/list-group";
|
||||||
|
|
@ -47,7 +29,9 @@
|
||||||
// // Skins
|
// // Skins
|
||||||
@import "mixins/background-variant";
|
@import "mixins/background-variant";
|
||||||
@import "mixins/border-radius";
|
@import "mixins/border-radius";
|
||||||
|
@import "mixins/box-shadow";
|
||||||
@import "mixins/gradients";
|
@import "mixins/gradients";
|
||||||
|
@import "mixins/transition";
|
||||||
|
|
||||||
// // Layout
|
// // Layout
|
||||||
@import "mixins/clearfix";
|
@import "mixins/clearfix";
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $modal-content-border-width solid $modal-content-border-color;
|
border: $modal-content-border-width solid $modal-content-border-color;
|
||||||
@include border-radius($border-radius-lg);
|
@include border-radius($border-radius-lg);
|
||||||
@include box-shadow($modal-content-xs-box-shadow);
|
@include box-shadow($modal-content-box-shadow-xs);
|
||||||
// Remove focus outline from opened modal
|
// Remove focus outline from opened modal
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -82,6 +82,10 @@
|
||||||
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;
|
||||||
|
|
||||||
|
.close {
|
||||||
|
margin-left: auto; // Force icon to the right even when there's no .modal-title
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Title text within header
|
// Title text within header
|
||||||
|
|
@ -127,11 +131,11 @@
|
||||||
// Automatically set modal's width for larger viewports
|
// Automatically set modal's width for larger viewports
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
max-width: $modal-md;
|
max-width: $modal-md;
|
||||||
margin: $modal-dialog-sm-up-margin-y auto;
|
margin: $modal-dialog-margin-y-sm-up auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
@include box-shadow($modal-content-sm-up-box-shadow);
|
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-sm { max-width: $modal-sm; }
|
.modal-sm { max-width: $modal-sm; }
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
@ -12,20 +13,18 @@
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $nav-link-padding;
|
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled state lightens text and removes hover/tab effects
|
// Disabled state lightens text
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $nav-disabled-link-color;
|
color: $nav-link-disabled-color;
|
||||||
cursor: $cursor-disabled;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Tabs
|
// Tabs
|
||||||
//
|
//
|
||||||
|
|
@ -46,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $nav-disabled-link-color;
|
color: $nav-link-disabled-color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
@ -54,9 +53,9 @@
|
||||||
|
|
||||||
.nav-link.active,
|
.nav-link.active,
|
||||||
.nav-item.show .nav-link {
|
.nav-item.show .nav-link {
|
||||||
color: $nav-tabs-active-link-hover-color;
|
color: $nav-tabs-link-active-color;
|
||||||
background-color: $nav-tabs-active-link-hover-bg;
|
background-color: $nav-tabs-link-active-bg;
|
||||||
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
|
border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
|
|
@ -75,13 +74,12 @@
|
||||||
.nav-pills {
|
.nav-pills {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
@include border-radius($nav-pills-border-radius);
|
@include border-radius($nav-pills-border-radius);
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link.active,
|
&.active,
|
||||||
.nav-item.show .nav-link {
|
.show > & {
|
||||||
color: $nav-pills-active-link-color;
|
color: $nav-pills-link-active-color;
|
||||||
cursor: default;
|
background-color: $nav-pills-link-active-bg;
|
||||||
background-color: $nav-pills-active-link-bg;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,7 +97,8 @@
|
||||||
|
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
flex: 1 1 100%;
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,20 @@
|
||||||
.navbar {
|
.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between; // space out brand from logo
|
||||||
padding: $navbar-padding-y $navbar-padding-x;
|
padding: $navbar-padding-y $navbar-padding-x;
|
||||||
|
|
||||||
|
// Because flex properties aren't inherited, we need to redeclare these first
|
||||||
|
// few properities so that content nested within behave properly.
|
||||||
|
> .container,
|
||||||
|
> .container-fluid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -29,10 +41,10 @@
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-top: .25rem;
|
padding-top: $navbar-brand-padding-y;
|
||||||
padding-bottom: .25rem;
|
padding-bottom: $navbar-brand-padding-y;
|
||||||
margin-right: $navbar-padding-x;
|
margin-right: $navbar-padding-x;
|
||||||
font-size: $font-size-lg;
|
font-size: $navbar-brand-font-size;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
|
@ -57,6 +69,11 @@
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -66,8 +83,8 @@
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-top: .425rem;
|
padding-top: $nav-link-padding-y;
|
||||||
padding-bottom: .425rem;
|
padding-bottom: $nav-link-padding-y;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -76,9 +93,18 @@
|
||||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||||
|
|
||||||
|
// When collapsed, prevent the toggleable navbar contents from appearing in
|
||||||
|
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
|
||||||
|
// on the `.navbar` parent.
|
||||||
|
.navbar-collapse {
|
||||||
|
flex-basis: 100%;
|
||||||
|
// For always expanded or extra full navbars, ensure content aligns itself
|
||||||
|
// properly vertically. Can be easily overridden with flex utilities.
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
// Button for toggling the navbar when in its collapsed state
|
// Button for toggling the navbar when in its collapsed state
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
|
|
||||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||||
font-size: $navbar-toggler-font-size;
|
font-size: $navbar-toggler-font-size;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
@ -103,34 +129,17 @@
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use `position` on the toggler to prevent it from being auto placed as a flex
|
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||||
// item and allow easy placement.
|
|
||||||
.navbar-toggler-left {
|
|
||||||
position: absolute;
|
|
||||||
left: $navbar-padding-x;
|
|
||||||
}
|
|
||||||
.navbar-toggler-right {
|
|
||||||
position: absolute;
|
|
||||||
right: $navbar-padding-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate series of `.navbar-toggleable-*` responsive classes for configuring
|
|
||||||
// where your navbar collapses.
|
// where your navbar collapses.
|
||||||
.navbar-toggleable {
|
.navbar-expand {
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
&#{$infix} {
|
&#{$infix} {
|
||||||
@include media-breakpoint-down($breakpoint) {
|
@include media-breakpoint-down($breakpoint) {
|
||||||
.navbar-nav {
|
> .container,
|
||||||
.dropdown-menu {
|
> .container-fluid {
|
||||||
position: static;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .container {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -139,11 +148,20 @@
|
||||||
@include media-breakpoint-up($next) {
|
@include media-breakpoint-up($next) {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-right {
|
||||||
|
right: 0;
|
||||||
|
left: auto; // Reset the default from `.dropdown-menu`
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
padding-right: .5rem;
|
padding-right: .5rem;
|
||||||
padding-left: .5rem;
|
padding-left: .5rem;
|
||||||
|
|
@ -151,16 +169,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// For nesting containers, have to redeclare for alignment purposes
|
// For nesting containers, have to redeclare for alignment purposes
|
||||||
> .container {
|
> .container,
|
||||||
display: flex;
|
> .container-fluid {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable ImportantRule
|
// scss-lint:disable ImportantRule
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
// scss-lint:enable ImportantRule
|
// scss-lint:enable ImportantRule
|
||||||
|
|
||||||
|
|
@ -179,8 +195,7 @@
|
||||||
|
|
||||||
// Dark links against a light background
|
// Dark links against a light background
|
||||||
.navbar-light {
|
.navbar-light {
|
||||||
.navbar-brand,
|
.navbar-brand {
|
||||||
.navbar-toggler {
|
|
||||||
color: $navbar-light-active-color;
|
color: $navbar-light-active-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
|
|
@ -201,20 +216,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.open > .nav-link,
|
.show > .nav-link,
|
||||||
.active > .nav-link,
|
.active > .nav-link,
|
||||||
.nav-link.open,
|
.nav-link.show,
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
color: $navbar-light-active-color;
|
color: $navbar-light-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
border-color: $navbar-light-toggler-border;
|
color: $navbar-light-color;
|
||||||
|
border-color: $navbar-light-toggler-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler-icon {
|
.navbar-toggler-icon {
|
||||||
background-image: $navbar-light-toggler-bg;
|
background-image: $navbar-light-toggler-icon-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
|
|
@ -223,46 +239,46 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// White links against a dark background
|
// White links against a dark background
|
||||||
.navbar-inverse {
|
.navbar-dark {
|
||||||
.navbar-brand,
|
.navbar-brand {
|
||||||
.navbar-toggler {
|
color: $navbar-dark-active-color;
|
||||||
color: $navbar-inverse-active-color;
|
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $navbar-inverse-active-color;
|
color: $navbar-dark-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: $navbar-inverse-color;
|
color: $navbar-dark-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $navbar-inverse-hover-color;
|
color: $navbar-dark-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $navbar-inverse-disabled-color;
|
color: $navbar-dark-disabled-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.open > .nav-link,
|
.show > .nav-link,
|
||||||
.active > .nav-link,
|
.active > .nav-link,
|
||||||
.nav-link.open,
|
.nav-link.show,
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
color: $navbar-inverse-active-color;
|
color: $navbar-dark-active-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
border-color: $navbar-inverse-toggler-border;
|
color: $navbar-dark-color;
|
||||||
|
border-color: $navbar-dark-toggler-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler-icon {
|
.navbar-toggler-icon {
|
||||||
background-image: $navbar-inverse-toggler-bg;
|
background-image: $navbar-dark-toggler-icon-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: $navbar-inverse-color;
|
color: $navbar-dark-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,461 +0,0 @@
|
||||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Change the default font family in all browsers (opinionated).
|
|
||||||
// 2. Correct the line height in all browsers.
|
|
||||||
// 3. Prevent adjustments of font size after orientation changes in
|
|
||||||
// IE on Windows Phone and in iOS.
|
|
||||||
//
|
|
||||||
|
|
||||||
// Document
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif; // 1
|
|
||||||
line-height: 1.15; // 2
|
|
||||||
-ms-text-size-adjust: 100%; // 3
|
|
||||||
-webkit-text-size-adjust: 100%; // 3
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sections
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the margin in all browsers (opinionated).
|
|
||||||
//
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 9-.
|
|
||||||
//
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
nav,
|
|
||||||
section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
// `article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Grouping content
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 9-.
|
|
||||||
// 1. Add the correct display in IE.
|
|
||||||
//
|
|
||||||
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
main { // 1
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct margin in IE 8.
|
|
||||||
//
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 1em 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Add the correct box sizing in Firefox.
|
|
||||||
// 2. Show the overflow in Edge and IE.
|
|
||||||
//
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; // 1
|
|
||||||
height: 0; // 1
|
|
||||||
overflow: visible; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
// 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace; // 1
|
|
||||||
font-size: 1em; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text-level semantics
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Remove the gray background on active links in IE 10.
|
|
||||||
// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
|
||||||
//
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent; // 1
|
|
||||||
-webkit-text-decoration-skip: objects; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the outline on focused links when they are also active or hovered
|
|
||||||
// in all browsers (opinionated).
|
|
||||||
//
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Remove the bottom border in Firefox 39-.
|
|
||||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none; // 1
|
|
||||||
text-decoration: underline; // 2
|
|
||||||
text-decoration: underline dotted; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
|
||||||
//
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
// 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; // 1
|
|
||||||
font-size: 1em; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct font style in Android 4.3-.
|
|
||||||
//
|
|
||||||
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct background and color in IE 9-.
|
|
||||||
//
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background-color: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct font size in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
// all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Embedded content
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 9-.
|
|
||||||
//
|
|
||||||
|
|
||||||
audio,
|
|
||||||
video {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in iOS 4-7.
|
|
||||||
//
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the border on images inside links in IE 10-.
|
|
||||||
//
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Hide the overflow in IE.
|
|
||||||
//
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Change the font styles in all browsers (opinionated).
|
|
||||||
// 2. Remove the margin in Firefox and Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: sans-serif; // 1
|
|
||||||
font-size: 100%; // 1
|
|
||||||
line-height: 1.15; // 1
|
|
||||||
margin: 0; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Show the overflow in IE.
|
|
||||||
// 1. Show the overflow in Edge.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
input { // 1
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
// 1. Remove the inheritance of text transform in Firefox.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
select { // 1
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
|
||||||
// controls in Android 4.
|
|
||||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
html [type="button"], // 1
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the inner border and padding in Firefox.
|
|
||||||
//
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Restore the focus styles unset by the previous rule.
|
|
||||||
//
|
|
||||||
|
|
||||||
button:-moz-focusring,
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Change the border, margin, and padding in all browsers (opinionated).
|
|
||||||
//
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct the text wrapping in Edge and IE.
|
|
||||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
// 3. Remove the padding so developers are not caught out when they zero out
|
|
||||||
// `fieldset` elements in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box; // 1
|
|
||||||
color: inherit; // 2
|
|
||||||
display: table; // 1
|
|
||||||
max-width: 100%; // 1
|
|
||||||
padding: 0; // 3
|
|
||||||
white-space: normal; // 1
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Add the correct display in IE 9-.
|
|
||||||
// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
//
|
|
||||||
|
|
||||||
progress {
|
|
||||||
display: inline-block; // 1
|
|
||||||
vertical-align: baseline; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the default vertical scrollbar in IE.
|
|
||||||
//
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Add the correct box sizing in IE 10-.
|
|
||||||
// 2. Remove the padding in IE 10-.
|
|
||||||
//
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box; // 1
|
|
||||||
padding: 0; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
// 2. Correct the outline style in Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield; // 1
|
|
||||||
outline-offset: -2px; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
|
||||||
//
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-cancel-button,
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
// 2. Change font properties to `inherit` in Safari.
|
|
||||||
//
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; // 1
|
|
||||||
font: inherit; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
// Interactive
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 9-.
|
|
||||||
// 1. Add the correct display in Edge, IE, and Firefox.
|
|
||||||
//
|
|
||||||
|
|
||||||
details, // 1
|
|
||||||
menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scripting
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 9-.
|
|
||||||
//
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE.
|
|
||||||
//
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hidden
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Add the correct display in IE 10-.
|
|
||||||
//
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -23,15 +23,14 @@
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: $pagination-active-color;
|
color: $pagination-active-color;
|
||||||
background-color: $pagination-active-bg;
|
background-color: $pagination-active-bg;
|
||||||
border-color: $pagination-active-border;
|
border-color: $pagination-active-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled .page-link {
|
&.disabled .page-link {
|
||||||
color: $pagination-disabled-color;
|
color: $pagination-disabled-color;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback.
|
|
||||||
background-color: $pagination-disabled-bg;
|
background-color: $pagination-disabled-bg;
|
||||||
border-color: $pagination-disabled-border;
|
border-color: $pagination-disabled-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -49,7 +48,7 @@
|
||||||
color: $pagination-hover-color;
|
color: $pagination-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $pagination-hover-bg;
|
background-color: $pagination-hover-bg;
|
||||||
border-color: $pagination-hover-border;
|
border-color: $pagination-hover-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,79 +18,110 @@
|
||||||
@include border-radius($border-radius-lg);
|
@include border-radius($border-radius-lg);
|
||||||
@include box-shadow($popover-box-shadow);
|
@include box-shadow($popover-box-shadow);
|
||||||
|
|
||||||
|
// Arrows
|
||||||
|
//
|
||||||
|
// .arrow is outer, .arrow::after is inner
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: $popover-arrow-width;
|
||||||
|
height: $popover-arrow-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
content: "";
|
||||||
|
border-width: $popover-arrow-outer-width;
|
||||||
|
}
|
||||||
|
.arrow::after {
|
||||||
|
content: "";
|
||||||
|
border-width: $popover-arrow-outer-width;
|
||||||
|
}
|
||||||
|
|
||||||
// Popover directions
|
// Popover directions
|
||||||
|
|
||||||
&.popover-top,
|
&.bs-popover-top {
|
||||||
&.bs-tether-element-attached-bottom {
|
margin-bottom: $popover-arrow-width;
|
||||||
margin-top: -$popover-arrow-width;
|
|
||||||
|
|
||||||
&::before,
|
.arrow {
|
||||||
&::after {
|
bottom: 0;
|
||||||
left: 50%;
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
border-bottom-width: 0;
|
border-bottom-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
.arrow::before {
|
||||||
bottom: -$popover-arrow-outer-width;
|
bottom: -$popover-arrow-outer-width;
|
||||||
margin-left: -$popover-arrow-outer-width;
|
margin-left: -($popover-arrow-outer-width - 5);
|
||||||
border-top-color: $popover-arrow-outer-color;
|
border-top-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.arrow::after {
|
||||||
bottom: -($popover-arrow-outer-width - 1);
|
bottom: -($popover-arrow-outer-width - 1);
|
||||||
margin-left: -$popover-arrow-width;
|
margin-left: -($popover-arrow-outer-width - 5);
|
||||||
border-top-color: $popover-arrow-color;
|
border-top-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.popover-right,
|
&.bs-popover-right {
|
||||||
&.bs-tether-element-attached-left {
|
|
||||||
margin-left: $popover-arrow-width;
|
margin-left: $popover-arrow-width;
|
||||||
|
|
||||||
&::before,
|
.arrow {
|
||||||
&::after {
|
left: 0;
|
||||||
top: 50%;
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
margin-top: -($popover-arrow-outer-width - 3);
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
.arrow::before {
|
||||||
left: -$popover-arrow-outer-width;
|
left: -$popover-arrow-outer-width;
|
||||||
margin-top: -$popover-arrow-outer-width;
|
|
||||||
border-right-color: $popover-arrow-outer-color;
|
border-right-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.arrow::after {
|
||||||
left: -($popover-arrow-outer-width - 1);
|
left: -($popover-arrow-outer-width - 1);
|
||||||
margin-top: -($popover-arrow-outer-width - 1);
|
|
||||||
border-right-color: $popover-arrow-color;
|
border-right-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.popover-bottom,
|
&.bs-popover-bottom {
|
||||||
&.bs-tether-element-attached-top {
|
|
||||||
margin-top: $popover-arrow-width;
|
margin-top: $popover-arrow-width;
|
||||||
|
|
||||||
&::before,
|
.arrow {
|
||||||
&::after {
|
top: 0;
|
||||||
left: 50%;
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
margin-left: -($popover-arrow-width - 3);
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
.arrow::before {
|
||||||
top: -$popover-arrow-outer-width;
|
top: -$popover-arrow-outer-width;
|
||||||
margin-left: -$popover-arrow-outer-width;
|
|
||||||
border-bottom-color: $popover-arrow-outer-color;
|
border-bottom-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.arrow::after {
|
||||||
top: -($popover-arrow-outer-width - 1);
|
top: -($popover-arrow-outer-width - 1);
|
||||||
margin-left: -$popover-arrow-width;
|
border-bottom-color: $popover-arrow-color;
|
||||||
border-bottom-color: $popover-title-bg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// This will remove the popover-title's border just below the arrow
|
// This will remove the popover-header's border just below the arrow
|
||||||
.popover-title::before {
|
.popover-header::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
@ -98,42 +129,58 @@
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 1px solid $popover-title-bg;
|
border-bottom: 1px solid $popover-header-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.popover-left,
|
&.bs-popover-left {
|
||||||
&.bs-tether-element-attached-right {
|
margin-right: $popover-arrow-width;
|
||||||
margin-left: -$popover-arrow-width;
|
|
||||||
|
|
||||||
&::before,
|
.arrow {
|
||||||
&::after {
|
right: 0;
|
||||||
top: 50%;
|
}
|
||||||
|
|
||||||
|
.arrow::before,
|
||||||
|
.arrow::after {
|
||||||
|
margin-top: -($popover-arrow-outer-width - 3);
|
||||||
border-right-width: 0;
|
border-right-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
.arrow::before {
|
||||||
right: -$popover-arrow-outer-width;
|
right: -$popover-arrow-outer-width;
|
||||||
margin-top: -$popover-arrow-outer-width;
|
|
||||||
border-left-color: $popover-arrow-outer-color;
|
border-left-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.arrow::after {
|
||||||
right: -($popover-arrow-outer-width - 1);
|
right: -($popover-arrow-outer-width - 1);
|
||||||
margin-top: -($popover-arrow-outer-width - 1);
|
|
||||||
border-left-color: $popover-arrow-color;
|
border-left-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.bs-popover-auto {
|
||||||
|
&[x-placement^="top"] {
|
||||||
|
@extend .bs-popover-top;
|
||||||
|
}
|
||||||
|
&[x-placement^="right"] {
|
||||||
|
@extend .bs-popover-right;
|
||||||
|
}
|
||||||
|
&[x-placement^="bottom"] {
|
||||||
|
@extend .bs-popover-bottom;
|
||||||
|
}
|
||||||
|
&[x-placement^="left"] {
|
||||||
|
@extend .bs-popover-left;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Offset the popover to account for the popover arrow
|
// Offset the popover to account for the popover arrow
|
||||||
.popover-title {
|
.popover-header {
|
||||||
padding: $popover-title-padding-y $popover-title-padding-x;
|
padding: $popover-header-padding-y $popover-header-padding-x;
|
||||||
margin-bottom: 0; // Reset the default from Reboot
|
margin-bottom: 0; // Reset the default from Reboot
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
background-color: $popover-title-bg;
|
color: $popover-header-color;
|
||||||
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
|
background-color: $popover-header-bg;
|
||||||
|
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
|
||||||
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
||||||
@include border-top-radius($offset-border-width);
|
@include border-top-radius($offset-border-width);
|
||||||
|
|
||||||
|
|
@ -142,30 +189,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-content {
|
.popover-body {
|
||||||
padding: $popover-content-padding-y $popover-content-padding-x;
|
padding: $popover-body-padding-y $popover-body-padding-x;
|
||||||
}
|
color: $popover-body-color;
|
||||||
|
|
||||||
|
|
||||||
// Arrows
|
|
||||||
//
|
|
||||||
// .popover-arrow is outer, .popover-arrow::after is inner
|
|
||||||
|
|
||||||
.popover::before,
|
|
||||||
.popover::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover::before {
|
|
||||||
content: "";
|
|
||||||
border-width: $popover-arrow-outer-width;
|
|
||||||
}
|
|
||||||
.popover::after {
|
|
||||||
content: "";
|
|
||||||
border-width: $popover-arrow-width;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,15 +12,7 @@
|
||||||
@media print {
|
@media print {
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after,
|
*::after {
|
||||||
p::first-letter,
|
|
||||||
div::first-letter,
|
|
||||||
blockquote::first-letter,
|
|
||||||
li::first-letter,
|
|
||||||
p::first-line,
|
|
||||||
div::first-line,
|
|
||||||
blockquote::first-line,
|
|
||||||
li::first-line {
|
|
||||||
// Bootstrap specific; comment out `color` and `background`
|
// Bootstrap specific; comment out `color` and `background`
|
||||||
//color: #000 !important; // Black prints faster:
|
//color: #000 !important; // Black prints faster:
|
||||||
// http://www.sanbeiji.com/archives/953
|
// http://www.sanbeiji.com/archives/953
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,30 @@
|
||||||
// Progress animations
|
|
||||||
@keyframes progress-bar-stripes {
|
@keyframes progress-bar-stripes {
|
||||||
from { background-position: $progress-height 0; }
|
from { background-position: $progress-height 0; }
|
||||||
to { background-position: 0 0; }
|
to { background-position: 0 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Basic progress bar
|
|
||||||
.progress {
|
.progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: $progress-height;
|
||||||
overflow: hidden; // force rounded corners by cropping it
|
overflow: hidden; // force rounded corners by cropping it
|
||||||
font-size: $progress-font-size;
|
font-size: $progress-font-size;
|
||||||
line-height: $progress-height;
|
|
||||||
text-align: center;
|
|
||||||
background-color: $progress-bg;
|
background-color: $progress-bg;
|
||||||
@include border-radius($progress-border-radius);
|
@include border-radius($progress-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
height: $progress-height;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
color: $progress-bar-color;
|
color: $progress-bar-color;
|
||||||
background-color: $progress-bar-bg;
|
background-color: $progress-bar-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Striped
|
|
||||||
.progress-bar-striped {
|
.progress-bar-striped {
|
||||||
@include gradient-striped();
|
@include gradient-striped();
|
||||||
background-size: $progress-height $progress-height;
|
background-size: $progress-height $progress-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Animated
|
|
||||||
.progress-bar-animated {
|
.progress-bar-animated {
|
||||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,64 @@
|
||||||
// scss-lint:disable QualifyingElement, DuplicateProperty
|
// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
|
||||||
|
|
||||||
// Reboot
|
// Reboot
|
||||||
//
|
//
|
||||||
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||||
// Adds additional rules on top of Normalize.css, including several overrides.
|
// styles targeting irrelevant browsers while applying new styles.
|
||||||
|
//
|
||||||
|
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||||
|
|
||||||
|
|
||||||
// Reset the box-sizing
|
// Document
|
||||||
//
|
//
|
||||||
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||||
// `padding` or `border`s to an element, the overall declared `width` does not
|
// 2. Change the default font family in all browsers.
|
||||||
// change. For example, `width: 100px;` will always be `100px` despite the
|
// 3. Correct the line height in all browsers.
|
||||||
// `border: 10px solid red;` and `padding: 20px;`.
|
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
||||||
//
|
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
|
||||||
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
|
||||||
// recommendations on resolving such conflicts, see
|
// 6. Change the default tap highlight to be completely transparent in iOS.
|
||||||
// https://getbootstrap.com/getting-started/#third-box-sizing.
|
|
||||||
//
|
|
||||||
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
|
||||||
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: inherit;
|
box-sizing: border-box; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; // 2
|
||||||
|
line-height: 1.15; // 3
|
||||||
|
-webkit-text-size-adjust: 100%; // 4
|
||||||
|
-ms-text-size-adjust: 100%; // 4
|
||||||
|
-ms-overflow-style: scrollbar; // 5
|
||||||
|
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
||||||
|
}
|
||||||
|
|
||||||
// Make viewport responsive
|
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||||
//
|
|
||||||
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
|
|
||||||
// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
|
|
||||||
// Eventually @viewport will replace <meta name="viewport">.
|
|
||||||
//
|
|
||||||
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
|
||||||
// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
|
|
||||||
// and the fix for that involves a snippet of JavaScript to sniff the user agent
|
|
||||||
// and apply some conditional CSS.
|
|
||||||
//
|
|
||||||
// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
|
||||||
//
|
|
||||||
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
|
|
||||||
// `.class-name { @import "bootstrap"; }`).
|
|
||||||
@at-root {
|
@at-root {
|
||||||
@-ms-viewport { width: device-width; }
|
@-ms-viewport { width: device-width; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
||||||
//
|
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||||
// Reset HTML, body, and more
|
display: block;
|
||||||
//
|
|
||||||
|
|
||||||
html {
|
|
||||||
// We assume no initial pixel `font-size` for accessibility reasons. This
|
|
||||||
// allows web visitors to customize their browser default font-size, making
|
|
||||||
// your project more inclusive and accessible to everyone.
|
|
||||||
|
|
||||||
// As a side-effect of setting the @viewport above,
|
|
||||||
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
|
|
||||||
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
|
|
||||||
// thus making it hard to click on stuff near the right edge of the page.
|
|
||||||
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/18543
|
|
||||||
// and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
|
|
||||||
-ms-overflow-style: scrollbar;
|
|
||||||
|
|
||||||
// Changes the default tap highlight to be completely transparent in iOS.
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Body
|
||||||
|
//
|
||||||
|
// 1. Remove the margin in all browsers.
|
||||||
|
// 2. As a best practice, apply a default `background-color`.
|
||||||
|
// 3. Set an explicit initial text-align value so that we can later use the
|
||||||
|
// the `inherit` value on things like `<th>` elements.
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0; // 1
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
font-weight: $font-weight-base;
|
font-weight: $font-weight-base;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
// Go easy on the eyes and use something other than `#000` for text
|
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
text-align: left; // 3
|
||||||
background-color: $body-bg;
|
background-color: $body-bg; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||||
|
|
@ -93,6 +71,18 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Content grouping
|
||||||
|
//
|
||||||
|
// 1. Add the correct box sizing in Firefox.
|
||||||
|
// 2. Show the overflow in Edge and IE.
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; // 1
|
||||||
|
height: 0; // 1
|
||||||
|
overflow: visible; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Typography
|
// Typography
|
||||||
//
|
//
|
||||||
|
|
@ -112,14 +102,22 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
// bottom margin to use `rem` units instead of `em`.
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
p {
|
p {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: $paragraph-margin-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
|
//
|
||||||
|
// 1. Remove the bottom border in Firefox 39-.
|
||||||
|
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
// 3. Add explicit cursor to indicate changed behavior.
|
||||||
|
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
|
||||||
|
|
||||||
abbr[title],
|
abbr[title],
|
||||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
abbr[data-original-title] { // 4
|
||||||
abbr[data-original-title] {
|
text-decoration: underline; // 2
|
||||||
cursor: help;
|
text-decoration: underline dotted; // 2
|
||||||
|
cursor: help; // 3
|
||||||
|
border-bottom: 0; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
address {
|
address {
|
||||||
|
|
@ -155,6 +153,35 @@ blockquote {
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic; // Add the correct font style in Android 4.3-
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%; // Add the correct font size in all browsers
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
// all browsers.
|
||||||
|
//
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub { bottom: -.25em; }
|
||||||
|
sup { top: -.5em; }
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Links
|
// Links
|
||||||
|
|
@ -163,8 +190,10 @@ blockquote {
|
||||||
a {
|
a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
text-decoration: $link-decoration;
|
text-decoration: $link-decoration;
|
||||||
|
background-color: transparent; // Remove the gray background on active links in IE 10.
|
||||||
|
-webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover {
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
}
|
}
|
||||||
|
|
@ -195,12 +224,20 @@ a:not([href]):not([tabindex]) {
|
||||||
// Code
|
// Code
|
||||||
//
|
//
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
// Remove browser default top margin
|
// Remove browser default top margin
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
// Reset browser default of `1em` to use `rem`s
|
// Reset browser default of `1em` to use `rem`s
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
|
// Don't allow content to break outside
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -210,33 +247,22 @@ pre {
|
||||||
//
|
//
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
// Apply a consistent margin strategy (matches our type styles).
|
||||||
// We reset that to create a better flow in-page.
|
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Images
|
// Images and content
|
||||||
//
|
//
|
||||||
|
|
||||||
img {
|
img {
|
||||||
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
|
||||||
// centers them. This won't apply should you reset them to `block` level.
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
// Note: `<img>`s are deliberately not made responsive by default.
|
border-style: none; // Remove the border on images inside links in IE 10-.
|
||||||
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
// iOS "clickable elements" fix for role="button"
|
overflow: hidden; // Hide the overflow in IE
|
||||||
//
|
|
||||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
|
||||||
// for traditionally non-focusable elements with role="button"
|
|
||||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
|
||||||
|
|
||||||
[role="button"] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -268,10 +294,7 @@ textarea {
|
||||||
//
|
//
|
||||||
|
|
||||||
table {
|
table {
|
||||||
// No longer part of Normalize since v4
|
border-collapse: collapse; // Prevent double borders
|
||||||
border-collapse: collapse;
|
|
||||||
// Reset for nesting within parents with `background-color`.
|
|
||||||
background-color: $table-bg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
|
|
@ -283,8 +306,9 @@ caption {
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
// Centered by default, but left-align-ed to match the `td`s below.
|
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
||||||
text-align: left;
|
// closest parent with a set `text-align`.
|
||||||
|
text-align: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -310,20 +334,47 @@ button:focus {
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
select,
|
select,
|
||||||
|
optgroup,
|
||||||
textarea {
|
textarea {
|
||||||
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
margin: 0; // Remove the margin in Firefox and Safari
|
||||||
// properly inherited. However, `line-height` isn't inherited there.
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
overflow: visible; // Show the overflow in Edge
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none; // Remove the inheritance of text transform in Firefox
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
|
// controls in Android 4.
|
||||||
|
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
button,
|
||||||
|
html [type="button"], // 1
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
// Apply a disabled cursor for radios and checkboxes.
|
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
|
||||||
//
|
padding: 0; // 2. Remove the padding in IE 10-
|
||||||
// Note: Neither radios nor checkboxes can be readonly.
|
|
||||||
&:disabled {
|
|
||||||
cursor: $cursor-disabled;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -340,6 +391,7 @@ input[type="month"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
@ -357,33 +409,76 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 1. Correct the text wrapping in Edge and IE.
|
||||||
|
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
legend {
|
legend {
|
||||||
// Reset the entire legend element to match the `fieldset`
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 100%; // 1
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
color: inherit; // 2
|
||||||
|
white-space: normal; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="search"] {
|
progress {
|
||||||
|
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
}
|
||||||
|
|
||||||
|
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||||
// `.form-control` class can properly style them. Note that this cannot simply
|
// `.form-control` class can properly style them. Note that this cannot simply
|
||||||
// be added to `.form-control` as it's not specific enough. For details, see
|
// be added to `.form-control` as it's not specific enough. For details, see
|
||||||
// https://github.com/twbs/bootstrap/issues/11586.
|
// https://github.com/twbs/bootstrap/issues/11586.
|
||||||
|
outline-offset: -2px; // 2. Correct the outline style in Safari.
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// todo: needed?
|
//
|
||||||
|
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||||
|
//
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
// 2. Change font properties to `inherit` in Safari.
|
||||||
|
//
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit; // 2
|
||||||
|
-webkit-appearance: button; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Correct element displays
|
||||||
|
//
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// font-size: $font-size-base;
|
}
|
||||||
// line-height: $line-height;
|
|
||||||
// color: $input-color;
|
summary {
|
||||||
|
display: list-item; // Add the correct display in all browsers
|
||||||
|
}
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none; // Add the correct display in IE
|
||||||
}
|
}
|
||||||
|
|
||||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||||
|
// Needed for proper display in IE 10-.
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
|
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
|
|
@ -36,7 +37,7 @@
|
||||||
.table-sm {
|
.table-sm {
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: $table-sm-cell-padding;
|
padding: $table-cell-padding-sm;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -68,7 +69,7 @@
|
||||||
|
|
||||||
.table-striped {
|
.table-striped {
|
||||||
tbody tr:nth-of-type(odd) {
|
tbody tr:nth-of-type(odd) {
|
||||||
background-color: $table-bg-accent;
|
background-color: $table-accent-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,7 +81,7 @@
|
||||||
.table-hover {
|
.table-hover {
|
||||||
tbody tr {
|
tbody tr {
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $table-bg-hover;
|
background-color: $table-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -91,12 +92,11 @@
|
||||||
// Exact selectors below required to override `.table-striped` and prevent
|
// Exact selectors below required to override `.table-striped` and prevent
|
||||||
// inheritance to nested tables.
|
// inheritance to nested tables.
|
||||||
|
|
||||||
// Generate the contextual variants
|
@each $color, $value in $theme-colors {
|
||||||
@include table-row-variant(active, $table-bg-active);
|
@include table-row-variant($color, theme-color-level($color, -9));
|
||||||
@include table-row-variant(success, $state-success-bg);
|
}
|
||||||
@include table-row-variant(info, $state-info-bg);
|
|
||||||
@include table-row-variant(warning, $state-warning-bg);
|
@include table-row-variant(active, $table-active-bg);
|
||||||
@include table-row-variant(danger, $state-danger-bg);
|
|
||||||
|
|
||||||
|
|
||||||
// Inverse styles
|
// Inverse styles
|
||||||
|
|
@ -124,14 +124,27 @@
|
||||||
th,
|
th,
|
||||||
td,
|
td,
|
||||||
thead th {
|
thead th {
|
||||||
border-color: $body-bg;
|
border-color: $table-inverse-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.table-bordered {
|
&.table-bordered {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
&.table-striped {
|
||||||
|
tbody tr:nth-of-type(odd) {
|
||||||
|
background-color: $table-inverse-accent-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-hover {
|
||||||
|
tbody tr {
|
||||||
|
@include hover {
|
||||||
|
background-color: $table-inverse-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Responsive tables
|
// Responsive tables
|
||||||
|
|
@ -141,13 +154,15 @@
|
||||||
// will display normally.
|
// will display normally.
|
||||||
|
|
||||||
.table-responsive {
|
.table-responsive {
|
||||||
display: block;
|
@include media-breakpoint-down(md) {
|
||||||
width: 100%;
|
display: block;
|
||||||
overflow-x: auto;
|
width: 100%;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
overflow-x: auto;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
||||||
|
|
||||||
// Prevent double border on horizontal scroll due to use of `display: block;`
|
// Prevent double border on horizontal scroll due to use of `display: block;`
|
||||||
&.table-bordered {
|
&.table-bordered {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: $zindex-tooltip;
|
z-index: $zindex-tooltip;
|
||||||
display: block;
|
display: block;
|
||||||
|
margin: $tooltip-margin;
|
||||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||||
// So reset our font and text properties to avoid inheriting weird values.
|
// So reset our font and text properties to avoid inheriting weird values.
|
||||||
@include reset-text();
|
@include reset-text();
|
||||||
|
|
@ -13,62 +14,86 @@
|
||||||
|
|
||||||
&.show { opacity: $tooltip-opacity; }
|
&.show { opacity: $tooltip-opacity; }
|
||||||
|
|
||||||
&.tooltip-top,
|
.arrow {
|
||||||
&.bs-tether-element-attached-bottom {
|
position: absolute;
|
||||||
padding: $tooltip-arrow-width 0;
|
display: block;
|
||||||
margin-top: -$tooltip-margin;
|
width: $tooltip-arrow-width;
|
||||||
|
height: $tooltip-arrow-height;
|
||||||
|
}
|
||||||
|
|
||||||
.tooltip-inner::before {
|
&.bs-tooltip-top {
|
||||||
|
padding: $tooltip-arrow-width 0;
|
||||||
|
.arrow {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
}
|
||||||
margin-left: -$tooltip-arrow-width;
|
|
||||||
|
.arrow::before {
|
||||||
|
margin-left: -($tooltip-arrow-width - 2);
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||||
border-top-color: $tooltip-arrow-color;
|
border-top-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.tooltip-right,
|
&.bs-tooltip-right {
|
||||||
&.bs-tether-element-attached-left {
|
|
||||||
padding: 0 $tooltip-arrow-width;
|
padding: 0 $tooltip-arrow-width;
|
||||||
margin-left: $tooltip-margin;
|
.arrow {
|
||||||
|
|
||||||
.tooltip-inner::before {
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: -$tooltip-arrow-width;
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
margin-top: -($tooltip-arrow-width - 2);
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||||
border-right-color: $tooltip-arrow-color;
|
border-right-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.tooltip-bottom,
|
&.bs-tooltip-bottom {
|
||||||
&.bs-tether-element-attached-top {
|
|
||||||
padding: $tooltip-arrow-width 0;
|
padding: $tooltip-arrow-width 0;
|
||||||
margin-top: $tooltip-margin;
|
.arrow {
|
||||||
|
|
||||||
.tooltip-inner::before {
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
}
|
||||||
margin-left: -$tooltip-arrow-width;
|
|
||||||
|
.arrow::before {
|
||||||
|
margin-left: -($tooltip-arrow-width - 2);
|
||||||
content: "";
|
content: "";
|
||||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||||
border-bottom-color: $tooltip-arrow-color;
|
border-bottom-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.tooltip-left,
|
&.bs-tooltip-left {
|
||||||
&.bs-tether-element-attached-right {
|
|
||||||
padding: 0 $tooltip-arrow-width;
|
padding: 0 $tooltip-arrow-width;
|
||||||
margin-left: -$tooltip-margin;
|
.arrow {
|
||||||
|
|
||||||
.tooltip-inner::before {
|
|
||||||
top: 50%;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: -$tooltip-arrow-width;
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
right: 0;
|
||||||
|
margin-top: -($tooltip-arrow-width - 2);
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||||
border-left-color: $tooltip-arrow-color;
|
border-left-color: $tooltip-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.bs-tooltip-auto {
|
||||||
|
&[x-placement^="top"] {
|
||||||
|
@extend .bs-tooltip-top;
|
||||||
|
}
|
||||||
|
&[x-placement^="right"] {
|
||||||
|
@extend .bs-tooltip-right;
|
||||||
|
}
|
||||||
|
&[x-placement^="bottom"] {
|
||||||
|
@extend .bs-tooltip-bottom;
|
||||||
|
}
|
||||||
|
&[x-placement^="left"] {
|
||||||
|
@extend .bs-tooltip-left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
position: absolute;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wrapper for the tooltip content
|
// Wrapper for the tooltip content
|
||||||
|
|
@ -79,12 +104,4 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $tooltip-bg;
|
background-color: $tooltip-bg;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6,
|
||||||
color: $headings-color;
|
color: $headings-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, .h1 { font-size: $font-size-h1; }
|
h1, .h1 { font-size: $h1-font-size; }
|
||||||
h2, .h2 { font-size: $font-size-h2; }
|
h2, .h2 { font-size: $h2-font-size; }
|
||||||
h3, .h3 { font-size: $font-size-h3; }
|
h3, .h3 { font-size: $h3-font-size; }
|
||||||
h4, .h4 { font-size: $font-size-h4; }
|
h4, .h4 { font-size: $h4-font-size; }
|
||||||
h5, .h5 { font-size: $font-size-h5; }
|
h5, .h5 { font-size: $h5-font-size; }
|
||||||
h6, .h6 { font-size: $font-size-h6; }
|
h6, .h6 { font-size: $h6-font-size; }
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: $lead-font-size;
|
font-size: $lead-font-size;
|
||||||
|
|
@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
|
||||||
//
|
//
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-top: $spacer-y;
|
margin-top: 1rem;
|
||||||
margin-bottom: $spacer-y;
|
margin-bottom: 1rem;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: $hr-border-width solid $hr-border-color;
|
border-top: $hr-border-width solid $hr-border-color;
|
||||||
}
|
}
|
||||||
|
|
@ -108,10 +108,8 @@ mark,
|
||||||
|
|
||||||
// Blockquotes
|
// Blockquotes
|
||||||
.blockquote {
|
.blockquote {
|
||||||
padding: ($spacer / 2) $spacer;
|
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
font-size: $blockquote-font-size;
|
font-size: $blockquote-font-size;
|
||||||
border-left: $blockquote-border-width solid $blockquote-border-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blockquote-footer {
|
.blockquote-footer {
|
||||||
|
|
@ -123,21 +121,3 @@ mark,
|
||||||
content: "\2014 \00A0"; // em dash, nbsp
|
content: "\2014 \00A0"; // em dash, nbsp
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Opposite alignment of blockquote
|
|
||||||
.blockquote-reverse {
|
|
||||||
padding-right: $spacer;
|
|
||||||
padding-left: 0;
|
|
||||||
text-align: right;
|
|
||||||
border-right: $blockquote-border-width solid $blockquote-border-color;
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blockquote-reverse .blockquote-footer {
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: "\00A0 \2014"; // nbsp, em dash
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
@import "utilities/borders";
|
@import "utilities/borders";
|
||||||
@import "utilities/clearfix";
|
@import "utilities/clearfix";
|
||||||
@import "utilities/display";
|
@import "utilities/display";
|
||||||
|
@import "utilities/embed";
|
||||||
@import "utilities/flex";
|
@import "utilities/flex";
|
||||||
@import "utilities/float";
|
@import "utilities/float";
|
||||||
@import "utilities/position";
|
@import "utilities/position";
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -22,22 +22,16 @@ html {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import "functions";
|
||||||
//
|
|
||||||
// Variables
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
//
|
//
|
||||||
// Grid mixins
|
// Grid mixins
|
||||||
//
|
//
|
||||||
|
|
||||||
@import "mixins/clearfix";
|
|
||||||
@import "mixins/breakpoints";
|
@import "mixins/breakpoints";
|
||||||
@import "mixins/grid-framework";
|
@import "mixins/grid-framework";
|
||||||
@import "mixins/grid";
|
@import "mixins/grid";
|
||||||
|
|
||||||
@import "custom";
|
|
||||||
|
|
||||||
@import "grid";
|
@import "grid";
|
||||||
|
@import "utilities/flex";
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,8 @@
|
||||||
//
|
//
|
||||||
// Includes only Normalize and our custom Reboot reset.
|
// Includes only Normalize and our custom Reboot reset.
|
||||||
|
|
||||||
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "custom";
|
|
||||||
|
|
||||||
@import "normalize";
|
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,14 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
|
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
|
||||||
* Copyright 2011-2017 The Bootstrap Authors
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
* Copyright 2011-2017 Twitter, Inc.
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Core variables and mixins
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
@import "custom";
|
|
||||||
|
|
||||||
// Reset and dependencies
|
|
||||||
@import "normalize";
|
|
||||||
@import "print";
|
@import "print";
|
||||||
|
|
||||||
// Core CSS
|
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
@import "type";
|
@import "type";
|
||||||
@import "images";
|
@import "images";
|
||||||
|
|
@ -23,8 +17,6 @@
|
||||||
@import "tables";
|
@import "tables";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "transitions";
|
@import "transitions";
|
||||||
@import "dropdown";
|
@import "dropdown";
|
||||||
@import "button-group";
|
@import "button-group";
|
||||||
|
|
@ -41,14 +33,9 @@
|
||||||
@import "progress";
|
@import "progress";
|
||||||
@import "media";
|
@import "media";
|
||||||
@import "list-group";
|
@import "list-group";
|
||||||
@import "responsive-embed";
|
|
||||||
@import "close";
|
@import "close";
|
||||||
|
|
||||||
// Components w/ JavaScript
|
|
||||||
@import "modal";
|
@import "modal";
|
||||||
@import "tooltip";
|
@import "tooltip";
|
||||||
@import "popover";
|
@import "popover";
|
||||||
@import "carousel";
|
@import "carousel";
|
||||||
|
|
||||||
// Utility classes
|
|
||||||
@import "utilities";
|
@import "utilities";
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
// Alerts
|
@mixin alert-variant($background, $border, $color) {
|
||||||
|
color: $color;
|
||||||
@mixin alert-variant($background, $border, $body-color) {
|
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
color: $body-color;
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-top-color: darken($border, 5%);
|
border-top-color: darken($border, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-link {
|
.alert-link {
|
||||||
color: darken($body-color, 10%);
|
color: darken($color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
// Badges
|
@mixin badge-variant($bg) {
|
||||||
|
@include color-yiq($bg);
|
||||||
@mixin badge-variant($color) {
|
background-color: $bg;
|
||||||
background-color: $color;
|
|
||||||
|
|
||||||
&[href] {
|
&[href] {
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
background-color: darken($color, 10%);
|
@include color-yiq($bg);
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: darken($bg, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,15 +8,15 @@
|
||||||
|
|
||||||
@mixin border-top-radius($radius) {
|
@mixin border-top-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: $radius;
|
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: $radius;
|
||||||
|
border-top-right-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-right-radius($radius) {
|
@mixin border-right-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: $radius;
|
|
||||||
border-top-right-radius: $radius;
|
border-top-right-radius: $radius;
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
@mixin border-left-radius($radius) {
|
@mixin border-left-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-left-radius: $radius;
|
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: $radius;
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
@mixin box-shadow($shadow...) {
|
||||||
|
@if $enable-shadows {
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
//
|
//
|
||||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||||
//
|
//
|
||||||
// (xs: 0, sm: 576px, md: 768px)
|
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||||
//
|
//
|
||||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||||
|
|
||||||
|
|
@ -10,9 +10,9 @@
|
||||||
//
|
//
|
||||||
// >> breakpoint-next(sm)
|
// >> breakpoint-next(sm)
|
||||||
// md
|
// md
|
||||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
|
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// md
|
// md
|
||||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||||
// md
|
// md
|
||||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||||
$n: index($breakpoint-names, $name);
|
$n: index($breakpoint-names, $name);
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||||
//
|
//
|
||||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
|
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// 576px
|
// 576px
|
||||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||||
$min: map-get($breakpoints, $name);
|
$min: map-get($breakpoints, $name);
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||||
//
|
//
|
||||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
|
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// 767px
|
// 767px
|
||||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||||
$next: breakpoint-next($name, $breakpoints);
|
$next: breakpoint-next($name, $breakpoints);
|
||||||
|
|
@ -41,9 +41,9 @@
|
||||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||||
// Useful for making responsive utilities.
|
// Useful for making responsive utilities.
|
||||||
//
|
//
|
||||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
|
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// "" (Returns a blank string)
|
// "" (Returns a blank string)
|
||||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
|
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// "-sm"
|
// "-sm"
|
||||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||||
|
|
@ -78,10 +78,11 @@
|
||||||
// Media that spans multiple breakpoint widths.
|
// Media that spans multiple breakpoint widths.
|
||||||
// Makes the @content apply between the min and max breakpoints
|
// Makes the @content apply between the min and max breakpoints
|
||||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||||
@include media-breakpoint-up($lower, $breakpoints) {
|
$min: breakpoint-min($lower, $breakpoints);
|
||||||
@include media-breakpoint-down($upper, $breakpoints) {
|
$max: breakpoint-max($upper, $breakpoints);
|
||||||
@content;
|
|
||||||
}
|
@media (min-width: $min) and (max-width: $max) {
|
||||||
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -89,7 +90,16 @@
|
||||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||||
@include media-breakpoint-between($name, $name, $breakpoints) {
|
$min: breakpoint-min($name, $breakpoints);
|
||||||
@content;
|
$max: breakpoint-max($name, $breakpoints);
|
||||||
|
|
||||||
|
@if $min != null and $max != null {
|
||||||
|
@media (min-width: $min) and (max-width: $max) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else if $max == null {
|
||||||
|
@include media-breakpoint-up($name)
|
||||||
|
} @else if $min == null {
|
||||||
|
@include media-breakpoint-down($name)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,28 +3,25 @@
|
||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
// and disabled options for all buttons
|
// and disabled options for all buttons
|
||||||
|
|
||||||
@mixin button-variant($color, $background, $border) {
|
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
|
||||||
$active-background: darken($background, 10%);
|
@include color-yiq($background);
|
||||||
$active-border: darken($border, 12%);
|
|
||||||
|
|
||||||
color: $color;
|
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
@include box-shadow($btn-box-shadow);
|
@include box-shadow($btn-box-shadow);
|
||||||
|
|
||||||
// Hover and focus styles are shared
|
&:hover {
|
||||||
@include hover {
|
@include color-yiq($background);
|
||||||
color: $color;
|
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
// 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 2px rgba($border, .5);
|
box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: 0 0 0 2px rgba($border, .5);
|
box-shadow: 0 0 0 3px rgba($border, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -38,7 +35,6 @@
|
||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
color: $color;
|
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
background-image: none; // Remove the gradient for the pressed/active state
|
background-image: none; // Remove the gradient for the pressed/active state
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
|
|
@ -48,8 +44,8 @@
|
||||||
|
|
||||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
|
|
@ -60,7 +56,7 @@
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
box-shadow: 0 0 0 2px rgba($color, .5);
|
box-shadow: 0 0 0 3px rgba($color, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
|
|
@ -79,8 +75,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button sizes
|
// Button sizes
|
||||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||||
padding: $padding-y $padding-x;
|
padding: $padding-y $padding-x;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
|
line-height: $line-height;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
// Card variants
|
|
||||||
|
|
||||||
@mixin card-variant($background, $border) {
|
|
||||||
background-color: $background;
|
|
||||||
border-color: $border;
|
|
||||||
|
|
||||||
.card-header,
|
|
||||||
.card-footer {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin card-outline-variant($color) {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Inverse text within a card for use with dark backgrounds
|
|
||||||
//
|
|
||||||
|
|
||||||
@mixin card-inverse {
|
|
||||||
color: rgba(255,255,255,.65);
|
|
||||||
|
|
||||||
.card-header,
|
|
||||||
.card-footer {
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: rgba(255,255,255,.2);
|
|
||||||
}
|
|
||||||
.card-header,
|
|
||||||
.card-footer,
|
|
||||||
.card-title,
|
|
||||||
.card-blockquote {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.card-link,
|
|
||||||
.card-text,
|
|
||||||
.card-subtitle,
|
|
||||||
.card-blockquote .blockquote-footer {
|
|
||||||
color: rgba(255,255,255,.65);
|
|
||||||
}
|
|
||||||
.card-link {
|
|
||||||
@include hover-focus {
|
|
||||||
color: $card-link-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@mixin clearfix() {
|
@mixin clearfix() {
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
|
||||||
clear: both;
|
clear: both;
|
||||||
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,7 @@
|
||||||
// Form validation states
|
|
||||||
//
|
|
||||||
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
|
|
||||||
// and successes.
|
|
||||||
|
|
||||||
@mixin form-control-validation($color) {
|
|
||||||
// Color the label and help text
|
|
||||||
.form-control-feedback,
|
|
||||||
.form-control-label,
|
|
||||||
.col-form-label,
|
|
||||||
.form-check-label,
|
|
||||||
.custom-control {
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the border and box shadow on specific inputs to match
|
|
||||||
.form-control {
|
|
||||||
border-color: $color;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set validation states also for addons
|
|
||||||
.input-group-addon {
|
|
||||||
color: $color;
|
|
||||||
border-color: $color;
|
|
||||||
background-color: lighten($color, 40%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Form control focus state
|
// Form control focus state
|
||||||
//
|
//
|
||||||
// Generate a customized focus state and for any input with the specified color,
|
// Generate a customized focus state and for any input with the specified color,
|
||||||
// which defaults to the `@input-border-focus` variable.
|
// which defaults to the `@input-border-color-focus` variable.
|
||||||
//
|
//
|
||||||
// We highly encourage you to not customize the default value, but instead use
|
// We highly encourage you to not customize the default value, but instead use
|
||||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||||
|
|
@ -44,36 +12,70 @@
|
||||||
// contrast against a dark gray background.
|
// contrast against a dark gray background.
|
||||||
@mixin form-control-focus() {
|
@mixin form-control-focus() {
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $input-color-focus;
|
color: $input-focus-color;
|
||||||
background-color: $input-bg-focus;
|
background-color: $input-focus-bg;
|
||||||
border-color: $input-border-focus;
|
border-color: $input-focus-border-color;
|
||||||
outline: none;
|
outline: none;
|
||||||
@include box-shadow($input-box-shadow-focus);
|
@include box-shadow($input-focus-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
//
|
|
||||||
// Relative text size, padding, and border-radii changes for form controls. For
|
|
||||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
|
||||||
// element gets special love because it's special, and that's a fact!
|
|
||||||
|
|
||||||
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
@mixin form-validation-state($state, $color) {
|
||||||
#{$parent} {
|
|
||||||
height: $input-height;
|
.form-control,
|
||||||
padding: $padding-y $padding-x;
|
.custom-select {
|
||||||
font-size: $font-size;
|
.was-validated &:#{$state},
|
||||||
line-height: $line-height;
|
&.is-#{$state} {
|
||||||
@include border-radius($border-radius);
|
border-color: $color;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
~ .invalid-feedback,
|
||||||
|
~ .invalid-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select#{$parent} {
|
|
||||||
height: $input-height;
|
// TODO: redo check markup lol crap
|
||||||
line-height: $input-height;
|
.form-check-input {
|
||||||
|
.was-validated &:#{$state},
|
||||||
|
&.is-#{$state} {
|
||||||
|
+ .form-check-label {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea#{$parent},
|
// custom radios and checks
|
||||||
select[multiple]#{$parent} {
|
.custom-control-input {
|
||||||
height: auto;
|
.was-validated &:#{$state},
|
||||||
|
&.is-#{$state} {
|
||||||
|
~ .custom-control-indicator {
|
||||||
|
background-color: rgba($color, .25);
|
||||||
|
}
|
||||||
|
~ .custom-control-description {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// custom file
|
||||||
|
.custom-file-input {
|
||||||
|
.was-validated &:#{$state},
|
||||||
|
&.is-#{$state} {
|
||||||
|
~ .custom-file-control {
|
||||||
|
border-color: $color;
|
||||||
|
|
||||||
|
&::before { border-color: inherit; }
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-image: linear-gradient($deg, $start-color, $end-color);
|
background-image: linear-gradient($deg, $start-color, $end-color);
|
||||||
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||||
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,14 @@
|
||||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||||
// any value of `$grid-columns`.
|
// any value of `$grid-columns`.
|
||||||
|
|
||||||
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
|
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
||||||
// Common properties for all breakpoints
|
// Common properties for all breakpoints
|
||||||
%grid-column {
|
%grid-column {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 1px; // Prevent columns from collapsing when empty
|
min-height: 1px; // Prevent columns from collapsing when empty
|
||||||
|
padding-right: ($gutter / 2);
|
||||||
@include make-gutters($gutters);
|
padding-left: ($gutter / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $breakpoint in map-keys($breakpoints) {
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
|
@ -22,7 +22,8 @@
|
||||||
@extend %grid-column;
|
@extend %grid-column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.col#{$infix} {
|
.col#{$infix},
|
||||||
|
.col#{$infix}-auto {
|
||||||
@extend %grid-column;
|
@extend %grid-column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -36,6 +37,7 @@
|
||||||
.col#{$infix}-auto {
|
.col#{$infix}-auto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
max-width: none; // Reset earlier grid tiers
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through $columns {
|
@for $i from 1 through $columns {
|
||||||
|
|
@ -44,20 +46,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $modifier in (pull, push) {
|
@for $i from 1 through $columns {
|
||||||
@for $i from 0 through $columns {
|
.order#{$infix}-#{$i} {
|
||||||
.#{$modifier}#{$infix}-#{$i} {
|
order: $i;
|
||||||
@include make-col-modifier($modifier, $i, $columns)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
|
||||||
@for $i from 0 through ($columns - 1) {
|
|
||||||
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
|
|
||||||
.offset#{$infix}-#{$i} {
|
|
||||||
@include make-col-modifier(offset, $i, $columns)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,18 +2,12 @@
|
||||||
//
|
//
|
||||||
// Generate semantic grid columns with these mixins.
|
// Generate semantic grid columns with these mixins.
|
||||||
|
|
||||||
@mixin make-container($gutters: $grid-gutter-widths) {
|
@mixin make-container() {
|
||||||
position: relative;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
@each $breakpoint in map-keys($gutters) {
|
padding-right: ($grid-gutter-width / 2);
|
||||||
@include media-breakpoint-up($breakpoint) {
|
padding-left: ($grid-gutter-width / 2);
|
||||||
$gutter: map-get($gutters, $breakpoint);
|
width: 100%;
|
||||||
padding-right: ($gutter / 2);
|
|
||||||
padding-left: ($gutter / 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -21,80 +15,33 @@
|
||||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||||
@each $breakpoint, $container-max-width in $max-widths {
|
@each $breakpoint, $container-max-width in $max-widths {
|
||||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||||
width: $container-max-width;
|
max-width: $container-max-width;
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-gutters($gutters: $grid-gutter-widths) {
|
@mixin make-row() {
|
||||||
@each $breakpoint in map-keys($gutters) {
|
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
$gutter: map-get($gutters, $breakpoint);
|
|
||||||
padding-right: ($gutter / 2);
|
|
||||||
padding-left: ($gutter / 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-row($gutters: $grid-gutter-widths) {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
margin-right: ($grid-gutter-width / -2);
|
||||||
@each $breakpoint in map-keys($gutters) {
|
margin-left: ($grid-gutter-width / -2);
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
$gutter: map-get($gutters, $breakpoint);
|
|
||||||
margin-right: ($gutter / -2);
|
|
||||||
margin-left: ($gutter / -2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-ready($gutters: $grid-gutter-widths) {
|
@mixin make-col-ready() {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||||
// always setting `width: 100%;`. This works because we use `flex` values
|
// always setting `width: 100%;`. This works because we use `flex` values
|
||||||
// later on to override this initial width.
|
// later on to override this initial width.
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 1px; // Prevent collapsing
|
min-height: 1px; // Prevent collapsing
|
||||||
|
padding-right: ($grid-gutter-width / 2);
|
||||||
@each $breakpoint in map-keys($gutters) {
|
padding-left: ($grid-gutter-width / 2);
|
||||||
@include media-breakpoint-up($breakpoint) {
|
|
||||||
$gutter: map-get($gutters, $breakpoint);
|
|
||||||
padding-right: ($gutter / 2);
|
|
||||||
padding-left: ($gutter / 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col($size, $columns: $grid-columns) {
|
@mixin make-col($size, $columns: $grid-columns) {
|
||||||
flex: 0 0 percentage($size / $columns);
|
flex: 0 0 percentage($size / $columns);
|
||||||
// width: percentage($size / $columns);
|
|
||||||
// Add a `max-width` to ensure content within each column does not blow out
|
// Add a `max-width` to ensure content within each column does not blow out
|
||||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||||
// do not appear to require this.
|
// do not appear to require this.
|
||||||
max-width: percentage($size / $columns);
|
max-width: percentage($size / $columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
|
||||||
margin-left: percentage($size / $columns);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-push($size, $columns: $grid-columns) {
|
|
||||||
left: if($size > 0, percentage($size / $columns), auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-pull($size, $columns: $grid-columns) {
|
|
||||||
right: if($size > 0, percentage($size / $columns), auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin make-col-modifier($type, $size, $columns) {
|
|
||||||
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
|
|
||||||
@if $type == push {
|
|
||||||
@include make-col-push($size, $columns);
|
|
||||||
} @else if $type == pull {
|
|
||||||
@include make-col-pull($size, $columns);
|
|
||||||
} @else if $type == offset {
|
|
||||||
@include make-col-offset($size, $columns);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -8,16 +8,18 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// @else {
|
// @else {
|
||||||
|
// scss-lint:disable Indentation
|
||||||
&:hover { @content }
|
&:hover { @content }
|
||||||
|
// scss-lint:enable Indentation
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin hover-focus {
|
@mixin hover-focus {
|
||||||
@if $enable-hover-media-query {
|
@if $enable-hover-media-query {
|
||||||
&:focus { @content }
|
&:focus { @content }
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
@content
|
@content
|
||||||
|
|
@ -32,8 +34,7 @@
|
||||||
@content
|
@content
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&,
|
&,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -49,8 +50,7 @@
|
||||||
@content
|
@content
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active,
|
&:active,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,11 @@
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//scss-lint:disable QualifyingElement
|
||||||
a.list-group-item-#{$state},
|
a.list-group-item-#{$state},
|
||||||
button.list-group-item-#{$state} {
|
button.list-group-item-#{$state} {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
|
||||||
.list-group-item-heading {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: darken($background, 5%);
|
background-color: darken($background, 5%);
|
||||||
|
|
@ -25,4 +22,5 @@
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-lint:enable QualifyingElement
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
// Dividers (basically an hr) within dropdowns and nav lists
|
// Dividers (basically an hr) within dropdowns and nav lists
|
||||||
|
|
||||||
@mixin nav-divider($color: #e5e5e5) {
|
@mixin nav-divider($color: #e5e5e5) {
|
||||||
height: 1px;
|
height: 0;
|
||||||
margin: ($spacer-y / 2) 0;
|
margin: ($spacer / 2) 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: $color;
|
border-top: 1px solid $color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
.page-link {
|
.page-link {
|
||||||
padding: $padding-y $padding-x;
|
padding: $padding-y $padding-x;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
|
line-height: $line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item {
|
.page-item {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,18 @@
|
||||||
|
// scss-lint:disable DuplicateProperty
|
||||||
@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;
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
letter-spacing: normal;
|
|
||||||
line-break: auto;
|
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
text-align: left; // Fallback for where `start` is not supported
|
text-align: left; // Fallback for where `start` is not supported
|
||||||
text-align: start;
|
text-align: start;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
white-space: normal;
|
letter-spacing: normal;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
word-spacing: normal;
|
word-spacing: normal;
|
||||||
|
white-space: normal;
|
||||||
|
line-break: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// Resize anything
|
// Resize anything
|
||||||
|
|
||||||
@mixin resizable($direction) {
|
@mixin resizable($direction) {
|
||||||
resize: $direction; // Options: horizontal, vertical, both
|
|
||||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||||
|
resize: $direction; // Options: horizontal, vertical, both
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
// Only display content to screen readers
|
// Only display content to screen readers
|
||||||
//
|
//
|
||||||
// See: http://a11yproject.com/posts/how-to-hide-content
|
// See: http://a11yproject.com/posts/how-to-hide-content
|
||||||
|
// See: http://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;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clip: rect(0,0,0,0);
|
clip: rect(0,0,0,0);
|
||||||
|
white-space: nowrap;
|
||||||
|
clip-path: inset(50%);
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -25,8 +27,9 @@
|
||||||
position: static;
|
position: static;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0;
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
clip: auto;
|
clip: auto;
|
||||||
|
white-space: normal;
|
||||||
|
clip-path: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
// Applies the given styles only when the browser support CSS3 3D transforms.
|
|
||||||
@mixin if-supports-3d-transforms() {
|
|
||||||
@media (-webkit-transform-3d) {
|
|
||||||
// Old Safari, Old Android
|
|
||||||
// http://caniuse.com/#feat=css-featurequeries
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports (transform: translate3d(0,0,0)) {
|
|
||||||
// The Proper Way: Using a CSS feature query
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
@mixin transition($transition...) {
|
||||||
|
@if $enable-transitions {
|
||||||
|
@if length($transition) == 0 {
|
||||||
|
transition: $transition-base;
|
||||||
|
} @else {
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// Visibility
|
// Visibility
|
||||||
|
|
||||||
@mixin invisible {
|
@mixin invisible($visibility) {
|
||||||
visibility: hidden !important;
|
visibility: $visibility !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,6 @@
|
||||||
//
|
@each $color, $value in $theme-colors {
|
||||||
// Contextual backgrounds
|
@include bg-variant('.bg-#{$color}', $value);
|
||||||
//
|
|
||||||
|
|
||||||
.bg-faded {
|
|
||||||
background-color: darken($body-bg, 3%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include bg-variant('.bg-primary', $brand-primary);
|
.bg-white { background-color: $white !important; }
|
||||||
|
.bg-transparent { background-color: transparent !important; }
|
||||||
@include bg-variant('.bg-success', $brand-success);
|
|
||||||
|
|
||||||
@include bg-variant('.bg-info', $brand-info);
|
|
||||||
|
|
||||||
@include bg-variant('.bg-warning', $brand-warning);
|
|
||||||
|
|
||||||
@include bg-variant('.bg-danger', $brand-danger);
|
|
||||||
|
|
||||||
@include bg-variant('.bg-inverse', $brand-inverse);
|
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,45 @@
|
||||||
// Border
|
// Border
|
||||||
//
|
//
|
||||||
|
|
||||||
|
.border { border: $border-width solid $border-color !important; }
|
||||||
.border-0 { border: 0 !important; }
|
.border-0 { border: 0 !important; }
|
||||||
.border-top-0 { border-top: 0 !important; }
|
.border-top-0 { border-top: 0 !important; }
|
||||||
.border-right-0 { border-right: 0 !important; }
|
.border-right-0 { border-right: 0 !important; }
|
||||||
.border-bottom-0 { border-bottom: 0 !important; }
|
.border-bottom-0 { border-bottom: 0 !important; }
|
||||||
.border-left-0 { border-left: 0 !important; }
|
.border-left-0 { border-left: 0 !important; }
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.border-#{$color} {
|
||||||
|
border-color: $value !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-white {
|
||||||
|
border-color: $white !important;
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Border-radius
|
// Border-radius
|
||||||
//
|
//
|
||||||
|
|
||||||
.rounded {
|
.rounded {
|
||||||
@include border-radius($border-radius);
|
border-radius: $border-radius !important;
|
||||||
}
|
}
|
||||||
.rounded-top {
|
.rounded-top {
|
||||||
@include border-top-radius($border-radius);
|
border-top-left-radius: $border-radius !important;
|
||||||
|
border-top-right-radius: $border-radius !important;
|
||||||
}
|
}
|
||||||
.rounded-right {
|
.rounded-right {
|
||||||
@include border-right-radius($border-radius);
|
border-top-right-radius: $border-radius !important;
|
||||||
|
border-bottom-right-radius: $border-radius !important;
|
||||||
}
|
}
|
||||||
.rounded-bottom {
|
.rounded-bottom {
|
||||||
@include border-bottom-radius($border-radius);
|
border-bottom-right-radius: $border-radius !important;
|
||||||
|
border-bottom-left-radius: $border-radius !important;
|
||||||
}
|
}
|
||||||
.rounded-left {
|
.rounded-left {
|
||||||
@include border-left-radius($border-radius);
|
border-top-left-radius: $border-radius !important;
|
||||||
|
border-bottom-left-radius: $border-radius !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-circle {
|
.rounded-circle {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
//
|
//
|
||||||
// Display utilities
|
// Utilities for common `display` values
|
||||||
//
|
//
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
|
@ -16,3 +16,38 @@
|
||||||
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Utilities for toggling `display` in print
|
||||||
|
//
|
||||||
|
|
||||||
|
.d-print-block {
|
||||||
|
display: none !important;
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-print-inline {
|
||||||
|
display: none !important;
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
display: inline !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-print-inline-block {
|
||||||
|
display: none !important;
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-print-none {
|
||||||
|
@media print {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,6 @@
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
.flex#{$infix}-first { order: -1; }
|
|
||||||
.flex#{$infix}-last { order: 1; }
|
|
||||||
.flex#{$infix}-unordered { order: 0; }
|
|
||||||
|
|
||||||
.flex#{$infix}-row { flex-direction: row !important; }
|
.flex#{$infix}-row { flex-direction: row !important; }
|
||||||
.flex#{$infix}-column { flex-direction: column !important; }
|
.flex#{$infix}-column { flex-direction: column !important; }
|
||||||
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
|
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,13 @@
|
||||||
// Positioning
|
// Common values
|
||||||
|
|
||||||
|
// Sass list not in variables since it's not intended for customization.
|
||||||
|
$positions: static, relative, absolute, fixed, sticky;
|
||||||
|
|
||||||
|
@each $position in $positions {
|
||||||
|
.position-#{$position} { position: $position !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shorthand
|
||||||
|
|
||||||
.fixed-top {
|
.fixed-top {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -17,7 +26,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticky-top {
|
.sticky-top {
|
||||||
position: sticky;
|
@supports (position: sticky) {
|
||||||
top: 0;
|
position: sticky;
|
||||||
z-index: $zindex-sticky;
|
top: 0;
|
||||||
|
z-index: $zindex-sticky;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,39 +5,45 @@
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||||
@each $size, $lengths in $spacers {
|
@each $size, $length in $spacers {
|
||||||
$length-x: map-get($lengths, x);
|
|
||||||
$length-y: map-get($lengths, y);
|
|
||||||
|
|
||||||
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
||||||
.#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; }
|
.#{$abbrev}t#{$infix}-#{$size},
|
||||||
.#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; }
|
|
||||||
.#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
|
|
||||||
.#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; }
|
|
||||||
.#{$abbrev}x#{$infix}-#{$size} {
|
|
||||||
#{$prop}-right: $length-x !important;
|
|
||||||
#{$prop}-left: $length-x !important;
|
|
||||||
}
|
|
||||||
.#{$abbrev}y#{$infix}-#{$size} {
|
.#{$abbrev}y#{$infix}-#{$size} {
|
||||||
#{$prop}-top: $length-y !important;
|
#{$prop}-top: $length !important;
|
||||||
#{$prop}-bottom: $length-y !important;
|
}
|
||||||
|
.#{$abbrev}r#{$infix}-#{$size},
|
||||||
|
.#{$abbrev}x#{$infix}-#{$size} {
|
||||||
|
#{$prop}-right: $length !important;
|
||||||
|
}
|
||||||
|
.#{$abbrev}b#{$infix}-#{$size},
|
||||||
|
.#{$abbrev}y#{$infix}-#{$size} {
|
||||||
|
#{$prop}-bottom: $length !important;
|
||||||
|
}
|
||||||
|
.#{$abbrev}l#{$infix}-#{$size},
|
||||||
|
.#{$abbrev}x#{$infix}-#{$size} {
|
||||||
|
#{$prop}-left: $length !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Some special margin utils
|
// Some special margin utils
|
||||||
.m#{$infix}-auto { margin: auto !important; }
|
.m#{$infix}-auto { margin: auto !important; }
|
||||||
.mt#{$infix}-auto { margin-top: auto !important; }
|
.mt#{$infix}-auto,
|
||||||
.mr#{$infix}-auto { margin-right: auto !important; }
|
.my#{$infix}-auto {
|
||||||
.mb#{$infix}-auto { margin-bottom: auto !important; }
|
margin-top: auto !important;
|
||||||
.ml#{$infix}-auto { margin-left: auto !important; }
|
}
|
||||||
|
.mr#{$infix}-auto,
|
||||||
.mx#{$infix}-auto {
|
.mx#{$infix}-auto {
|
||||||
margin-right: auto !important;
|
margin-right: auto !important;
|
||||||
margin-left: auto !important;
|
|
||||||
}
|
}
|
||||||
|
.mb#{$infix}-auto,
|
||||||
.my#{$infix}-auto {
|
.my#{$infix}-auto {
|
||||||
margin-top: auto !important;
|
|
||||||
margin-bottom: auto !important;
|
margin-bottom: auto !important;
|
||||||
}
|
}
|
||||||
|
.ml#{$infix}-auto,
|
||||||
|
.mx#{$infix}-auto {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,31 +28,20 @@
|
||||||
|
|
||||||
// Weight and italics
|
// Weight and italics
|
||||||
|
|
||||||
.font-weight-normal { font-weight: $font-weight-normal; }
|
.font-weight-light { font-weight: $font-weight-light !important; }
|
||||||
.font-weight-bold { font-weight: $font-weight-bold; }
|
.font-weight-normal { font-weight: $font-weight-normal !important; }
|
||||||
.font-italic { font-style: italic; }
|
.font-weight-bold { font-weight: $font-weight-bold !important; }
|
||||||
|
.font-italic { font-style: italic !important; }
|
||||||
|
|
||||||
// Contextual colors
|
// Contextual colors
|
||||||
|
|
||||||
.text-white {
|
.text-white { color: #fff !important; }
|
||||||
color: #fff !important;
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
@include text-emphasis-variant('.text-#{$color}', $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-muted', $text-muted);
|
.text-muted { color: $text-muted !important; }
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-primary', $brand-primary);
|
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-success', $brand-success);
|
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-info', $brand-info);
|
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-warning', $brand-warning);
|
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-danger', $brand-danger);
|
|
||||||
|
|
||||||
// Font color
|
|
||||||
|
|
||||||
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
|
|
||||||
|
|
||||||
// Misc
|
// Misc
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,54 +2,10 @@
|
||||||
// Visibility utilities
|
// Visibility utilities
|
||||||
//
|
//
|
||||||
|
|
||||||
|
.visible {
|
||||||
|
@include invisible(visible);
|
||||||
|
}
|
||||||
|
|
||||||
.invisible {
|
.invisible {
|
||||||
@include invisible();
|
@include invisible(hidden);
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive visibility utilities
|
|
||||||
|
|
||||||
@each $bp in map-keys($grid-breakpoints) {
|
|
||||||
.hidden-#{$bp}-up {
|
|
||||||
@include media-breakpoint-up($bp) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hidden-#{$bp}-down {
|
|
||||||
@include media-breakpoint-down($bp) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Print utilities
|
|
||||||
//
|
|
||||||
// Media queries are placed on the inside to be mixin-friendly.
|
|
||||||
|
|
||||||
.visible-print-block {
|
|
||||||
display: none !important;
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.visible-print-inline {
|
|
||||||
display: none !important;
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
display: inline !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.visible-print-inline-block {
|
|
||||||
display: none !important;
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden-print {
|
|
||||||
@media print {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue