diff options
| author | Mark Otto <[email protected]> | 2017-05-30 08:46:33 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-30 08:46:33 -0700 |
| commit | d4eb0d4e739477fc51421eed29906addfd998a04 (patch) | |
| tree | 5ffe09c63ac4e522890fc7b2b87c0a47b0f1a971 /scss | |
| parent | 0c12ccbeb6fdf0dd3818f97260aa43c79108d377 (diff) | |
| parent | f95cbc5950bf31995f33023014c47a61665ffacc (diff) | |
| download | bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.tar.xz bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.zip | |
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
Diffstat (limited to 'scss')
57 files changed, 819 insertions, 1841 deletions
diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml deleted file mode 100644 index 9d6e7ec4e..000000000 --- a/scss/.scss-lint.yml +++ /dev/null @@ -1,548 +0,0 @@ -# Default application configuration that all configurations inherit from. -scss_files: - - "**/*.scss" - - "docs/assets/scss/**/*.scss" - -exclude: - - "scss/_normalize.scss" - -plugin_directories: ['.scss-linters'] - -# List of gem names to load custom linters from (make sure they are already -# installed) -plugin_gems: [] - -# Default severity of all linters. -severity: warning - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - - BemDepth: - enabled: false - max_elements: 1 - - BorderZero: - enabled: true - convention: zero # or `none` - exclude: - - _normalize.scss - - ChainedClasses: - enabled: false - - ColorKeyword: - enabled: true - - ColorVariable: - enabled: false - - Comment: - enabled: true - exclude: - - _normalize.scss - - bootstrap.scss - style: silent - - DebugStatement: - enabled: true - - DeclarationOrder: - enabled: false - - DisableLinterReason: - enabled: false - - DuplicateProperty: - enabled: true - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - - EmptyLineBetweenBlocks: - enabled: false - ignore_single_line_blocks: true - - EmptyRule: - enabled: true - - ExtendDirective: - enabled: false - - FinalNewline: - enabled: true - present: true - - HexLength: - enabled: true - style: short # or 'long' - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - - HexValidation: - enabled: true - - IdSelector: - enabled: true - - ImportantRule: - enabled: false - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: space # or 'tab' - width: 2 - - LeadingZero: - enabled: true - style: exclude_zero # or 'include_zero' - exclude: - - _normalize.scss - - MergeableSelector: - enabled: false - force_nesting: true - - NameFormat: - enabled: true - allow_leading_underscore: true - convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern - - NestingDepth: - enabled: true - max_depth: 4 - ignore_parent_selectors: false - - PlaceholderInExtend: - enabled: false - - PropertyCount: - enabled: false - include_nested: false - max_properties: 10 - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: false - exclude: - - _normalize.scss - order: - - position - - top - - right - - bottom - - left - - z-index - - -webkit-box-sizing - - -moz-box-sizing - - box-sizing - - display - - flex - - flex-align - - flex-basis - - flex-direction - - flex-wrap - - flex-flow - - flex-grow - - flex-order - - flex-pack - - align-items - - align-self - - justify-content - - float - - width - - min-width - - max-width - - height - - min-height - - max-height - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - overflow - - overflow-x - - overflow-y - - -webkit-overflow-scrolling - - -ms-overflow-x - - -ms-overflow-y - - -ms-overflow-style - - clip - - clear - - font - - font-family - - font-size - - font-style - - font-weight - - font-variant - - font-size-adjust - - font-stretch - - font-effect - - font-emphasize - - font-emphasize-position - - font-emphasize-style - - font-smooth - - -webkit-hyphens - - -moz-hyphens - - hyphens - - line-height - - color - - text-align - - -webkit-text-align-last - - -moz-text-align-last - - -ms-text-align-last - - text-align-last - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - text-emphasis-position - - text-decoration - - text-indent - - text-justify - - text-outline - - -ms-text-overflow - - text-overflow - - text-overflow-ellipsis - - text-overflow-mode - - text-shadow - - text-transform - - text-wrap - - -webkit-text-size-adjust - - -ms-text-size-adjust - - letter-spacing - - -ms-word-break - - word-break - - word-spacing - - -ms-word-wrap - - word-wrap - - overflow-wrap - - -moz-tab-size - - -o-tab-size - - tab-size - - white-space - - vertical-align - - list-style - - list-style-position - - list-style-type - - list-style-image - - pointer-events - - -ms-touch-action - - touch-action - - cursor - - visibility - - zoom - - table-layout - - empty-cells - - caption-side - - border-spacing - - border-collapse - - content - - quotes - - counter-reset - - counter-increment - - resize - - -webkit-user-select - - -moz-user-select - - -ms-user-select - - -o-user-select - - user-select - - nav-index - - nav-up - - nav-right - - nav-down - - nav-left - - background - - background-color - - background-image - - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader - - filter - - background-repeat - - background-attachment - - background-position - - background-position-x - - background-position-y - - -webkit-background-clip - - -moz-background-clip - - background-clip - - background-origin - - -webkit-background-size - - -moz-background-size - - -o-background-size - - background-size - - border - - border-color - - border-style - - border-width - - border-top - - border-top-color - - border-top-style - - border-top-width - - border-right - - border-right-color - - border-right-style - - border-right-width - - border-bottom - - border-bottom-color - - border-bottom-style - - border-bottom-width - - border-left - - border-left-color - - border-left-style - - border-left-width - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - -webkit-border-image - - -moz-border-image - - -o-border-image - - border-image - - -webkit-border-image-source - - -moz-border-image-source - - -o-border-image-source - - border-image-source - - -webkit-border-image-slice - - -moz-border-image-slice - - -o-border-image-slice - - border-image-slice - - -webkit-border-image-width - - -moz-border-image-width - - -o-border-image-width - - border-image-width - - -webkit-border-image-outset - - -moz-border-image-outset - - -o-border-image-outset - - border-image-outset - - -webkit-border-image-repeat - - -moz-border-image-repeat - - -o-border-image-repeat - - border-image-repeat - - outline - - outline-width - - outline-style - - outline-color - - outline-offset - - -webkit-box-shadow - - -moz-box-shadow - - box-shadow - - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity - - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha - - opacity - - -ms-interpolation-mode - - -webkit-transition - - -moz-transition - - -ms-transition - - -o-transition - - transition - - -webkit-transition-delay - - -moz-transition-delay - - -ms-transition-delay - - -o-transition-delay - - transition-delay - - -webkit-transition-timing-function - - -moz-transition-timing-function - - -ms-transition-timing-function - - -o-transition-timing-function - - transition-timing-function - - -webkit-transition-duration - - -moz-transition-duration - - -ms-transition-duration - - -o-transition-duration - - transition-duration - - -webkit-transition-property - - -moz-transition-property - - -ms-transition-property - - -o-transition-property - - transition-property - - -webkit-transform - - -moz-transform - - -ms-transform - - -o-transform - - transform - - -webkit-transform-origin - - -moz-transform-origin - - -ms-transform-origin - - -o-transform-origin - - transform-origin - - -webkit-animation - - -moz-animation - - -ms-animation - - -o-animation - - animation - - -webkit-animation-name - - -moz-animation-name - - -ms-animation-name - - -o-animation-name - - animation-name - - -webkit-animation-duration - - -moz-animation-duration - - -ms-animation-duration - - -o-animation-duration - - animation-duration - - -webkit-animation-play-state - - -moz-animation-play-state - - -ms-animation-play-state - - -o-animation-play-state - - animation-play-state - - -webkit-animation-timing-function - - -moz-animation-timing-function - - -ms-animation-timing-function - - -o-animation-timing-function - - animation-timing-function - - -webkit-animation-delay - - -moz-animation-delay - - -ms-animation-delay - - -o-animation-delay - - animation-delay - - -webkit-animation-iteration-count - - -moz-animation-iteration-count - - -ms-animation-iteration-count - - -o-animation-iteration-count - - animation-iteration-count - - -webkit-animation-direction - - -moz-animation-direction - - -ms-animation-direction - - -o-animation-direction - - - PropertySpelling: - enabled: true - extra_properties: [] - disabled_properties: [] - - PropertyUnits: - enabled: true - global: [ - 'ch', 'em', 'ex', 'rem', # Font-relative lengths - 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths - 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths - 'deg', 'grad', 'rad', 'turn', # Angle - 'ms', 's', # Duration - 'Hz', 'kHz', # Frequency - 'dpi', 'dpcm', 'dppx', # Resolution - '%'] # Other - properties: {} - - PseudoElement: - enabled: true - - QualifyingElement: - enabled: true - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorDepth: - enabled: true - max_depth: 4 - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - Shorthand: - enabled: true - allowed_shorthands: [1, 2, 3, 4] - - SingleLinePerProperty: - enabled: false - allow_single_line_rule_sets: true - - SingleLinePerSelector: - enabled: false - - SpaceAfterComma: - enabled: false - style: one_space # or 'no_space', or 'at_least_one_space' - - SpaceAfterPropertyColon: - enabled: true - style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - - SpaceAfterPropertyName: - enabled: true - - SpaceAfterVariableName: - enabled: true - - SpaceAroundOperator: - enabled: true - style: one_space # or 'at_least_one_space', or 'no_space' - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: true - - SpaceBetweenParens: - enabled: true - spaces: 0 - - StringQuotes: - enabled: true - style: double_quotes # or double_quotes - - TrailingSemicolon: - enabled: true - - TrailingWhitespace: - enabled: true - - TrailingZero: - enabled: false - - TransitionAll: - enabled: false - - UnnecessaryMantissa: - enabled: true - - UnnecessaryParentReference: - enabled: true - - UrlFormat: - enabled: true - - UrlQuotes: - enabled: true - - VariableForProperty: - enabled: false - properties: [] - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - exclude: - - _normalize.scss - - ZeroUnit: - enabled: true - - Compass::*: - enabled: false diff --git a/scss/_alert.scss b/scss/_alert.scss index d9b4e9b27..562821a58 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -42,14 +42,14 @@ // Generate contextual modifier classes for colorizing the alert. .alert-success { - @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); + @include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text); } .alert-info { - @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); + @include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text); } .alert-warning { - @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); + @include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text); } .alert-danger { - @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); + @include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text); } diff --git a/scss/_badge.scss b/scss/_badge.scss index e5a329893..175b19d86 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -33,7 +33,6 @@ a.badge { @include hover-focus { color: $badge-link-hover-color; text-decoration: none; - cursor: pointer; } } // scss-lint:enable QualifyingElement diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 1a09bba20..2bc0e2086 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,6 +1,6 @@ .breadcrumb { padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $spacer-y; + margin-bottom: 1rem; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 584ed1513..d4c79ab60 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -10,6 +10,7 @@ > .btn { position: relative; flex: 0 1 auto; + margin-bottom: 0; // Bring the hover, focused, and "active" buttons to the fron to overlay // the borders properly @@ -35,6 +36,7 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { display: flex; + flex-wrap: wrap; justify-content: flex-start; .input-group { @@ -77,12 +79,6 @@ @include border-left-radius(0); } -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - // Sizing // @@ -97,8 +93,8 @@ // .btn + .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $input-btn-padding-x * .75; + padding-left: $input-btn-padding-x * .75; &::after { margin-left: 0; @@ -106,19 +102,19 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $input-btn-padding-x-sm * .75; + padding-left: $input-btn-padding-x-sm * .75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $input-btn-padding-x-lg * .75; + padding-left: $input-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 { +// Set the same inset shadow as the :active state +.btn-group.show .dropdown-toggle { @include box-shadow($btn-active-box-shadow); // Show no shadow for `.btn-link` since it has no other button styles. diff --git a/scss/_buttons.scss b/scss/_buttons.scss index e36ff0f1f..05c54e4ee 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -7,13 +7,12 @@ .btn { display: inline-block; font-weight: $btn-font-weight; - line-height: $btn-line-height; text-align: center; white-space: nowrap; vertical-align: middle; 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 button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius); @include transition($btn-transition); // Share hover and focus styles @@ -29,7 +28,6 @@ // Disabled comes first so active can properly restyle &.disabled, &:disabled { - cursor: $cursor-disabled; opacity: .65; @include box-shadow(none); } @@ -53,42 +51,42 @@ fieldset[disabled] a.btn { // .btn-primary { - @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); } .btn-secondary { - @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); + @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color); } .btn-info { - @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); } .btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); } .btn-warning { - @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); } .btn-danger { - @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); } // Remove all backgrounds .btn-outline-primary { - @include button-outline-variant($btn-primary-bg); + @include button-outline-variant($btn-primary-bg, $btn-primary-color); } .btn-outline-secondary { - @include button-outline-variant($btn-secondary-border); + @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color); } .btn-outline-info { - @include button-outline-variant($btn-info-bg); + @include button-outline-variant($btn-info-bg, $btn-info-color); } .btn-outline-success { - @include button-outline-variant($btn-success-bg); + @include button-outline-variant($btn-success-bg, $btn-success-color); } .btn-outline-warning { - @include button-outline-variant($btn-warning-bg); + @include button-outline-variant($btn-warning-bg, $btn-warning-color); } .btn-outline-danger { - @include button-outline-variant($btn-danger-bg); + @include button-outline-variant($btn-danger-bg, $btn-danger-color); } @@ -137,12 +135,11 @@ fieldset[disabled] a.btn { // .btn-lg { - // line-height: ensure even-numbered height of button next to large input - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); } + .btn-sm { - // line-height: ensure proper height of button next to small input - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); } diff --git a/scss/_card.scss b/scss/_card.scss index 9fe70e8cf..7be2aaf8b 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -20,6 +20,7 @@ .card-title { margin-bottom: $card-spacer-y; + word-break: break-all; } .card-subtitle { @@ -124,7 +125,7 @@ @include card-outline-variant($btn-primary-bg); } .card-outline-secondary { - @include card-outline-variant($btn-secondary-border); + @include card-outline-variant($btn-secondary-border-color); } .card-outline-info { @include card-outline-variant($btn-info-bg); @@ -158,10 +159,6 @@ } // Card image -.card-img { - // margin: -1.325rem; - @include border-radius($card-border-radius-inner); -} .card-img-overlay { position: absolute; top: 0; @@ -171,13 +168,19 @@ padding: $card-img-overlay-padding; } - +.card-img { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch + @include border-radius($card-border-radius-inner); +} // Card image caps .card-img-top { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-border-radius-inner); } + .card-img-bottom { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-border-radius-inner); } @@ -188,17 +191,15 @@ .card-deck { display: flex; flex-flow: row wrap; + margin-right: -$card-deck-margin; + margin-left: -$card-deck-margin; .card { display: flex; 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; } + margin-right: $card-deck-margin; + margin-left: $card-deck-margin; } } } @@ -262,15 +263,18 @@ // Columns // -@include media-breakpoint-up(sm) { - .card-columns { +.card-columns { + .card { + margin-bottom: $card-columns-margin; + } + + @include media-breakpoint-up(sm) { 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 their width change - margin-bottom: $card-columns-margin; } } } diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 54478e450..41eca949f 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -12,13 +12,11 @@ .carousel-item { position: relative; display: none; + align-items: center; width: 100%; - - @include if-supports-3d-transforms() { - @include transition($carousel-transition); - backface-visibility: hidden; - perspective: 1000px; - } + @include transition($carousel-transition); + backface-visibility: hidden; + perspective: 1000px; } .carousel-item.active, @@ -34,21 +32,19 @@ } // 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); - } +.carousel-item-next.carousel-item-left, +.carousel-item-prev.carousel-item-right { + transform: translate3d(0, 0, 0); +} - .carousel-item-next, - .active.carousel-item-right { - transform: translate3d(100%, 0, 0); - } +.carousel-item-next, +.active.carousel-item-right { + transform: translate3d(100%, 0, 0); +} - .carousel-item-prev, - .active.carousel-item-left { - transform: translate3d(-100%, 0, 0); - } +.carousel-item-prev, +.active.carousel-item-left { + transform: translate3d(-100%, 0, 0); } @@ -131,7 +127,6 @@ margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; - cursor: pointer; background-color: rgba($carousel-indicator-active-bg, .5); // Use pseudo classes to increase the hit area by 10px on top and bottom. diff --git a/scss/_close.scss b/scss/_close.scss index 859990e31..f18149051 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -10,7 +10,6 @@ @include hover-focus { color: $close-color; text-decoration: none; - cursor: pointer; opacity: .75; } } @@ -23,7 +22,6 @@ // scss-lint:disable QualifyingElement button.close { padding: 0; - cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index ef2aab354..9133f7dbd 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable PropertyCount +// scss-lint:disable PropertyCount, VendorPrefix // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. @@ -15,7 +15,6 @@ min-height: (1rem * $line-height-base); padding-left: $custom-control-gutter; margin-right: $custom-control-spacer-x; - cursor: pointer; } .custom-control-input { @@ -42,13 +41,11 @@ &:disabled { ~ .custom-control-indicator { - cursor: $custom-control-disabled-cursor; background-color: $custom-control-disabled-indicator-bg; } ~ .custom-control-description { color: $custom-control-disabled-description-color; - cursor: $custom-control-disabled-cursor; } } } @@ -136,7 +133,7 @@ .custom-select { display: inline-block; max-width: 100%; - $select-border-width: ($border-width * 2); + $select-border-width: ($custom-select-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; line-height: $custom-select-line-height; @@ -146,9 +143,7 @@ background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius); - // Use vendor prefixes as `appearance` isn't part of the CSS spec. - -moz-appearance: none; - -webkit-appearance: none; + appearance: none; &:focus { border-color: $custom-select-focus-border-color; @@ -168,7 +163,6 @@ &:disabled { color: $custom-select-disabled-color; - cursor: $cursor-disabled; background-color: $custom-select-disabled-bg; } @@ -200,7 +194,6 @@ max-width: 100%; height: $custom-file-height; margin-bottom: 0; - cursor: pointer; } .custom-file-input { @@ -208,7 +201,6 @@ max-width: 100%; height: $custom-file-height; margin: 0; - filter: alpha(opacity = 0); opacity: 0; &:focus ~ .custom-file-control { @@ -234,7 +226,7 @@ @include box-shadow($custom-file-box-shadow); @each $lang, $text in map-get($custom-file-text, placeholder) { - &:lang(#{$lang})::after { + &:lang(#{$lang}):empty::after { content: $text; } } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1c2741a2e..d9e75b0aa 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -18,12 +18,13 @@ border-left: $caret-width solid transparent; } - // Prevent the focus on the dropdown toggle when closing dropdowns - &:focus { - outline: 0; + &:empty::after { + margin-left: 0; } } +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-toggle { &::after { @@ -66,7 +67,7 @@ .dropdown-item { display: block; width: 100%; // For `<button>`s - padding: 3px $dropdown-item-padding-x; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; clear: both; font-weight: $font-weight-normal; color: $dropdown-link-color; @@ -91,7 +92,6 @@ &.disabled, &:disabled { color: $dropdown-link-disabled-color; - cursor: $cursor-disabled; background-color: transparent; // Remove CSS gradients if they're enabled @if $enable-gradients { @@ -102,29 +102,14 @@ // Open state for the dropdown .show { - // Show the menu - > .dropdown-menu { - display: block; - } - // Remove the outline when :focus is triggered > a { outline: 0; } } -// Menu positioning -// -// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown -// menu with the parent. -.dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` -} - -.dropdown-menu-left { - right: auto; - left: 0; +.dropdown-menu.show { + display: block; } // Dropdown section headers @@ -136,26 +121,3 @@ color: $dropdown-header-color; white-space: nowrap; // as with > li > a } - -// Backdrop to catch body clicks on mobile, etc. -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-dropdown-backdrop; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set. - -.dropup { - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: $dropdown-margin-top; - } -} diff --git a/scss/_forms.scss b/scss/_forms.scss index 7be62bde6..55e8cb43a 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// scss-lint:disable QualifyingElement, VendorPrefix // // Textual form controls @@ -9,9 +9,9 @@ width: 100%; // // Make inputs at least the height of their button counterpart (base line-height + padding + border) // height: $input-height; - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; - line-height: $input-line-height; + line-height: $input-btn-line-height; color: $input-color; background-color: $input-bg; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. @@ -58,10 +58,6 @@ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } - - &:disabled { - cursor: $cursor-disabled; - } } select.form-control { @@ -95,20 +91,20 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. .col-form-label { - padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); margin-bottom: 0; // Override the `<label>` default } .col-form-label-lg { - padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); font-size: $font-size-lg; } .col-form-label-sm { - padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); font-size: $font-size-sm; } @@ -120,8 +116,8 @@ select.form-control { // For use with horizontal and inline forms, when you need the legend text to // be the same size as regular labels, and to align with the form controls. .col-form-legend { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; font-size: $font-size-base; } @@ -133,10 +129,10 @@ select.form-control { // horizontal form layout. .form-control-static { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins - line-height: $input-line-height; + line-height: $input-btn-line-height; border: solid transparent; border-width: $input-btn-border-width 0; @@ -157,26 +153,30 @@ select.form-control { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; + line-height: $input-btn-line-height-sm; @include border-radius($input-border-radius-sm); } select.form-control-sm { &:not([size]):not([multiple]) { - height: $input-height-sm; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-sm} + #{$select-border-width}); } } .form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; + line-height: $input-btn-line-height-lg; @include border-radius($input-border-radius-lg); } select.form-control-lg { &:not([size]):not([multiple]) { - height: $input-height-lg; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-lg} + #{$select-border-width}); } } @@ -208,7 +208,6 @@ select.form-control-lg { &.disabled { .form-check-label { color: $text-muted; - cursor: $cursor-disabled; } } } @@ -216,7 +215,6 @@ select.form-control-lg { .form-check-label { padding-left: $form-check-input-gutter; margin-bottom: 0; // Override default `<label>` bottom margin - cursor: pointer; } .form-check-input { @@ -254,7 +252,7 @@ select.form-control-lg { .form-control-success, .form-control-warning, .form-control-danger { - padding-right: ($input-padding-x * 3); + padding-right: ($input-btn-padding-x * 3); background-repeat: no-repeat; background-position: center right ($input-height / 4); background-size: ($input-height / 2) ($input-height / 2); diff --git a/scss/_grid.scss b/scss/_grid.scss index 8c7a9ee31..9ab9ae02b 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -11,11 +11,12 @@ // Fluid container // -// Utilizes the mixin meant for fixed width containers, but without any defined -// width for fluid, full width layouts. +// Utilizes the mixin meant for fixed width containers, but with 100% width for +// fluid, full width layouts. @if $enable-grid-classes { .container-fluid { + width: 100%; @include make-container(); } } diff --git a/scss/_images.scss b/scss/_images.scss index a8135a6c3..50c56108a 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -33,7 +33,7 @@ } .figure-img { - margin-bottom: ($spacer-y / 2); + margin-bottom: ($spacer / 2); line-height: 1; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index ab44883bd..0b668bff3 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -30,8 +30,7 @@ .input-group .form-control { // Vertically centers the content of the addons within the input group display: flex; - flex-direction: column; - justify-content: center; + align-items: center; &:not(:first-child):not(:last-child) { @include border-radius(0); @@ -67,11 +66,11 @@ // .input-group-addon { - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom font-size: $font-size-base; // Match inputs font-weight: $font-weight-normal; - line-height: $input-line-height; + line-height: $input-btn-line-height; color: $input-color; text-align: center; background-color: $input-group-addon-bg; @@ -80,12 +79,13 @@ // Sizing &.form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; @include border-radius($input-border-radius-sm); } + &.form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); } @@ -144,8 +144,6 @@ // element above the siblings. > .btn { position: relative; - // Vertically stretch the button and center its content - flex: 1; + .btn { margin-left: (-$input-btn-border-width); diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss index b12d465d9..7966bba1e 100644 --- a/scss/_jumbotron.scss +++ b/scss/_jumbotron.scss @@ -9,10 +9,6 @@ } } -.jumbotron-hr { - border-top-color: darken($jumbotron-bg, 10%); -} - .jumbotron-fluid { padding-right: 0; padding-left: 0; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ec813c807..fef2c1532 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -22,10 +22,6 @@ color: $list-group-link-color; text-align: inherit; // For `<button>`s (anchors inherit) - .list-group-item-heading { - color: $list-group-link-heading-color; - } - // Hover state @include hover-focus { color: $list-group-link-hover-color; @@ -46,9 +42,7 @@ .list-group-item { position: relative; - display: flex; - flex-flow: row wrap; - align-items: center; + display: block; padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; @@ -71,16 +65,7 @@ &.disabled, &:disabled { color: $list-group-disabled-color; - cursor: $cursor-disabled; background-color: $list-group-disabled-bg; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: $list-group-disabled-text-color; - } } // Include both here for `<a>`s and `<button>`s @@ -88,18 +73,7 @@ z-index: 2; // Place active items above their siblings for proper border styling color: $list-group-active-color; background-color: $list-group-active-bg; - border-color: $list-group-active-border; - - // Force color to inherit for custom content - .list-group-item-heading, - .list-group-item-heading > small, - .list-group-item-heading > .small { - color: inherit; - } - - .list-group-item-text { - color: $list-group-active-text-color; - } + border-color: $list-group-active-border-color; } } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index da4738297..cc3394f0a 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -2,22 +2,6 @@ // // Used in conjunction with global variables to enable certain theme features. -@mixin box-shadow($shadow...) { - @if $enable-shadows { - box-shadow: $shadow; - } -} - -@mixin transition($transition...) { - @if $enable-transitions { - @if length($transition) == 0 { - transition: $transition-base; - } @else { - transition: $transition; - } - } -} - // Utilities @import "mixins/breakpoints"; @import "mixins/hover"; @@ -30,7 +14,6 @@ @import "mixins/text-emphasis"; @import "mixins/text-hide"; @import "mixins/text-truncate"; -@import "mixins/transforms"; @import "mixins/visibility"; // // Components @@ -47,7 +30,9 @@ // // Skins @import "mixins/background-variant"; @import "mixins/border-radius"; +@import "mixins/box-shadow"; @import "mixins/gradients"; +@import "mixins/transition"; // // Layout @import "mixins/clearfix"; diff --git a/scss/_nav.scss b/scss/_nav.scss index eb316bb27..973679eee 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -5,6 +5,7 @@ .nav { display: flex; + flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; @@ -12,20 +13,18 @@ .nav-link { display: block; - padding: $nav-link-padding; + padding: $nav-link-padding-y $nav-link-padding-x; @include hover-focus { text-decoration: none; } - // Disabled state lightens text and removes hover/tab effects + // Disabled state lightens text &.disabled { color: $nav-disabled-link-color; - cursor: $cursor-disabled; } } - // // Tabs // @@ -54,9 +53,9 @@ .nav-link.active, .nav-item.show .nav-link { - color: $nav-tabs-active-link-hover-color; - background-color: $nav-tabs-active-link-hover-bg; - border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg; + color: $nav-tabs-active-link-color; + background-color: $nav-tabs-active-link-bg; + border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg; } .dropdown-menu { @@ -75,13 +74,12 @@ .nav-pills { .nav-link { @include border-radius($nav-pills-border-radius); - } - .nav-link.active, - .nav-item.show .nav-link { - color: $nav-pills-active-link-color; - cursor: default; - background-color: $nav-pills-active-link-bg; + &.active, + .show & { + color: $nav-pills-active-link-color; + background-color: $nav-pills-active-link-bg; + } } } @@ -99,7 +97,8 @@ .nav-justified { .nav-item { - flex: 1 1 100%; + flex-basis: 0; + flex-grow: 1; text-align: center; } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 80beec8f3..59cc52d9a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -18,8 +18,26 @@ .navbar { position: relative; display: flex; - flex-direction: column; + flex-wrap: wrap; // allow us to do the line break for collapsing content + align-items: center; + justify-content: space-between; // space out brand from logo padding: $navbar-padding-y $navbar-padding-x; + + // Because flex properties aren't inherited, we need to redeclare these first + // few properities so that content nested within behave properly. + > .container, + > .container-fluid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + + @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { + width: 100%; // prevent flex parent container from collapsing + margin-right: 0; + margin-left: 0; + } + } } @@ -29,10 +47,10 @@ .navbar-brand { display: inline-block; - padding-top: .25rem; - padding-bottom: .25rem; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; - font-size: $font-size-lg; + font-size: $navbar-brand-font-size; line-height: inherit; white-space: nowrap; @@ -57,6 +75,12 @@ padding-right: 0; padding-left: 0; } + + .dropdown-menu { + position: static !important; + float: none; + transform: unset !important; + } } @@ -66,8 +90,8 @@ .navbar-text { display: inline-block; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; } @@ -76,9 +100,15 @@ // Custom styles for responsive collapsing and toggling of navbar contents. // Powered by the collapse Bootstrap JavaScript plugin. +// When collapsed, prevent the toggleable navbar contents from appearing in +// the default flexbox row orienation. Requires the use of `flex-wrap: wrap` +// on the `.navbar` parent. +.navbar-collapse { + flex-basis: 100%; +} + // Button for toggling the navbar when in its collapsed state .navbar-toggler { - align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; @@ -103,34 +133,17 @@ background-size: 100% 100%; } -// Use `position` on the toggler to prevent it from being auto placed as a flex -// item and allow easy placement. -.navbar-toggler-left { - position: absolute; - left: $navbar-padding-x; -} -.navbar-toggler-right { - position: absolute; - right: $navbar-padding-x; -} - -// Generate series of `.navbar-toggleable-*` responsive classes for configuring +// Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. -.navbar-toggleable { +.navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { @include media-breakpoint-down($breakpoint) { - .navbar-nav { - .dropdown-menu { - position: static; - float: none; - } - } - - > .container { + > .container, + > .container-fluid { padding-right: 0; padding-left: 0; } @@ -139,11 +152,16 @@ @include media-breakpoint-up($next) { flex-direction: row; flex-wrap: nowrap; - align-items: center; + justify-content: flex-start; .navbar-nav { flex-direction: row; + .dropdown-menu { + position: absolute !important; + top: 100% !important; + } + .nav-link { padding-right: .5rem; padding-left: .5rem; @@ -151,16 +169,14 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container { - display: flex; + > .container, + > .container-fluid { flex-wrap: nowrap; - align-items: center; } // scss-lint:disable ImportantRule .navbar-collapse { display: flex !important; - width: 100%; } // scss-lint:enable ImportantRule @@ -179,8 +195,7 @@ // Dark links against a light background .navbar-light { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-light-active-color; @include hover-focus { @@ -201,20 +216,21 @@ } } - .open > .nav-link, + .show > .nav-link, .active > .nav-link, - .nav-link.open, + .nav-link.show, .nav-link.active { color: $navbar-light-active-color; } } .navbar-toggler { - border-color: $navbar-light-toggler-border; + color: $navbar-light-color; + border-color: $navbar-light-toggler-border-color; } .navbar-toggler-icon { - background-image: $navbar-light-toggler-bg; + background-image: $navbar-light-toggler-icon-bg; } .navbar-text { @@ -224,8 +240,7 @@ // White links against a dark background .navbar-inverse { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-inverse-active-color; @include hover-focus { @@ -246,20 +261,21 @@ } } - .open > .nav-link, + .show > .nav-link, .active > .nav-link, - .nav-link.open, + .nav-link.show, .nav-link.active { color: $navbar-inverse-active-color; } } .navbar-toggler { - border-color: $navbar-inverse-toggler-border; + color: $navbar-inverse-color; + border-color: $navbar-inverse-toggler-border-color; } .navbar-toggler-icon { - background-image: $navbar-inverse-toggler-bg; + background-image: $navbar-inverse-toggler-icon-bg; } .navbar-text { diff --git a/scss/_normalize.scss b/scss/_normalize.scss deleted file mode 100644 index 6bafd53f6..000000000 --- a/scss/_normalize.scss +++ /dev/null @@ -1,461 +0,0 @@ -/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ - -// -// 1. Change the default font family in all browsers (opinionated). -// 2. Correct the line height in all browsers. -// 3. Prevent adjustments of font size after orientation changes in -// IE on Windows Phone and in iOS. -// - -// Document -// ========================================================================== - -html { - font-family: sans-serif; // 1 - line-height: 1.15; // 2 - -ms-text-size-adjust: 100%; // 3 - -webkit-text-size-adjust: 100%; // 3 -} - -// Sections -// ========================================================================== - -// -// Remove the margin in all browsers (opinionated). -// - -body { - margin: 0; -} - -// -// Add the correct display in IE 9-. -// - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -// -// Correct the font size and margin on `h1` elements within `section` and -// `article` contexts in Chrome, Firefox, and Safari. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -// Grouping content -// ========================================================================== - -// -// Add the correct display in IE 9-. -// 1. Add the correct display in IE. -// - -figcaption, -figure, -main { // 1 - display: block; -} - -// -// Add the correct margin in IE 8. -// - -figure { - margin: 1em 40px; -} - -// -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. -// - -hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 -} - -// -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. -// - -pre { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 -} - -// Text-level semantics -// ========================================================================== - -// -// 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; // 1 - -webkit-text-decoration-skip: objects; // 2 -} - -// -// Remove the outline on focused links when they are also active or hovered -// in all browsers (opinionated). -// - -a:active, -a:hover { - outline-width: 0; -} - -// -// 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: none; // 1 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 -} - -// -// Prevent the duplicate application of `bolder` by the next rule in Safari 6. -// - -b, -strong { - font-weight: inherit; -} - -// -// Add the correct font weight in Chrome, Edge, and Safari. -// - -b, -strong { - font-weight: bolder; -} - -// -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. -// - -code, -kbd, -samp { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 -} - -// -// Add the correct font style in Android 4.3-. -// - -dfn { - font-style: italic; -} - -// -// Add the correct background and color in IE 9-. -// - -mark { - background-color: #ff0; - color: #000; -} - -// -// Add the correct font size in all browsers. -// - -small { - font-size: 80%; -} - -// -// Prevent `sub` and `sup` elements from affecting the line height in -// all browsers. -// - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -// Embedded content -// ========================================================================== - -// -// Add the correct display in IE 9-. -// - -audio, -video { - display: inline-block; -} - -// -// Add the correct display in iOS 4-7. -// - -audio:not([controls]) { - display: none; - height: 0; -} - -// -// Remove the border on images inside links in IE 10-. -// - -img { - border-style: none; -} - -// -// Hide the overflow in IE. -// - -svg:not(:root) { - overflow: hidden; -} - -// Forms -// ========================================================================== - -// -// 1. Change the font styles in all browsers (opinionated). -// 2. Remove the margin in Firefox and Safari. -// - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; // 1 - font-size: 100%; // 1 - line-height: 1.15; // 1 - margin: 0; // 2 -} - -// -// Show the overflow in IE. -// 1. Show the overflow in Edge. -// - -button, -input { // 1 - overflow: visible; -} - -// -// Remove the inheritance of text transform in Edge, Firefox, and IE. -// 1. Remove the inheritance of text transform in Firefox. -// - -button, -select { // 1 - text-transform: none; -} - -// -// 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 and Safari. -// - -button, -html [type="button"], // 1 -[type="reset"], -[type="submit"] { - -webkit-appearance: button; // 2 -} - -// -// Remove the inner border and padding in Firefox. -// - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -// -// Restore the focus styles unset by the previous rule. -// - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -// -// Change the border, margin, and padding in all browsers (opinionated). -// - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -// -// 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 { - box-sizing: border-box; // 1 - color: inherit; // 2 - display: table; // 1 - max-width: 100%; // 1 - padding: 0; // 3 - white-space: normal; // 1 -} - -// -// 1. Add the correct display in IE 9-. -// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. -// - -progress { - display: inline-block; // 1 - vertical-align: baseline; // 2 -} - -// -// Remove the default vertical scrollbar in IE. -// - -textarea { - overflow: auto; -} - -// -// 1. Add the correct box sizing in IE 10-. -// 2. Remove the padding in IE 10-. -// - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 -} - -// -// 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; -} - -// -// 1. Correct the odd appearance in Chrome and Safari. -// 2. Correct the outline style in Safari. -// - -[type="search"] { - -webkit-appearance: textfield; // 1 - outline-offset: -2px; // 2 -} - -// -// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. -// - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// 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 -} - -// Interactive -// ========================================================================== - -// -// Add the correct display in IE 9-. -// 1. Add the correct display in Edge, IE, and Firefox. -// - -details, // 1 -menu { - display: block; -} - -// -// Add the correct display in all browsers. -// - -summary { - display: list-item; -} - -// Scripting -// ========================================================================== - -// -// Add the correct display in IE 9-. -// - -canvas { - display: inline-block; -} - -// -// Add the correct display in IE. -// - -template { - display: none; -} - -// Hidden -// ========================================================================== - -// -// Add the correct display in IE 10-. -// - -[hidden] { - display: none; -} diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 24aa028d1..a04929987 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -23,15 +23,14 @@ z-index: 2; color: $pagination-active-color; background-color: $pagination-active-bg; - border-color: $pagination-active-border; + border-color: $pagination-active-border-color; } &.disabled .page-link { color: $pagination-disabled-color; pointer-events: none; - cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback. background-color: $pagination-disabled-bg; - border-color: $pagination-disabled-border; + border-color: $pagination-disabled-border-color; } } @@ -49,7 +48,7 @@ color: $pagination-hover-color; text-decoration: none; background-color: $pagination-hover-bg; - border-color: $pagination-hover-border; + border-color: $pagination-hover-border-color; } } diff --git a/scss/_popover.scss b/scss/_popover.scss index 1b6363405..e3a0d9d6d 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -18,75 +18,106 @@ @include border-radius($border-radius-lg); @include box-shadow($popover-box-shadow); + // Arrows + // + // .arrow is outer, .arrow::after is inner + + .arrow { + position: absolute; + display: block; + width: $popover-arrow-width; + height: $popover-arrow-height; + } + + .arrow::before, + .arrow::after { + position: absolute; + display: block; + border-color: transparent; + border-style: solid; + } + + .arrow::before { + content: ""; + border-width: $popover-arrow-outer-width; + } + .arrow::after { + content: ""; + border-width: $popover-arrow-outer-width; + } // Popover directions - &.popover-top, - &.bs-tether-element-attached-bottom { - margin-top: -$popover-arrow-width; + &.bs-popover-top { + margin-bottom: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + bottom: 0; + } + + .arrow::before, + .arrow::after { border-bottom-width: 0; } - &::before { + .arrow::before { bottom: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { bottom: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-color; } } - &.popover-right, - &.bs-tether-element-attached-left { + &.bs-popover-right { margin-left: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + left: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-left-width: 0; } - &::before { + .arrow::before { left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { left: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-right-color: $popover-arrow-color; } } - &.popover-bottom, - &.bs-tether-element-attached-top { + &.bs-popover-bottom { margin-top: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + top: 0; + } + + .arrow::before, + .arrow::after { + margin-left: -($popover-arrow-width - 3); border-top-width: 0; } - &::before { + .arrow::before { top: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { top: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; - border-bottom-color: $popover-title-bg; + border-bottom-color: $popover-arrow-color; } // This will remove the popover-title's border just below the arrow @@ -102,28 +133,43 @@ } } - &.popover-left, - &.bs-tether-element-attached-right { - margin-left: -$popover-arrow-width; + &.bs-popover-left { + margin-right: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + right: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-right-width: 0; } - &::before { + .arrow::before { right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { right: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; } } + &.bs-popover-auto { + &[x-placement^="top"] { + @extend .bs-popover-top; + } + &[x-placement^="right"] { + @extend .bs-popover-right; + } + &[x-placement^="bottom"] { + @extend .bs-popover-bottom; + } + &[x-placement^="left"] { + @extend .bs-popover-left; + } + } } @@ -132,6 +178,7 @@ padding: $popover-title-padding-y $popover-title-padding-x; margin-bottom: 0; // Reset the default from Reboot font-size: $font-size-base; + color: $popover-title-color; background-color: $popover-title-bg; border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); @@ -144,28 +191,5 @@ .popover-content { padding: $popover-content-padding-y $popover-content-padding-x; -} - - -// Arrows -// -// .popover-arrow is outer, .popover-arrow::after is inner - -.popover::before, -.popover::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.popover::before { - content: ""; - border-width: $popover-arrow-outer-width; -} -.popover::after { - content: ""; - border-width: $popover-arrow-width; + color: $popover-content-color; } diff --git a/scss/_progress.scss b/scss/_progress.scss index 02e4c3bd2..f7491a64b 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,10 +1,8 @@ -// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } -// Basic progress bar .progress { display: flex; overflow: hidden; // force rounded corners by cropping it @@ -13,20 +11,22 @@ text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); + @include box-shadow($progress-box-shadow); } + .progress-bar { height: $progress-height; + line-height: $progress-height; color: $progress-bar-color; background-color: $progress-bar-bg; + @include transition($progress-bar-transition); } -// Striped .progress-bar-striped { @include gradient-striped(); background-size: $progress-height $progress-height; } -// Animated .progress-bar-animated { animation: progress-bar-stripes $progress-bar-animation-timing; } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 557829f25..33fc2d660 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,86 +1,62 @@ -// scss-lint:disable QualifyingElement, DuplicateProperty +// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix // Reboot // -// Global resets to common HTML elements and more for easier usage by Bootstrap. -// Adds additional rules on top of Normalize.css, including several overrides. +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css -// Reset the box-sizing -// -// Change from `box-sizing: content-box` to `border-box` so that when you add -// `padding` or `border`s to an element, the overall declared `width` does not -// change. For example, `width: 100px;` will always be `100px` despite the -// `border: 10px solid red;` and `padding: 20px;`. -// -// Heads up! This reset may cause conflicts with some third-party widgets. For -// recommendations on resolving such conflicts, see -// https://getbootstrap.com/getting-started/#third-box-sizing. +// Document // -// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// 2. Change the default font family in all browsers. +// 3. Correct the line height in all browsers. +// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so +// we force a non-overlapping, non-auto-hiding scrollbar to counteract. +// 6. Change the default tap highlight to be completely transparent in iOS. html { - box-sizing: border-box; + box-sizing: border-box; // 1 + font-family: sans-serif; // 2 + line-height: 1.15; // 3 + -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } *, *::before, *::after { - box-sizing: inherit; + box-sizing: inherit; // 1 } - -// Make viewport responsive -// -// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in -// 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 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 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"; }`). +// IE10+ doesn't honor `<meta name="viewport">` in some cases. @at-root { @-ms-viewport { width: device-width; } } +// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) +article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} +// Body // -// Reset HTML, body, and more -// - -html { - // We assume no initial pixel `font-size` for accessibility reasons. This - // allows web visitors to customize their browser default font-size, making - // your project more inclusive and accessible to everyone. - - // As a side-effect of setting the @viewport above, - // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. - // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, - // thus making it hard to click on stuff near the right edge of the page. - // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. - // See https://github.com/twbs/bootstrap/issues/18543 - // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ - -ms-overflow-style: scrollbar; - - // Changes the default tap highlight to be completely transparent in iOS. - -webkit-tap-highlight-color: rgba(0,0,0,0); -} +// 1. Remove the margin in all browsers. +// 2. As a best practice, apply a default `background-color`. body { + margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; - // Go easy on the eyes and use something other than `#000` for text color: $body-color; - // By default, `<body>` has no `background-color` so we set one as a best practice. - background-color: $body-bg; + background-color: $body-bg; // 2 } // Suppress the focus outline on elements that cannot be accessed via keyboard. @@ -93,6 +69,18 @@ body { } +// Content grouping +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 +} + + // // Typography // @@ -116,10 +104,18 @@ p { } // Abbreviations +// +// 1. Remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + abbr[title], -// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 -abbr[data-original-title] { - cursor: help; +abbr[data-original-title] { // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + cursor: help; // 3 + border-bottom: 0; // 1 } address { @@ -155,6 +151,35 @@ blockquote { margin: 0 0 1rem; } +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { bottom: -.25em; } +sup { top: -.5em; } + // // Links @@ -163,8 +188,10 @@ blockquote { a { color: $link-color; text-decoration: $link-decoration; + background-color: transparent; // Remove the gray background on active links in IE 10. + -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. - @include hover-focus { + @include hover { color: $link-hover-color; text-decoration: $link-hover-decoration; } @@ -195,12 +222,20 @@ a:not([href]):not([tabindex]) { // Code // +pre, +code, +kbd, +samp { + font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers. + font-size: 1em; // Correct the odd `em` font sizing in all browsers. +} + pre { // Remove browser default top margin 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 + // Don't allow content to break outside overflow: auto; } @@ -210,33 +245,22 @@ pre { // figure { - // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. - // We reset that to create a better flow in-page. + // Apply a consistent margin strategy (matches our type styles). margin: 0 0 1rem; } // -// Images +// Images and content // img { - // By default, `<img>`s are `inline-block`. This assumes that, and vertically - // centers them. This won't apply should you reset them to `block` level. vertical-align: middle; - // Note: `<img>`s are deliberately not made responsive by default. - // For the rationale behind this, see the comments on the `.img-fluid` class. + border-style: none; // Remove the border on images inside links in IE 10-. } - -// iOS "clickable elements" fix for role="button" -// -// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) -// for traditionally non-focusable elements with role="button" -// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -[role="button"] { - cursor: pointer; +svg:not(:root) { + overflow: hidden; // Hide the overflow in IE } @@ -268,10 +292,7 @@ textarea { // table { - // No longer part of Normalize since v4 - border-collapse: collapse; - // Reset for nesting within parents with `background-color`. - background-color: $table-bg; + border-collapse: collapse; // Prevent double borders } caption { @@ -283,7 +304,7 @@ caption { } th { - // Centered by default, but left-align-ed to match the `td`s below. + // Matches default `<td>` alignment text-align: left; } @@ -310,20 +331,47 @@ button:focus { input, button, select, +optgroup, textarea { - // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are - // properly inherited. However, `line-height` isn't inherited there. + margin: 0; // Remove the margin in Firefox and Safari + font-family: inherit; + font-size: inherit; line-height: inherit; } +button, +input { + overflow: visible; // Show the overflow in Edge +} + +button, +select { + text-transform: none; // Remove the inheritance of text transform in Firefox +} + +// 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 and Safari. +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; +} + 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; - } + box-sizing: border-box; // 1. Add the correct box sizing in IE 10- + padding: 0; // 2. Remove the padding in IE 10- } @@ -340,6 +388,7 @@ input[type="month"] { } textarea { + overflow: auto; // Remove the default vertical scrollbar in IE. // Textareas should really only resize vertically so they don't break their (horizontal) containers. resize: vertical; } @@ -357,33 +406,76 @@ fieldset { border: 0; } +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. legend { - // Reset the entire legend element to match the `fieldset` display: block; width: 100%; + max-width: 100%; // 1 padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; + color: inherit; // 2 + white-space: normal; // 1 +} + +progress { + vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. +} + +// 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; } -input[type="search"] { +[type="search"] { // This overrides the extra rounded corners on search inputs in iOS so that our // `.form-control` class can properly style them. Note that this cannot simply // be added to `.form-control` as it's not specific enough. For details, see // https://github.com/twbs/bootstrap/issues/11586. + outline-offset: -2px; // 2. Correct the outline style in Safari. + -webkit-appearance: none; +} + +// +// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -// todo: needed? +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + font: inherit; // 2 + -webkit-appearance: button; // 1 +} + +// +// Correct element displays +// + output { display: inline-block; -// font-size: $font-size-base; -// line-height: $line-height; -// color: $input-color; +} + +summary { + display: list-item; // Add the correct display in all browsers +} + +template { + display: none; // Add the correct display in IE } // Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Needed for proper display in IE 10-. [hidden] { display: none !important; } diff --git a/scss/_tables.scss b/scss/_tables.scss index 47be2c508..36c3dab77 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -6,6 +6,7 @@ width: 100%; max-width: 100%; margin-bottom: $spacer; + background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, td { @@ -124,14 +125,27 @@ th, td, thead th { - border-color: $body-bg; + border-color: $table-inverse-border-color; } &.table-bordered { border: 0; } -} + &.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-inverse-bg-accent; + } + } + + &.table-hover { + tbody tr { + @include hover { + background-color: $table-inverse-bg-hover; + } + } + } +} // Responsive tables @@ -141,13 +155,15 @@ // will display normally. .table-responsive { - display: block; - width: 100%; - overflow-x: auto; - -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 - - // Prevent double border on horizontal scroll due to use of `display: block;` - &.table-bordered { - border: 0; + @include media-breakpoint-down(md) { + display: block; + width: 100%; + overflow-x: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 + + // Prevent double border on horizontal scroll due to use of `display: block;` + &.table-bordered { + border: 0; + } } } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 24e198d46..fe97fbbbd 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -3,6 +3,7 @@ position: absolute; z-index: $zindex-tooltip; display: block; + margin: $tooltip-margin; // 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(); @@ -13,62 +14,86 @@ &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { - padding: $tooltip-arrow-width 0; - margin-top: -$tooltip-margin; + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; + } - .tooltip-inner::before { + &.bs-tooltip-top { + padding: $tooltip-arrow-width 0; + .arrow { bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } } - &.tooltip-right, - &.bs-tether-element-attached-left { + &.bs-tooltip-right { padding: 0 $tooltip-arrow-width; - margin-left: $tooltip-margin; - - .tooltip-inner::before { - top: 50%; + .arrow { left: 0; - margin-top: -$tooltip-arrow-width; + } + + .arrow::before { + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } } - &.tooltip-bottom, - &.bs-tether-element-attached-top { + &.bs-tooltip-bottom { padding: $tooltip-arrow-width 0; - margin-top: $tooltip-margin; - - .tooltip-inner::before { + .arrow { top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } } - &.tooltip-left, - &.bs-tether-element-attached-right { + &.bs-tooltip-left { padding: 0 $tooltip-arrow-width; - margin-left: -$tooltip-margin; + .arrow { + right: 0; + } - .tooltip-inner::before { - top: 50%; + .arrow::before { right: 0; - margin-top: -$tooltip-arrow-width; + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } } + &.bs-tooltip-auto { + &[x-placement^="top"] { + @extend .bs-tooltip-top; + } + &[x-placement^="right"] { + @extend .bs-tooltip-right; + } + &[x-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[x-placement^="left"] { + @extend .bs-tooltip-left; + } + } + + .arrow::before { + position: absolute; + border-color: transparent; + border-style: solid; + } } // Wrapper for the tooltip content @@ -79,12 +104,4 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); - - &::before { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } } diff --git a/scss/_type.scss b/scss/_type.scss index 13a64b06f..fc9c791c4 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; } // hr { - margin-top: $spacer-y; - margin-bottom: $spacer-y; + margin-top: 1rem; + margin-bottom: 1rem; border: 0; border-top: $hr-border-width solid $hr-border-color; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 36dc429c8..20826e8e0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -21,8 +21,8 @@ // Forms // Dropdowns // Z-index master list -// Navbar // Navs +// Navbar // Pagination // Jumbotron // Form states and alerts @@ -138,36 +138,15 @@ $enable-print-styles: true !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. -$spacer: 1rem !default; -$spacer-x: $spacer !default; -$spacer-y: $spacer !default; +$spacer: 1rem !default; $spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer-x * .25), - y: ($spacer-y * .25) - ), - 2: ( - x: ($spacer-x * .5), - y: ($spacer-y * .5) - ), - 3: ( - x: $spacer-x, - y: $spacer-y - ), - 4: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 5: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) ) !default; -$border-width: 1px !default; // This variable affects the `.h-*` and `.w-*` classes. $sizes: ( @@ -183,9 +162,6 @@ $sizes: ( $body-bg: $white !default; $body-color: $gray-dark !default; -$inverse-bg: $gray-dark !default; -$inverse-color: $gray-lighter !default; - // Links // @@ -240,12 +216,35 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$border-width: 1px !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +$component-active-color: $white !default; +$component-active-bg: $brand-primary !default; + +$caret-width: .3em !default; + +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; + + // Fonts // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; @@ -291,8 +290,6 @@ $small-font-size: 80% !default; $text-muted: $gray-light !default; -$abbr-border-color: $gray-light !default; - $blockquote-small-color: $gray-light !default; $blockquote-font-size: ($font-size-base * 1.25) !default; $blockquote-border-color: $gray-lighter !default; @@ -311,27 +308,6 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: 5px !default; -// Components -// -// Define common padding and border radius sizes and more. - -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; - -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; - -$component-active-color: $white !default; -$component-active-bg: $brand-primary !default; - -$caret-width: .3em !default; - -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; - - // Tables // // Customizes the `.table` component with basic values, each used across all table variations. @@ -340,28 +316,39 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; - -$table-inverse-bg: $gray-dark !default; -$table-inverse-color: $body-bg !default; - $table-bg-accent: rgba($black,.05) !default; $table-bg-hover: rgba($black,.075) !default; $table-bg-active: $table-bg-hover !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-lighter !default; + $table-head-bg: $gray-lighter !default; $table-head-color: $gray !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; +$table-inverse-bg: $gray-dark !default; +$table-inverse-bg-accent: rgba($white, .05) !default; +$table-inverse-bg-hover: rgba($white, .075) !default; +$table-inverse-border-color: lighten($gray-dark, 7.5%) !default; +$table-inverse-color: $body-bg !default; // Buttons // // For each of Bootstrap's buttons, define text, background and border color. -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: 1rem !default; +$input-btn-line-height: 1.25 !default; + +$input-btn-padding-y-sm: .25rem !default; +$input-btn-padding-x-sm: .5rem !default; +$input-btn-line-height-sm: 1.5 !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: 1.5 !default; + $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; $btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; @@ -369,38 +356,31 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; $btn-primary-color: $white !default; $btn-primary-bg: $brand-primary !default; -$btn-primary-border: $btn-primary-bg !default; +$btn-primary-border-color: $btn-primary-bg !default; $btn-secondary-color: $gray-dark !default; $btn-secondary-bg: $white !default; -$btn-secondary-border: #ccc !default; +$btn-secondary-border-color: #ccc !default; $btn-info-color: $white !default; $btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; +$btn-info-border-color: $btn-info-bg !default; $btn-success-color: $white !default; $btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; +$btn-success-border-color: $btn-success-bg !default; $btn-warning-color: $white !default; $btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; +$btn-warning-border-color: $btn-warning-bg !default; $btn-danger-color: $white !default; $btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; +$btn-danger-border-color: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !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; @@ -412,10 +392,6 @@ $btn-transition: all .2s ease-in-out !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - $input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; @@ -429,21 +405,15 @@ $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-bg-focus: $input-bg !default; -$input-border-focus: lighten($brand-primary, 25%) !default; -$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default; +$input-border-color-focus: lighten($brand-primary, 25%) !default; +$input-box-shadow-focus: $input-box-shadow, rgba($input-border-color-focus, .6) !default; $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -457,24 +427,20 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; -$form-group-margin-bottom: $spacer-y !default; +$form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border-color !default; -$cursor-disabled: not-allowed !default; - $custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; $custom-control-spacer-y: .25rem !default; +$custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default; $custom-control-indicator-bg: #ddd !default; $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; -$custom-control-disabled-cursor: $cursor-disabled !default; $custom-control-disabled-indicator-bg: $gray-lighter !default; $custom-control-disabled-description-color: $gray-light !default; @@ -499,10 +465,10 @@ $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; $custom-radio-checked-icon: str-replace(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"), "#", "%23") !default; -$custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; +$custom-select-padding-x: .75rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-line-height !default; +$custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-light !default; $custom-select-bg: $white !default; @@ -517,15 +483,14 @@ $custom-select-border-radius: $border-radius !default; $custom-select-focus-border-color: lighten($brand-primary, 25%) !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; -$custom-select-sm-padding-y: .2rem !default; $custom-select-sm-font-size: 75% !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; -$custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; +$custom-file-padding-x: .5rem !default; $custom-file-line-height: 1.5 !default; $custom-file-color: $gray !default; $custom-file-bg: $white !default; @@ -553,7 +518,7 @@ $form-icon-warning-color: $brand-warning !default; $form-icon-warning: str-replace(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"), "#", "%23") !default; $form-icon-danger-color: $brand-danger !default; -$form-icon-danger: str-replace(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"), "#", "%23") !default; +$form-icon-danger: str-replace(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='#{$form-icon-danger-color}' 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"), "#", "%23") !default; // Dropdowns @@ -578,6 +543,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; +$dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-x: 1.5rem !default; $dropdown-header-color: $gray-light !default; @@ -588,27 +554,45 @@ $dropdown-header-color: $gray-light !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown-backdrop: 990 !default; -$zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; -$zindex-sticky: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; +// Navs + +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-disabled-link-color: $gray-light !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-color: $gray !default; +$nav-tabs-active-link-bg: $body-bg !default; +$nav-tabs-active-link-border-color: #ddd !default; + +$nav-pills-border-radius: $border-radius !default; +$nav-pills-active-link-color: $component-active-color !default; +$nav-pills-active-link-bg: $component-active-bg !default; // Navbar -$navbar-border-radius: $border-radius !default; -$navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; -$navbar-brand-padding-y: .25rem !default; +$navbar-brand-font-size: $font-size-lg !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; -$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-padding-y: .25rem !default; +$navbar-toggler-padding-x: .75rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; @@ -616,47 +600,24 @@ $navbar-inverse-color: rgba($white,.5) !default; $navbar-inverse-hover-color: rgba($white,.75) !default; $navbar-inverse-active-color: rgba($white,1) !default; $navbar-inverse-disabled-color: rgba($white,.25) !default; -$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-inverse-toggler-border: rgba($white,.1) !default; +$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-inverse-toggler-border-color: rgba($white,.1) !default; $navbar-light-color: rgba($black,.5) !default; $navbar-light-hover-color: rgba($black,.7) !default; $navbar-light-active-color: rgba($black,.9) !default; $navbar-light-disabled-color: rgba($black,.3) !default; -$navbar-light-toggler-bg: str-replace(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"), "#", "%23") !default; -$navbar-light-toggler-border: rgba($black,.1) !default; - -// Navs - -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; -$nav-link-padding: .5em 1em !default; -$nav-link-hover-bg: $gray-lighter !default; -$nav-disabled-link-color: $gray-light !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; -$nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; - +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-border-color: rgba($black,.1) !default; // Pagination -$pagination-padding-x: .75rem !default; $pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .5rem !default; +$pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-lg: 1.5rem !default; +$pagination-padding-x-sm: .5rem !default; $pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; $pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; @@ -666,15 +627,15 @@ $pagination-border-color: #ddd !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; +$pagination-hover-border-color: #ddd !default; $pagination-active-color: $white !default; $pagination-active-bg: $brand-primary !default; -$pagination-active-border: $brand-primary !default; +$pagination-active-border-color: $brand-primary !default; $pagination-disabled-color: $gray-light !default; $pagination-disabled-bg: $white !default; -$pagination-disabled-border: #ddd !default; +$pagination-disabled-border-color: #ddd !default; // Jumbotron @@ -689,26 +650,26 @@ $jumbotron-bg: $gray-lighter !default; $state-success-text: #3c763d !default; $state-success-bg: #dff0d8 !default; -$state-success-border: darken($state-success-bg, 5%) !default; +$state-success-border-color: darken($state-success-bg, 5%) !default; $state-info-text: #31708f !default; $state-info-bg: #d9edf7 !default; -$state-info-border: darken($state-info-bg, 7%) !default; +$state-info-border-color: darken($state-info-bg, 7%) !default; $state-warning-text: #8a6d3b !default; $state-warning-bg: #fcf8e3 !default; $mark-bg: $state-warning-bg !default; -$state-warning-border: darken($state-warning-bg, 5%) !default; +$state-warning-border-color: darken($state-warning-bg, 5%) !default; $state-danger-text: #a94442 !default; $state-danger-bg: #f2dede !default; -$state-danger-border: darken($state-danger-bg, 5%) !default; +$state-danger-border-color: darken($state-danger-bg, 5%) !default; // Cards -$card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; +$card-spacer-x: 1.25rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; @@ -735,9 +696,11 @@ $tooltip-bg: $black !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: 3px !default; $tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; +$tooltip-margin: 0 !default; + $tooltip-arrow-width: 5px !default; +$tooltip-arrow-height: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; @@ -751,13 +714,16 @@ $popover-border-color: rgba($black,.2) !default; $popover-box-shadow: 0 5px 10px rgba($black,.2) !default; $popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; +$popover-title-color: $headings-color !default; $popover-title-padding-y: 8px !default; +$popover-title-padding-x: 14px !default; -$popover-content-padding-x: 14px !default; +$popover-content-color: $body-color !default; $popover-content-padding-y: 9px !default; +$popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; +$popover-arrow-height: 5px !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; @@ -777,8 +743,8 @@ $badge-color: $white !default; $badge-link-hover-color: $white !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; -$badge-padding-x: .4em !default; $badge-padding-y: .25em !default; +$badge-padding-x: .4em !default; $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when @@ -821,28 +787,28 @@ $modal-transition: transform .3s ease-out !default; // // Define alert colors, border radius, and padding. -$alert-padding-x: 1.25rem !default; $alert-padding-y: .75rem !default; -$alert-margin-bottom: $spacer-y !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; +$alert-success-border-color: $state-success-border-color !default; $alert-info-bg: $state-info-bg !default; $alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; +$alert-info-border-color: $state-info-border-color !default; $alert-warning-bg: $state-warning-bg !default; $alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; +$alert-warning-border-color: $state-warning-border-color !default; $alert-danger-bg: $state-danger-bg !default; $alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; +$alert-danger-border-color: $state-danger-border-color !default; // Progress bars @@ -855,6 +821,7 @@ $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; $progress-bar-color: $white !default; $progress-bar-bg: $brand-primary !default; $progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; // List group @@ -864,21 +831,18 @@ $list-group-border-color: rgba($black,.125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-x: 1.25rem !default; $list-group-item-padding-y: .75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-hover-bg: $gray-lightest !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default; +$list-group-hover-bg: $gray-lightest !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; $list-group-disabled-color: $gray-light !default; $list-group-disabled-bg: $list-group-bg !default; -$list-group-disabled-text-color: $list-group-disabled-color !default; $list-group-link-color: $gray !default; -$list-group-link-heading-color: $gray-dark !default; $list-group-link-hover-color: $list-group-link-color !default; $list-group-link-active-color: $list-group-color !default; @@ -933,7 +897,7 @@ $carousel-control-icon-width: 20px !default; $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-transition: transform .6s ease-in-out !default; +$carousel-transition: transform .6s ease !default; // Close @@ -943,19 +907,16 @@ $close-font-weight: $font-weight-bold !default; $close-color: $black !default; $close-text-shadow: 0 1px 0 $white !default; - // Code $code-font-size: 90% !default; -$code-padding-x: .4rem !default; $code-padding-y: .2rem !default; +$code-padding-x: .4rem !default; $code-color: #bd4147 !default; $code-bg: $gray-lightest !default; $kbd-color: $white !default; $kbd-bg: $gray-dark !default; -$pre-bg: $gray-lightest !default; $pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; $pre-scrollable-max-height: 340px !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 182b9626b..2ba685877 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -22,22 +22,16 @@ html { box-sizing: inherit; } - -// -// Variables -// - +@import "custom"; @import "variables"; // // Grid mixins // -@import "mixins/clearfix"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; @import "mixins/grid"; -@import "custom"; - @import "grid"; +@import "utilities/flex"; diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 978b086a1..5867f08ec 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -2,9 +2,8 @@ // // Includes only Normalize and our custom Reboot reset. +@import "custom"; @import "variables"; @import "mixins"; -@import "custom"; -@import "normalize"; @import "reboot"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 8cce876de..f7577f5c7 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,17 +1,15 @@ /*! - * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com) + * 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 "custom"; @import "variables"; @import "mixins"; -@import "custom"; -// Reset and dependencies -@import "normalize"; @import "print"; // Core CSS diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 6ed3a81ab..1e9307ebb 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,9 +1,9 @@ // Alerts @mixin alert-variant($background, $border, $body-color) { + color: $body-color; background-color: $background; border-color: $border; - color: $body-color; hr { border-top-color: darken($border, 5%); diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 54f29f41d..2024febcf 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -8,15 +8,15 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; border-top-left-radius: $radius; + border-top-right-radius: $radius; } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } } @@ -29,7 +29,7 @@ @mixin border-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; border-top-left-radius: $radius; + border-bottom-left-radius: $radius; } } diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss new file mode 100644 index 000000000..b2410e53a --- /dev/null +++ b/scss/mixins/_box-shadow.scss @@ -0,0 +1,5 @@ +@mixin box-shadow($shadow...) { + @if $enable-shadows { + box-shadow: $shadow; + } +} diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 6fd2e8e1e..be1d034d8 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 576px, md: 768px) +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,9 +10,9 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); @@ -21,7 +21,7 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @@ -31,7 +31,7 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @@ -41,9 +41,9 @@ // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. // Useful for making responsive utilities. // -// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "-sm" @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @@ -78,10 +78,11 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($lower, $breakpoints) { - @include media-breakpoint-down($upper, $breakpoints) { - @content; - } + $min: breakpoint-max($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { + @content; } } @@ -89,7 +90,10 @@ // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-between($name, $name, $breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @media (min-width: $min) and (max-width: $max) { @content; } } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f9981e326..47f2834ff 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -48,8 +48,8 @@ @mixin button-outline-variant($color, $color-hover: #fff) { color: $color; - background-image: none; background-color: transparent; + background-image: none; border-color: $color; @include hover { @@ -79,8 +79,9 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; + line-height: $line-height; @include border-radius($border-radius); } diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss index 4b1232d8b..e535b316d 100644 --- a/scss/mixins/_cards.scss +++ b/scss/mixins/_cards.scss @@ -13,6 +13,12 @@ @mixin card-outline-variant($color) { background-color: transparent; border-color: $color; + + .card-header, + .card-footer { + background-color: transparent; + border-color: $color; + } } // diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index b72cf2712..11a977b73 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { display: block; - content: ""; clear: both; + content: ""; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index c8aea9669..860795590 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -14,7 +14,9 @@ } // Set the border and box shadow on specific inputs to match - .form-control { + .form-control, + .custom-select, + .custom-file-control { border-color: $color; &:focus { @@ -25,15 +27,15 @@ // Set validation states also for addons .input-group-addon { color: $color; - border-color: $color; background-color: lighten($color, 40%); + border-color: $color; } } // Form control focus state // // Generate a customized focus state and for any input with the specified color, -// which defaults to the `@input-border-focus` variable. +// which defaults to the `@input-border-color-focus` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on @@ -46,34 +48,8 @@ &:focus { color: $input-color-focus; background-color: $input-bg-focus; - border-color: $input-border-focus; + border-color: $input-border-color-focus; outline: none; @include box-shadow($input-box-shadow-focus); } } - -// Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `<select>` -// element gets special love because it's special, and that's a fact! - -@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { - #{$parent} { - height: $input-height; - padding: $padding-y $padding-x; - font-size: $font-size; - line-height: $line-height; - @include border-radius($border-radius); - } - - select#{$parent} { - height: $input-height; - line-height: $input-height; - } - - textarea#{$parent}, - select[multiple]#{$parent} { - height: auto; - } -} diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 8bfd97c4d..bad79f961 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -17,8 +17,8 @@ } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { - background-repeat: repeat-x; background-image: linear-gradient($deg, $start-color, $end-color); + background-repeat: repeat-x; } @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 0aa814ab2..5459a86f4 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -22,7 +22,8 @@ @extend %grid-column; } } - .col#{$infix} { + .col#{$infix}, + .col#{$infix}-auto { @extend %grid-column; } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 9cd8c7bbb..b6d980577 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -3,9 +3,8 @@ // Generate semantic grid columns with these mixins. @mixin make-container($gutters: $grid-gutter-widths) { - position: relative; - margin-left: auto; margin-right: auto; + margin-left: auto; @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { @@ -69,7 +68,6 @@ @mixin make-col($size, $columns: $grid-columns) { flex: 0 0 percentage($size / $columns); - // width: percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 6dd55e705..4aa4b1d5d 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -8,16 +8,18 @@ // } // } // @else { +// scss-lint:disable Indentation &:hover { @content } +// scss-lint:enable Indentation // } } + @mixin hover-focus { @if $enable-hover-media-query { &:focus { @content } @include hover { @content } - } - @else { + } @else { &:focus, &:hover { @content @@ -32,8 +34,7 @@ @content } @include hover { @content } - } - @else { + } @else { &, &:focus, &:hover { @@ -49,8 +50,7 @@ @content } @include hover { @content } - } - @else { + } @else { &:focus, &:active, &:hover { diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 3db5b096a..ba27b5041 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -6,14 +6,11 @@ background-color: $background; } + //scss-lint:disable QualifyingElement a.list-group-item-#{$state}, button.list-group-item-#{$state} { color: $color; - .list-group-item-heading { - color: inherit; - } - @include hover-focus { color: $color; background-color: darken($background, 5%); @@ -25,4 +22,5 @@ border-color: $color; } } + // scss-lint:enable QualifyingElement } diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss index fb3d12e9f..493de03a3 100644 --- a/scss/mixins/_nav-divider.scss +++ b/scss/mixins/_nav-divider.scss @@ -3,8 +3,8 @@ // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($color: #e5e5e5) { - height: 1px; - margin: ($spacer-y / 2) 0; + height: 0; + margin: ($spacer / 2) 0; overflow: hidden; - background-color: $color; + border-top: 1px solid $color; } diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index b95273097..4cf9e79c7 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,17 +1,18 @@ +// scss-lint:disable DuplicateProperty @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; font-weight: $font-weight-normal; - letter-spacing: normal; - line-break: auto; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; text-shadow: none; text-transform: none; - white-space: normal; + letter-spacing: normal; word-break: normal; word-spacing: normal; + white-space: normal; + line-break: auto; } diff --git a/scss/mixins/_resize.scss b/scss/mixins/_resize.scss index 83fa63791..66f233a63 100644 --- a/scss/mixins/_resize.scss +++ b/scss/mixins/_resize.scss @@ -1,6 +1,6 @@ // Resize anything @mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` + resize: $direction; // Options: horizontal, vertical, both } diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index c20858324..a5fa51c5c 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -1,15 +1,17 @@ // Only display content to screen readers // // See: http://a11yproject.com/posts/how-to-hide-content +// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { position: absolute; width: 1px; height: 1px; padding: 0; - margin: -1px; overflow: hidden; clip: rect(0,0,0,0); + white-space: nowrap; + clip-path: inset(50%); border: 0; } @@ -25,8 +27,9 @@ position: static; width: auto; height: auto; - margin: 0; overflow: visible; clip: auto; + white-space: normal; + clip-path: none; } } diff --git a/scss/mixins/_text-truncate.scss b/scss/mixins/_text-truncate.scss index 5a40bf533..3504bb1aa 100644 --- a/scss/mixins/_text-truncate.scss +++ b/scss/mixins/_text-truncate.scss @@ -5,4 +5,4 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -}
\ No newline at end of file +} diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss deleted file mode 100644 index 4005c9d02..000000000 --- a/scss/mixins/_transforms.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Applies the given styles only when the browser support CSS3 3D transforms. -@mixin if-supports-3d-transforms() { - @media (-webkit-transform-3d) { - // Old Safari, Old Android - // http://caniuse.com/#feat=css-featurequeries - // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d - @content; - } - - @supports (transform: translate3d(0,0,0)) { - // The Proper Way: Using a CSS feature query - @content; - } -} diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss new file mode 100644 index 000000000..7e33dee31 --- /dev/null +++ b/scss/mixins/_transition.scss @@ -0,0 +1,9 @@ +@mixin transition($transition...) { + @if $enable-transitions { + @if length($transition) == 0 { + transition: $transition-base; + } @else { + transition: $transition; + } + } +} diff --git a/scss/mixins/_visibility.scss b/scss/mixins/_visibility.scss index 88c50b05d..f67fc1c52 100644 --- a/scss/mixins/_visibility.scss +++ b/scss/mixins/_visibility.scss @@ -1,5 +1,5 @@ // Visibility -@mixin invisible { - visibility: hidden !important; +@mixin invisible($visibility) { + visibility: $visibility !important; } diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index ae942a6fb..45353620a 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -1,5 +1,5 @@ // -// Display utilities +// Utilities for common `display` values // @each $breakpoint in map-keys($grid-breakpoints) { @@ -16,3 +16,38 @@ .d#{$infix}-inline-flex { display: inline-flex !important; } } } + + +// +// Utilities for toggling `display` in print +// + +.d-print-block { + display: none !important; + + @media print { + display: block !important; + } +} + +.d-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} + +.d-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +.d-print-none { + @media print { + display: none !important; + } +} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 1b98aaa3f..cc696785d 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -6,9 +6,9 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .flex#{$infix}-first { order: -1; } - .flex#{$infix}-last { order: 1; } - .flex#{$infix}-unordered { order: 0; } + .order#{$infix}-first { order: -1; } + .order#{$infix}-last { order: 1; } + .order#{$infix}-0 { order: 0; } .flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-column { flex-direction: column !important; } diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 6056e2b7e..c89816b5e 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -5,22 +5,20 @@ $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @each $prop, $abbrev in (margin: m, padding: p) { - @each $size, $lengths in $spacers { - $length-x: map-get($lengths, x); - $length-y: map-get($lengths, y); + @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; } - .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; } + .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; } + .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; } + .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; } .#{$abbrev}x#{$infix}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; + #{$prop}-right: $length !important; + #{$prop}-left: $length !important; } .#{$abbrev}y#{$infix}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; + #{$prop}-top: $length !important; + #{$prop}-bottom: $length !important; } } } diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss index fcedc9cb9..823406dc3 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -2,54 +2,10 @@ // Visibility utilities // -.invisible { - @include invisible(); -} - -// Responsive visibility utilities - -@each $bp in map-keys($grid-breakpoints) { - .hidden-#{$bp}-up { - @include media-breakpoint-up($bp) { - display: none !important; - } - } - .hidden-#{$bp}-down { - @include media-breakpoint-down($bp) { - display: none !important; - } - } +.visible { + @include invisible(visible); } - -// Print utilities -// -// Media queries are placed on the inside to be mixin-friendly. - -.visible-print-block { - display: none !important; - - @media print { - display: block !important; - } -} -.visible-print-inline { - display: none !important; - - @media print { - display: inline !important; - } -} -.visible-print-inline-block { - display: none !important; - - @media print { - display: inline-block !important; - } -} - -.hidden-print { - @media print { - display: none !important; - } +.invisible { + @include invisible(hidden); } |