From ed1de86794cc0911dc7a3dbbf3bb9dfe421ef4b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 5 Mar 2017 12:20:44 -0800 Subject: Update spacer utilities (#22123) * Drop -x and -y as they're all the same - Also move -width to elsewhere in the vars because it makes no sense by spacers. - Update values of -x and -y across main Sass and docs Sass. * Update docs to reflect changes; link to spacing utils from options page --- scss/_breadcrumb.scss | 2 +- scss/_images.scss | 2 +- scss/_type.scss | 4 +-- scss/_variables.scss | 74 +++++++++++++++++++++---------------------- scss/mixins/_nav-divider.scss | 2 +- 5 files changed, 42 insertions(+), 42 deletions(-) (limited to 'scss') 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/_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/_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 09ac11a9d..9a95602b7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -138,36 +138,33 @@ $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) + x: ($spacer * .25), + y: ($spacer * .25) ), 2: ( - x: ($spacer-x * .5), - y: ($spacer-y * .5) + x: ($spacer * .5), + y: ($spacer * .5) ), 3: ( - x: $spacer-x, - y: $spacer-y + x: $spacer, + y: $spacer ), 4: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) + x: ($spacer * 1.5), + y: ($spacer * 1.5) ), 5: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) + x: ($spacer * 3), + y: ($spacer * 3) ) ) !default; -$border-width: 1px !default; // This variable affects the `.h-*` and `.w-*` classes. $sizes: ( @@ -237,6 +234,30 @@ $grid-gutter-widths: ( xl: $grid-gutter-width-base ) !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: (4 / 3) !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. @@ -305,27 +326,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. @@ -450,7 +450,7 @@ $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; @@ -804,7 +804,7 @@ $modal-transition: transform .3s ease-out !default; $alert-padding-x: 1.25rem !default; $alert-padding-y: .75rem !default; -$alert-margin-bottom: $spacer-y !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; diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss index fb3d12e9f..557673ccd 100644 --- a/scss/mixins/_nav-divider.scss +++ b/scss/mixins/_nav-divider.scss @@ -4,7 +4,7 @@ @mixin nav-divider($color: #e5e5e5) { height: 1px; - margin: ($spacer-y / 2) 0; + margin: ($spacer / 2) 0; overflow: hidden; background-color: $color; } -- cgit v1.2.3 From 4778190d78faab6d19486292e2e73cc418c663f3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 3 Mar 2017 12:58:57 -0800 Subject: Drop the .hidden and .visible classes, save for the print ones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Moves print display utils to display utils file — Removes all other .hidden- utils — Expands on .invisible and it's mixin to provide options for visibility: visible and visibility: hidden --- scss/mixins/_visibility.scss | 4 ++-- scss/utilities/_display.scss | 37 ++++++++++++++++++++++++++++- scss/utilities/_visibility.scss | 52 ++++------------------------------------- 3 files changed, 42 insertions(+), 51 deletions(-) (limited to 'scss') 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/_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); } -- cgit v1.2.3 From 9a93671b75dda49421cb20e43eaa7281ceac61b0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 3 Mar 2017 11:34:10 -0800 Subject: Move box-shadow and transition mixins out of the main mixins file and into their own files --- scss/_mixins.scss | 18 ++---------------- scss/mixins/_box-shadow.scss | 5 +++++ scss/mixins/_transition.scss | 9 +++++++++ 3 files changed, 16 insertions(+), 16 deletions(-) create mode 100644 scss/mixins/_box-shadow.scss create mode 100644 scss/mixins/_transition.scss (limited to 'scss') diff --git a/scss/_mixins.scss b/scss/_mixins.scss index da4738297..13aad2487 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"; @@ -47,7 +31,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/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/_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; + } + } +} -- cgit v1.2.3 From 95f37e4c402df37db16781995ffa1592032df9c8 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 5 Mar 2017 14:07:38 -0700 Subject: Clean up spacers a bit more --- scss/_variables.scss | 30 ++++++------------------------ scss/utilities/_spacing.scss | 22 ++++++++++------------ 2 files changed, 16 insertions(+), 36 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 9a95602b7..4d7cd9dc9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -140,30 +140,12 @@ $enable-print-styles: true !default; $spacer: 1rem !default; $spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer * .25), - y: ($spacer * .25) - ), - 2: ( - x: ($spacer * .5), - y: ($spacer * .5) - ), - 3: ( - x: $spacer, - y: $spacer - ), - 4: ( - x: ($spacer * 1.5), - y: ($spacer * 1.5) - ), - 5: ( - x: ($spacer * 3), - y: ($spacer * 3) - ) + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) ) !default; // This variable affects the `.h-*` and `.w-*` classes. 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; } } } -- cgit v1.2.3 From b3aa5ec36032b9d377163640b1f5ba153a3c2d1c Mon Sep 17 00:00:00 2001 From: Dominic Watson Date: Mon, 13 Mar 2017 02:25:56 +0100 Subject: Use btn-$variant-color variables for outlined btns (#22164) Despite now having the ability to override outline-variant color, it's not actually being used so each are still #fff Related: https://github.com/twbs/bootstrap/pull/20734 --- scss/_buttons.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_buttons.scss b/scss/_buttons.scss index e36ff0f1f..2964a526d 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -73,22 +73,22 @@ fieldset[disabled] a.btn { // 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, $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); } -- cgit v1.2.3 From 08984ac8cd09bf096a42aac5fd17aa6af79cfc5a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Feb 2017 17:03:57 -0800 Subject: Remove the outline override from dropdown toggles fixes #17573 --- scss/_dropdown.scss | 5 ----- 1 file changed, 5 deletions(-) (limited to 'scss') diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1c2741a2e..404483e77 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -17,11 +17,6 @@ border-right: $caret-width solid transparent; border-left: $caret-width solid transparent; } - - // Prevent the focus on the dropdown toggle when closing dropdowns - &:focus { - outline: 0; - } } .dropup { -- cgit v1.2.3 From 890c6041f3bf70b76244611916bc1286a8150bd5 Mon Sep 17 00:00:00 2001 From: naicko Date: Sat, 18 Mar 2017 21:06:05 +0100 Subject: Update scss mixins to comply with scss-linting rules (#22151) * Fixed some linting issues * Run npm tasks after scss cleanup * Revert "Run npm tasks after scss cleanup" This reverts commit 1103a0da68d1846ad592eb4a105046a939557830. * Property sort order for grid * Let's respest the property order in the mixins * Respect property sort order in reboot file * ::-ms-expand is a vendor-prefix, add it to the scss-lint disable * Revert hover mixin comment * Fixed missing mixin hover-focus --- scss/_custom-forms.scss | 2 +- scss/_forms.scss | 2 +- scss/_reboot.scss | 2 +- scss/mixins/_alert.scss | 2 +- scss/mixins/_border-radius.scss | 6 +++--- scss/mixins/_buttons.scss | 2 +- scss/mixins/_clearfix.scss | 2 +- scss/mixins/_forms.scss | 2 +- scss/mixins/_gradients.scss | 2 +- scss/mixins/_grid.scss | 2 +- scss/mixins/_hover.scss | 12 ++++++------ scss/mixins/_list-group.scss | 2 ++ scss/mixins/_reset-text.scss | 7 ++++--- scss/mixins/_resize.scss | 2 +- scss/mixins/_text-truncate.scss | 2 +- 15 files changed, 26 insertions(+), 23 deletions(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 39f164822..da40d7c50 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. diff --git a/scss/_forms.scss b/scss/_forms.scss index 85180aa7f..4ec9f6e32 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 diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 78753af00..c52e6f887 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -22,8 +22,8 @@ html { box-sizing: border-box; // 1 font-family: sans-serif; // 2 line-height: 1.15; // 3 - -ms-text-size-adjust: 100%; // 4 -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 } 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/_buttons.scss b/scss/mixins/_buttons.scss index f9981e326..91eb44409 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 { 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 9fde3a8a6..33b186a8d 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -27,8 +27,8 @@ // Set validation states also for addons .input-group-addon { color: $color; - border-color: $color; background-color: lighten($color, 40%); + border-color: $color; } } 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.scss b/scss/mixins/_grid.scss index 9cd8c7bbb..eb6c012f3 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -4,8 +4,8 @@ @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) { 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 278787bbe..ba27b5041 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -6,6 +6,7 @@ background-color: $background; } + //scss-lint:disable QualifyingElement a.list-group-item-#{$state}, button.list-group-item-#{$state} { color: $color; @@ -21,4 +22,5 @@ border-color: $color; } } + // scss-lint:enable QualifyingElement } 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/_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 +} -- cgit v1.2.3 From 6f42daf747f094188478bc76b83ce998c2a87e19 Mon Sep 17 00:00:00 2001 From: Theriault Date: Sat, 18 Mar 2017 14:23:10 -0600 Subject: Add :empty to .custom-file-control selector (#22176) VS --- scss/_custom-forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index da40d7c50..d303c48d0 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -229,7 +229,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; } } -- cgit v1.2.3 From ec8c2519285a1c88d224739dc2f4b18b997a1e8b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 18 Mar 2017 16:30:12 -0700 Subject: fixes #21584 - revert back to display block for list items to prevent unwanted behaviors - fixes a handful of other linked issues (see main thread) - updates docs to include more utilities for the one example --- scss/_list-group.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_list-group.scss b/scss/_list-group.scss index bb8a8d103..c4b5e2f92 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -42,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; -- cgit v1.2.3 From caebfcd246d7a09f311091adf2dbe835dee244b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 15:47:34 -0700 Subject: Fix justified nav styles and update nav docs for fill/justify - Justified and fill nav variants need .nav-item classes on the anchors in addition to .nav-link - Fix broken styles for the .nav-justified class which wasn't actually doing what we needed it to --- scss/_nav.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_nav.scss b/scss/_nav.scss index 7d902a7c0..39f12432d 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -99,7 +99,8 @@ .nav-justified { .nav-item { - flex: 1 1 100%; + flex-grow: 1; + flex-basis: 0; text-align: center; } } -- cgit v1.2.3 From 2085c142679563189dbc34ec6bf4b00e32b8f615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 20 Mar 2017 00:05:45 +0100 Subject: Update _screen-reader.scss (#22154) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update _screen-reader.scss Small improvements that could be important: * `clip` [is deprecated](https://www.w3.org/TR/css-masking-1/#clip-property). Adding `clip-path` as progressive enhancement; the shorter notation came from @ryuran 's [suggestion](https://twitter.com/ryuran78/status/778943389819604992); * [J. Renée Beach warned about single pixel with interfering with screen readers vocalisation](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) solved with `white-space`. See [the detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/). Also kinda related to issue #20732 :) Please let me know if you find any trouble with this technique. Thanks a lot! * Reorder declarations To pass Hound. Didn't think `clip` and `clip-path` would be considered as unrelated… * Trailing spaces * Last trailing space? * Remove margin: -1px --- scss/mixins/_screen-reader.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'scss') 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; } } -- cgit v1.2.3 From 08d612f3e4b1c1beb40b764de3a4018415e346c9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 16:52:39 -0700 Subject: correct inverse table border color, add new var --- scss/_tables.scss | 2 +- scss/_variables.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index 47c3ac297..d5148810f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -125,7 +125,7 @@ th, td, thead th { - border-color: $body-bg; + border-color: $table-inverse-border; } &.table-bordered { diff --git a/scss/_variables.scss b/scss/_variables.scss index 4d7cd9dc9..93628a808 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -318,6 +318,7 @@ $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; $table-inverse-bg: $gray-dark !default; +$table-inverse-border: lighten($gray-dark, 7.5%) !default; $table-inverse-color: $body-bg !default; $table-bg-accent: rgba($black,.05) !default; -- cgit v1.2.3 From 4c015bf378f506a0258c48a66093b71bc5b4d93a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 16:54:03 -0700 Subject: Do what the comment says; add this only to devices under 768px --- scss/_tables.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index d5148810f..c34bb2bef 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -142,13 +142,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; + } } } -- cgit v1.2.3 From 78cad48c707b772a58388251f6f54777c9c9c68c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 17:02:49 -0700 Subject: consistent breaks --- scss/_tables.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index c34bb2bef..cf0ca171a 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -134,7 +134,6 @@ } - // Responsive tables // // Add `.table-responsive` to `.table`s and we'll make them mobile friendly by -- cgit v1.2.3 From 13a874e3404ff82d9c84e39c596e7205803bb25e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 17:03:52 -0700 Subject: reorder --- scss/_variables.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 93628a808..54bf91c1e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -316,20 +316,19 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; - -$table-inverse-bg: $gray-dark !default; -$table-inverse-border: lighten($gray-dark, 7.5%) !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-border: lighten($gray-dark, 7.5%) !default; +$table-inverse-color: $body-bg !default; // Buttons -- cgit v1.2.3 From d093460252c712f82ef1b52758c7f12f3110193e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 17:37:00 -0700 Subject: fixes rest of #21585; adds custom styles for inverse table accent hover and active states --- scss/_tables.scss | 14 ++++++++++++++ scss/_variables.scss | 3 +++ 2 files changed, 17 insertions(+) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index cf0ca171a..f041f6094 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -131,6 +131,20 @@ &.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; + } + } + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 54bf91c1e..69eb4017b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -327,6 +327,9 @@ $table-head-bg: $gray-lighter !default; $table-head-color: $gray !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-bg-active: $table-inverse-bg-hover !default; $table-inverse-border: lighten($gray-dark, 7.5%) !default; $table-inverse-color: $body-bg !default; -- cgit v1.2.3 From 40ac03384de6dc1b6c6e40bd6ff998cb66657346 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Mar 2017 17:47:53 -0700 Subject: linting from before --- scss/_nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_nav.scss b/scss/_nav.scss index 39f12432d..731f1b71b 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -99,8 +99,8 @@ .nav-justified { .nav-item { - flex-grow: 1; flex-basis: 0; + flex-grow: 1; text-align: center; } } -- cgit v1.2.3 From c1325a756ef1c19c197566f6889d49410b1dadf5 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Fri, 13 Jan 2017 23:05:33 -0500 Subject: Generate correct breakpoints for navbar-toggleable-* and generate toggleable without media query to never collapse --- scss/_navbar.scss | 6 +++--- scss/mixins/_breakpoints.scss | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c31017dc..a0856cb81 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -126,11 +126,11 @@ // where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); + $previous: breakpoint-previous($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($breakpoint) { + @include media-breakpoint-down($previous) { .navbar-nav { .dropdown-menu { position: static; @@ -144,7 +144,7 @@ } } - @include media-breakpoint-up($next) { + @include media-breakpoint-up($breakpoint) { flex-direction: row; flex-wrap: nowrap; align-items: center; diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 904b60f7a..b2d90c447 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -16,9 +16,22 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if($n, if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null), null); } +// Name of the previous breakpoint, or null for the first breakpoint. +// +// >> breakpoint-previous(sm) +// xs +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// xs +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// xs +@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != 1, nth($breakpoint-names, $n - 1), null); +}; + // Minimum breakpoint width. Null for the smallest (first) breakpoint. // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) -- cgit v1.2.3 From 89b47efc32f2c6575ab16f71c2c8e5db3c581d21 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 00:33:21 -0500 Subject: Simplify generation and get rid of previously added "breakpoint-previous" function --- scss/_navbar.scss | 8 ++++---- scss/mixins/_breakpoints.scss | 15 +-------------- 2 files changed, 5 insertions(+), 18 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index a0856cb81..517a8aa92 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -126,11 +126,11 @@ // where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { - $previous: breakpoint-previous($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($previous) { + @include media-breakpoint-down($breakpoint) { .navbar-nav { .dropdown-menu { position: static; @@ -144,7 +144,7 @@ } } - @include media-breakpoint-up($breakpoint) { + @include media-breakpoint-up($next) { flex-direction: row; flex-wrap: nowrap; align-items: center; diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index b2d90c447..904b60f7a 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -16,22 +16,9 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n, if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null), null); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } -// Name of the previous breakpoint, or null for the first breakpoint. -// -// >> breakpoint-previous(sm) -// xs -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) -// xs -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) -// xs -@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { - $n: index($breakpoint-names, $name); - @return if($n != 1, nth($breakpoint-names, $n - 1), null); -}; - // Minimum breakpoint width. Null for the smallest (first) breakpoint. // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) -- cgit v1.2.3 From 1e424bfcf63c468e8ca1f2451623bd008c5b5e5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:21:31 -0700 Subject: ditch abs positioned togglers for explicit justify-content: space-between on parent --- scss/_navbar.scss | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 517a8aa92..c64be1820 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -111,17 +111,6 @@ 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 // where your navbar collapses. .navbar-toggleable { -- cgit v1.2.3 From 0eb9862514bcab5a0d90bcda5285cead000ff4d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:21:45 -0700 Subject: account for fluid containers --- scss/_navbar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index c64be1820..312ea3717 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -127,7 +127,8 @@ } } - > .container { + > .container, + > .container-fluid { padding-right: 0; padding-left: 0; } @@ -148,8 +149,9 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container { display: flex; + > .container, + > .container-fluid { flex-wrap: nowrap; align-items: center; } -- cgit v1.2.3 From 09ba3de61974cf4e68dc173b6f36696ae1f5bf3d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:23:11 -0700 Subject: revamp the collapse behavior instead of flex column, use wrap and an explicit flexbox break with flex-basis 100% on the navbar-collapse. add some additional container styles for enabling flex behavior when content isn't immediate child of .navbar --- scss/_navbar.scss | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 312ea3717..6f9fe2500 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -18,11 +18,20 @@ .navbar { position: relative; display: flex; - flex-direction: column; + flex-wrap: wrap; // allow us to do the line break for collapsing content + justify-content: space-between; // space out brand from logo padding: $navbar-padding-y $navbar-padding-x; - @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { - > .container { + // 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; + justify-content: space-between; + + @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { + width: 100%; // prevent flex parent container(-fluid) from collapsing margin-right: 0; margin-left: 0; } @@ -84,6 +93,13 @@ // 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 @@ -138,6 +154,7 @@ flex-direction: row; flex-wrap: nowrap; align-items: center; + justify-content: flex-start; .navbar-nav { flex-direction: row; @@ -149,7 +166,6 @@ } // For nesting containers, have to redeclare for alignment purposes - display: flex; > .container, > .container-fluid { flex-wrap: nowrap; @@ -159,7 +175,6 @@ // scss-lint:disable ImportantRule .navbar-collapse { display: flex !important; - width: 100%; } // scss-lint:enable ImportantRule -- cgit v1.2.3 From a03aaf39df876691e4ba6acb0b40e9790e4c7127 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 01:52:05 -0500 Subject: Harmonize navbar-brand, navbar-text and nav-link height --- scss/_nav.scss | 2 +- scss/_navbar.scss | 8 ++++---- scss/_variables.scss | 48 +++++++++++++++++++++++++++++------------------- 3 files changed, 34 insertions(+), 24 deletions(-) (limited to 'scss') diff --git a/scss/_nav.scss b/scss/_nav.scss index 731f1b71b..58e71eca4 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -13,7 +13,7 @@ .nav-link { display: block; - padding: $nav-link-padding; + padding: $nav-link-padding-y $nav-link-padding-x; @include hover-focus { text-decoration: none; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6f9fe2500..9a50b4e9a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -46,8 +46,8 @@ .navbar-brand { display: inline-block; align-self: flex-start; - 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; line-height: inherit; @@ -83,8 +83,8 @@ .navbar-text { display: inline-block; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 69eb4017b..b0c8859a5 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 @@ -573,11 +573,39 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; +// Navs + +$nav-item-margin: .2rem !default; +$nav-item-inline-spacer: 1rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-padding-y: .5rem !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-color: $gray !default; +$nav-tabs-active-link-bg: $body-bg !default; +$nav-tabs-active-link-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 $navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !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: $font-size-lg * $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-font-size: $font-size-lg !default; @@ -597,24 +625,6 @@ $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 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: rgba($black,.1) !default; -// Navs - -$nav-link-padding: .5em 1em !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; - - // Pagination $pagination-padding-x: .75rem !default; -- cgit v1.2.3 From 17cb5bb674fd2f6c47619726aeea29437bcd6a0a Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 01:59:20 -0500 Subject: Allow to customize navbar-brand font-size --- scss/_navbar.scss | 2 +- scss/_variables.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 9a50b4e9a..2c5cbe2ee 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -49,7 +49,7 @@ 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; diff --git a/scss/_variables.scss b/scss/_variables.scss index b0c8859a5..0fa4f334b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -601,8 +601,9 @@ $nav-pills-active-link-bg: $component-active-bg !default; $navbar-padding-x: $spacer !default; $navbar-padding-y: ($spacer / 2) !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: $font-size-lg * $line-height-base !default; +$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; -- cgit v1.2.3 From 90c5f6230b0861d70adeee84040da5ba049a9769 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 21 Mar 2017 22:00:46 -0700 Subject: rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else --- scss/_navbar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 2c5cbe2ee..1ec5d2645 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -127,9 +127,9 @@ background-size: 100% 100%; } -// 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($next, $grid-breakpoints); -- cgit v1.2.3 From e20d744bdf6ea396ef6d29ab5c1976635d861b29 Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Tue, 14 Feb 2017 18:38:08 +0200 Subject: .navbar-toggler color Change the .navbar-toggler to default contextual .navbar-*-color. --- scss/_navbar.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 1ec5d2645..daef7ba7a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -193,8 +193,7 @@ // Dark links against a light background .navbar-light { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-light-active-color; @include hover-focus { @@ -224,6 +223,7 @@ } .navbar-toggler { + color: $navbar-light-color; border-color: $navbar-light-toggler-border; } @@ -238,8 +238,7 @@ // White links against a dark background .navbar-inverse { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-inverse-active-color; @include hover-focus { @@ -269,6 +268,7 @@ } .navbar-toggler { + color: $navbar-inverse-color; border-color: $navbar-inverse-toggler-border; } -- cgit v1.2.3 From 8108c0357a97244d3af1f69291edec03aefd6678 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 Mar 2017 15:23:10 -0700 Subject: Drop position relative on container that was added quickly in Alpha 6 --- scss/mixins/_grid.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index eb6c012f3..cf4f58b5a 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -3,7 +3,6 @@ // Generate semantic grid columns with these mixins. @mixin make-container($gutters: $grid-gutter-widths) { - position: relative; margin-right: auto; margin-left: auto; -- cgit v1.2.3 From 32ed268c827672e41382f5ceed5feb4487a22ef2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 25 Mar 2017 22:23:40 -0700 Subject: fixes #22245: revamp the breakpoint-between and breakpoint-only mixins to actually work --- scss/mixins/_breakpoints.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 904b60f7a..be1d034d8 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -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; } } -- cgit v1.2.3 From 7ca078da815320c75862b6cf25f46ce706570279 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 26 Mar 2017 12:53:50 -0700 Subject: fixes #22111 - add .col-*-auto to the extend in our grid framework mixins so it gets padding - this means we can avoid the col-12 classes in our docs for the responsive variants --- scss/mixins/_grid-framework.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') 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; } -- cgit v1.2.3 From 3ea3e10799230ac9689d530273ec3ce110dbb5dd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 26 Mar 2017 14:54:19 -0700 Subject: Use the hr-method for the nav-divider, closes #21945 --- scss/mixins/_nav-divider.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss index 557673ccd..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; + height: 0; margin: ($spacer / 2) 0; overflow: hidden; - background-color: $color; + border-top: 1px solid $color; } -- cgit v1.2.3 From fe3acc097ac9def6569f471ef25d444020c30057 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Mar 2017 22:52:24 -0700 Subject: Card image fixes (#22288) * fix image stretching due to flexbox * fix broke text-muted on dark bg * no img-fluid needed --- scss/_card.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 9fe70e8cf..99f7c2195 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -158,10 +158,6 @@ } // Card image -.card-img { - // margin: -1.325rem; - @include border-radius($card-border-radius-inner); -} .card-img-overlay { position: absolute; top: 0; @@ -171,13 +167,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); } -- cgit v1.2.3 From bebdbe411971206e83b52b2448664acfdb73a174 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 27 Mar 2017 22:53:39 -0700 Subject: Fix wrapping card decks (#22289) fixes #22007 and fixes #21976 by changing margin strategy for card deck gutters --- scss/_card.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 99f7c2195..2c74c0c97 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -190,17 +190,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; } } } -- cgit v1.2.3 From 296c99020c0f7c8122b8cd1a7f93c0797f8ff8dd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 28 Mar 2017 09:28:27 -0700 Subject: Revamp button and input vars while fixing #21587 (#22287) --- scss/_button-group.scss | 12 ++++++------ scss/_buttons.scss | 10 ++++------ scss/_forms.scss | 40 ++++++++++++++++++++++------------------ scss/_input-group.scss | 9 +++++---- scss/_variables.scss | 41 +++++++++++++++++------------------------ scss/mixins/_buttons.scss | 3 ++- 6 files changed, 56 insertions(+), 59 deletions(-) (limited to 'scss') diff --git a/scss/_button-group.scss b/scss/_button-group.scss index facecd37a..af74a55f1 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -99,8 +99,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; @@ -108,13 +108,13 @@ } .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; } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 2964a526d..4a8ffcbe5 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 @@ -137,12 +136,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/_forms.scss b/scss/_forms.scss index 4ec9f6e32..11fa94a25 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -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. @@ -95,20 +95,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 `