mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00
Code Issues Releases Wiki Activity

sync-commits erge branch 'v4-dev' into custom-checkboxes-radios-correct-color

Browse Source
This commit is contained in:
Sharrell Porter
2017-10-20 07:12:39 -04:00
parent 77ea66da4d 9a1d81f154
commit 4f814fabd6
121 changed files with 833 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/mixins/_alert.scss
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 {

6
scss/mixins/_background-variant.scss
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;
}
}

4
scss/mixins/_badge.scss
View File

@@ -1,10 +1,10 @@
@mixin badge-variant($bg) {
@include color-yiq($bg);
color: color-yiq($bg);
background-color: $bg;
&[href] {
@include hover-focus {
@include color-yiq($bg);
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
}

33
scss/mixins/_buttons.scss
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%)) {
@include color-yiq($background);
background-color: $background;
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
color: color-yiq($background);
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
@include 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);
}
}

7
scss/mixins/_forms.scss
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;
}
}
}

8
scss/mixins/_gradients.scss
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.