From f82164992580fca0c3e3dde7d6d097784a514e5b Mon Sep 17 00:00:00 2001 From: Blake Gentry Date: Fri, 6 Jan 2017 10:10:24 -0800 Subject: rake update[v4.0.0-alpha.6] --- assets/stylesheets/_bootstrap-flex.scss | 8 - assets/stylesheets/_bootstrap-grid.scss | 26 +- assets/stylesheets/_bootstrap-reboot.scss | 5 +- assets/stylesheets/_bootstrap.scss | 12 +- assets/stylesheets/bootstrap/_alert.scss | 7 +- assets/stylesheets/bootstrap/_animation.scss | 36 -- assets/stylesheets/bootstrap/_badge.scss | 77 +++ assets/stylesheets/bootstrap/_button-group.scss | 69 +-- assets/stylesheets/bootstrap/_buttons.scss | 34 +- assets/stylesheets/bootstrap/_card.scss | 106 ++-- assets/stylesheets/bootstrap/_carousel.scss | 267 ++++------ assets/stylesheets/bootstrap/_close.scss | 6 +- assets/stylesheets/bootstrap/_code.scss | 7 + assets/stylesheets/bootstrap/_custom-forms.scss | 25 +- assets/stylesheets/bootstrap/_dropdown.scss | 53 +- assets/stylesheets/bootstrap/_forms.scss | 108 +++-- assets/stylesheets/bootstrap/_grid.scss | 13 + assets/stylesheets/bootstrap/_images.scss | 4 +- assets/stylesheets/bootstrap/_input-group.scss | 44 +- assets/stylesheets/bootstrap/_list-group.scss | 142 +++--- assets/stylesheets/bootstrap/_media.scss | 83 +--- assets/stylesheets/bootstrap/_mixins.scss | 13 +- assets/stylesheets/bootstrap/_modal.scss | 34 +- assets/stylesheets/bootstrap/_nav.scss | 98 ++-- assets/stylesheets/bootstrap/_navbar.scss | 309 +++++------- assets/stylesheets/bootstrap/_normalize.scss | 227 +++++---- assets/stylesheets/bootstrap/_pagination.scss | 38 +- assets/stylesheets/bootstrap/_popover.scss | 6 +- assets/stylesheets/bootstrap/_print.scss | 13 +- assets/stylesheets/bootstrap/_progress.scss | 141 +----- assets/stylesheets/bootstrap/_reboot.scss | 31 +- .../stylesheets/bootstrap/_responsive-embed.scss | 23 +- assets/stylesheets/bootstrap/_tables.scss | 69 +-- assets/stylesheets/bootstrap/_tags.scss | 77 --- assets/stylesheets/bootstrap/_tooltip.scss | 2 +- assets/stylesheets/bootstrap/_transitions.scss | 34 ++ assets/stylesheets/bootstrap/_type.scss | 17 +- assets/stylesheets/bootstrap/_utilities.scss | 2 + assets/stylesheets/bootstrap/_variables.scss | 536 ++++++++++++--------- assets/stylesheets/bootstrap/mixins/_badge.scss | 11 + .../stylesheets/bootstrap/mixins/_breakpoints.scss | 41 +- assets/stylesheets/bootstrap/mixins/_buttons.scss | 89 ++-- assets/stylesheets/bootstrap/mixins/_cards.scss | 3 + assets/stylesheets/bootstrap/mixins/_clearfix.scss | 2 +- assets/stylesheets/bootstrap/mixins/_float.scss | 3 + assets/stylesheets/bootstrap/mixins/_forms.scss | 8 +- .../stylesheets/bootstrap/mixins/_gradients.scss | 8 +- .../bootstrap/mixins/_grid-framework.scss | 42 +- assets/stylesheets/bootstrap/mixins/_grid.scss | 45 +- .../stylesheets/bootstrap/mixins/_list-group.scss | 8 +- assets/stylesheets/bootstrap/mixins/_progress.scss | 23 - .../bootstrap/mixins/_reset-filter.scss | 8 - .../stylesheets/bootstrap/mixins/_reset-text.scss | 2 +- .../stylesheets/bootstrap/mixins/_tab-focus.scss | 9 - assets/stylesheets/bootstrap/mixins/_tag.scss | 11 - .../stylesheets/bootstrap/mixins/_transforms.scss | 14 + .../stylesheets/bootstrap/mixins/_visibility.scss | 5 + assets/stylesheets/bootstrap/utilities/_align.scss | 10 +- .../bootstrap/utilities/_background.scss | 2 +- .../stylesheets/bootstrap/utilities/_borders.scss | 13 +- .../stylesheets/bootstrap/utilities/_display.scss | 21 +- assets/stylesheets/bootstrap/utilities/_flex.scss | 73 +-- assets/stylesheets/bootstrap/utilities/_float.scss | 14 +- .../stylesheets/bootstrap/utilities/_position.scss | 23 + .../stylesheets/bootstrap/utilities/_sizing.scss | 10 + .../stylesheets/bootstrap/utilities/_spacing.scss | 73 ++- assets/stylesheets/bootstrap/utilities/_text.scss | 26 +- .../bootstrap/utilities/_visibility.scss | 2 +- 68 files changed, 1555 insertions(+), 1846 deletions(-) delete mode 100644 assets/stylesheets/_bootstrap-flex.scss delete mode 100644 assets/stylesheets/bootstrap/_animation.scss create mode 100644 assets/stylesheets/bootstrap/_badge.scss delete mode 100644 assets/stylesheets/bootstrap/_tags.scss create mode 100644 assets/stylesheets/bootstrap/_transitions.scss create mode 100644 assets/stylesheets/bootstrap/mixins/_badge.scss delete mode 100644 assets/stylesheets/bootstrap/mixins/_progress.scss delete mode 100644 assets/stylesheets/bootstrap/mixins/_reset-filter.scss delete mode 100644 assets/stylesheets/bootstrap/mixins/_tab-focus.scss delete mode 100644 assets/stylesheets/bootstrap/mixins/_tag.scss create mode 100644 assets/stylesheets/bootstrap/mixins/_transforms.scss create mode 100644 assets/stylesheets/bootstrap/mixins/_visibility.scss create mode 100644 assets/stylesheets/bootstrap/utilities/_position.scss create mode 100644 assets/stylesheets/bootstrap/utilities/_sizing.scss (limited to 'assets/stylesheets') diff --git a/assets/stylesheets/_bootstrap-flex.scss b/assets/stylesheets/_bootstrap-flex.scss deleted file mode 100644 index 60dd03a..0000000 --- a/assets/stylesheets/_bootstrap-flex.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Bootstrap with Flexbox enabled -// -// Includes all the imports from the standard Bootstrap project, but enables -// the flexbox variable. - -$enable-flex: true; - -@import "bootstrap"; diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index b132ee0..4c57cc6 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -1,14 +1,32 @@ // Bootstrap Grid only // -// Includes relevant variables and mixins for the regular (non-flexbox) grid -// system, as well as the generated predefined classes (e.g., `.col-4-sm`). +// Includes relevant variables and mixins for the flexbox grid +// system, as well as the generated predefined classes (e.g., `.col-sm-4`). + +// +// Box sizing, responsive, and more +// + +@at-root { + @-ms-viewport { width: device-width; } +} + +html { + box-sizing: border-box; + -ms-overflow-style: scrollbar; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} // // Variables // -@import "bootstrap/custom"; @import "bootstrap/variables"; // @@ -20,4 +38,6 @@ @import "bootstrap/mixins/grid-framework"; @import "bootstrap/mixins/grid"; +@import "bootstrap/custom"; + @import "bootstrap/grid"; diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss index cbba413..2c8a185 100644 --- a/assets/stylesheets/_bootstrap-reboot.scss +++ b/assets/stylesheets/_bootstrap-reboot.scss @@ -2,10 +2,9 @@ // // Includes only Normalize and our custom Reboot reset. -@import "bootstrap/custom"; @import "bootstrap/variables"; -@import "bootstrap/mixins/hover"; -@import "bootstrap/mixins/tab-focus"; +@import "bootstrap/mixins"; +@import "bootstrap/custom"; @import "bootstrap/normalize"; @import "bootstrap/reboot"; diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index b17b05c..2abc609 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,14 +1,14 @@ /*! - * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com) - * Copyright 2011-2016 The Bootstrap Authors - * Copyright 2011-2016 Twitter, Inc. + * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) + * Copyright 2011-2017 The Bootstrap Authors + * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins -@import "bootstrap/custom"; @import "bootstrap/variables"; @import "bootstrap/mixins"; +@import "bootstrap/custom"; // Reset and dependencies @import "bootstrap/normalize"; @@ -25,7 +25,7 @@ @import "bootstrap/buttons"; // Components -@import "bootstrap/animation"; +@import "bootstrap/transitions"; @import "bootstrap/dropdown"; @import "bootstrap/button-group"; @import "bootstrap/input-group"; @@ -35,7 +35,7 @@ @import "bootstrap/card"; @import "bootstrap/breadcrumb"; @import "bootstrap/pagination"; -@import "bootstrap/tags"; +@import "bootstrap/badge"; @import "bootstrap/jumbotron"; @import "bootstrap/alert"; @import "bootstrap/progress"; diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss index 260ce20..d9b4e9b 100644 --- a/assets/stylesheets/bootstrap/_alert.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -4,7 +4,7 @@ .alert { padding: $alert-padding-y $alert-padding-x; - margin-bottom: $spacer-y; + margin-bottom: $alert-margin-bottom; border: $alert-border-width solid transparent; @include border-radius($alert-border-radius); } @@ -26,13 +26,12 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding-x * 2); - // Adjust close link position .close { position: relative; - top: -.125rem; + top: -$alert-padding-y; right: -$alert-padding-x; + padding: $alert-padding-y $alert-padding-x; color: inherit; } } diff --git a/assets/stylesheets/bootstrap/_animation.scss b/assets/stylesheets/bootstrap/_animation.scss deleted file mode 100644 index f0dfff8..0000000 --- a/assets/stylesheets/bootstrap/_animation.scss +++ /dev/null @@ -1,36 +0,0 @@ -.fade { - opacity: 0; - transition: opacity .15s linear; - - &.in { - opacity: 1; - } -} - -.collapse { - display: none; - &.in { - display: block; - } -} - -tr { - &.collapse.in { - display: table-row; - } -} - -tbody { - &.collapse.in { - display: table-row-group; - } -} - -.collapsing { - position: relative; - height: 0; - overflow: hidden; - transition-timing-function: ease; - transition-duration: .35s; - transition-property: height; -} diff --git a/assets/stylesheets/bootstrap/_badge.scss b/assets/stylesheets/bootstrap/_badge.scss new file mode 100644 index 0000000..e5a3298 --- /dev/null +++ b/assets/stylesheets/bootstrap/_badge.scss @@ -0,0 +1,77 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + color: $badge-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius(); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// scss-lint:disable QualifyingElement +// Add hover effects, but only for links +a.badge { + @include hover-focus { + color: $badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} +// scss-lint:enable QualifyingElement + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +.badge-default { + @include badge-variant($badge-default-bg); +} + +.badge-primary { + @include badge-variant($badge-primary-bg); +} + +.badge-success { + @include badge-variant($badge-success-bg); +} + +.badge-info { + @include badge-variant($badge-info-bg); +} + +.badge-warning { + @include badge-variant($badge-warning-bg); +} + +.badge-danger { + @include badge-variant($badge-danger-bg); +} diff --git a/assets/stylesheets/bootstrap/_button-group.scss b/assets/stylesheets/bootstrap/_button-group.scss index 0e63ecc..584ed15 100644 --- a/assets/stylesheets/bootstrap/_button-group.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -4,28 +4,26 @@ .btn-group, .btn-group-vertical { position: relative; - display: inline-block; + display: inline-flex; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; - float: left; - margin-bottom: 0; + flex: 0 1 auto; - // Bring the "active" button to the front + // Bring the hover, focused, and "active" buttons to the fron to overlay + // the borders properly + @include hover { + z-index: 2; + } &:focus, &:active, &.active { z-index: 2; } - @include hover { - z-index: 2; - } } -} -// Prevent double borders when buttons are next to each other -.btn-group { + // Prevent double borders when buttons are next to each other .btn + .btn, .btn + .btn-group, .btn-group + .btn, @@ -36,18 +34,11 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-left: -$btn-toolbar-margin; // Offset the first child's margin - @include clearfix(); + display: flex; + justify-content: flex-start; - .btn-group, .input-group { - float: left; - } - - > .btn, - > .btn-group, - > .input-group { - margin-left: $btn-toolbar-margin; + width: auto; } } @@ -137,43 +128,19 @@ } -// Reposition the caret -.btn .caret { - margin-left: 0; -} -// Carets in other button sizes -.btn-lg .caret { - border-width: $caret-width-lg $caret-width-lg 0; - border-bottom-width: 0; -} -// Upside down carets for .dropup -.dropup .btn-lg .caret { - border-width: 0 $caret-width-lg $caret-width-lg; -} - - - // // Vertical button groups // .btn-group-vertical { - > .btn, - > .btn-group, - > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - } + display: inline-flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; - // Clear floats so dropdown menus can be properly placed - > .btn-group { - @include clearfix(); - - > .btn { - float: none; - } + .btn, + .btn-group { + width: 100%; } > .btn + .btn, diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index 119cf1c..e36ff0f 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -11,41 +11,34 @@ text-align: center; white-space: nowrap; vertical-align: middle; - cursor: pointer; user-select: none; border: $input-btn-border-width solid transparent; @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); - @include transition(all .2s ease-in-out); - - &, - &:active, - &.active { - &:focus, - &.focus { - @include tab-focus(); - } - } + @include transition($btn-transition); + // Share hover and focus styles @include hover-focus { text-decoration: none; } + &:focus, &.focus { - text-decoration: none; - } - - &:active, - &.active { - background-image: none; outline: 0; - @include box-shadow($btn-active-box-shadow); + box-shadow: $btn-focus-box-shadow; } + // Disabled comes first so active can properly restyle &.disabled, &:disabled { cursor: $cursor-disabled; opacity: .65; @include box-shadow(none); } + + &:active, + &.active { + background-image: none; + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } } // Future-proof disabling of clicks on `` elements @@ -105,7 +98,7 @@ fieldset[disabled] a.btn { // Make a button look and behave like a link .btn-link { - font-weight: normal; + font-weight: $font-weight-normal; color: $link-color; border-radius: 0; @@ -130,8 +123,9 @@ fieldset[disabled] a.btn { background-color: transparent; } &:disabled { + color: $btn-link-disabled-color; + @include hover-focus { - color: $btn-link-disabled-color; text-decoration: none; } } diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 01a5733..9fe70e8 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -4,16 +4,17 @@ .card { position: relative; - display: block; - margin-bottom: $card-spacer-y; + display: flex; + flex-direction: column; background-color: $card-bg; - // border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); } .card-block { - @include clearfix; + // Enable `flex-grow: 1` for decks and groups so that card blocks take up + // as much space as possible, ensuring footers are aligned to the bottom. + flex: 1 1 auto; padding: $card-spacer-x; } @@ -30,14 +31,6 @@ margin-bottom: 0; } -// .card-actions { -// padding: $card-spacer-y $card-spacer-x; - -// .card-link + .card-link { -// margin-left: $card-spacer-x; -// } -// } - .card-link { @include hover { text-decoration: none; @@ -68,7 +61,6 @@ // .card-header { - @include clearfix; padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of background-color: $card-cap-bg; @@ -80,7 +72,6 @@ } .card-footer { - @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -191,77 +182,39 @@ } -// 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`. +// Card deck -@if $enable-flex { - @include media-breakpoint-up(sm) { - .card-deck { +@include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + + .card { 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; - } - } - } -} @else { - @include media-breakpoint-up(sm) { - $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; - margin-bottom: 0; // Margin balancing - vertical-align: top; - } - } - .card-deck-wrapper { - margin-right: (-$space-between-cards); - margin-left: (-$space-between-cards); + flex: 1 0 0; + flex-direction: column; + + // Selectively apply horizontal margins to cards to avoid doing the + // negative margin dance like our grid. This differs from the grid + // due to the use of margins as gutters instead of padding. + &:not(:first-child) { margin-left: $card-deck-margin; } + &:not(:last-child) { margin-right: $card-deck-margin; } } } } + // // Card groups // @include media-breakpoint-up(sm) { .card-group { - @if $enable-flex { - display: flex; - flex-flow: row wrap; - } @else { - display: table; - width: 100%; - table-layout: fixed; - } + display: flex; + flex-flow: row wrap; .card { - @if $enable-flex { - flex: 1 0 0; - } @else { - display: table-cell; - vertical-align: top; - } + flex: 1 0 0; + .card { margin-left: 0; @@ -306,17 +259,18 @@ // -// Card +// Columns // @include media-breakpoint-up(sm) { .card-columns { - column-count: 3; - column-gap: $card-columns-sm-up-column-gap; + column-count: $card-columns-count; + column-gap: $card-columns-gap; .card { display: inline-block; // Don't let them vertically span multiple columns - width: 100%; // Don't let them exceed the column width + width: 100%; // Don't let their width change + margin-bottom: $card-columns-margin; } } } diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index 9386983..54478e4 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -7,77 +7,47 @@ position: relative; width: 100%; overflow: hidden; +} - > .carousel-item { - position: relative; - display: none; - transition: .6s ease-in-out left; - - // Account for jankitude on images - > img, - > a > img { - @extend .img-fluid; - line-height: 1; - } +.carousel-item { + position: relative; + display: none; + width: 100%; - // WebKit CSS3 transforms for supported devices - @media all and (transform-3d), (-webkit-transform-3d) { - transition: transform .6s ease-in-out; - backface-visibility: hidden; - perspective: 1000px; - - &.next, - &.active.right { - left: 0; - transform: translate3d(100%, 0, 0); - } - &.prev, - &.active.left { - left: 0; - transform: translate3d(-100%, 0, 0); - } - &.next.left, - &.prev.right, - &.active { - left: 0; - transform: translate3d(0, 0, 0); - } - } + @include if-supports-3d-transforms() { + @include transition($carousel-transition); + backface-visibility: hidden; + perspective: 1000px; } +} - > .active, - > .next, - > .prev { - display: block; - } +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: flex; +} - > .active { - left: 0; - } +.carousel-item-next, +.carousel-item-prev { + position: absolute; + top: 0; +} - > .next, - > .prev { - position: absolute; - top: 0; - width: 100%; +// CSS3 transforms when supported by the browser +@include if-supports-3d-transforms() { + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); } - > .next { - left: 100%; - } - > .prev { - left: -100%; - } - > .next.left, - > .prev.right { - left: 0; + .carousel-item-next, + .active.carousel-item-right { + transform: translate3d(100%, 0, 0); } - > .active.left { - left: -100%; - } - > .active.right { - left: 100%; + .carousel-item-prev, + .active.carousel-item-left { + transform: translate3d(-100%, 0, 0); } } @@ -86,30 +56,22 @@ // Left/right controls for nav // -.carousel-control { +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; - left: 0; + // Use flex for alignment (1-3) + display: flex; // 1. allow flex styles + align-items: center; // 2. vertically center contents + justify-content: center; // 3. horizontally center contents width: $carousel-control-width; - font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; - text-shadow: $carousel-text-shadow; opacity: $carousel-control-opacity; - // We can't have this transition here because WebKit cancels the carousel + // We can't have a transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. - // Set gradients for backgrounds - &.left { - @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); - } - &.right { - right: 0; - left: auto; - @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); - } - // Hover/focus state @include hover-focus { color: $carousel-control-color; @@ -117,79 +79,83 @@ outline: 0; opacity: .9; } +} +.carousel-control-prev { + left: 0; +} +.carousel-control-next { + right: 0; +} - // Toggles - .icon-prev, - .icon-next { - position: absolute; - top: 50%; - z-index: 5; - display: inline-block; - 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: -($carousel-icon-width / 2); - } - .icon-next { - right: 50%; - margin-right: -($carousel-icon-width / 2); - } - - .icon-prev { - &::before { - content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) - } - } - .icon-next { - &::before { - content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) - } - } +// Icons for within +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: $carousel-control-icon-width; + height: $carousel-control-icon-width; + background: transparent no-repeat center center; + background-size: 100% 100%; +} +.carousel-control-prev-icon { + background-image: $carousel-control-prev-icon-bg; +} +.carousel-control-next-icon { + background-image: $carousel-control-next-icon-bg; } // Optional indicator pips // -// Add an unordered list with the following class and add a list item for each +// Add an ordered list with the following class and add a list item for each // slide your carousel holds. .carousel-indicators { position: absolute; + right: 0; bottom: 10px; - left: 50%; + left: 0; z-index: 15; - width: $carousel-indicators-width; - padding-left: 0; - margin-left: -($carousel-indicators-width / 2); - text-align: center; + display: flex; + justify-content: center; + padding-left: 0; // override
    default + // Use the .carousel-control's width as margin so we don't overlay those + margin-right: $carousel-control-width; + margin-left: $carousel-control-width; list-style: none; li { - display: inline-block; - width: $carousel-indicator-size; - height: $carousel-indicator-size; - margin: 1px; + position: relative; + flex: 1 0 auto; + max-width: $carousel-indicator-width; + height: $carousel-indicator-height; + margin-right: $carousel-indicator-spacer; + margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - // IE9 hack for event handling - // - // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`, - // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent. - // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer - background-color: rgba(0,0,0,0); // IE9 - border: 1px solid $carousel-indicator-border-color; - border-radius: $carousel-indicator-size; + background-color: rgba($carousel-indicator-active-bg, .5); + + // Use pseudo classes to increase the hit area by 10px on top and bottom. + &::before { + position: absolute; + top: -10px; + left: 0; + display: inline-block; + width: 100%; + height: 10px; + content: ""; + } + &::after { + position: absolute; + bottom: -10px; + left: 0; + display: inline-block; + width: 100%; + height: 10px; + content: ""; + } } .active { - width: $carousel-indicator-active-size; - height: $carousel-indicator-active-size; - margin: 0; background-color: $carousel-indicator-active-bg; } } @@ -197,7 +163,7 @@ // Optional captions // -// Hidden by default for smaller viewports. +// .carousel-caption { position: absolute; @@ -209,45 +175,4 @@ padding-bottom: 20px; color: $carousel-caption-color; text-align: center; - text-shadow: $carousel-text-shadow; - - .btn { - text-shadow: none; // No shadow for button elements in carousel-caption - } -} - - -// -// Responsive variations -// - -@include media-breakpoint-up(sm) { - // Scale up the controls a smidge - .carousel-control { - .icon-prev, - .icon-next { - width: $carousel-control-sm-up-size; - height: $carousel-control-sm-up-size; - margin-top: -($carousel-control-sm-up-size / 2); - font-size: $carousel-control-sm-up-size; - } - .icon-prev { - margin-left: -($carousel-control-sm-up-size / 2); - } - .icon-next { - margin-right: -($carousel-control-sm-up-size / 2); - } - } - - // Show and left align the captions - .carousel-caption { - right: ((100% - $carousel-caption-sm-up-width) / 2); - left: ((100% - $carousel-caption-sm-up-width) / 2); - padding-bottom: 30px; - } - - // Move up the indicators - .carousel-indicators { - bottom: 20px; - } } diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss index f98d4c1..859990e 100644 --- a/assets/stylesheets/bootstrap/_close.scss +++ b/assets/stylesheets/bootstrap/_close.scss @@ -1,17 +1,17 @@ .close { float: right; - font-size: ($font-size-base * 1.5); + font-size: $close-font-size; font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - opacity: .2; + opacity: .5; @include hover-focus { color: $close-color; text-decoration: none; cursor: pointer; - opacity: .5; + opacity: .75; } } diff --git a/assets/stylesheets/bootstrap/_code.scss b/assets/stylesheets/bootstrap/_code.scss index ea660bc..759da15 100644 --- a/assets/stylesheets/bootstrap/_code.scss +++ b/assets/stylesheets/bootstrap/_code.scss @@ -13,6 +13,13 @@ code { color: $code-color; background-color: $code-bg; @include border-radius($border-radius); + + // Streamline the style when inside anchors to avoid broken underline and more + a > & { + padding: 0; + color: inherit; + background-color: inherit; + } } // User input typically entered via keyboard diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss index e74f5c7..ef2aab3 100644 --- a/assets/stylesheets/bootstrap/_custom-forms.scss +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -11,13 +11,11 @@ .custom-control { position: relative; - display: inline-block; + display: inline-flex; + min-height: (1rem * $line-height-base); padding-left: $custom-control-gutter; + margin-right: $custom-control-spacer-x; cursor: pointer; - - + .custom-control { - margin-left: $custom-control-spacer-x; - } } .custom-control-input { @@ -61,7 +59,7 @@ .custom-control-indicator { position: absolute; - top: .25rem; + top: (($line-height-base - $custom-control-indicator-size) / 2); left: 0; display: block; width: $custom-control-indicator-size; @@ -116,9 +114,11 @@ // set. Use these optional classes to tweak the layout. .custom-controls-stacked { + display: flex; + flex-direction: column; + .custom-control { - float: left; - clear: left; + margin-bottom: $custom-control-spacer-y; + .custom-control { margin-left: 0; @@ -132,19 +132,17 @@ // Replaces the browser default select with a custom one, mostly pulled from // http://primercss.io. // -// Includes IE9-specific hacks (noted by ` \9`). .custom-select { display: inline-block; max-width: 100%; $select-border-width: ($border-width * 2); - height: calc(#{$input-height} - #{$select-border-width}); + 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; + line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-image: none \9; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius); @@ -201,12 +199,14 @@ display: inline-block; max-width: 100%; height: $custom-file-height; + margin-bottom: 0; cursor: pointer; } .custom-file-input { min-width: $custom-file-width; max-width: 100%; + height: $custom-file-height; margin: 0; filter: alpha(opacity = 0); opacity: 0; @@ -226,6 +226,7 @@ padding: $custom-file-padding-x $custom-file-padding-y; line-height: $custom-file-line-height; color: $custom-file-color; + pointer-events: none; user-select: none; background-color: $custom-file-bg; border: $custom-file-border-width solid $custom-file-border-color; diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index 47702e7..1c2741a 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -44,7 +44,7 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-margin-top 0 0; // override default ul - font-size: $font-size-base; + font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues color: $body-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; @@ -68,7 +68,7 @@ width: 100%; // For `