mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 08:10:47 +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

4
scss/_button-group.scss
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;
}
}

4
scss/_buttons.scss
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);
}
}

6
scss/_carousel.scss
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

2
scss/_code.scss
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;

6
scss/_custom-forms.scss
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);
}

4
scss/_dropdown.scss
View File

@@ -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,

7
scss/_forms.scss
View File

@@ -12,8 +12,6 @@
line-height: $input-btn-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;
@@ -316,11 +314,6 @@ select.form-control-lg {
width: auto;
}
.form-control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {

6
scss/_functions.scss
View File

@@ -49,7 +49,7 @@
}
// Color contrast
@mixin color-yiq($color) {
@function color-yiq($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
@@ -57,9 +57,9 @@
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= 150) {
color: #111;
@return #111;
} @else {
color: #fff;
@return #fff;
}
}

10
scss/_input-group.scss
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-btn-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;
}
}
}

7
scss/_list-group.scss
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;
@@ -86,13 +86,8 @@
.list-group-flush {
.list-group-item {
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 0;
&:first-child {
border-top: 0;
}
}
&:first-child {

2
scss/_pagination.scss
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;

33
scss/_popover.scss
View File

@@ -5,7 +5,6 @@
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
padding: $popover-inner-padding;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@@ -39,11 +38,11 @@
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
border-width: $popover-arrow-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-outer-width;
border-width: $popover-arrow-width;
}
// Popover directions
@@ -61,14 +60,14 @@
}
.arrow::before {
bottom: -$popover-arrow-outer-width;
margin-left: -($popover-arrow-outer-width - 5);
bottom: -$popover-arrow-width;
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-outer-color;
}
.arrow::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -($popover-arrow-outer-width - 5);
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color;
}
}
@@ -82,17 +81,17 @@
.arrow::before,
.arrow::after {
margin-top: -($popover-arrow-outer-width - 3);
margin-top: -$popover-arrow-width;
border-left-width: 0;
}
.arrow::before {
left: -$popover-arrow-outer-width;
left: -$popover-arrow-width;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after {
left: -($popover-arrow-outer-width - 1);
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
border-right-color: $popover-arrow-color;
}
}
@@ -106,17 +105,17 @@
.arrow::before,
.arrow::after {
margin-left: -($popover-arrow-width - 3);
margin-left: -$popover-arrow-width;
border-top-width: 0;
}
.arrow::before {
top: -$popover-arrow-outer-width;
top: -$popover-arrow-width;
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::after {
top: -($popover-arrow-outer-width - 1);
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
border-bottom-color: $popover-arrow-color;
}
@@ -129,7 +128,7 @@
width: 20px;
margin-left: -10px;
content: "";
border-bottom: 1px solid $popover-header-bg;
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
@@ -142,17 +141,17 @@
.arrow::before,
.arrow::after {
margin-top: -($popover-arrow-outer-width - 3);
margin-top: -$popover-arrow-width;
border-right-width: 0;
}
.arrow::before {
right: -$popover-arrow-outer-width;
right: -$popover-arrow-width;
border-left-color: $popover-arrow-outer-color;
}
.arrow::after {
right: -($popover-arrow-outer-width - 1);
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
border-left-color: $popover-arrow-color;
}
}

77
scss/_variables.scss
View File

@@ -62,16 +62,25 @@ $colors: map-merge((
"gray-dark": $gray-800
), $colors);
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $blue,
"secondary": $gray-600,
"success": $green,
"info": $cyan,
"warning": $yellow,
"danger": $red,
"light": $gray-100,
"dark": $gray-800
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
@@ -213,8 +222,8 @@ $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: 1.25rem !default;
$font-size-sm: .875rem !default;
$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;
@@ -223,17 +232,17 @@ $font-weight-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.75rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !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;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
$display1-size: 6rem !default;
@@ -247,7 +256,7 @@ $display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$lead-font-size: 1.25rem !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
@@ -305,6 +314,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;
@@ -315,7 +328,6 @@ $input-btn-line-height-lg: $line-height-lg !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-link-disabled-color: $gray-600 !default;
@@ -346,7 +358,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;
@@ -395,7 +406,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;
@@ -530,9 +541,9 @@ $navbar-padding-x: $spacer !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@@ -626,27 +637,25 @@ $tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-inner-padding: 1px !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 5px 10px 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;
$popover-header-padding-y: 8px !default;
$popover-header-padding-x: 14px !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: .75rem !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: 9px !default;
$popover-body-padding-x: 14px !default;
$popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: 10px !default;
$popover-arrow-height: 5px !default;
$popover-arrow-width: .8rem !default;
$popover-arrow-height: .4rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
@@ -710,7 +719,7 @@ $alert-border-width: $border-width !default;
// Progress bars
$progress-height: 1rem !default;
$progress-font-size: .75rem !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;

14
scss/bootstrap-grid.scss vendored
View File

@@ -1,11 +1,9 @@
// Bootstrap Grid only
//
// Includes relevant variables and mixins for the flexbox grid
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
//
// Box sizing, responsive, and more
//
/*!
* 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)
*/
@at-root {
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix

11
scss/bootstrap-reboot.scss vendored
View File

@@ -1,9 +1,12 @@
// Bootstrap Reboot only
//
// Includes only Normalize and our custom Reboot reset.
/*!
* 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)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";

2
scss/bootstrap.scss vendored
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)

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.

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