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.
|
||||
*/
|
||||
require get_template_directory() . '/inc/security.php';
|
||||
// require get_template_directory() . '/inc/security.php';
|
||||
|
||||
/**
|
||||
* Enqueue scripts and styles.
|
||||
|
|
|
|||
|
|
@ -271,7 +271,6 @@ gulp.task('copy-assets', ['clean-source'], function() {
|
|||
return stream;
|
||||
});
|
||||
|
||||
|
||||
// Run
|
||||
// gulp dist
|
||||
// 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/'))
|
||||
});
|
||||
|
||||
// Deleting any file inside the /src folder
|
||||
// Deleting any file inside the /dist folder
|
||||
gulp.task('clean-dist', function () {
|
||||
return del(['dist/**/*',]);
|
||||
});
|
||||
|
|
@ -293,7 +292,7 @@ gulp.task('dist-product', ['clean-dist-product'], function() {
|
|||
.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 () {
|
||||
return del(['dist-product/**/*',]);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ $container = get_theme_mod( 'understrap_container_type' );
|
|||
'menu_class' => 'navbar-nav',
|
||||
'fallback_cb' => '',
|
||||
'menu_id' => 'main-menu',
|
||||
'walker' => new WP_Bootstrap_Navwalker(),
|
||||
'walker' => new understrap_WP_Bootstrap_Navwalker(),
|
||||
)
|
||||
); ?>
|
||||
<?php if ( 'container' == $container ) : ?>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
exit;
|
||||
}
|
||||
|
||||
if (! class_exists ( 'WP_Bootstrap_Navwalker' )) :
|
||||
if (! class_exists ( 'understrap_WP_Bootstrap_Navwalker' )) :
|
||||
|
||||
/**
|
||||
* Class WP_Bootstrap_Navwalker
|
||||
|
|
@ -23,7 +23,7 @@ if (! class_exists ( 'WP_Bootstrap_Navwalker' )) :
|
|||
* License: GPL-2.0+
|
||||
* 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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
// 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.
|
||||
|
|
@ -15,7 +15,7 @@ add_filter( 'comment_form_default_fields', 'bootstrap3_comment_form_fields' );
|
|||
*
|
||||
* @return array
|
||||
*/
|
||||
function bootstrap3_comment_form_fields( $fields ) {
|
||||
function understrap_bootstrap_comment_form_fields( $fields ) {
|
||||
$commenter = wp_get_current_commenter();
|
||||
$req = get_option( 'require_name_email' );
|
||||
$aria_req = ( $req ? " aria-required='true'" : '' );
|
||||
|
|
@ -35,7 +35,7 @@ function bootstrap3_comment_form_fields( $fields ) {
|
|||
return $fields;
|
||||
}
|
||||
|
||||
add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
|
||||
add_filter( 'comment_form_defaults', 'understrap_bootstrap_comment_form' );
|
||||
|
||||
/**
|
||||
* Builds the form.
|
||||
|
|
@ -44,7 +44,7 @@ add_filter( 'comment_form_defaults', 'bootstrap3_comment_form' );
|
|||
*
|
||||
* @return mixed
|
||||
*/
|
||||
function bootstrap3_comment_form( $args ) {
|
||||
function understrap_bootstrap_comment_form( $args ) {
|
||||
$args['comment_field'] = '<div class="form-group comment-form-comment">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ if ( ! function_exists( 'understrap_scripts' ) ) {
|
|||
// Get the theme data.
|
||||
$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_register_script('jquery-slim', (get_template_directory_uri() . '/js/jquery.slim.min.js'), true, '3.2.1');
|
||||
wp_enqueue_script( 'jquery-slim' );
|
||||
//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( '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 );
|
||||
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.
|
||||
|
||||
|
||||
$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.
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: ($close-font-size + $alert-padding-x * 2);
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group
|
||||
// and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group
|
||||
// and we need :first-child and :last-child to both match
|
||||
> .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
||||
// immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
}
|
||||
|
||||
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
||||
// immediately after it
|
||||
> .btn:last-child:not(:first-child),
|
||||
> .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||
// dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||
// dropdown buttons within a btn-group)
|
||||
> .btn-group {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
|
@ -97,9 +100,9 @@
|
|||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.btn + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x * .75;
|
||||
padding-left: $input-btn-padding-x * .75;
|
||||
.dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x * .75;
|
||||
padding-left: $btn-padding-x * .75;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
|
|
@ -107,13 +110,13 @@
|
|||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-sm * .75;
|
||||
padding-left: $input-btn-padding-x-sm * .75;
|
||||
padding-right: $btn-padding-x-sm * .75;
|
||||
padding-left: $btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-lg * .75;
|
||||
padding-left: $input-btn-padding-x-lg * .75;
|
||||
padding-right: $btn-padding-x-lg * .75;
|
||||
padding-left: $btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -147,7 +150,7 @@
|
|||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -$input-btn-border-width;
|
||||
margin-top: -$btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -194,13 +197,15 @@
|
|||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
.btn-group-toggle {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
margin-bottom: 0; // Override default `<label>` value
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0,0,0,0);
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: $input-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);
|
||||
border: $btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Share hover and focus styles
|
||||
|
|
@ -22,20 +22,20 @@
|
|||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: .65;
|
||||
opacity: $btn-disabled-opacity;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
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 {
|
||||
text-decoration: $link-hover-decoration;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -104,11 +105,11 @@ fieldset[disabled] a.btn {
|
|||
//
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
// Vertically space out multiple block buttons
|
||||
+ .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
|
|
|
|||
|
|
@ -172,14 +172,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -194,10 +197,12 @@
|
|||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -205,10 +210,12 @@
|
|||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -216,20 +223,24 @@
|
|||
&:only-child {
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
.card-img-top {
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
.card-img-bottom {
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
border-radius: 0;
|
||||
@include border-radius(0);
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
.card-img-bottom,
|
||||
.card-header,
|
||||
.card-footer {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,13 +91,13 @@
|
|||
.carousel-control-prev {
|
||||
left: 0;
|
||||
@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 {
|
||||
right: 0;
|
||||
@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
|
||||
button.close {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,8 +42,6 @@ kbd {
|
|||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: $code-font-size;
|
||||
color: $pre-color;
|
||||
|
||||
|
|
@ -53,7 +51,7 @@ pre {
|
|||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
&:active ~ .custom-control-indicator {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -62,10 +62,17 @@
|
|||
pointer-events: none;
|
||||
user-select: none;
|
||||
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-position: center center;
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
|
|
@ -78,13 +85,20 @@
|
|||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||
|
||||
&::before {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: $custom-checkbox-indicator-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
||||
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||
@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 {
|
||||
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||
|
||||
&::before {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -148,12 +166,12 @@
|
|||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
outline: 0;
|
||||
box-shadow: $custom-select-focus-box-shadow;
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// supress the default white text on blue background highlight given to
|
||||
// suppress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
|
|
@ -162,8 +180,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
height: auto;
|
||||
padding-right: $custom-select-padding-x;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
|
@ -185,6 +205,13 @@
|
|||
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
|
||||
//
|
||||
|
|
@ -206,7 +233,12 @@
|
|||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
border-color: $custom-file-focus-border-color;
|
||||
box-shadow: $custom-file-focus-box-shadow;
|
||||
|
||||
&::before {
|
||||
border-color: $custom-file-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +247,6 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
line-height: $custom-file-line-height;
|
||||
|
|
@ -238,7 +269,7 @@
|
|||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
|
|
@ -61,7 +89,7 @@
|
|||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,13 @@
|
|||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-btn-line-height;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
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.
|
||||
@if $enable-rounded {
|
||||
|
|
@ -88,24 +86,24 @@ select.form-control {
|
|||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
line-height: $input-btn-line-height;
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
|
||||
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
|
||||
// be the same size as regular labels, and to align with the form controls.
|
||||
.col-form-legend {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
|
@ -129,13 +127,15 @@ select.form-control {
|
|||
// text (without any border, background color, focus indicator)
|
||||
|
||||
.form-control-plaintext {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
display: block;
|
||||
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
|
||||
line-height: $input-btn-line-height;
|
||||
line-height: $input-line-height;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
border-width: $input-btn-border-width 0;
|
||||
border-width: $input-border-width 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
|
|
@ -154,9 +154,9 @@ select.form-control {
|
|||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.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;
|
||||
line-height: $input-btn-line-height-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
|
|
@ -167,9 +167,9 @@ select.form-control-sm {
|
|||
}
|
||||
|
||||
.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;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,13 +57,13 @@
|
|||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
@return #111;
|
||||
@return $yiq-text-dark;
|
||||
} @else {
|
||||
@return #fff;
|
||||
@return $yiq-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Retreive color Sass maps
|
||||
// Retrieve color Sass maps
|
||||
@function color($key: "blue") {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include transition($thumbnail-transition);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
|
|
@ -23,27 +23,39 @@
|
|||
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
.input-group .form-control,
|
||||
.input-group .custom-select,
|
||||
.input-group .custom-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@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-btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
// Sizing options
|
||||
//
|
||||
// Remix the default form control sizing classes into new ones for easier
|
||||
|
|
@ -66,26 +78,26 @@
|
|||
//
|
||||
|
||||
.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
|
||||
font-size: $font-size-base; // Match inputs
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $input-btn-line-height;
|
||||
line-height: $input-line-height;
|
||||
color: $input-group-addon-color;
|
||||
text-align: center;
|
||||
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);
|
||||
|
||||
// Sizing
|
||||
&.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;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
&.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;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
|
@ -103,6 +115,8 @@
|
|||
//
|
||||
|
||||
.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-btn:not(:last-child) > .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 {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
.input-group-addon:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.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-btn:not(:first-child) > .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 {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -145,12 +168,12 @@
|
|||
position: relative;
|
||||
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
margin-left: (-$input-border-width);
|
||||
}
|
||||
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,24 +185,24 @@
|
|||
&:not(:last-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
margin-right: (-$input-border-width);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
|
||||
z-index: 1;
|
||||
// remove nagative margin ($input-border-width) to solve overlapping issue with button.
|
||||
margin-left: 0;
|
||||
|
||||
// When input is first, overlap the right side of it with the button(-group)
|
||||
&:first-child {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
margin-left: (-$input-border-width);
|
||||
}
|
||||
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.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;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border-color;
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -26,16 +26,10 @@
|
|||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
@include transition($modal-transition);
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
&.show .modal-dialog { transform: translate(0, 0); }
|
||||
}
|
||||
.modal-open .modal {
|
||||
.modal-open & {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
|
|
@ -45,6 +39,21 @@
|
|||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
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
|
||||
|
|
@ -52,6 +61,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
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
|
||||
pointer-events: auto;
|
||||
background-color: $modal-content-bg;
|
||||
|
|
@ -141,11 +151,16 @@
|
|||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||
}
|
||||
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||
border-color: $nav-tabs-link-hover-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-link-active-color;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
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
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,34 +4,6 @@
|
|||
@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 {
|
||||
position: relative;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -14,10 +14,12 @@
|
|||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: $progress-bar-color;
|
||||
text-align: center;
|
||||
background-color: $progress-bar-bg;
|
||||
@include transition($progress-bar-transition);
|
||||
}
|
||||
|
||||
.progress-bar-striped {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ html {
|
|||
-webkit-text-size-adjust: 100%; // 4
|
||||
-ms-text-size-adjust: 100%; // 4
|
||||
-ms-overflow-style: scrollbar; // 5
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
|
||||
}
|
||||
|
||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||
|
|
@ -71,7 +71,7 @@ body {
|
|||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-left: -($tooltip-arrow-width - 2);
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-top: -($tooltip-arrow-width - 2);
|
||||
margin-top: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-left: -($tooltip-arrow-width - 2);
|
||||
margin-left: -$tooltip-arrow-width;
|
||||
content: "";
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
|
||||
.arrow::before {
|
||||
right: 0;
|
||||
margin-top: -($tooltip-arrow-width - 2);
|
||||
margin-top: -($tooltip-arrow-width);
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ h6, .h6 { font-size: $h6-font-size; }
|
|||
//
|
||||
|
||||
hr {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: $hr-margin-y;
|
||||
margin-bottom: $hr-margin-y;
|
||||
border: 0;
|
||||
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
|
||||
$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
|
||||
//
|
||||
|
|
@ -217,7 +221,7 @@ $transition-collapse: height .35s ease !default;
|
|||
|
||||
// stylelint-disable value-keyword-case
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
// stylelint-enable value-keyword-case
|
||||
|
||||
|
|
@ -266,20 +270,22 @@ $text-muted: $gray-600 !default;
|
|||
$blockquote-small-color: $gray-600 !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;
|
||||
|
||||
$mark-padding: .2em !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;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
$list-inline-padding: .5rem !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
$hr-margin-y: $spacer !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
|
|
@ -289,8 +295,8 @@ $table-cell-padding: .75rem !default;
|
|||
$table-cell-padding-sm: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black,.05) !default;
|
||||
$table-hover-bg: rgba($black,.075) !default;
|
||||
$table-accent-bg: rgba($black, .05) !default;
|
||||
$table-hover-bg: rgba($black, .075) !default;
|
||||
$table-active-bg: $table-hover-bg !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;
|
||||
|
||||
|
||||
// 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-x: .75rem !default;
|
||||
|
|
@ -326,9 +332,33 @@ $input-btn-padding-y-lg: .5rem !default;
|
|||
$input-btn-padding-x-lg: 1rem !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-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-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !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;
|
||||
|
||||
|
|
@ -339,18 +369,30 @@ $btn-border-radius: $border-radius !default;
|
|||
$btn-border-radius-lg: $border-radius-lg !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
|
||||
|
||||
$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-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-color: $gray-700 !default;
|
||||
$input-border-color: $gray-400 !default;
|
||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
|
||||
|
||||
$input-border-radius: $border-radius !default;
|
||||
$input-border-radius-lg: $border-radius-lg !default;
|
||||
|
|
@ -359,6 +401,8 @@ $input-border-radius-sm: $border-radius-sm !default;
|
|||
$input-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$input-focus-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;
|
||||
|
||||
|
|
@ -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-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;
|
||||
|
||||
|
|
@ -395,9 +439,9 @@ $custom-control-spacer-y: .25rem !default;
|
|||
$custom-control-spacer-x: 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-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-description-disabled-color: $gray-600 !default;
|
||||
|
|
@ -433,21 +477,25 @@ $custom-select-disabled-color: $gray-600 !default;
|
|||
$custom-select-bg: $white !default;
|
||||
$custom-select-disabled-bg: $gray-200 !default;
|
||||
$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-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
$custom-select-focus-border-color: $input-focus-border-color !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-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-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-x: $input-btn-padding-x !default;
|
||||
|
|
@ -471,6 +519,8 @@ $custom-file-text: (
|
|||
|
||||
|
||||
// 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-invalid-color: theme-color("danger") !default;
|
||||
|
||||
|
|
@ -483,10 +533,11 @@ $dropdown-min-width: 10rem !default;
|
|||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-spacer: .125rem !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-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-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-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-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-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-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-border-radius: $btn-border-radius !default;
|
||||
|
||||
$navbar-dark-color: rgba($white,.5) !default;
|
||||
$navbar-dark-hover-color: rgba($white,.75) !default;
|
||||
$navbar-dark-color: rgba($white, .5) !default;
|
||||
$navbar-dark-hover-color: rgba($white, .75) !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-border-color: rgba($white,.1) !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||
|
||||
$navbar-light-color: rgba($black,.5) !default;
|
||||
$navbar-light-hover-color: rgba($black,.7) !default;
|
||||
$navbar-light-active-color: rgba($black,.9) !default;
|
||||
$navbar-light-disabled-color: rgba($black,.3) !default;
|
||||
$navbar-light-color: rgba($black, .5) !default;
|
||||
$navbar-light-hover-color: rgba($black, .7) !default;
|
||||
$navbar-light-active-color: rgba($black, .9) !default;
|
||||
$navbar-light-disabled-color: rgba($black, .3) !default;
|
||||
$navbar-light-toggler-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
|
||||
|
||||
|
|
@ -577,11 +628,11 @@ $pagination-line-height: 1.25 !default;
|
|||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: #ddd !default;
|
||||
$pagination-border-color: $gray-300 !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !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-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-bg: $white !default;
|
||||
$pagination-disabled-border-color: #ddd !default;
|
||||
$pagination-disabled-border-color: $gray-300 !default;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
|
@ -604,7 +655,7 @@ $card-spacer-y: .75rem !default;
|
|||
$card-spacer-x: 1.25rem !default;
|
||||
$card-border-width: $border-width !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-cap-bg: rgba($black, .03) !default;
|
||||
$card-bg: $white !default;
|
||||
|
|
@ -625,13 +676,12 @@ $tooltip-max-width: 200px !default;
|
|||
$tooltip-color: $white !default;
|
||||
$tooltip-bg: $black !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: 3px !default;
|
||||
$tooltip-padding-x: 8px !default;
|
||||
$tooltip-padding-y: .25rem !default;
|
||||
$tooltip-padding-x: .5rem !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
$tooltip-arrow-height: 5px !default;
|
||||
$tooltip-arrow-width: .4rem !default;
|
||||
$tooltip-arrow-height: $tooltip-arrow-width !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
|
|
@ -640,8 +690,8 @@ $tooltip-arrow-color: $tooltip-bg !default;
|
|||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default;
|
||||
$popover-border-color: rgba($black, .2) !default;
|
||||
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
|
||||
|
||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
|
|
@ -676,18 +726,18 @@ $badge-pill-border-radius: 10rem !default;
|
|||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
$modal-inner-padding: 1rem !default;
|
||||
|
||||
$modal-dialog-margin: 10px !default;
|
||||
$modal-dialog-margin-y-sm-up: 30px !default;
|
||||
$modal-dialog-margin: .5rem !default;
|
||||
$modal-dialog-margin-y-sm-up: 1.75rem !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-border-color: rgba($black,.2) !default;
|
||||
$modal-content-border-color: rgba($black, .2) !default;
|
||||
$modal-content-border-width: $border-width !default;
|
||||
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default;
|
||||
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
|
||||
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
|
||||
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
|
||||
|
||||
$modal-backdrop-bg: $black !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-header-border-width: $modal-content-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-md: 500px !default;
|
||||
|
|
@ -722,7 +772,7 @@ $progress-height: 1rem !default;
|
|||
$progress-font-size: ($font-size-base * .75) !default;
|
||||
$progress-bg: $gray-200 !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: theme-color("primary") !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
|
|
@ -731,7 +781,7 @@ $progress-bar-transition: width .6s ease !default;
|
|||
// List group
|
||||
|
||||
$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-radius: $border-radius !default;
|
||||
|
||||
|
|
@ -758,10 +808,9 @@ $list-group-action-active-bg: $gray-200 !default;
|
|||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: $body-bg !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-box-shadow: 0 1px 2px rgba($black,.075) !default;
|
||||
$thumbnail-transition: all .2s ease-in-out !default;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
|
||||
|
||||
|
||||
// Figures
|
||||
|
|
|
|||
|
|
@ -29,13 +29,15 @@
|
|||
}
|
||||
|
||||
// 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))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-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.
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@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 {
|
||||
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
|
||||
@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 {
|
||||
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;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&: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,
|
||||
|
|
@ -77,11 +77,11 @@
|
|||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
color: color-yiq($color-hover);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
// 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;
|
||||
font-size: $font-size;
|
||||
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;
|
||||
}
|
||||
|
||||
@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) {
|
||||
@if $enable-caret {
|
||||
&::after {
|
||||
|
|
@ -25,6 +37,24 @@
|
|||
@include caret-down;
|
||||
} @else if $direction == 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;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: none;
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
margin-top: .25rem;
|
||||
font-size: .875rem;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
font-size: $form-feedback-font-size;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background-color: rgba($color,.8);
|
||||
background-color: rgba($color, .8);
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +57,8 @@
|
|||
border-color: $color;
|
||||
|
||||
&: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,
|
||||
|
|
@ -83,11 +84,21 @@
|
|||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-control-indicator {
|
||||
background-color: rgba($color, .25);
|
||||
background-color: lighten($color, 25%);
|
||||
}
|
||||
~ .custom-control-description {
|
||||
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; }
|
||||
}
|
||||
&: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;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue