Testing BS4 Beta 2 Dev version
This commit is contained in:
koenemann
parent
9836d8c952
commit
708751d76d
454
css/theme.css
454
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
|
|
@ -13,8 +13,10 @@ 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' ) ) {
|
||||
|
|
|
|||
970
js/theme.js
970
js/theme.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,6 @@
|
|||
// Use this file to overwrite the basic Bootstrap variables and add your own variables
|
||||
// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder.
|
||||
// Just copy a variable from /sass/bootstrap/_variables.scss, paste it here and edit the value.
|
||||
|
||||
|
||||
$primary: #270074;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -197,10 +200,12 @@
|
|||
[data-toggle="buttons"] {
|
||||
> .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
|
||||
|
|
|
|||
|
|
@ -194,10 +194,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 +207,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 +220,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@
|
|||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
outline: 0;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
|
||||
&::-ms-value {
|
||||
|
|
@ -215,7 +215,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 +237,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,9 +57,9 @@
|
|||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
@return #111;
|
||||
@return $yiq-text-dark;
|
||||
} @else {
|
||||
@return #fff;
|
||||
@return $yiq-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,23 @@
|
|||
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;
|
||||
height: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
|
|
@ -52,6 +63,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 +153,17 @@
|
|||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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,7 +477,7 @@ $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;
|
||||
|
|
@ -483,10 +527,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 +567,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 +595,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 +622,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 +634,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 +649,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 +670,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 +684,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 +720,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 +739,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 +766,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 +775,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 +802,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
|
||||
|
|
|
|||
|
|
@ -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,9 +44,9 @@
|
|||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
&: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,
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
background-color: $color;
|
||||
border-color: $color;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,16 @@
|
|||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-control-indicator {
|
||||
background-color: rgba($color, .25);
|
||||
background-color: rgba($color, .4);
|
||||
}
|
||||
~ .custom-control-description {
|
||||
color: $color;
|
||||
}
|
||||
&:focus {
|
||||
~ .custom-control-indicator {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,7 +107,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;
|
||||
|
|
|
|||
Reference in New Issue