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

Merge branch 'v4-dev' into form-tweaks

Browse Source
This commit is contained in:
Mark Otto
2017-04-21 23:36:24 -07:00
parent 7efe4ddee4 638b97f19c
commit 5463d8436b
98 changed files with 2216 additions and 2522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_alert.scss
View File

@@ -42,14 +42,14 @@
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
@include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
@include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
@include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
@include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
}

15
scss/_buttons.scss
View File

@@ -28,7 +28,6 @@
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
@include box-shadow(none);
}
@@ -52,22 +51,22 @@ fieldset[disabled] a.btn {
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
}
.btn-secondary {
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
}
// Remove all backgrounds
@@ -75,7 +74,7 @@ fieldset[disabled] a.btn {
@include button-outline-variant($btn-primary-bg, $btn-primary-color);
}
.btn-outline-secondary {
@include button-outline-variant($btn-secondary-border, $btn-secondary-color);
@include button-outline-variant($btn-secondary-border-color, $btn-secondary-color);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg, $btn-info-color);

12
scss/_card.scss
View File

@@ -20,6 +20,7 @@
.card-title {
margin-bottom: $card-spacer-y;
word-break: break-all;
}
.card-subtitle {
@@ -124,7 +125,7 @@
@include card-outline-variant($btn-primary-bg);
}
.card-outline-secondary {
@include card-outline-variant($btn-secondary-border);
@include card-outline-variant($btn-secondary-border-color);
}
.card-outline-info {
@include card-outline-variant($btn-info-bg);
@@ -262,15 +263,18 @@
// Columns
//
@include media-breakpoint-up(sm) {
.card-columns {
.card-columns {
.card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
margin-bottom: $card-columns-margin;
}
}
}

3
scss/_custom-forms.scss
View File

@@ -41,13 +41,11 @@
&:disabled {
~ .custom-control-indicator {
cursor: $custom-control-disabled-cursor;
background-color: $custom-control-disabled-indicator-bg;
}
~ .custom-control-description {
color: $custom-control-disabled-description-color;
cursor: $custom-control-disabled-cursor;
}
}
}
@@ -169,7 +167,6 @@
&:disabled {
color: $custom-select-disabled-color;
cursor: $cursor-disabled;
background-color: $custom-select-disabled-bg;
}

11
scss/_dropdown.scss
View File

@@ -90,7 +90,6 @@
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
cursor: $cursor-disabled;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
@@ -136,16 +135,6 @@
white-space: nowrap; // as with > li > a
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-dropdown-backdrop;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set.

5
scss/_forms.scss
View File

@@ -58,10 +58,6 @@
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
}
select.form-control {
@@ -212,7 +208,6 @@ select.form-control-lg {
&.disabled {
.form-check-label {
color: $text-muted;
cursor: $cursor-disabled;
}
}
}

3
scss/_list-group.scss
View File

@@ -65,7 +65,6 @@
&.disabled,
&:disabled {
color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg;
}
@@ -74,7 +73,7 @@
z-index: 2; // 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;
border-color: $list-group-active-border-color;
}
}

3
scss/_nav.scss
View File

@@ -19,10 +19,9 @@
text-decoration: none;
}
// Disabled state lightens text and removes hover/tab effects
// Disabled state lightens text
&.disabled {
color: $nav-disabled-link-color;
cursor: $cursor-disabled;
}
}

4
scss/_navbar.scss
View File

@@ -226,7 +226,7 @@
.navbar-toggler {
color: $navbar-light-color;
border-color: $navbar-light-toggler-border;
border-color: $navbar-light-toggler-border-color;
}
.navbar-toggler-icon {
@@ -271,7 +271,7 @@
.navbar-toggler {
color: $navbar-inverse-color;
border-color: $navbar-inverse-toggler-border;
border-color: $navbar-inverse-toggler-border-color;
}
.navbar-toggler-icon {

7
scss/_pagination.scss
View File

@@ -23,15 +23,14 @@
z-index: 2;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
border-color: $pagination-active-border-color;
}
&.disabled .page-link {
color: $pagination-disabled-color;
pointer-events: none;
cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback.
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border;
border-color: $pagination-disabled-border-color;
}
}
@@ -49,7 +48,7 @@
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
border-color: $pagination-hover-border-color;
}
}

2
scss/_popover.scss
View File

@@ -86,7 +86,7 @@
&::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-title-bg;
border-bottom-color: $popover-arrow-color;
}
// This will remove the popover-title's border just below the arrow

7
scss/_reboot.scss
View File

@@ -368,13 +368,6 @@ input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
padding: 0; // 2. Remove the padding in IE 10-
// Apply a disabled cursor for radios and checkboxes.
//
// Note: Neither radios nor checkboxes can be readonly.
&:disabled {
cursor: $cursor-disabled;
}
}

2
scss/_tables.scss
View File

@@ -125,7 +125,7 @@
th,
td,
thead th {
border-color: $table-inverse-border;
border-color: $table-inverse-border-color;
}
&.table-bordered {

54
scss/_variables.scss
View File

@@ -330,7 +330,7 @@ $table-inverse-bg: $gray-dark !default;
$table-inverse-bg-accent: rgba($white, .05) !default;
$table-inverse-bg-hover: rgba($white, .075) !default;
$table-inverse-bg-active: $table-inverse-bg-hover !default;
$table-inverse-border: lighten($gray-dark, 7.5%) !default;
$table-inverse-border-color: lighten($gray-dark, 7.5%) !default;
$table-inverse-color: $body-bg !default;
@@ -357,27 +357,27 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
$btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-primary-border-color: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: $white !default;
$btn-secondary-border: #ccc !default;
$btn-secondary-border-color: #ccc !default;
$btn-info-color: $white !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-info-border-color: $btn-info-bg !default;
$btn-success-color: $white !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-success-border-color: $btn-success-bg !default;
$btn-warning-color: $white !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-warning-border-color: $btn-warning-bg !default;
$btn-danger-color: $white !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-danger-border-color: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
@@ -406,7 +406,7 @@ $input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg-focus: $input-bg !default;
$input-border-focus: lighten($brand-primary, 25%) !default;
$input-border-color-focus: lighten($brand-primary, 25%) !default;
$input-box-shadow-focus: $input-box-shadow, $btn-focus-box-shadow !default;
$input-color-focus: $input-color !default;
@@ -433,8 +433,6 @@ $form-group-margin-bottom: 1rem !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default;
$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-spacer-x: 1rem !default;
@@ -444,7 +442,6 @@ $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-disabled-cursor: $cursor-disabled !default;
$custom-control-disabled-indicator-bg: $gray-lighter !default;
$custom-control-disabled-description-color: $gray-light !default;
@@ -558,7 +555,6 @@ $dropdown-header-color: $gray-light !default;
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown-backdrop: 990 !default;
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
@@ -611,14 +607,14 @@ $navbar-inverse-hover-color: rgba($white,.75) !default;
$navbar-inverse-active-color: rgba($white,1) !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default;
$navbar-inverse-toggler-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-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-inverse-toggler-border: rgba($white,.1) !default;
$navbar-inverse-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-toggler-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: rgba($black,.1) !default;
$navbar-light-toggler-border-color: rgba($black,.1) !default;
// Pagination
@@ -637,15 +633,15 @@ $pagination-border-color: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-hover-border: #ddd !default;
$pagination-hover-border-color: #ddd !default;
$pagination-active-color: $white !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border: $brand-primary !default;
$pagination-active-border-color: $brand-primary !default;
$pagination-disabled-color: $gray-light !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border: #ddd !default;
$pagination-disabled-border-color: #ddd !default;
// Jumbotron
@@ -660,20 +656,20 @@ $jumbotron-bg: $gray-lighter !default;
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-success-border-color: darken($state-success-bg, 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-info-border-color: darken($state-info-bg, 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$mark-bg: $state-warning-bg !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-warning-border-color: darken($state-warning-bg, 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;
$state-danger-border-color: darken($state-danger-bg, 5%) !default;
// Cards
@@ -803,19 +799,19 @@ $alert-border-width: $border-width !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-success-border-color: $state-success-border-color !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-info-border-color: $state-info-border-color !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-warning-border-color: $state-warning-border-color !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
$alert-danger-border-color: $state-danger-border-color !default;
// Progress bars
@@ -841,10 +837,10 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: $gray-lightest !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-hover-bg: $gray-lightest !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $list-group-bg !default;

6
scss/mixins/_cards.scss
View File

@@ -13,6 +13,12 @@
@mixin card-outline-variant($color) {
background-color: transparent;
border-color: $color;
.card-header,
.card-footer {
background-color: transparent;
border-color: $color;
}
}
//

4
scss/mixins/_forms.scss
View File

@@ -35,7 +35,7 @@
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable.
// which defaults to the `@input-border-color-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
@@ -48,7 +48,7 @@
&:focus {
color: $input-color-focus;
background-color: $input-bg-focus;
border-color: $input-border-focus;
border-color: $input-border-color-focus;
outline: none;
@include box-shadow($input-box-shadow-focus);
}