preparing Bootstrap 4 Beta 2 update
This commit is contained in:
Holger Könemann
parent
37dc527e5b
commit
0fcfad9a56
1117
css/theme.css
1117
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 /////////////////////////
|
||||
// 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')
|
||||
.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.
|
||||
* @version 1.12.2
|
||||
* @version 1.12.6
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
|
|
@ -28,22 +28,7 @@
|
|||
(global.Popper = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var nativeHints = ['native code', '[object MutationObserverConstructor]'];
|
||||
|
||||
/**
|
||||
* 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 isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
|
||||
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
|
||||
var timeoutDuration = 0;
|
||||
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) {
|
||||
var scheduled = 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 });
|
||||
|
||||
var called = false;
|
||||
return function () {
|
||||
if (!scheduled) {
|
||||
scheduled = true;
|
||||
elem.setAttribute('x-index', i);
|
||||
i = i + 1; // don't use compund (+=) because it doesn't get optimized in V8
|
||||
if (called) {
|
||||
return;
|
||||
}
|
||||
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
|
||||
// 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);
|
||||
var supportsMicroTasks = isBrowser && window.Promise;
|
||||
|
||||
/**
|
||||
* Create a debounced version of a method, that's asynchronously deferred
|
||||
|
|
@ -105,7 +76,7 @@ var supportsNativeMutationObserver = isBrowser && isNative(window.MutationObserv
|
|||
* @argument {Function} fn
|
||||
* @returns {Function}
|
||||
*/
|
||||
var debounce = supportsNativeMutationObserver ? microtaskDebounce : taskDebounce;
|
||||
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
|
||||
|
||||
/**
|
||||
* Check if the given variable is a function
|
||||
|
|
@ -158,10 +129,18 @@ function getParentNode(element) {
|
|||
*/
|
||||
function getScrollParent(element) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
var _getStyleComputedProp = getStyleComputedProperty(element),
|
||||
|
|
@ -189,6 +168,10 @@ function getOffsetParent(element) {
|
|||
var nodeName = offsetParent && offsetParent.nodeName;
|
||||
|
||||
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
if (element) {
|
||||
return element.ownerDocument.documentElement;
|
||||
}
|
||||
|
||||
return window.document.documentElement;
|
||||
}
|
||||
|
||||
|
|
@ -284,8 +267,8 @@ function getScroll(element) {
|
|||
var nodeName = element.nodeName;
|
||||
|
||||
if (nodeName === 'BODY' || nodeName === 'HTML') {
|
||||
var html = window.document.documentElement;
|
||||
var scrollingElement = window.document.scrollingElement || html;
|
||||
var html = element.ownerDocument.documentElement;
|
||||
var scrollingElement = element.ownerDocument.scrollingElement || html;
|
||||
return scrollingElement[upperSide];
|
||||
}
|
||||
|
||||
|
|
@ -347,7 +330,7 @@ var isIE10$1 = function () {
|
|||
};
|
||||
|
||||
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() {
|
||||
|
|
@ -534,7 +517,7 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
|||
}
|
||||
|
||||
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
|
||||
var html = window.document.documentElement;
|
||||
var html = element.ownerDocument.documentElement;
|
||||
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
|
||||
var width = Math.max(html.clientWidth, window.innerWidth || 0);
|
||||
var height = Math.max(html.clientHeight, window.innerHeight || 0);
|
||||
|
|
@ -595,10 +578,10 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
|
|||
if (boundariesElement === 'scrollParent') {
|
||||
boundariesNode = getScrollParent(getParentNode(popper));
|
||||
if (boundariesNode.nodeName === 'BODY') {
|
||||
boundariesNode = window.document.documentElement;
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
}
|
||||
} else if (boundariesElement === 'window') {
|
||||
boundariesNode = window.document.documentElement;
|
||||
boundariesNode = popper.ownerDocument.documentElement;
|
||||
} else {
|
||||
boundariesNode = boundariesElement;
|
||||
}
|
||||
|
|
@ -839,10 +822,11 @@ function runModifiers(modifiers, data, ends) {
|
|||
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
|
||||
|
||||
modifiersToRun.forEach(function (modifier) {
|
||||
if (modifier.function) {
|
||||
if (modifier['function']) {
|
||||
// eslint-disable-line dot-notation
|
||||
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)) {
|
||||
// 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
|
||||
|
|
@ -969,9 +953,19 @@ function destroy() {
|
|||
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) {
|
||||
var isBody = scrollParent.nodeName === 'BODY';
|
||||
var target = isBody ? window : scrollParent;
|
||||
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
|
||||
target.addEventListener(event, callback, { passive: true });
|
||||
|
||||
if (!isBody) {
|
||||
|
|
@ -989,7 +983,7 @@ function attachToScrollParents(scrollParent, event, callback, scrollParents) {
|
|||
function setupEventListeners(reference, options, state, updateBound) {
|
||||
// Resize event listener on window
|
||||
state.updateBound = updateBound;
|
||||
window.addEventListener('resize', state.updateBound, { passive: true });
|
||||
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
|
||||
|
||||
// Scroll event listener on scroll parents
|
||||
var scrollElement = getScrollParent(reference);
|
||||
|
|
@ -1020,7 +1014,7 @@ function enableEventListeners() {
|
|||
*/
|
||||
function removeEventListeners(reference, state) {
|
||||
// Remove resize event listener on window
|
||||
window.removeEventListener('resize', state.updateBound);
|
||||
getWindow(reference).removeEventListener('resize', state.updateBound);
|
||||
|
||||
// Remove scroll event listener on scroll parents
|
||||
state.scrollParents.forEach(function (target) {
|
||||
|
|
@ -2322,8 +2316,8 @@ var Popper = function () {
|
|||
};
|
||||
|
||||
// get reference and popper elements (allow jQuery wrappers)
|
||||
this.reference = reference.jquery ? reference[0] : reference;
|
||||
this.popper = popper.jquery ? popper[0] : popper;
|
||||
this.reference = reference && reference.jquery ? reference[0] : reference;
|
||||
this.popper = popper && popper.jquery ? popper[0] : popper;
|
||||
|
||||
// Deep merge modifiers options
|
||||
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",
|
||||
"version": "0.6.5",
|
||||
"version": "0.6.6",
|
||||
"description": "Wordpress Theme framework",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
@ -27,30 +27,30 @@
|
|||
},
|
||||
"homepage": "https://understrap.com",
|
||||
"dependencies": {
|
||||
"bootstrap": "4.0.0-beta",
|
||||
"browser-sync": "^2.18.12",
|
||||
"bootstrap": "4.0.0-beta.2",
|
||||
"browser-sync": "^2.18.13",
|
||||
"del": "^3.0.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean-css": "^3.7.0",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-clone": "^1.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-cssnano": "^2.1.2",
|
||||
"gulp-ignore": "^2.0.2",
|
||||
"gulp-imagemin": "^3.3.0",
|
||||
"gulp-imagemin": "^3.4.0",
|
||||
"gulp-merge": "^0.1.1",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-rimraf": "^0.2.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-sequence": "^0.4.6",
|
||||
"gulp-sourcemaps": "2.6.0",
|
||||
"gulp-sourcemaps": "2.6.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-watch": "^4.3.11",
|
||||
"jquery": "3.2.1",
|
||||
"merge2": "^1.1.0",
|
||||
"popper.js": "^1.11.1",
|
||||
"run-sequence": "^2.0.0",
|
||||
"merge2": "^1.2.0",
|
||||
"popper.js": "^1.12.6",
|
||||
"run-sequence": "^2.2.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 {
|
||||
position: relative;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
|
|
@ -28,9 +29,9 @@
|
|||
.alert-dismissible {
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: relative;
|
||||
top: -$alert-padding-y;
|
||||
right: -$alert-padding-x;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,10 @@
|
|||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
color: $badge-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius();
|
||||
@include border-radius($badge-border-radius);
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $breadcrumb-margin-bottom;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
float: left;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
> .btn {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
|
|
@ -48,7 +47,8 @@
|
|||
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 {
|
||||
margin-left: 0;
|
||||
|
||||
|
|
@ -56,25 +56,30 @@
|
|||
@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 > .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||
// dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
|
@ -129,7 +134,6 @@
|
|||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
|
@ -146,30 +150,35 @@
|
|||
margin-top: -$input-btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical > .btn {
|
||||
> .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
}
|
||||
|
||||
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
|
||||
}
|
||||
|
||||
> .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
}
|
||||
|
||||
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
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 {
|
||||
.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 {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $link-color;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&.active,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
&,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
&:disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
&:focus,
|
||||
&.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 {
|
||||
@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 {
|
||||
@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;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@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 {
|
||||
|
|
@ -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
|
||||
//
|
||||
|
|
@ -72,6 +74,12 @@
|
|||
&:first-child {
|
||||
@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 {
|
||||
|
|
@ -130,18 +138,26 @@
|
|||
|
||||
// Card deck
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-deck {
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-deck-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
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-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Override the default
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,13 +168,21 @@
|
|||
// Card groups
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-group {
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
|
|
@ -177,6 +201,7 @@
|
|||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@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;
|
||||
|
||||
.card-img-top,
|
||||
|
|
|
|||
|
|
@ -90,9 +90,15 @@
|
|||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||
}
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@
|
|||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||
button.close {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
// stylelint-enable
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// scss-lint:disable PropertyCount, VendorPrefix
|
||||
|
||||
// Embedded icons from Open Iconic.
|
||||
// Released under MIT and copyright 2014 Waybury.
|
||||
// https://useiconic.com/open
|
||||
|
|
@ -24,7 +22,7 @@
|
|||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +33,7 @@
|
|||
|
||||
&:active ~ .custom-control-indicator {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +137,6 @@
|
|||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@if $enable-rounded {
|
||||
|
|
@ -165,6 +162,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
|
|
@ -216,13 +218,11 @@
|
|||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
overflow: hidden;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-file-bg;
|
||||
background-clip: padding-box;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius($custom-file-border-radius);
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
|
@ -235,16 +235,18 @@
|
|||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
background-color: $custom-file-button-bg;
|
||||
border-left: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include gradient-bg($custom-file-button-bg);
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||
|
|
|
|||
|
|
@ -6,37 +6,7 @@
|
|||
|
||||
.dropdown-toggle {
|
||||
// Generate the caret automatically
|
||||
&::after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@include caret;
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
|
|
@ -61,6 +31,19 @@
|
|||
@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
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
|
|
@ -84,14 +67,14 @@
|
|||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
background-color: $dropdown-link-active-bg;
|
||||
@include gradient-bg($dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
|
@ -105,14 +88,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
.show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// scss-lint:disable QualifyingElement, VendorPrefix
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
|
|
@ -7,8 +7,6 @@
|
|||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
// height: $input-height;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
font-size: $font-size-base;
|
||||
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
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: 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});
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
line-height: $input-btn-line-height;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: 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});
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||
padding-bottom: 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});
|
||||
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;
|
||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||
line-height: $input-btn-line-height;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
border-width: $input-btn-border-width 0;
|
||||
|
||||
|
|
@ -241,14 +243,11 @@ select.form-control-lg {
|
|||
// Radios and checkboxes on same line
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-x;
|
||||
|
||||
.form-check-label {
|
||||
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
|
||||
// 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("invalid", $form-feedback-invalid-color);
|
||||
|
||||
|
|
@ -339,11 +316,6 @@ select.form-control-lg {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.form-control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
|
||||
// Color contrast
|
||||
@mixin color-yiq($color) {
|
||||
@function color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
|
@ -57,9 +57,9 @@
|
|||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
color: #111;
|
||||
@return #111;
|
||||
} @else {
|
||||
color: #fff;
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
@return map-get($theme-colors, $key);
|
||||
}
|
||||
|
||||
@function grayscale($key: "100") {
|
||||
@function gray($key: "100") {
|
||||
@return map-get($grays, $key);
|
||||
}
|
||||
|
||||
|
|
@ -80,11 +80,7 @@
|
|||
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
$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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
|
@ -5,6 +7,7 @@
|
|||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
.form-control {
|
||||
|
|
@ -28,10 +31,8 @@
|
|||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
// Vertically centers the content of the addons within the input group
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
|
@ -40,7 +41,6 @@
|
|||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -74,7 +74,6 @@
|
|||
color: $input-group-addon-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
|
|
@ -91,13 +90,11 @@
|
|||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -136,6 +133,7 @@
|
|||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
|
|
@ -145,8 +143,6 @@
|
|||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-group-btn-border-color;
|
||||
|
||||
+ .btn {
|
||||
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
|
||||
&:not(:last-child) {
|
||||
> .btn,
|
||||
|
|
@ -169,7 +169,14 @@
|
|||
> .btn,
|
||||
> .btn-group {
|
||||
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);
|
||||
}
|
||||
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
// // Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
|
|
@ -50,6 +52,8 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
pointer-events: auto;
|
||||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
|
|
@ -78,13 +82,16 @@
|
|||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
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
|
||||
padding: $modal-header-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
@include border-top-radius($border-radius-lg);
|
||||
|
||||
.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,13 +74,13 @@
|
|||
.nav-pills {
|
||||
.nav-link {
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
&.active,
|
||||
.show > & {
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
background-color: $nav-pills-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
// on the `.navbar` parent.
|
||||
.navbar-collapse {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
// For always expanded or extra full navbars, ensure content aligns itself
|
||||
// properly vertically. Can be easily overridden with flex utilities.
|
||||
align-items: center;
|
||||
|
|
@ -146,8 +147,7 @@
|
|||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.navbar-nav {
|
||||
|
|
@ -174,15 +174,23 @@
|
|||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,6 +243,13 @@
|
|||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
a {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -280,5 +295,12 @@
|
|||
|
||||
.navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
a {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
// 1-2: Disable browser default list styles
|
||||
padding-left: 0; // 1
|
||||
list-style: none; // 2
|
||||
@include list-unstyled();
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +36,7 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
margin-left: -1px;
|
||||
margin-left: -$pagination-border-width;
|
||||
line-height: $pagination-line-height;
|
||||
color: $pagination-color;
|
||||
background-color: $pagination-bg;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
z-index: $zindex-popover;
|
||||
display: block;
|
||||
max-width: $popover-max-width;
|
||||
padding: $popover-inner-padding;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
|
|
@ -39,11 +38,11 @@
|
|||
|
||||
.arrow::before {
|
||||
content: "";
|
||||
border-width: $popover-arrow-outer-width;
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
.arrow::after {
|
||||
content: "";
|
||||
border-width: $popover-arrow-outer-width;
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
|
||||
// Popover directions
|
||||
|
|
@ -61,14 +60,14 @@
|
|||
}
|
||||
|
||||
.arrow::before {
|
||||
bottom: -$popover-arrow-outer-width;
|
||||
margin-left: -($popover-arrow-outer-width - 5);
|
||||
bottom: -$popover-arrow-width;
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
bottom: -($popover-arrow-outer-width - 1);
|
||||
margin-left: -($popover-arrow-outer-width - 5);
|
||||
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,17 +81,17 @@
|
|||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-top: -($popover-arrow-outer-width - 3);
|
||||
margin-top: -$popover-arrow-width;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
left: -$popover-arrow-outer-width;
|
||||
left: -$popover-arrow-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
left: -($popover-arrow-outer-width - 1);
|
||||
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,17 +105,17 @@
|
|||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-left: -($popover-arrow-width - 3);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
top: -$popover-arrow-outer-width;
|
||||
top: -$popover-arrow-width;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
top: -($popover-arrow-outer-width - 1);
|
||||
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +128,7 @@
|
|||
width: 20px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border-bottom: 1px solid $popover-header-bg;
|
||||
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,17 +141,17 @@
|
|||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-top: -($popover-arrow-outer-width - 3);
|
||||
margin-top: -$popover-arrow-width;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
right: -$popover-arrow-outer-width;
|
||||
right: -$popover-arrow-width;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
right: -($popover-arrow-outer-width - 1);
|
||||
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
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
|
||||
|
||||
|
|
@ -14,8 +14,7 @@
|
|||
*::before,
|
||||
*::after {
|
||||
// Bootstrap specific; comment out `color` and `background`
|
||||
//color: #000 !important; // Black prints faster:
|
||||
// http://www.sanbeiji.com/archives/953
|
||||
//color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
|
||||
text-shadow: none !important;
|
||||
//background: transparent !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
|
||||
//
|
||||
|
|
@ -35,13 +35,17 @@ html {
|
|||
|
||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||
@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)
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
// stylelint-enable selector-list-comma-newline-after
|
||||
|
||||
// Body
|
||||
//
|
||||
|
|
@ -91,10 +95,12 @@ hr {
|
|||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
// stylelint-disable selector-list-comma-newline-after
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
// stylelint-enable selector-list-comma-newline-after
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
|
|
@ -157,10 +163,12 @@ dfn {
|
|||
font-style: italic; // Add the correct font style in Android 4.3-
|
||||
}
|
||||
|
||||
// stylelint-disable font-weight-notation
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
||||
}
|
||||
// stylelint-enable font-weight-notation
|
||||
|
||||
small {
|
||||
font-size: 80%; // Add the correct font size in all browsers
|
||||
|
|
@ -224,6 +232,7 @@ a:not([href]):not([tabindex]) {
|
|||
// Code
|
||||
//
|
||||
|
||||
// stylelint-disable font-family-no-duplicate-names
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -231,6 +240,7 @@ samp {
|
|||
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
|
||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||
}
|
||||
// stylelint-enable font-family-no-duplicate-names
|
||||
|
||||
pre {
|
||||
// Remove browser default top margin
|
||||
|
|
@ -239,6 +249,9 @@ pre {
|
|||
margin-bottom: 1rem;
|
||||
// Don't allow content to break outside
|
||||
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.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
||||
// * https://caniuse.com/#feat=css-touch-action
|
||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
|
|
@ -322,6 +335,13 @@ label {
|
|||
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
|
||||
// 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);
|
||||
|
||||
|
||||
// Inverse styles
|
||||
// Dark styles
|
||||
//
|
||||
// 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 {
|
||||
color: $table-inverse-color;
|
||||
background-color: $table-inverse-bg;
|
||||
color: $table-dark-color;
|
||||
background-color: $table-dark-bg;
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thead-default {
|
||||
.thead-light {
|
||||
th {
|
||||
color: $table-head-color;
|
||||
background-color: $table-head-bg;
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-inverse {
|
||||
color: $table-inverse-color;
|
||||
background-color: $table-inverse-bg;
|
||||
.table-dark {
|
||||
color: $table-dark-color;
|
||||
background-color: $table-dark-bg;
|
||||
|
||||
th,
|
||||
td,
|
||||
thead th {
|
||||
border-color: $table-inverse-border-color;
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
|
|
@ -133,14 +138,14 @@
|
|||
|
||||
&.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-inverse-accent-bg;
|
||||
background-color: $table-dark-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-inverse-hover-bg;
|
||||
background-color: $table-dark-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,15 +154,20 @@
|
|||
|
||||
// Responsive tables
|
||||
//
|
||||
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
|
||||
// enabling horizontal scrolling. Only applies <768px. Everything above that
|
||||
// will display normally.
|
||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||
// size of where your table will overflow.
|
||||
|
||||
.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;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-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;`
|
||||
|
|
@ -165,4 +175,6 @@
|
|||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@
|
|||
height: $tooltip-arrow-height;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.bs-tooltip-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
.arrow {
|
||||
|
|
@ -88,12 +94,6 @@
|
|||
@extend .bs-tooltip-left;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
@include transition($transition-fade);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,54 +1,14 @@
|
|||
// 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
|
||||
// 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
|
||||
//
|
||||
|
||||
// stylelint-disable
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
|
|
@ -61,17 +21,18 @@ $gray-800: #343a40 !default;
|
|||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$grays: (
|
||||
100: $gray-100,
|
||||
200: $gray-200,
|
||||
300: $gray-300,
|
||||
400: $gray-400,
|
||||
500: $gray-500,
|
||||
600: $gray-600,
|
||||
700: $gray-700,
|
||||
800: $gray-800,
|
||||
900: $gray-900
|
||||
) !default;
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
), $grays);
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
|
|
@ -84,32 +45,44 @@ $green: #28a745 !default;
|
|||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
) !default;
|
||||
$colors: () !default;
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800
|
||||
), $colors);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-600,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800
|
||||
) !default;
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !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
|
||||
$theme-color-interval: 8% !default;
|
||||
|
|
@ -119,6 +92,7 @@ $theme-color-interval: 8% !default;
|
|||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
|
|
@ -172,7 +146,7 @@ $link-hover-decoration: underline !default;
|
|||
//
|
||||
// Style p element.
|
||||
|
||||
$paragraph-margin-bottom: 1rem;
|
||||
$paragraph-margin-bottom: 1rem !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
|
|
@ -187,6 +161,7 @@ $grid-breakpoints: (
|
|||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
|
@ -201,6 +176,7 @@ $container-max-widths: (
|
|||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
|
||||
@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.
|
||||
|
||||
// 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-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !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-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
$font-size-lg: ($font-size-base * 1.25) !default;
|
||||
$font-size-sm: ($font-size-base * .875) !default;
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: normal !default;
|
||||
$font-weight-bold: bold !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$h1-font-size: 2.5rem !default;
|
||||
$h2-font-size: 2rem !default;
|
||||
$h3-font-size: 1.75rem !default;
|
||||
$h4-font-size: 1.5rem !default;
|
||||
$h5-font-size: 1.25rem !default;
|
||||
$h6-font-size: 1rem !default;
|
||||
$h1-font-size: $font-size-base * 2.5 !default;
|
||||
$h2-font-size: $font-size-base * 2 !default;
|
||||
$h3-font-size: $font-size-base * 1.75 !default;
|
||||
$h4-font-size: $font-size-base * 1.5 !default;
|
||||
$h5-font-size: $font-size-base * 1.25 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
|
|
@ -278,7 +256,7 @@ $display3-weight: 300 !default;
|
|||
$display4-weight: 300 !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;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
|
@ -321,32 +299,35 @@ $table-border-color: $gray-200 !default;
|
|||
$table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-inverse-bg: $gray-900 !default;
|
||||
$table-inverse-accent-bg: rgba($white, .05) !default;
|
||||
$table-inverse-hover-bg: rgba($white, .075) !default;
|
||||
$table-inverse-border-color: lighten($gray-900, 7.5%) !default;
|
||||
$table-inverse-color: $body-bg !default;
|
||||
$table-dark-bg: $gray-900 !default;
|
||||
$table-dark-accent-bg: rgba($white, .05) !default;
|
||||
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// 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-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-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-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-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-link-disabled-color: $gray-600 !default;
|
||||
|
|
@ -367,7 +348,7 @@ $input-bg: $white !default;
|
|||
$input-disabled-bg: $gray-200 !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-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-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-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-bg: $gray-200 !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-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-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-bg: lighten(theme-color("primary"), 35%) !default;
|
||||
|
|
@ -562,9 +541,9 @@ $navbar-padding-x: $spacer !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
|
||||
$nav-link-height: $navbar-brand-font-size * $line-height-base !default;
|
||||
$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
||||
$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;
|
||||
$nav-link-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: ($nav-link-height - $navbar-brand-height) / 2 !default;
|
||||
|
||||
$navbar-toggler-padding-y: .25rem !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-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-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;
|
||||
|
|
@ -623,7 +602,7 @@ $jumbotron-bg: $gray-200 !default;
|
|||
|
||||
$card-spacer-y: .75rem !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-color: rgba($black,.125) !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-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-gap: 1.25rem !default;
|
||||
|
|
@ -657,37 +637,35 @@ $tooltip-arrow-color: $tooltip-bg !default;
|
|||
|
||||
// Popovers
|
||||
|
||||
$popover-inner-padding: 1px !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default;
|
||||
|
||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
$popover-header-padding-y: 8px !default;
|
||||
$popover-header-padding-x: 14px !default;
|
||||
$popover-header-padding-y: .5rem !default;
|
||||
$popover-header-padding-x: .75rem !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: 9px !default;
|
||||
$popover-body-padding-x: 14px !default;
|
||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||
|
||||
$popover-arrow-width: 10px !default;
|
||||
$popover-arrow-height: 5px !default;
|
||||
$popover-arrow-width: .8rem !default;
|
||||
$popover-arrow-height: .4rem !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-color: $white !default;
|
||||
$badge-font-size: 75% !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-padding-y: .25em !default;
|
||||
$badge-padding-x: .4em !default;
|
||||
$badge-border-radius: $border-radius !default;
|
||||
|
||||
$badge-pill-padding-x: .6em !default;
|
||||
// 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-height: 1rem !default;
|
||||
$progress-font-size: .75rem !default;
|
||||
$progress-font-size: ($font-size-base * .75) !default;
|
||||
$progress-bg: $gray-200 !default;
|
||||
$progress-border-radius: $border-radius !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-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$carousel-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='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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
// Bootstrap Grid only
|
||||
//
|
||||
// Includes relevant variables and mixins for the flexbox grid
|
||||
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
|
||||
|
||||
//
|
||||
// Box sizing, responsive, and more
|
||||
//
|
||||
/*!
|
||||
* Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; }
|
||||
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
// Bootstrap Reboot only
|
||||
//
|
||||
// Includes only Normalize and our custom Reboot reset.
|
||||
/*!
|
||||
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@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 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "root";
|
||||
@import "print";
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@mixin alert-variant($background, $border, $color) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Contextual backgrounds
|
||||
|
||||
@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) {
|
||||
@include color-yiq($bg);
|
||||
color: color-yiq($bg);
|
||||
background-color: $bg;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
@include color-yiq($bg);
|
||||
color: color-yiq($bg);
|
||||
text-decoration: none;
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,9 +81,19 @@
|
|||
$min: breakpoint-min($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@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.
|
||||
|
|
@ -98,8 +108,12 @@
|
|||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
@include media-breakpoint-up($name)
|
||||
@include media-breakpoint-up($name) {
|
||||
@content;
|
||||
}
|
||||
} @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,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
|
||||
@include color-yiq($background);
|
||||
background-color: $background;
|
||||
@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%)) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
&:hover {
|
||||
@include color-yiq($background);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
@include hover {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
|
||||
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||
} @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;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
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 {
|
||||
box-shadow: 0 0 0 3px rgba($color, .5);
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
|
@ -65,12 +74,14 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-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 {
|
||||
float: left !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Form control focus state
|
||||
//
|
||||
// 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
|
||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on
|
||||
|
|
@ -16,13 +16,40 @@
|
|||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
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) {
|
||||
|
||||
.#{$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,
|
||||
.custom-select {
|
||||
.was-validated &:#{$state},
|
||||
|
|
@ -33,8 +60,8 @@
|
|||
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
||||
}
|
||||
|
||||
~ .invalid-feedback,
|
||||
~ .invalid-tooltip {
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
// 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
|
||||
//
|
||||
// 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 {
|
||||
.order#{$infix}-#{$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.
|
||||
|
||||
@mixin make-container() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
padding-right: ($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.
|
||||
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 {
|
||||
// TODO: re-enable along with mq4-hover-shim
|
||||
// @if $enable-hover-media-query {
|
||||
|
|
@ -8,21 +9,21 @@
|
|||
// }
|
||||
// }
|
||||
// @else {
|
||||
// scss-lint:disable Indentation
|
||||
&:hover { @content }
|
||||
// scss-lint:enable Indentation
|
||||
&:hover { @content; }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus { @content }
|
||||
@include hover { @content }
|
||||
&:focus {
|
||||
@content;
|
||||
}
|
||||
@include hover { @content; }
|
||||
} @else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,14 +32,14 @@
|
|||
@if $enable-hover-media-query {
|
||||
&,
|
||||
&:focus {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
@include hover { @content }
|
||||
@include hover { @content; }
|
||||
} @else {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,14 +48,14 @@
|
|||
@if $enable-hover-media-query {
|
||||
&:focus,
|
||||
&:active {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
@include hover { @content }
|
||||
@include hover { @content; }
|
||||
} @else {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@
|
|||
//
|
||||
// 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) {
|
||||
background-image: url($file-1x);
|
||||
|
||||
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
||||
// but doesn't convert dppx=>dpi.
|
||||
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
||||
// Compatibility info: http://caniuse.com/#feat=css-media-resolution
|
||||
@media
|
||||
only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||
// Compatibility info: https://caniuse.com/#feat=css-media-resolution
|
||||
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
||||
only screen and (min-resolution: 2dppx) { // Standardized
|
||||
background-image: url($file-2x);
|
||||
background-size: $width-1x $height-1x;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
background-color: $background;
|
||||
}
|
||||
|
||||
//scss-lint:disable QualifyingElement
|
||||
a.list-group-item-#{$state},
|
||||
button.list-group-item-#{$state} {
|
||||
color: $color;
|
||||
|
|
@ -22,5 +21,4 @@
|
|||
border-color: $color;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
// Navbar vertical align
|
||||
//
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
|
||||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
|
||||
// to calculate the appropriate top margin.
|
||||
|
||||
// @mixin navbar-vertical-align($element-height) {
|
||||
// margin-top: (($navbar-height - $element-height) / 2);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// scss-lint:disable DuplicateProperty
|
||||
@mixin reset-text {
|
||||
font-family: $font-family-base;
|
||||
// We deliberately do NOT reset font-size or word-wrap.
|
||||
|
|
@ -6,7 +5,7 @@
|
|||
font-weight: $font-weight-normal;
|
||||
line-height: $line-height-base;
|
||||
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-shadow: none;
|
||||
text-transform: none;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content
|
||||
// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Typography
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Visibility
|
||||
|
||||
@mixin invisible($visibility) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
.align-baseline { vertical-align: baseline !important; } // Browser default
|
||||
.align-top { vertical-align: top !important; }
|
||||
.align-middle { vertical-align: middle !important; }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,19 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-variant('.bg-#{$color}', $value);
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
}
|
||||
|
||||
.bg-white { background-color: $white !important; }
|
||||
.bg-transparent { background-color: transparent !important; }
|
||||
@if $enable-gradients {
|
||||
@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
|
||||
//
|
||||
|
|
@ -44,9 +46,9 @@
|
|||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-0 {
|
||||
border-radius: 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
|
@ -11,6 +13,7 @@
|
|||
.d#{$infix}-inline-block { display: inline-block !important; }
|
||||
.d#{$infix}-block { display: block !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}-flex { display: flex !important; }
|
||||
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Flex variation
|
||||
//
|
||||
// Custom styles for additional flex alignment options.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Common values
|
||||
|
||||
// Sass list not in variables since it's not intended for customization.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Width and height
|
||||
|
||||
@each $prop, $abbrev in (width: w, height: h) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Margin and Padding
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Text
|
||||
//
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
.text-white { color: #fff !important; }
|
||||
|
||||
@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; }
|
||||
|
|
|
|||
Reference in New Issue