diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-10-22 09:20:53 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-10-22 09:20:53 +0300 |
commit | afd171105704c314bf699810875c72a612988a72 (patch) | |
tree | c6045a971c84ef6eadfe7d5b90044bd33f2b7cbe /assets/stylesheets | |
parent | d527714693edb72688eb8c239228b2db66e56ded (diff) |
rake update[v4.0.0-alpha.5]
Diffstat (limited to 'assets/stylesheets')
35 files changed, 462 insertions, 269 deletions
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index e088128..b17b05c 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com) + * Bootstrap v4.0.0-alpha.5 (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/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss index 4331771..260ce20 100644 --- a/assets/stylesheets/bootstrap/_alert.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -3,7 +3,7 @@ // .alert { - padding: $alert-padding; + padding: $alert-padding-y $alert-padding-x; margin-bottom: $spacer-y; border: $alert-border-width solid transparent; @include border-radius($alert-border-radius); @@ -26,13 +26,13 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding * 2); + padding-right: ($alert-padding-x * 2); // Adjust close link position .close { position: relative; top: -.125rem; - right: -$alert-padding; + right: -$alert-padding-x; color: inherit; } } diff --git a/assets/stylesheets/bootstrap/_animation.scss b/assets/stylesheets/bootstrap/_animation.scss index edd7147..f0dfff8 100644 --- a/assets/stylesheets/bootstrap/_animation.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index 60e9f7a..0e63ecc 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 6fa77e6..01a5733 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_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,6 +315,7 @@ column-gap: $card-columns-sm-up-column-gap; .card { + display: inline-block; // Don't let them vertically span multiple columns width: 100%; // Don't let them exceed the column width } } diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index a5f0bdf..e74f5c7 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index e696d28..47702e7 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 263a8bc..be19a07 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss index 9894269..3cdedc4 100644 --- a/assets/stylesheets/bootstrap/_images.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index d7e2ec5..1e0d112 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index 1b5bf0f..e53ab34 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index 83a1335..c326d56 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 881af0d..7dc2a2b 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -69,26 +69,23 @@ .navbar-brand { float: left; - padding-top: $navbar-brand-padding-y; + padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; margin-right: 1rem; font-size: $font-size-lg; + line-height: inherit; @include hover-focus { text-decoration: none; } - - > img { - display: block; - } } .navbar-divider { float: left; width: $border-width; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $navbar-divider-padding-y; + padding-bottom: $navbar-divider-padding-y; margin-right: $navbar-padding-x; margin-left: $navbar-padding-x; overflow: hidden; @@ -99,24 +96,74 @@ } +// Navbar text +// +// + +.navbar-text { + display: inline-block; + padding-top: .425rem; + padding-bottom: .425rem; +} + + // Navbar toggle // // Custom button for toggling the `.navbar-collapse`, powered by the collapse // Bootstrap JavaScript plugin. .navbar-toggler { - padding: .5rem .75rem; - font-size: $font-size-lg; + 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($btn-border-radius); + @include border-radius($navbar-toggler-border-radius); @include hover-focus { text-decoration: none; } } +// scss-lint:disable ImportantRule +.navbar-toggleable { + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + + &-#{$breakpoint} { + @include clearfix; + + @include media-breakpoint-down($breakpoint) { + .navbar-brand { + display: block; + float: none; + margin-top: .5rem; + margin-right: 0; + } + + .navbar-nav { + margin-top: .5rem; + margin-bottom: .5rem; + + .dropdown-menu { + position: static; + float: none; + } + } + } + + @include media-breakpoint-up($next) { + display: block; + } + } + } +} +// scss-lint:enable ImportantRule + + // Navigation // // Custom navbar navigation built on the base `.nav` styles. @@ -143,7 +190,8 @@ // Dark links against a light background .navbar-light { - .navbar-brand { + .navbar-brand, + .navbar-toggler { color: $navbar-light-active-color; @include hover-focus { @@ -170,6 +218,11 @@ } } + .navbar-toggler { + background-image: $navbar-light-toggler-bg; + border-color: $navbar-light-toggler-border; + } + .navbar-divider { background-color: rgba(0,0,0,.075); } @@ -177,7 +230,8 @@ // White links against a dark background .navbar-dark { - .navbar-brand { + .navbar-brand, + .navbar-toggler { color: $navbar-dark-active-color; @include hover-focus { @@ -204,6 +258,11 @@ } } + .navbar-toggler { + background-image: $navbar-dark-toggler-bg; + border-color: $navbar-dark-toggler-border; + } + .navbar-divider { background-color: rgba(255,255,255,.075); } diff --git a/assets/stylesheets/bootstrap/_normalize.scss b/assets/stylesheets/bootstrap/_normalize.scss index 8a74836..827b7f3 100644 --- a/assets/stylesheets/bootstrap/_normalize.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss index 6e6fe3c..86b489a 100644 --- a/assets/stylesheets/bootstrap/_popover.scss +++ b/assets/stylesheets/bootstrap/_popover.scss @@ -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; } } } @@ -127,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/assets/stylesheets/bootstrap/_print.scss b/assets/stylesheets/bootstrap/_print.scss index 8455660..bd41328 100644 --- a/assets/stylesheets/bootstrap/_print.scss +++ b/assets/stylesheets/bootstrap/_print.scss @@ -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/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 1a1e472..461ca40 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -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"; }`). @@ -247,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, @@ -312,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/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index 235ec98..aeedf0b 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -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. diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index e8151af..57ba8cf 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index 87b8ba6..c63e506 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_utilities.scss @@ -1,8 +1,10 @@ +@import "utilities/align"; @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/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 05c0088..13432f2 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -125,7 +125,7 @@ $link-hover-decoration: underline !default; $grid-breakpoints: ( xs: 0, - sm: 544px, + sm: 576px, md: 768px, lg: 992px, xl: 1200px @@ -138,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"); @@ -150,9 +150,15 @@ $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 // @@ -327,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; @@ -375,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; @@ -391,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; @@ -428,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; @@ -455,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; @@ -481,18 +495,31 @@ $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-divider-padding-y: .425rem !default; + +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-padding-y: .5rem !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-dark-toggler-border: rgba(255,255,255,.1) !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-color: rgba(0,0,0,.5) !default; +$navbar-light-hover-color: rgba(0,0,0,.7) !default; +$navbar-light-active-color: rgba(0,0,0,.9) !default; +$navbar-light-disabled-color: rgba(0,0,0,.3) !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; +$navbar-light-toggler-border: rgba(0,0,0,.1) !default; // Navs @@ -581,7 +608,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; @@ -685,7 +712,8 @@ $modal-sm: 300px !default; // // Define alert colors, border radius, and padding. -$alert-padding: 1rem !default; +$alert-padding-x: 1.25rem !default; +$alert-padding-y: .75rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: bold !default; $alert-border-width: $border-width !default; diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss index ff21ad9..54a734d 100644 --- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_pulls.scss b/assets/stylesheets/bootstrap/mixins/_float.scss index 6bdff02..b30cf14 100644 --- a/assets/stylesheets/bootstrap/mixins/_pulls.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index b281dd7..39851b8 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -12,15 +12,15 @@ .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%); + } } } @@ -30,10 +30,6 @@ border-color: $color; background-color: lighten($color, 40%); } - // Optional feedback icon - .form-control-feedback { - color: $color; - } } // Form control focus state @@ -54,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/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index 8b17d78..35ccd92 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -3,26 +3,29 @@ // 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; - // Inner gutter via padding - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); @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; @@ -33,13 +36,9 @@ // 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: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); } } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index fa9b399..88cbd24 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/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,27 +17,42 @@ @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-ready($gutter: $grid-gutter-width) { +@mixin make-col-ready($gutters: $grid-gutter-widths) { position: relative; min-height: 1px; // Prevent collapsing - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values @@ -45,6 +60,14 @@ @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) { diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss index 4a648a5..6dd55e7 100644 --- a/assets/stylesheets/bootstrap/mixins/_hover.scss +++ b/assets/stylesheets/bootstrap/mixins/_hover.scss @@ -1,7 +1,7 @@ @mixin hover { // TODO: re-enable along with mq4-hover-shim // @if $enable-hover-media-query { -// // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover +// // 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 } diff --git a/assets/stylesheets/bootstrap/mixins/_image.scss b/assets/stylesheets/bootstrap/mixins/_image.scss index 91d2f59..c2b45f2 100644 --- a/assets/stylesheets/bootstrap/mixins/_image.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss index 6ae6551..c208583 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/utilities/_align.scss b/assets/stylesheets/bootstrap/utilities/_align.scss new file mode 100644 index 0000000..4886e05 --- /dev/null +++ b/assets/stylesheets/bootstrap/utilities/_align.scss @@ -0,0 +1,6 @@ +.align-baseline { vertical-align: baseline !important; } // Browser default +.align-top { vertical-align: top !important; } +.align-middle { vertical-align: middle !important; } +.align-bottom { vertical-align: bottom !important; } +.align-text-bottom { vertical-align: text-bottom !important; } +.align-text-top { vertical-align: text-top !important; } diff --git a/assets/stylesheets/bootstrap/utilities/_borders.scss b/assets/stylesheets/bootstrap/utilities/_borders.scss new file mode 100644 index 0000000..b2e70aa --- /dev/null +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/utilities/_float.scss b/assets/stylesheets/bootstrap/utilities/_float.scss new file mode 100644 index 0000000..eea34bf --- /dev/null +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/utilities/_pulls.scss b/assets/stylesheets/bootstrap/utilities/_pulls.scss deleted file mode 100644 index 7fec56c..0000000 --- a/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/utilities/_spacing.scss b/assets/stylesheets/bootstrap/utilities/_spacing.scss index b7ff044..99c98f8 100644 --- a/assets/stylesheets/bootstrap/utilities/_spacing.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/utilities/_text.scss b/assets/stylesheets/bootstrap/utilities/_text.scss index 901f771..b4468e9 100644 --- a/assets/stylesheets/bootstrap/utilities/_text.scss +++ b/assets/stylesheets/bootstrap/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 { |