removing /src folder from gitignore
This commit is contained in:
koenemann
parent
74bc4cfb8e
commit
c998ecaf6a
|
|
@ -4,8 +4,6 @@ bower_components
|
|||
|
||||
node_modules
|
||||
|
||||
src
|
||||
|
||||
understrap.zip
|
||||
|
||||
dist
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
.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
|
|
@ -0,0 +1,154 @@
|
|||
.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
|
|
@ -0,0 +1,21 @@
|
|||
.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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.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}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.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; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.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
|
|
@ -0,0 +1,482 @@
|
|||
/* 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.1.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 = jQuery.isArray( copy ) ) ) ) {
|
||||
|
||||
if ( copyIsArray ) {
|
||||
copyIsArray = false;
|
||||
clone = src && jQuery.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";
|
||||
},
|
||||
|
||||
isArray: Array.isArray,
|
||||
|
||||
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 );
|
||||
},
|
||||
|
||||
nodeName: function( elem, name ) {
|
||||
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
|
||||
},
|
||||
|
||||
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;
|
||||
} );
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* File customizer.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
// Site title and description.
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-title a' ).text( to );
|
||||
} );
|
||||
} );
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-description' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Header text color.
|
||||
wp.customize( 'header_textcolor', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'blank' === to ) {
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'clip': 'rect(1px, 1px, 1px, 1px)',
|
||||
'position': 'absolute'
|
||||
} );
|
||||
} else {
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'clip': 'auto',
|
||||
'position': 'relative'
|
||||
} );
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'color': to
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} )( 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
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* File navigation.js.
|
||||
*
|
||||
* Handles toggling the navigation menu for small screens and enables TAB key
|
||||
* navigation support for dropdown menus.
|
||||
*/
|
||||
( function() {
|
||||
var container, button, menu, links, subMenus, i, len;
|
||||
|
||||
container = document.getElementById( 'site-navigation' );
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = container.getElementsByTagName( 'button' )[0];
|
||||
if ( 'undefined' === typeof button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu = container.getElementsByTagName( 'ul' )[0];
|
||||
|
||||
// Hide menu toggle button if menu is empty and return early.
|
||||
if ( 'undefined' === typeof menu ) {
|
||||
button.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className += ' nav-menu';
|
||||
}
|
||||
|
||||
button.onclick = function() {
|
||||
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
|
||||
container.className = container.className.replace( ' toggled', '' );
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
} else {
|
||||
container.className += ' toggled';
|
||||
button.setAttribute( 'aria-expanded', 'true' );
|
||||
menu.setAttribute( 'aria-expanded', 'true' );
|
||||
}
|
||||
};
|
||||
|
||||
// Get all the link elements within the menu.
|
||||
links = menu.getElementsByTagName( 'a' );
|
||||
subMenus = menu.getElementsByTagName( 'ul' );
|
||||
|
||||
// Set menu items with submenus to aria-haspopup="true".
|
||||
for ( i = 0, len = subMenus.length; i < len; i++ ) {
|
||||
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
|
||||
}
|
||||
|
||||
// Each time a menu link is focused or blurred, toggle focus.
|
||||
for ( i = 0, len = links.length; i < len; i++ ) {
|
||||
links[i].addEventListener( 'focus', toggleFocus, true );
|
||||
links[i].addEventListener( 'blur', toggleFocus, true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets or removes .focus class on an element.
|
||||
*/
|
||||
function toggleFocus() {
|
||||
var self = this;
|
||||
|
||||
// Move up through the ancestors of the current link until we hit .nav-menu.
|
||||
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
|
||||
|
||||
// On li elements toggle the class .focus.
|
||||
if ( 'li' === self.tagName.toLowerCase() ) {
|
||||
if ( -1 !== self.className.indexOf( 'focus' ) ) {
|
||||
self.className = self.className.replace( ' focus', '' );
|
||||
} else {
|
||||
self.className += ' focus';
|
||||
}
|
||||
}
|
||||
|
||||
self = self.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles `focus` class to allow submenu access on tablets.
|
||||
*/
|
||||
( function( container ) {
|
||||
var touchStartFn, i,
|
||||
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
|
||||
|
||||
if ( 'ontouchstart' in window ) {
|
||||
touchStartFn = function( e ) {
|
||||
var menuItem = this.parentNode, i;
|
||||
|
||||
if ( ! menuItem.classList.contains( 'focus' ) ) {
|
||||
e.preventDefault();
|
||||
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
|
||||
if ( menuItem === menuItem.parentNode.children[i] ) {
|
||||
continue;
|
||||
}
|
||||
menuItem.parentNode.children[i].classList.remove( 'focus' );
|
||||
}
|
||||
menuItem.classList.add( 'focus' );
|
||||
} else {
|
||||
menuItem.classList.remove( 'focus' );
|
||||
}
|
||||
};
|
||||
|
||||
for ( i = 0; i < parentLink.length; ++i ) {
|
||||
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
|
||||
}
|
||||
}
|
||||
}( container ) );
|
||||
} )();
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* File skip-link-focus-fix.js.
|
||||
*
|
||||
* Helps with accessibility for keyboard only users.
|
||||
*
|
||||
* Learn more: https://git.io/vWdr2
|
||||
*/
|
||||
( function() {
|
||||
var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
|
||||
isOpera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
|
||||
isIe = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
|
||||
|
||||
if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) {
|
||||
window.addEventListener( 'hashchange', function() {
|
||||
var id = location.hash.substring( 1 ),
|
||||
element;
|
||||
|
||||
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
element = document.getElementById( id );
|
||||
|
||||
if ( element ) {
|
||||
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
|
||||
element.tabIndex = -1;
|
||||
}
|
||||
|
||||
element.focus();
|
||||
}
|
||||
}, false );
|
||||
}
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,55 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: relative;
|
||||
top: -$alert-padding-y;
|
||||
right: -$alert-padding-x;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
//
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
.alert-success {
|
||||
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
color: $badge-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius();
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
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
|
||||
//
|
||||
// Make them extra rounded with a modifier to replace v3's badges.
|
||||
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
@include border-radius($badge-pill-border-radius);
|
||||
}
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked badges get darker on :hover).
|
||||
|
||||
.badge-default {
|
||||
@include badge-variant($badge-default-bg);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.breadcrumb {
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $spacer-y;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
float: left;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: "#{$breadcrumb-divider}";
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the fron to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
z-index: 2;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: -$input-btn-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
float: left;
|
||||
}
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@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
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.btn + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x * .75;
|
||||
padding-left: $btn-padding-x * .75;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-sm * .75;
|
||||
padding-left: $btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-lg * .75;
|
||||
padding-left: $btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.btn-group.open .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.btn,
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -$input-btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0,0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: $input-btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Share hover and focus styles
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: .65;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.btn.disabled,
|
||||
fieldset[disabled] a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||
}
|
||||
.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
|
||||
.btn-outline-primary {
|
||||
@include button-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $link-color;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
// line-height: ensure even-numbered height of button next to large input
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
|
||||
}
|
||||
.btn-sm {
|
||||
// line-height: ensure proper height of button next to small input
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $card-bg;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
|
||||
.card-block {
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -($card-spacer-y / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -($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-img {
|
||||
// margin: -1.325rem;
|
||||
@include border-radius($card-border-radius-inner);
|
||||
}
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
@include border-top-radius($card-border-radius-inner);
|
||||
}
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius($card-border-radius-inner);
|
||||
}
|
||||
|
||||
|
||||
// Card deck
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
|
||||
// Selectively apply horizontal margins to cards to avoid doing the
|
||||
// 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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
flex: 1 0 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-columns-gap;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
margin-bottom: $card-columns-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
// Wrapper for the slide container and indicators
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
||||
@include if-supports-3d-transforms() {
|
||||
@include transition($carousel-transition);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// CSS3 transforms when supported by the browser
|
||||
@include if-supports-3d-transforms() {
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.active.carousel-item-right {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.carousel-item-prev,
|
||||
.active.carousel-item-left {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// Use flex for alignment (1-3)
|
||||
display: flex; // 1. allow flex styles
|
||||
align-items: center; // 2. vertically center contents
|
||||
justify-content: center; // 3. horizontally center contents
|
||||
width: $carousel-control-width;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
opacity: $carousel-control-opacity;
|
||||
// We can't have a transition here because WebKit cancels the carousel
|
||||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
}
|
||||
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an ordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0; // override <ol> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
flex: 1 0 auto;
|
||||
max-width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
margin-right: $carousel-indicator-spacer;
|
||||
margin-left: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
background-color: rgba($carousel-indicator-active-bg, .5);
|
||||
|
||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
//
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: ((100% - $carousel-caption-width) / 2);
|
||||
bottom: 20px;
|
||||
left: ((100% - $carousel-caption-width) / 2);
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.close {
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
|
||||
@include hover-focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
// Inline and block code styles
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: $code-font-size;
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
// scss-lint:disable PropertyCount
|
||||
|
||||
// Embedded icons from Open Iconic.
|
||||
// Released under MIT and copyright 2014 Waybury.
|
||||
// https://useiconic.com/open
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Base class takes care of all the key behavioral aspects.
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
min-height: (1rem * $line-height-base);
|
||||
padding-left: $custom-control-gutter;
|
||||
margin-right: $custom-control-spacer-x;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
position: absolute;
|
||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||
opacity: 0;
|
||||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
color: $custom-control-checked-indicator-color;
|
||||
background-color: $custom-control-checked-indicator-bg;
|
||||
@include box-shadow($custom-control-checked-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-indicator {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
box-shadow: $custom-control-focus-indicator-box-shadow;
|
||||
}
|
||||
|
||||
&:active ~ .custom-control-indicator {
|
||||
color: $custom-control-active-indicator-color;
|
||||
background-color: $custom-control-active-indicator-bg;
|
||||
@include box-shadow($custom-control-active-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-indicator {
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
background-color: $custom-control-disabled-indicator-bg;
|
||||
}
|
||||
|
||||
~ .custom-control-description {
|
||||
color: $custom-control-disabled-description-color;
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom indicator
|
||||
//
|
||||
// Generates a shadow element to create our makeshift checkbox/radio background.
|
||||
|
||||
.custom-control-indicator {
|
||||
position: absolute;
|
||||
top: (($line-height-base - $custom-control-indicator-size) / 2);
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $custom-control-indicator-size;
|
||||
height: $custom-control-indicator-size;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-control-indicator-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
//
|
||||
// Tweak just a few things for checkboxes.
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
@include border-radius($custom-checkbox-radius);
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-checkbox-checked-icon;
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: $custom-checkbox-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indeterminate-icon;
|
||||
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
//
|
||||
// Tweak just a few things for radios.
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-indicator {
|
||||
border-radius: $custom-radio-radius;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-radio-checked-icon;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout options
|
||||
//
|
||||
// By default radios and checkboxes are `inline-block` with no additional spacing
|
||||
// set. Use these optional classes to tweak the layout.
|
||||
|
||||
.custom-controls-stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.custom-control {
|
||||
margin-bottom: $custom-control-spacer-y;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// http://primercss.io.
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
$select-border-width: ($border-width * 2);
|
||||
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;
|
||||
line-height: $custom-select-line-height;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||
background-size: $custom-select-bg-size;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@include border-radius($custom-select-border-radius);
|
||||
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// supress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
padding-top: $custom-select-padding-y;
|
||||
padding-bottom: $custom-select-padding-y;
|
||||
font-size: $custom-select-sm-font-size;
|
||||
|
||||
// &:not([multiple]) {
|
||||
// height: 26px;
|
||||
// min-height: 26px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// File
|
||||
//
|
||||
// Custom file input.
|
||||
|
||||
.custom-file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
min-width: $custom-file-width;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
@include box-shadow($custom-file-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-file-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius($custom-file-border-radius);
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||
&:lang(#{$lang})::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
background-color: $custom-file-button-bg;
|
||||
border: $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) {
|
||||
&:lang(#{$lang})::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
// Bootstrap overrides
|
||||
//
|
||||
// Copy variables from `_variables.scss` to this file to override default values
|
||||
// without modifying source files.
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
// Generate the caret automatically
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: $caret-width;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
border-top: $caret-width solid;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
border-top: 0;
|
||||
border-bottom: $caret-width solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: $dropdown-margin-top 0 0; // override default ul
|
||||
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
||||
color: $body-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: 3px $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
.show {
|
||||
// Show the menu
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// 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-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
font-size: $font-size-sm;
|
||||
color: $dropdown-header-color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
// height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@if $enable-rounded {
|
||||
// Manually use the if/else instead of the mixin to account for iOS override
|
||||
border-radius: $input-border-radius;
|
||||
} @else {
|
||||
// Otherwise undo the iOS default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-color-placeholder;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||
// don't honor that edge case; we style them as disabled anyway.
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background-color: $input-bg-disabled;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:not([size]):not([multiple]) {
|
||||
$select-border-width: ($border-width * 2);
|
||||
height: calc(#{$input-height} + #{$select-border-width});
|
||||
}
|
||||
|
||||
&:focus::-ms-value {
|
||||
// Suppress the nested default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
||||
// match the appearance of the native widget.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Make file inputs better match text inputs by forcing them to new lines.
|
||||
.form-control-file,
|
||||
.form-control-range {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Legends
|
||||
//
|
||||
|
||||
// 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.
|
||||
.col-form-legend {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
|
||||
// Static form control text
|
||||
//
|
||||
// Apply class to an element to make any string of text align with labels in a
|
||||
// horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||
line-height: $input-line-height;
|
||||
border: solid transparent;
|
||||
border-width: $input-btn-border-width 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
select.form-control-sm {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
select.form-control-lg {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Designed to help with the organization and spacing of vertical forms. For
|
||||
// horizontal forms, use the predefined grid classes.
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: $form-text-margin-top;
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
&.disabled {
|
||||
.form-check-label {
|
||||
color: $text-muted;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: $form-check-input-gutter;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: $form-check-input-margin-y;
|
||||
margin-left: -$form-check-input-gutter;
|
||||
|
||||
&:only-child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
|
||||
.form-check-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
+ .form-check-inline {
|
||||
margin-left: $form-check-inline-margin-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
//
|
||||
// Apply contextual and semantic states to individual form controls.
|
||||
|
||||
.form-control-feedback {
|
||||
margin-top: $form-feedback-margin-top;
|
||||
}
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height / 4);
|
||||
background-size: ($input-height / 2) ($input-height / 2);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.has-success {
|
||||
@include form-control-validation($brand-success);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
// forms begin stacked on extra small (mobile) devices and then go inline when
|
||||
// viewports reach <768px.
|
||||
//
|
||||
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
||||
// default HTML form controls and our custom form controls (e.g., input groups).
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
||||
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-static {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-check-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-right: $form-check-input-margin-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Custom form controls
|
||||
.custom-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
.custom-control-indicator {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
// Re-override the feedback icon.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||
// width for fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
// Remove the negative margin from default .row, then the horizontal padding
|
||||
// from all immediate children columns (to prevent runaway style inheritance).
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include transition($thumbnail-transition);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer-y / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: $figure-caption-font-size;
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
// Vertically centers the content of the addons within the input group
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
|
||||
// Sizing options
|
||||
//
|
||||
// Remix the default form control sizing classes into new ones for easier
|
||||
// manipulation.
|
||||
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
@extend .form-control-lg;
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
@extend .form-control-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text input groups
|
||||
//
|
||||
|
||||
.input-group-addon {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||
font-size: $font-size-base; // Match inputs
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Sizing
|
||||
&.form-control-sm {
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
&.form-control-lg {
|
||||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset rounded corners
|
||||
//
|
||||
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-addon:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.form-control + .input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Button input groups
|
||||
//
|
||||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
// Vertically stretch the button and center its content
|
||||
flex: 1;
|
||||
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
}
|
||||
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:not(:last-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
margin-left: (-$input-btn-border-width);
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.jumbotron {
|
||||
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
||||
margin-bottom: $jumbotron-padding;
|
||||
background-color: $jumbotron-bg;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-hr {
|
||||
border-top-color: darken($jumbotron-bg, 10%);
|
||||
}
|
||||
|
||||
.jumbotron-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: $list-group-link-color;
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
.list-group-item-heading {
|
||||
color: $list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $list-group-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $list-group-link-active-color;
|
||||
background-color: $list-group-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$list-group-border-width;
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $list-group-disabled-color;
|
||||
cursor: $cursor-disabled;
|
||||
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
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush list items
|
||||
//
|
||||
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
|
||||
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
|
||||
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
|
||||
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
// Toggles
|
||||
//
|
||||
// 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
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/hover";
|
||||
@import "mixins/image";
|
||||
@import "mixins/badge";
|
||||
@import "mixins/resize";
|
||||
@import "mixins/screen-reader";
|
||||
@import "mixins/size";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-emphasis";
|
||||
@import "mixins/text-hide";
|
||||
@import "mixins/text-truncate";
|
||||
@import "mixins/transforms";
|
||||
@import "mixins/visibility";
|
||||
|
||||
// // Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
@import "mixins/nav-divider";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/table-row";
|
||||
|
||||
// // Skins
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/gradients";
|
||||
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/float";
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
// .modal-open - body class for killing the scroll
|
||||
// .modal - container to scroll within
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
// Kill the scroll on the body
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
@include transition($modal-transition);
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
&.show .modal-dialog { transform: translate(0, 0); }
|
||||
}
|
||||
.modal-open .modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($modal-content-xs-box-shadow);
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $modal-backdrop-bg;
|
||||
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
&.show { opacity: $modal-backdrop-opacity; }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center; // vertically center it
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when should there be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center; // vertically center
|
||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: $modal-inner-padding;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
|
||||
// Easily place margin between footer elements
|
||||
> :not(:first-child) { margin-left: .25rem; }
|
||||
> :not(:last-child) { margin-right: .25rem; }
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-sm-up-margin-y auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-sm-up-box-shadow);
|
||||
}
|
||||
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg { max-width: $modal-lg; }
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
// Base class
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
// `<nav>`s or `<ul>`s.
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disabled state lightens text and removes hover/tab effects
|
||||
&.disabled {
|
||||
color: $nav-disabled-link-color;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border: $nav-tabs-border-width solid transparent;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $nav-disabled-link-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-active-link-hover-color;
|
||||
background-color: $nav-tabs-active-link-hover-bg;
|
||||
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: -$nav-tabs-border-width;
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-pills-active-link-color;
|
||||
cursor: default;
|
||||
background-color: $nav-pills-active-link-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Justified variants
|
||||
//
|
||||
|
||||
.nav-fill {
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
.nav-item {
|
||||
flex: 1 1 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
// Contents
|
||||
//
|
||||
// Navbar
|
||||
// Navbar brand
|
||||
// Navbar nav
|
||||
// Navbar text
|
||||
// Navbar divider
|
||||
// Responsive navbar
|
||||
// Navbar position
|
||||
// Navbar themes
|
||||
|
||||
|
||||
// Navbar
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
//
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
margin-right: $navbar-padding-x;
|
||||
font-size: $font-size-lg;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav
|
||||
//
|
||||
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: .425rem;
|
||||
padding-bottom: .425rem;
|
||||
}
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
//
|
||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.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;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
line-height: 1;
|
||||
background: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background: no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Use `position` on the toggler to prevent it from being auto placed as a flex
|
||||
// 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.
|
||||
.navbar-toggleable {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.nav-link {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For nesting containers, have to redeclare for alignment purposes
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.navbar-collapse {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar themes
|
||||
//
|
||||
// Styles for switching between navbars with light or dark background.
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
.navbar-brand,
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border-color: $navbar-light-toggler-border;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-light-toggler-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-inverse {
|
||||
.navbar-brand,
|
||||
.navbar-toggler {
|
||||
color: $navbar-inverse-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-inverse-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-inverse-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-inverse-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-inverse-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
color: $navbar-inverse-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border-color: $navbar-inverse-toggler-border;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-inverse-toggler-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-inverse-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,461 @@
|
|||
/*! 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
// 1-2: Disable browser default list styles
|
||||
padding-left: 0; // 1
|
||||
list-style: none; // 2
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
margin-left: 0;
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
z-index: 2;
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: $pagination-disabled-color;
|
||||
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;
|
||||
border-color: $pagination-disabled-border;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
margin-left: -1px;
|
||||
line-height: $pagination-line-height;
|
||||
color: $pagination-color;
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $pagination-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $pagination-hover-bg;
|
||||
border-color: $pagination-hover-border;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
.pagination-lg {
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-popover;
|
||||
display: block;
|
||||
max-width: $popover-max-width;
|
||||
padding: $popover-inner-padding;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
background-color: $popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: $popover-border-width solid $popover-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($popover-box-shadow);
|
||||
|
||||
|
||||
// Popover directions
|
||||
|
||||
&.popover-top,
|
||||
&.bs-tether-element-attached-bottom {
|
||||
margin-top: -$popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -$popover-arrow-outer-width;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -($popover-arrow-outer-width - 1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-right,
|
||||
&.bs-tether-element-attached-left {
|
||||
margin-left: $popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -($popover-arrow-outer-width - 1);
|
||||
margin-top: -($popover-arrow-outer-width - 1);
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-bottom,
|
||||
&.bs-tether-element-attached-top {
|
||||
margin-top: $popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: 50%;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -$popover-arrow-outer-width;
|
||||
margin-left: -$popover-arrow-outer-width;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -($popover-arrow-outer-width - 1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-bottom-color: $popover-title-bg;
|
||||
}
|
||||
|
||||
// This will remove the popover-title's border just below the arrow
|
||||
.popover-title::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border-bottom: 1px solid $popover-title-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover-left,
|
||||
&.bs-tether-element-attached-right {
|
||||
margin-left: -$popover-arrow-width;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: -$popover-arrow-outer-width;
|
||||
margin-top: -$popover-arrow-outer-width;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -($popover-arrow-outer-width - 1);
|
||||
margin-top: -($popover-arrow-outer-width - 1);
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-title {
|
||||
padding: $popover-title-padding-y $popover-title-padding-x;
|
||||
margin-bottom: 0; // Reset the default from Reboot
|
||||
font-size: $font-size-base;
|
||||
background-color: $popover-title-bg;
|
||||
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
|
||||
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
||||
@include border-top-radius($offset-border-width);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: $popover-content-padding-y $popover-content-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||
|
||||
// ==========================================================================
|
||||
// Print styles.
|
||||
// Inlined to avoid the additional HTTP request:
|
||||
// http://www.phpied.com/delay-loading-your-print-css/
|
||||
// ==========================================================================
|
||||
|
||||
@if $enable-print-styles {
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::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`
|
||||
//color: #000 !important; // Black prints faster:
|
||||
// http://www.sanbeiji.com/archives/953
|
||||
text-shadow: none !important;
|
||||
//background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//a[href]::after {
|
||||
// content: " (" attr(href) ")";
|
||||
//}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//
|
||||
// Don't show links that are fragment identifiers,
|
||||
// or use the `javascript:` pseudo protocol
|
||||
//
|
||||
|
||||
//a[href^="#"]::after,
|
||||
//a[href^="javascript:"]::after {
|
||||
// content: "";
|
||||
//}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
//
|
||||
// Printing Tables:
|
||||
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
//
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// Bootstrap specific changes start
|
||||
|
||||
// Bootstrap components
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.badge {
|
||||
border: $border-width solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.table-bordered {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap specific changes end
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// Progress animations
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: $progress-height 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
// Basic progress bar
|
||||
.progress {
|
||||
display: flex;
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
font-size: $progress-font-size;
|
||||
line-height: $progress-height;
|
||||
text-align: center;
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
}
|
||||
.progress-bar {
|
||||
height: $progress-height;
|
||||
color: $progress-bar-color;
|
||||
background-color: $progress-bar-bg;
|
||||
}
|
||||
|
||||
// Striped
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: $progress-height $progress-height;
|
||||
}
|
||||
|
||||
// Animated
|
||||
.progress-bar-animated {
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
}
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
// scss-lint:disable QualifyingElement, DuplicateProperty
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
||||
// Adds additional rules on top of Normalize.css, including several overrides.
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
//
|
||||
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||
// `border: 10px solid red;` and `padding: 20px;`.
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
||||
// recommendations on resolving such conflicts, see
|
||||
// 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,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Make viewport responsive
|
||||
//
|
||||
// @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 {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
|
||||
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 {
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height-base;
|
||||
// Go easy on the eyes and use something other than `#000` for text
|
||||
color: $body-color;
|
||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Remove top margins from headings
|
||||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href)
|
||||
// which have not been made explicitly keyboard-focusable (without tabindex).
|
||||
// It would be more straightforward to just use a[href] in previous block, but that
|
||||
// causes specificity issues in many other styles that are too complex to fix.
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
pre {
|
||||
// Remove browser default top margin
|
||||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `rem`s
|
||||
margin-bottom: 1rem;
|
||||
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
figure {
|
||||
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||
// We reset that to create a better flow in-page.
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images
|
||||
//
|
||||
|
||||
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;
|
||||
// Note: `<img>`s are deliberately not made responsive by default.
|
||||
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
// No longer part of Normalize since v4
|
||||
border-collapse: collapse;
|
||||
// Reset for nesting within parents with `background-color`.
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding;
|
||||
padding-bottom: $table-cell-padding;
|
||||
color: $text-muted;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Centered by default, but left-align-ed to match the `td`s below.
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
label {
|
||||
// Allow labels to use `margin` for spacing.
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Work around a Firefox/IE bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base/
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
||||
// properly inherited. However, `line-height` isn't inherited there.
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
// Apply a disabled cursor for radios and checkboxes.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
// and https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
// Browsers set a default `min-width: min-content;` on fieldsets,
|
||||
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359
|
||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
min-width: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
// Reset the entire legend element to match the `fieldset`
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// todo: needed?
|
||||
output {
|
||||
display: inline-block;
|
||||
// font-size: $font-size-base;
|
||||
// line-height: $line-height;
|
||||
// color: $input-color;
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
// Credit: Nicolas Gallagher and SUIT CSS.
|
||||
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
&::before {
|
||||
padding-top: percentage(9 / 21);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
&::before {
|
||||
padding-top: percentage(9 / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
&::before {
|
||||
padding-top: percentage(3 / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
&::before {
|
||||
padding-top: percentage(1 / 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
//
|
||||
// Basic Bootstrap table
|
||||
//
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding;
|
||||
vertical-align: top;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Condensed table w/ half padding
|
||||
//
|
||||
|
||||
.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding: $table-sm-cell-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bordered version
|
||||
//
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: (2 * $table-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zebra-striping
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hover effect
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table backgrounds
|
||||
//
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
|
||||
// Generate the contextual variants
|
||||
@include table-row-variant(active, $table-bg-active);
|
||||
@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(danger, $state-danger-bg);
|
||||
|
||||
|
||||
// Inverse styles
|
||||
//
|
||||
// Same table markup, but inverted color scheme: dark background and light text.
|
||||
|
||||
.thead-inverse {
|
||||
th {
|
||||
color: $table-inverse-color;
|
||||
background-color: $table-inverse-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-default {
|
||||
th {
|
||||
color: $table-head-color;
|
||||
background-color: $table-head-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.table-inverse {
|
||||
color: $table-inverse-color;
|
||||
background-color: $table-inverse-bg;
|
||||
|
||||
th,
|
||||
td,
|
||||
thead th {
|
||||
border-color: $body-bg;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
|
||||
// enabling horizontal scrolling. Only applies <768px. Everything above that
|
||||
// will display normally.
|
||||
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
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;`
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
display: block;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.show { opacity: $tooltip-opacity; }
|
||||
|
||||
&.tooltip-top,
|
||||
&.bs-tether-element-attached-bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-right,
|
||||
&.bs-tether-element-attached-left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-bottom,
|
||||
&.bs-tether-element-attached-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
margin-top: $tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.tooltip-left,
|
||||
&.bs-tether-element-attached-right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
margin-left: -$tooltip-margin;
|
||||
|
||||
.tooltip-inner::before {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
background-color: $tooltip-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
.fade {
|
||||
opacity: 0;
|
||||
@include transition($transition-fade);
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.collapse.show {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
&.collapse.show {
|
||||
display: table-row-group;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@include transition($transition-collapse);
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h5, .h5 { font-size: $font-size-h5; }
|
||||
h6, .h6 { font-size: $font-size-h6; }
|
||||
|
||||
.lead {
|
||||
font-size: $lead-font-size;
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
||||
// Type display classes
|
||||
.display-1 {
|
||||
font-size: $display1-size;
|
||||
font-weight: $display1-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-2 {
|
||||
font-size: $display2-size;
|
||||
font-weight: $display2-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-3 {
|
||||
font-size: $display3-size;
|
||||
font-weight: $display3-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-4 {
|
||||
font-size: $display4-size;
|
||||
font-weight: $display4-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
border: 0;
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@include list-unstyled;
|
||||
}
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Builds on `abbr`
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
padding: ($spacer / 2) $spacer;
|
||||
margin-bottom: $spacer;
|
||||
font-size: $blockquote-font-size;
|
||||
border-left: $blockquote-border-width solid $blockquote-border-color;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
color: $blockquote-small-color;
|
||||
|
||||
&::before {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import "utilities/align";
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/clearfix";
|
||||
@import "utilities/display";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/float";
|
||||
@import "utilities/position";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/sizing";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/text";
|
||||
@import "utilities/visibility";
|
||||
|
|
@ -0,0 +1,961 @@
|
|||
// Variables
|
||||
//
|
||||
// Copy settings from this file into the provided `_custom.scss` to override
|
||||
// the Bootstrap defaults without modifying key, versioned files.
|
||||
|
||||
|
||||
// Table of Contents
|
||||
//
|
||||
// Colors
|
||||
// Options
|
||||
// Spacing
|
||||
// Body
|
||||
// Links
|
||||
// Grid breakpoints
|
||||
// Grid containers
|
||||
// Grid columns
|
||||
// Fonts
|
||||
// Components
|
||||
// Tables
|
||||
// Buttons
|
||||
// Forms
|
||||
// Dropdowns
|
||||
// Z-index master list
|
||||
// Navbar
|
||||
// Navs
|
||||
// Pagination
|
||||
// Jumbotron
|
||||
// Form states and alerts
|
||||
// Cards
|
||||
// Tooltips
|
||||
// Popovers
|
||||
// Badges
|
||||
// Modals
|
||||
// Alerts
|
||||
// Progress bars
|
||||
// List group
|
||||
// Image thumbnails
|
||||
// Figures
|
||||
// Breadcrumbs
|
||||
// Carousel
|
||||
// Close
|
||||
// Code
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// @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;
|
||||
}
|
||||
|
||||
@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}.";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// General variable structure
|
||||
//
|
||||
// Variable format should follow the `$component-modifier-state-property` order.
|
||||
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Grayscale and brand colors for use across Bootstrap.
|
||||
|
||||
// Start with assigning color names to specific hex values.
|
||||
$white: #fff !default;
|
||||
$black: #000 !default;
|
||||
$red: #d9534f !default;
|
||||
$orange: #f0ad4e !default;
|
||||
$yellow: #ffd500 !default;
|
||||
$green: #5cb85c !default;
|
||||
$blue: #0275d8 !default;
|
||||
$teal: #5bc0de !default;
|
||||
$pink: #ff5b77 !default;
|
||||
$purple: #613d7c !default;
|
||||
|
||||
// Create grayscale
|
||||
$gray-dark: #292b2c !default;
|
||||
$gray: #464a4c !default;
|
||||
$gray-light: #636c72 !default;
|
||||
$gray-lighter: #eceeef !default;
|
||||
$gray-lightest: #f7f7f9 !default;
|
||||
|
||||
// Reassign color vars to semantic color scheme
|
||||
$brand-primary: $blue !default;
|
||||
$brand-success: $green !default;
|
||||
$brand-info: $teal !default;
|
||||
$brand-warning: $orange !default;
|
||||
$brand-danger: $red !default;
|
||||
$brand-inverse: $gray-dark !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
$spacers: (
|
||||
0: (
|
||||
x: 0,
|
||||
y: 0
|
||||
),
|
||||
1: (
|
||||
x: ($spacer-x * .25),
|
||||
y: ($spacer-y * .25)
|
||||
),
|
||||
2: (
|
||||
x: ($spacer-x * .5),
|
||||
y: ($spacer-y * .5)
|
||||
),
|
||||
3: (
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
),
|
||||
4: (
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
),
|
||||
5: (
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
)
|
||||
) !default;
|
||||
$border-width: 1px !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
$sizes: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
) !default;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: $white !default;
|
||||
$body-color: $gray-dark !default;
|
||||
$inverse-bg: $gray-dark !default;
|
||||
$inverse-color: $gray-lighter !default;
|
||||
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: $brand-primary !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width-base: 30px !default;
|
||||
$grid-gutter-widths: (
|
||||
xs: $grid-gutter-width-base,
|
||||
sm: $grid-gutter-width-base,
|
||||
md: $grid-gutter-width-base,
|
||||
lg: $grid-gutter-width-base,
|
||||
xl: $grid-gutter-width-base
|
||||
) !default;
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
$font-size-xs: .75rem !default;
|
||||
|
||||
$font-weight-normal: normal !default;
|
||||
$font-weight-bold: bold !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.75rem !default;
|
||||
$font-size-h4: 1.5rem !default;
|
||||
$font-size-h5: 1.25rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
$display2-size: 5.5rem !default;
|
||||
$display3-size: 4.5rem !default;
|
||||
$display4-size: 3.5rem !default;
|
||||
|
||||
$display1-weight: 300 !default;
|
||||
$display2-weight: 300 !default;
|
||||
$display3-weight: 300 !default;
|
||||
$display4-weight: 300 !default;
|
||||
$display-line-height: $headings-line-height !default;
|
||||
|
||||
$lead-font-size: 1.25rem !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
||||
$text-muted: $gray-light !default;
|
||||
|
||||
$abbr-border-color: $gray-light !default;
|
||||
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
$blockquote-border-width: .25rem !default;
|
||||
|
||||
$hr-border-color: rgba($black,.1) !default;
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
|
||||
$dt-font-weight: $font-weight-bold !default;
|
||||
|
||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default;
|
||||
$nested-kbd-font-weight: $font-weight-bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: (4 / 3) !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
|
||||
$table-inverse-bg: $gray-dark !default;
|
||||
$table-inverse-color: $body-bg !default;
|
||||
|
||||
$table-bg-accent: rgba($black,.05) !default;
|
||||
$table-bg-hover: rgba($black,.075) !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
$table-head-bg: $gray-lighter !default;
|
||||
$table-head-color: $gray !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
$table-border-color: $gray-lighter !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-padding-y: .5rem !default;
|
||||
$btn-line-height: 1.25 !default;
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
||||
$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
||||
|
||||
$btn-primary-color: $white !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: $btn-primary-bg !default;
|
||||
|
||||
$btn-secondary-color: $gray-dark !default;
|
||||
$btn-secondary-bg: $white !default;
|
||||
$btn-secondary-border: #ccc !default;
|
||||
|
||||
$btn-info-color: $white !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: $btn-info-bg !default;
|
||||
|
||||
$btn-success-color: $white !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: $btn-success-bg !default;
|
||||
|
||||
$btn-warning-color: $white !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: $btn-warning-bg !default;
|
||||
|
||||
$btn-danger-color: $white !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: $btn-danger-bg !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
$btn-padding-x-sm: .5rem !default;
|
||||
$btn-padding-y-sm: .25rem !default;
|
||||
|
||||
$btn-padding-x-lg: 1.5rem !default;
|
||||
$btn-padding-y-lg: .75rem !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
$btn-toolbar-margin: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-lg: $border-radius-lg !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$btn-transition: all .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-x: .75rem !default;
|
||||
$input-padding-y: .5rem !default;
|
||||
$input-line-height: 1.25 !default;
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
|
||||
$input-color: $gray !default;
|
||||
$input-border-color: rgba($black,.15) !default;
|
||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
||||
|
||||
$input-border-radius: $border-radius !default;
|
||||
$input-border-radius-lg: $border-radius-lg !default;
|
||||
$input-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$input-bg-focus: $input-bg !default;
|
||||
$input-border-focus: lighten($brand-primary, 25%) !default;
|
||||
$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default;
|
||||
$input-color-focus: $input-color !default;
|
||||
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
$input-padding-x-sm: .5rem !default;
|
||||
$input-padding-y-sm: .25rem !default;
|
||||
|
||||
$input-padding-x-lg: 1.5rem !default;
|
||||
$input-padding-y-lg: .75rem !default;
|
||||
|
||||
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
|
||||
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
|
||||
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
|
||||
|
||||
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
|
||||
|
||||
$form-text-margin-top: .25rem !default;
|
||||
$form-feedback-margin-top: $form-text-margin-top !default;
|
||||
|
||||
$form-check-margin-bottom: .5rem !default;
|
||||
$form-check-input-gutter: 1.25rem !default;
|
||||
$form-check-input-margin-y: .25rem !default;
|
||||
$form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-check-inline-margin-x: .75rem !default;
|
||||
|
||||
$form-group-margin-bottom: $spacer-y !default;
|
||||
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$cursor-disabled: not-allowed !default;
|
||||
|
||||
$custom-control-gutter: 1.5rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
$custom-control-spacer-y: .25rem !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
|
||||
$custom-control-indicator-bg: #ddd !default;
|
||||
$custom-control-indicator-bg-size: 50% 50% !default;
|
||||
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
|
||||
|
||||
$custom-control-disabled-cursor: $cursor-disabled !default;
|
||||
$custom-control-disabled-indicator-bg: $gray-lighter !default;
|
||||
$custom-control-disabled-description-color: $gray-light !default;
|
||||
|
||||
$custom-control-checked-indicator-color: $white !default;
|
||||
$custom-control-checked-indicator-bg: $brand-primary !default;
|
||||
$custom-control-checked-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
|
||||
|
||||
$custom-control-active-indicator-color: $white !default;
|
||||
$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default;
|
||||
$custom-control-active-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-radius: $border-radius !default;
|
||||
$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-checkbox-indeterminate-bg: $brand-primary !default;
|
||||
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
|
||||
$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-checkbox-indeterminate-box-shadow: none !default;
|
||||
|
||||
$custom-radio-radius: 50% !default;
|
||||
$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$custom-select-line-height: $input-line-height !default;
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-disabled-color: $gray-light !default;
|
||||
$custom-select-bg: $white !default;
|
||||
$custom-select-disabled-bg: $gray-lighter !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator-color: #333 !default;
|
||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
|
||||
$custom-select-sm-padding-y: .2rem !default;
|
||||
$custom-select-sm-font-size: 75% !default;
|
||||
|
||||
$custom-file-height: 2.5rem !default;
|
||||
$custom-file-width: 14rem !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
|
||||
|
||||
$custom-file-padding-x: .5rem !default;
|
||||
$custom-file-padding-y: 1rem !default;
|
||||
$custom-file-line-height: 1.5 !default;
|
||||
$custom-file-color: $gray !default;
|
||||
$custom-file-bg: $white !default;
|
||||
$custom-file-border-width: $border-width !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-border-radius: $border-radius !default;
|
||||
$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: $gray-lighter !default;
|
||||
$custom-file-text: (
|
||||
placeholder: (
|
||||
en: "Choose file..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse"
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// Form validation icons
|
||||
$form-icon-success-color: $brand-success !default;
|
||||
$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$form-icon-warning-color: $brand-warning !default;
|
||||
$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$form-icon-danger-color: $brand-danger !default;
|
||||
$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-margin-top: .125rem !default;
|
||||
$dropdown-bg: $white !default;
|
||||
$dropdown-border-color: rgba($black,.15) !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-divider-bg: $gray-lighter !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
|
||||
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
$dropdown-link-hover-bg: $gray-lightest !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
|
||||
// Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
|
||||
$zindex-dropdown-backdrop: 990 !default;
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-fixed: 1030 !default;
|
||||
$zindex-sticky: 1030 !default;
|
||||
$zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-border-radius: $border-radius !default;
|
||||
$navbar-padding-x: $spacer !default;
|
||||
$navbar-padding-y: ($spacer / 2) !default;
|
||||
|
||||
$navbar-brand-padding-y: .25rem !default;
|
||||
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-padding-y: .25rem !default;
|
||||
$navbar-toggler-font-size: $font-size-lg !default;
|
||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
|
||||
$navbar-inverse-color: rgba($white,.5) !default;
|
||||
$navbar-inverse-hover-color: rgba($white,.75) !default;
|
||||
$navbar-inverse-active-color: rgba($white,1) !default;
|
||||
$navbar-inverse-disabled-color: rgba($white,.25) !default;
|
||||
$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-inverse-toggler-border: rgba($white,.1) !default;
|
||||
|
||||
$navbar-light-color: rgba($black,.5) !default;
|
||||
$navbar-light-hover-color: rgba($black,.7) !default;
|
||||
$navbar-light-active-color: rgba($black,.9) !default;
|
||||
$navbar-light-disabled-color: rgba($black,.3) !default;
|
||||
$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-light-toggler-border: rgba($black,.1) !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-item-margin: .2rem !default;
|
||||
$nav-item-inline-spacer: 1rem !default;
|
||||
$nav-link-padding: .5em 1em !default;
|
||||
$nav-link-hover-bg: $gray-lighter !default;
|
||||
$nav-disabled-link-color: $gray-light !default;
|
||||
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
$nav-tabs-justified-link-border-color: #ddd !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-active-link-color: $component-active-color !default;
|
||||
$nav-pills-active-link-bg: $component-active-bg !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y: .5rem !default;
|
||||
$pagination-padding-x-sm: .5rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
$pagination-line-height: 1.25 !default;
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-lighter !default;
|
||||
$pagination-hover-border: #ddd !default;
|
||||
|
||||
$pagination-active-color: $white !default;
|
||||
$pagination-active-bg: $brand-primary !default;
|
||||
$pagination-active-border: $brand-primary !default;
|
||||
|
||||
$pagination-disabled-color: $gray-light !default;
|
||||
$pagination-disabled-bg: $white !default;
|
||||
$pagination-disabled-border: #ddd !default;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-padding: 2rem !default;
|
||||
$jumbotron-bg: $gray-lighter !default;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
//
|
||||
// Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #3c763d !default;
|
||||
$state-success-bg: #dff0d8 !default;
|
||||
$state-success-border: darken($state-success-bg, 5%) !default;
|
||||
|
||||
$state-info-text: #31708f !default;
|
||||
$state-info-bg: #d9edf7 !default;
|
||||
$state-info-border: darken($state-info-bg, 7%) !default;
|
||||
|
||||
$state-warning-text: #8a6d3b !default;
|
||||
$state-warning-bg: #fcf8e3 !default;
|
||||
$mark-bg: $state-warning-bg !default;
|
||||
$state-warning-border: darken($state-warning-bg, 5%) !default;
|
||||
|
||||
$state-danger-text: #a94442 !default;
|
||||
$state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-x: 1.25rem !default;
|
||||
$card-spacer-y: .75rem !default;
|
||||
$card-border-width: 1px !default;
|
||||
$card-border-radius: $border-radius !default;
|
||||
$card-border-color: rgba($black,.125) !default;
|
||||
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||
$card-cap-bg: $gray-lightest !default;
|
||||
$card-bg: $white !default;
|
||||
|
||||
$card-link-hover-color: $white !default;
|
||||
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
$card-deck-margin: ($grid-gutter-width-base / 2) !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $white !default;
|
||||
$tooltip-bg: $black !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: 3px !default;
|
||||
$tooltip-padding-x: 8px !default;
|
||||
$tooltip-margin: 3px !default;
|
||||
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-inner-padding: 1px !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
|
||||
|
||||
$popover-title-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-title-padding-x: 14px !default;
|
||||
$popover-title-padding-y: 8px !default;
|
||||
|
||||
$popover-content-padding-x: 14px !default;
|
||||
$popover-content-padding-y: 9px !default;
|
||||
|
||||
$popover-arrow-width: 10px !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-default-bg: $gray-light !default;
|
||||
$badge-primary-bg: $brand-primary !default;
|
||||
$badge-success-bg: $brand-success !default;
|
||||
$badge-info-bg: $brand-info !default;
|
||||
$badge-warning-bg: $brand-warning !default;
|
||||
$badge-danger-bg: $brand-danger !default;
|
||||
|
||||
$badge-color: $white !default;
|
||||
$badge-link-hover-color: $white !default;
|
||||
$badge-font-size: 75% !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-padding-x: .4em !default;
|
||||
$badge-padding-y: .25em !default;
|
||||
|
||||
$badge-pill-padding-x: .6em !default;
|
||||
// Use a higher than normal value to ensure completely rounded edges when
|
||||
// customizing padding or font-size on labels.
|
||||
$badge-pill-border-radius: 10rem !default;
|
||||
|
||||
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
|
||||
$modal-dialog-margin: 10px !default;
|
||||
$modal-dialog-sm-up-margin-y: 30px !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-border-color: rgba($black,.2) !default;
|
||||
$modal-content-border-width: $border-width !default;
|
||||
$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default;
|
||||
$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default;
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
$modal-header-border-color: $gray-lighter !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-header-padding: 15px !default;
|
||||
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-margin-bottom: $spacer-y !default;
|
||||
$alert-border-radius: $border-radius !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: $border-width !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: .75rem !default;
|
||||
$progress-bg: $gray-lighter !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $body-color !default;
|
||||
$list-group-bg: $white !default;
|
||||
$list-group-border-color: rgba($black,.125) !default;
|
||||
$list-group-border-width: $border-width !default;
|
||||
$list-group-border-radius: $border-radius !default;
|
||||
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
|
||||
$list-group-hover-bg: $gray-lightest !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default;
|
||||
|
||||
$list-group-disabled-color: $gray-light !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||
|
||||
$list-group-link-color: $gray !default;
|
||||
$list-group-link-heading-color: $gray-dark !default;
|
||||
$list-group-link-hover-color: $list-group-link-color !default;
|
||||
|
||||
$list-group-link-active-color: $list-group-color !default;
|
||||
$list-group-link-active-bg: $gray-lighter !default;
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
$thumbnail-border-width: $border-width !default;
|
||||
$thumbnail-border-color: #ddd !default;
|
||||
$thumbnail-border-radius: $border-radius !default;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default;
|
||||
$thumbnail-transition: all .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
$figure-caption-font-size: 90% !default;
|
||||
$figure-caption-color: $gray-light !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .75rem !default;
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
$breadcrumb-item-padding: .5rem !default;
|
||||
|
||||
$breadcrumb-bg: $gray-lighter !default;
|
||||
$breadcrumb-divider-color: $gray-light !default;
|
||||
$breadcrumb-active-color: $gray-light !default;
|
||||
$breadcrumb-divider: "/" !default;
|
||||
|
||||
|
||||
// Carousel
|
||||
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-color: $white !default;
|
||||
|
||||
$carousel-control-icon-width: 20px !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$carousel-transition: transform .6s ease-in-out !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: $font-weight-bold !default;
|
||||
$close-color: $black !default;
|
||||
$close-text-shadow: 0 1px 0 $white !default;
|
||||
|
||||
|
||||
// Code
|
||||
|
||||
$code-font-size: 90% !default;
|
||||
$code-padding-x: .4rem !default;
|
||||
$code-padding-y: .2rem !default;
|
||||
$code-color: #bd4147 !default;
|
||||
$code-bg: $gray-lightest !default;
|
||||
|
||||
$kbd-color: $white !default;
|
||||
$kbd-bg: $gray-dark !default;
|
||||
|
||||
$pre-bg: $gray-lightest !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Bootstrap Grid only
|
||||
//
|
||||
// Includes relevant variables and mixins for the flexbox grid
|
||||
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
|
||||
|
||||
//
|
||||
// Box sizing, responsive, and more
|
||||
//
|
||||
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
@import "variables";
|
||||
|
||||
//
|
||||
// Grid mixins
|
||||
//
|
||||
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
|
||||
@import "custom";
|
||||
|
||||
@import "grid";
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// Bootstrap Reboot only
|
||||
//
|
||||
// Includes only Normalize and our custom Reboot reset.
|
||||
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "custom";
|
||||
|
||||
@import "normalize";
|
||||
@import "reboot";
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/*!
|
||||
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "custom";
|
||||
|
||||
// Reset and dependencies
|
||||
@import "normalize";
|
||||
@import "print";
|
||||
|
||||
// Core CSS
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "code";
|
||||
@import "grid";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
|
||||
// Components
|
||||
@import "transitions";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@import "input-group";
|
||||
@import "custom-forms";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
@import "jumbotron";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
@import "media";
|
||||
@import "list-group";
|
||||
@import "responsive-embed";
|
||||
@import "close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "modal";
|
||||
@import "tooltip";
|
||||
@import "popover";
|
||||
@import "carousel";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Alerts
|
||||
|
||||
@mixin alert-variant($background, $border, $body-color) {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
color: $body-color;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
.alert-link {
|
||||
color: darken($body-color, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// Contextual backgrounds
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Badges
|
||||
|
||||
@mixin badge-variant($color) {
|
||||
background-color: $color;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
// Single side border-radius
|
||||
|
||||
@mixin border-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
@include media-breakpoint-up($lower, $breakpoints) {
|
||||
@include media-breakpoint-down($upper, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// 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.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
@include media-breakpoint-between($name, $name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
$active-background: darken($background, 10%);
|
||||
$active-border: darken($border, 12%);
|
||||
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
// Hover and focus styles are shared
|
||||
@include hover {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 2px rgba($border, .5);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
border-color: $active-border;
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||
color: $color;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 2px rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@mixin clearfix() {
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@mixin float-left {
|
||||
float: left !important;
|
||||
}
|
||||
@mixin float-right {
|
||||
float: right !important;
|
||||
}
|
||||
@mixin float-none {
|
||||
float: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
// 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
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
// which defaults to the `@input-border-focus` variable.
|
||||
//
|
||||
// We highly encourage you to not customize the default value, but instead use
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
// WebKit's default styles, but applicable to a wider range of browsers. Its
|
||||
// usability and accessibility should be taken into account with any change.
|
||||
//
|
||||
// Example usage: change the default blue border and shadow to white for better
|
||||
// contrast against a dark gray background.
|
||||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
color: $input-color-focus;
|
||||
background-color: $input-bg-focus;
|
||||
border-color: $input-border-focus;
|
||||
outline: none;
|
||||
@include box-shadow($input-box-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
#{$parent} {
|
||||
height: $input-height;
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
select[multiple]#{$parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
// Gradients
|
||||
|
||||
// Horizontal gradient, from left to right
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
// Vertical gradient, from top to bottom
|
||||
//
|
||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||
@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
|
||||
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: linear-gradient($deg, $start-color, $end-color);
|
||||
}
|
||||
@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-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
|
||||
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
|
||||
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
|
||||
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// Framework grid generation
|
||||
//
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent columns from collapsing when empty
|
||||
|
||||
@include make-gutters($gutters);
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
.col#{$infix} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col#{$infix}-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
}
|
||||
|
||||
@each $modifier in (pull, push) {
|
||||
@for $i from 0 through $columns {
|
||||
.#{$modifier}#{$infix}-#{$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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container($gutters: $grid-gutter-widths) {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For each breakpoint, define the maximum width of the container in a media query
|
||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $container-max-width in $max-widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
width: $container-max-width;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-gutters($gutters: $grid-gutter-widths) {
|
||||
@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;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@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) {
|
||||
position: relative;
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// later on to override this initial width.
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
|
||||
@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-col($size, $columns: $grid-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
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
@mixin hover {
|
||||
// TODO: re-enable along with mq4-hover-shim
|
||||
// @if $enable-hover-media-query {
|
||||
// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
|
||||
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
|
||||
// @media (hover: hover) {
|
||||
// &:hover { @content }
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
&:hover { @content }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus { @content }
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin plain-hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&,
|
||||
&:focus {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus-active {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus,
|
||||
&:active {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// Image Mixins
|
||||
// - Responsive image
|
||||
// - Retina image
|
||||
|
||||
|
||||
// Responsive image
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
@mixin img-fluid {
|
||||
// Part 1: Set a maximum relative to the parent
|
||||
max-width: 100%;
|
||||
// Part 2: Override the height to auto, otherwise images will be stretched
|
||||
// when setting a width and height attribute on the img element.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// Retina image
|
||||
//
|
||||
// Short retina mixin for setting background-image and -size.
|
||||
|
||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||
background-image: url($file-1x);
|
||||
|
||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||
// but doesn't convert dppx=>dpi.
|
||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
|
||||
@media
|
||||
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||
only screen and (min-resolution: 2dppx) { // Standardized
|
||||
background-image: url($file-2x);
|
||||
background-size: $width-1x $height-1x;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// List Groups
|
||||
|
||||
@mixin list-group-item-variant($state, $background, $color) {
|
||||
.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
a.list-group-item-#{$state},
|
||||
button.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// Lists
|
||||
|
||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
||||
@mixin list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// Horizontal dividers
|
||||
//
|
||||
// Dividers (basically an hr) within dropdowns and nav lists
|
||||
|
||||
@mixin nav-divider($color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: ($spacer-y / 2) 0;
|
||||
overflow: hidden;
|
||||
background-color: $color;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// Navbar vertical align
|
||||
//
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
|
||||
// @mixin navbar-vertical-align($element-height) {
|
||||
// margin-top: (($navbar-height - $element-height) / 2);
|
||||
// margin-bottom: (($navbar-height - $element-height) / 2);
|
||||
// }
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
.page-link {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@mixin reset-text {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-normal;
|
||||
letter-spacing: normal;
|
||||
line-break: auto;
|
||||
line-height: $line-height-base;
|
||||
text-align: left; // Fallback for where `start` is not supported
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// Resize anything
|
||||
|
||||
@mixin resizable($direction) {
|
||||
resize: $direction; // Options: horizontal, vertical, both
|
||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
//
|
||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
@mixin sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// Sizing shortcuts
|
||||
|
||||
@mixin size($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Tables
|
||||
|
||||
@mixin table-row-variant($state, $background) {
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
.table-#{$state} {
|
||||
&,
|
||||
> th,
|
||||
> td {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover {
|
||||
$hover-background: darken($background, 5%);
|
||||
|
||||
.table-#{$state} {
|
||||
@include hover {
|
||||
background-color: $hover-background;
|
||||
|
||||
> td,
|
||||
> th {
|
||||
background-color: $hover-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// Typography
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// CSS image replacement
|
||||
@mixin text-hide() {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Text truncate
|
||||
// Requires inline-block or block for proper styling
|
||||
|
||||
@mixin text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// 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,5 @@
|
|||
// Visibility
|
||||
|
||||
@mixin invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||
.align-top { vertical-align: top !important; }
|
||||
.align-middle { vertical-align: middle !important; }
|
||||
.align-bottom { vertical-align: bottom !important; }
|
||||
.align-text-bottom { vertical-align: text-bottom !important; }
|
||||
.align-text-top { vertical-align: text-top !important; }
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
//
|
||||
// Contextual backgrounds
|
||||
//
|
||||
|
||||
.bg-faded {
|
||||
background-color: darken($body-bg, 3%);
|
||||
}
|
||||
|
||||
@include bg-variant('.bg-primary', $brand-primary);
|
||||
|
||||
@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);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
//
|
||||
// Border
|
||||
//
|
||||
|
||||
.border-0 { border: 0 !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
.border-right-0 { border-right: 0 !important; }
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
|
||||
//
|
||||
// Border-radius
|
||||
//
|
||||
|
||||
.rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.rounded-top {
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
.rounded-right {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
.rounded-bottom {
|
||||
@include border-bottom-radius($border-radius);
|
||||
}
|
||||
.rounded-left {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rounded-0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
//
|
||||
// Display utilities
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.d#{$infix}-none { display: none !important; }
|
||||
.d#{$infix}-inline { display: inline !important; }
|
||||
.d#{$infix}-inline-block { display: inline-block !important; }
|
||||
.d#{$infix}-block { display: block !important; }
|
||||
.d#{$infix}-table { display: table !important; }
|
||||
.d#{$infix}-table-cell { display: table-cell !important; }
|
||||
.d#{$infix}-flex { display: flex !important; }
|
||||
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
// Flex variation
|
||||
//
|
||||
// Custom styles for additional flex alignment options.
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.flex#{$infix}-first { order: -1; }
|
||||
.flex#{$infix}-last { order: 1; }
|
||||
.flex#{$infix}-unordered { order: 0; }
|
||||
|
||||
.flex#{$infix}-row { flex-direction: row !important; }
|
||||
.flex#{$infix}-column { flex-direction: column !important; }
|
||||
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.flex#{$infix}-wrap { flex-wrap: wrap !important; }
|
||||
.flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content#{$infix}-start { justify-content: flex-start !important; }
|
||||
.justify-content#{$infix}-end { justify-content: flex-end !important; }
|
||||
.justify-content#{$infix}-center { justify-content: center !important; }
|
||||
.justify-content#{$infix}-between { justify-content: space-between !important; }
|
||||
.justify-content#{$infix}-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items#{$infix}-start { align-items: flex-start !important; }
|
||||
.align-items#{$infix}-end { align-items: flex-end !important; }
|
||||
.align-items#{$infix}-center { align-items: center !important; }
|
||||
.align-items#{$infix}-baseline { align-items: baseline !important; }
|
||||
.align-items#{$infix}-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content#{$infix}-start { align-content: flex-start !important; }
|
||||
.align-content#{$infix}-end { align-content: flex-end !important; }
|
||||
.align-content#{$infix}-center { align-content: center !important; }
|
||||
.align-content#{$infix}-between { align-content: space-between !important; }
|
||||
.align-content#{$infix}-around { align-content: space-around !important; }
|
||||
.align-content#{$infix}-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self#{$infix}-auto { align-self: auto !important; }
|
||||
.align-self#{$infix}-start { align-self: flex-start !important; }
|
||||
.align-self#{$infix}-end { align-self: flex-end !important; }
|
||||
.align-self#{$infix}-center { align-self: center !important; }
|
||||
.align-self#{$infix}-baseline { align-self: baseline !important; }
|
||||
.align-self#{$infix}-stretch { align-self: stretch !important; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.float#{$infix}-left { @include float-left; }
|
||||
.float#{$infix}-right { @include float-right; }
|
||||
.float#{$infix}-none { @include float-none; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
// Positioning
|
||||
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: $zindex-sticky;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// Screenreaders
|
||||
//
|
||||
|
||||
.sr-only {
|
||||
@include sr-only();
|
||||
}
|
||||
|
||||
.sr-only-focusable {
|
||||
@include sr-only-focusable();
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// Width and height
|
||||
|
||||
@each $prop, $abbrev in (width: w, height: h) {
|
||||
@each $size, $length in $sizes {
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.mw-100 { max-width: 100% !important; }
|
||||
.mh-100 { max-height: 100% !important; }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue