diff options
| author | Mark Otto <[email protected]> | 2016-02-06 20:33:26 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 20:33:26 -0800 |
| commit | d7d0e186bdfb52856a455c438538582fe95324e6 (patch) | |
| tree | 43484b5b58471431662e0a8be2b3bb9eb7f00d31 /scss | |
| parent | f6ad665c26f8a376a806721feaf3f38ceadc7e79 (diff) | |
| parent | cb7b78087690e756e33b6f6abdb3548f73f8bb1b (diff) | |
| download | bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.tar.xz bootstrap-d7d0e186bdfb52856a455c438538582fe95324e6.zip | |
Merge branch 'v4-dev' into v4-split-buttons
Diffstat (limited to 'scss')
48 files changed, 861 insertions, 694 deletions
diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 06c6207d1..f739a971a 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -1,4 +1,16 @@ -scss_files: "scss/*.scss" +# Default application configuration that all configurations inherit from. +scss_files: + - "**/*.scss" + - "docs/assets/scss/**/*.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: @@ -6,8 +18,16 @@ linters: space_before_bang: true space_after_bang: false + BemDepth: + enabled: false + max_elements: 1 + BorderZero: enabled: true + convention: zero # or `none` + + ChainedClasses: + enabled: false ColorKeyword: enabled: true @@ -17,7 +37,10 @@ linters: Comment: enabled: true - exclude: ['_normalize.scss', 'bootstrap.scss'] + exclude: + - _normalize.scss + - bootstrap.scss + style: silent DebugStatement: enabled: true @@ -25,9 +48,11 @@ linters: DeclarationOrder: enabled: false + DisableLinterReason: + enabled: false + DuplicateProperty: enabled: true - exclude: ['mixins/_tab-focus.scss', '_reboot.scss'] ElsePlacement: enabled: true @@ -40,6 +65,9 @@ linters: EmptyRule: enabled: true + ExtendDirective: + enabled: false + FinalNewline: enabled: true present: true @@ -59,7 +87,7 @@ linters: enabled: true ImportantRule: - enabled: false + enabled: true ImportPath: enabled: true @@ -68,11 +96,12 @@ linters: Indentation: enabled: true + allow_non_nested_indentation: false character: space # or 'tab' width: 2 LeadingZero: - enabled: false + enabled: true style: exclude_zero # or 'include_zero' MergeableSelector: @@ -82,326 +111,350 @@ linters: NameFormat: enabled: true allow_leading_underscore: true - convention: hyphenated_lowercase # or 'BEM', or a regex pattern + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern NestingDepth: - enabled: false + 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 - severity: warning - exclude: ['_normalize.scss'] - order: [ - "position", - "top", - "right", - "bottom", - "left", - "z-index", - "-webkit-box-sizing", - "-moz-box-sizing", - "box-sizing", - "display", - "float", - "width", - "min-width", - "max-width", - "height", - "min-height", - "max-height", - "flex", - "flex-direction", - "flex-flow", - "flex-order", - "flex-pack", - "flex-align", - "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", - "-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", - "animation-direction" - ] + min_properties: 2 + separate_groups: false + 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-flow + - flex-grow + - flex-order + - flex-pack + - 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 + - -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: false + enabled: true allow_element_with_attribute: false allow_element_with_class: false allow_element_with_id: false SelectorDepth: - enabled: false + enabled: true + max_depth: 4 SelectorFormat: - enabled: true - convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern + 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] SingleLinePerProperty: - enabled: true + enabled: false allow_single_line_rule_sets: true SingleLinePerSelector: @@ -409,6 +462,7 @@ linters: SpaceAfterComma: enabled: false + style: one_space # or 'no_space', or 'at_least_one_space' SpaceAfterPropertyColon: enabled: true @@ -417,10 +471,17 @@ linters: 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 - allow_single_line_padding: true + style: space # or 'new_line' + allow_single_line_padding: false SpaceBetweenParens: enabled: true @@ -428,14 +489,20 @@ linters: StringQuotes: enabled: true - style: double_quotes + style: double_quotes # or double_quotes TrailingSemicolon: enabled: true + TrailingWhitespace: + enabled: true + TrailingZero: enabled: false + TransitionAll: + enabled: false + UnnecessaryMantissa: enabled: true @@ -448,11 +515,17 @@ linters: UrlQuotes: enabled: true - VendorPrefixes: + VariableForProperty: + enabled: false + properties: [] + + VendorPrefix: enabled: true identifier_list: base - include: [] - exclude: ['_normalize.scss'] + additional_identifiers: [] + excluded_identifiers: [] + exclude: + - _normalize.scss ZeroUnit: enabled: true diff --git a/scss/_alert.scss b/scss/_alert.scss index b9f6c60da..55fc101dc 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -7,15 +7,6 @@ margin-bottom: $spacer-y; border: $alert-border-width solid transparent; @include border-radius($alert-border-radius); - - // Improve alignment and spacing of inner content - > p, - > ul { - margin-bottom: 0; - } - > p + p { - margin-top: 5px; - } } // Headings for larger alerts @@ -35,7 +26,7 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding + 20); + padding-right: ($alert-padding + 20px); // Adjust close link position .close { diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 5ccca354c..1a09bba20 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -10,13 +10,28 @@ .breadcrumb-item { float: left; + // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item::before { + display: inline-block; // Suppress underlining of the separator in modern browsers padding-right: $breadcrumb-item-padding; padding-left: $breadcrumb-item-padding; color: $breadcrumb-divider-color; content: "#{$breadcrumb-divider}"; } + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `<ul>`s. The `::before` pseudo-element generates an element + // *within* the .breadcrumb-item and thereby inherits the `text-decoration`. + // + // To trick IE into suppressing the underline, we give the pseudo-element an + // underline and then immediately remove it. + + .breadcrumb-item:hover::before { + text-decoration: underline; + } + + .breadcrumb-item:hover::before { + text-decoration: none; + } + &.active { color: $breadcrumb-active-color; } diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 818ba1771..2e978ba1f 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,3 +1,5 @@ +// scss-lint:disable QualifyingElement + // Make the div behave like a button .btn-group, .btn-group-vertical { @@ -121,7 +123,7 @@ // 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 { - @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + @include box-shadow($btn-active-box-shadow); // Show no shadow for `.btn-link` since it has no other button styles. &.btn-link { @@ -183,11 +185,9 @@ border-radius: 0; } &:first-child:not(:last-child) { - border-top-right-radius: $btn-border-radius; @include border-bottom-radius(0); } &:last-child:not(:first-child) { - border-bottom-left-radius: $btn-border-radius; @include border-top-radius(0); } } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 9696154f7..22148bef1 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,3 +1,5 @@ +// scss-lint:disable QualifyingElement + // // Base styles // @@ -11,7 +13,7 @@ cursor: pointer; user-select: none; border: $input-btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius); @include transition(all .2s ease-in-out); &, @@ -34,7 +36,7 @@ &.active { background-image: none; outline: 0; - @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + @include box-shadow($btn-active-box-shadow); } &.disabled, diff --git a/scss/_card.scss b/scss/_card.scss index 3982f6e85..ee6b473e9 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -7,8 +7,10 @@ display: block; margin-bottom: $card-spacer-y; background-color: $card-bg; - border: $card-border-width solid $card-border-color; + // border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); + // Doesn't use mixin so that cards always have a "border" + box-shadow: inset 0 0 0 $card-border-width $card-border-color; } .card-block { @@ -72,7 +74,9 @@ @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; - border-bottom: $card-border-width solid $card-border-color; + // border-bottom: $card-border-width solid $card-border-color; + // Doesn't use mixin so that cards always have a "border" + box-shadow: inset 0 0 0 $card-border-width $card-border-color; &:first-child { @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); @@ -83,7 +87,9 @@ @include clearfix; padding: $card-spacer-y $card-spacer-x; background-color: $card-cap-bg; - border-top: $card-border-width solid $card-border-color; + // border-top: $card-border-width solid $card-border-color; + // Doesn't use mixin so that cards always have a "border" + box-shadow: inset 0 0 0 $card-border-width $card-border-color; &:last-child { @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); @@ -92,6 +98,27 @@ // +// Header navs +// + +.card-header-tabs { + margin-right: -($card-spacer-x / 2); + margin-bottom: -$card-spacer-y; + margin-left: -($card-spacer-x / 2); + border-bottom: 0; + + .nav-item { + margin-bottom: 0; + } +} + +.card-header-pills { + margin-right: -($card-spacer-x / 2); + margin-left: -($card-spacer-x / 2); +} + + +// // Background variations // diff --git a/scss/_carousel.scss b/scss/_carousel.scss index bf0ea61d3..af8c95c62 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -102,12 +102,12 @@ // Set gradients for backgrounds &.left { - @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } &.right { right: 0; left: auto; - @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); + @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } // Hover/focus state diff --git a/scss/_close.scss b/scss/_close.scss index 89e68a381..f98d4c1dc 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -19,6 +19,8 @@ // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +// scss-lint:disable QualifyingElement button.close { padding: 0; cursor: pointer; @@ -26,3 +28,4 @@ button.close { border: 0; -webkit-appearance: none; } +// scss-lint:enable QualifyingElement diff --git a/scss/_code.scss b/scss/_code.scss index 60bbcae81..e32351698 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -22,7 +22,7 @@ kbd { color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); - @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25)); + @include box-shadow($kbd-box-shadow); kbd { padding: 0; @@ -38,7 +38,6 @@ pre { margin-top: 0; margin-bottom: 1rem; font-size: 90%; - line-height: $line-height; color: $pre-color; // Account for some code outputs that place code tags in pre tags diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 974f76408..dbb32d42e 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -12,11 +12,10 @@ .custom-control { position: relative; display: inline; - padding-left: 1.5rem; - color: #555; + padding-left: $custom-control-gutter; + .custom-control { - margin-left: 1rem; + margin-left: $custom-control-spacer-x; } } @@ -26,31 +25,31 @@ opacity: 0; &:checked ~ .custom-control-indicator { - color: #fff; - background-color: #0074d9; - @include box-shadow(none); + color: $custom-control-checked-indicator-color; + background-color: $custom-control-checked-indicator-bg; + @include box-shadow($custom-control-checked-indicator-box-shadow); } &:focus ~ .custom-control-indicator { // the mixin is not used here to make sure there is feedback - box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + box-shadow: $custom-control-focus-indicator-box-shadow; } &:active ~ .custom-control-indicator { - color: #fff; - background-color: #84c6ff; - @include box-shadow(none); + color: $custom-control-active-indicator-color; + background-color: $custom-control-active-indicator-bg; + @include box-shadow($custom-control-active-indicator-box-shadow); } &:disabled { ~ .custom-control-indicator { - cursor: not-allowed; - background-color: $custom-form-bg-color-disabled; + cursor: $custom-control-disabled-cursor; + background-color: $custom-control-disabled-indicator-bg; } ~ .custom-control-description { - color: $custom-form-description-color-disabled; - cursor: not-allowed; + color: $custom-control-disabled-description-color; + cursor: $custom-control-disabled-cursor; } } } @@ -64,18 +63,15 @@ top: .0625rem; left: 0; display: block; - width: 1rem; - height: 1rem; - font-size: 65%; - line-height: 1rem; - color: #eee; - text-align: center; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + pointer-events: none; user-select: none; - background-color: $custom-form-bg-color; + background-color: $custom-control-indicator-bg; background-repeat: no-repeat; background-position: center center; - background-size: 50% 50%; - @include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1)); + background-size: $custom-control-indicator-bg-size; + @include box-shadow($custom-control-indicator-box-shadow); } // Checkboxes @@ -84,17 +80,17 @@ .custom-checkbox { .custom-control-indicator { - border-radius: .25rem; + @include border-radius($custom-checkbox-radius); } .custom-control-input:checked ~ .custom-control-indicator { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); + background-image: $custom-checkbox-checked-icon; } .custom-control-input:indeterminate ~ .custom-control-indicator { - background-color: #0074d9; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); - @include box-shadow(none); + background-color: $custom-checkbox-indeterminate-bg; + background-image: $custom-checkbox-indeterminate-icon; + @include box-shadow($custom-checkbox-indeterminate-box-shadow); } } @@ -104,11 +100,11 @@ .custom-radio { .custom-control-indicator { - border-radius: 50%; + border-radius: $custom-radio-radius; } .custom-control-input:checked ~ .custom-control-indicator { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); + background-image: $custom-radio-checked-icon; } } @@ -124,7 +120,7 @@ &::after { display: block; - margin-bottom: .25rem; + margin-bottom: $custom-control-spacer-y; content: ""; } @@ -145,23 +141,23 @@ .custom-select { display: inline-block; max-width: 100%; - padding: .375rem 1.75rem .375rem .75rem; - padding-right: .75rem \9; - color: $input-color; + padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + padding-right: $custom-select-padding-x \9; + color: $custom-select-color; vertical-align: middle; - background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; background-image: none \9; - background-size: 8px 10px; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($border-radius); + 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; &:focus { - border-color: #51a7e8; + border-color: $custom-select-focus-border-color; outline: none; - @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)); + @include box-shadow($custom-select-focus-box-shadow); } // Hides the default caret in IE11 @@ -171,14 +167,14 @@ } .custom-select-sm { - padding-top: 3px; - padding-bottom: 3px; - font-size: 12px; - - &:not([multiple]) { - height: 26px; - min-height: 26px; - } + padding-top: $custom-select-padding-y; + padding-bottom: $custom-select-padding-y; + font-size: $custom-select-sm-font-size; + + // &:not([multiple]) { + // height: 26px; + // min-height: 26px; + // } } @@ -190,19 +186,19 @@ position: relative; display: inline-block; max-width: 100%; - height: 2.5rem; + height: $custom-file-height; cursor: pointer; } .custom-file-input { - min-width: 14rem; + min-width: $custom-file-width; max-width: 100%; margin: 0; filter: alpha(opacity = 0); opacity: 0; &:focus ~ .custom-file-control { - @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9); + @include box-shadow($custom-file-focus-box-shadow); } } @@ -212,34 +208,34 @@ right: 0; left: 0; z-index: 5; - height: 2.5rem; - padding: .5rem 1rem; - line-height: 1.5; - color: #555; + height: $custom-file-height; + padding: $custom-file-padding-x $custom-file-padding-y; + line-height: $custom-file-line-height; + color: $custom-file-color; user-select: none; - background-color: #fff; - border: $input-btn-border-width solid #ddd; - border-radius: .25rem; - @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05)); + background-color: $custom-file-bg; + border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius($custom-file-border-radius); + @include box-shadow($custom-file-box-shadow); &::after { - content: "Choose file..."; + content: $custom-file-placeholder; } &::before { position: absolute; - top: -.075rem; - right: -.075rem; - bottom: -.075rem; + top: -$custom-file-border-width; + right: -$custom-file-border-width; + bottom: -$custom-file-border-width; z-index: 6; display: block; - height: 2.5rem; - padding: .5rem 1rem; - line-height: 1.5; - color: #555; - content: "Browse"; - background-color: #eee; - border: $input-btn-border-width solid #ddd; - border-radius: 0 .25rem .25rem 0; + height: $custom-file-height; + padding: $custom-file-padding-x $custom-file-padding-y; + line-height: $custom-file-line-height; + color: $custom-file-button-color; + content: $custom-file-button-label; + background-color: $custom-file-button-bg; + border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } diff --git a/scss/_custom.scss b/scss/_custom.scss new file mode 100644 index 000000000..88ccf202e --- /dev/null +++ b/scss/_custom.scss @@ -0,0 +1,4 @@ +// Bootstrap overrides +// +// Copy variables from `_variables.scss` to this file to override default values +// without modifying source files. diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 141806c34..a48537ba0 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -52,7 +52,7 @@ background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($border-radius); - @include box-shadow(0 6px 12px rgba(0,0,0,.175)); + @include box-shadow($dropdown-box-shadow); } // Dividers (basically an `<hr>`) within the dropdown @@ -69,7 +69,6 @@ padding: 3px 20px; clear: both; font-weight: normal; - line-height: $line-height; color: $dropdown-link-color; text-align: inherit; // For `<button>`s white-space: nowrap; // prevent links from randomly breaking onto new lines @@ -132,12 +131,7 @@ right: 0; left: auto; // Reset the default from `.dropdown-menu` } -// With v3, we enabled auto-flipping if you have a dropdown within a right -// aligned nav component. To enable the undoing of that, we provide an override -// to restore the default dropdown menu alignment. -// -// This is only for left-aligning a dropdown menu within a `.navbar-right` or -// `.pull-right` nav component. + .dropdown-menu-left { right: auto; left: 0; @@ -146,9 +140,8 @@ // Dropdown section headers .dropdown-header { display: block; - padding: 3px 20px; + padding: 5px 20px; font-size: $font-size-sm; - line-height: $line-height; color: $dropdown-header-color; white-space: nowrap; // as with > li > a } @@ -160,7 +153,7 @@ right: 0; bottom: 0; left: 0; - z-index: ($zindex-dropdown - 10); + z-index: $zindex-dropdown-backdrop; } // Right aligned dropdowns diff --git a/scss/_forms.scss b/scss/_forms.scss index 802241bd3..03f140906 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,3 +1,5 @@ +// scss-lint:disable QualifyingElement + // // Textual form controls // @@ -9,7 +11,6 @@ // height: $input-height; padding: $input-padding-y $input-padding-x; font-size: $font-size-base; - line-height: $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. @@ -20,14 +21,6 @@ @include box-shadow($input-box-shadow); @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); - // Make inputs at least the height of their button counterpart (base line-height + padding + border). - // Only apply the height to textual inputs and some selects. - // &:not(textarea), - // &:not(select[size]), - // &:not(select[multiple]) { - // height: $input-height; - // } - // Unstyle the caret on `<select>`s in IE10+. &::-ms-expand { background-color: transparent; @@ -61,6 +54,11 @@ } } +select.form-control { + &:not([size], [multiple]) { + height: $input-height; + } +} // Make file inputs better match text inputs by forcing them to new lines. .form-control-file, @@ -90,26 +88,25 @@ // set a pixel line-height that matches the given height of the input, but only // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 // -// Note that as of 8.3, iOS doesn't support `datetime` or `week`. - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - input[type="date"], - input[type="time"], - input[type="datetime-local"], - input[type="month"] { - &.form-control { - line-height: $input-height; - } +// Note that as of 8.3, iOS doesn't support `week`. + +_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/ +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + &.form-control { + line-height: $input-height; + } - &.input-sm, - .input-group-sm &.form-control { - line-height: $input-height-sm; - } + &.input-sm, + .input-group-sm &.form-control { + line-height: $input-height-sm; + } - &.input-lg, - .input-group-lg &.form-control { - line-height: $input-height-lg; - } + &.input-lg, + .input-group-lg &.form-control { + line-height: $input-height-lg; } } @@ -263,7 +260,7 @@ input[type="checkbox"] { padding-right: ($input-padding-x * 3); background-repeat: no-repeat; background-position: center right ($input-height * .25); - background-size: ($input-height * .65) ($input-height * .65); + background-size: ($input-height * .5) ($input-height * .50); } // Form validation states @@ -271,7 +268,7 @@ input[type="checkbox"] { @include form-control-validation($brand-success); .form-control-success { - background-image: url($form-icon-success); + background-image: $form-icon-success; } } @@ -279,7 +276,7 @@ input[type="checkbox"] { @include form-control-validation($brand-warning); .form-control-warning { - background-image: url($form-icon-warning); + background-image: $form-icon-warning; } } @@ -287,7 +284,7 @@ input[type="checkbox"] { @include form-control-validation($brand-danger); .form-control-danger { - background-image: url($form-icon-danger); + background-image: $form-icon-danger; } } diff --git a/scss/_grid.scss b/scss/_grid.scss index d846f098c..24cf74dda 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -30,7 +30,6 @@ } } - // Columns // // Common styles for small and large grid columns @@ -38,40 +37,3 @@ @if $enable-grid-classes { @include make-grid-columns(); } - - -// Flex variation -// -// Custom styles for additional flex alignment options. - -@if $enable-flex and $enable-grid-classes { - - // Flex column reordering - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-first { order: -1; } - .col-#{$breakpoint}-last { order: 1; } - } - } - - // Alignment for every column in row - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .row-#{$breakpoint}-top { align-items: flex-start; } - .row-#{$breakpoint}-center { align-items: center; } - .row-#{$breakpoint}-bottom { align-items: flex-end; } - } - } - - // Alignment per column - - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-top { align-self: flex-start; } - .col-#{$breakpoint}-center { align-self: center; } - .col-#{$breakpoint}-bottom { align-self: flex-end; } - } - } -} diff --git a/scss/_images.scss b/scss/_images.scss index 81e823ca0..410a09e36 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -17,12 +17,11 @@ // Image thumbnails .img-thumbnail { padding: $thumbnail-padding; - line-height: $line-height; background-color: $thumbnail-bg; border: $thumbnail-border-width solid $thumbnail-border-color; border-radius: $thumbnail-border-radius; transition: all .2s ease-in-out; - @include box-shadow(0 1px 2px rgba(0,0,0,.075)); + @include box-shadow($thumbnail-box-shadow); // Keep them at most 100% wide @include img-fluid(inline-block); diff --git a/scss/_input-group.scss b/scss/_input-group.scss index eeca6ee98..868606982 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -85,6 +85,7 @@ .input-group-addon { padding: $input-padding-y $input-padding-x; + margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom font-size: $font-size-base; font-weight: normal; line-height: 1.5; @@ -106,11 +107,13 @@ @include border-radius($border-radius-lg); } + // scss-lint:disable QualifyingElement // Nuke default margins from checkboxes and radios to vertically center within. input[type="radio"], input[type="checkbox"] { margin-top: 0; } + // scss-lint:enable QualifyingElement } diff --git a/scss/_labels.scss b/scss/_labels.scss index c58ddde17..6dec51608 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -27,6 +27,7 @@ top: -1px; } +// scss-lint:disable QualifyingElement // Add hover effects, but only for links a.label { @include hover-focus { @@ -35,6 +36,7 @@ a.label { cursor: pointer; } } +// scss-lint:enable QualifyingElement // Pill labels // diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 5115e56fa..ba91d95f1 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -22,61 +22,15 @@ background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; - // Round the first and last items &:first-child { @include border-top-radius($list-group-border-radius); } + &:last-child { margin-bottom: 0; @include border-bottom-radius($list-group-border-radius); } -} - -.list-group-flush { - .list-group-item { - border-width: $list-group-border-width 0; - border-radius: 0; - } - - &:first-child { - .list-group-item:first-child { - border-top: 0; - } - } - - &:last-child { - .list-group-item:last-child { - border-bottom: 0; - } - } -} - - -// Interactive list items -// -// Use anchor or button elements instead of `li`s or `div`s to create interactive -// list items. Includes an extra `.active` modifier class for selected items. - -a.list-group-item, -button.list-group-item { - width: 100%; - color: $list-group-link-color; - text-align: inherit; - - .list-group-item-heading { - color: $list-group-link-heading-color; - } - // Hover state - @include hover-focus { - color: $list-group-link-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; - } -} - -.list-group-item { - // Disabled state &.disabled { @include plain-hover-focus { color: $list-group-disabled-color; @@ -93,11 +47,11 @@ button.list-group-item { } } - // Active class on item itself, not parent &.active { @include plain-hover-focus { z-index: 2; // Place active items above their siblings for proper border styling color: $list-group-active-color; + text-decoration: none; // Repeat here because it inherits global a:hover otherwise background-color: $list-group-active-bg; border-color: $list-group-active-border; @@ -114,6 +68,35 @@ button.list-group-item { } } +.list-group-flush { + .list-group-item { + border-radius: 0; + } +} + + +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. + +.list-group-item-action { + width: 100%; // For `<button>`s (anchors become 100% by default though) + 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; + text-decoration: none; + background-color: $list-group-hover-bg; + } +} + // Contextual variants // diff --git a/scss/_media.scss b/scss/_media.scss index 1fc466cb7..d970c946a 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -14,7 +14,7 @@ } } @else { .media { - margin-top: 15px; + margin-top: $media-margin-top; &:first-child { margin-top: 0; @@ -61,11 +61,11 @@ // .media-right { - padding-left: 10px; + padding-left: $media-alignment-padding-x; } .media-left { - padding-right: 10px; + padding-right: $media-alignment-padding-x; } @@ -75,7 +75,7 @@ .media-heading { margin-top: 0; - margin-bottom: 5px; + margin-bottom: $media-heading-margin-bottom; } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 934769fdc..5c8651207 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -48,7 +48,6 @@ // // Layout @import "mixins/clearfix"; -@import "mixins/center-block"; // @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; diff --git a/scss/_modal.scss b/scss/_modal.scss index 046810f5f..83bb4932b 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -49,8 +49,8 @@ background-color: $modal-content-bg; background-clip: padding-box; border: 1px solid $modal-content-border-color; - border-radius: $border-radius-lg; - @include box-shadow(0 3px 9px rgba(0,0,0,.5)); + @include border-radius($border-radius-lg); + @include box-shadow($modal-content-xs-box-shadow); // Remove focus outline from opened modal outline: 0; } @@ -130,17 +130,17 @@ @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports .modal-dialog { - width: $modal-md; + max-width: $modal-md; margin: 30px auto; } + .modal-content { - @include box-shadow(0 5px 15px rgba(0,0,0,.5)); + @include box-shadow($modal-content-sm-up-box-shadow); } - // Modal sizes - .modal-sm { width: $modal-sm; } + .modal-sm { max-width: $modal-sm; } } -@include media-breakpoint-up(md) { - .modal-lg { width: $modal-lg; } +@include media-breakpoint-up(lg) { + .modal-lg { max-width: $modal-lg; } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 5d894364c..58da40c78 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -117,6 +117,7 @@ } } +// scss-lint:disable ImportantRule // Custom override for .navbar-toggleable { &-xs { @@ -135,6 +136,7 @@ } } } +// scss-lint:enable ImportantRule // Navigation diff --git a/scss/_normalize.scss b/scss/_normalize.scss index 2e62b53ec..93dd45217 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,4 +1,4 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ // // 1. Set default font family to sans-serif. @@ -37,7 +37,6 @@ figcaption, figure, footer, header, -hgroup, main, menu, nav, @@ -353,13 +352,11 @@ input[type="number"]::-webkit-outer-spin-button { } // -// 1. Address `appearance` set to `searchfield` in Safari and Chrome. -// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. +// Address `appearance` set to `searchfield` in Safari and Chrome. // input[type="search"] { - -webkit-appearance: textfield; // 1 - box-sizing: content-box; //2 + -webkit-appearance: textfield; } // diff --git a/scss/_pagination.scss b/scss/_pagination.scss index c0b82399f..5f40a7fd4 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -47,7 +47,6 @@ float: left; // Collapse white-space padding: $pagination-padding-y $pagination-padding-x; margin-left: -1px; - line-height: $line-height; color: $pagination-color; text-decoration: none; background-color: $pagination-bg; diff --git a/scss/_popover.scss b/scss/_popover.scss index d8c0db5c2..9ea8c1475 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -10,11 +10,13 @@ // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); font-size: $font-size-sm; + // Allow breaking very long words so they don't overflow the popover's bounds + word-wrap: break-word; background-color: $popover-bg; background-clip: padding-box; border: $popover-border-width solid $popover-border-color; @include border-radius($border-radius-lg); - @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + @include box-shadow($popover-box-shadow); // Popover directions @@ -103,7 +105,7 @@ // Offset the popover to account for the popover arrow .popover-title { - padding: 8px 14px; + padding: $popover-title-padding-y $popover-title-padding-x; margin: 0; // reset heading margin font-size: $font-size-base; background-color: $popover-title-bg; @@ -113,7 +115,7 @@ } .popover-content { - padding: 9px 14px; + padding: $popover-content-padding-y $popover-content-padding-x; } diff --git a/scss/_print.scss b/scss/_print.scss index e2929bb48..ac1c3bba0 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -1,15 +1,24 @@ +// scss-lint:disable ImportantRule, QualifyingElement + // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css // ========================================================================== // Print styles. -// Inlined to avoid the additional HTTP request: h5bp.com/r +// Inlined to avoid the additional HTTP request: +// http://www.phpied.com/delay-loading-your-print-css/ // ========================================================================== @media print { *, *::before, - *::after { + *::after, + *::first-letter, + *::first-line { + // Bootstrap specific; comment out `color` and `background` + //color: #000 !important; // Black prints faster: + // http://www.sanbeiji.com/archives/953 text-shadow: none !important; + //background: transparent !important; box-shadow: none !important; } @@ -18,18 +27,39 @@ text-decoration: underline; } + // Bootstrap specific; comment the following selector out + //a[href]::after { + // content: " (" attr(href) ")"; + //} + abbr[title]::after { content: " (" attr(title) ")"; } + // Bootstrap specific; comment the following selector out + // + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + // + + //a[href^="#"]::after, + //a[href^="javascript:"]::after { + // content: ""; + //} + pre, blockquote { - border: $border-width solid #999; + border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } + // + // Printing Tables: + // http://css-discuss.incutio.com/wiki/Printing_Tables + // + thead { - display: table-header-group; // h5bp.com/t + display: table-header-group; } tr, @@ -37,10 +67,6 @@ page-break-inside: avoid; } - img { - max-width: 100% !important; - } - p, h2, h3 { diff --git a/scss/_progress.scss b/scss/_progress.scss index 2670606e0..b2bcb3056 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -3,8 +3,8 @@ // @keyframes progress-bar-stripes { - from { background-position: $spacer-y 0; } - to { background-position: 0 0; } + from { background-position: $spacer-y 0; } + to { background-position: 0 0; } } @@ -37,35 +37,31 @@ } .progress[value]::-moz-progress-bar { background-color: $progress-bar-color; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; + @include border-left-radius($border-radius); } .progress[value]::-webkit-progress-value { background-color: $progress-bar-color; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; + @include border-left-radius($border-radius); } // Tweaks for full progress bar .progress[value="100"]::-moz-progress-bar { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; + @include border-right-radius($border-radius); } .progress[value="100"]::-webkit-progress-value { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; + @include border-right-radius($border-radius); } // Unfilled portion of the bar .progress[value]::-webkit-progress-bar { background-color: $progress-bg; @include border-radius($border-radius); - @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + @include box-shadow($progress-box-shadow); } base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only .progress[value] { background-color: $progress-bg; @include border-radius($border-radius); - @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + @include box-shadow($progress-box-shadow); } // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. @@ -73,19 +69,17 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes .progress { background-color: $progress-bg; @include border-radius($border-radius); - @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + @include box-shadow($progress-box-shadow); } .progress-bar { display: inline-block; height: $spacer-y; text-indent: -999rem; // Simulate hiding of value as in native `<progress>` background-color: $progress-bar-color; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; + @include border-left-radius($border-radius); } .progress[width="100%"] { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; + @include border-right-radius($border-radius); } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 5b0f09bbe..fe4af1f93 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,3 +1,5 @@ +// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty + // Reboot // // Global resets to common HTML elements and more for easier usage by Bootstrap. @@ -44,14 +46,8 @@ html { // // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., // `.class-name { @import "bootstrap"; }`). -// -// Includes future-proofed vendor prefixes as well. @at-root { - @-moz-viewport { width: device-width; } - @-ms-viewport { width: device-width; } - @-o-viewport { width: device-width; } - @-webkit-viewport { width: device-width; } - @viewport { width: device-width; } + @-ms-viewport { width: device-width; } } @@ -77,7 +73,7 @@ body { // Make the `body` use the `font-size-root` font-family: $font-family-base; font-size: $font-size-base; - line-height: $line-height; + 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. @@ -331,8 +327,6 @@ legend { } input[type="search"] { - // Undo Normalize's default here to match our global overrides. - box-sizing: inherit; // 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 diff --git a/scss/_tables.scss b/scss/_tables.scss index 8ec35b9d4..c04e7c9b8 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -10,7 +10,6 @@ th, td { padding: $table-cell-padding; - line-height: $line-height; vertical-align: top; border-top: $table-border-width solid $table-border-color; } @@ -109,7 +108,7 @@ .table-responsive { display: block; width: 100%; - min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) overflow-x: auto; // TODO: find out if we need this still. @@ -172,15 +171,14 @@ tbody, tfoot { &:last-child { - tr:last-child { - th, - td { - border-bottom: $table-border-width solid $table-border-color; - } + tr:last-child th, + tr:last-child td { + border-bottom: $table-border-width solid $table-border-color; } } } + // scss-lint:disable ImportantRule tr { float: left; @@ -190,4 +188,5 @@ border: $table-border-width solid $table-border-color; } } + // scss-lint:enable ImportantRule } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 941579ec9..e8151af07 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -7,6 +7,8 @@ // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); font-size: $font-size-sm; + // Allow breaking very long words so they don't overflow the tooltip's bounds + word-wrap: break-word; opacity: 0; &.in { opacity: $tooltip-opacity; } @@ -14,7 +16,7 @@ &.tooltip-top, &.bs-tether-element-attached-bottom { padding: $tooltip-arrow-width 0; - margin-top: -3px; + margin-top: -$tooltip-margin; .tooltip-arrow { bottom: 0; @@ -27,7 +29,7 @@ &.tooltip-right, &.bs-tether-element-attached-left { padding: 0 $tooltip-arrow-width; - margin-left: 3px; + margin-left: $tooltip-margin; .tooltip-arrow { top: 50%; @@ -40,7 +42,7 @@ &.tooltip-bottom, &.bs-tether-element-attached-top { padding: $tooltip-arrow-width 0; - margin-top: 3px; + margin-top: $tooltip-margin; .tooltip-arrow { top: 0; @@ -53,7 +55,7 @@ &.tooltip-left, &.bs-tether-element-attached-right { padding: 0 $tooltip-arrow-width; - margin-left: -3px; + margin-left: -$tooltip-margin; .tooltip-arrow { top: 50%; @@ -68,7 +70,7 @@ // Wrapper for the tooltip content .tooltip-inner { max-width: $tooltip-max-width; - padding: 3px 8px; + padding: $tooltip-padding-y $tooltip-padding-x; color: $tooltip-color; text-align: center; background-color: $tooltip-bg; diff --git a/scss/_type.scss b/scss/_type.scss index 60f983aaf..107575779 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -11,22 +11,12 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1 { font-size: $font-size-h1; } -h2 { font-size: $font-size-h2; } -h3 { font-size: $font-size-h3; } -h4 { font-size: $font-size-h4; } -h5 { font-size: $font-size-h5; } -h6 { font-size: $font-size-h6; } - -// These declarations are kept separate from and placed after -// the previous tag-based declarations so that the classes beat the tags in -// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2. -.h1 { font-size: $font-size-h1; } -.h2 { font-size: $font-size-h2; } -.h3 { font-size: $font-size-h3; } -.h4 { font-size: $font-size-h4; } -.h5 { font-size: $font-size-h5; } -.h6 { font-size: $font-size-h6; } +h1, .h1 { font-size: $font-size-h1; } +h2, .h2 { font-size: $font-size-h2; } +h3, .h3 { font-size: $font-size-h3; } +h4, .h4 { font-size: $font-size-h4; } +h5, .h5 { font-size: $font-size-h5; } +h6, .h6 { font-size: $font-size-h6; } .lead { font-size: $lead-font-size; @@ -117,13 +107,12 @@ mark, padding: ($spacer / 2) $spacer; margin-bottom: $spacer; font-size: $blockquote-font-size; - border-left: .25rem solid $blockquote-border-color; + border-left: $blockquote-border-width solid $blockquote-border-color; } .blockquote-footer { display: block; font-size: 80%; // back to default font-size - line-height: $line-height; color: $blockquote-small-color; &::before { @@ -136,7 +125,7 @@ mark, padding-right: $spacer; padding-left: 0; text-align: right; - border-right: .25rem solid $blockquote-border-color; + border-right: $blockquote-border-width solid $blockquote-border-color; border-left: 0; } @@ -148,3 +137,14 @@ mark, content: "\00A0 \2014"; // nbsp, em dash } } + +@if not $enable-flex { + // Clean up some horizontal `<dl>`s built with grids + // scss-lint:disable QualifyingElement + dl.row { + > dd + dt { + clear: left; + } + } + // scss-lint:enable QualifyingElement +} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c0df1222f..3f9e81f12 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,8 +1,8 @@ @import "utilities/background"; -@import "utilities/center-block"; @import "utilities/clearfix"; @import "utilities/pulls"; @import "utilities/screenreaders"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; +@import "utilities/flex"; diff --git a/scss/_variables.scss b/scss/_variables.scss index ed7139cee..860d061b5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -130,16 +130,16 @@ $container-max-widths: ( // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; -$grid-gutter-width: 1.875rem !default; // 30px +$grid-gutter-width: 30px !default; // Typography // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // Pixel value used to responsively scale all typography. Applied to the `<html>` element. @@ -150,6 +150,8 @@ $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; $font-size-xs: .75rem !default; +$line-height-base: 1.5 !default; + $font-size-h1: 2.5rem !default; $font-size-h2: 2rem !default; $font-size-h3: 1.75rem !default; @@ -167,8 +169,6 @@ $display2-weight: 300 !default; $display3-weight: 300 !default; $display4-weight: 300 !default; -$line-height: 1.5 !default; - $headings-margin-bottom: ($spacer / 2) !default; $headings-font-family: inherit !default; $headings-font-weight: 500 !default; @@ -185,12 +185,14 @@ $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; +$blockquote-border-width: .25rem !default; $hr-border-color: rgba(0,0,0,.1) !default; $hr-border-width: $border-width !default; $dt-font-weight: bold !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; $nested-kbd-font-weight: bold !default; $list-inline-padding: 5px !default; @@ -237,6 +239,8 @@ $table-border-color: $gray-lighter !default; $btn-padding-x: 1rem !default; $btn-padding-y: .375rem !default; $btn-font-weight: normal !default; +$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; +$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; $btn-primary-color: #fff !default; $btn-primary-bg: $brand-primary !default; @@ -314,7 +318,7 @@ $input-padding-y-sm: .275rem !default; $input-padding-x-lg: 1.25rem !default; $input-padding-y-lg: .75rem !default; -$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default; +$input-height: (($font-size-base * $line-height-base) + ($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; @@ -325,15 +329,78 @@ $input-group-addon-border-color: $input-border-color !default; $cursor-disabled: not-allowed !default; -$custom-form-bg-color: #ddd !default; -$custom-form-bg-color-disabled: #eee !default; -$custom-form-description-color-disabled: #767676 !default; +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; +$custom-control-spacer-y: .25rem !default; + +$custom-control-indicator-size: 1rem !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(0,0,0,.1) !default; + +$custom-control-disabled-cursor: $cursor-disabled !default; +$custom-control-disabled-indicator-bg: #eee !default; +$custom-control-disabled-description-color: #767676 !default; + +$custom-control-checked-indicator-color: #fff !default; +$custom-control-checked-indicator-bg: #0074d9 !default; +$custom-control-checked-indicator-box-shadow: none !default; + +$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; + +$custom-control-active-indicator-color: #fff !default; +$custom-control-active-indicator-bg: #84c6ff !default; +$custom-control-active-indicator-box-shadow: none !default; + +$custom-checkbox-radius: $border-radius !default; +$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; +$custom-checkbox-indeterminate-bg: #0074d9 !default; +$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; +$custom-checkbox-indeterminate-box-shadow: none !default; + +$custom-radio-radius: 50% !default; +$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default; + +$custom-select-padding-x: .75rem !default; +$custom-select-padding-y: .375rem !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-color: $input-color !default; +$custom-select-bg: #fff !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; + +$custom-select-focus-border-color: #51a7e8 !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .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 #fff, 0 0 0 .2rem #0074d9 !default; + +$custom-file-padding-x: .5rem !default; +$custom-file-padding-y: 1rem !default; +$custom-file-line-height: 1.5 !default; +$custom-file-color: #555 !default; +$custom-file-bg: #fff !default; +$custom-file-border-width: $border-width !default; +$custom-file-border-color: #ddd !default; +$custom-file-border-radius: $border-radius !default; +$custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; +$custom-file-placeholder: "Choose file..." !default; +$custom-file-button-label: "Browse" !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: #eee !default; // Form validation icons -$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default; -$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default; -$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default; +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; // Dropdowns @@ -344,6 +411,7 @@ $dropdown-bg: #fff !default; $dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: #e5e5e5 !default; +$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; @@ -362,6 +430,7 @@ $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-popover: 1060 !default; @@ -473,7 +542,7 @@ $card-spacer-x: 1.25rem !default; $card-spacer-y: .75rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; -$card-border-color: #e5e5e5 !default; +$card-border-color: rgba(0,0,0,.125) !default; $card-border-radius-inner: $card-border-radius !default; $card-cap-bg: #f5f5f5 !default; $card-bg: #fff !default; @@ -489,6 +558,9 @@ $tooltip-max-width: 200px !default; $tooltip-color: #fff !default; $tooltip-bg: #000 !default; $tooltip-opacity: .9 !default; +$tooltip-padding-y: 3px !default; +$tooltip-padding-x: 8px !default; +$tooltip-margin: 3px !default; $tooltip-arrow-width: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; @@ -500,14 +572,20 @@ $popover-bg: #fff !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; $popover-border-color: rgba(0,0,0,.2) !default; +$popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default; $popover-title-bg: darken($popover-bg, 3%) !default; +$popover-title-padding-x: 14px !default; +$popover-title-padding-y: 8px !default; + +$popover-content-padding-x: 14px !default; +$popover-content-padding-y: 9px !default; $popover-arrow-width: 10px !default; $popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-width: ($popover-arrow-width + 1) !default; -$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; +$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; // Labels @@ -530,10 +608,12 @@ $label-font-weight: bold !default; $modal-inner-padding: 15px !default; $modal-title-padding: 15px !default; -$modal-title-line-height: $line-height !default; +$modal-title-line-height: $line-height-base !default; -$modal-content-bg: #fff !default; -$modal-content-border-color: rgba(0,0,0,.2) !default; +$modal-content-bg: #fff !default; +$modal-content-border-color: rgba(0,0,0,.2) !default; +$modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; +$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; $modal-backdrop-bg: #000 !default; $modal-backdrop-opacity: .5 !default; @@ -576,6 +656,7 @@ $alert-danger-border: $state-danger-border !default; $progress-bg: #eee !default; $progress-bar-color: #0074d9 !default; $progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; $progress-bar-bg: $brand-primary !default; $progress-bar-success-bg: $brand-success !default; @@ -613,6 +694,7 @@ $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; $thumbnail-border-color: #ddd !default; $thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; // Breadcrumbs @@ -627,6 +709,13 @@ $breadcrumb-active-color: $gray-light !default; $breadcrumb-divider: "/" !default; +// Media objects + +$media-margin-top: 15px !default; +$media-heading-margin-bottom: 5px !default; +$media-alignment-padding-x: 10px !default; + + // Carousel $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 28d59095e..5dc331eb6 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -52,6 +52,7 @@ $grid-gutter-width: 1.875rem !default; // 30px // Grid mixins // +@import "custom"; @import "variables"; @import "mixins/clearfix"; diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index f7ff43eb2..eeff5166c 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -2,6 +2,7 @@ // // Includes only Normalize and our custom Reboot reset. +@import "custom"; @import "variables"; @import "mixins/hover"; @import "mixins/tab-focus"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index febbc4ea4..03aef0c6a 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -6,6 +6,7 @@ // Core variables and mixins @import "functions"; +@import "custom"; @import "variables"; @import "mixins"; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 61b9f9caf..968634880 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -10,7 +10,7 @@ color: $color; background-color: $background; border-color: $border; - @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075)); + @include box-shadow($btn-box-shadow); @include hover { color: $color; @@ -33,7 +33,7 @@ border-color: $active-border; // Remove the gradient for the pressed/active state background-image: none; - @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + @include box-shadow($btn-active-box-shadow); &:hover, &:focus, @@ -95,6 +95,5 @@ @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/_center-block.scss b/scss/mixins/_center-block.scss deleted file mode 100644 index e06fb5e27..000000000 --- a/scss/mixins/_center-block.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Center-align a block level element - -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index eab8063e0..b87429c1b 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -68,10 +68,10 @@ // 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-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { +@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { #{$parent} { height: $input-height; - padding: $padding-vertical $padding-horizontal; + padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; @include border-radius($border-radius); diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index c57eddca4..ac96efe2d 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -4,7 +4,7 @@ // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9. -@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 @@ -14,7 +14,7 @@ // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9. -@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 @@ -24,12 +24,12 @@ background-repeat: repeat-x; background-image: linear-gradient($deg, $start-color, $end-color); } -@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@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); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback } -@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index bfe379ef8..15d1e6bdf 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -4,47 +4,40 @@ // any value of `$grid-columns`. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - // Common properties for all breakpoints - %grid-column { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - } $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); - @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { - @extend %grid-column; - } - } - @include media-breakpoint-up($breakpoint) { - // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) - %grid-column-float-#{$breakpoint} { - float: left; + @include media-breakpoint-up($breakpoint, $breakpoints) { + @if $enable-flex { + .col-#{$breakpoint} { + position: relative; + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + } } + @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - @if not $enable-flex { - @extend %grid-column-float-#{$breakpoint}; - } - @include make-col-span($i, $columns); + @include make-col($i, $columns); } } + @each $modifier in (pull, push) { @for $i from 0 through $columns { - .col-#{$breakpoint}-#{$modifier}-#{$i} { + .#{$modifier}-#{$breakpoint}-#{$i} { @include make-col-modifier($modifier, $i, $columns) } } } + // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 - .col-#{$breakpoint}-offset-#{$i} { + .offset-#{$breakpoint}-#{$i} { @include make-col-modifier(offset, $i, $columns) } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 468bb39f2..6e67f92cd 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -14,9 +14,9 @@ // For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths) { +@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @each $breakpoint, $container-max-width in $max-widths { - @include media-breakpoint-up($breakpoint) { + @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; } } @@ -33,17 +33,12 @@ margin-right: ($gutter / -2); } -@mixin make-col($gutter: $grid-gutter-width) { +@mixin make-col($size, $columns: $grid-columns) { position: relative; - @if not $enable-flex { - float: left; - } min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); -} + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); -@mixin make-col-span($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -51,6 +46,7 @@ // do not appear to require this. max-width: percentage($size / $columns); } @else { + float: left; width: percentage($size / $columns); } } diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index eaebe8955..8cd9317cf 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -1,10 +1,9 @@ // Pagination -@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { +@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { - padding: $padding-vertical $padding-horizontal; + padding: $padding-y $padding-x; font-size: $font-size; - line-height: $line-height; } .page-item { diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index 014dff566..bb882f2ac 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,11 +1,11 @@ @mixin reset-text { font-family: $font-family-base; - // We deliberately do NOT reset font-size. + // We deliberately do NOT reset font-size or word-wrap. font-style: normal; font-weight: normal; letter-spacing: normal; line-break: auto; - line-height: $line-height; + line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; @@ -14,5 +14,4 @@ white-space: normal; word-break: normal; word-spacing: normal; - word-wrap: normal; } diff --git a/scss/utilities/_center-block.scss b/scss/utilities/_center-block.scss deleted file mode 100644 index 0c986667a..000000000 --- a/scss/utilities/_center-block.scss +++ /dev/null @@ -1,3 +0,0 @@ -.center-block { - @include center-block(); -} diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss new file mode 100644 index 000000000..fe91ac121 --- /dev/null +++ b/scss/utilities/_flex.scss @@ -0,0 +1,36 @@ +// Flex variation +// +// Custom styles for additional flex alignment options. + +@if $enable-flex and $enable-grid-classes { + @each $breakpoint in map-keys($grid-breakpoints) { + // Flex column reordering + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + } + + // Alignment for every item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-middle { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } + } + + // Alignment per item + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-middle { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + } + + // Horizontal alignment of item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-left { justify-content: flex-start; } + .flex-items-#{$breakpoint}-center { justify-content: center; } + .flex-items-#{$breakpoint}-right { justify-content: flex-end; } + .flex-items-#{$breakpoint}-around { justify-content: space-around; } + .flex-items-#{$breakpoint}-between { justify-content: space-between; } + } + } +} diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index f3a0c9880..901f77144 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -32,9 +32,7 @@ // Contextual colors -.text-muted { - color: $text-muted; -} +@include text-emphasis-variant('.text-muted', $text-muted); @include text-emphasis-variant('.text-primary', $brand-primary); diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss index cdb142869..63891677e 100644 --- a/scss/utilities/_visibility.scss +++ b/scss/utilities/_visibility.scss @@ -1,3 +1,5 @@ +// scss-lint:disable ImportantRule + // // Visibility utilities // |