preparing Bootstrap 4 Beta 2 update
This commit is contained in:
Holger Könemann
parent
37dc527e5b
commit
0fcfad9a56
1085
css/theme.css
1085
css/theme.css
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 one or more lines are too long
|
|
@ -228,6 +228,10 @@ gulp.task('copy-assets', ['clean-source'], function() {
|
||||||
|
|
||||||
////////////////// All Bootstrap 4 Assets /////////////////////////
|
////////////////// All Bootstrap 4 Assets /////////////////////////
|
||||||
// Copy all Bootstrap JS files
|
// Copy all Bootstrap JS files
|
||||||
|
|
||||||
|
var stream = gulp.src(basePaths.node + 'bootstrap/dist/umd/popper.min.js')
|
||||||
|
.pipe(gulp.dest(basePaths + '/js'));
|
||||||
|
|
||||||
var stream = gulp.src(basePaths.node + 'bootstrap/dist/js/**/*.js')
|
var stream = gulp.src(basePaths.node + 'bootstrap/dist/js/**/*.js')
|
||||||
.pipe(gulp.dest(basePaths.dev + '/js/bootstrap4'));
|
.pipe(gulp.dest(basePaths.dev + '/js/bootstrap4'));
|
||||||
|
|
||||||
|
|
|
||||||
104
js/popper.js
104
js/popper.js
|
|
@ -1,6 +1,6 @@
|
||||||
/**!
|
/**!
|
||||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||||
* @version 1.12.2
|
* @version 1.12.6
|
||||||
* @license
|
* @license
|
||||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||||
*
|
*
|
||||||
|
|
@ -28,22 +28,7 @@
|
||||||
(global.Popper = factory());
|
(global.Popper = factory());
|
||||||
}(this, (function () { 'use strict';
|
}(this, (function () { 'use strict';
|
||||||
|
|
||||||
var nativeHints = ['native code', '[object MutationObserverConstructor]'];
|
var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
|
||||||
|
|
||||||
/**
|
|
||||||
* Determine if a function is implemented natively (as opposed to a polyfill).
|
|
||||||
* @method
|
|
||||||
* @memberof Popper.Utils
|
|
||||||
* @argument {Function | undefined} fn the function to check
|
|
||||||
* @returns {Boolean}
|
|
||||||
*/
|
|
||||||
var isNative = (function (fn) {
|
|
||||||
return nativeHints.some(function (hint) {
|
|
||||||
return (fn || '').toString().indexOf(hint) > -1;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
var isBrowser = typeof window !== 'undefined';
|
|
||||||
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
||||||
var timeoutDuration = 0;
|
var timeoutDuration = 0;
|
||||||
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
||||||
|
|
@ -54,26 +39,16 @@ for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function microtaskDebounce(fn) {
|
function microtaskDebounce(fn) {
|
||||||
var scheduled = false;
|
var called = false;
|
||||||
var i = 0;
|
|
||||||
var elem = document.createElement('span');
|
|
||||||
|
|
||||||
// MutationObserver provides a mechanism for scheduling microtasks, which
|
|
||||||
// are scheduled *before* the next task. This gives us a way to debounce
|
|
||||||
// a function but ensure it's called *before* the next paint.
|
|
||||||
var observer = new MutationObserver(function () {
|
|
||||||
fn();
|
|
||||||
scheduled = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(elem, { attributes: true });
|
|
||||||
|
|
||||||
return function () {
|
return function () {
|
||||||
if (!scheduled) {
|
if (called) {
|
||||||
scheduled = true;
|
return;
|
||||||
elem.setAttribute('x-index', i);
|
|
||||||
i = i + 1; // don't use compund (+=) because it doesn't get optimized in V8
|
|
||||||
}
|
}
|
||||||
|
called = true;
|
||||||
|
Promise.resolve().then(function () {
|
||||||
|
called = false;
|
||||||
|
fn();
|
||||||
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,11 +65,7 @@ function taskDebounce(fn) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// It's common for MutationObserver polyfills to be seen in the wild, however
|
var supportsMicroTasks = isBrowser && window.Promise;
|
||||||
// these rely on Mutation Events which only occur when an element is connected
|
|
||||||
// to the DOM. The algorithm used in this module does not use a connected element,
|
|
||||||
// and so we must ensure that a *native* MutationObserver is available.
|
|
||||||
var supportsNativeMutationObserver = isBrowser && isNative(window.MutationObserver);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create a debounced version of a method, that's asynchronously deferred
|
* Create a debounced version of a method, that's asynchronously deferred
|
||||||
|
|
@ -105,7 +76,7 @@ var supportsNativeMutationObserver = isBrowser && isNative(window.MutationObserv
|
||||||
* @argument {Function} fn
|
* @argument {Function} fn
|
||||||
* @returns {Function}
|
* @returns {Function}
|
||||||
*/
|
*/
|
||||||
var debounce = supportsNativeMutationObserver ? microtaskDebounce : taskDebounce;
|
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if the given variable is a function
|
* Check if the given variable is a function
|
||||||
|
|
@ -158,10 +129,18 @@ function getParentNode(element) {
|
||||||
*/
|
*/
|
||||||
function getScrollParent(element) {
|
function getScrollParent(element) {
|
||||||
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
|
||||||
if (!element || ['HTML', 'BODY', '#document'].indexOf(element.nodeName) !== -1) {
|
if (!element) {
|
||||||
return window.document.body;
|
return window.document.body;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
switch (element.nodeName) {
|
||||||
|
case 'HTML':
|
||||||
|
case 'BODY':
|
||||||
|
return element.ownerDocument.body;
|
||||||
|
case '#document':
|
||||||
|
return element.body;
|
||||||
|
}
|
||||||
|
|
||||||
// Firefox want us to check `-x` and `-y` variations as well
|
// Firefox want us to check `-x` and `-y` variations as well
|
||||||
|
|
||||||
var _getStyleComputedProp = getStyleComputedProperty(element),
|
var _getStyleComputedProp = getStyleComputedProperty(element),
|
||||||
|
|
@ -189,6 +168,10 @@ function getOffsetParent(element) {
|
||||||
var nodeName = offsetParent && offsetParent.nodeName;
|
var nodeName = offsetParent && offsetParent.nodeName;
|
||||||
|
|
||||||
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
||||||
|
if (element) {
|
||||||
|
return element.ownerDocument.documentElement;
|
||||||
|
}
|
||||||
|
|
||||||
return window.document.documentElement;
|
return window.document.documentElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -284,8 +267,8 @@ function getScroll(element) {
|
||||||
var nodeName = element.nodeName;
|
var nodeName = element.nodeName;
|
||||||
|
|
||||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||||
var html = window.document.documentElement;
|
var html = element.ownerDocument.documentElement;
|
||||||
var scrollingElement = window.document.scrollingElement || html;
|
var scrollingElement = element.ownerDocument.scrollingElement || html;
|
||||||
return scrollingElement[upperSide];
|
return scrollingElement[upperSide];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -347,7 +330,7 @@ var isIE10$1 = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
function getSize(axis, body, html, computedStyle) {
|
function getSize(axis, body, html, computedStyle) {
|
||||||
return Math.max(body['offset' + axis], html['client' + axis], html['offset' + axis], isIE10$1() ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0);
|
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE10$1() ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWindowSizes() {
|
function getWindowSizes() {
|
||||||
|
|
@ -534,7 +517,7 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
||||||
var html = window.document.documentElement;
|
var html = element.ownerDocument.documentElement;
|
||||||
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
||||||
var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
||||||
var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
||||||
|
|
@ -595,10 +578,10 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
|
||||||
if (boundariesElement === 'scrollParent') {
|
if (boundariesElement === 'scrollParent') {
|
||||||
boundariesNode = getScrollParent(getParentNode(popper));
|
boundariesNode = getScrollParent(getParentNode(popper));
|
||||||
if (boundariesNode.nodeName === 'BODY') {
|
if (boundariesNode.nodeName === 'BODY') {
|
||||||
boundariesNode = window.document.documentElement;
|
boundariesNode = popper.ownerDocument.documentElement;
|
||||||
}
|
}
|
||||||
} else if (boundariesElement === 'window') {
|
} else if (boundariesElement === 'window') {
|
||||||
boundariesNode = window.document.documentElement;
|
boundariesNode = popper.ownerDocument.documentElement;
|
||||||
} else {
|
} else {
|
||||||
boundariesNode = boundariesElement;
|
boundariesNode = boundariesElement;
|
||||||
}
|
}
|
||||||
|
|
@ -839,10 +822,11 @@ function runModifiers(modifiers, data, ends) {
|
||||||
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
||||||
|
|
||||||
modifiersToRun.forEach(function (modifier) {
|
modifiersToRun.forEach(function (modifier) {
|
||||||
if (modifier.function) {
|
if (modifier['function']) {
|
||||||
|
// eslint-disable-line dot-notation
|
||||||
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
|
||||||
}
|
}
|
||||||
var fn = modifier.function || modifier.fn;
|
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
|
||||||
if (modifier.enabled && isFunction(fn)) {
|
if (modifier.enabled && isFunction(fn)) {
|
||||||
// Add properties to offsets to make them a complete clientRect object
|
// Add properties to offsets to make them a complete clientRect object
|
||||||
// we do this before each modifier to make sure the previous one doesn't
|
// we do this before each modifier to make sure the previous one doesn't
|
||||||
|
|
@ -969,9 +953,19 @@ function destroy() {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the window associated with the element
|
||||||
|
* @argument {Element} element
|
||||||
|
* @returns {Window}
|
||||||
|
*/
|
||||||
|
function getWindow(element) {
|
||||||
|
var ownerDocument = element.ownerDocument;
|
||||||
|
return ownerDocument ? ownerDocument.defaultView : window;
|
||||||
|
}
|
||||||
|
|
||||||
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
||||||
var isBody = scrollParent.nodeName === 'BODY';
|
var isBody = scrollParent.nodeName === 'BODY';
|
||||||
var target = isBody ? window : scrollParent;
|
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
||||||
target.addEventListener(event, callback, { passive: true });
|
target.addEventListener(event, callback, { passive: true });
|
||||||
|
|
||||||
if (!isBody) {
|
if (!isBody) {
|
||||||
|
|
@ -989,7 +983,7 @@ function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
||||||
function setupEventListeners(reference, options, state, updateBound) {
|
function setupEventListeners(reference, options, state, updateBound) {
|
||||||
// Resize event listener on window
|
// Resize event listener on window
|
||||||
state.updateBound = updateBound;
|
state.updateBound = updateBound;
|
||||||
window.addEventListener('resize', state.updateBound, { passive: true });
|
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
||||||
|
|
||||||
// Scroll event listener on scroll parents
|
// Scroll event listener on scroll parents
|
||||||
var scrollElement = getScrollParent(reference);
|
var scrollElement = getScrollParent(reference);
|
||||||
|
|
@ -1020,7 +1014,7 @@ function enableEventListeners() {
|
||||||
*/
|
*/
|
||||||
function removeEventListeners(reference, state) {
|
function removeEventListeners(reference, state) {
|
||||||
// Remove resize event listener on window
|
// Remove resize event listener on window
|
||||||
window.removeEventListener('resize', state.updateBound);
|
getWindow(reference).removeEventListener('resize', state.updateBound);
|
||||||
|
|
||||||
// Remove scroll event listener on scroll parents
|
// Remove scroll event listener on scroll parents
|
||||||
state.scrollParents.forEach(function (target) {
|
state.scrollParents.forEach(function (target) {
|
||||||
|
|
@ -2322,8 +2316,8 @@ var Popper = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
// get reference and popper elements (allow jQuery wrappers)
|
// get reference and popper elements (allow jQuery wrappers)
|
||||||
this.reference = reference.jquery ? reference[0] : reference;
|
this.reference = reference && reference.jquery ? reference[0] : reference;
|
||||||
this.popper = popper.jquery ? popper[0] : popper;
|
this.popper = popper && popper.jquery ? popper[0] : popper;
|
||||||
|
|
||||||
// Deep merge modifiers options
|
// Deep merge modifiers options
|
||||||
this.options.modifiers = {};
|
this.options.modifiers = {};
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
3056
js/theme.js
3056
js/theme.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
18
package.json
18
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "understrap",
|
"name": "understrap",
|
||||||
"version": "0.6.5",
|
"version": "0.6.6",
|
||||||
"description": "Wordpress Theme framework",
|
"description": "Wordpress Theme framework",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
@ -27,30 +27,30 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://understrap.com",
|
"homepage": "https://understrap.com",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "4.0.0-beta",
|
"bootstrap": "4.0.0-beta.2",
|
||||||
"browser-sync": "^2.18.12",
|
"browser-sync": "^2.18.13",
|
||||||
"del": "^3.0.0",
|
"del": "^3.0.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
"gulp-clean-css": "^3.7.0",
|
"gulp-clean-css": "^3.9.0",
|
||||||
"gulp-clone": "^1.0.0",
|
"gulp-clone": "^1.0.0",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-cssnano": "^2.1.2",
|
"gulp-cssnano": "^2.1.2",
|
||||||
"gulp-ignore": "^2.0.2",
|
"gulp-ignore": "^2.0.2",
|
||||||
"gulp-imagemin": "^3.3.0",
|
"gulp-imagemin": "^3.4.0",
|
||||||
"gulp-merge": "^0.1.1",
|
"gulp-merge": "^0.1.1",
|
||||||
"gulp-plumber": "^1.1.0",
|
"gulp-plumber": "^1.1.0",
|
||||||
"gulp-rename": "^1.2.2",
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-rimraf": "^0.2.1",
|
"gulp-rimraf": "^0.2.1",
|
||||||
"gulp-sass": "^3.1.0",
|
"gulp-sass": "^3.1.0",
|
||||||
"gulp-sequence": "^0.4.6",
|
"gulp-sequence": "^0.4.6",
|
||||||
"gulp-sourcemaps": "2.6.0",
|
"gulp-sourcemaps": "2.6.1",
|
||||||
"gulp-uglify": "^3.0.0",
|
"gulp-uglify": "^3.0.0",
|
||||||
"gulp-watch": "^4.3.11",
|
"gulp-watch": "^4.3.11",
|
||||||
"jquery": "3.2.1",
|
"jquery": "3.2.1",
|
||||||
"merge2": "^1.1.0",
|
"merge2": "^1.2.0",
|
||||||
"popper.js": "^1.11.1",
|
"popper.js": "^1.12.6",
|
||||||
"run-sequence": "^2.0.0",
|
"run-sequence": "^2.2.0",
|
||||||
"undescores-for-npm": "^1.0.0"
|
"undescores-for-npm": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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
|
|
@ -3,6 +3,7 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
|
position: relative;
|
||||||
padding: $alert-padding-y $alert-padding-x;
|
padding: $alert-padding-y $alert-padding-x;
|
||||||
margin-bottom: $alert-margin-bottom;
|
margin-bottom: $alert-margin-bottom;
|
||||||
border: $alert-border-width solid transparent;
|
border: $alert-border-width solid transparent;
|
||||||
|
|
@ -28,9 +29,9 @@
|
||||||
.alert-dismissible {
|
.alert-dismissible {
|
||||||
// Adjust close link position
|
// Adjust close link position
|
||||||
.close {
|
.close {
|
||||||
position: relative;
|
position: absolute;
|
||||||
top: -$alert-padding-y;
|
top: 0;
|
||||||
right: -$alert-padding-x;
|
right: 0;
|
||||||
padding: $alert-padding-y $alert-padding-x;
|
padding: $alert-padding-y $alert-padding-x;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,10 @@
|
||||||
font-size: $badge-font-size;
|
font-size: $badge-font-size;
|
||||||
font-weight: $badge-font-weight;
|
font-weight: $badge-font-weight;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: $badge-color;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
@include border-radius();
|
@include border-radius($badge-border-radius);
|
||||||
|
|
||||||
// Empty badges collapse automatically
|
// Empty badges collapse automatically
|
||||||
&:empty {
|
&:empty {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,14 @@
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||||
margin-bottom: $breadcrumb-margin-bottom;
|
margin-bottom: $breadcrumb-margin-bottom;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: $breadcrumb-bg;
|
background-color: $breadcrumb-bg;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($border-radius);
|
||||||
@include clearfix;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
float: left;
|
|
||||||
|
|
||||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||||
+ .breadcrumb-item::before {
|
+ .breadcrumb-item::before {
|
||||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||||
|
|
@ -28,6 +27,7 @@
|
||||||
+ .breadcrumb-item:hover::before {
|
+ .breadcrumb-item:hover::before {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
+ .breadcrumb-item:hover::before {
|
+ .breadcrumb-item:hover::before {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
// Make the div behave like a button
|
// Make the div behave like a button
|
||||||
.btn-group,
|
.btn-group,
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
> .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
// the borders properly
|
// the borders properly
|
||||||
|
|
@ -48,7 +47,8 @@
|
||||||
border-radius: 0;
|
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
|
// 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 {
|
.btn-group > .btn:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
|
|
@ -56,25 +56,30 @@
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
// 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 > .btn:last-child:not(:first-child),
|
||||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||||
|
// dropdown buttons within a btn-group)
|
||||||
.btn-group > .btn-group {
|
.btn-group > .btn-group {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||||
> .btn:last-child,
|
> .btn:last-child,
|
||||||
> .dropdown-toggle {
|
> .dropdown-toggle {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
@ -129,7 +134,6 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn-group-vertical {
|
.btn-group-vertical {
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -146,31 +150,36 @@
|
||||||
margin-top: -$input-btn-border-width;
|
margin-top: -$input-btn-border-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group-vertical > .btn {
|
> .btn {
|
||||||
&:not(:first-child):not(:last-child) {
|
&:not(:first-child):not(:last-child) {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child:not(:last-child) {
|
&:first-child:not(:last-child) {
|
||||||
@include border-bottom-radius(0);
|
@include border-bottom-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child:not(:first-child) {
|
&:last-child:not(:first-child) {
|
||||||
@include border-top-radius(0);
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
|
||||||
|
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
|
||||||
|
> .btn-group:first-child:not(:last-child) {
|
||||||
> .btn:last-child,
|
> .btn:last-child,
|
||||||
> .dropdown-toggle {
|
> .dropdown-toggle {
|
||||||
@include border-bottom-radius(0);
|
@include border-bottom-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
|
||||||
|
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||||
@include border-top-radius(0);
|
@include border-top-radius(0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Checkbox and radio options
|
// Checkbox and radio options
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: $btn-focus-box-shadow;
|
box-shadow: $input-btn-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled comes first so active can properly restyle
|
// Disabled comes first so active can properly restyle
|
||||||
|
|
@ -32,10 +32,10 @@
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:not([disabled]):not(.disabled):active,
|
||||||
&.active {
|
&:not([disabled]):not(.disabled).active {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
@include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,7 +58,11 @@ fieldset[disabled] a.btn {
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
.btn-outline-#{$color} {
|
.btn-outline-#{$color} {
|
||||||
@include button-outline-variant($value, #fff);
|
@if $color == "light" {
|
||||||
|
@include button-outline-variant($value, $gray-900);
|
||||||
|
} @else {
|
||||||
|
@include button-outline-variant($value, $white);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -71,36 +75,27 @@ fieldset[disabled] a.btn {
|
||||||
.btn-link {
|
.btn-link {
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:active,
|
|
||||||
&.active,
|
|
||||||
&:disabled {
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@include box-shadow(none);
|
|
||||||
}
|
|
||||||
&,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
@include hover {
|
@include hover {
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
@include hover-focus {
|
|
||||||
color: $link-hover-color;
|
color: $link-hover-color;
|
||||||
text-decoration: $link-hover-decoration;
|
text-decoration: $link-hover-decoration;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
&:disabled {
|
|
||||||
color: $btn-link-disabled-color;
|
|
||||||
|
|
||||||
@include hover-focus {
|
&:focus,
|
||||||
text-decoration: none;
|
&.focus {
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
color: $btn-link-disabled-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// No need for an active state here
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -109,11 +104,11 @@ fieldset[disabled] a.btn {
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn-lg {
|
.btn-lg {
|
||||||
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,23 @@
|
||||||
background-clip: border-box;
|
background-clip: border-box;
|
||||||
border: $card-border-width solid $card-border-color;
|
border: $card-border-width solid $card-border-color;
|
||||||
@include border-radius($card-border-radius);
|
@include border-radius($card-border-radius);
|
||||||
|
|
||||||
|
> hr {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
|
|
@ -44,21 +61,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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
|
// Optional textual caps
|
||||||
//
|
//
|
||||||
|
|
@ -72,6 +74,12 @@
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
+ .list-group {
|
||||||
|
.list-group-item:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
|
|
@ -130,18 +138,26 @@
|
||||||
|
|
||||||
// Card deck
|
// Card deck
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
.card-deck {
|
.card-deck {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: $card-deck-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
margin-right: -$card-deck-margin;
|
margin-right: -$card-deck-margin;
|
||||||
margin-left: -$card-deck-margin;
|
margin-left: -$card-deck-margin;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||||
flex: 1 0 0%;
|
flex: 1 0 0%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-right: $card-deck-margin;
|
margin-right: $card-deck-margin;
|
||||||
|
margin-bottom: 0; // Override the default
|
||||||
margin-left: $card-deck-margin;
|
margin-left: $card-deck-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -152,13 +168,21 @@
|
||||||
// Card groups
|
// Card groups
|
||||||
//
|
//
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
.card-group {
|
.card-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: $card-group-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||||
flex: 1 0 0%;
|
flex: 1 0 0%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
+ .card {
|
+ .card {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -177,6 +201,7 @@
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
|
|
||||||
|
|
@ -188,7 +213,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child) {
|
&:only-child {
|
||||||
|
@include border-radius($card-border-radius);
|
||||||
|
|
||||||
|
.card-img-top {
|
||||||
|
@include border-top-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
.card-img-bottom {
|
||||||
|
@include border-bottom-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
|
|
|
||||||
|
|
@ -90,9 +90,15 @@
|
||||||
}
|
}
|
||||||
.carousel-control-prev {
|
.carousel-control-prev {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.carousel-control-next {
|
.carousel-control-next {
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icons for within
|
// Icons for within
|
||||||
|
|
|
||||||
|
|
@ -19,11 +19,11 @@
|
||||||
// If you want the anchor version, it requires `href="#"`.
|
// If you want the anchor version, it requires `href="#"`.
|
||||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||||
|
|
||||||
// scss-lint:disable QualifyingElement
|
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||||
button.close {
|
button.close {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
// scss-lint:enable QualifyingElement
|
// stylelint-enable
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
// scss-lint:disable PropertyCount, VendorPrefix
|
|
||||||
|
|
||||||
// Embedded icons from Open Iconic.
|
// Embedded icons from Open Iconic.
|
||||||
// Released under MIT and copyright 2014 Waybury.
|
// Released under MIT and copyright 2014 Waybury.
|
||||||
// https://useiconic.com/open
|
// https://useiconic.com/open
|
||||||
|
|
@ -24,7 +22,7 @@
|
||||||
|
|
||||||
&:checked ~ .custom-control-indicator {
|
&:checked ~ .custom-control-indicator {
|
||||||
color: $custom-control-indicator-checked-color;
|
color: $custom-control-indicator-checked-color;
|
||||||
background-color: $custom-control-indicator-checked-bg;
|
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||||
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -35,7 +33,7 @@
|
||||||
|
|
||||||
&:active ~ .custom-control-indicator {
|
&:active ~ .custom-control-indicator {
|
||||||
color: $custom-control-indicator-active-color;
|
color: $custom-control-indicator-active-color;
|
||||||
background-color: $custom-control-indicator-active-bg;
|
@include gradient-bg($custom-control-indicator-active-bg);
|
||||||
@include box-shadow($custom-control-indicator-active-box-shadow);
|
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -139,7 +137,6 @@
|
||||||
color: $custom-select-color;
|
color: $custom-select-color;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||||
background-clip: padding-box;
|
|
||||||
background-size: $custom-select-bg-size;
|
background-size: $custom-select-bg-size;
|
||||||
border: $custom-select-border-width solid $custom-select-border-color;
|
border: $custom-select-border-width solid $custom-select-border-color;
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
|
|
@ -165,6 +162,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[multiple] {
|
||||||
|
height: auto;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: $custom-select-disabled-color;
|
color: $custom-select-disabled-color;
|
||||||
background-color: $custom-select-disabled-bg;
|
background-color: $custom-select-disabled-bg;
|
||||||
|
|
@ -216,13 +218,11 @@
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
overflow: hidden;
|
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
color: $custom-file-color;
|
color: $custom-file-color;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: $custom-file-bg;
|
background-color: $custom-file-bg;
|
||||||
background-clip: padding-box;
|
|
||||||
border: $custom-file-border-width solid $custom-file-border-color;
|
border: $custom-file-border-width solid $custom-file-border-color;
|
||||||
@include border-radius($custom-file-border-radius);
|
@include border-radius($custom-file-border-radius);
|
||||||
@include box-shadow($custom-file-box-shadow);
|
@include box-shadow($custom-file-box-shadow);
|
||||||
|
|
@ -235,16 +235,18 @@
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: -$custom-file-border-width;
|
||||||
right: 0;
|
right: -$custom-file-border-width;
|
||||||
|
bottom: -$custom-file-border-width;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
display: block;
|
display: block;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
color: $custom-file-button-color;
|
color: $custom-file-button-color;
|
||||||
background-color: $custom-file-button-bg;
|
@include gradient-bg($custom-file-button-bg);
|
||||||
border-left: $custom-file-border-width solid $custom-file-border-color;
|
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) {
|
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||||
|
|
|
||||||
|
|
@ -6,37 +6,7 @@
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle {
|
||||||
// Generate the caret automatically
|
// Generate the caret automatically
|
||||||
&::after {
|
@include caret;
|
||||||
display: inline-block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
margin-left: $caret-width * .85;
|
|
||||||
vertical-align: $caret-width * .85;
|
|
||||||
content: "";
|
|
||||||
border-top: $caret-width solid;
|
|
||||||
border-right: $caret-width solid transparent;
|
|
||||||
border-left: $caret-width solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:empty::after {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
||||||
// Just add .dropup after the standard .dropdown class and you're set.
|
|
||||||
.dropup {
|
|
||||||
.dropdown-menu {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: $dropdown-spacer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-toggle {
|
|
||||||
&::after {
|
|
||||||
border-top: 0;
|
|
||||||
border-bottom: $caret-width solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// The dropdown menu
|
// The dropdown menu
|
||||||
|
|
@ -61,6 +31,19 @@
|
||||||
@include box-shadow($dropdown-box-shadow);
|
@include box-shadow($dropdown-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
|
// Just add .dropup after the standard .dropdown class and you're set.
|
||||||
|
.dropup {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(up);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Dividers (basically an `<hr>`) within the dropdown
|
// Dividers (basically an `<hr>`) within the dropdown
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
@include nav-divider($dropdown-divider-bg);
|
@include nav-divider($dropdown-divider-bg);
|
||||||
|
|
@ -84,14 +67,14 @@
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $dropdown-link-hover-color;
|
color: $dropdown-link-hover-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $dropdown-link-hover-bg;
|
@include gradient-bg($dropdown-link-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
&:active {
|
&:active {
|
||||||
color: $dropdown-link-active-color;
|
color: $dropdown-link-active-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $dropdown-link-active-bg;
|
@include gradient-bg($dropdown-link-active-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
|
|
@ -105,14 +88,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Open state for the dropdown
|
|
||||||
.show {
|
|
||||||
// Remove the outline when :focus is triggered
|
|
||||||
> a {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu.show {
|
.dropdown-menu.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement, VendorPrefix
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
//
|
//
|
||||||
// Textual form controls
|
// Textual form controls
|
||||||
|
|
@ -7,8 +7,6 @@
|
||||||
.form-control {
|
.form-control {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
||||||
// height: $input-height;
|
|
||||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-btn-line-height;
|
||||||
|
|
@ -90,21 +88,24 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the label text to
|
// For use with horizontal and inline forms, when you need the label text to
|
||||||
// align with the form controls.
|
// align with the form controls.
|
||||||
.col-form-label {
|
.col-form-label {
|
||||||
padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||||
margin-bottom: 0; // Override the `<label>` default
|
margin-bottom: 0; // Override the `<label>` default
|
||||||
|
line-height: $input-btn-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-lg {
|
.col-form-label-lg {
|
||||||
padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
|
line-height: $input-btn-line-height-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-sm {
|
.col-form-label-sm {
|
||||||
padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
|
line-height: $input-btn-line-height-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -132,6 +133,7 @@ select.form-control {
|
||||||
padding-bottom: $input-btn-padding-y;
|
padding-bottom: $input-btn-padding-y;
|
||||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-btn-line-height;
|
||||||
|
background-color: transparent;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
border-width: $input-btn-border-width 0;
|
border-width: $input-btn-border-width 0;
|
||||||
|
|
||||||
|
|
@ -241,14 +243,11 @@ select.form-control-lg {
|
||||||
// Radios and checkboxes on same line
|
// Radios and checkboxes on same line
|
||||||
.form-check-inline {
|
.form-check-inline {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-right: $form-check-inline-margin-x;
|
||||||
|
|
||||||
.form-check-label {
|
.form-check-label {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .form-check-inline {
|
|
||||||
margin-left: $form-check-inline-margin-x;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -259,28 +258,6 @@ select.form-control-lg {
|
||||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||||
// server side validation.
|
// server side validation.
|
||||||
|
|
||||||
.invalid-feedback {
|
|
||||||
display: none;
|
|
||||||
margin-top: .25rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
color: $form-feedback-invalid-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invalid-tooltip {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
z-index: 5;
|
|
||||||
display: none;
|
|
||||||
width: 250px;
|
|
||||||
padding: .5rem;
|
|
||||||
margin-top: .1rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
line-height: 1;
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba($form-feedback-invalid-color,.8);
|
|
||||||
border-radius: .2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include form-validation-state("valid", $form-feedback-valid-color);
|
@include form-validation-state("valid", $form-feedback-valid-color);
|
||||||
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
||||||
|
|
||||||
|
|
@ -339,11 +316,6 @@ select.form-control-lg {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||||
// then undo the floating of radios and checkboxes to match.
|
// then undo the floating of radios and checkboxes to match.
|
||||||
.form-check {
|
.form-check {
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Color contrast
|
// Color contrast
|
||||||
@mixin color-yiq($color) {
|
@function color-yiq($color) {
|
||||||
$r: red($color);
|
$r: red($color);
|
||||||
$g: green($color);
|
$g: green($color);
|
||||||
$b: blue($color);
|
$b: blue($color);
|
||||||
|
|
@ -57,9 +57,9 @@
|
||||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||||
|
|
||||||
@if ($yiq >= 150) {
|
@if ($yiq >= 150) {
|
||||||
color: #111;
|
@return #111;
|
||||||
} @else {
|
} @else {
|
||||||
color: #fff;
|
@return #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
@return map-get($theme-colors, $key);
|
@return map-get($theme-colors, $key);
|
||||||
}
|
}
|
||||||
|
|
||||||
@function grayscale($key: "100") {
|
@function gray($key: "100") {
|
||||||
@return map-get($grays, $key);
|
@return map-get($grays, $key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,11 +80,7 @@
|
||||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||||
$color: theme-color($color-name);
|
$color: theme-color($color-name);
|
||||||
$color-base: if($level > 0, #000, #fff);
|
$color-base: if($level > 0, #000, #fff);
|
||||||
|
$level: abs($level);
|
||||||
|
|
||||||
@if $level < 0 {
|
|
||||||
// Lighter values need a quick double negative for the Sass math to work
|
|
||||||
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
|
|
||||||
} @else {
|
|
||||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
|
|
||||||
@if $enable-grid-classes {
|
@if $enable-grid-classes {
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
width: 100%;
|
|
||||||
@include make-container();
|
@include make-container();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
//
|
//
|
||||||
// Base styles
|
// Base styles
|
||||||
//
|
//
|
||||||
|
|
@ -5,6 +7,7 @@
|
||||||
.input-group {
|
.input-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
|
|
@ -28,10 +31,8 @@
|
||||||
.input-group-addon,
|
.input-group-addon,
|
||||||
.input-group-btn,
|
.input-group-btn,
|
||||||
.input-group .form-control {
|
.input-group .form-control {
|
||||||
// Vertically centers the content of the addons within the input group
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child) {
|
&:not(:first-child):not(:last-child) {
|
||||||
@include border-radius(0);
|
@include border-radius(0);
|
||||||
}
|
}
|
||||||
|
|
@ -40,7 +41,6 @@
|
||||||
.input-group-addon,
|
.input-group-addon,
|
||||||
.input-group-btn {
|
.input-group-btn {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle; // Match the inputs
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -74,7 +74,6 @@
|
||||||
color: $input-group-addon-color;
|
color: $input-group-addon-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $input-group-addon-bg;
|
background-color: $input-group-addon-bg;
|
||||||
background-clip: padding-box;
|
|
||||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||||
@include border-radius($input-border-radius);
|
@include border-radius($input-border-radius);
|
||||||
|
|
||||||
|
|
@ -91,13 +90,11 @@
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable QualifyingElement
|
|
||||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
// scss-lint:enable QualifyingElement
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -136,6 +133,7 @@
|
||||||
|
|
||||||
.input-group-btn {
|
.input-group-btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
align-items: stretch;
|
||||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||||
// `font-size` in combination with `inline-block` on buttons.
|
// `font-size` in combination with `inline-block` on buttons.
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
|
@ -145,8 +143,6 @@
|
||||||
// element above the siblings.
|
// element above the siblings.
|
||||||
> .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-clip: padding-box;
|
|
||||||
border: $input-btn-border-width solid $input-group-btn-border-color;
|
|
||||||
|
|
||||||
+ .btn {
|
+ .btn {
|
||||||
margin-left: (-$input-btn-border-width);
|
margin-left: (-$input-btn-border-width);
|
||||||
|
|
@ -158,6 +154,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:first-child > .btn + .btn {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
// Negative margin to only have a single, shared border between the two
|
// Negative margin to only have a single, shared border between the two
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
> .btn,
|
> .btn,
|
||||||
|
|
@ -169,7 +169,14 @@
|
||||||
> .btn,
|
> .btn,
|
||||||
> .btn-group {
|
> .btn-group {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
// When input is first, overlap the right side of it with the button(-group)
|
||||||
|
&:first-child {
|
||||||
margin-left: (-$input-btn-border-width);
|
margin-left: (-$input-btn-border-width);
|
||||||
|
}
|
||||||
|
|
||||||
// Because specificity
|
// Because specificity
|
||||||
@include hover-focus-active {
|
@include hover-focus-active {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
// // Components
|
// // Components
|
||||||
@import "mixins/alert";
|
@import "mixins/alert";
|
||||||
@import "mixins/buttons";
|
@import "mixins/buttons";
|
||||||
|
@import "mixins/caret";
|
||||||
@import "mixins/pagination";
|
@import "mixins/pagination";
|
||||||
@import "mixins/lists";
|
@import "mixins/lists";
|
||||||
@import "mixins/list-group";
|
@import "mixins/list-group";
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: $modal-dialog-margin;
|
margin: $modal-dialog-margin;
|
||||||
|
// allow clicks to pass through for custom click handling to close modal
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Actual modal
|
// Actual modal
|
||||||
|
|
@ -50,6 +52,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
// counteract the pointer-events: none; in the .modal-dialog
|
||||||
|
pointer-events: auto;
|
||||||
background-color: $modal-content-bg;
|
background-color: $modal-content-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $modal-content-border-width solid $modal-content-border-color;
|
border: $modal-content-border-width solid $modal-content-border-color;
|
||||||
|
|
@ -78,13 +82,16 @@
|
||||||
// Top section of the modal w/ title and dismiss
|
// Top section of the modal w/ title and dismiss
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center; // vertically center it
|
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||||
padding: $modal-header-padding;
|
padding: $modal-header-padding;
|
||||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||||
|
@include border-top-radius($border-radius-lg);
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
margin-left: auto; // Force icon to the right even when there's no .modal-title
|
padding: $modal-header-padding;
|
||||||
|
// auto on the left force icon to the right even when there is no .modal-title
|
||||||
|
margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -74,14 +74,14 @@
|
||||||
.nav-pills {
|
.nav-pills {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
@include border-radius($nav-pills-border-radius);
|
@include border-radius($nav-pills-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
&.active,
|
.nav-link.active,
|
||||||
.show > & {
|
.show > .nav-link {
|
||||||
color: $nav-pills-link-active-color;
|
color: $nav-pills-link-active-color;
|
||||||
background-color: $nav-pills-link-active-bg;
|
background-color: $nav-pills-link-active-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -98,6 +98,7 @@
|
||||||
// on the `.navbar` parent.
|
// on the `.navbar` parent.
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
// For always expanded or extra full navbars, ensure content aligns itself
|
// For always expanded or extra full navbars, ensure content aligns itself
|
||||||
// properly vertically. Can be easily overridden with flex utilities.
|
// properly vertically. Can be easily overridden with flex utilities.
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -146,8 +147,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up($next) {
|
@include media-breakpoint-up($next) {
|
||||||
flex-direction: row;
|
flex-flow: row nowrap;
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
|
|
@ -174,15 +174,23 @@
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-lint:disable ImportantRule
|
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
display: flex !important;
|
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||||
|
|
||||||
|
// Changes flex-bases to auto because of an IE10 bug
|
||||||
|
flex-basis: auto;
|
||||||
}
|
}
|
||||||
// scss-lint:enable ImportantRule
|
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropup {
|
||||||
|
.dropdown-menu {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -235,6 +243,13 @@
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: $navbar-light-color;
|
color: $navbar-light-color;
|
||||||
|
a {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-light-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -280,5 +295,12 @@
|
||||||
|
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: $navbar-dark-color;
|
color: $navbar-dark-color;
|
||||||
|
a {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $navbar-dark-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
// 1-2: Disable browser default list styles
|
@include list-unstyled();
|
||||||
padding-left: 0; // 1
|
|
||||||
list-style: none; // 2
|
|
||||||
@include border-radius();
|
@include border-radius();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -38,7 +36,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $pagination-padding-y $pagination-padding-x;
|
padding: $pagination-padding-y $pagination-padding-x;
|
||||||
margin-left: -1px;
|
margin-left: -$pagination-border-width;
|
||||||
line-height: $pagination-line-height;
|
line-height: $pagination-line-height;
|
||||||
color: $pagination-color;
|
color: $pagination-color;
|
||||||
background-color: $pagination-bg;
|
background-color: $pagination-bg;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
z-index: $zindex-popover;
|
z-index: $zindex-popover;
|
||||||
display: block;
|
display: block;
|
||||||
max-width: $popover-max-width;
|
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.
|
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||||
// So reset our font and text properties to avoid inheriting weird values.
|
// So reset our font and text properties to avoid inheriting weird values.
|
||||||
@include reset-text();
|
@include reset-text();
|
||||||
|
|
@ -39,11 +38,11 @@
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $popover-arrow-outer-width;
|
border-width: $popover-arrow-width;
|
||||||
}
|
}
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $popover-arrow-outer-width;
|
border-width: $popover-arrow-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Popover directions
|
// Popover directions
|
||||||
|
|
@ -61,14 +60,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
bottom: -$popover-arrow-outer-width;
|
bottom: -$popover-arrow-width;
|
||||||
margin-left: -($popover-arrow-outer-width - 5);
|
margin-left: -$popover-arrow-width;
|
||||||
border-top-color: $popover-arrow-outer-color;
|
border-top-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
bottom: -($popover-arrow-outer-width - 1);
|
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||||
margin-left: -($popover-arrow-outer-width - 5);
|
margin-left: -$popover-arrow-width;
|
||||||
border-top-color: $popover-arrow-color;
|
border-top-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -82,17 +81,17 @@
|
||||||
|
|
||||||
.arrow::before,
|
.arrow::before,
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
margin-top: -($popover-arrow-outer-width - 3);
|
margin-top: -$popover-arrow-width;
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
left: -$popover-arrow-outer-width;
|
left: -$popover-arrow-width;
|
||||||
border-right-color: $popover-arrow-outer-color;
|
border-right-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
left: -($popover-arrow-outer-width - 1);
|
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||||
border-right-color: $popover-arrow-color;
|
border-right-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -106,17 +105,17 @@
|
||||||
|
|
||||||
.arrow::before,
|
.arrow::before,
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
margin-left: -($popover-arrow-width - 3);
|
margin-left: -$popover-arrow-width;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
top: -$popover-arrow-outer-width;
|
top: -$popover-arrow-width;
|
||||||
border-bottom-color: $popover-arrow-outer-color;
|
border-bottom-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
top: -($popover-arrow-outer-width - 1);
|
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||||
border-bottom-color: $popover-arrow-color;
|
border-bottom-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,7 +128,7 @@
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 1px solid $popover-header-bg;
|
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -142,17 +141,17 @@
|
||||||
|
|
||||||
.arrow::before,
|
.arrow::before,
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
margin-top: -($popover-arrow-outer-width - 3);
|
margin-top: -$popover-arrow-width;
|
||||||
border-right-width: 0;
|
border-right-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
right: -$popover-arrow-outer-width;
|
right: -$popover-arrow-width;
|
||||||
border-left-color: $popover-arrow-outer-color;
|
border-left-color: $popover-arrow-outer-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::after {
|
.arrow::after {
|
||||||
right: -($popover-arrow-outer-width - 1);
|
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||||
border-left-color: $popover-arrow-color;
|
border-left-color: $popover-arrow-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||||
|
|
||||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||||
|
|
||||||
|
|
@ -14,8 +14,7 @@
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
// Bootstrap specific; comment out `color` and `background`
|
// Bootstrap specific; comment out `color` and `background`
|
||||||
//color: #000 !important; // Black prints faster:
|
//color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
|
||||||
// http://www.sanbeiji.com/archives/953
|
|
||||||
text-shadow: none !important;
|
text-shadow: none !important;
|
||||||
//background: transparent !important;
|
//background: transparent !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
|
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||||
|
|
||||||
// Reboot
|
// Reboot
|
||||||
//
|
//
|
||||||
|
|
@ -35,13 +35,17 @@ html {
|
||||||
|
|
||||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||||
@at-root {
|
@at-root {
|
||||||
@-ms-viewport { width: device-width; }
|
@-ms-viewport {
|
||||||
|
width: device-width;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// stylelint-disable selector-list-comma-newline-after
|
||||||
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
||||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
// stylelint-enable selector-list-comma-newline-after
|
||||||
|
|
||||||
// Body
|
// Body
|
||||||
//
|
//
|
||||||
|
|
@ -91,10 +95,12 @@ hr {
|
||||||
//
|
//
|
||||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
// 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.
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
// stylelint-disable selector-list-comma-newline-after
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: $headings-margin-bottom;
|
||||||
}
|
}
|
||||||
|
// stylelint-enable selector-list-comma-newline-after
|
||||||
|
|
||||||
// Reset margins on paragraphs
|
// Reset margins on paragraphs
|
||||||
//
|
//
|
||||||
|
|
@ -157,10 +163,12 @@ dfn {
|
||||||
font-style: italic; // Add the correct font style in Android 4.3-
|
font-style: italic; // Add the correct font style in Android 4.3-
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// stylelint-disable font-weight-notation
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
||||||
}
|
}
|
||||||
|
// stylelint-enable font-weight-notation
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%; // Add the correct font size in all browsers
|
font-size: 80%; // Add the correct font size in all browsers
|
||||||
|
|
@ -224,6 +232,7 @@ a:not([href]):not([tabindex]) {
|
||||||
// Code
|
// Code
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// stylelint-disable font-family-no-duplicate-names
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
|
|
@ -231,6 +240,7 @@ samp {
|
||||||
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
|
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
|
||||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||||
}
|
}
|
||||||
|
// stylelint-enable font-family-no-duplicate-names
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
// Remove browser default top margin
|
// Remove browser default top margin
|
||||||
|
|
@ -239,6 +249,9 @@ pre {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
// Don't allow content to break outside
|
// Don't allow content to break outside
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
// We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
|
||||||
|
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -272,15 +285,15 @@ svg:not(:root) {
|
||||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
// 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`.
|
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||||
// See:
|
// See:
|
||||||
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
||||||
// * http://caniuse.com/#feat=css-touch-action
|
// * https://caniuse.com/#feat=css-touch-action
|
||||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||||
|
|
||||||
a,
|
a,
|
||||||
area,
|
area,
|
||||||
button,
|
button,
|
||||||
[role="button"],
|
[role="button"],
|
||||||
input,
|
input:not([type="range"]),
|
||||||
label,
|
label,
|
||||||
select,
|
select,
|
||||||
summary,
|
summary,
|
||||||
|
|
@ -322,6 +335,13 @@ label {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove the default `border-radius` that macOS Chrome adds.
|
||||||
|
//
|
||||||
|
// Details at https://github.com/twbs/bootstrap/issues/24093
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
// Work around a Firefox/IE bug where the transparent `button` background
|
// Work around a Firefox/IE bug where the transparent `button` background
|
||||||
// results in a loss of the default `button` focus styles.
|
// results in a loss of the default `button` focus styles.
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
:root {
|
||||||
|
// Custom variable values only support SassScript inside `#{}`.
|
||||||
|
@each $color, $value in $colors {
|
||||||
|
--#{$color}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
--#{$color}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $bp, $value in $grid-breakpoints {
|
||||||
|
--breakpoint-#{$bp}: #{$value};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use `inspect` for lists so that quoted items keep the quotes.
|
||||||
|
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||||
|
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
||||||
|
--font-family-monospace: #{inspect($font-family-monospace)};
|
||||||
|
}
|
||||||
|
|
@ -99,32 +99,37 @@
|
||||||
@include table-row-variant(active, $table-active-bg);
|
@include table-row-variant(active, $table-active-bg);
|
||||||
|
|
||||||
|
|
||||||
// Inverse styles
|
// Dark styles
|
||||||
//
|
//
|
||||||
// Same table markup, but inverted color scheme: dark background and light text.
|
// Same table markup, but inverted color scheme: dark background and light text.
|
||||||
|
|
||||||
.thead-inverse {
|
// stylelint-disable-next-line no-duplicate-selectors
|
||||||
|
.table {
|
||||||
|
.thead-dark {
|
||||||
th {
|
th {
|
||||||
color: $table-inverse-color;
|
color: $table-dark-color;
|
||||||
background-color: $table-inverse-bg;
|
background-color: $table-dark-bg;
|
||||||
|
border-color: $table-dark-border-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.thead-default {
|
.thead-light {
|
||||||
th {
|
th {
|
||||||
color: $table-head-color;
|
color: $table-head-color;
|
||||||
background-color: $table-head-bg;
|
background-color: $table-head-bg;
|
||||||
|
border-color: $table-border-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-inverse {
|
.table-dark {
|
||||||
color: $table-inverse-color;
|
color: $table-dark-color;
|
||||||
background-color: $table-inverse-bg;
|
background-color: $table-dark-bg;
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td,
|
td,
|
||||||
thead th {
|
thead th {
|
||||||
border-color: $table-inverse-border-color;
|
border-color: $table-dark-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.table-bordered {
|
&.table-bordered {
|
||||||
|
|
@ -133,14 +138,14 @@
|
||||||
|
|
||||||
&.table-striped {
|
&.table-striped {
|
||||||
tbody tr:nth-of-type(odd) {
|
tbody tr:nth-of-type(odd) {
|
||||||
background-color: $table-inverse-accent-bg;
|
background-color: $table-dark-accent-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.table-hover {
|
&.table-hover {
|
||||||
tbody tr {
|
tbody tr {
|
||||||
@include hover {
|
@include hover {
|
||||||
background-color: $table-inverse-hover-bg;
|
background-color: $table-dark-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -149,15 +154,20 @@
|
||||||
|
|
||||||
// Responsive tables
|
// Responsive tables
|
||||||
//
|
//
|
||||||
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
|
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||||
// enabling horizontal scrolling. Only applies <768px. Everything above that
|
// size of where your table will overflow.
|
||||||
// will display normally.
|
|
||||||
|
|
||||||
.table-responsive {
|
.table-responsive {
|
||||||
@include media-breakpoint-down(md) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||||
|
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||||
|
|
||||||
|
&#{$infix} {
|
||||||
|
@include media-breakpoint-down($breakpoint) {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
||||||
|
|
||||||
// Prevent double border on horizontal scroll due to use of `display: block;`
|
// Prevent double border on horizontal scroll due to use of `display: block;`
|
||||||
|
|
@ -166,3 +176,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,12 @@
|
||||||
height: $tooltip-arrow-height;
|
height: $tooltip-arrow-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.arrow::before {
|
||||||
|
position: absolute;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
&.bs-tooltip-top {
|
&.bs-tooltip-top {
|
||||||
padding: $tooltip-arrow-width 0;
|
padding: $tooltip-arrow-width 0;
|
||||||
.arrow {
|
.arrow {
|
||||||
|
|
@ -88,12 +94,6 @@
|
||||||
@extend .bs-tooltip-left;
|
@extend .bs-tooltip-left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
|
||||||
position: absolute;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wrapper for the tooltip content
|
// Wrapper for the tooltip content
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable selector-no-qualifying-type
|
||||||
|
|
||||||
.fade {
|
.fade {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@include transition($transition-fade);
|
@include transition($transition-fade);
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
|
||||||
|
|
||||||
//
|
//
|
||||||
// Headings
|
// Headings
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,14 @@
|
||||||
// Variables
|
// Variables
|
||||||
//
|
//
|
||||||
// Copy settings from this file into the provided `_custom.scss` to override
|
|
||||||
// the Bootstrap defaults without modifying key, versioned files.
|
|
||||||
//
|
|
||||||
// Variables should follow the `$component-state-property-size` formula for
|
// Variables should follow the `$component-state-property-size` formula for
|
||||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||||
|
|
||||||
// Table of Contents
|
|
||||||
//
|
|
||||||
// Color system
|
|
||||||
// Options
|
|
||||||
// Spacing
|
|
||||||
// Body
|
|
||||||
// Links
|
|
||||||
// Paragraphs
|
|
||||||
// Grid breakpoints
|
|
||||||
// Grid containers
|
|
||||||
// Grid columns
|
|
||||||
// Fonts
|
|
||||||
// Components
|
|
||||||
// Tables
|
|
||||||
// Buttons
|
|
||||||
// Forms
|
|
||||||
// Dropdowns
|
|
||||||
// Z-index master list
|
|
||||||
// Navs
|
|
||||||
// Navbar
|
|
||||||
// Pagination
|
|
||||||
// Jumbotron
|
|
||||||
// Form states and alerts
|
|
||||||
// Cards
|
|
||||||
// Tooltips
|
|
||||||
// Popovers
|
|
||||||
// Badges
|
|
||||||
// Modals
|
|
||||||
// Alerts
|
|
||||||
// Progress bars
|
|
||||||
// List group
|
|
||||||
// Image thumbnails
|
|
||||||
// Figures
|
|
||||||
// Breadcrumbs
|
|
||||||
// Carousel
|
|
||||||
// Close
|
|
||||||
// Code
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Color system
|
// Color system
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// stylelint-disable
|
||||||
$white: #fff !default;
|
$white: #fff !default;
|
||||||
$gray-100: #f8f9fa !default;
|
$gray-100: #f8f9fa !default;
|
||||||
$gray-200: #e9ecef !default;
|
$gray-200: #e9ecef !default;
|
||||||
|
|
@ -61,17 +21,18 @@ $gray-800: #343a40 !default;
|
||||||
$gray-900: #212529 !default;
|
$gray-900: #212529 !default;
|
||||||
$black: #000 !default;
|
$black: #000 !default;
|
||||||
|
|
||||||
$grays: (
|
$grays: () !default;
|
||||||
100: $gray-100,
|
$grays: map-merge((
|
||||||
200: $gray-200,
|
"100": $gray-100,
|
||||||
300: $gray-300,
|
"200": $gray-200,
|
||||||
400: $gray-400,
|
"300": $gray-300,
|
||||||
500: $gray-500,
|
"400": $gray-400,
|
||||||
600: $gray-600,
|
"500": $gray-500,
|
||||||
700: $gray-700,
|
"600": $gray-600,
|
||||||
800: $gray-800,
|
"700": $gray-700,
|
||||||
900: $gray-900
|
"800": $gray-800,
|
||||||
) !default;
|
"900": $gray-900
|
||||||
|
), $grays);
|
||||||
|
|
||||||
$blue: #007bff !default;
|
$blue: #007bff !default;
|
||||||
$indigo: #6610f2 !default;
|
$indigo: #6610f2 !default;
|
||||||
|
|
@ -84,32 +45,44 @@ $green: #28a745 !default;
|
||||||
$teal: #20c997 !default;
|
$teal: #20c997 !default;
|
||||||
$cyan: #17a2b8 !default;
|
$cyan: #17a2b8 !default;
|
||||||
|
|
||||||
$colors: (
|
$colors: () !default;
|
||||||
blue: $blue,
|
$colors: map-merge((
|
||||||
indigo: $indigo,
|
"blue": $blue,
|
||||||
purple: $purple,
|
"indigo": $indigo,
|
||||||
pink: $pink,
|
"purple": $purple,
|
||||||
red: $red,
|
"pink": $pink,
|
||||||
orange: $orange,
|
"red": $red,
|
||||||
yellow: $yellow,
|
"orange": $orange,
|
||||||
green: $green,
|
"yellow": $yellow,
|
||||||
teal: $teal,
|
"green": $green,
|
||||||
cyan: $cyan,
|
"teal": $teal,
|
||||||
white: $white,
|
"cyan": $cyan,
|
||||||
gray: $gray-600,
|
"white": $white,
|
||||||
gray-dark: $gray-800
|
"gray": $gray-600,
|
||||||
) !default;
|
"gray-dark": $gray-800
|
||||||
|
), $colors);
|
||||||
|
|
||||||
$theme-colors: (
|
$primary: $blue !default;
|
||||||
primary: $blue,
|
$secondary: $gray-600 !default;
|
||||||
secondary: $gray-600,
|
$success: $green !default;
|
||||||
success: $green,
|
$info: $cyan !default;
|
||||||
info: $cyan,
|
$warning: $yellow !default;
|
||||||
warning: $yellow,
|
$danger: $red !default;
|
||||||
danger: $red,
|
$light: $gray-100 !default;
|
||||||
light: $gray-100,
|
$dark: $gray-800 !default;
|
||||||
dark: $gray-800
|
|
||||||
) !default;
|
$theme-colors: () !default;
|
||||||
|
$theme-colors: map-merge((
|
||||||
|
"primary": $primary,
|
||||||
|
"secondary": $secondary,
|
||||||
|
"success": $success,
|
||||||
|
"info": $info,
|
||||||
|
"warning": $warning,
|
||||||
|
"danger": $danger,
|
||||||
|
"light": $light,
|
||||||
|
"dark": $dark
|
||||||
|
), $theme-colors);
|
||||||
|
// stylelint-enable
|
||||||
|
|
||||||
// Set a specific jump point for requesting color jumps
|
// Set a specific jump point for requesting color jumps
|
||||||
$theme-color-interval: 8% !default;
|
$theme-color-interval: 8% !default;
|
||||||
|
|
@ -119,6 +92,7 @@ $theme-color-interval: 8% !default;
|
||||||
//
|
//
|
||||||
// Quickly modify global styling by enabling or disabling optional features.
|
// Quickly modify global styling by enabling or disabling optional features.
|
||||||
|
|
||||||
|
$enable-caret: true !default;
|
||||||
$enable-rounded: true !default;
|
$enable-rounded: true !default;
|
||||||
$enable-shadows: false !default;
|
$enable-shadows: false !default;
|
||||||
$enable-gradients: false !default;
|
$enable-gradients: false !default;
|
||||||
|
|
@ -172,7 +146,7 @@ $link-hover-decoration: underline !default;
|
||||||
//
|
//
|
||||||
// Style p element.
|
// Style p element.
|
||||||
|
|
||||||
$paragraph-margin-bottom: 1rem;
|
$paragraph-margin-bottom: 1rem !default;
|
||||||
|
|
||||||
|
|
||||||
// Grid breakpoints
|
// Grid breakpoints
|
||||||
|
|
@ -187,6 +161,7 @@ $grid-breakpoints: (
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
xl: 1200px
|
xl: 1200px
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||||
@include _assert-starts-at-zero($grid-breakpoints);
|
@include _assert-starts-at-zero($grid-breakpoints);
|
||||||
|
|
||||||
|
|
@ -201,6 +176,7 @@ $container-max-widths: (
|
||||||
lg: 960px,
|
lg: 960px,
|
||||||
xl: 1140px
|
xl: 1140px
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -239,32 +215,34 @@ $transition-collapse: height .35s ease !default;
|
||||||
//
|
//
|
||||||
// Font, line-height, and color for body text, headings, and more.
|
// Font, line-height, and color for body text, headings, and more.
|
||||||
|
|
||||||
|
// stylelint-disable value-keyword-case
|
||||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||||
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||||
$font-family-base: $font-family-sans-serif !default;
|
$font-family-base: $font-family-sans-serif !default;
|
||||||
|
// stylelint-enable value-keyword-case
|
||||||
|
|
||||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||||
$font-size-lg: 1.25rem !default;
|
$font-size-lg: ($font-size-base * 1.25) !default;
|
||||||
$font-size-sm: .875rem !default;
|
$font-size-sm: ($font-size-base * .875) !default;
|
||||||
|
|
||||||
$font-weight-light: 300 !default;
|
$font-weight-light: 300 !default;
|
||||||
$font-weight-normal: normal !default;
|
$font-weight-normal: 400 !default;
|
||||||
$font-weight-bold: bold !default;
|
$font-weight-bold: 700 !default;
|
||||||
|
|
||||||
$font-weight-base: $font-weight-normal !default;
|
$font-weight-base: $font-weight-normal !default;
|
||||||
$line-height-base: 1.5 !default;
|
$line-height-base: 1.5 !default;
|
||||||
|
|
||||||
$h1-font-size: 2.5rem !default;
|
$h1-font-size: $font-size-base * 2.5 !default;
|
||||||
$h2-font-size: 2rem !default;
|
$h2-font-size: $font-size-base * 2 !default;
|
||||||
$h3-font-size: 1.75rem !default;
|
$h3-font-size: $font-size-base * 1.75 !default;
|
||||||
$h4-font-size: 1.5rem !default;
|
$h4-font-size: $font-size-base * 1.5 !default;
|
||||||
$h5-font-size: 1.25rem !default;
|
$h5-font-size: $font-size-base * 1.25 !default;
|
||||||
$h6-font-size: 1rem !default;
|
$h6-font-size: $font-size-base !default;
|
||||||
|
|
||||||
$headings-margin-bottom: ($spacer / 2) !default;
|
$headings-margin-bottom: ($spacer / 2) !default;
|
||||||
$headings-font-family: inherit !default;
|
$headings-font-family: inherit !default;
|
||||||
$headings-font-weight: 500 !default;
|
$headings-font-weight: 500 !default;
|
||||||
$headings-line-height: 1.1 !default;
|
$headings-line-height: 1.2 !default;
|
||||||
$headings-color: inherit !default;
|
$headings-color: inherit !default;
|
||||||
|
|
||||||
$display1-size: 6rem !default;
|
$display1-size: 6rem !default;
|
||||||
|
|
@ -278,7 +256,7 @@ $display3-weight: 300 !default;
|
||||||
$display4-weight: 300 !default;
|
$display4-weight: 300 !default;
|
||||||
$display-line-height: $headings-line-height !default;
|
$display-line-height: $headings-line-height !default;
|
||||||
|
|
||||||
$lead-font-size: 1.25rem !default;
|
$lead-font-size: ($font-size-base * 1.25) !default;
|
||||||
$lead-font-weight: 300 !default;
|
$lead-font-weight: 300 !default;
|
||||||
|
|
||||||
$small-font-size: 80% !default;
|
$small-font-size: 80% !default;
|
||||||
|
|
@ -321,32 +299,35 @@ $table-border-color: $gray-200 !default;
|
||||||
$table-head-bg: $gray-200 !default;
|
$table-head-bg: $gray-200 !default;
|
||||||
$table-head-color: $gray-700 !default;
|
$table-head-color: $gray-700 !default;
|
||||||
|
|
||||||
$table-inverse-bg: $gray-900 !default;
|
$table-dark-bg: $gray-900 !default;
|
||||||
$table-inverse-accent-bg: rgba($white, .05) !default;
|
$table-dark-accent-bg: rgba($white, .05) !default;
|
||||||
$table-inverse-hover-bg: rgba($white, .075) !default;
|
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||||
$table-inverse-border-color: lighten($gray-900, 7.5%) !default;
|
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
|
||||||
$table-inverse-color: $body-bg !default;
|
$table-dark-color: $body-bg !default;
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
//
|
//
|
||||||
// For each of Bootstrap's buttons, define text, background and border color.
|
// For each of Bootstrap's buttons, define text, background and border color.
|
||||||
|
|
||||||
$input-btn-padding-y: .5rem !default;
|
$input-btn-padding-y: .375rem !default;
|
||||||
$input-btn-padding-x: .75rem !default;
|
$input-btn-padding-x: .75rem !default;
|
||||||
$input-btn-line-height: 1.25 !default;
|
$input-btn-line-height: $line-height-base !default;
|
||||||
|
|
||||||
|
$input-btn-focus-width: .2rem !default;
|
||||||
|
$input-btn-focus-color: rgba(theme-color("primary"), .25) !default;
|
||||||
|
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
|
||||||
|
|
||||||
$input-btn-padding-y-sm: .25rem !default;
|
$input-btn-padding-y-sm: .25rem !default;
|
||||||
$input-btn-padding-x-sm: .5rem !default;
|
$input-btn-padding-x-sm: .5rem !default;
|
||||||
$input-btn-line-height-sm: 1.5 !default;
|
$input-btn-line-height-sm: $line-height-sm !default;
|
||||||
|
|
||||||
$input-btn-padding-y-lg: .5rem !default;
|
$input-btn-padding-y-lg: .5rem !default;
|
||||||
$input-btn-padding-x-lg: 1rem !default;
|
$input-btn-padding-x-lg: 1rem !default;
|
||||||
$input-btn-line-height-lg: 1.5 !default;
|
$input-btn-line-height-lg: $line-height-lg !default;
|
||||||
|
|
||||||
$btn-font-weight: $font-weight-normal !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-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
||||||
$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
|
|
||||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
||||||
|
|
||||||
$btn-link-disabled-color: $gray-600 !default;
|
$btn-link-disabled-color: $gray-600 !default;
|
||||||
|
|
@ -367,7 +348,7 @@ $input-bg: $white !default;
|
||||||
$input-disabled-bg: $gray-200 !default;
|
$input-disabled-bg: $gray-200 !default;
|
||||||
|
|
||||||
$input-color: $gray-700 !default;
|
$input-color: $gray-700 !default;
|
||||||
$input-border-color: rgba($black,.15) !default;
|
$input-border-color: $gray-400 !default;
|
||||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||||
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
||||||
|
|
||||||
|
|
@ -377,7 +358,6 @@ $input-border-radius-sm: $border-radius-sm !default;
|
||||||
|
|
||||||
$input-focus-bg: $input-bg !default;
|
$input-focus-bg: $input-bg !default;
|
||||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||||
$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
|
|
||||||
$input-focus-color: $input-color !default;
|
$input-focus-color: $input-color !default;
|
||||||
|
|
||||||
$input-placeholder-color: $gray-600 !default;
|
$input-placeholder-color: $gray-600 !default;
|
||||||
|
|
@ -409,7 +389,6 @@ $form-group-margin-bottom: 1rem !default;
|
||||||
$input-group-addon-color: $input-color !default;
|
$input-group-addon-color: $input-color !default;
|
||||||
$input-group-addon-bg: $gray-200 !default;
|
$input-group-addon-bg: $gray-200 !default;
|
||||||
$input-group-addon-border-color: $input-border-color !default;
|
$input-group-addon-border-color: $input-border-color !default;
|
||||||
$input-group-btn-border-color: $input-border-color !default;
|
|
||||||
|
|
||||||
$custom-control-gutter: 1.5rem !default;
|
$custom-control-gutter: 1.5rem !default;
|
||||||
$custom-control-spacer-y: .25rem !default;
|
$custom-control-spacer-y: .25rem !default;
|
||||||
|
|
@ -427,7 +406,7 @@ $custom-control-indicator-checked-color: $white !default;
|
||||||
$custom-control-indicator-checked-bg: theme-color("primary") !default;
|
$custom-control-indicator-checked-bg: theme-color("primary") !default;
|
||||||
$custom-control-indicator-checked-box-shadow: none !default;
|
$custom-control-indicator-checked-box-shadow: none !default;
|
||||||
|
|
||||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
|
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$custom-control-indicator-active-color: $white !default;
|
$custom-control-indicator-active-color: $white !default;
|
||||||
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
|
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
|
||||||
|
|
@ -562,9 +541,9 @@ $navbar-padding-x: $spacer !default;
|
||||||
|
|
||||||
$navbar-brand-font-size: $font-size-lg !default;
|
$navbar-brand-font-size: $font-size-lg !default;
|
||||||
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
||||||
$nav-link-height: $navbar-brand-font-size * $line-height-base !default;
|
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
||||||
$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
|
||||||
$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;
|
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
|
||||||
|
|
||||||
$navbar-toggler-padding-y: .25rem !default;
|
$navbar-toggler-padding-y: .25rem !default;
|
||||||
$navbar-toggler-padding-x: .75rem !default;
|
$navbar-toggler-padding-x: .75rem !default;
|
||||||
|
|
@ -573,7 +552,7 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
|
||||||
|
|
||||||
$navbar-dark-color: rgba($white,.5) !default;
|
$navbar-dark-color: rgba($white,.5) !default;
|
||||||
$navbar-dark-hover-color: rgba($white,.75) !default;
|
$navbar-dark-hover-color: rgba($white,.75) !default;
|
||||||
$navbar-dark-active-color: rgba($white,1) !default;
|
$navbar-dark-active-color: $white !default;
|
||||||
$navbar-dark-disabled-color: rgba($white,.25) !default;
|
$navbar-dark-disabled-color: rgba($white,.25) !default;
|
||||||
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$navbar-dark-toggler-border-color: rgba($white,.1) !default;
|
$navbar-dark-toggler-border-color: rgba($white,.1) !default;
|
||||||
|
|
@ -623,7 +602,7 @@ $jumbotron-bg: $gray-200 !default;
|
||||||
|
|
||||||
$card-spacer-y: .75rem !default;
|
$card-spacer-y: .75rem !default;
|
||||||
$card-spacer-x: 1.25rem !default;
|
$card-spacer-x: 1.25rem !default;
|
||||||
$card-border-width: 1px !default;
|
$card-border-width: $border-width !default;
|
||||||
$card-border-radius: $border-radius !default;
|
$card-border-radius: $border-radius !default;
|
||||||
$card-border-color: rgba($black,.125) !default;
|
$card-border-color: rgba($black,.125) !default;
|
||||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||||
|
|
@ -632,7 +611,8 @@ $card-bg: $white !default;
|
||||||
|
|
||||||
$card-img-overlay-padding: 1.25rem !default;
|
$card-img-overlay-padding: 1.25rem !default;
|
||||||
|
|
||||||
$card-deck-margin: ($grid-gutter-width / 2) !default;
|
$card-group-margin: ($grid-gutter-width / 2) !default;
|
||||||
|
$card-deck-margin: $card-group-margin !default;
|
||||||
|
|
||||||
$card-columns-count: 3 !default;
|
$card-columns-count: 3 !default;
|
||||||
$card-columns-gap: 1.25rem !default;
|
$card-columns-gap: 1.25rem !default;
|
||||||
|
|
@ -657,37 +637,35 @@ $tooltip-arrow-color: $tooltip-bg !default;
|
||||||
|
|
||||||
// Popovers
|
// Popovers
|
||||||
|
|
||||||
$popover-inner-padding: 1px !default;
|
|
||||||
$popover-bg: $white !default;
|
$popover-bg: $white !default;
|
||||||
$popover-max-width: 276px !default;
|
$popover-max-width: 276px !default;
|
||||||
$popover-border-width: $border-width !default;
|
$popover-border-width: $border-width !default;
|
||||||
$popover-border-color: rgba($black,.2) !default;
|
$popover-border-color: rgba($black,.2) !default;
|
||||||
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
|
$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default;
|
||||||
|
|
||||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||||
$popover-header-color: $headings-color !default;
|
$popover-header-color: $headings-color !default;
|
||||||
$popover-header-padding-y: 8px !default;
|
$popover-header-padding-y: .5rem !default;
|
||||||
$popover-header-padding-x: 14px !default;
|
$popover-header-padding-x: .75rem !default;
|
||||||
|
|
||||||
$popover-body-color: $body-color !default;
|
$popover-body-color: $body-color !default;
|
||||||
$popover-body-padding-y: 9px !default;
|
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||||
$popover-body-padding-x: 14px !default;
|
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||||
|
|
||||||
$popover-arrow-width: 10px !default;
|
$popover-arrow-width: .8rem !default;
|
||||||
$popover-arrow-height: 5px !default;
|
$popover-arrow-height: .4rem !default;
|
||||||
$popover-arrow-color: $popover-bg !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;
|
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||||
|
|
||||||
|
|
||||||
// Badges
|
// Badges
|
||||||
|
|
||||||
$badge-color: $white !default;
|
|
||||||
$badge-font-size: 75% !default;
|
$badge-font-size: 75% !default;
|
||||||
$badge-font-weight: $font-weight-bold !default;
|
$badge-font-weight: $font-weight-bold !default;
|
||||||
$badge-padding-y: .25em !default;
|
$badge-padding-y: .25em !default;
|
||||||
$badge-padding-x: .4em !default;
|
$badge-padding-x: .4em !default;
|
||||||
|
$badge-border-radius: $border-radius !default;
|
||||||
|
|
||||||
$badge-pill-padding-x: .6em !default;
|
$badge-pill-padding-x: .6em !default;
|
||||||
// Use a higher than normal value to ensure completely rounded edges when
|
// Use a higher than normal value to ensure completely rounded edges when
|
||||||
|
|
@ -741,7 +719,7 @@ $alert-border-width: $border-width !default;
|
||||||
// Progress bars
|
// Progress bars
|
||||||
|
|
||||||
$progress-height: 1rem !default;
|
$progress-height: 1rem !default;
|
||||||
$progress-font-size: .75rem !default;
|
$progress-font-size: ($font-size-base * .75) !default;
|
||||||
$progress-bg: $gray-200 !default;
|
$progress-bg: $gray-200 !default;
|
||||||
$progress-border-radius: $border-radius !default;
|
$progress-border-radius: $border-radius !default;
|
||||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||||
|
|
@ -822,8 +800,8 @@ $carousel-caption-color: $white !default;
|
||||||
|
|
||||||
$carousel-control-icon-width: 20px !default;
|
$carousel-control-icon-width: 20px !default;
|
||||||
|
|
||||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;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-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='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;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-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='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
|
|
||||||
$carousel-transition: transform .6s ease !default;
|
$carousel-transition: transform .6s ease !default;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
// Bootstrap Grid only
|
/*!
|
||||||
//
|
* Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
|
||||||
// Includes relevant variables and mixins for the flexbox grid
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
//
|
*/
|
||||||
// Box sizing, responsive, and more
|
|
||||||
//
|
|
||||||
|
|
||||||
@at-root {
|
@at-root {
|
||||||
@-ms-viewport { width: device-width; }
|
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
// Bootstrap Reboot only
|
/*!
|
||||||
//
|
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
|
||||||
// Includes only Normalize and our custom Reboot reset.
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||||
|
*/
|
||||||
|
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
|
* Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
|
||||||
* Copyright 2011-2017 The Bootstrap Authors
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
* Copyright 2011-2017 Twitter, Inc.
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
@import "functions";
|
@import "functions";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
@import "root";
|
||||||
@import "print";
|
@import "print";
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
@import "type";
|
@import "type";
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@mixin alert-variant($background, $border, $color) {
|
@mixin alert-variant($background, $border, $color) {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: $background;
|
@include gradient-bg($background);
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Contextual backgrounds
|
// Contextual backgrounds
|
||||||
|
|
||||||
@mixin bg-variant($parent, $color) {
|
@mixin bg-variant($parent, $color) {
|
||||||
|
|
@ -10,3 +12,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin bg-gradient-variant($parent, $color) {
|
||||||
|
#{$parent} {
|
||||||
|
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
@mixin badge-variant($bg) {
|
@mixin badge-variant($bg) {
|
||||||
@include color-yiq($bg);
|
color: color-yiq($bg);
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
|
|
||||||
&[href] {
|
&[href] {
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
@include color-yiq($bg);
|
color: color-yiq($bg);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: darken($bg, 10%);
|
background-color: darken($bg, 10%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -81,9 +81,19 @@
|
||||||
$min: breakpoint-min($lower, $breakpoints);
|
$min: breakpoint-min($lower, $breakpoints);
|
||||||
$max: breakpoint-max($upper, $breakpoints);
|
$max: breakpoint-max($upper, $breakpoints);
|
||||||
|
|
||||||
|
@if $min != null and $max != null {
|
||||||
@media (min-width: $min) and (max-width: $max) {
|
@media (min-width: $min) and (max-width: $max) {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
|
} @else if $max == null {
|
||||||
|
@include media-breakpoint-up($lower) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else if $min == null {
|
||||||
|
@include media-breakpoint-down($upper) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Media between the breakpoint's minimum and maximum widths.
|
// Media between the breakpoint's minimum and maximum widths.
|
||||||
|
|
@ -98,8 +108,12 @@
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
} @else if $max == null {
|
} @else if $max == null {
|
||||||
@include media-breakpoint-up($name)
|
@include media-breakpoint-up($name) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
} @else if $min == null {
|
} @else if $min == null {
|
||||||
@include media-breakpoint-down($name)
|
@include media-breakpoint-down($name) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,25 +3,25 @@
|
||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
// and disabled options for all buttons
|
// and disabled options for all buttons
|
||||||
|
|
||||||
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
|
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
|
||||||
@include color-yiq($background);
|
color: color-yiq($background);
|
||||||
background-color: $background;
|
@include gradient-bg($background);
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
@include box-shadow($btn-box-shadow);
|
@include box-shadow($btn-box-shadow);
|
||||||
|
|
||||||
&:hover {
|
@include hover {
|
||||||
@include color-yiq($background);
|
color: color-yiq($hover-background);
|
||||||
background-color: $active-background;
|
@include gradient-bg($hover-background);
|
||||||
border-color: $active-border;
|
border-color: $hover-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
|
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: 0 0 0 3px rgba($border, .5);
|
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -32,13 +32,22 @@
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:not([disabled]):not(.disabled):active,
|
||||||
&.active,
|
&:not([disabled]):not(.disabled).active,
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
|
color: color-yiq($active-background);
|
||||||
background-color: $active-background;
|
background-color: $active-background;
|
||||||
|
@if $enable-gradients {
|
||||||
background-image: none; // Remove the gradient for the pressed/active state
|
background-image: none; // Remove the gradient for the pressed/active state
|
||||||
|
}
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
@include box-shadow($btn-active-box-shadow);
|
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
@if $enable-shadows {
|
||||||
|
box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||||
|
} @else {
|
||||||
|
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -56,7 +65,7 @@
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
box-shadow: 0 0 0 3px rgba($color, .5);
|
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
|
|
@ -65,12 +74,14 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:not([disabled]):not(.disabled):active,
|
||||||
&.active,
|
&:not([disabled]):not(.disabled).active,
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
color: $color-hover;
|
color: $color-hover;
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
@mixin caret-down {
|
||||||
|
border-top: $caret-width solid;
|
||||||
|
border-right: $caret-width solid transparent;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: $caret-width solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin caret-up {
|
||||||
|
border-top: 0;
|
||||||
|
border-right: $caret-width solid transparent;
|
||||||
|
border-bottom: $caret-width solid;
|
||||||
|
border-left: $caret-width solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin caret($direction: down) {
|
||||||
|
@if $enable-caret {
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-left: $caret-width * .85;
|
||||||
|
vertical-align: $caret-width * .85;
|
||||||
|
content: "";
|
||||||
|
@if $direction == down {
|
||||||
|
@include caret-down;
|
||||||
|
} @else if $direction == up {
|
||||||
|
@include caret-up;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:empty::after {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
@mixin float-left {
|
@mixin float-left {
|
||||||
float: left !important;
|
float: left !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Form control focus state
|
// Form control focus state
|
||||||
//
|
//
|
||||||
// Generate a customized focus state and for any input with the specified color,
|
// Generate a customized focus state and for any input with the specified color,
|
||||||
// which defaults to the `@input-border-color-focus` variable.
|
// which defaults to the `$input-focus-border-color` variable.
|
||||||
//
|
//
|
||||||
// We highly encourage you to not customize the default value, but instead use
|
// We highly encourage you to not customize the default value, but instead use
|
||||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||||
|
|
@ -16,13 +16,40 @@
|
||||||
background-color: $input-focus-bg;
|
background-color: $input-focus-bg;
|
||||||
border-color: $input-focus-border-color;
|
border-color: $input-focus-border-color;
|
||||||
outline: none;
|
outline: none;
|
||||||
@include box-shadow($input-focus-box-shadow);
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
@if $enable-shadows {
|
||||||
|
box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
|
||||||
|
} @else {
|
||||||
|
box-shadow: $input-btn-focus-box-shadow;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin form-validation-state($state, $color) {
|
@mixin form-validation-state($state, $color) {
|
||||||
|
|
||||||
|
.#{$state}-feedback {
|
||||||
|
display: none;
|
||||||
|
margin-top: .25rem;
|
||||||
|
font-size: .875rem;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$state}-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
display: none;
|
||||||
|
width: 250px;
|
||||||
|
padding: .5rem;
|
||||||
|
margin-top: .1rem;
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba($color,.8);
|
||||||
|
border-radius: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.form-control,
|
.form-control,
|
||||||
.custom-select {
|
.custom-select {
|
||||||
.was-validated &:#{$state},
|
.was-validated &:#{$state},
|
||||||
|
|
@ -33,8 +60,8 @@
|
||||||
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .invalid-feedback,
|
~ .#{$state}-feedback,
|
||||||
~ .invalid-tooltip {
|
~ .#{$state}-tooltip {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
// Gradients
|
// Gradients
|
||||||
|
|
||||||
|
@mixin gradient-bg($color) {
|
||||||
|
@if $enable-gradients {
|
||||||
|
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
||||||
|
} @else {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Horizontal gradient, from left to right
|
// Horizontal gradient, from left to right
|
||||||
//
|
//
|
||||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||||
|
|
|
||||||
|
|
@ -46,11 +46,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.order#{$infix}-first {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
@for $i from 1 through $columns {
|
@for $i from 1 through $columns {
|
||||||
.order#{$infix}-#{$i} {
|
.order#{$infix}-#{$i} {
|
||||||
order: $i;
|
order: $i;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// `$columns - 1` because offsetting by the width of an entire row isn't possible
|
||||||
|
@for $i from 0 through ($columns - 1) {
|
||||||
|
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
|
||||||
|
.offset#{$infix}-#{$i} {
|
||||||
|
@include make-col-offset($i, $columns);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
// Generate semantic grid columns with these mixins.
|
// Generate semantic grid columns with these mixins.
|
||||||
|
|
||||||
@mixin make-container() {
|
@mixin make-container() {
|
||||||
margin-right: auto;
|
width: 100%;
|
||||||
margin-left: auto;
|
|
||||||
padding-right: ($grid-gutter-width / 2);
|
padding-right: ($grid-gutter-width / 2);
|
||||||
padding-left: ($grid-gutter-width / 2);
|
padding-left: ($grid-gutter-width / 2);
|
||||||
width: 100%;
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -45,3 +45,8 @@
|
||||||
// do not appear to require this.
|
// do not appear to require this.
|
||||||
max-width: percentage($size / $columns);
|
max-width: percentage($size / $columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||||
|
$num: $size / $columns;
|
||||||
|
margin-left: if($num == 0, 0, percentage($num));
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// stylelint-disable indentation
|
||||||
@mixin hover {
|
@mixin hover {
|
||||||
// TODO: re-enable along with mq4-hover-shim
|
// TODO: re-enable along with mq4-hover-shim
|
||||||
// @if $enable-hover-media-query {
|
// @if $enable-hover-media-query {
|
||||||
|
|
@ -8,21 +9,21 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// @else {
|
// @else {
|
||||||
// scss-lint:disable Indentation
|
&:hover { @content; }
|
||||||
&:hover { @content }
|
|
||||||
// scss-lint:enable Indentation
|
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin hover-focus {
|
@mixin hover-focus {
|
||||||
@if $enable-hover-media-query {
|
@if $enable-hover-media-query {
|
||||||
&:focus { @content }
|
&:focus {
|
||||||
@include hover { @content }
|
@content;
|
||||||
|
}
|
||||||
|
@include hover { @content; }
|
||||||
} @else {
|
} @else {
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
@content
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -31,14 +32,14 @@
|
||||||
@if $enable-hover-media-query {
|
@if $enable-hover-media-query {
|
||||||
&,
|
&,
|
||||||
&:focus {
|
&:focus {
|
||||||
@content
|
@content;
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content; }
|
||||||
} @else {
|
} @else {
|
||||||
&,
|
&,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
@content
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -47,14 +48,14 @@
|
||||||
@if $enable-hover-media-query {
|
@if $enable-hover-media-query {
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
@content
|
@content;
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content; }
|
||||||
} @else {
|
} @else {
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active,
|
&:active,
|
||||||
&:hover {
|
&:hover {
|
||||||
@content
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,15 +20,15 @@
|
||||||
//
|
//
|
||||||
// Short retina mixin for setting background-image and -size.
|
// Short retina mixin for setting background-image and -size.
|
||||||
|
|
||||||
|
// stylelint-disable indentation, media-query-list-comma-newline-after
|
||||||
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
||||||
background-image: url($file-1x);
|
background-image: url($file-1x);
|
||||||
|
|
||||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||||
// but doesn't convert dppx=>dpi.
|
// but doesn't convert dppx=>dpi.
|
||||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||||
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
|
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
||||||
@media
|
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||||
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
|
||||||
only screen and (min-resolution: 2dppx) { // Standardized
|
only screen and (min-resolution: 2dppx) { // Standardized
|
||||||
background-image: url($file-2x);
|
background-image: url($file-2x);
|
||||||
background-size: $width-1x $height-1x;
|
background-size: $width-1x $height-1x;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
}
|
}
|
||||||
|
|
||||||
//scss-lint:disable QualifyingElement
|
|
||||||
a.list-group-item-#{$state},
|
a.list-group-item-#{$state},
|
||||||
button.list-group-item-#{$state} {
|
button.list-group-item-#{$state} {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
|
@ -22,5 +21,4 @@
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// scss-lint:enable QualifyingElement
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
// Navbar vertical align
|
// Navbar vertical align
|
||||||
//
|
//
|
||||||
// Vertically center elements in the navbar.
|
// 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.
|
// 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) {
|
// @mixin navbar-vertical-align($element-height) {
|
||||||
// margin-top: (($navbar-height - $element-height) / 2);
|
// margin-top: (($navbar-height - $element-height) / 2);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
// scss-lint:disable DuplicateProperty
|
|
||||||
@mixin reset-text {
|
@mixin reset-text {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or word-wrap.
|
// We deliberately do NOT reset font-size or word-wrap.
|
||||||
|
|
@ -6,7 +5,7 @@
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
text-align: left; // Fallback for where `start` is not supported
|
text-align: left; // Fallback for where `start` is not supported
|
||||||
text-align: start;
|
text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Only display content to screen readers
|
// Only display content to screen readers
|
||||||
//
|
//
|
||||||
// See: http://a11yproject.com/posts/how-to-hide-content
|
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||||
// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||||
|
|
||||||
@mixin sr-only {
|
@mixin sr-only {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
|
|
||||||
@mixin text-emphasis-variant($parent, $color) {
|
@mixin text-emphasis-variant($parent, $color) {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Visibility
|
// Visibility
|
||||||
|
|
||||||
@mixin invisible($visibility) {
|
@mixin invisible($visibility) {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||||
.align-top { vertical-align: top !important; }
|
.align-top { vertical-align: top !important; }
|
||||||
.align-middle { vertical-align: middle !important; }
|
.align-middle { vertical-align: middle !important; }
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,19 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@include bg-variant('.bg-#{$color}', $value);
|
@include bg-variant(".bg-#{$color}", $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-white { background-color: $white !important; }
|
@if $enable-gradients {
|
||||||
.bg-transparent { background-color: transparent !important; }
|
@each $color, $value in $theme-colors {
|
||||||
|
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: $white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-transparent {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
//
|
//
|
||||||
// Border
|
// Border
|
||||||
//
|
//
|
||||||
|
|
@ -44,9 +46,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-circle {
|
.rounded-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-0 {
|
.rounded-0 {
|
||||||
border-radius: 0;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
//
|
//
|
||||||
// Utilities for common `display` values
|
// Utilities for common `display` values
|
||||||
//
|
//
|
||||||
|
|
@ -11,6 +13,7 @@
|
||||||
.d#{$infix}-inline-block { display: inline-block !important; }
|
.d#{$infix}-inline-block { display: inline-block !important; }
|
||||||
.d#{$infix}-block { display: block !important; }
|
.d#{$infix}-block { display: block !important; }
|
||||||
.d#{$infix}-table { display: table !important; }
|
.d#{$infix}-table { display: table !important; }
|
||||||
|
.d#{$infix}-table-row { display: table-row !important; }
|
||||||
.d#{$infix}-table-cell { display: table-cell !important; }
|
.d#{$infix}-table-cell { display: table-cell !important; }
|
||||||
.d#{$infix}-flex { display: flex !important; }
|
.d#{$infix}-flex { display: flex !important; }
|
||||||
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Flex variation
|
// Flex variation
|
||||||
//
|
//
|
||||||
// Custom styles for additional flex alignment options.
|
// Custom styles for additional flex alignment options.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Common values
|
// Common values
|
||||||
|
|
||||||
// Sass list not in variables since it's not intended for customization.
|
// Sass list not in variables since it's not intended for customization.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Width and height
|
// Width and height
|
||||||
|
|
||||||
@each $prop, $abbrev in (width: w, height: h) {
|
@each $prop, $abbrev in (width: w, height: h) {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
// Margin and Padding
|
// Margin and Padding
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// stylelint-disable declaration-no-important
|
||||||
|
|
||||||
//
|
//
|
||||||
// Text
|
// Text
|
||||||
//
|
//
|
||||||
|
|
@ -38,7 +40,7 @@
|
||||||
.text-white { color: #fff !important; }
|
.text-white { color: #fff !important; }
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@include text-emphasis-variant('.text-#{$color}', $value);
|
@include text-emphasis-variant(".text-#{$color}", $value);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-muted { color: $text-muted !important; }
|
.text-muted { color: $text-muted !important; }
|
||||||
|
|
|
||||||
Reference in New Issue