diff options
Diffstat (limited to 'scss')
44 files changed, 513 insertions, 374 deletions
diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index af837e4d0..9c6ac66ab 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -3,6 +3,9 @@ scss_files: - "**/*.scss" - "docs/assets/scss/**/*.scss" +exclude: + - "scss/_normalize.scss" + plugin_directories: ['.scss-linters'] # List of gem names to load custom linters from (make sure they are already @@ -89,7 +92,7 @@ linters: enabled: true ImportantRule: - enabled: true + enabled: false ImportPath: enabled: true @@ -457,7 +460,7 @@ linters: Shorthand: enabled: true - allowed_shorthands: [1, 2, 3] + allowed_shorthands: [1, 2, 3, 4] SingleLinePerProperty: enabled: false diff --git a/scss/_alert.scss b/scss/_alert.scss index 55fc101dc..433177101 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -26,13 +26,13 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding + 20px); + padding-right: ($alert-padding * 2); // Adjust close link position .close { position: relative; - top: -2px; - right: -21px; + top: -.125rem; + right: -$alert-padding; color: inherit; } } diff --git a/scss/_animation.scss b/scss/_animation.scss index edd7147e5..f0dfff81f 100644 --- a/scss/_animation.scss +++ b/scss/_animation.scss @@ -9,12 +9,21 @@ .collapse { display: none; - &.in { display: block; } - // tr&.in { display: table-row; } - // tbody&.in { display: table-row-group; } +} + +tr { + &.collapse.in { + display: table-row; + } +} + +tbody { + &.collapse.in { + display: table-row-group; + } } .collapsing { diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 60e9f7a74..0e63ecc54 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -10,6 +10,7 @@ > .btn { position: relative; float: left; + margin-bottom: 0; // Bring the "active" button to the front &:focus, diff --git a/scss/_card.scss b/scss/_card.scss index a419d4d08..01a5733d6 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -70,6 +70,7 @@ .card-header { @include clearfix; padding: $card-spacer-y $card-spacer-x; + margin-bottom: 0; // Removes the default margin-bottom of <hN> background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; @@ -168,7 +169,7 @@ // Card image .card-img { // margin: -1.325rem; - @include border-radius(.25rem); + @include border-radius($card-border-radius-inner); } .card-img-overlay { position: absolute; @@ -314,7 +315,7 @@ column-gap: $card-columns-sm-up-column-gap; .card { - display: inline-block; + display: inline-block; // Don't let them vertically span multiple columns width: 100%; // Don't let them exceed the column width } } diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index a5f0bdfc4..e74f5c744 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -2,7 +2,7 @@ // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. -// http://useiconic.com/open +// https://useiconic.com/open // Checkboxes and radios @@ -11,7 +11,7 @@ .custom-control { position: relative; - display: inline; + display: inline-block; padding-left: $custom-control-gutter; cursor: pointer; @@ -61,7 +61,7 @@ .custom-control-indicator { position: absolute; - top: .0625rem; + top: .25rem; left: 0; display: block; width: $custom-control-indicator-size; @@ -117,13 +117,8 @@ .custom-controls-stacked { .custom-control { - display: inline; - - &::after { - display: block; - margin-bottom: $custom-control-spacer-y; - content: ""; - } + float: left; + clear: left; + .custom-control { margin-left: 0; @@ -142,6 +137,8 @@ .custom-select { display: inline-block; max-width: 100%; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height} - #{$select-border-width}); padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; padding-right: $custom-select-padding-x \9; color: $custom-select-color; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index e696d28be..47702e795 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -141,6 +141,7 @@ .dropdown-header { display: block; padding: $dropdown-padding-y $dropdown-item-padding-x; + margin-bottom: 0; // for use with heading elements font-size: $font-size-sm; color: $dropdown-header-color; white-space: nowrap; // as with > li > a diff --git a/scss/_forms.scss b/scss/_forms.scss index 263a8bc15..be19a0795 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -18,8 +18,16 @@ 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); + @if $enable-rounded { + // Manually use the if/else instead of the mixin to account for iOS override + border-radius: $input-border-radius; + } @else { + // Otherwise undo the iOS default + border-radius: 0; + } + @include box-shadow($input-box-shadow); @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); @@ -58,7 +66,8 @@ select.form-control { &:not([size]):not([multiple]) { - height: $input-height; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height} - #{$select-border-width}); } &:focus::-ms-value { @@ -124,12 +133,11 @@ select.form-control { // horizontal form layout. .form-control-static { - min-height: $input-height; - // Size it appropriately next to real form controls padding-top: $input-padding-y; padding-bottom: $input-padding-y; - // Remove default margin from `p` - margin-bottom: 0; + line-height: $input-line-height; + border: solid transparent; + border-width: 1px 0; &.form-control-sm, &.form-control-lg { @@ -239,6 +247,7 @@ select.form-control-lg { } &.disabled { + color: $text-muted; cursor: $cursor-disabled; } } @@ -321,6 +330,7 @@ select.form-control-lg { .input-group { display: inline-table; + width: auto; vertical-align: middle; .input-group-addon, diff --git a/scss/_images.scss b/scss/_images.scss index 989426999..3cdedc4ff 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -6,13 +6,9 @@ // which weren't expecting the images within themselves to be involuntarily resized. // See also https://github.com/twbs/bootstrap/issues/18178 .img-fluid { - @include img-fluid(); + @include img-fluid; } -// Rounded corners -.img-rounded { - @include border-radius($border-radius-lg); -} // Image thumbnails .img-thumbnail { @@ -24,12 +20,7 @@ @include box-shadow($thumbnail-box-shadow); // Keep them at most 100% wide - @include img-fluid(inline-block); -} - -// Perfect circle -.img-circle { - border-radius: 50%; + @include img-fluid; } // diff --git a/scss/_input-group.scss b/scss/_input-group.scss index fff9cb560..b447a3282 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -90,18 +90,18 @@ text-align: center; background-color: $input-group-addon-bg; border: $input-btn-border-width solid $input-group-addon-border-color; - @include border-radius($border-radius); + @include border-radius($input-border-radius); // Sizing &.form-control-sm { padding: $input-padding-y-sm $input-padding-x-sm; font-size: $font-size-sm; - @include border-radius($border-radius-sm); + @include border-radius($input-border-radius-sm); } &.form-control-lg { padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; - @include border-radius($border-radius-lg); + @include border-radius($input-border-radius-lg); } // scss-lint:disable QualifyingElement diff --git a/scss/_list-group.scss b/scss/_list-group.scss index d7e2ec5c1..1e0d1121d 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -70,6 +70,8 @@ .list-group-flush { .list-group-item { + border-right: 0; + border-left: 0; border-radius: 0; } } diff --git a/scss/_media.scss b/scss/_media.scss index d970c946a..d1ebbcdeb 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -1,7 +1,6 @@ @if $enable-flex { .media { display: flex; - margin-bottom: $spacer; } .media-body { flex: 1; @@ -13,13 +12,6 @@ align-self: flex-end; } } @else { - .media { - margin-top: $media-margin-top; - - &:first-child { - margin-top: 0; - } - } .media, .media-body { overflow: hidden; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 1b5bf0fae..e53ab3414 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -51,4 +51,4 @@ // @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; -@import "mixins/pulls"; +@import "mixins/float"; diff --git a/scss/_modal.scss b/scss/_modal.scss index 83a133531..c326d5699 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -1,7 +1,7 @@ // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal -// .modal-content - actual modal w/ bg and corners and shit +// .modal-content - actual modal w/ bg and corners and stuff // Kill the scroll on the body @@ -22,7 +22,9 @@ // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. outline: 0; - -webkit-overflow-scrolling: touch; + // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a + // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 + // See also https://github.com/twbs/bootstrap/issues/17695 // When fading in the modal, animate it to slide down &.fade .modal-dialog { diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 9d3db1b26..cdc21e78c 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -105,10 +105,13 @@ // Bootstrap JavaScript plugin. .navbar-toggler { + width: 2.5em; + height: 2em; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; - background: none; + background: transparent no-repeat center center; + background-size: 24px 24px; border: $border-width solid transparent; @include border-radius($navbar-toggler-border-radius); @@ -117,28 +120,6 @@ } } -// scss-lint:disable ImportantRule -// Custom override for -.navbar-toggleable { - &-xs { - @include media-breakpoint-up(sm) { - display: block !important; - } - } - &-sm { - @include media-breakpoint-up(md) { - display: block !important; - } - } - &-md { - @include media-breakpoint-up(lg) { - display: block !important; - } - } -} -// scss-lint:enable ImportantRule - - // Navigation // // Custom navbar navigation built on the base `.nav` styles. @@ -193,6 +174,10 @@ } } + .navbar-toggler { + background-image: $navbar-light-toggler-bg; + } + .navbar-divider { background-color: rgba(0,0,0,.075); } @@ -228,7 +213,57 @@ } } + .navbar-toggler { + background-image: $navbar-dark-toggler-bg; + } + .navbar-divider { background-color: rgba(255,255,255,.075); } } + + +// Navbar toggleable +// +// Custom override for collapse plugin in navbar. + +.navbar-toggleable { + &-xs { + @include clearfix; + @include media-breakpoint-down(xs) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(sm) { + display: block !important; + } + } + + &-sm { + @include clearfix; + @include media-breakpoint-down(sm) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(md) { + display: block !important; + } + } + + &-md { + @include clearfix; + @include media-breakpoint-down(md) { + .navbar-nav .nav-item { + float: none; + margin-left: 0; + } + } + @include media-breakpoint-up(lg) { + display: block !important; + } + } +} diff --git a/scss/_normalize.scss b/scss/_normalize.scss index 8a74836b0..827b7f31a 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,14 +1,16 @@ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ // // 1. Change the default font family in all browsers (opinionated). -// 2. Prevent adjustments of font size after orientation changes in IE and iOS. +// 2. Correct the line height in all browsers. +// 3. Prevent adjustments of font size after orientation changes in IE and iOS. // html { font-family: sans-serif; // 1 - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 + line-height: 1.15; // 2 + -ms-text-size-adjust: 100%; // 3 + -webkit-text-size-adjust: 100%; // 3 } // @@ -76,7 +78,7 @@ progress { // 1. Add the correct display in IE. // -template, // 2 +template, // 1 [hidden] { display: none; } @@ -85,11 +87,13 @@ template, // 2 // ========================================================================== // -// Remove the gray background on active links in IE 10. +// 1. Remove the gray background on active links in IE 10. +// 2. Remove gaps in links underline in iOS 8+ and Safari 8+. // a { - background-color: transparent; + background-color: transparent; // 1 + -webkit-text-decoration-skip: objects; // 2 } // @@ -248,14 +252,17 @@ hr { // ========================================================================== // -// Change font properties to `inherit` in all browsers (opinionated). +// 1. Change font properties to `inherit` in all browsers (opinionated). +// 2. Remove the margin in Firefox and Safari. // button, input, +optgroup, select, textarea { - font: inherit; + font: inherit; // 1 + margin: 0; // 2 } // @@ -269,30 +276,16 @@ optgroup { // // Show the overflow in IE. // 1. Show the overflow in Edge. -// 2. Show the overflow in Edge, Firefox, and IE. // button, -input, // 1 -select { // 2 +input { // 1 overflow: visible; } // -// Remove the margin in Safari. -// 1. Remove the margin in Firefox and Safari. -// - -button, -input, -select, -textarea { // 1 - margin: 0; -} - -// -// Remove the inheritence of text transform in Edge, Firefox, and IE. -// 1. Remove the inheritence of text transform in Firefox. +// Remove the inheritance of text transform in Edge, Firefox, and IE. +// 1. Remove the inheritance of text transform in Firefox. // button, @@ -301,28 +294,9 @@ select { // 1 } // -// Change the cursor in all browsers (opinionated). -// - -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} - -// -// Restore the default cursor to disabled elements unset by the previous rule. -// - -[disabled] { - cursor: default; -} - -// // 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. +// 2. Correct the inability to style clickable types in iOS and Safari. // button, @@ -337,8 +311,10 @@ html [type="button"], // 1 // button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } @@ -347,7 +323,9 @@ input::-moz-focus-inner { // button:-moz-focusring, -input:-moz-focusring { +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } @@ -406,19 +384,39 @@ textarea { } // -// Correct the odd appearance of search inputs in Chrome and Safari. +// 1. Correct the odd appearance in Chrome and Safari. +// 2. Correct the outline style in Safari. // [type="search"] { - -webkit-appearance: textfield; + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } // -// Remove the inner padding and cancel buttons in Chrome on OS X and -// Safari on OS X. +// Remove the inner padding and cancel buttons in Chrome and Safari on OS X. // [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +// +// Correct the text style of placeholders in Chrome, Edge, and Safari. +// + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + -webkit-appearance: button; // 1 + font: inherit; // 2 +} diff --git a/scss/_popover.scss b/scss/_popover.scss index 9ea8c1475..86b489a48 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -5,7 +5,7 @@ z-index: $zindex-popover; display: block; max-width: $popover-max-width; - padding: 1px; + 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(); @@ -25,19 +25,22 @@ &.bs-tether-element-attached-bottom { margin-top: -$popover-arrow-width; - .popover-arrow { - bottom: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; + border-bottom-width: 0; + } + + &::before { + bottom: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color; - border-bottom-width: 0; - &::after { - bottom: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-color: $popover-arrow-color; - border-bottom-width: 0; - } + } + + &::after { + bottom: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-top-color: $popover-arrow-color; } } @@ -45,19 +48,22 @@ &.bs-tether-element-attached-left { margin-left: $popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-left-width: 0; + } + + &::before { left: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; - border-left-width: 0; - &::after { - bottom: -$popover-arrow-width; - left: 1px; - content: ""; - border-right-color: $popover-arrow-color; - border-left-width: 0; - } + } + + &::after { + left: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-right-color: $popover-arrow-color; } } @@ -65,19 +71,34 @@ &.bs-tether-element-attached-top { margin-top: $popover-arrow-width; - .popover-arrow { - top: -$popover-arrow-outer-width; + &::before, + &::after { left: 50%; - margin-left: -$popover-arrow-outer-width; border-top-width: 0; + } + + &::before { + top: -$popover-arrow-outer-width; + margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; - &::after { - top: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-width: 0; - border-bottom-color: $popover-arrow-color; - } + } + + &::after { + top: -($popover-arrow-outer-width - 1); + margin-left: -$popover-arrow-width; + border-bottom-color: $popover-title-bg; + } + + // This will remove the popover-title's border just below the arrow + .popover-title::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: 20px; + margin-left: -10px; + content: ""; + border-bottom: 1px solid $popover-title-bg; } } @@ -85,19 +106,22 @@ &.bs-tether-element-attached-right { margin-left: -$popover-arrow-width; - .popover-arrow { + &::before, + &::after { top: 50%; + border-right-width: 0; + } + + &::before { right: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width; - border-right-width: 0; border-left-color: $popover-arrow-outer-color; - &::after { - right: 1px; - bottom: -$popover-arrow-width; - content: ""; - border-right-width: 0; - border-left-color: $popover-arrow-color; - } + } + + &::after { + right: -($popover-arrow-outer-width - 1); + margin-top: -($popover-arrow-outer-width - 1); + border-left-color: $popover-arrow-color; } } } @@ -112,6 +136,10 @@ border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); $offset-border-width: ($border-width / $font-size-root); @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0); + + &:empty { + display: none; + } } .popover-content { @@ -123,21 +151,21 @@ // // .popover-arrow is outer, .popover-arrow::after is inner -.popover-arrow { - &, - &::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } +.popover::before, +.popover::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; } -.popover-arrow { + +.popover::before { + content: ""; border-width: $popover-arrow-outer-width; } -.popover-arrow::after { +.popover::after { content: ""; border-width: $popover-arrow-width; } diff --git a/scss/_print.scss b/scss/_print.scss index b2c93735c..bd41328c2 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -1,4 +1,4 @@ -// scss-lint:disable ImportantRule, QualifyingElement +// scss-lint:disable QualifyingElement // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css @@ -14,7 +14,10 @@ *::before, *::after, *::first-letter, - *::first-line { + p::first-line, + div::first-line, + blockquote::first-line, + li::first-line { // Bootstrap specific; comment out `color` and `background` //color: #000 !important; // Black prints faster: // http://www.sanbeiji.com/archives/953 @@ -45,9 +48,12 @@ //a[href^="#"]::after, //a[href^="javascript:"]::after { - // content: ""; + // content: ""; //} + pre { + white-space: pre-wrap !important; + } pre, blockquote { border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px diff --git a/scss/_progress.scss b/scss/_progress.scss index b2bcb3056..c2364feee 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -26,7 +26,7 @@ // Reset the default appearance appearance: none; // Set overall border radius - @include border-radius($border-radius); + @include border-radius($progress-border-radius); } // Filled-in portion of the bar @@ -37,30 +37,30 @@ } .progress[value]::-moz-progress-bar { background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } .progress[value]::-webkit-progress-value { background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } // Tweaks for full progress bar .progress[value="100"]::-moz-progress-bar { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } .progress[value="100"]::-webkit-progress-value { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } // Unfilled portion of the bar .progress[value]::-webkit-progress-bar { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only .progress[value] { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } @@ -68,7 +68,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes @media screen and (min-width:0\0) { .progress { background-color: $progress-bg; - @include border-radius($border-radius); + @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); } .progress-bar { @@ -76,10 +76,10 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes height: $spacer-y; text-indent: -999rem; // Simulate hiding of value as in native `<progress>` background-color: $progress-bar-color; - @include border-left-radius($border-radius); + @include border-left-radius($progress-border-radius); } .progress[width="100%"] { - @include border-right-radius($border-radius); + @include border-right-radius($progress-border-radius); } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index e30de2c1b..461ca40e6 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,4 +1,4 @@ -// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty +// scss-lint:disable QualifyingElement, DuplicateProperty // Reboot // @@ -15,7 +15,7 @@ // // Heads up! This reset may cause conflicts with some third-party widgets. For // recommendations on resolving such conflicts, see -// http://getbootstrap.com/getting-started/#third-box-sizing. +// https://getbootstrap.com/getting-started/#third-box-sizing. // // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ @@ -33,15 +33,15 @@ html { // Make viewport responsive // // @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/. +// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. // 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) +// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) // and the fix for that involves a snippet of JavaScript to sniff the user agent // and apply some conditional CSS. // -// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. +// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. // // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., // `.class-name { @import "bootstrap"; }`). @@ -171,12 +171,13 @@ a { } } -// And undo these styles for placeholder links/named anchors (without href). +// And undo these styles for placeholder links/named anchors (without href) +// which have not been made explicitly keyboard-focusable (without tabindex). // 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]) { +a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; @@ -246,9 +247,9 @@ img { // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present. // However, they DO support removing the click delay via `touch-action: manipulation`. // See: -// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch +// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch // * http://caniuse.com/#feat=css-touch-action -// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay +// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay a, area, @@ -311,14 +312,9 @@ input, button, select, textarea { - // Remove all `margin`s so our classes don't have to do it themselves. - margin: 0; // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are - // properly inherited. However, `line-height` isn't addressed there. Using this - // ensures we don't need to unnecessarily redeclare the global font stack. + // properly inherited. However, `line-height` isn't inherited there. line-height: inherit; - // iOS adds rounded borders by default - border-radius: 0; } input[type="radio"], diff --git a/scss/_tables.scss b/scss/_tables.scss index d865884ec..aeedf0b69 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -101,7 +101,7 @@ // Inverse styles // -// Same table markup, but inverted color scheme—dark background and light text. +// Same table markup, but inverted color scheme: dark background and light text. .thead-inverse { th { @@ -143,7 +143,7 @@ .table-responsive { display: block; width: 100%; - min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) overflow-x: auto; // TODO: find out if we need this still. @@ -184,7 +184,6 @@ } } - // scss-lint:disable ImportantRule tr { float: left; @@ -194,5 +193,4 @@ border: $table-border-width solid $table-border-color; } } - // scss-lint:enable ImportantRule } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index e8151af07..57ba8cf0c 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -18,10 +18,11 @@ padding: $tooltip-arrow-width 0; margin-top: -$tooltip-margin; - .tooltip-arrow { + .tooltip-inner::before { bottom: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } @@ -31,10 +32,11 @@ padding: 0 $tooltip-arrow-width; margin-left: $tooltip-margin; - .tooltip-arrow { + .tooltip-inner::before { top: 50%; left: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } @@ -44,10 +46,11 @@ padding: $tooltip-arrow-width 0; margin-top: $tooltip-margin; - .tooltip-arrow { + .tooltip-inner::before { top: 0; left: 50%; margin-left: -$tooltip-arrow-width; + content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } @@ -57,10 +60,11 @@ padding: 0 $tooltip-arrow-width; margin-left: -$tooltip-margin; - .tooltip-arrow { + .tooltip-inner::before { top: 50%; right: 0; margin-top: -$tooltip-arrow-width; + content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } @@ -75,13 +79,12 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); -} -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; + &::before { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 87b8ba6da..aef99aeba 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,8 +1,9 @@ @import "utilities/background"; +@import "utilities/borders"; @import "utilities/clearfix"; @import "utilities/display"; @import "utilities/flex"; -@import "utilities/pulls"; +@import "utilities/float"; @import "utilities/screenreaders"; @import "utilities/spacing"; @import "utilities/text"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 2dcfe8b88..e8a18790b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,7 +21,11 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num != null and $prev-num >= $num { + @if $prev-num == null { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $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; @@ -121,7 +125,7 @@ $link-hover-decoration: underline !default; $grid-breakpoints: ( xs: 0, - sm: 544px, + sm: 576px, md: 768px, lg: 992px, xl: 1200px @@ -134,9 +138,9 @@ $grid-breakpoints: ( // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: 576px, + sm: 540px, md: 720px, - lg: 940px, + lg: 960px, xl: 1140px ) !default; @include _assert-ascending($container-max-widths, "$container-max-widths"); @@ -146,15 +150,21 @@ $container-max-widths: ( // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; - +$grid-columns: 12 !default; +$grid-gutter-width-base: 30px !default; +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, + sm: $grid-gutter-width-base, + md: $grid-gutter-width-base, + lg: $grid-gutter-width-base, + xl: $grid-gutter-width-base +) !default; // Typography // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; @@ -323,10 +333,10 @@ $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-bg-focus: $input-bg !default; $input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-focus: $input-color; +$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default; +$input-color-focus: $input-color !default; $input-color-placeholder: #999 !default; @@ -371,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default; $custom-control-active-indicator-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; +$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; + $custom-checkbox-indeterminate-bg: #0074d9 !default; -$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; +$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; +$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default; $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; -$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; +$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default; $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; @@ -387,7 +399,8 @@ $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-indicator-color: #333 !default; +$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='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; @@ -424,23 +437,28 @@ $custom-file-text: ( // Form validation icons -$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; -$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; -$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; +$form-icon-success-color: $brand-success !default; +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; + +$form-icon-warning-color: $brand-warning !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; + +$form-icon-danger-color: $brand-danger !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 160px !default; -$dropdown-padding-y: 5px !default; -$dropdown-margin-top: 2px !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-margin-top: .125rem !default; $dropdown-bg: #fff !default; $dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: #e5e5e5 !default; -$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; @@ -451,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; -$dropdown-item-padding-x: 20px !default; +$dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; @@ -484,16 +502,20 @@ $navbar-divider-padding-y: .425rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-padding-y: .5rem !default; $navbar-dark-color: rgba(255,255,255,.5) !default; $navbar-dark-hover-color: rgba(255,255,255,.75) !default; $navbar-dark-active-color: rgba(255,255,255,1) !default; $navbar-dark-disabled-color: rgba(255,255,255,.25) !default; +$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; $navbar-light-color: rgba(0,0,0,.3) !default; $navbar-light-hover-color: rgba(0,0,0,.6) !default; $navbar-light-active-color: rgba(0,0,0,.8) !default; $navbar-light-disabled-color: rgba(0,0,0,.15) !default; +$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; // Navs @@ -583,7 +605,7 @@ $card-spacer-y: .75rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba(0,0,0,.125) !default; -$card-border-radius-inner: $card-border-radius !default; +$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: #f5f5f5 !default; $card-bg: #fff !default; @@ -612,6 +634,7 @@ $tooltip-arrow-color: $tooltip-bg !default; // Popovers +$popover-inner-padding: 1px !default; $popover-bg: #fff !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; @@ -686,7 +709,7 @@ $modal-sm: 300px !default; // // Define alert colors, border radius, and padding. -$alert-padding: 15px !default; +$alert-padding: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: bold !default; $alert-border-width: $border-width !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 5dc331eb6..40680ca96 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -8,53 +8,13 @@ // Variables // - -// Grid breakpoints -// -// Define the minimum and maximum dimensions at which your layout will change, -// adapting to different screen sizes, for use in media queries. - -$grid-breakpoints: ( - // Extra small screen / phone - xs: 0, - // Small screen / phone - sm: 544px, - // Medium screen / tablet - md: 768px, - // Large screen / desktop - lg: 992px, - // Extra large screen / wide desktop - xl: 1200px -) !default; - - -// Grid containers -// -// Define the maximum width of `.container` for different screen sizes. - -$container-max-widths: ( - sm: 576px, - md: 720px, - lg: 940px, - xl: 1140px -) !default; - - -// Grid columns -// -// Set the number of columns and specify the width of the gutters. - -$grid-columns: 12 !default; -$grid-gutter-width: 1.875rem !default; // 30px - +@import "custom"; +@import "variables"; // // Grid mixins // -@import "custom"; -@import "variables"; - @import "mixins/clearfix"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index f99a722ca..ce61be8eb 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,6 @@ /*! - * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com) + * Bootstrap v4.0.0-alpha.4 (https://getbootstrap.com) + * Copyright 2011-2016 The Bootstrap Authors * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss index ff21ad958..54a734dcc 100644 --- a/scss/mixins/_background-variant.scss +++ b/scss/mixins/_background-variant.scss @@ -2,7 +2,6 @@ @mixin bg-variant($parent, $color) { #{$parent} { - color: #fff !important; background-color: $color !important; } a#{$parent} { diff --git a/scss/mixins/_pulls.scss b/scss/mixins/_float.scss index 6bdff025d..b30cf1468 100644 --- a/scss/mixins/_pulls.scss +++ b/scss/mixins/_float.scss @@ -1,6 +1,6 @@ -@mixin pull-left { +@mixin float-left { float: left !important; } -@mixin pull-right { +@mixin float-right { float: right !important; } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 026e41e23..39851b8f8 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -7,26 +7,20 @@ // Color the label and help text .form-control-feedback, .form-control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline, - &.radio label, - &.checkbox label, - &.radio-inline label, - &.checkbox-inline label, + .form-check-label, + .form-check-inline, .custom-control { color: $color; } + // Set the border and box shadow on specific inputs to match .form-control { border-color: $color; - // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - // border-color: darken($border-color, 10%); - // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - // @include box-shadow($shadow); + @if $enable-rounded { + &:focus { + box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%); + } } } @@ -36,10 +30,6 @@ border-color: $color; background-color: lighten($color, 40%); } - // Optional feedback icon - .form-control-feedback { - color: $color; - } } // Form control focus state @@ -60,8 +50,7 @@ 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; - @include box-shadow($shadow); + @include box-shadow($input-box-shadow-focus); } } diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index cb25be92a..35ccd9221 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -3,26 +3,48 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { +@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) { + // Common properties for all breakpoints + %grid-column { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + + @if $enable-flex { + width: 100%; + } + + @include make-gutters($gutters); + } + $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); + + // Allow columns to stretch full width below their breakpoints + .col-#{$breakpoint} { + @extend %grid-column; + } + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } + } + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns @if $enable-flex { .col-#{$breakpoint} { - position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; - min-height: 1px; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); } } @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - @include make-col($i, $columns, $gutter); + @include make-col($i, $columns); } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 3ba4f43bc..88cbd249a 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -2,7 +2,7 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width) { +@mixin make-container($gutter: $grid-gutter-width-base) { margin-left: auto; margin-right: auto; padding-left: ($gutter / 2); @@ -17,28 +17,60 @@ @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { - max-width: $container-max-width; + width: $container-max-width; + max-width: 100%; } } } -@mixin make-row($gutter: $grid-gutter-width) { +@mixin make-gutters($gutters: $grid-gutter-widths) { + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } +} + +@mixin make-row($gutters: $grid-gutter-widths) { @if $enable-flex { display: flex; flex-wrap: wrap; } @else { @include clearfix(); } - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + margin-right: ($gutter / -2); + margin-left: ($gutter / -2); + } + } } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($gutters: $grid-gutter-widths) { position: relative; - min-height: 1px; - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + min-height: 1px; // Prevent collapsing + + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + @if $enable-flex { + width: 100%; + } + + @each $breakpoint in map-keys($gutters) { + @include media-breakpoint-up($breakpoint) { + $gutter: map-get($gutters, $breakpoint); + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + } + } +} +@mixin make-col($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 3a11254e8..6dd55e705 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -1,14 +1,15 @@ @mixin hover { - @if $enable-hover-media-query { - // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover - // Currently shimmed by https://github.com/twbs/mq4-hover-shim - @media (hover: hover) { - &:hover { @content } - } - } - @else { + // TODO: re-enable along with mq4-hover-shim +// @if $enable-hover-media-query { +// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover +// // Currently shimmed by https://github.com/twbs/mq4-hover-shim +// @media (hover: hover) { +// &:hover { @content } +// } +// } +// @else { &:hover { @content } - } +// } } @mixin hover-focus { diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index 91d2f59ee..c2b45f2ce 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -7,10 +7,12 @@ // // Keep images from scaling beyond the width of their parents. -@mixin img-fluid($display: block) { - display: $display; - max-width: 100%; // Part 1: Set a maximum relative to the parent - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +@mixin img-fluid { + // Part 1: Set a maximum relative to the parent + max-width: 100%; + // Part 2: Override the height to auto, otherwise images will be stretched + // when setting a width and height attribute on the img element. + height: auto; } diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index 6ae65516a..c20858324 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -15,7 +15,7 @@ // Use in conjunction with .sr-only to only display content when it's focused. // -// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 // // Credit: HTML5 Boilerplate diff --git a/scss/mixins/_tab-focus.scss b/scss/mixins/_tab-focus.scss index 7df0ae7ca..f16ed6428 100644 --- a/scss/mixins/_tab-focus.scss +++ b/scss/mixins/_tab-focus.scss @@ -1,9 +1,9 @@ // WebKit-style focus @mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss index 27a4f454e..9cd4b6a4f 100644 --- a/scss/mixins/_text-emphasis.scss +++ b/scss/mixins/_text-emphasis.scss @@ -6,7 +6,7 @@ } a#{$parent} { @include hover-focus { - color: darken($color, 10%); + color: darken($color, 10%) !important; } } } diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index b1589792f..a81dcff2c 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -2,10 +2,6 @@ // Contextual backgrounds // -.bg-inverse { - background-color: $brand-inverse; -} - .bg-faded { background-color: $gray-lightest; } @@ -19,3 +15,5 @@ @include bg-variant('.bg-warning', $brand-warning); @include bg-variant('.bg-danger', $brand-danger); + +@include bg-variant('.bg-inverse', $brand-inverse); diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss new file mode 100644 index 000000000..b2e70aaf5 --- /dev/null +++ b/scss/utilities/_borders.scss @@ -0,0 +1,30 @@ +// +// Border-width +// + +// TBD...? + + +// +// Border-radius +// + +.rounded { + @include border-radius($border-radius); +} +.rounded-top { + @include border-top-radius($border-radius); +} +.rounded-right { + @include border-right-radius($border-radius); +} +.rounded-bottom { + @include border-bottom-radius($border-radius); +} +.rounded-left { + @include border-left-radius($border-radius); +} + +.rounded-circle { + border-radius: 50%; +} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index a61135ce2..502885a81 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -8,6 +8,7 @@ @include media-breakpoint-up($breakpoint) { .flex-#{$breakpoint}-first { order: -1; } .flex-#{$breakpoint}-last { order: 1; } + .flex-#{$breakpoint}-unordered { order: 0; } } // Alignment for every item diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss new file mode 100644 index 000000000..eea34bff2 --- /dev/null +++ b/scss/utilities/_float.scss @@ -0,0 +1,13 @@ +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .float-#{$breakpoint}-left { + @include float-left(); + } + .float-#{$breakpoint}-right { + @include float-right(); + } + .float-#{$breakpoint}-none { + float: none !important; + } + } +} diff --git a/scss/utilities/_pulls.scss b/scss/utilities/_pulls.scss deleted file mode 100644 index 7fec56c9a..000000000 --- a/scss/utilities/_pulls.scss +++ /dev/null @@ -1,13 +0,0 @@ -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .pull-#{$breakpoint}-left { - @include pull-left(); - } - .pull-#{$breakpoint}-right { - @include pull-right(); - } - .pull-#{$breakpoint}-none { - float: none !important; - } - } -} diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index b7ff044b6..99c98f87b 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -1,10 +1,11 @@ -// Width +// Width and height .w-100 { width: 100% !important; } +.h-100 { height: 100% !important; } // Margin and Padding -.m-x-auto { +.mx-auto { margin-right: auto !important; margin-left: auto !important; } @@ -14,18 +15,18 @@ $length-x: map-get($lengths, x); $length-y: map-get($lengths, y); - .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; } // Axes - .#{$abbrev}-x-#{$size} { + .#{$abbrev}x-#{$size} { #{$prop}-right: $length-x !important; #{$prop}-left: $length-x !important; } - .#{$abbrev}-y-#{$size} { + .#{$abbrev}y-#{$size} { #{$prop}-top: $length-y !important; #{$prop}-bottom: $length-y !important; } diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 901f77144..b4468e98d 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -32,6 +32,10 @@ // Contextual colors +.text-white { + color: #fff !important; +} + @include text-emphasis-variant('.text-muted', $text-muted); @include text-emphasis-variant('.text-primary', $brand-primary); @@ -44,6 +48,10 @@ @include text-emphasis-variant('.text-danger', $brand-danger); +// Font color + +@include text-emphasis-variant('.text-gray-dark', $gray-dark); + // Misc .text-hide { diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss index 63891677e..cdb142869 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -1,5 +1,3 @@ -// scss-lint:disable ImportantRule - // // Visibility utilities // |