mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Merge branch 'v4-dev' into btn_input_split_variables

Browse Source
This commit is contained in:
Mark Otto
2017-10-22 14:26:49 -07:00
committed by GitHub
parent 58e553d7bc 29d58fb758
commit 1f42d79561
180 changed files with 1382 additions and 1203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_alert.scss
+2
View File
@@ -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;
scss/_button-group.scss
+5 -3
View File
@@ -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;
}
}
@@ -197,10 +197,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;
}
}
scss/_buttons.scss
+2 -2
View File
@@ -22,7 +22,7 @@
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
box-shadow: $input-btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
@@ -35,7 +35,7 @@
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active {
background-image: none;
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
@include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
}
}
scss/_card.scss
+15 -7
View File
@@ -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,10 +220,12 @@
&: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);
}
}
@@ -228,7 +234,9 @@
border-radius: 0;
.card-img-top,
.card-img-bottom {
.card-img-bottom,
.card-header,
.card-footer {
border-radius: 0;
}
}
scss/_carousel.scss
+6
View File
@@ -90,9 +90,15 @@
}
.carousel-control-prev {
left: 0;
@if $enable-gradients {
background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
}
}
.carousel-control-next {
right: 0;
@if $enable-gradients {
background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
}
}
// Icons for within
scss/_code.scss
-2
View File
@@ -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;
scss/_custom-forms.scss
+3 -3
View File
@@ -22,7 +22,7 @@
&:checked ~ .custom-control-indicator {
color: $custom-control-indicator-checked-color;
background-color: $custom-control-indicator-checked-bg;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-control-indicator-checked-box-shadow);
}
@@ -33,7 +33,7 @@
&:active ~ .custom-control-indicator {
color: $custom-control-indicator-active-color;
background-color: $custom-control-indicator-active-bg;
@include gradient-bg($custom-control-indicator-active-bg);
@include box-shadow($custom-control-indicator-active-box-shadow);
}
@@ -244,7 +244,7 @@
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
background-color: $custom-file-button-bg;
@include gradient-bg($custom-file-button-bg);
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
scss/_dropdown.scss
+3 -3
View File
@@ -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);
}
@@ -67,14 +67,14 @@
@include hover-focus {
color: $dropdown-link-hover-color;
text-decoration: none;
background-color: $dropdown-link-hover-bg;
@include gradient-bg($dropdown-link-hover-bg);
}
&.active,
&:active {
color: $dropdown-link-active-color;
text-decoration: none;
background-color: $dropdown-link-active-bg;
@include gradient-bg($dropdown-link-active-bg);
}
&.disabled,
scss/_forms.scss
+2 -2
View File
@@ -12,8 +12,6 @@
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-border-width solid $input-border-color;
@@ -129,6 +127,8 @@ select.form-control {
// text (without any border, background color, focus indicator)
.form-control-plaintext {
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
scss/_functions.scss
+2 -2
View File
@@ -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;
}
}
scss/_images.scss
-1
View File
@@ -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
scss/_input-group.scss
+5 -5
View File
@@ -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,7 +23,7 @@
// Bring the "active" form control to the front
@include hover-focus-active {
z-index: 3;
z-index: 2;
}
}
}
@@ -150,7 +150,7 @@
// Bring the "active" button to the front
@include hover-focus-active {
z-index: 3;
z-index: 2;
}
}
@@ -168,7 +168,7 @@
&:not(:first-child) {
> .btn,
> .btn-group {
z-index: 2;
z-index: 1;
// remove nagative margin ($input-border-width) to solve overlapping issue with button.
margin-left: 0;
@@ -179,7 +179,7 @@
// Because specificity
@include hover-focus-active {
z-index: 3;
z-index: 2;
}
}
}
scss/_list-group.scss
+1 -1
View File
@@ -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;
scss/_pagination.scss
+1 -1
View File
@@ -18,7 +18,7 @@
}
&.active .page-link {
z-index: 2;
z-index: 1;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
scss/_reboot.scss
+1 -1
View File
@@ -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.
scss/_variables.scss
+57 -51
View File
@@ -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: #111 !default;
$yiq-text-light: #fff !default;
// Options
//
@@ -221,9 +225,9 @@ $font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Libera
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
@@ -232,12 +236,12 @@ $font-weight-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
@@ -256,8 +260,8 @@ $display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
@@ -266,14 +270,14 @@ $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;
@@ -289,8 +293,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;
@@ -312,6 +316,10 @@ $input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba(theme-color("primary"), .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-line-height-sm: $line-height-sm !default;
@@ -342,9 +350,8 @@ $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-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
$btn-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-link-disabled-color: $gray-600 !default;
@@ -355,7 +362,7 @@ $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
@@ -386,7 +393,6 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
$input-focus-color: $input-color !default;
$input-placeholder-color: $gray-600 !default;
@@ -426,7 +432,7 @@ $custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: #ddd !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;
@@ -435,7 +441,7 @@ $custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: theme-color("primary") !default;
$custom-control-indicator-checked-box-shadow: none !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-control-indicator-active-color: $white !default;
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
@@ -512,10 +518,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;
@@ -579,19 +586,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
@@ -633,7 +640,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;
@@ -669,8 +676,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;
@@ -713,10 +720,10 @@ $modal-dialog-margin-y-sm-up: 30px !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 3px 9px rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black, .5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
@@ -747,20 +754,20 @@ $alert-border-width: $border-width !default;
// Progress bars
$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-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
$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-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$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;
@@ -789,8 +796,7 @@ $thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !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
scss/bootstrap-grid.scss
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap Grid v4.0.0-beta (https://getbootstrap.com)
* Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
scss/bootstrap-reboot.scss
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap Reboot v4.0.0-beta (https://getbootstrap.com)
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
scss/bootstrap.scss
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
scss/mixins/_alert.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@mixin alert-variant($background, $border, $color) {
color: $color;
background-color: $background;
@include gradient-bg($background);
border-color: $border;
hr {
scss/mixins/_background-variant.scss
+6
View File
@@ -12,3 +12,9 @@
}
}
}
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
}
}
scss/mixins/_buttons.scss
+21 -10
View File
@@ -3,25 +3,25 @@
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
color: color-yiq($background);
background-color: $background;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: color-yiq($active-background);
background-color: $active-background;
border-color: $active-border;
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
}
&:focus,
&.focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
} @else {
box-shadow: 0 0 0 3px rgba($border, .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
}
}
@@ -35,10 +35,19 @@
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
color: color-yiq($active-background);
background-color: $active-background;
background-image: none; // Remove the gradient for the pressed/active state
@if $enable-gradients {
background-image: none; // Remove the gradient for the pressed/active state
}
border-color: $active-border;
@include box-shadow($btn-active-box-shadow);
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
} @else {
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
}
}
}
@@ -56,7 +65,7 @@
&:focus,
&.focus {
box-shadow: 0 0 0 3px rgba($color, .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
}
&.disabled,
@@ -71,6 +80,8 @@
color: $color-hover;
background-color: $color;
border-color: $color;
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
}
}
scss/mixins/_forms.scss
+17 -5
View File
@@ -16,7 +16,12 @@
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: none;
@include box-shadow($input-focus-box-shadow);
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
} @else {
box-shadow: $input-btn-focus-box-shadow;
}
}
}
@@ -41,7 +46,7 @@
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba($color,.8);
background-color: rgba($color, .8);
border-radius: .2rem;
}
@@ -52,7 +57,7 @@
border-color: $color;
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
}
~ .#{$state}-feedback,
@@ -78,11 +83,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-btn-focus-width rgba($color, .25);
}
}
}
}
@@ -96,7 +106,9 @@
&::before { border-color: inherit; }
}
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
~ .custom-file-control {
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
}
}
}
}
scss/mixins/_gradients.scss
+8
View File
@@ -1,5 +1,13 @@
// Gradients
@mixin gradient-bg($color) {
@if $enable-gradients {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
} @else {
background-color: $color;
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
scss/mixins/_screen-reader.scss
+1 -1
View File
@@ -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;
scss/utilities/_background.scss
+6
View File
@@ -4,6 +4,12 @@
@include bg-variant(".bg-#{$color}", $value);
}
@if $enable-gradients {
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
}
.bg-white {
background-color: $white !important;
}