diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-05-17 01:19:31 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-05-17 01:19:31 +0300 |
commit | f6a7b7bf41ea628b61693597be299c4257f93079 (patch) | |
tree | f4069a43a528fcd6b405f0e1a06133f2eddeabbe /assets/stylesheets | |
parent | e39dac2c6684e478a6ace2f50259b29dcce781ea (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets')
18 files changed, 402 insertions, 425 deletions
diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index ff6c33f..60e9f7a 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -104,16 +104,26 @@ // Split button dropdowns // -// Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-right: $split-btn-dropdown-toggle-padding-x; - padding-left: $split-btn-dropdown-toggle-padding-x; +.btn + .dropdown-toggle-split { + padding-right: $btn-padding-x * .75; + padding-left: $btn-padding-x * .75; + + &::after { + margin-left: 0; + } } -.btn-group > .btn-lg + .dropdown-toggle { - padding-right: $split-btn-lg-dropdown-toggle-padding-x; - padding-left: $split-btn-lg-dropdown-toggle-padding-x; + +.btn-sm + .dropdown-toggle-split { + padding-right: $btn-padding-x-sm * .75; + padding-left: $btn-padding-x-sm * .75; } +.btn-lg + .dropdown-toggle-split { + padding-right: $btn-padding-x-lg * .75; + padding-left: $btn-padding-x-lg * .75; +} + + // The clickable button for toggling the menu // Remove the gradient and set the same inset shadow as the :active state .btn-group.open .dropdown-toggle { diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 856d6c6..a419d4d 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -9,8 +9,7 @@ background-color: $card-bg; // border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); - // Doesn't use mixin so that cards always have a "border" - box-shadow: inset 0 0 0 $card-border-width $card-border-color; + border: $card-border-width solid $card-border-color; } .card-block { @@ -49,20 +48,16 @@ } } -@if $enable-rounded { - .card { - > .list-group:first-child { - .list-group-item:first-child { - border-top-left-radius: $card-border-radius; - border-top-right-radius: $card-border-radius; - } +.card { + > .list-group:first-child { + .list-group-item:first-child { + @include border-top-radius($card-border-radius); } + } - > .list-group:last-child { - .list-group-item:last-child { - border-bottom-right-radius: $card-border-radius; - border-bottom-left-radius: $card-border-radius; - } + > .list-group:last-child { + .list-group-item:last-child { + @include border-bottom-radius($card-border-radius); } } } @@ -76,9 +71,7 @@ @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; - // border-bottom: $card-border-width solid $card-border-color; - // Doesn't use mixin so that cards always have a "border" - box-shadow: inset 0 0 0 $card-border-width $card-border-color; + border-bottom: $card-border-width solid $card-border-color; &:first-child { @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); @@ -89,9 +82,7 @@ @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; - // border-top: $card-border-width solid $card-border-color; - // Doesn't use mixin so that cards always have a "border" - box-shadow: inset 0 0 0 $card-border-width $card-border-color; + border-top: $card-border-width solid $card-border-color; &:last-child { @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); @@ -108,10 +99,6 @@ margin-bottom: -$card-spacer-y; margin-left: -($card-spacer-x / 2); border-bottom: 0; - - .nav-item { - margin-bottom: 0; - } } .card-header-pills { @@ -189,23 +176,28 @@ right: 0; bottom: 0; left: 0; - padding: 1.25rem; + padding: $card-img-overlay-padding; } // Card image caps .card-img-top { - @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + @include border-top-radius($card-border-radius-inner); } .card-img-bottom { - @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + @include border-bottom-radius($card-border-radius-inner); } -// // Card set // +// Heads up! We do some funky style resetting here for margins across our two +// variations (one flex, one table). Individual cards have margin-bottom by +// default, but they're ignored due to table styles. For a consistent design, +// we've done the same to the flex variation. +// +// Those changes are noted by `// Margin balancing`. @if $enable-flex { @include media-breakpoint-up(sm) { @@ -213,11 +205,13 @@ display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; + margin-bottom: $card-spacer-y; // Margin balancing margin-left: -$card-deck-margin; .card { flex: 1 0 0; margin-right: $card-deck-margin; + margin-bottom: 0; // Margin balancing margin-left: $card-deck-margin; } } @@ -227,12 +221,14 @@ $space-between-cards: (2 * $card-deck-margin); .card-deck { display: table; + width: 100%; + margin-bottom: $card-spacer-y; // Margin balancing table-layout: fixed; border-spacing: $space-between-cards 0; .card { display: table-cell; - width: 1%; + margin-bottom: 0; // Margin balancing vertical-align: top; } } diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index 2ff886a..9386983 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -125,19 +125,19 @@ top: 50%; z-index: 5; display: inline-block; - width: 20px; - height: 20px; - margin-top: -10px; + width: $carousel-icon-width; + height: $carousel-icon-width; + margin-top: -($carousel-icon-width / 2); font-family: serif; line-height: 1; } .icon-prev { left: 50%; - margin-left: -10px; + margin-left: -($carousel-icon-width / 2); } .icon-next { right: 50%; - margin-right: -10px; + margin-right: -($carousel-icon-width / 2); } .icon-prev { diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index 371945c..a5f0bdf 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -159,6 +159,22 @@ border-color: $custom-select-focus-border-color; outline: none; @include box-shadow($custom-select-focus-box-shadow); + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // supress the default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } + } + + &:disabled { + color: $custom-select-disabled-color; + cursor: $cursor-disabled; + background-color: $custom-select-disabled-bg; } // Hides the default caret in IE11 diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index 47fc204..e696d28 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -10,8 +10,7 @@ display: inline-block; width: 0; height: 0; - margin-right: .25rem; - margin-left: .25rem; + margin-left: $caret-width; vertical-align: middle; content: ""; border-top: $caret-width solid; diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 9a031c3..263a8bc 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -60,6 +60,16 @@ select.form-control { &:not([size]):not([multiple]) { height: $input-height; } + + &:focus::-ms-value { + // Suppress the nested default white text on blue background highlight given to + // the selected option text when the (still closed) <select> receives focus + // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to + // match the appearance of the native widget. + // See https://github.com/twbs/bootstrap/issues/19398. + color: $input-color; + background-color: $input-bg; + } } // Make file inputs better match text inputs by forcing them to new lines. @@ -75,56 +85,39 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. -.form-control-label { - padding: $input-padding-y $input-padding-x; +.col-form-label { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; // Override the `<label>` default } +.col-form-label-lg { + padding-top: $input-padding-y-lg; + padding-bottom: $input-padding-y-lg; + font-size: $font-size-lg; +} + +.col-form-label-sm { + padding-top: $input-padding-y-sm; + padding-bottom: $input-padding-y-sm; + font-size: $font-size-sm; +} + + // // Legends // // For use with horizontal and inline forms, when you need the legend text to // be the same size as regular labels, and to align with the form controls. -.form-control-legend { - padding: $input-padding-y $input-padding-x; +.col-form-legend { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; font-size: $font-size-base; } -// Todo: clear this up - -// Special styles for iOS temporal inputs -// -// In Mobile Safari, setting `display: block` on temporal inputs causes the -// text within the input to become vertically misaligned. As a workaround, we -// set a pixel line-height that matches the given height of the input, but only -// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 -// -// Note that as of 8.3, iOS doesn't support `week`. - -_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/ -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - &.form-control { - line-height: $input-height; - } - - &.input-sm, - .input-group-sm &.form-control { - line-height: $input-height-sm; - } - - &.input-lg, - .input-group-lg &.form-control { - line-height: $input-height-lg; - } -} - - // Static form control text // // Apply class to an element to make any string of text align with labels in a @@ -160,12 +153,24 @@ input[type="month"] { @include border-radius($input-border-radius-sm); } +select.form-control-sm { + &:not([size]):not([multiple]) { + height: $input-height-sm; + } +} + .form-control-lg { padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); } +select.form-control-lg { + &:not([size]):not([multiple]) { + height: $input-height-lg; + } +} + // Form groups // @@ -176,94 +181,77 @@ input[type="month"] { margin-bottom: $form-group-margin-bottom; } +.form-text { + display: block; + margin-top: ($spacer * .25); +} + // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. -.radio, -.checkbox { +.form-check { position: relative; display: block; - // margin-top: ($spacer * .75); margin-bottom: ($spacer * .75); - label { - padding-left: 1.25rem; - margin-bottom: 0; - cursor: pointer; + // Move up sibling radios or checkboxes for tighter spacing + + .form-check { + margin-top: -.25rem; + } - // When there's no labels, don't position the input. - input:only-child { - position: static; + &.disabled { + .form-check-label { + color: $text-muted; + cursor: $cursor-disabled; } } } -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { + +.form-check-label { + padding-left: 1.25rem; + margin-bottom: 0; // Override default `<label>` bottom margin + cursor: pointer; +} + +.form-check-input { position: absolute; margin-top: .25rem; - // margin-top: 4px \9; margin-left: -1.25rem; -} -.radio + .radio, -.checkbox + .checkbox { - // Move up sibling radios or checkboxes for tighter spacing - margin-top: -.25rem; + &:only-child { + position: static; + } } // Radios and checkboxes on same line -.radio-inline, -.checkbox-inline { +.form-check-inline { position: relative; display: inline-block; padding-left: 1.25rem; - margin-bottom: 0; + margin-bottom: 0; // Override default `<label>` bottom margin vertical-align: middle; cursor: pointer; -} -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-top: 0; - margin-left: .75rem; -} -// Apply same disabled cursor tweak as for inputs -// Some special care is needed because <label>s don't inherit their parent's `cursor`. -// -// Note: Neither radios nor checkboxes can be readonly. -input[type="radio"], -input[type="checkbox"] { - &:disabled, - &.disabled { - cursor: $cursor-disabled; + + .form-check-inline { + margin-left: .75rem; } -} -// These classes are used directly on <label>s -.radio-inline, -.checkbox-inline { + &.disabled { cursor: $cursor-disabled; } } -// These classes are used on elements with <label> descendants -.radio, -.checkbox { - &.disabled { - label { - cursor: $cursor-disabled; - } - } -} // Form control feedback states // // Apply contextual and semantic states to individual form controls. +.form-control-feedback { + margin-top: ($spacer * .25); +} + .form-control-success, .form-control-warning, .form-control-danger { @@ -299,84 +287,6 @@ input[type="checkbox"] { } - - -// .form-control-success { -// background-image: $form-icon-success; -// border-color: $brand-success; -// } -// -// .form-control-warning { -// background-image: $form-icon-warning; -// border-color: $brand-warning; -// } -// -// .form-control-error { -// background-image: $form-icon-danger; -// border-color: $brand-danger; -// } - - -// .has-feedback { -// // Enable absolute positioning -// position: relative; -// -// // Ensure icons don't overlap text -// .form-control { -// padding-right: ($input-height * 1.25); -// } -// } -// // Feedback icon -// .form-control-feedback { -// position: absolute; -// top: 0; -// right: 0; -// z-index: 2; // Ensure icon is above input groups -// display: block; -// width: $input-height; -// height: $input-height; -// line-height: $input-height; -// text-align: center; -// pointer-events: none; -// } -// .input-lg + .form-control-feedback, -// .input-group-lg + .form-control-feedback { -// width: $input-height-lg; -// height: $input-height-lg; -// line-height: $input-height-lg; -// } -// .input-sm + .form-control-feedback, -// .input-group-sm + .form-control-feedback { -// width: $input-height-sm; -// height: $input-height-sm; -// line-height: $input-height-sm; -// } -// -// // Form validation states -// .has-success { -// @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); -// } -// .has-warning { -// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); -// } -// .has-danger { -// @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); -// } -// -// // Reposition feedback icon if input has visible label above -// .has-feedback label { -// -// ~ .form-control-feedback { -// // TODO: redo this since we nuked the `$line-height-computed` -// top: 0; // Height of the `label` and its margin -// } -// -// &.sr-only ~ .form-control-feedback { -// top: 0; -// } -// } - - // Inline forms // // Make forms appear inline(-block) by adding the `.form-inline` class. Inline @@ -432,19 +342,16 @@ input[type="checkbox"] { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. - .radio, - .checkbox { + .form-check { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; - - label { - padding-left: 0; - } } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { + .form-check-label { + padding-left: 0; + } + .form-check-input { position: relative; margin-left: 0; } diff --git a/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss index d17006d..9894269 100644 --- a/assets/stylesheets/bootstrap/_images.scss +++ b/assets/stylesheets/bootstrap/_images.scss @@ -19,7 +19,7 @@ padding: $thumbnail-padding; background-color: $thumbnail-bg; border: $thumbnail-border-width solid $thumbnail-border-color; - border-radius: $thumbnail-border-radius; + @include border-radius($thumbnail-border-radius); transition: all .2s ease-in-out; @include box-shadow($thumbnail-box-shadow); diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index 6bb09fd..640956c 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -65,7 +65,7 @@ display: block; padding: $nav-link-padding; border: $nav-tabs-border-width solid transparent; - @include border-radius($border-radius $border-radius 0 0); + @include border-top-radius($nav-tabs-border-radius); @include hover-focus { border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 85a3697..6c4e9ef 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -86,7 +86,7 @@ .navbar-divider { float: left; - width: 1px; + width: $border-width; padding-top: .425rem; padding-bottom: .425rem; margin-right: $navbar-padding-x; diff --git a/assets/stylesheets/bootstrap/_normalize.scss b/assets/stylesheets/bootstrap/_normalize.scss index 93dd452..8a74836 100644 --- a/assets/stylesheets/bootstrap/_normalize.scss +++ b/assets/stylesheets/bootstrap/_normalize.scss @@ -1,9 +1,8 @@ -/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ // -// 1. Set default font family to sans-serif. -// 2. Prevent iOS and IE text size adjust after device orientation change, -// without disabling user zoom. +// 1. Change the default font family in all browsers (opinionated). +// 2. Prevent adjustments of font size after orientation changes in IE and iOS. // html { @@ -13,7 +12,7 @@ html { } // -// Remove default margin. +// Remove the margin in all browsers (opinionated). // body { @@ -24,43 +23,39 @@ body { // ========================================================================== // -// Correct `block` display not defined for any HTML5 element in IE 8/9. -// Correct `block` display not defined for `details` or `summary` in IE 10/11 -// and Firefox. -// Correct `block` display not defined for `main` in IE 11. +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// 2. Add the correct display in IE. // article, aside, -details, +details, // 1 figcaption, figure, footer, header, -main, +main, // 2 menu, nav, section, -summary { +summary { // 1 display: block; } // -// 1. Correct `inline-block` display not defined in IE 8/9. -// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// Add the correct display in IE 9-. // audio, canvas, progress, video { - display: inline-block; // 1 - vertical-align: baseline; // 2 + display: inline-block; } // -// Prevent modern browsers from displaying `audio` without controls. -// Remove excess height in iOS 5 devices. +// Add the correct display in iOS 4-7. // audio:not([controls]) { @@ -69,12 +64,20 @@ audio:not([controls]) { } // -// Address `[hidden]` styling not present in IE 8/9/10. -// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// Add the correct vertical alignment in Chrome, Firefox, and Opera. // -[hidden], -template { +progress { + vertical-align: baseline; +} + +// +// Add the correct display in IE 10-. +// 1. Add the correct display in IE. +// + +template, // 2 +[hidden] { display: none; } @@ -82,7 +85,7 @@ template { // ========================================================================== // -// Remove the gray background color from active links in IE 10. +// Remove the gray background on active links in IE 10. // a { @@ -90,41 +93,49 @@ a { } // -// Improve readability of focused elements when they are also in an -// active/hover state. +// Remove the outline on focused links when they are also active or hovered +// in all browsers (opinionated). // -a { - &:active { - outline: 0; - } - &:hover { - outline: 0; - } +a:active, +a:hover { + outline-width: 0; } // Text-level semantics // ========================================================================== // -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // abbr[title] { - border-bottom: 1px dotted; + border-bottom: none; // 1 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 } // -// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// Prevent the duplicate application of `bolder` by the next rule in Safari 6. // b, strong { - font-weight: bold; + font-weight: inherit; +} + +// +// Add the correct font weight in Chrome, Edge, and Safari. +// + +b, +strong { + font-weight: bolder; } // -// Address styling not present in Safari and Chrome. +// Add the correct font style in Android 4.3-. // dfn { @@ -132,8 +143,8 @@ dfn { } // -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari, and Chrome. +// Correct the font size and margin on `h1` elements within `section` and +// `article` contexts in Chrome, Firefox, and Safari. // h1 { @@ -142,16 +153,16 @@ h1 { } // -// Address styling not present in IE 8/9. +// Add the correct background and color in IE 9-. // mark { - background: #ff0; + background-color: #ff0; color: #000; } // -// Address inconsistent and variable font size in all browsers. +// Add the correct font size in all browsers. // small { @@ -159,7 +170,8 @@ small { } // -// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. // sub, @@ -170,27 +182,27 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + // Embedded content // ========================================================================== // -// Remove border when inside `a` element in IE 8/9/10. +// Remove the border on images inside links in IE 10-. // img { - border: 0; + border-style: none; } // -// Correct overflow not hidden in IE 9/10/11. +// Hide the overflow in IE. // svg:not(:root) { @@ -201,177 +213,146 @@ svg:not(:root) { // ========================================================================== // -// Address margin not present in IE 8/9 and Safari. +// 1. Correct the inheritance and scaling of font size in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. // -figure { - margin: 1em 40px; -} - -// -// Address differences between Firefox and other browsers. -// - -hr { - box-sizing: content-box; - height: 0; +code, +kbd, +pre, +samp { + font-family: monospace, monospace; // 1 + font-size: 1em; // 2 } // -// Contain overflow in all browsers. +// Add the correct margin in IE 8. // -pre { - overflow: auto; +figure { + margin: 1em 40px; } // -// Address odd `em`-unit font size rendering in all browsers. +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. // -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 } // Forms // ========================================================================== // -// Known limitation: by default, Chrome and Safari on OS X allow very limited -// styling of `select`, unless a `border` property is set. -// - -// -// 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. -// 2. Correct font properties not being inherited. -// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// Change font properties to `inherit` in all browsers (opinionated). // button, input, -optgroup, select, textarea { - color: inherit; // 1 - font: inherit; // 2 - margin: 0; // 3 + font: inherit; } // -// Address `overflow` set to `hidden` in IE 8/9/10/11. +// Restore the font weight unset by the previous rule. // -button { - overflow: visible; +optgroup { + font-weight: bold; } // -// Address inconsistent `text-transform` inheritance for `button` and `select`. -// All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. -// Correct `select` style inheritance in Firefox. +// Show the overflow in IE. +// 1. Show the overflow in Edge. +// 2. Show the overflow in Edge, Firefox, and IE. // button, -select { - text-transform: none; +input, // 1 +select { // 2 + overflow: visible; } // -// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` -// and `video` controls. -// 2. Correct inability to style clickable `input` types in iOS. -// 3. Improve usability and consistency of cursor style between image-type -// `input` and others. +// Remove the margin in Safari. +// 1. Remove the margin in Firefox and Safari. // button, -html input[type="button"], // 1 -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 -} - -// -// Re-set default cursor for disabled elements. -// - -button[disabled], -html input[disabled] { - cursor: default; +input, +select, +textarea { // 1 + margin: 0; } // -// Remove inner padding and border in Firefox 4+. +// Remove the inheritence of text transform in Edge, Firefox, and IE. +// 1. Remove the inheritence of text transform in Firefox. // -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +button, +select { // 1 + text-transform: none; } // -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// Change the cursor in all browsers (opinionated). // -input { - line-height: normal; +button, +[type="button"], +[type="reset"], +[type="submit"] { + cursor: pointer; } // -// It's recommended that you don't attempt to style these elements. -// Firefox's implementation doesn't respect box-sizing, padding, or width. -// -// 1. Address box sizing set to `content-box` in IE 8/9/10. -// 2. Remove excess padding in IE 8/9/10. +// Restore the default cursor to disabled elements unset by the previous rule. // -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 +[disabled] { + cursor: default; } // -// Fix the cursor style for Chrome's increment/decrement buttons. For certain -// `font-size` values of the `input`, it causes the cursor style of the -// decrement button to change from `default` to `text`. +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS. // -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 } // -// Address `appearance` set to `searchfield` in Safari and Chrome. +// Remove the inner border and padding in Firefox. // -input[type="search"] { - -webkit-appearance: textfield; +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } // -// Remove inner padding and search cancel button in Safari and Chrome on OS X. -// Safari (but not Chrome) clips the cancel button when the search input has -// padding (and `textfield` appearance). +// Restore the focus styles unset by the previous rule. // -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +button:-moz-focusring, +input:-moz-focusring { + outline: 1px dotted ButtonText; } // -// Define consistent border, margin, and padding. +// Change the border, margin, and padding in all browsers (opinionated). // fieldset { @@ -381,17 +362,23 @@ fieldset { } // -// 1. Correct `color` not being inherited in IE 8/9/10/11. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +// 3. Remove the padding so developers are not caught out when they zero out +// `fieldset` elements in all browsers. // legend { - border: 0; // 1 - padding: 0; // 2 + box-sizing: border-box; // 1 + color: inherit; // 2 + display: table; // 1 + max-width: 100%; // 1 + padding: 0; // 3 + white-space: normal; // 1 } // -// Remove default vertical scrollbar in IE 8/9/10/11. +// Remove the default vertical scrollbar in IE. // textarea { @@ -399,27 +386,39 @@ textarea { } // -// Don't inherit the `font-weight` (applied by a rule above). -// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// 1. Add the correct box sizing in IE 10-. +// 2. Remove the padding in IE 10-. // -optgroup { - font-weight: bold; +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 } -// Tables -// ========================================================================== +// +// Correct the cursor style of increment and decrement buttons in Chrome. +// + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} // -// Remove most spacing between table cells. +// Correct the odd appearance of search inputs in Chrome and Safari. // -table { - border-collapse: collapse; - border-spacing: 0; +[type="search"] { + -webkit-appearance: textfield; } -td, -th { - padding: 0; +// +// Remove the inner padding and cancel buttons in Chrome on OS X and +// Safari on OS X. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss index 9ea8c14..6e6fe3c 100644 --- a/assets/stylesheets/bootstrap/_popover.scss +++ b/assets/stylesheets/bootstrap/_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(); @@ -112,6 +112,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 { diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 4906cb4..02c579d 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -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; @@ -200,6 +201,8 @@ pre { margin-top: 0; // Reset browser default of `1em` to use `rem`s margin-bottom: 1rem; + // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets + overflow: auto; } @@ -266,6 +269,8 @@ textarea { // table { + // No longer part of Normalize since v4 + border-collapse: collapse; // Reset for nesting within parents with `background-color`. background-color: $table-bg; } @@ -317,6 +322,29 @@ textarea { border-radius: 0; } +input[type="radio"], +input[type="checkbox"] { + // Apply a disabled cursor for radios and checkboxes. + // + // Note: Neither radios nor checkboxes can be readonly. + &:disabled { + cursor: $cursor-disabled; + } +} + + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + // Remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // + // Bug report: https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + textarea { // Textareas should really only resize vertically so they don't break their (horizontal) containers. resize: vertical; @@ -341,7 +369,6 @@ legend { margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; -// border: 0; } input[type="search"] { diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index c04e7c9..d865884 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -99,24 +99,9 @@ @include table-row-variant(danger, $state-danger-bg); -// Responsive tables +// Inverse styles // -// Wrap your tables in `.table-responsive` and we'll make them mobile friendly -// by enabling horizontal scrolling. Only applies <768px. Everything above that -// will display normally. - -.table-responsive { - display: block; - width: 100%; - min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) - overflow-x: auto; - - // TODO: find out if we need this still. - // - // border: $table-border-width solid $table-border-color; - // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 -} - +// Same table markup, but inverted color scheme—dark background and light text. .thead-inverse { th { @@ -124,6 +109,7 @@ background-color: $gray-dark; } } + .thead-default { th { color: $gray; @@ -135,15 +121,35 @@ color: $gray-lighter; background-color: $gray-dark; - &.table-bordered { - border: 0; - } - th, td, thead th { border-color: $gray; } + + &.table-bordered { + border: 0; + } +} + + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + display: block; + width: 100%; + min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + overflow-x: auto; + + // TODO: find out if we need this still. + // + // border: $table-border-width solid $table-border-color; + // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 } diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 82ef6f9..d129f9f 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -49,6 +49,7 @@ $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; +$brand-inverse: $gray-dark !default; // Options @@ -244,8 +245,8 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; -$table-bg-accent: #f9f9f9 !default; -$table-bg-hover: #f5f5f5 !default; +$table-bg-accent: rgba(0,0,0,.05) !default; +$table-bg-hover: rgba(0,0,0,.075) !default; $table-bg-active: $table-bg-hover !default; $table-border-width: $border-width !default; @@ -295,11 +296,8 @@ $btn-padding-y-sm: .25rem !default; $btn-padding-x-lg: 1.5rem !default; $btn-padding-y-lg: .75rem !default; -$btn-block-spacing-y: 5px !default; -$btn-toolbar-margin: 5px !default; - -$split-btn-dropdown-toggle-padding-x: 8px !default; -$split-btn-lg-dropdown-toggle-padding-x: 12px !default; +$btn-block-spacing-y: .5rem !default; +$btn-toolbar-margin: .5rem !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; @@ -325,8 +323,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-border-focus: #66afe9 !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-focus: $input-color; $input-color-placeholder: #999 !default; @@ -382,8 +382,10 @@ $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='h $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-light !default; $custom-select-bg: #fff !default; +$custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; $custom-select-border-width: $input-btn-border-width !default; @@ -500,6 +502,7 @@ $nav-disabled-link-hover-bg: transparent !default; $nav-tabs-border-color: #ddd !default; $nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-bg: $body-bg !default; @@ -580,6 +583,8 @@ $card-bg: #fff !default; $card-link-hover-color: #fff !default; +$card-img-overlay-padding: 1.25rem !default; + $card-deck-margin: .625rem !default; $card-columns-sm-up-column-gap: 1.25rem !default; @@ -601,6 +606,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; @@ -792,6 +798,8 @@ $carousel-caption-width: 70% !default; $carousel-caption-sm-up-width: 60% !default; $carousel-caption-color: #fff !default; +$carousel-icon-width: 20px !default; + // Close diff --git a/assets/stylesheets/bootstrap/mixins/_cards.scss b/assets/stylesheets/bootstrap/mixins/_cards.scss index 1ce28f1..574349a 100644 --- a/assets/stylesheets/bootstrap/mixins/_cards.scss +++ b/assets/stylesheets/bootstrap/mixins/_cards.scss @@ -3,6 +3,11 @@ @mixin card-variant($background, $border) { background-color: $background; border-color: $border; + + .card-header, + .card-footer { + background-color: transparent; + } } @mixin card-outline-variant($color) { @@ -17,7 +22,7 @@ @mixin card-inverse { .card-header, .card-footer { - border-bottom: $card-border-width solid rgba(255,255,255,.2); + border-color: rgba(255,255,255,.2); } .card-header, .card-footer, @@ -27,7 +32,8 @@ } .card-link, .card-text, - .card-blockquote > footer { + .card-subtitle, + .card-blockquote .blockquote-footer { color: rgba(255,255,255,.65); } .card-link { diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index fde8295..026e41e 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -5,7 +5,7 @@ @mixin form-control-validation($color) { // Color the label and help text - .text-help, + .form-control-feedback, .form-control-label, .radio, .checkbox, @@ -56,6 +56,8 @@ // contrast against a dark gray background. @mixin form-control-focus() { &:focus { + color: $input-color-focus; + background-color: $input-bg-focus; border-color: $input-border-focus; outline: none; $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss index e52b282..6ae6551 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss @@ -1,6 +1,6 @@ // Only display content to screen readers // -// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: http://a11yproject.com/posts/how-to-hide-content @mixin sr-only { position: absolute; diff --git a/assets/stylesheets/bootstrap/utilities/_background.scss b/assets/stylesheets/bootstrap/utilities/_background.scss index 4bbf731..b158979 100644 --- a/assets/stylesheets/bootstrap/utilities/_background.scss +++ b/assets/stylesheets/bootstrap/utilities/_background.scss @@ -2,11 +2,8 @@ // Contextual backgrounds // -// Inverse -// TODO: redo this as a proper class .bg-inverse { - color: $gray-lighter; - background-color: $gray-dark; + background-color: $brand-inverse; } .bg-faded { |