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

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2017-11-24 17:02:01 -08:00
parent 643f5482a4 7c10068c76
commit babdf36c42
14 changed files with 124 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
scss/_custom-forms.scss
View File

@@ -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;
background-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
@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;
}
}
// Checkboxes
@@ -78,13 +85,20 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-checkbox-indicator-icon-checked;
@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,7 +112,11 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-radio-indicator-icon-checked;
@include gradient-bg($custom-control-indicator-checked-bg);
&::before {
background-image: $custom-radio-indicator-icon-checked;
}
}
}
@@ -149,7 +167,7 @@
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@include box-shadow($custom-select-focus-box-shadow);
box-shadow: $custom-select-focus-box-shadow;
&::-ms-value {
// For visual consistency with other platforms/browsers,
@@ -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;
}
}
}

7
scss/_modal.scss
View File

@@ -53,9 +53,7 @@
.modal-dialog-centered {
display: flex;
align-items: center;
height: 100%;
margin-top: 0;
margin-bottom: 0;
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
}
// Actual modal
@@ -154,8 +152,7 @@
}
.modal-dialog-centered {
margin-top: 0;
margin-bottom: 0;
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
}
.modal-content {

10
scss/_variables.scss
View File

@@ -483,15 +483,19 @@ $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;

16
scss/mixins/_buttons.scss
View File

@@ -51,16 +51,16 @@
}
}
@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,
@@ -77,9 +77,9 @@
&: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 $btn-focus-width rgba($color, .5);
}

7
scss/mixins/_forms.scss
View File

@@ -84,11 +84,16 @@
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-indicator {
background-color: rgba($color, .4);
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);