Basic guideline adjustments
This commit is contained in:
koenemann
parent
2cf98ecc55
commit
4c5c07baa1
538
css/theme.css
538
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
|
|
@ -20,7 +20,7 @@ require get_template_directory() . '/inc/widgets.php';
|
||||||
/**
|
/**
|
||||||
* Load functions to secure your WP install.
|
* Load functions to secure your WP install.
|
||||||
*/
|
*/
|
||||||
require get_template_directory() . '/inc/security.php';
|
// require get_template_directory() . '/inc/security.php';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue scripts and styles.
|
* Enqueue scripts and styles.
|
||||||
|
|
|
||||||
|
|
@ -271,7 +271,6 @@ gulp.task('copy-assets', ['clean-source'], function() {
|
||||||
return stream;
|
return stream;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Run
|
// Run
|
||||||
// gulp dist
|
// gulp dist
|
||||||
// Copies the files to the /dist folder for distribution as simple theme
|
// Copies the files to the /dist folder for distribution as simple theme
|
||||||
|
|
@ -280,7 +279,7 @@ gulp.task('dist', ['clean-dist'], function() {
|
||||||
.pipe(gulp.dest('dist/'))
|
.pipe(gulp.dest('dist/'))
|
||||||
});
|
});
|
||||||
|
|
||||||
// Deleting any file inside the /src folder
|
// Deleting any file inside the /dist folder
|
||||||
gulp.task('clean-dist', function () {
|
gulp.task('clean-dist', function () {
|
||||||
return del(['dist/**/*',]);
|
return del(['dist/**/*',]);
|
||||||
});
|
});
|
||||||
|
|
@ -293,7 +292,7 @@ gulp.task('dist-product', ['clean-dist-product'], function() {
|
||||||
.pipe(gulp.dest('dist-product/'))
|
.pipe(gulp.dest('dist-product/'))
|
||||||
});
|
});
|
||||||
|
|
||||||
// Deleting any file inside the /src folder
|
// Deleting any file inside the /dist-product folder
|
||||||
gulp.task('clean-dist-product', function () {
|
gulp.task('clean-dist-product', function () {
|
||||||
return del(['dist-product/**/*',]);
|
return del(['dist-product/**/*',]);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@ $container = get_theme_mod( 'understrap_container_type' );
|
||||||
'menu_class' => 'navbar-nav',
|
'menu_class' => 'navbar-nav',
|
||||||
'fallback_cb' => '',
|
'fallback_cb' => '',
|
||||||
'menu_id' => 'main-menu',
|
'menu_id' => 'main-menu',
|
||||||
'walker' => new WP_Bootstrap_Navwalker(),
|
'walker' => new understrap_WP_Bootstrap_Navwalker(),
|
||||||
)
|
)
|
||||||
); ?>
|
); ?>
|
||||||
<?php if ( 'container' == $container ) : ?>
|
<?php if ( 'container' == $container ) : ?>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (! class_exists ( 'WP_Bootstrap_Navwalker' )) :
|
if (! class_exists ( 'understrap_WP_Bootstrap_Navwalker' )) :
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class WP_Bootstrap_Navwalker
|
* Class WP_Bootstrap_Navwalker
|
||||||
|
|
@ -23,7 +23,7 @@ if (! class_exists ( 'WP_Bootstrap_Navwalker' )) :
|
||||||
* License: GPL-2.0+
|
* License: GPL-2.0+
|
||||||
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
|
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
|
||||||
*/
|
*/
|
||||||
class WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
|
class understrap_WP_Bootstrap_Navwalker extends Walker_Nav_Menu {
|
||||||
/**
|
/**
|
||||||
* The starting level of the menu.
|
* The starting level of the menu.
|
||||||
*
|
*
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Comments form.
|
// Comments form.
|
||||||
add_filter( 'comment_form_default_fields', 'bootstrap3_comment_form_fields' );
|
add_filter( 'comment_form_default_fields', 'understrap_bootstrap_comment_form_fields' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates the comments form.
|
* Creates the comments form.
|
||||||
|
|
@ -15,7 +15,7 @@ add_filter( 'comment_form_default_fields', 'bootstrap3_comment_form_fields' );
|
||||||
*
|
*
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
function bootstrap3_comment_form_fields( $fields ) {
|
function understrap_bootstrap_comment_form_fields( $fields ) {
|
||||||
$commenter = wp_get_current_commenter();
|
$commenter = wp_get_current_commenter();
|
||||||
$req = get_option( 'require_name_email' );
|
$req = get_option( 'require_name_email' );
|
||||||
$aria_req = ( $req ? " aria-required='true'" : '' );
|
$aria_req = ( $req ? " aria-required='true'" : '' );
|
||||||
|
|
@ -35,7 +35,7 @@ function bootstrap3_comment_form_fields( $fields ) {
|
||||||
return $fields;
|
return $fields;
|
||||||
}
|
}
|
||||||
|
|
||||||
add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
|
add_filter( 'comment_form_defaults', 'understrap_bootstrap_comment_form' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Builds the form.
|
* Builds the form.
|
||||||
|
|
@ -44,7 +44,7 @@ add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
|
||||||
*
|
*
|
||||||
* @return mixed
|
* @return mixed
|
||||||
*/
|
*/
|
||||||
function bootstrap3_comment_form( $args ) {
|
function understrap_bootstrap_comment_form( $args ) {
|
||||||
$args['comment_field'] = '<div class="form-group comment-form-comment">
|
$args['comment_field'] = '<div class="form-group comment-form-comment">
|
||||||
<label for="comment">' . _x( 'Comment', 'noun', 'understrap' ) . ( ' <span class="required">*</span>' ) . '</label>
|
<label for="comment">' . _x( 'Comment', 'noun', 'understrap' ) . ( ' <span class="required">*</span>' ) . '</label>
|
||||||
<textarea class="form-control" id="comment" name="comment" aria-required="true" cols="45" rows="8"></textarea>
|
<textarea class="form-control" id="comment" name="comment" aria-required="true" cols="45" rows="8"></textarea>
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,8 @@ if ( ! function_exists( 'understrap_scripts' ) ) {
|
||||||
// Get the theme data.
|
// Get the theme data.
|
||||||
$the_theme = wp_get_theme();
|
$the_theme = wp_get_theme();
|
||||||
wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), $the_theme->get( 'Version' ), false );
|
wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), $the_theme->get( 'Version' ), false );
|
||||||
wp_register_script('jquery-slim', (get_template_directory_uri() . '/js/jquery.slim.min.js'), true, '3.2.1');
|
//wp_register_script('jquery-slim', (get_template_directory_uri() . '/js/jquery.slim.min.js'), true, '3.2.1');
|
||||||
wp_enqueue_script( 'jquery-slim' );
|
//wp_enqueue_script( 'jquery-slim' );
|
||||||
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), true);
|
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), true);
|
||||||
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $the_theme->get( 'Version' ), true );
|
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $the_theme->get( 'Version' ), true );
|
||||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -3,4 +3,4 @@
|
||||||
// Just copy a variable from src/sass/bootstrap4/_variables.scss, paste it here and edit the value.
|
// Just copy a variable from src/sass/bootstrap4/_variables.scss, paste it here and edit the value.
|
||||||
|
|
||||||
|
|
||||||
$primary: #0A42E8; // Thats a sample how you could change a BootStrap variable.
|
$primary: #563d7c; // Thats a sample how you could change a BootStrap variable.
|
||||||
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
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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,6 +27,8 @@
|
||||||
// Expand the right padding and account for the close button's positioning.
|
// Expand the right padding and account for the close button's positioning.
|
||||||
|
|
||||||
.alert-dismissible {
|
.alert-dismissible {
|
||||||
|
padding-right: ($close-font-size + $alert-padding-x * 2);
|
||||||
|
|
||||||
// Adjust close link position
|
// Adjust close link position
|
||||||
.close {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,12 @@
|
||||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
// the borders properly
|
// the borders properly
|
||||||
@include hover {
|
@include hover {
|
||||||
z-index: 2;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
z-index: 2;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
.btn + .btn-group,
|
.btn + .btn-group,
|
||||||
.btn-group + .btn,
|
.btn-group + .btn,
|
||||||
.btn-group + .btn-group {
|
.btn-group + .btn-group {
|
||||||
margin-left: -$input-btn-border-width;
|
margin-left: -$btn-border-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,48 +43,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
.btn-group {
|
||||||
|
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set corners individual because sometimes a single button can be in a .btn-group
|
// 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
|
// and we need :first-child and :last-child to both match
|
||||||
.btn-group > .btn:first-child {
|
> .btn:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
&:not(:last-child):not(.dropdown-toggle) {
|
&:not(:last-child):not(.dropdown-toggle) {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
|
||||||
// immediately after it
|
|
||||||
.btn-group > .btn:last-child:not(:first-child),
|
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
||||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
// immediately after it
|
||||||
|
> .btn:last-child:not(:first-child),
|
||||||
|
> .dropdown-toggle:not(:first-child) {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||||
// dropdown buttons within a btn-group)
|
// dropdown buttons within a btn-group)
|
||||||
.btn-group > .btn-group {
|
> .btn-group {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
> .btn-group:first-child:not(:last-child) {
|
||||||
> .btn:last-child,
|
> .btn:last-child,
|
||||||
> .dropdown-toggle {
|
> .dropdown-toggle {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Sizing
|
// Sizing
|
||||||
//
|
//
|
||||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||||
|
|
@ -97,9 +100,9 @@
|
||||||
// Split button dropdowns
|
// Split button dropdowns
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn + .dropdown-toggle-split {
|
.dropdown-toggle-split {
|
||||||
padding-right: $input-btn-padding-x * .75;
|
padding-right: $btn-padding-x * .75;
|
||||||
padding-left: $input-btn-padding-x * .75;
|
padding-left: $btn-padding-x * .75;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -107,13 +110,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm + .dropdown-toggle-split {
|
.btn-sm + .dropdown-toggle-split {
|
||||||
padding-right: $input-btn-padding-x-sm * .75;
|
padding-right: $btn-padding-x-sm * .75;
|
||||||
padding-left: $input-btn-padding-x-sm * .75;
|
padding-left: $btn-padding-x-sm * .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-lg + .dropdown-toggle-split {
|
.btn-lg + .dropdown-toggle-split {
|
||||||
padding-right: $input-btn-padding-x-lg * .75;
|
padding-right: $btn-padding-x-lg * .75;
|
||||||
padding-left: $input-btn-padding-x-lg * .75;
|
padding-left: $btn-padding-x-lg * .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -147,7 +150,7 @@
|
||||||
> .btn + .btn-group,
|
> .btn + .btn-group,
|
||||||
> .btn-group + .btn,
|
> .btn-group + .btn,
|
||||||
> .btn-group + .btn-group {
|
> .btn-group + .btn-group {
|
||||||
margin-top: -$input-btn-border-width;
|
margin-top: -$btn-border-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -194,13 +197,15 @@
|
||||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||||
|
|
||||||
[data-toggle="buttons"] {
|
.btn-group-toggle {
|
||||||
> .btn,
|
> .btn,
|
||||||
> .btn-group > .btn {
|
> .btn-group > .btn {
|
||||||
|
margin-bottom: 0; // Override default `<label>` value
|
||||||
|
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
clip: rect(0,0,0,0);
|
clip: rect(0, 0, 0, 0);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border: $input-btn-border-width solid transparent;
|
border: $btn-border-width solid transparent;
|
||||||
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
|
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
|
||||||
@include transition($btn-transition);
|
@include transition($btn-transition);
|
||||||
|
|
||||||
// Share hover and focus styles
|
// Share hover and focus styles
|
||||||
|
|
@ -22,20 +22,20 @@
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: $input-btn-focus-box-shadow;
|
box-shadow: $btn-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled comes first so active can properly restyle
|
// Disabled comes first so active can properly restyle
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
opacity: .65;
|
opacity: $btn-disabled-opacity;
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):not(.disabled):active,
|
&:not([disabled]):not(.disabled):active,
|
||||||
&:not([disabled]):not(.disabled).active {
|
&:not([disabled]):not(.disabled).active {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
@include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
|
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -86,6 +86,7 @@ fieldset[disabled] a.btn {
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
|
text-decoration: $link-hover-decoration;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -104,11 +105,11 @@ fieldset[disabled] a.btn {
|
||||||
//
|
//
|
||||||
|
|
||||||
.btn-lg {
|
.btn-lg {
|
||||||
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
|
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
|
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -119,11 +120,11 @@ fieldset[disabled] a.btn {
|
||||||
.btn-block {
|
.btn-block {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
// Vertically space out multiple block buttons
|
// Vertically space out multiple block buttons
|
||||||
.btn-block + .btn-block {
|
+ .btn-block {
|
||||||
margin-top: $btn-block-spacing-y;
|
margin-top: $btn-block-spacing-y;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specificity overrides
|
// Specificity overrides
|
||||||
|
|
|
||||||
|
|
@ -172,14 +172,17 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.card {
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
|
// to display properly.
|
||||||
|
> .card {
|
||||||
margin-bottom: $card-group-margin;
|
margin-bottom: $card-group-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
@include media-breakpoint-up(sm) {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
// The child selector allows nested `.card` within `.card-group`
|
||||||
.card {
|
// to display properly.
|
||||||
|
> .card {
|
||||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||||
flex: 1 0 0%;
|
flex: 1 0 0%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -194,10 +197,12 @@
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
|
|
||||||
.card-img-top {
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
}
|
}
|
||||||
.card-img-bottom {
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -205,10 +210,12 @@
|
||||||
&:last-child {
|
&:last-child {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
|
|
||||||
.card-img-top {
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
}
|
}
|
||||||
.card-img-bottom {
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -216,20 +223,24 @@
|
||||||
&:only-child {
|
&:only-child {
|
||||||
@include border-radius($card-border-radius);
|
@include border-radius($card-border-radius);
|
||||||
|
|
||||||
.card-img-top {
|
.card-img-top,
|
||||||
|
.card-header {
|
||||||
@include border-top-radius($card-border-radius);
|
@include border-top-radius($card-border-radius);
|
||||||
}
|
}
|
||||||
.card-img-bottom {
|
.card-img-bottom,
|
||||||
|
.card-footer {
|
||||||
@include border-bottom-radius($card-border-radius);
|
@include border-bottom-radius($card-border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||||
border-radius: 0;
|
@include border-radius(0);
|
||||||
|
|
||||||
.card-img-top,
|
.card-img-top,
|
||||||
.card-img-bottom {
|
.card-img-bottom,
|
||||||
border-radius: 0;
|
.card-header,
|
||||||
|
.card-footer {
|
||||||
|
@include border-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -91,13 +91,13 @@
|
||||||
.carousel-control-prev {
|
.carousel-control-prev {
|
||||||
left: 0;
|
left: 0;
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.carousel-control-next {
|
.carousel-control-next {
|
||||||
right: 0;
|
right: 0;
|
||||||
@if $enable-gradients {
|
@if $enable-gradients {
|
||||||
background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||||
button.close {
|
button.close {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,6 @@ kbd {
|
||||||
// Blocks of code
|
// Blocks of code
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: $code-font-size;
|
font-size: $code-font-size;
|
||||||
color: $pre-color;
|
color: $pre-color;
|
||||||
|
|
||||||
|
|
@ -53,7 +51,7 @@ pre {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: 0;
|
@include border-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
&:active ~ .custom-control-indicator {
|
&:active ~ .custom-control-indicator {
|
||||||
color: $custom-control-indicator-active-color;
|
color: $custom-control-indicator-active-color;
|
||||||
@include gradient-bg($custom-control-indicator-active-bg);
|
background-color: $custom-control-indicator-active-bg;
|
||||||
@include box-shadow($custom-control-indicator-active-box-shadow);
|
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,10 +62,17 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: $custom-control-indicator-bg;
|
background-color: $custom-control-indicator-bg;
|
||||||
|
@include box-shadow($custom-control-indicator-box-shadow);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
width: $custom-control-indicator-size;
|
||||||
|
height: $custom-control-indicator-size;
|
||||||
|
content: "";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: $custom-control-indicator-bg-size;
|
background-size: $custom-control-indicator-bg-size;
|
||||||
@include box-shadow($custom-control-indicator-box-shadow);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkboxes
|
// Checkboxes
|
||||||
|
|
@ -78,13 +85,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-indicator {
|
.custom-control-input:checked ~ .custom-control-indicator {
|
||||||
|
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
background-image: $custom-checkbox-indicator-icon-checked;
|
background-image: $custom-checkbox-indicator-icon-checked;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||||
background-color: $custom-checkbox-indicator-indeterminate-bg;
|
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||||
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
|
||||||
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,8 +112,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-control-input:checked ~ .custom-control-indicator {
|
.custom-control-input:checked ~ .custom-control-indicator {
|
||||||
|
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
background-image: $custom-radio-indicator-icon-checked;
|
background-image: $custom-radio-indicator-icon-checked;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -148,12 +166,12 @@
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $custom-select-focus-border-color;
|
border-color: $custom-select-focus-border-color;
|
||||||
outline: none;
|
outline: 0;
|
||||||
@include box-shadow($custom-select-focus-box-shadow);
|
box-shadow: $custom-select-focus-box-shadow;
|
||||||
|
|
||||||
&::-ms-value {
|
&::-ms-value {
|
||||||
// For visual consistency with other platforms/browsers,
|
// For visual consistency with other platforms/browsers,
|
||||||
// supress the default white text on blue background highlight given to
|
// suppress the default white text on blue background highlight given to
|
||||||
// the selected option text when the (still closed) <select> receives focus
|
// the selected option text when the (still closed) <select> receives focus
|
||||||
// in IE and (under certain conditions) Edge.
|
// in IE and (under certain conditions) Edge.
|
||||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||||
|
|
@ -162,8 +180,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[multiple] {
|
&[multiple],
|
||||||
|
&[size]:not([size="1"]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
padding-right: $custom-select-padding-x;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -185,6 +205,13 @@
|
||||||
font-size: $custom-select-font-size-sm;
|
font-size: $custom-select-font-size-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-select-lg {
|
||||||
|
height: $custom-select-height-lg;
|
||||||
|
padding-top: $custom-select-padding-y;
|
||||||
|
padding-bottom: $custom-select-padding-y;
|
||||||
|
font-size: $custom-select-font-size-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// File
|
// File
|
||||||
//
|
//
|
||||||
|
|
@ -206,7 +233,12 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
&:focus ~ .custom-file-control {
|
&:focus ~ .custom-file-control {
|
||||||
|
border-color: $custom-file-focus-border-color;
|
||||||
box-shadow: $custom-file-focus-box-shadow;
|
box-shadow: $custom-file-focus-box-shadow;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-color: $custom-file-focus-border-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -215,7 +247,6 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 5;
|
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
line-height: $custom-file-line-height;
|
line-height: $custom-file-line-height;
|
||||||
|
|
@ -238,7 +269,7 @@
|
||||||
top: -$custom-file-border-width;
|
top: -$custom-file-border-width;
|
||||||
right: -$custom-file-border-width;
|
right: -$custom-file-border-width;
|
||||||
bottom: -$custom-file-border-width;
|
bottom: -$custom-file-border-width;
|
||||||
z-index: 6;
|
z-index: 1;
|
||||||
display: block;
|
display: block;
|
||||||
height: $custom-file-height;
|
height: $custom-file-height;
|
||||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
background-color: $dropdown-bg;
|
background-color: $dropdown-bg;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $dropdown-border-width solid $dropdown-border-color;
|
border: $dropdown-border-width solid $dropdown-border-color;
|
||||||
@include border-radius($border-radius);
|
@include border-radius($dropdown-border-radius);
|
||||||
@include box-shadow($dropdown-box-shadow);
|
@include box-shadow($dropdown-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -44,6 +44,34 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropright {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(right);
|
||||||
|
&::after {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropleft {
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: $dropdown-spacer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@include caret(left);
|
||||||
|
&::before {
|
||||||
|
vertical-align: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Dividers (basically an `<hr>`) within the dropdown
|
// Dividers (basically an `<hr>`) within the dropdown
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
@include nav-divider($dropdown-divider-bg);
|
@include nav-divider($dropdown-divider-bg);
|
||||||
|
|
@ -61,7 +89,7 @@
|
||||||
color: $dropdown-link-color;
|
color: $dropdown-link-color;
|
||||||
text-align: inherit; // For `<button>`s
|
text-align: inherit; // For `<button>`s
|
||||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||||
background: none; // For `<button>`s
|
background-color: transparent; // For `<button>`s
|
||||||
border: 0; // For `<button>`s
|
border: 0; // For `<button>`s
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,13 @@
|
||||||
.form-control {
|
.form-control {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
padding: $input-padding-y $input-padding-x;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-line-height;
|
||||||
color: $input-color;
|
color: $input-color;
|
||||||
background-color: $input-bg;
|
background-color: $input-bg;
|
||||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
|
||||||
background-image: none;
|
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: $input-btn-border-width solid $input-border-color;
|
border: $input-border-width solid $input-border-color;
|
||||||
|
|
||||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
|
|
@ -88,24 +86,24 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the label text to
|
// For use with horizontal and inline forms, when you need the label text to
|
||||||
// align with the form controls.
|
// align with the form controls.
|
||||||
.col-form-label {
|
.col-form-label {
|
||||||
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
|
||||||
margin-bottom: 0; // Override the `<label>` default
|
margin-bottom: 0; // Override the `<label>` default
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-lg {
|
.col-form-label-lg {
|
||||||
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
line-height: $input-btn-line-height-lg;
|
line-height: $input-line-height-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-sm {
|
.col-form-label-sm {
|
||||||
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||||
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
line-height: $input-btn-line-height-sm;
|
line-height: $input-line-height-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -116,8 +114,8 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the legend text to
|
// For use with horizontal and inline forms, when you need the legend text to
|
||||||
// be the same size as regular labels, and to align with the form controls.
|
// be the same size as regular labels, and to align with the form controls.
|
||||||
.col-form-legend {
|
.col-form-legend {
|
||||||
padding-top: $input-btn-padding-y;
|
padding-top: $input-padding-y;
|
||||||
padding-bottom: $input-btn-padding-y;
|
padding-bottom: $input-padding-y;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
}
|
}
|
||||||
|
|
@ -129,13 +127,15 @@ select.form-control {
|
||||||
// text (without any border, background color, focus indicator)
|
// text (without any border, background color, focus indicator)
|
||||||
|
|
||||||
.form-control-plaintext {
|
.form-control-plaintext {
|
||||||
padding-top: $input-btn-padding-y;
|
display: block;
|
||||||
padding-bottom: $input-btn-padding-y;
|
width: 100%;
|
||||||
|
padding-top: $input-padding-y;
|
||||||
|
padding-bottom: $input-padding-y;
|
||||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-line-height;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
border-width: $input-btn-border-width 0;
|
border-width: $input-border-width 0;
|
||||||
|
|
||||||
&.form-control-sm,
|
&.form-control-sm,
|
||||||
&.form-control-lg {
|
&.form-control-lg {
|
||||||
|
|
@ -154,9 +154,9 @@ select.form-control {
|
||||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||||
|
|
||||||
.form-control-sm {
|
.form-control-sm {
|
||||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
line-height: $input-btn-line-height-sm;
|
line-height: $input-line-height-sm;
|
||||||
@include border-radius($input-border-radius-sm);
|
@include border-radius($input-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,9 +167,9 @@ select.form-control-sm {
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-lg {
|
.form-control-lg {
|
||||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
line-height: $input-btn-line-height-lg;
|
line-height: $input-line-height-lg;
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -57,13 +57,13 @@
|
||||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||||
|
|
||||||
@if ($yiq >= 150) {
|
@if ($yiq >= 150) {
|
||||||
@return #111;
|
@return $yiq-text-dark;
|
||||||
} @else {
|
} @else {
|
||||||
@return #fff;
|
@return $yiq-text-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Retreive color Sass maps
|
// Retrieve color Sass maps
|
||||||
@function color($key: "blue") {
|
@function color($key: "blue") {
|
||||||
@return map-get($colors, $key);
|
@return map-get($colors, $key);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
background-color: $thumbnail-bg;
|
background-color: $thumbnail-bg;
|
||||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||||
@include border-radius($thumbnail-border-radius);
|
@include border-radius($thumbnail-border-radius);
|
||||||
@include transition($thumbnail-transition);
|
|
||||||
@include box-shadow($thumbnail-box-shadow);
|
@include box-shadow($thumbnail-box-shadow);
|
||||||
|
|
||||||
// Keep them at most 100% wide
|
// Keep them at most 100% wide
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
// Ensure that the input is always above the *appended* addon button for
|
// Ensure that the input is always above the *appended* addon button for
|
||||||
// proper border colors.
|
// proper border colors.
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 1;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||||
|
|
@ -23,27 +23,39 @@
|
||||||
|
|
||||||
// Bring the "active" form control to the front
|
// Bring the "active" form control to the front
|
||||||
@include hover-focus-active {
|
@include hover-focus-active {
|
||||||
z-index: 3;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group-addon,
|
.input-group-addon,
|
||||||
.input-group-btn,
|
.input-group-btn,
|
||||||
.input-group .form-control {
|
.input-group .form-control,
|
||||||
|
.input-group .custom-select,
|
||||||
|
.input-group .custom-file {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child) {
|
&:not(:first-child):not(:last-child) {
|
||||||
@include border-radius(0);
|
@include border-radius(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-group .custom-file {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group .custom-select,
|
||||||
|
.input-group .custom-file {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.input-group-addon,
|
.input-group-addon,
|
||||||
.input-group-btn {
|
.input-group-btn {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Sizing options
|
// Sizing options
|
||||||
//
|
//
|
||||||
// Remix the default form control sizing classes into new ones for easier
|
// Remix the default form control sizing classes into new ones for easier
|
||||||
|
|
@ -66,26 +78,26 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.input-group-addon {
|
.input-group-addon {
|
||||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
padding: $input-padding-y $input-padding-x;
|
||||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||||
font-size: $font-size-base; // Match inputs
|
font-size: $font-size-base; // Match inputs
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
line-height: $input-btn-line-height;
|
line-height: $input-line-height;
|
||||||
color: $input-group-addon-color;
|
color: $input-group-addon-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: $input-group-addon-bg;
|
background-color: $input-group-addon-bg;
|
||||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
border: $input-border-width solid $input-group-addon-border-color;
|
||||||
@include border-radius($input-border-radius);
|
@include border-radius($input-border-radius);
|
||||||
|
|
||||||
// Sizing
|
// Sizing
|
||||||
&.form-control-sm {
|
&.form-control-sm {
|
||||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
@include border-radius($input-border-radius-sm);
|
@include border-radius($input-border-radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.form-control-lg {
|
&.form-control-lg {
|
||||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
@include border-radius($input-border-radius-lg);
|
@include border-radius($input-border-radius-lg);
|
||||||
}
|
}
|
||||||
|
|
@ -103,6 +115,8 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
.input-group .form-control:not(:last-child),
|
.input-group .form-control:not(:last-child),
|
||||||
|
.input-group .custom-select:not(:last-child),
|
||||||
|
.input-group .custom-file:not(:last-child) .custom-file-control::before,
|
||||||
.input-group-addon:not(:last-child),
|
.input-group-addon:not(:last-child),
|
||||||
.input-group-btn:not(:last-child) > .btn,
|
.input-group-btn:not(:last-child) > .btn,
|
||||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||||
|
|
@ -111,10 +125,14 @@
|
||||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||||
@include border-right-radius(0);
|
@include border-right-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group-addon:not(:last-child) {
|
.input-group-addon:not(:last-child) {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group .form-control:not(:first-child),
|
.input-group .form-control:not(:first-child),
|
||||||
|
.input-group .custom-select:not(:first-child),
|
||||||
|
.input-group .custom-file:not(:first-child) .custom-file-control,
|
||||||
.input-group-addon:not(:first-child),
|
.input-group-addon:not(:first-child),
|
||||||
.input-group-btn:not(:first-child) > .btn,
|
.input-group-btn:not(:first-child) > .btn,
|
||||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||||
|
|
@ -123,8 +141,13 @@
|
||||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
.form-control + .input-group-addon:not(:first-child) {
|
|
||||||
|
.form-control,
|
||||||
|
.custom-select,
|
||||||
|
.custom-file {
|
||||||
|
+ .input-group-addon:not(:first-child) {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
@ -145,12 +168,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
+ .btn {
|
+ .btn {
|
||||||
margin-left: (-$input-btn-border-width);
|
margin-left: (-$input-border-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bring the "active" button to the front
|
// Bring the "active" button to the front
|
||||||
@include hover-focus-active {
|
@include hover-focus-active {
|
||||||
z-index: 3;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -162,24 +185,24 @@
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
> .btn,
|
> .btn,
|
||||||
> .btn-group {
|
> .btn-group {
|
||||||
margin-right: (-$input-btn-border-width);
|
margin-right: (-$input-border-width);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
> .btn,
|
> .btn,
|
||||||
> .btn-group {
|
> .btn-group {
|
||||||
z-index: 2;
|
z-index: 1;
|
||||||
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
|
// remove nagative margin ($input-border-width) to solve overlapping issue with button.
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
// When input is first, overlap the right side of it with the button(-group)
|
// When input is first, overlap the right side of it with the button(-group)
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: (-$input-btn-border-width);
|
margin-left: (-$input-border-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Because specificity
|
// Because specificity
|
||||||
@include hover-focus-active {
|
@include hover-focus-active {
|
||||||
z-index: 3;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
|
|
||||||
// Include both here for `<a>`s and `<button>`s
|
// Include both here for `<a>`s and `<button>`s
|
||||||
&.active {
|
&.active {
|
||||||
z-index: 2; // Place active items above their siblings for proper border styling
|
z-index: 1; // Place active items above their siblings for proper border styling
|
||||||
color: $list-group-active-color;
|
color: $list-group-active-color;
|
||||||
background-color: $list-group-active-bg;
|
background-color: $list-group-active-bg;
|
||||||
border-color: $list-group-active-border-color;
|
border-color: $list-group-active-border-color;
|
||||||
|
|
@ -87,7 +87,7 @@
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-radius: 0;
|
@include border-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|
|
||||||
|
|
@ -26,16 +26,10 @@
|
||||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||||
|
|
||||||
// When fading in the modal, animate it to slide down
|
.modal-open & {
|
||||||
&.fade .modal-dialog {
|
|
||||||
@include transition($modal-transition);
|
|
||||||
transform: translate(0, -25%);
|
|
||||||
}
|
|
||||||
&.show .modal-dialog { transform: translate(0, 0); }
|
|
||||||
}
|
|
||||||
.modal-open .modal {
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Shell div to position the modal with bottom padding
|
// Shell div to position the modal with bottom padding
|
||||||
|
|
@ -45,6 +39,21 @@
|
||||||
margin: $modal-dialog-margin;
|
margin: $modal-dialog-margin;
|
||||||
// allow clicks to pass through for custom click handling to close modal
|
// allow clicks to pass through for custom click handling to close modal
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
|
// When fading in the modal, animate it to slide down
|
||||||
|
.modal.fade & {
|
||||||
|
@include transition($modal-transition);
|
||||||
|
transform: translate(0, -25%);
|
||||||
|
}
|
||||||
|
.modal.show & {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog-centered {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Actual modal
|
// Actual modal
|
||||||
|
|
@ -52,6 +61,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||||
// counteract the pointer-events: none; in the .modal-dialog
|
// counteract the pointer-events: none; in the .modal-dialog
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
background-color: $modal-content-bg;
|
background-color: $modal-content-bg;
|
||||||
|
|
@ -141,11 +151,16 @@
|
||||||
margin: $modal-dialog-margin-y-sm-up auto;
|
margin: $modal-dialog-margin-y-sm-up auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-dialog-centered {
|
||||||
|
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
||||||
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
@include box-shadow($modal-content-box-shadow-sm-up);
|
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-sm { max-width: $modal-sm; }
|
.modal-sm { max-width: $modal-sm; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
@include border-top-radius($nav-tabs-border-radius);
|
@include border-top-radius($nav-tabs-border-radius);
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
border-color: $nav-tabs-link-hover-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
.nav-item.show .nav-link {
|
.nav-item.show .nav-link {
|
||||||
color: $nav-tabs-link-active-color;
|
color: $nav-tabs-link-active-color;
|
||||||
background-color: $nav-tabs-link-active-bg;
|
background-color: $nav-tabs-link-active-bg;
|
||||||
border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
|
border-color: $nav-tabs-link-active-border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@
|
||||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||||
font-size: $navbar-toggler-font-size;
|
font-size: $navbar-toggler-font-size;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
background: transparent; // remove default button style
|
background-color: transparent; // remove default button style
|
||||||
border: $border-width solid transparent; // remove default button style
|
border: $border-width solid transparent; // remove default button style
|
||||||
@include border-radius($navbar-toggler-border-radius);
|
@include border-radius($navbar-toggler-border-radius);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,34 +4,6 @@
|
||||||
@include border-radius();
|
@include border-radius();
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-item {
|
|
||||||
&:first-child {
|
|
||||||
.page-link {
|
|
||||||
margin-left: 0;
|
|
||||||
@include border-left-radius($border-radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
.page-link {
|
|
||||||
@include border-right-radius($border-radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .page-link {
|
|
||||||
z-index: 2;
|
|
||||||
color: $pagination-active-color;
|
|
||||||
background-color: $pagination-active-bg;
|
|
||||||
border-color: $pagination-active-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled .page-link {
|
|
||||||
color: $pagination-disabled-color;
|
|
||||||
pointer-events: none;
|
|
||||||
background-color: $pagination-disabled-bg;
|
|
||||||
border-color: $pagination-disabled-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-link {
|
.page-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -50,6 +22,34 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
&:first-child {
|
||||||
|
.page-link {
|
||||||
|
margin-left: 0;
|
||||||
|
@include border-left-radius($border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.page-link {
|
||||||
|
@include border-right-radius($border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active .page-link {
|
||||||
|
z-index: 1;
|
||||||
|
color: $pagination-active-color;
|
||||||
|
background-color: $pagination-active-bg;
|
||||||
|
border-color: $pagination-active-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled .page-link {
|
||||||
|
color: $pagination-disabled-color;
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: $pagination-disabled-bg;
|
||||||
|
border-color: $pagination-disabled-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Sizing
|
// Sizing
|
||||||
|
|
|
||||||
|
|
@ -14,10 +14,12 @@
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: $progress-bar-color;
|
color: $progress-bar-color;
|
||||||
|
text-align: center;
|
||||||
background-color: $progress-bar-bg;
|
background-color: $progress-bar-bg;
|
||||||
|
@include transition($progress-bar-transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-striped {
|
.progress-bar-striped {
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ html {
|
||||||
-webkit-text-size-adjust: 100%; // 4
|
-webkit-text-size-adjust: 100%; // 4
|
||||||
-ms-text-size-adjust: 100%; // 4
|
-ms-text-size-adjust: 100%; // 4
|
||||||
-ms-overflow-style: scrollbar; // 5
|
-ms-overflow-style: scrollbar; // 5
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
|
||||||
}
|
}
|
||||||
|
|
||||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||||
|
|
@ -71,7 +71,7 @@ body {
|
||||||
//
|
//
|
||||||
// Credit: https://github.com/suitcss/base
|
// Credit: https://github.com/suitcss/base
|
||||||
[tabindex="-1"]:focus {
|
[tabindex="-1"]:focus {
|
||||||
outline: none !important;
|
outline: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
margin-left: -($tooltip-arrow-width - 2);
|
margin-left: -$tooltip-arrow-width;
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||||
border-top-color: $tooltip-arrow-color;
|
border-top-color: $tooltip-arrow-color;
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
margin-top: -($tooltip-arrow-width - 2);
|
margin-top: -$tooltip-arrow-width;
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||||
border-right-color: $tooltip-arrow-color;
|
border-right-color: $tooltip-arrow-color;
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
margin-left: -($tooltip-arrow-width - 2);
|
margin-left: -$tooltip-arrow-width;
|
||||||
content: "";
|
content: "";
|
||||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||||
border-bottom-color: $tooltip-arrow-color;
|
border-bottom-color: $tooltip-arrow-color;
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
|
|
||||||
.arrow::before {
|
.arrow::before {
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: -($tooltip-arrow-width - 2);
|
margin-top: -($tooltip-arrow-width);
|
||||||
content: "";
|
content: "";
|
||||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||||
border-left-color: $tooltip-arrow-color;
|
border-left-color: $tooltip-arrow-color;
|
||||||
|
|
|
||||||
|
|
@ -53,8 +53,8 @@ h6, .h6 { font-size: $h6-font-size; }
|
||||||
//
|
//
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin-top: 1rem;
|
margin-top: $hr-margin-y;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: $hr-margin-y;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: $hr-border-width solid $hr-border-color;
|
border-top: $hr-border-width solid $hr-border-color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,10 @@ $theme-colors: map-merge((
|
||||||
// Set a specific jump point for requesting color jumps
|
// Set a specific jump point for requesting color jumps
|
||||||
$theme-color-interval: 8% !default;
|
$theme-color-interval: 8% !default;
|
||||||
|
|
||||||
|
// Customize the light and dark text colors for use in our YIQ color contrast function.
|
||||||
|
$yiq-text-dark: $gray-900 !default;
|
||||||
|
$yiq-text-light: $white !default;
|
||||||
|
|
||||||
|
|
||||||
// Options
|
// Options
|
||||||
//
|
//
|
||||||
|
|
@ -217,7 +221,7 @@ $transition-collapse: height .35s ease !default;
|
||||||
|
|
||||||
// stylelint-disable value-keyword-case
|
// stylelint-disable value-keyword-case
|
||||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||||
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||||
$font-family-base: $font-family-sans-serif !default;
|
$font-family-base: $font-family-sans-serif !default;
|
||||||
// stylelint-enable value-keyword-case
|
// stylelint-enable value-keyword-case
|
||||||
|
|
||||||
|
|
@ -266,20 +270,22 @@ $text-muted: $gray-600 !default;
|
||||||
$blockquote-small-color: $gray-600 !default;
|
$blockquote-small-color: $gray-600 !default;
|
||||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||||
|
|
||||||
$hr-border-color: rgba($black,.1) !default;
|
$hr-border-color: rgba($black, .1) !default;
|
||||||
$hr-border-width: $border-width !default;
|
$hr-border-width: $border-width !default;
|
||||||
|
|
||||||
$mark-padding: .2em !default;
|
$mark-padding: .2em !default;
|
||||||
|
|
||||||
$dt-font-weight: $font-weight-bold !default;
|
$dt-font-weight: $font-weight-bold !default;
|
||||||
|
|
||||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default;
|
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
|
||||||
$nested-kbd-font-weight: $font-weight-bold !default;
|
$nested-kbd-font-weight: $font-weight-bold !default;
|
||||||
|
|
||||||
$list-inline-padding: 5px !default;
|
$list-inline-padding: .5rem !default;
|
||||||
|
|
||||||
$mark-bg: #fcf8e3 !default;
|
$mark-bg: #fcf8e3 !default;
|
||||||
|
|
||||||
|
$hr-margin-y: $spacer !default;
|
||||||
|
|
||||||
|
|
||||||
// Tables
|
// Tables
|
||||||
//
|
//
|
||||||
|
|
@ -289,8 +295,8 @@ $table-cell-padding: .75rem !default;
|
||||||
$table-cell-padding-sm: .3rem !default;
|
$table-cell-padding-sm: .3rem !default;
|
||||||
|
|
||||||
$table-bg: transparent !default;
|
$table-bg: transparent !default;
|
||||||
$table-accent-bg: rgba($black,.05) !default;
|
$table-accent-bg: rgba($black, .05) !default;
|
||||||
$table-hover-bg: rgba($black,.075) !default;
|
$table-hover-bg: rgba($black, .075) !default;
|
||||||
$table-active-bg: $table-hover-bg !default;
|
$table-active-bg: $table-hover-bg !default;
|
||||||
|
|
||||||
$table-border-width: $border-width !default;
|
$table-border-width: $border-width !default;
|
||||||
|
|
@ -306,9 +312,9 @@ $table-dark-border-color: lighten($gray-900, 7.5%) !default;
|
||||||
$table-dark-color: $body-bg !default;
|
$table-dark-color: $body-bg !default;
|
||||||
|
|
||||||
|
|
||||||
// Buttons
|
// Buttons + Forms
|
||||||
//
|
//
|
||||||
// For each of Bootstrap's buttons, define text, background and border color.
|
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||||
|
|
||||||
$input-btn-padding-y: .375rem !default;
|
$input-btn-padding-y: .375rem !default;
|
||||||
$input-btn-padding-x: .75rem !default;
|
$input-btn-padding-x: .75rem !default;
|
||||||
|
|
@ -326,9 +332,33 @@ $input-btn-padding-y-lg: .5rem !default;
|
||||||
$input-btn-padding-x-lg: 1rem !default;
|
$input-btn-padding-x-lg: 1rem !default;
|
||||||
$input-btn-line-height-lg: $line-height-lg !default;
|
$input-btn-line-height-lg: $line-height-lg !default;
|
||||||
|
|
||||||
|
$input-btn-border-width: $border-width !default;
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
//
|
||||||
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||||
|
|
||||||
|
$btn-padding-y: $input-btn-padding-y !default;
|
||||||
|
$btn-padding-x: $input-btn-padding-x !default;
|
||||||
|
$btn-line-height: $input-btn-line-height !default;
|
||||||
|
|
||||||
|
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||||
|
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||||
|
$btn-line-height-sm: $input-btn-line-height-sm !default;
|
||||||
|
|
||||||
|
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||||
|
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||||
|
$btn-line-height-lg: $input-btn-line-height-lg !default;
|
||||||
|
|
||||||
|
$btn-border-width: $input-btn-border-width !default;
|
||||||
|
|
||||||
$btn-font-weight: $font-weight-normal !default;
|
$btn-font-weight: $font-weight-normal !default;
|
||||||
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
|
||||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
$btn-focus-width: $input-btn-focus-width !default;
|
||||||
|
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||||
|
$btn-disabled-opacity: .65 !default;
|
||||||
|
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
||||||
|
|
||||||
$btn-link-disabled-color: $gray-600 !default;
|
$btn-link-disabled-color: $gray-600 !default;
|
||||||
|
|
||||||
|
|
@ -339,18 +369,30 @@ $btn-border-radius: $border-radius !default;
|
||||||
$btn-border-radius-lg: $border-radius-lg !default;
|
$btn-border-radius-lg: $border-radius-lg !default;
|
||||||
$btn-border-radius-sm: $border-radius-sm !default;
|
$btn-border-radius-sm: $border-radius-sm !default;
|
||||||
|
|
||||||
$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
|
|
||||||
|
$input-padding-y: $input-btn-padding-y !default;
|
||||||
|
$input-padding-x: $input-btn-padding-x !default;
|
||||||
|
$input-line-height: $input-btn-line-height !default;
|
||||||
|
|
||||||
|
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||||
|
$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||||
|
$input-line-height-sm: $input-btn-line-height-sm !default;
|
||||||
|
|
||||||
|
$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||||
|
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||||
|
$input-line-height-lg: $input-btn-line-height-lg !default;
|
||||||
|
|
||||||
$input-bg: $white !default;
|
$input-bg: $white !default;
|
||||||
$input-disabled-bg: $gray-200 !default;
|
$input-disabled-bg: $gray-200 !default;
|
||||||
|
|
||||||
$input-color: $gray-700 !default;
|
$input-color: $gray-700 !default;
|
||||||
$input-border-color: $gray-400 !default;
|
$input-border-color: $gray-400 !default;
|
||||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
$input-border-width: $input-btn-border-width !default;
|
||||||
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
|
||||||
|
|
||||||
$input-border-radius: $border-radius !default;
|
$input-border-radius: $border-radius !default;
|
||||||
$input-border-radius-lg: $border-radius-lg !default;
|
$input-border-radius-lg: $border-radius-lg !default;
|
||||||
|
|
@ -359,6 +401,8 @@ $input-border-radius-sm: $border-radius-sm !default;
|
||||||
$input-focus-bg: $input-bg !default;
|
$input-focus-bg: $input-bg !default;
|
||||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||||
$input-focus-color: $input-color !default;
|
$input-focus-color: $input-color !default;
|
||||||
|
$input-focus-width: $input-btn-focus-width !default;
|
||||||
|
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$input-placeholder-color: $gray-600 !default;
|
$input-placeholder-color: $gray-600 !default;
|
||||||
|
|
||||||
|
|
@ -373,7 +417,7 @@ $input-height-sm: calc(#{$input-height-inner-sm} + #{$inpu
|
||||||
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
|
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
|
||||||
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
|
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
|
||||||
|
|
||||||
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
|
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||||
|
|
||||||
$form-text-margin-top: .25rem !default;
|
$form-text-margin-top: .25rem !default;
|
||||||
|
|
||||||
|
|
@ -395,9 +439,9 @@ $custom-control-spacer-y: .25rem !default;
|
||||||
$custom-control-spacer-x: 1rem !default;
|
$custom-control-spacer-x: 1rem !default;
|
||||||
|
|
||||||
$custom-control-indicator-size: 1rem !default;
|
$custom-control-indicator-size: 1rem !default;
|
||||||
$custom-control-indicator-bg: #ddd !default;
|
$custom-control-indicator-bg: $gray-300 !default;
|
||||||
$custom-control-indicator-bg-size: 50% 50% !default;
|
$custom-control-indicator-bg-size: 50% 50% !default;
|
||||||
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
|
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
|
||||||
|
|
||||||
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
||||||
$custom-control-description-disabled-color: $gray-600 !default;
|
$custom-control-description-disabled-color: $gray-600 !default;
|
||||||
|
|
@ -433,21 +477,25 @@ $custom-select-disabled-color: $gray-600 !default;
|
||||||
$custom-select-bg: $white !default;
|
$custom-select-bg: $white !default;
|
||||||
$custom-select-disabled-bg: $gray-200 !default;
|
$custom-select-disabled-bg: $gray-200 !default;
|
||||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||||
$custom-select-indicator-color: #333 !default;
|
$custom-select-indicator-color: $gray-800 !default;
|
||||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$custom-select-border-width: $input-btn-border-width !default;
|
$custom-select-border-width: $input-btn-border-width !default;
|
||||||
$custom-select-border-color: $input-border-color !default;
|
$custom-select-border-color: $input-border-color !default;
|
||||||
$custom-select-border-radius: $border-radius !default;
|
$custom-select-border-radius: $border-radius !default;
|
||||||
|
|
||||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
$custom-select-focus-border-color: $input-focus-border-color !default;
|
||||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$custom-select-font-size-sm: 75% !default;
|
$custom-select-font-size-sm: 75% !default;
|
||||||
$custom-select-height-sm: $input-height-sm !default;
|
$custom-select-height-sm: $input-height-sm !default;
|
||||||
|
|
||||||
|
$custom-select-font-size-lg: 125% !default;
|
||||||
|
$custom-select-height-lg: $input-height-lg !default;
|
||||||
|
|
||||||
$custom-file-height: $input-height !default;
|
$custom-file-height: $input-height !default;
|
||||||
$custom-file-width: 14rem !default;
|
$custom-file-width: 14rem !default;
|
||||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
|
$custom-file-focus-border-color: $input-focus-border-color !default;
|
||||||
|
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||||
|
|
||||||
$custom-file-padding-y: $input-btn-padding-y !default;
|
$custom-file-padding-y: $input-btn-padding-y !default;
|
||||||
$custom-file-padding-x: $input-btn-padding-x !default;
|
$custom-file-padding-x: $input-btn-padding-x !default;
|
||||||
|
|
@ -471,6 +519,8 @@ $custom-file-text: (
|
||||||
|
|
||||||
|
|
||||||
// Form validation
|
// Form validation
|
||||||
|
$form-feedback-margin-top: $form-text-margin-top !default;
|
||||||
|
$form-feedback-font-size: $small-font-size !default;
|
||||||
$form-feedback-valid-color: theme-color("success") !default;
|
$form-feedback-valid-color: theme-color("success") !default;
|
||||||
$form-feedback-invalid-color: theme-color("danger") !default;
|
$form-feedback-invalid-color: theme-color("danger") !default;
|
||||||
|
|
||||||
|
|
@ -483,10 +533,11 @@ $dropdown-min-width: 10rem !default;
|
||||||
$dropdown-padding-y: .5rem !default;
|
$dropdown-padding-y: .5rem !default;
|
||||||
$dropdown-spacer: .125rem !default;
|
$dropdown-spacer: .125rem !default;
|
||||||
$dropdown-bg: $white !default;
|
$dropdown-bg: $white !default;
|
||||||
$dropdown-border-color: rgba($black,.15) !default;
|
$dropdown-border-color: rgba($black, .15) !default;
|
||||||
|
$dropdown-border-radius: $border-radius !default;
|
||||||
$dropdown-border-width: $border-width !default;
|
$dropdown-border-width: $border-width !default;
|
||||||
$dropdown-divider-bg: $gray-200 !default;
|
$dropdown-divider-bg: $gray-200 !default;
|
||||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
|
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
||||||
|
|
||||||
$dropdown-link-color: $gray-900 !default;
|
$dropdown-link-color: $gray-900 !default;
|
||||||
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
||||||
|
|
@ -522,13 +573,13 @@ $nav-link-padding-y: .5rem !default;
|
||||||
$nav-link-padding-x: 1rem !default;
|
$nav-link-padding-x: 1rem !default;
|
||||||
$nav-link-disabled-color: $gray-600 !default;
|
$nav-link-disabled-color: $gray-600 !default;
|
||||||
|
|
||||||
$nav-tabs-border-color: #ddd !default;
|
$nav-tabs-border-color: $gray-300 !default;
|
||||||
$nav-tabs-border-width: $border-width !default;
|
$nav-tabs-border-width: $border-width !default;
|
||||||
$nav-tabs-border-radius: $border-radius !default;
|
$nav-tabs-border-radius: $border-radius !default;
|
||||||
$nav-tabs-link-hover-border-color: $gray-200 !default;
|
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
|
||||||
$nav-tabs-link-active-color: $gray-700 !default;
|
$nav-tabs-link-active-color: $gray-700 !default;
|
||||||
$nav-tabs-link-active-bg: $body-bg !default;
|
$nav-tabs-link-active-bg: $body-bg !default;
|
||||||
$nav-tabs-link-active-border-color: #ddd !default;
|
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
|
||||||
|
|
||||||
$nav-pills-border-radius: $border-radius !default;
|
$nav-pills-border-radius: $border-radius !default;
|
||||||
$nav-pills-link-active-color: $component-active-color !default;
|
$nav-pills-link-active-color: $component-active-color !default;
|
||||||
|
|
@ -550,19 +601,19 @@ $navbar-toggler-padding-x: .75rem !default;
|
||||||
$navbar-toggler-font-size: $font-size-lg !default;
|
$navbar-toggler-font-size: $font-size-lg !default;
|
||||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||||
|
|
||||||
$navbar-dark-color: rgba($white,.5) !default;
|
$navbar-dark-color: rgba($white, .5) !default;
|
||||||
$navbar-dark-hover-color: rgba($white,.75) !default;
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||||
$navbar-dark-active-color: $white !default;
|
$navbar-dark-active-color: $white !default;
|
||||||
$navbar-dark-disabled-color: rgba($white,.25) !default;
|
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
||||||
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$navbar-dark-toggler-border-color: rgba($white,.1) !default;
|
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||||
|
|
||||||
$navbar-light-color: rgba($black,.5) !default;
|
$navbar-light-color: rgba($black, .5) !default;
|
||||||
$navbar-light-hover-color: rgba($black,.7) !default;
|
$navbar-light-hover-color: rgba($black, .7) !default;
|
||||||
$navbar-light-active-color: rgba($black,.9) !default;
|
$navbar-light-active-color: rgba($black, .9) !default;
|
||||||
$navbar-light-disabled-color: rgba($black,.3) !default;
|
$navbar-light-disabled-color: rgba($black, .3) !default;
|
||||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$navbar-light-toggler-icon-bg: 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-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$navbar-light-toggler-border-color: rgba($black,.1) !default;
|
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
|
|
||||||
|
|
@ -577,11 +628,11 @@ $pagination-line-height: 1.25 !default;
|
||||||
$pagination-color: $link-color !default;
|
$pagination-color: $link-color !default;
|
||||||
$pagination-bg: $white !default;
|
$pagination-bg: $white !default;
|
||||||
$pagination-border-width: $border-width !default;
|
$pagination-border-width: $border-width !default;
|
||||||
$pagination-border-color: #ddd !default;
|
$pagination-border-color: $gray-300 !default;
|
||||||
|
|
||||||
$pagination-hover-color: $link-hover-color !default;
|
$pagination-hover-color: $link-hover-color !default;
|
||||||
$pagination-hover-bg: $gray-200 !default;
|
$pagination-hover-bg: $gray-200 !default;
|
||||||
$pagination-hover-border-color: #ddd !default;
|
$pagination-hover-border-color: $gray-300 !default;
|
||||||
|
|
||||||
$pagination-active-color: $white !default;
|
$pagination-active-color: $white !default;
|
||||||
$pagination-active-bg: theme-color("primary") !default;
|
$pagination-active-bg: theme-color("primary") !default;
|
||||||
|
|
@ -589,7 +640,7 @@ $pagination-active-border-color: theme-color("primary") !default;
|
||||||
|
|
||||||
$pagination-disabled-color: $gray-600 !default;
|
$pagination-disabled-color: $gray-600 !default;
|
||||||
$pagination-disabled-bg: $white !default;
|
$pagination-disabled-bg: $white !default;
|
||||||
$pagination-disabled-border-color: #ddd !default;
|
$pagination-disabled-border-color: $gray-300 !default;
|
||||||
|
|
||||||
|
|
||||||
// Jumbotron
|
// Jumbotron
|
||||||
|
|
@ -604,7 +655,7 @@ $card-spacer-y: .75rem !default;
|
||||||
$card-spacer-x: 1.25rem !default;
|
$card-spacer-x: 1.25rem !default;
|
||||||
$card-border-width: $border-width !default;
|
$card-border-width: $border-width !default;
|
||||||
$card-border-radius: $border-radius !default;
|
$card-border-radius: $border-radius !default;
|
||||||
$card-border-color: rgba($black,.125) !default;
|
$card-border-color: rgba($black, .125) !default;
|
||||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||||
$card-cap-bg: rgba($black, .03) !default;
|
$card-cap-bg: rgba($black, .03) !default;
|
||||||
$card-bg: $white !default;
|
$card-bg: $white !default;
|
||||||
|
|
@ -625,13 +676,12 @@ $tooltip-max-width: 200px !default;
|
||||||
$tooltip-color: $white !default;
|
$tooltip-color: $white !default;
|
||||||
$tooltip-bg: $black !default;
|
$tooltip-bg: $black !default;
|
||||||
$tooltip-opacity: .9 !default;
|
$tooltip-opacity: .9 !default;
|
||||||
$tooltip-padding-y: 3px !default;
|
$tooltip-padding-y: .25rem !default;
|
||||||
$tooltip-padding-x: 8px !default;
|
$tooltip-padding-x: .5rem !default;
|
||||||
$tooltip-margin: 0 !default;
|
$tooltip-margin: 0 !default;
|
||||||
|
|
||||||
|
$tooltip-arrow-width: .4rem !default;
|
||||||
$tooltip-arrow-width: 5px !default;
|
$tooltip-arrow-height: $tooltip-arrow-width !default;
|
||||||
$tooltip-arrow-height: 5px !default;
|
|
||||||
$tooltip-arrow-color: $tooltip-bg !default;
|
$tooltip-arrow-color: $tooltip-bg !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -640,8 +690,8 @@ $tooltip-arrow-color: $tooltip-bg !default;
|
||||||
$popover-bg: $white !default;
|
$popover-bg: $white !default;
|
||||||
$popover-max-width: 276px !default;
|
$popover-max-width: 276px !default;
|
||||||
$popover-border-width: $border-width !default;
|
$popover-border-width: $border-width !default;
|
||||||
$popover-border-color: rgba($black,.2) !default;
|
$popover-border-color: rgba($black, .2) !default;
|
||||||
$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default;
|
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
||||||
|
|
||||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||||
$popover-header-color: $headings-color !default;
|
$popover-header-color: $headings-color !default;
|
||||||
|
|
@ -676,18 +726,18 @@ $badge-pill-border-radius: 10rem !default;
|
||||||
// Modals
|
// Modals
|
||||||
|
|
||||||
// Padding applied to the modal body
|
// Padding applied to the modal body
|
||||||
$modal-inner-padding: 15px !default;
|
$modal-inner-padding: 1rem !default;
|
||||||
|
|
||||||
$modal-dialog-margin: 10px !default;
|
$modal-dialog-margin: .5rem !default;
|
||||||
$modal-dialog-margin-y-sm-up: 30px !default;
|
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
||||||
|
|
||||||
$modal-title-line-height: $line-height-base !default;
|
$modal-title-line-height: $line-height-base !default;
|
||||||
|
|
||||||
$modal-content-bg: $white !default;
|
$modal-content-bg: $white !default;
|
||||||
$modal-content-border-color: rgba($black,.2) !default;
|
$modal-content-border-color: rgba($black, .2) !default;
|
||||||
$modal-content-border-width: $border-width !default;
|
$modal-content-border-width: $border-width !default;
|
||||||
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default;
|
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
||||||
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
|
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
||||||
|
|
||||||
$modal-backdrop-bg: $black !default;
|
$modal-backdrop-bg: $black !default;
|
||||||
$modal-backdrop-opacity: .5 !default;
|
$modal-backdrop-opacity: .5 !default;
|
||||||
|
|
@ -695,7 +745,7 @@ $modal-header-border-color: $gray-200 !default;
|
||||||
$modal-footer-border-color: $modal-header-border-color !default;
|
$modal-footer-border-color: $modal-header-border-color !default;
|
||||||
$modal-header-border-width: $modal-content-border-width !default;
|
$modal-header-border-width: $modal-content-border-width !default;
|
||||||
$modal-footer-border-width: $modal-header-border-width !default;
|
$modal-footer-border-width: $modal-header-border-width !default;
|
||||||
$modal-header-padding: 15px !default;
|
$modal-header-padding: 1rem !default;
|
||||||
|
|
||||||
$modal-lg: 800px !default;
|
$modal-lg: 800px !default;
|
||||||
$modal-md: 500px !default;
|
$modal-md: 500px !default;
|
||||||
|
|
@ -722,7 +772,7 @@ $progress-height: 1rem !default;
|
||||||
$progress-font-size: ($font-size-base * .75) !default;
|
$progress-font-size: ($font-size-base * .75) !default;
|
||||||
$progress-bg: $gray-200 !default;
|
$progress-bg: $gray-200 !default;
|
||||||
$progress-border-radius: $border-radius !default;
|
$progress-border-radius: $border-radius !default;
|
||||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
|
||||||
$progress-bar-color: $white !default;
|
$progress-bar-color: $white !default;
|
||||||
$progress-bar-bg: theme-color("primary") !default;
|
$progress-bar-bg: theme-color("primary") !default;
|
||||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||||
|
|
@ -731,7 +781,7 @@ $progress-bar-transition: width .6s ease !default;
|
||||||
// List group
|
// List group
|
||||||
|
|
||||||
$list-group-bg: $white !default;
|
$list-group-bg: $white !default;
|
||||||
$list-group-border-color: rgba($black,.125) !default;
|
$list-group-border-color: rgba($black, .125) !default;
|
||||||
$list-group-border-width: $border-width !default;
|
$list-group-border-width: $border-width !default;
|
||||||
$list-group-border-radius: $border-radius !default;
|
$list-group-border-radius: $border-radius !default;
|
||||||
|
|
||||||
|
|
@ -758,10 +808,9 @@ $list-group-action-active-bg: $gray-200 !default;
|
||||||
$thumbnail-padding: .25rem !default;
|
$thumbnail-padding: .25rem !default;
|
||||||
$thumbnail-bg: $body-bg !default;
|
$thumbnail-bg: $body-bg !default;
|
||||||
$thumbnail-border-width: $border-width !default;
|
$thumbnail-border-width: $border-width !default;
|
||||||
$thumbnail-border-color: #ddd !default;
|
$thumbnail-border-color: $gray-300 !default;
|
||||||
$thumbnail-border-radius: $border-radius !default;
|
$thumbnail-border-radius: $border-radius !default;
|
||||||
$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default;
|
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
|
||||||
$thumbnail-transition: all .2s ease-in-out !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Figures
|
// Figures
|
||||||
|
|
|
||||||
|
|
@ -29,13 +29,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
// The maximum value is calculated as the minimum of the next one less 0.01px
|
||||||
|
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
|
||||||
|
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||||
//
|
//
|
||||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||||
// 767px
|
// 767px
|
||||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||||
$next: breakpoint-next($name, $breakpoints);
|
$next: breakpoint-next($name, $breakpoints);
|
||||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
@return if($next, breakpoint-min($next, $breakpoints) - .01px, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||||
|
|
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
&.focus {
|
&.focus {
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -44,28 +44,28 @@
|
||||||
|
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover {
|
&:hover {
|
||||||
color: $color-hover;
|
color: color-yiq($color);
|
||||||
background-color: $color;
|
background-color: $active-background;
|
||||||
border-color: $color;
|
border-color: $active-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
|
|
@ -77,11 +77,11 @@
|
||||||
&:not([disabled]):not(.disabled):active,
|
&:not([disabled]):not(.disabled):active,
|
||||||
&:not([disabled]):not(.disabled).active,
|
&:not([disabled]):not(.disabled).active,
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
color: $color-hover;
|
color: color-yiq($color-hover);
|
||||||
background-color: $color;
|
background-color: $active-background;
|
||||||
border-color: $color;
|
border-color: $active-border;
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,5 +90,10 @@
|
||||||
padding: $padding-y $padding-x;
|
padding: $padding-y $padding-x;
|
||||||
font-size: $font-size;
|
font-size: $font-size;
|
||||||
line-height: $line-height;
|
line-height: $line-height;
|
||||||
@include border-radius($border-radius);
|
// Manually declare to provide an override to the browser default
|
||||||
|
@if $enable-rounded {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
} @else {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,18 @@
|
||||||
border-left: $caret-width solid transparent;
|
border-left: $caret-width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin caret-right {
|
||||||
|
border-top: $caret-width solid transparent;
|
||||||
|
border-bottom: $caret-width solid transparent;
|
||||||
|
border-left: $caret-width solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin caret-left {
|
||||||
|
border-top: $caret-width solid transparent;
|
||||||
|
border-right: $caret-width solid;
|
||||||
|
border-bottom: $caret-width solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin caret($direction: down) {
|
@mixin caret($direction: down) {
|
||||||
@if $enable-caret {
|
@if $enable-caret {
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -25,6 +37,24 @@
|
||||||
@include caret-down;
|
@include caret-down;
|
||||||
} @else if $direction == up {
|
} @else if $direction == up {
|
||||||
@include caret-up;
|
@include caret-up;
|
||||||
|
} @else if $direction == right {
|
||||||
|
@include caret-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $direction == left {
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-right: $caret-width * .85;
|
||||||
|
vertical-align: $caret-width * .85;
|
||||||
|
content: "";
|
||||||
|
@include caret-left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,12 @@
|
||||||
color: $input-focus-color;
|
color: $input-focus-color;
|
||||||
background-color: $input-focus-bg;
|
background-color: $input-focus-bg;
|
||||||
border-color: $input-focus-border-color;
|
border-color: $input-focus-border-color;
|
||||||
outline: none;
|
outline: 0;
|
||||||
// Avoid using mixin so we can pass custom focus shadow properly
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
@if $enable-shadows {
|
@if $enable-shadows {
|
||||||
box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
|
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||||
} @else {
|
} @else {
|
||||||
box-shadow: $input-btn-focus-box-shadow;
|
box-shadow: $input-focus-box-shadow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -30,8 +30,8 @@
|
||||||
|
|
||||||
.#{$state}-feedback {
|
.#{$state}-feedback {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: .25rem;
|
margin-top: $form-feedback-margin-top;
|
||||||
font-size: .875rem;
|
font-size: $form-feedback-font-size;
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: rgba($color,.8);
|
background-color: rgba($color, .8);
|
||||||
border-radius: .2rem;
|
border-radius: .2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -57,7 +57,8 @@
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
border-color: $color;
|
||||||
|
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
~ .#{$state}-feedback,
|
~ .#{$state}-feedback,
|
||||||
|
|
@ -83,11 +84,21 @@
|
||||||
.was-validated &:#{$state},
|
.was-validated &:#{$state},
|
||||||
&.is-#{$state} {
|
&.is-#{$state} {
|
||||||
~ .custom-control-indicator {
|
~ .custom-control-indicator {
|
||||||
background-color: rgba($color, .25);
|
background-color: lighten($color, 25%);
|
||||||
}
|
}
|
||||||
~ .custom-control-description {
|
~ .custom-control-description {
|
||||||
color: $color;
|
color: $color;
|
||||||
}
|
}
|
||||||
|
&:checked {
|
||||||
|
~ .custom-control-indicator {
|
||||||
|
@include gradient-bg(lighten($color, 10%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
~ .custom-control-indicator {
|
||||||
|
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +112,9 @@
|
||||||
&::before { border-color: inherit; }
|
&::before { border-color: inherit; }
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 .2rem rgba($color,.25);
|
~ .custom-file-control {
|
||||||
|
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
height: 1px;
|
height: 1px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clip: rect(0,0,0,0);
|
clip: rect(0, 0, 0, 0);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
clip-path: inset(50%);
|
clip-path: inset(50%);
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue