diff options
| author | Mark Otto <markdotto@gmail.com> | 2016-05-11 21:07:06 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2016-05-11 21:07:06 +0300 |
| commit | b280e36b788e4b42bbb359f0a13db410adf7dd8c (patch) | |
| tree | bc8115b9b11cb78767655917a482c25c9f711526 /scss | |
| parent | ef50b7839cb2ca9171eec12c2bf22fc38ad9d7ae (diff) | |
| parent | 9d6b41c1276af04d5e81043059035660add82b8d (diff) | |
Merge branch 'v4-dev' into v4-split-buttons
Diffstat (limited to 'scss')
34 files changed, 743 insertions, 969 deletions
diff --git a/scss/.csscomb.json b/scss/.csscomb.json deleted file mode 100644 index 40695a4782..0000000000 --- a/scss/.csscomb.json +++ /dev/null @@ -1,304 +0,0 @@ -{ - "always-semicolon": true, - "block-indent": 2, - "color-case": "lower", - "color-shorthand": true, - "element-case": "lower", - "eof-newline": true, - "leading-zero": false, - "remove-empty-rulesets": true, - "space-after-colon": 1, - "space-after-combinator": 1, - "space-before-selector-delimiter": 0, - "space-between-declarations": "\n", - "space-after-opening-brace": "\n", - "space-before-closing-brace": "\n", - "space-before-colon": 0, - "space-before-combinator": 1, - "space-before-opening-brace": 1, - "strip-spaces": true, - "unitless-zero": true, - "vendor-prefix-align": true, - "sort-order": [ - [ - "position", - "top", - "right", - "bottom", - "left", - "z-index", - "display", - "float", - "width", - "min-width", - "max-width", - "height", - "min-height", - "max-height", - "-webkit-box-sizing", - "-moz-box-sizing", - "box-sizing", - "-webkit-appearance", - "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left", - "margin", - "margin-top", - "margin-right", - "margin-bottom", - "margin-left", - "overflow", - "overflow-x", - "overflow-y", - "-webkit-overflow-scrolling", - "-ms-overflow-x", - "-ms-overflow-y", - "-ms-overflow-style", - "clip", - "clear", - "font", - "font-family", - "font-size", - "font-style", - "font-weight", - "font-variant", - "font-size-adjust", - "font-stretch", - "font-effect", - "font-emphasize", - "font-emphasize-position", - "font-emphasize-style", - "font-smooth", - "-webkit-hyphens", - "-moz-hyphens", - "hyphens", - "line-height", - "color", - "text-align", - "-webkit-text-align-last", - "-moz-text-align-last", - "-ms-text-align-last", - "text-align-last", - "text-emphasis", - "text-emphasis-color", - "text-emphasis-style", - "text-emphasis-position", - "text-decoration", - "text-indent", - "text-justify", - "text-outline", - "-ms-text-overflow", - "text-overflow", - "text-overflow-ellipsis", - "text-overflow-mode", - "text-shadow", - "text-transform", - "text-wrap", - "-webkit-text-size-adjust", - "-ms-text-size-adjust", - "letter-spacing", - "-ms-word-break", - "word-break", - "word-spacing", - "-ms-word-wrap", - "word-wrap", - "-moz-tab-size", - "-o-tab-size", - "tab-size", - "white-space", - "vertical-align", - "list-style", - "list-style-position", - "list-style-type", - "list-style-image", - "pointer-events", - "-ms-touch-action", - "touch-action", - "cursor", - "visibility", - "zoom", - "flex-direction", - "flex-order", - "flex-pack", - "flex-align", - "table-layout", - "empty-cells", - "caption-side", - "border-spacing", - "border-collapse", - "content", - "quotes", - "counter-reset", - "counter-increment", - "resize", - "-webkit-user-select", - "-moz-user-select", - "-ms-user-select", - "-o-user-select", - "user-select", - "nav-index", - "nav-up", - "nav-right", - "nav-down", - "nav-left", - "background", - "background-color", - "background-image", - "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", - "filter:progid:DXImageTransform.Microsoft.gradient", - "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", - "filter", - "background-repeat", - "background-attachment", - "background-position", - "background-position-x", - "background-position-y", - "-webkit-background-clip", - "-moz-background-clip", - "background-clip", - "background-origin", - "-webkit-background-size", - "-moz-background-size", - "-o-background-size", - "background-size", - "border", - "border-color", - "border-style", - "border-width", - "border-top", - "border-top-color", - "border-top-style", - "border-top-width", - "border-right", - "border-right-color", - "border-right-style", - "border-right-width", - "border-bottom", - "border-bottom-color", - "border-bottom-style", - "border-bottom-width", - "border-left", - "border-left-color", - "border-left-style", - "border-left-width", - "border-radius", - "border-top-left-radius", - "border-top-right-radius", - "border-bottom-right-radius", - "border-bottom-left-radius", - "-webkit-border-image", - "-moz-border-image", - "-o-border-image", - "border-image", - "-webkit-border-image-source", - "-moz-border-image-source", - "-o-border-image-source", - "border-image-source", - "-webkit-border-image-slice", - "-moz-border-image-slice", - "-o-border-image-slice", - "border-image-slice", - "-webkit-border-image-width", - "-moz-border-image-width", - "-o-border-image-width", - "border-image-width", - "-webkit-border-image-outset", - "-moz-border-image-outset", - "-o-border-image-outset", - "border-image-outset", - "-webkit-border-image-repeat", - "-moz-border-image-repeat", - "-o-border-image-repeat", - "border-image-repeat", - "outline", - "outline-width", - "outline-style", - "outline-color", - "outline-offset", - "-webkit-box-shadow", - "-moz-box-shadow", - "box-shadow", - "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", - "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", - "opacity", - "-ms-interpolation-mode", - "-webkit-transition", - "-moz-transition", - "-ms-transition", - "-o-transition", - "transition", - "-webkit-transition-delay", - "-moz-transition-delay", - "-ms-transition-delay", - "-o-transition-delay", - "transition-delay", - "-webkit-transition-timing-function", - "-moz-transition-timing-function", - "-ms-transition-timing-function", - "-o-transition-timing-function", - "transition-timing-function", - "-webkit-transition-duration", - "-moz-transition-duration", - "-ms-transition-duration", - "-o-transition-duration", - "transition-duration", - "-webkit-transition-property", - "-moz-transition-property", - "-ms-transition-property", - "-o-transition-property", - "transition-property", - "-webkit-transform", - "-moz-transform", - "-ms-transform", - "-o-transform", - "transform", - "-webkit-transform-origin", - "-moz-transform-origin", - "-ms-transform-origin", - "-o-transform-origin", - "transform-origin", - "-webkit-animation", - "-moz-animation", - "-ms-animation", - "-o-animation", - "animation", - "-webkit-animation-name", - "-moz-animation-name", - "-ms-animation-name", - "-o-animation-name", - "animation-name", - "-webkit-animation-duration", - "-moz-animation-duration", - "-ms-animation-duration", - "-o-animation-duration", - "animation-duration", - "-webkit-animation-play-state", - "-moz-animation-play-state", - "-ms-animation-play-state", - "-o-animation-play-state", - "animation-play-state", - "-webkit-animation-timing-function", - "-moz-animation-timing-function", - "-ms-animation-timing-function", - "-o-animation-timing-function", - "animation-timing-function", - "-webkit-animation-delay", - "-moz-animation-delay", - "-ms-animation-delay", - "-o-animation-delay", - "animation-delay", - "-webkit-animation-iteration-count", - "-moz-animation-iteration-count", - "-ms-animation-iteration-count", - "-o-animation-iteration-count", - "animation-iteration-count", - "-webkit-animation-direction", - "-moz-animation-direction", - "-ms-animation-direction", - "-o-animation-direction", - "animation-direction" - ] - ] -} diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index f739a971a9..af837e4d03 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -25,6 +25,8 @@ linters: BorderZero: enabled: true convention: zero # or `none` + exclude: + - _normalize.scss ChainedClasses: enabled: false @@ -103,6 +105,8 @@ linters: LeadingZero: enabled: true style: exclude_zero # or 'include_zero' + exclude: + - _normalize.scss MergeableSelector: enabled: false @@ -131,6 +135,8 @@ linters: ignore_unspecified: false min_properties: 2 separate_groups: false + exclude: + - _normalize.scss order: - position - top diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 22148bef1c..119cf1c050 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -7,13 +7,14 @@ .btn { display: inline-block; font-weight: $btn-font-weight; + line-height: $btn-line-height; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: $input-btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include transition(all .2s ease-in-out); &, @@ -143,11 +144,11 @@ fieldset[disabled] a.btn { .btn-lg { // line-height: ensure even-numbered height of button next to large input - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); } .btn-sm { // line-height: ensure proper height of button next to small input - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); } diff --git a/scss/_card.scss b/scss/_card.scss index ee6b473e9f..0b6a0aa030 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -9,8 +9,7 @@ background-color: $card-bg; // border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); - // Doesn't use mixin so that cards always have a "border" - box-shadow: inset 0 0 0 $card-border-width $card-border-color; + border: $card-border-width solid $card-border-color; } .card-block { @@ -49,18 +48,16 @@ } } -@if $enable-rounded { - .card { - > .list-group:first-child { - .list-group-item:first-child { - border-radius: $card-border-radius $card-border-radius 0 0; - } +.card { + > .list-group:first-child { + .list-group-item:first-child { + @include border-top-radius($card-border-radius); } + } - > .list-group:last-child { - .list-group-item:last-child { - border-radius: 0 0 $card-border-radius $card-border-radius; - } + > .list-group:last-child { + .list-group-item:last-child { + @include border-bottom-radius($card-border-radius); } } } @@ -187,17 +184,17 @@ right: 0; bottom: 0; left: 0; - padding: 1.25rem; + padding: $card-img-overlay-padding; } // Card image caps .card-img-top { - @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + @include border-top-radius($card-border-radius-inner); } .card-img-bottom { - @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + @include border-bottom-radius($card-border-radius-inner); } @@ -313,7 +310,7 @@ @include media-breakpoint-up(sm) { .card-columns { column-count: 3; - column-gap: 1.25rem; + column-gap: $card-columns-sm-up-column-gap; .card { display: inline-block; diff --git a/scss/_carousel.scss b/scss/_carousel.scss index af8c95c624..9386983d17 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -125,19 +125,19 @@ top: 50%; z-index: 5; display: inline-block; - width: 20px; - height: 20px; - margin-top: -10px; + width: $carousel-icon-width; + height: $carousel-icon-width; + margin-top: -($carousel-icon-width / 2); font-family: serif; line-height: 1; } .icon-prev { left: 50%; - margin-left: -10px; + margin-left: -($carousel-icon-width / 2); } .icon-next { right: 50%; - margin-right: -10px; + margin-right: -($carousel-icon-width / 2); } .icon-prev { @@ -163,16 +163,16 @@ bottom: 10px; left: 50%; z-index: 15; - width: 60%; + width: $carousel-indicators-width; padding-left: 0; - margin-left: -30%; + margin-left: -($carousel-indicators-width / 2); text-align: center; list-style: none; li { display: inline-block; - width: 10px; - height: 10px; + width: $carousel-indicator-size; + height: $carousel-indicator-size; margin: 1px; text-indent: -999px; cursor: pointer; @@ -183,11 +183,12 @@ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer background-color: rgba(0,0,0,0); // IE9 border: 1px solid $carousel-indicator-border-color; - border-radius: 10px; + border-radius: $carousel-indicator-size; } + .active { - width: 12px; - height: 12px; + width: $carousel-indicator-active-size; + height: $carousel-indicator-active-size; margin: 0; background-color: $carousel-indicator-active-bg; } @@ -200,9 +201,9 @@ .carousel-caption { position: absolute; - right: 15%; + right: ((100% - $carousel-caption-width) / 2); bottom: 20px; - left: 15%; + left: ((100% - $carousel-caption-width) / 2); z-index: 10; padding-top: 20px; padding-bottom: 20px; @@ -225,23 +226,23 @@ .carousel-control { .icon-prev, .icon-next { - width: 30px; - height: 30px; - margin-top: -15px; - font-size: 30px; + width: $carousel-control-sm-up-size; + height: $carousel-control-sm-up-size; + margin-top: -($carousel-control-sm-up-size / 2); + font-size: $carousel-control-sm-up-size; } .icon-prev { - margin-left: -15px; + margin-left: -($carousel-control-sm-up-size / 2); } .icon-next { - margin-right: -15px; + margin-right: -($carousel-control-sm-up-size / 2); } } // Show and left align the captions .carousel-caption { - right: 20%; - left: 20%; + right: ((100% - $carousel-caption-sm-up-width) / 2); + left: ((100% - $carousel-caption-sm-up-width) / 2); padding-bottom: 30px; } diff --git a/scss/_code.scss b/scss/_code.scss index e323516982..ea660bcdbf 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -8,8 +8,8 @@ samp { // Inline code code { - padding: .2rem .4rem; - font-size: 90%; + padding: $code-padding-y $code-padding-x; + font-size: $code-font-size; color: $code-color; background-color: $code-bg; @include border-radius($border-radius); @@ -17,8 +17,8 @@ code { // User input typically entered via keyboard kbd { - padding: .2rem .4rem; - font-size: 90%; + padding: $code-padding-y $code-padding-x; + font-size: $code-font-size; color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -37,7 +37,7 @@ pre { display: block; margin-top: 0; margin-bottom: 1rem; - font-size: 90%; + font-size: $code-font-size; color: $pre-color; // Account for some code outputs that place code tags in pre tags diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index dbb32d42e0..a5f0bdfc48 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -13,6 +13,7 @@ position: relative; display: inline; padding-left: $custom-control-gutter; + cursor: pointer; + .custom-control { margin-left: $custom-control-spacer-x; @@ -158,6 +159,22 @@ border-color: $custom-select-focus-border-color; outline: none; @include box-shadow($custom-select-focus-box-shadow); + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // supress the default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } + } + + &:disabled { + color: $custom-select-disabled-color; + cursor: $cursor-disabled; + background-color: $custom-select-disabled-bg; } // Hides the default caret in IE11 @@ -218,8 +235,10 @@ @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); - &::after { - content: $custom-file-placeholder; + @each $lang, $text in map-get($custom-file-text, placeholder) { + &:lang(#{$lang})::after { + content: $text; + } } &::before { @@ -233,9 +252,14 @@ padding: $custom-file-padding-x $custom-file-padding-y; line-height: $custom-file-line-height; color: $custom-file-button-color; - content: $custom-file-button-label; background-color: $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); } + + @each $lang, $text in map-get($custom-file-text, button-label) { + &:lang(#{$lang})::before { + content: $text; + } + } } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index a48537ba04..e696d28bef 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -41,9 +41,9 @@ z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; // override default ul + min-width: $dropdown-min-width; + padding: $dropdown-padding-y 0; + margin: $dropdown-margin-top 0 0; // override default ul font-size: $font-size-base; color: $body-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) @@ -66,7 +66,7 @@ .dropdown-item { display: block; width: 100%; // For `<button>`s - padding: 3px 20px; + padding: 3px $dropdown-item-padding-x; clear: both; font-weight: normal; color: $dropdown-link-color; @@ -140,7 +140,7 @@ // Dropdown section headers .dropdown-header { display: block; - padding: 5px 20px; + padding: $dropdown-padding-y $dropdown-item-padding-x; font-size: $font-size-sm; color: $dropdown-header-color; white-space: nowrap; // as with > li > a @@ -156,12 +156,6 @@ z-index: $zindex-dropdown-backdrop; } -// Right aligned dropdowns -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set. @@ -180,6 +174,6 @@ .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 2px; + margin-bottom: $dropdown-margin-top; } } diff --git a/scss/_forms.scss b/scss/_forms.scss index 03f1409064..263a8bc156 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -11,10 +11,12 @@ // height: $input-height; padding: $input-padding-y $input-padding-x; font-size: $font-size-base; + 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-btn-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. @include border-radius($input-border-radius); @@ -55,9 +57,19 @@ } select.form-control { - &:not([size], [multiple]) { + &:not([size]):not([multiple]) { height: $input-height; } + + &:focus::-ms-value { + // Suppress the nested default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to + // match the appearance of the native widget. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } } // Make file inputs better match text inputs by forcing them to new lines. @@ -73,41 +85,36 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. -.form-control-label { - padding: $input-padding-y $input-padding-x; +.col-form-label { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; // Override the `<label>` default } +.col-form-label-lg { + padding-top: $input-padding-y-lg; + padding-bottom: $input-padding-y-lg; + font-size: $font-size-lg; +} + +.col-form-label-sm { + padding-top: $input-padding-y-sm; + padding-bottom: $input-padding-y-sm; + font-size: $font-size-sm; +} -// Todo: clear this up -// Special styles for iOS temporal inputs // -// In Mobile Safari, setting `display: block` on temporal inputs causes the -// text within the input to become vertically misaligned. As a workaround, we -// set a pixel line-height that matches the given height of the input, but only -// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 +// Legends // -// Note that as of 8.3, iOS doesn't support `week`. - -_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/ -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - &.form-control { - line-height: $input-height; - } - &.input-sm, - .input-group-sm &.form-control { - line-height: $input-height-sm; - } - - &.input-lg, - .input-group-lg &.form-control { - line-height: $input-height-lg; - } +// For use with horizontal and inline forms, when you need the legend text to +// be the same size as regular labels, and to align with the form controls. +.col-form-legend { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; + margin-bottom: 0; + font-size: $font-size-base; } @@ -141,21 +148,29 @@ input[type="month"] { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - // height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; - line-height: $line-height-sm; @include border-radius($input-border-radius-sm); } +select.form-control-sm { + &:not([size]):not([multiple]) { + height: $input-height-sm; + } +} + .form-control-lg { - // height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; - line-height: $line-height-lg; @include border-radius($input-border-radius-lg); } +select.form-control-lg { + &:not([size]):not([multiple]) { + height: $input-height-lg; + } +} + // Form groups // @@ -166,101 +181,84 @@ input[type="month"] { margin-bottom: $form-group-margin-bottom; } +.form-text { + display: block; + margin-top: ($spacer * .25); +} + // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. -.radio, -.checkbox { +.form-check { position: relative; display: block; - // margin-top: ($spacer * .75); margin-bottom: ($spacer * .75); - label { - padding-left: 1.25rem; - margin-bottom: 0; - cursor: pointer; + // Move up sibling radios or checkboxes for tighter spacing + + .form-check { + margin-top: -.25rem; + } - // When there's no labels, don't position the input. - input:only-child { - position: static; + &.disabled { + .form-check-label { + color: $text-muted; + cursor: $cursor-disabled; } } } -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { + +.form-check-label { + padding-left: 1.25rem; + margin-bottom: 0; // Override default `<label>` bottom margin + cursor: pointer; +} + +.form-check-input { position: absolute; margin-top: .25rem; - // margin-top: 4px \9; margin-left: -1.25rem; -} -.radio + .radio, -.checkbox + .checkbox { - // Move up sibling radios or checkboxes for tighter spacing - margin-top: -.25rem; + &:only-child { + position: static; + } } // Radios and checkboxes on same line -.radio-inline, -.checkbox-inline { +.form-check-inline { position: relative; display: inline-block; padding-left: 1.25rem; - margin-bottom: 0; + margin-bottom: 0; // Override default `<label>` bottom margin vertical-align: middle; cursor: pointer; -} -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-top: 0; - margin-left: .75rem; -} -// Apply same disabled cursor tweak as for inputs -// Some special care is needed because <label>s don't inherit their parent's `cursor`. -// -// Note: Neither radios nor checkboxes can be readonly. -input[type="radio"], -input[type="checkbox"] { - &:disabled, - &.disabled { - cursor: $cursor-disabled; + + .form-check-inline { + margin-left: .75rem; } -} -// These classes are used directly on <label>s -.radio-inline, -.checkbox-inline { + &.disabled { cursor: $cursor-disabled; } } -// These classes are used on elements with <label> descendants -.radio, -.checkbox { - &.disabled { - label { - cursor: $cursor-disabled; - } - } -} // Form control feedback states // // Apply contextual and semantic states to individual form controls. +.form-control-feedback { + margin-top: ($spacer * .25); +} + .form-control-success, .form-control-warning, .form-control-danger { padding-right: ($input-padding-x * 3); background-repeat: no-repeat; - background-position: center right ($input-height * .25); - background-size: ($input-height * .5) ($input-height * .50); + background-position: center right ($input-height / 4); + background-size: ($input-height / 2) ($input-height / 2); } // Form validation states @@ -289,84 +287,6 @@ input[type="checkbox"] { } - - -// .form-control-success { -// background-image: url("#{$form-icon-success}"); -// border-color: $brand-success; -// } -// -// .form-control-warning { -// background-image: url("#{$form-icon-warning}"); -// border-color: $brand-warning; -// } -// -// .form-control-error { -// background-image: url("#{$form-icon-danger}"); -// border-color: $brand-danger; -// } - - -// .has-feedback { -// // Enable absolute positioning -// position: relative; -// -// // Ensure icons don't overlap text -// .form-control { -// padding-right: ($input-height * 1.25); -// } -// } -// // Feedback icon -// .form-control-feedback { -// position: absolute; -// top: 0; -// right: 0; -// z-index: 2; // Ensure icon is above input groups -// display: block; -// width: $input-height; -// height: $input-height; -// line-height: $input-height; -// text-align: center; -// pointer-events: none; -// } -// .input-lg + .form-control-feedback, -// .input-group-lg + .form-control-feedback { -// width: $input-height-lg; -// height: $input-height-lg; -// line-height: $input-height-lg; -// } -// .input-sm + .form-control-feedback, -// .input-group-sm + .form-control-feedback { -// width: $input-height-sm; -// height: $input-height-sm; -// line-height: $input-height-sm; -// } -// -// // Form validation states -// .has-success { -// @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); -// } -// .has-warning { -// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); -// } -// .has-danger { -// @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); -// } -// -// // Reposition feedback icon if input has visible label above -// .has-feedback label { -// -// ~ .form-control-feedback { -// // TODO: redo this since we nuked the `$line-height-computed` -// top: 0; // Height of the `label` and its margin -// } -// -// &.sr-only ~ .form-control-feedback { -// top: 0; -// } -// } - - // Inline forms // // Make forms appear inline(-block) by adding the `.form-inline` class. Inline @@ -422,19 +342,16 @@ input[type="checkbox"] { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. - .radio, - .checkbox { + .form-check { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; - - label { - padding-left: 0; - } } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { + .form-check-label { + padding-left: 0; + } + .form-check-input { position: relative; margin-left: 0; } diff --git a/scss/_images.scss b/scss/_images.scss index 410a09e364..9894269997 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -19,7 +19,7 @@ padding: $thumbnail-padding; background-color: $thumbnail-bg; border: $thumbnail-border-width solid $thumbnail-border-color; - border-radius: $thumbnail-border-radius; + @include border-radius($thumbnail-border-radius); transition: all .2s ease-in-out; @include box-shadow($thumbnail-box-shadow); @@ -47,6 +47,6 @@ } .figure-caption { - font-size: 90%; + font-size: $figure-caption-font-size; color: $gray-light; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 8686069822..fff9cb560f 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -4,6 +4,7 @@ .input-group { position: relative; + width: 100%; @if $enable-flex { display: flex; @@ -39,9 +40,7 @@ .input-group-addon, .input-group-btn, .input-group .form-control { - @if $enable-flex { - // do nothing - } @else { + @if not $enable-flex { display: table-cell; } @@ -52,9 +51,7 @@ .input-group-addon, .input-group-btn { - @if $enable-flex { - // do nothing - } @else { + @if not $enable-flex { width: 1%; } white-space: nowrap; @@ -88,7 +85,7 @@ margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom font-size: $font-size-base; font-weight: normal; - line-height: 1.5; + line-height: $input-line-height; color: $input-color; text-align: center; background-color: $input-group-addon-bg; @@ -121,32 +118,31 @@ // Reset rounded corners // -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .btn-group > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { +.input-group .form-control:not(:last-child), +.input-group-addon:not(:last-child), +.input-group-btn:not(:last-child) > .btn, +.input-group-btn:not(:last-child) > .btn-group > .btn, +.input-group-btn:not(:last-child) > .dropdown-toggle, +.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn { @include border-right-radius(0); } -.input-group-addon:first-child { +.input-group-addon:not(:last-child) { border-right: 0; } -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .btn-group > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child), -.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { +.input-group .form-control:not(:first-child), +.input-group-addon:not(:first-child), +.input-group-btn:not(:first-child) > .btn, +.input-group-btn:not(:first-child) > .btn-group > .btn, +.input-group-btn:not(:first-child) > .dropdown-toggle, +.input-group-btn:not(:last-child) > .btn:not(:first-child), +.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn { @include border-left-radius(0); } -.input-group-addon:last-child { +.form-control + .input-group-addon:not(:first-child) { border-left: 0; } - // // Button input groups // @@ -172,13 +168,13 @@ } // Negative margin to only have a single, shared border between the two - &:first-child { + &:not(:last-child) { > .btn, > .btn-group { margin-right: (-$input-btn-border-width); } } - &:last-child { + &:not(:first-child) { > .btn, > .btn-group { z-index: 2; diff --git a/scss/_labels.scss b/scss/_labels.scss deleted file mode 100644 index 6dec516085..0000000000 --- a/scss/_labels.scss +++ /dev/null @@ -1,79 +0,0 @@ -// Base class -// -// Requires one of the contextual, color modifier classes for `color` and -// `background-color`. - -.label { - display: inline-block; - padding: .25em .4em; - font-size: 75%; - font-weight: $label-font-weight; - line-height: 1; - color: $label-color; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - @include border-radius(); - - // Empty labels collapse automatically - &:empty { - display: none; - } -} - -// Quick fix for labels in buttons -.btn .label { - position: relative; - top: -1px; -} - -// scss-lint:disable QualifyingElement -// Add hover effects, but only for links -a.label { - @include hover-focus { - color: $label-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} -// scss-lint:enable QualifyingElement - -// Pill labels -// -// Make them extra rounded with a modifier to replace v3's badges. - -.label-pill { - padding-right: .6em; - padding-left: .6em; - // Use a higher than normal value to ensure completely rounded edges when - // customizing padding or font-size on labels. - @include border-radius(10rem); -} - -// Colors -// -// Contextual variations (linked labels get darker on :hover). - -.label-default { - @include label-variant($label-default-bg); -} - -.label-primary { - @include label-variant($label-primary-bg); -} - -.label-success { - @include label-variant($label-success-bg); -} - -.label-info { - @include label-variant($label-info-bg); -} - -.label-warning { - @include label-variant($label-warning-bg); -} - -.label-danger { - @include label-variant($label-danger-bg); -} diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ba91d95f11..d7e2ec5c16 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -16,7 +16,7 @@ .list-group-item { position: relative; display: block; - padding: .75rem 1.25rem; + padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; background-color: $list-group-bg; @@ -115,7 +115,7 @@ .list-group-item-heading { margin-top: 0; - margin-bottom: 5px; + margin-bottom: $list-group-item-heading-margin-bottom; } .list-group-item-text { margin-bottom: 0; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5c86512070..1b5bf0fae6 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -18,7 +18,7 @@ @import "mixins/breakpoints"; @import "mixins/hover"; @import "mixins/image"; -@import "mixins/label"; +@import "mixins/tag"; @import "mixins/reset-filter"; @import "mixins/resize"; @import "mixins/screen-reader"; diff --git a/scss/_modal.scss b/scss/_modal.scss index 83bb4932be..83a1335319 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -40,7 +40,7 @@ .modal-dialog { position: relative; width: auto; - margin: 10px; + margin: $modal-dialog-margin; } // Actual modal @@ -48,7 +48,7 @@ position: relative; background-color: $modal-content-bg; background-clip: padding-box; - border: 1px solid $modal-content-border-color; + border: $modal-content-border-width solid $modal-content-border-color; @include border-radius($border-radius-lg); @include box-shadow($modal-content-xs-box-shadow); // Remove focus outline from opened modal @@ -74,7 +74,7 @@ // Top section of the modal w/ title and dismiss .modal-header { padding: $modal-title-padding; - border-bottom: 1px solid $modal-header-border-color; + border-bottom: $modal-header-border-width solid $modal-header-border-color; @include clearfix; } // Close icon @@ -99,22 +99,8 @@ .modal-footer { padding: $modal-inner-padding; text-align: right; // right align buttons - border-top: 1px solid $modal-footer-border-color; + border-top: $modal-footer-border-width solid $modal-footer-border-color; @include clearfix(); // clear it in case folks use .pull-* classes on buttons - - // Properly space out buttons - .btn + .btn { - margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs - margin-left: 5px; - } - // but override that for button groups - .btn-group .btn + .btn { - margin-left: -1px; - } - // and override it for block buttons as well - .btn-block + .btn-block { - margin-left: 0; - } } // Measure scrollbar width for padding body during modal show/hide @@ -131,7 +117,7 @@ // Automatically set modal's width for larger viewports .modal-dialog { max-width: $modal-md; - margin: 30px auto; + margin: $modal-dialog-sm-up-margin-y auto; } .modal-content { diff --git a/scss/_nav.scss b/scss/_nav.scss index 6bb09fdbdd..640956ca2f 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -65,7 +65,7 @@ display: block; padding: $nav-link-padding; border: $nav-tabs-border-width solid transparent; - @include border-radius($border-radius $border-radius 0 0); + @include border-top-radius($nav-tabs-border-radius); @include hover-focus { border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 58da40c78b..6c4e9efa51 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -69,8 +69,8 @@ .navbar-brand { float: left; - padding-top: .25rem; - padding-bottom: .25rem; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; margin-right: 1rem; font-size: $font-size-lg; @@ -86,7 +86,7 @@ .navbar-divider { float: left; - width: 1px; + width: $border-width; padding-top: .425rem; padding-bottom: .425rem; margin-right: $navbar-padding-x; diff --git a/scss/_normalize.scss b/scss/_normalize.scss index 93dd452172..8a74836b09 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,9 +1,8 @@ -/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ // -// 1. Set default font family to sans-serif. -// 2. Prevent iOS and IE text size adjust after device orientation change, -// without disabling user zoom. +// 1. Change the default font family in all browsers (opinionated). +// 2. Prevent adjustments of font size after orientation changes in IE and iOS. // html { @@ -13,7 +12,7 @@ html { } // -// Remove default margin. +// Remove the margin in all browsers (opinionated). // body { @@ -24,43 +23,39 @@ body { // ========================================================================== // -// Correct `block` display not defined for any HTML5 element in IE 8/9. -// Correct `block` display not defined for `details` or `summary` in IE 10/11 -// and Firefox. -// Correct `block` display not defined for `main` in IE 11. +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// 2. Add the correct display in IE. // article, aside, -details, +details, // 1 figcaption, figure, footer, header, -main, +main, // 2 menu, nav, section, -summary { +summary { // 1 display: block; } // -// 1. Correct `inline-block` display not defined in IE 8/9. -// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// Add the correct display in IE 9-. // audio, canvas, progress, video { - display: inline-block; // 1 - vertical-align: baseline; // 2 + display: inline-block; } // -// Prevent modern browsers from displaying `audio` without controls. -// Remove excess height in iOS 5 devices. +// Add the correct display in iOS 4-7. // audio:not([controls]) { @@ -69,12 +64,20 @@ audio:not([controls]) { } // -// Address `[hidden]` styling not present in IE 8/9/10. -// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// Add the correct vertical alignment in Chrome, Firefox, and Opera. // -[hidden], -template { +progress { + vertical-align: baseline; +} + +// +// Add the correct display in IE 10-. +// 1. Add the correct display in IE. +// + +template, // 2 +[hidden] { display: none; } @@ -82,7 +85,7 @@ template { // ========================================================================== // -// Remove the gray background color from active links in IE 10. +// Remove the gray background on active links in IE 10. // a { @@ -90,41 +93,49 @@ a { } // -// Improve readability of focused elements when they are also in an -// active/hover state. +// Remove the outline on focused links when they are also active or hovered +// in all browsers (opinionated). // -a { - &:active { - outline: 0; - } - &:hover { - outline: 0; - } +a:active, +a:hover { + outline-width: 0; } // Text-level semantics // ========================================================================== // -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // abbr[title] { - border-bottom: 1px dotted; + border-bottom: none; // 1 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 } // -// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// Prevent the duplicate application of `bolder` by the next rule in Safari 6. // b, strong { - font-weight: bold; + font-weight: inherit; +} + +// +// Add the correct font weight in Chrome, Edge, and Safari. +// + +b, +strong { + font-weight: bolder; } // -// Address styling not present in Safari and Chrome. +// Add the correct font style in Android 4.3-. // dfn { @@ -132,8 +143,8 @@ dfn { } // -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari, and Chrome. +// Correct the font size and margin on `h1` elements within `section` and +// `article` contexts in Chrome, Firefox, and Safari. // h1 { @@ -142,16 +153,16 @@ h1 { } // -// Address styling not present in IE 8/9. +// Add the correct background and color in IE 9-. // mark { - background: #ff0; + background-color: #ff0; color: #000; } // -// Address inconsistent and variable font size in all browsers. +// Add the correct font size in all browsers. // small { @@ -159,7 +170,8 @@ small { } // -// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. // sub, @@ -170,27 +182,27 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + // Embedded content // ========================================================================== // -// Remove border when inside `a` element in IE 8/9/10. +// Remove the border on images inside links in IE 10-. // img { - border: 0; + border-style: none; } // -// Correct overflow not hidden in IE 9/10/11. +// Hide the overflow in IE. // svg:not(:root) { @@ -201,177 +213,146 @@ svg:not(:root) { // ========================================================================== // -// Address margin not present in IE 8/9 and Safari. +// 1. Correct the inheritance and scaling of font size in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. // -figure { - margin: 1em 40px; -} - -// -// Address differences between Firefox and other browsers. -// - -hr { - box-sizing: content-box; - height: 0; +code, +kbd, +pre, +samp { + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } // -// Contain overflow in all browsers. +// Add the correct margin in IE 8. // -pre { - overflow: auto; +figure { + margin: 1em 40px; } // -// Address odd `em`-unit font size rendering in all browsers. +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. // -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 } // Forms // ========================================================================== // -// Known limitation: by default, Chrome and Safari on OS X allow very limited -// styling of `select`, unless a `border` property is set. -// - -// -// 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. -// 2. Correct font properties not being inherited. -// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// Change font properties to `inherit` in all browsers (opinionated). // button, input, -optgroup, select, textarea { - color: inherit; // 1 - font: inherit; // 2 - margin: 0; // 3 + font: inherit; } // -// Address `overflow` set to `hidden` in IE 8/9/10/11. +// Restore the font weight unset by the previous rule. // -button { - overflow: visible; +optgroup { + font-weight: bold; } // -// Address inconsistent `text-transform` inheritance for `button` and `select`. -// All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. -// Correct `select` style inheritance in Firefox. +// Show the overflow in IE. +// 1. Show the overflow in Edge. +// 2. Show the overflow in Edge, Firefox, and IE. // button, -select { - text-transform: none; +input, // 1 +select { // 2 + overflow: visible; } // -// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` -// and `video` controls. -// 2. Correct inability to style clickable `input` types in iOS. -// 3. Improve usability and consistency of cursor style between image-type -// `input` and others. +// Remove the margin in Safari. +// 1. Remove the margin in Firefox and Safari. // button, -html input[type="button"], // 1 -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 -} - -// -// Re-set default cursor for disabled elements. -// - -button[disabled], -html input[disabled] { - cursor: default; +input, +select, +textarea { // 1 + margin: 0; } // -// Remove inner padding and border in Firefox 4+. +// Remove the inheritence of text transform in Edge, Firefox, and IE. +// 1. Remove the inheritence of text transform in Firefox. // -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +button, +select { // 1 + text-transform: none; } // -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// Change the cursor in all browsers (opinionated). // -input { - line-height: normal; +button, +[type="button"], +[type="reset"], +[type="submit"] { + cursor: pointer; } // -// It's recommended that you don't attempt to style these elements. -// Firefox's implementation doesn't respect box-sizing, padding, or width. -// -// 1. Address box sizing set to `content-box` in IE 8/9/10. -// 2. Remove excess padding in IE 8/9/10. +// Restore the default cursor to disabled elements unset by the previous rule. // -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 +[disabled] { + cursor: default; } // -// Fix the cursor style for Chrome's increment/decrement buttons. For certain -// `font-size` values of the `input`, it causes the cursor style of the -// decrement button to change from `default` to `text`. +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS. // -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 } // -// Address `appearance` set to `searchfield` in Safari and Chrome. +// Remove the inner border and padding in Firefox. // -input[type="search"] { - -webkit-appearance: textfield; +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } // -// Remove inner padding and search cancel button in Safari and Chrome on OS X. -// Safari (but not Chrome) clips the cancel button when the search input has -// padding (and `textfield` appearance). +// Restore the focus styles unset by the previous rule. // -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +button:-moz-focusring, +input:-moz-focusring { + outline: 1px dotted ButtonText; } // -// Define consistent border, margin, and padding. +// Change the border, margin, and padding in all browsers (opinionated). // fieldset { @@ -381,17 +362,23 @@ fieldset { } // -// 1. Correct `color` not being inherited in IE 8/9/10/11. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +// 3. Remove the padding so developers are not caught out when they zero out +// `fieldset` elements in all browsers. // legend { - border: 0; // 1 - padding: 0; // 2 + box-sizing: border-box; // 1 + color: inherit; // 2 + display: table; // 1 + max-width: 100%; // 1 + padding: 0; // 3 + white-space: normal; // 1 } // -// Remove default vertical scrollbar in IE 8/9/10/11. +// Remove the default vertical scrollbar in IE. // textarea { @@ -399,27 +386,39 @@ textarea { } // -// Don't inherit the `font-weight` (applied by a rule above). -// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// 1. Add the correct box sizing in IE 10-. +// 2. Remove the padding in IE 10-. // -optgroup { - font-weight: bold; +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 } -// Tables -// ========================================================================== +// +// Correct the cursor style of increment and decrement buttons in Chrome. +// + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} // -// Remove most spacing between table cells. +// Correct the odd appearance of search inputs in Chrome and Safari. // -table { - border-collapse: collapse; - border-spacing: 0; +[type="search"] { + -webkit-appearance: textfield; } -td, -th { - padding: 0; +// +// Remove the inner padding and cancel buttons in Chrome on OS X and +// Safari on OS X. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } diff --git a/scss/_print.scss b/scss/_print.scss index ac1c3bba04..b2c93735c7 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -8,107 +8,109 @@ // http://www.phpied.com/delay-loading-your-print-css/ // ========================================================================== -@media print { - *, - *::before, - *::after, - *::first-letter, - *::first-line { - // Bootstrap specific; comment out `color` and `background` - //color: #000 !important; // Black prints faster: - // http://www.sanbeiji.com/archives/953 - text-shadow: none !important; - //background: transparent !important; - box-shadow: none !important; - } +@if $enable-print-styles { + @media print { + *, + *::before, + *::after, + *::first-letter, + *::first-line { + // Bootstrap specific; comment out `color` and `background` + //color: #000 !important; // Black prints faster: + // http://www.sanbeiji.com/archives/953 + text-shadow: none !important; + //background: transparent !important; + box-shadow: none !important; + } - a, - a:visited { - text-decoration: underline; - } + a, + a:visited { + text-decoration: underline; + } - // Bootstrap specific; comment the following selector out - //a[href]::after { - // content: " (" attr(href) ")"; - //} + // Bootstrap specific; comment the following selector out + //a[href]::after { + // content: " (" attr(href) ")"; + //} - abbr[title]::after { - content: " (" attr(title) ")"; - } + abbr[title]::after { + content: " (" attr(title) ")"; + } - // Bootstrap specific; comment the following selector out - // - // Don't show links that are fragment identifiers, - // or use the `javascript:` pseudo protocol - // - - //a[href^="#"]::after, - //a[href^="javascript:"]::after { - // content: ""; - //} - - pre, - blockquote { - border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px - page-break-inside: avoid; - } + // Bootstrap specific; comment the following selector out + // + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + // + + //a[href^="#"]::after, + //a[href^="javascript:"]::after { + // content: ""; + //} + + pre, + blockquote { + border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px + page-break-inside: avoid; + } - // - // Printing Tables: - // http://css-discuss.incutio.com/wiki/Printing_Tables - // + // + // Printing Tables: + // http://css-discuss.incutio.com/wiki/Printing_Tables + // - thead { - display: table-header-group; - } + thead { + display: table-header-group; + } - tr, - img { - page-break-inside: avoid; - } + tr, + img { + page-break-inside: avoid; + } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } - h2, - h3 { - page-break-after: avoid; - } + h2, + h3 { + page-break-after: avoid; + } - // Bootstrap specific changes start + // Bootstrap specific changes start - // Bootstrap components - .navbar { - display: none; - } - .btn, - .dropup > .btn { - > .caret { - border-top-color: #000 !important; + // Bootstrap components + .navbar { + display: none; + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .tag { + border: $border-width solid #000; } - } - .label { - border: $border-width solid #000; - } - .table { - border-collapse: collapse !important; + .table { + border-collapse: collapse !important; - td, - th { - background-color: #fff !important; + td, + th { + background-color: #fff !important; + } } - } - .table-bordered { - th, - td { - border: 1px solid #ddd !important; + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } } - } - // Bootstrap specific changes end + // Bootstrap specific changes end + } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index fe4af1f936..e30de2c1b9 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -34,8 +34,7 @@ html { // // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in // some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. -// Eventually @viewport will replace <meta name="viewport">. It's been manually -// prefixed for forward-compatibility. +// Eventually @viewport will replace <meta name="viewport">. // // However, `device-width` is broken on IE 10 on Windows (Phone) 8, // (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) @@ -172,6 +171,25 @@ a { } } +// And undo these styles for placeholder links/named anchors (without href). +// It would be more straightforward to just use a[href] in previous block, but that +// causes specificity issues in many other styles that are too complex to fix. +// See https://github.com/twbs/bootstrap/issues/19402 + +a:not([href]) { + color: inherit; + text-decoration: none; + + @include hover-focus { + color: inherit; + text-decoration: none; + } + + &:focus { + outline: none; + } +} + // // Code @@ -182,6 +200,8 @@ pre { margin-top: 0; // Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; + // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets + overflow: auto; } @@ -248,6 +268,8 @@ textarea { // table { + // No longer part of Normalize since v4 + border-collapse: collapse; // Reset for nesting within parents with `background-color`. background-color: $table-bg; } @@ -299,6 +321,29 @@ textarea { border-radius: 0; } +input[type="radio"], +input[type="checkbox"] { + // Apply a disabled cursor for radios and checkboxes. + // + // Note: Neither radios nor checkboxes can be readonly. + &:disabled { + cursor: $cursor-disabled; + } +} + + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + // Remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // + // Bug report: https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + textarea { // Textareas should really only resize vertically so they don't break their (horizontal) containers. resize: vertical; @@ -323,7 +368,6 @@ legend { margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; -// border: 0; } input[type="search"] { diff --git a/scss/_tags.scss b/scss/_tags.scss new file mode 100644 index 0000000000..dee9ed95d2 --- /dev/null +++ b/scss/_tags.scss @@ -0,0 +1,77 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.tag { + display: inline-block; + padding: $tag-padding-y $tag-padding-x; + font-size: $tag-font-size; + font-weight: $tag-font-weight; + line-height: 1; + color: $tag-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius(); + + // Empty tags collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for tags in buttons +.btn .tag { + position: relative; + top: -1px; +} + +// scss-lint:disable QualifyingElement +// Add hover effects, but only for links +a.tag { + @include hover-focus { + color: $tag-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} +// scss-lint:enable QualifyingElement + +// Pill tags +// +// Make them extra rounded with a modifier to replace v3's badges. + +.tag-pill { + padding-right: $tag-pill-padding-x; + padding-left: $tag-pill-padding-x; + @include border-radius($tag-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked tags get darker on :hover). + +.tag-default { + @include tag-variant($tag-default-bg); +} + +.tag-primary { + @include tag-variant($tag-primary-bg); +} + +.tag-success { + @include tag-variant($tag-success-bg); +} + +.tag-info { + @include tag-variant($tag-info-bg); +} + +.tag-warning { + @include tag-variant($tag-warning-bg); +} + +.tag-danger { + @include tag-variant($tag-danger-bg); +} diff --git a/scss/_type.scss b/scss/_type.scss index 1075757795..ff7114074d 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -60,14 +60,14 @@ hr { small, .small { - font-size: 80%; + font-size: $small-font-size; font-weight: normal; } mark, .mark { - padding: .2em; - background-color: $state-warning-bg; + padding: $mark-padding; + background-color: $mark-bg; } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 3f9e81f125..87b8ba6da7 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,8 +1,9 @@ @import "utilities/background"; @import "utilities/clearfix"; +@import "utilities/display"; +@import "utilities/flex"; @import "utilities/pulls"; @import "utilities/screenreaders"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; -@import "utilities/flex"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 860d061b54..bbdbe24c4d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -17,6 +17,18 @@ // Fonts // Components +@mixin _assert-ascending($map, $map-name) { + $prev-key: null; + $prev-num: null; + @each $key, $num in $map { + @if $prev-num != null and $prev-num >= $num { + @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } + $prev-key: $key; + $prev-num: $num; + } +} + // General variable structure // // Variable format should follow the `$component-modifier-state-property` order. @@ -50,12 +62,14 @@ $enable-gradients: false !default; $enable-transitions: false !default; $enable-hover-media-query: false !default; $enable-grid-classes: true !default; +$enable-print-styles: true !default; // Spacing // // Control the default styling of most Bootstrap elements by modifying these // variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. $spacer: 1rem !default; $spacer-x: $spacer !default; @@ -101,7 +115,7 @@ $link-hover-decoration: underline !default; // Grid breakpoints // -// Define the minimum and maximum dimensions at which your layout will change, +// Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. $grid-breakpoints: ( @@ -111,6 +125,7 @@ $grid-breakpoints: ( lg: 992px, xl: 1200px ) !default; +@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); // Grid containers @@ -123,6 +138,7 @@ $container-max-widths: ( lg: 940px, xl: 1140px ) !default; +@include _assert-ascending($container-max-widths, "$container-max-widths"); // Grid columns @@ -178,6 +194,8 @@ $headings-color: inherit !default; $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; +$small-font-size: 80% !default; + $text-muted: $gray-light !default; $abbr-border-color: $gray-light !default; @@ -190,6 +208,8 @@ $blockquote-border-width: .25rem !default; $hr-border-color: rgba(0,0,0,.1) !default; $hr-border-width: $border-width !default; +$mark-padding: .2em !default; + $dt-font-weight: bold !default; $kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; @@ -237,7 +257,8 @@ $table-border-color: $gray-lighter !default; // For each of Bootstrap's buttons, define text, background and border color. $btn-padding-x: 1rem !default; -$btn-padding-y: .375rem !default; +$btn-padding-y: .5rem !default; +$btn-line-height: 1.25 !default; $btn-font-weight: normal !default; $btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; $btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; @@ -268,10 +289,10 @@ $btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .75rem !default; +$btn-padding-x-sm: .5rem !default; $btn-padding-y-sm: .25rem !default; -$btn-padding-x-lg: 1.25rem !default; +$btn-padding-x-lg: 1.5rem !default; $btn-padding-y-lg: .75rem !default; $btn-block-spacing-y: .5rem !default; @@ -293,13 +314,14 @@ $btn-border-radius-sm: $border-radius-sm !default; // Forms $input-padding-x: .75rem !default; -$input-padding-y: .375rem !default; +$input-padding-y: .5rem !default; +$input-line-height: 1.25 !default; $input-bg: #fff !default; $input-bg-disabled: $gray-lighter !default; $input-color: $gray !default; -$input-border-color: #ccc !default; +$input-border-color: rgba(0,0,0,.15) !default; $input-btn-border-width: $border-width !default; // For form controls and buttons $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; @@ -307,15 +329,17 @@ $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; +$input-bg-focus: $input-bg; $input-border-focus: #66afe9 !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-focus: $input-color; $input-color-placeholder: #999 !default; -$input-padding-x-sm: .75rem !default; -$input-padding-y-sm: .275rem !default; +$input-padding-x-sm: .5rem !default; +$input-padding-y-sm: .25rem !default; -$input-padding-x-lg: 1.25rem !default; +$input-padding-x-lg: 1.5rem !default; $input-padding-y-lg: .75rem !default; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; @@ -364,8 +388,10 @@ $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='h $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-light !default; $custom-select-bg: #fff !default; +$custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; $custom-select-border-width: $input-btn-border-width !default; @@ -391,10 +417,16 @@ $custom-file-border-width: $border-width !default; $custom-file-border-color: #ddd !default; $custom-file-border-radius: $border-radius !default; $custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; -$custom-file-placeholder: "Choose file..." !default; -$custom-file-button-label: "Browse" !default; $custom-file-button-color: $custom-file-color !default; $custom-file-button-bg: #eee !default; +$custom-file-text: ( + placeholder: ( + en: "Choose file..." + ), + button-label: ( + en: "Browse" + ) +) !default; // Form validation icons @@ -407,6 +439,9 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // // Dropdown menu container and contents. +$dropdown-min-width: 160px !default; +$dropdown-padding-y: 5px !default; +$dropdown-margin-top: 2px !default; $dropdown-bg: #fff !default; $dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-width: $border-width !default; @@ -422,6 +457,8 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; +$dropdown-item-padding-x: 20px !default; + $dropdown-header-color: $gray-light !default; @@ -446,6 +483,7 @@ $zindex-modal: 1050 !default; $navbar-border-radius: $border-radius !default; $navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !default; +$navbar-brand-padding-y: .25rem !default; $navbar-dark-color: rgba(255,255,255,.5) !default; $navbar-dark-hover-color: rgba(255,255,255,.75) !default; @@ -470,6 +508,7 @@ $nav-disabled-link-hover-bg: transparent !default; $nav-tabs-border-color: #ddd !default; $nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-bg: $body-bg !default; @@ -530,6 +569,7 @@ $state-info-border: 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-danger-text: #a94442 !default; @@ -549,8 +589,12 @@ $card-bg: #fff !default; $card-link-hover-color: #fff !default; +$card-img-overlay-padding: 1.25rem !default; + $card-deck-margin: .625rem !default; +$card-columns-sm-up-column-gap: 1.25rem !default; + // Tooltips @@ -588,30 +632,41 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -// Labels +// Tags -$label-default-bg: $gray-light !default; -$label-primary-bg: $brand-primary !default; -$label-success-bg: $brand-success !default; -$label-info-bg: $brand-info !default; -$label-warning-bg: $brand-warning !default; -$label-danger-bg: $brand-danger !default; +$tag-default-bg: $gray-light !default; +$tag-primary-bg: $brand-primary !default; +$tag-success-bg: $brand-success !default; +$tag-info-bg: $brand-info !default; +$tag-warning-bg: $brand-warning !default; +$tag-danger-bg: $brand-danger !default; -$label-color: #fff !default; -$label-link-hover-color: #fff !default; -$label-font-weight: bold !default; +$tag-color: #fff !default; +$tag-link-hover-color: #fff !default; +$tag-font-size: 75% !default; +$tag-font-weight: bold !default; +$tag-padding-x: .4em !default; +$tag-padding-y: .25em !default; +$tag-pill-padding-x: .6em !default; +// Use a higher than normal value to ensure completely rounded edges when +// customizing padding or font-size on labels. +$tag-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body $modal-inner-padding: 15px !default; +$modal-dialog-margin: 10px !default; +$modal-dialog-sm-up-margin-y: 30px !default; + $modal-title-padding: 15px !default; $modal-title-line-height: $line-height-base !default; $modal-content-bg: #fff !default; $modal-content-border-color: rgba(0,0,0,.2) !default; +$modal-content-border-width: $border-width !default; $modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; $modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; @@ -619,6 +674,8 @@ $modal-backdrop-bg: #000 !default; $modal-backdrop-opacity: .5 !default; $modal-header-border-color: #e5e5e5 !default; $modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; $modal-lg: 900px !default; $modal-md: 600px !default; @@ -686,6 +743,10 @@ $list-group-link-color: #555 !default; $list-group-link-hover-color: $list-group-link-color !default; $list-group-link-heading-color: #333 !default; +$list-group-item-padding-x: 1.25rem !default; +$list-group-item-padding-y: .75rem !default; +$list-group-item-heading-margin-bottom: 5px !default; + // Image thumbnails @@ -697,6 +758,11 @@ $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; +// Figures + +$figure-caption-font-size: 90% !default; + + // Breadcrumbs $breadcrumb-padding-y: .75rem !default; @@ -722,14 +788,23 @@ $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; $carousel-control-color: #fff !default; $carousel-control-width: 15% !default; +$carousel-control-sm-up-size: 30px !default; $carousel-control-opacity: .5 !default; $carousel-control-font-size: 20px !default; +$carousel-indicators-width: 60% !default; + +$carousel-indicator-size: 10px !default; +$carousel-indicator-active-size: 12px !default; $carousel-indicator-active-bg: #fff !default; $carousel-indicator-border-color: #fff !default; +$carousel-caption-width: 70% !default; +$carousel-caption-sm-up-width: 60% !default; $carousel-caption-color: #fff !default; +$carousel-icon-width: 20px !default; + // Close @@ -740,6 +815,9 @@ $close-text-shadow: 0 1px 0 #fff !default; // Code +$code-font-size: 90% !default; +$code-padding-x: .4rem !default; +$code-padding-y: .2rem !default; $code-color: #bd4147 !default; $code-bg: #f7f7f9 !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 03aef0c6a4..47f5a79b36 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -35,7 +35,7 @@ @import "card"; @import "breadcrumb"; @import "pagination"; -@import "labels"; +@import "tags"; @import "jumbotron"; @import "alert"; @import "progress"; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 968634880e..5196ab65e1 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -64,19 +64,33 @@ background-color: transparent; border-color: $color; + @include hover { + color: #fff; + background-color: $color; + border-color: $color; + } + &:focus, - &.focus, - &:active, - &.active, - .open > &.dropdown-toggle { + &.focus { color: #fff; background-color: $color; border-color: $color; } - @include hover { + + &:active, + &.active, + .open > &.dropdown-toggle { color: #fff; background-color: $color; border-color: $color; + + &:hover, + &:focus, + &.focus { + color: #fff; + background-color: darken($color, 17%); + border-color: darken($color, 25%); + } } &.disabled, @@ -92,7 +106,7 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; @include border-radius($border-radius); diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index b87429c1b0..026e41e23d 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -5,7 +5,7 @@ @mixin form-control-validation($color) { // Color the label and help text - .text-help, + .form-control-feedback, .form-control-label, .radio, .checkbox, @@ -14,7 +14,8 @@ &.radio label, &.checkbox label, &.radio-inline label, - &.checkbox-inline label { + &.checkbox-inline label, + .custom-control { color: $color; } // Set the border and box shadow on specific inputs to match @@ -55,6 +56,8 @@ // contrast against a dark gray background. @mixin form-control-focus() { &:focus { + color: $input-color-focus; + background-color: $input-bg-focus; border-color: $input-border-focus; outline: none; $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 15d1e6bdf8..cb25be92ac 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -15,14 +15,14 @@ flex-grow: 1; max-width: 100%; min-height: 1px; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); } } @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - @include make-col($i, $columns); + @include make-col($i, $columns, $gutter); } } @@ -36,7 +36,7 @@ // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { - @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 + @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0 .offset-#{$breakpoint}-#{$i} { @include make-col-modifier(offset, $i, $columns) } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 6e67f92cd3..3ba4f43bc7 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,11 +33,11 @@ margin-right: ($gutter / -2); } -@mixin make-col($size, $columns: $grid-columns) { +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); @if $enable-flex { flex: 0 0 percentage($size / $columns); diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index e52b282a90..6ae65516aa 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -1,6 +1,6 @@ // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: http://a11yproject.com/posts/how-to-hide-content @mixin sr-only { position: absolute; diff --git a/scss/mixins/_label.scss b/scss/mixins/_tag.scss index 4bc48c60dd..900c54e366 100644 --- a/scss/mixins/_label.scss +++ b/scss/mixins/_tag.scss @@ -1,6 +1,6 @@ -// Labels +// Tags -@mixin label-variant($color) { +@mixin tag-variant($color) { background-color: $color; &[href] { diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss new file mode 100644 index 0000000000..d74049be8b --- /dev/null +++ b/scss/utilities/_display.scss @@ -0,0 +1,13 @@ +// +// Display utilities +// + +.d-block { + display: block !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-inline { + display: inline !important; +} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index fe91ac1212..a61135ce2a 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -2,7 +2,7 @@ // // Custom styles for additional flex alignment options. -@if $enable-flex and $enable-grid-classes { +@if $enable-flex { @each $breakpoint in map-keys($grid-breakpoints) { // Flex column reordering @include media-breakpoint-up($breakpoint) { diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index cd543c8c90..b7ff044b6d 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -1,3 +1,7 @@ +// Width + +.w-100 { width: 100% !important; } + // Margin and Padding .m-x-auto { |