From 35f80bb12e4e71fd777ee60ffa43711d8f84b1a6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 10 Aug 2017 20:56:35 -0700 Subject: bump to beta --- scss/bootstrap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 3bc8001fa..648f446b6 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) + * Bootstrap v4.0.0-beta (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -- cgit v1.2.3 From 3fbdedbf22dc9257e06d73b13f6db7244dbda7cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Aug 2017 22:36:57 -0700 Subject: Add basic property-value utils for position --- scss/utilities/_position.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss index 74b8d39e7..bddae2151 100644 --- a/scss/utilities/_position.scss +++ b/scss/utilities/_position.scss @@ -1,4 +1,13 @@ -// Positioning +// Common values + +// Sass list not in variables since it's not intended for customization. +$positions: static, relative, absolute, fixed, sticky; + +@each $position in $positions { + .position-#{$position} { position: $position !important; } +} + +// Shorthand .fixed-top { position: fixed; -- cgit v1.2.3 From 006590ed9a7e39c4fac96cf732d5241edd95a59c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Aug 2017 22:25:35 -0700 Subject: Remove broken CSS that tried to reset the absolute positioning when there was no text --- scss/_forms.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index 519554b47..e884890e4 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -236,10 +236,6 @@ select.form-control-lg { position: absolute; margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; - - &:only-child { - position: static; - } } // Radios and checkboxes on same line -- cgit v1.2.3 From ed4f5778a92be24e7d47f93ff569fef03b9f106e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 20:57:34 -0700 Subject: Add .font-weight-light class, add !important to the classes --- scss/utilities/_text.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index d337e0d63..7573f2987 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -28,9 +28,10 @@ // Weight and italics -.font-weight-normal { font-weight: $font-weight-normal; } -.font-weight-bold { font-weight: $font-weight-bold; } -.font-italic { font-style: italic; } +.font-weight-light { font-weight: $font-weight-light !important; } +.font-weight-normal { font-weight: $font-weight-normal !important; } +.font-weight-bold { font-weight: $font-weight-bold !important; } +.font-italic { font-style: italic !important; } // Contextual colors -- cgit v1.2.3 From 1e38b459809fd7cc9a02a898930d050ef35d1819 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Jul 2017 20:58:13 -0700 Subject: Add $font-weight-light var --- scss/_variables.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index e2bacef4a..bf9916388 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -239,6 +239,7 @@ $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; +$font-weight-light: light !default; $font-weight-normal: normal !default; $font-weight-bold: bold !default; -- cgit v1.2.3 From 1846ab34f68c9ac28254915ebcb885b7aef5d25e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jul 2017 19:07:03 -0700 Subject: 300, not light --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index bf9916388..794d12d83 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -239,7 +239,7 @@ $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: 1.25rem !default; $font-size-sm: .875rem !default; -$font-weight-light: light !default; +$font-weight-light: 300 !default; $font-weight-normal: normal !default; $font-weight-bold: bold !default; -- cgit v1.2.3 From f95282c27ee3e7642e313870cbd10d7137de5650 Mon Sep 17 00:00:00 2001 From: Nathan Woltman Date: Sat, 13 May 2017 11:11:11 -0400 Subject: Fix border on input group elements and custom form inputs c3e4cbd changed the border of input elements to be translucent. This commit makes input group elements and custom form inputs follow the same pattern. --- scss/_custom-forms.scss | 11 ++++++----- scss/_input-group.scss | 3 +++ scss/_variables.scss | 1 + 3 files changed, 10 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index d1fbf954f..ceb0278f4 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -139,6 +139,7 @@ color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background-clip: padding-box; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -215,11 +216,13 @@ z-index: 5; height: $custom-file-height; padding: $custom-file-padding-x $custom-file-padding-y; + overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; user-select: none; background-color: $custom-file-bg; + background-clip: padding-box; border: $custom-file-border-width solid $custom-file-border-color; @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -232,9 +235,8 @@ &::before { position: absolute; - top: -$custom-file-border-width; - right: -$custom-file-border-width; - bottom: -$custom-file-border-width; + top: 0; + right: 0; z-index: 6; display: block; height: $custom-file-height; @@ -242,8 +244,7 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; 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); + border-left: $custom-file-border-width solid $custom-file-border-color; } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 0b668bff3..0c9920a2c 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -74,6 +74,7 @@ color: $input-color; text-align: center; background-color: $input-group-addon-bg; + background-clip: padding-box; border: $input-btn-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); @@ -144,6 +145,8 @@ // element above the siblings. > .btn { position: relative; + background-clip: padding-box; + border: $input-btn-border-width solid $input-group-btn-border-color; + .btn { margin-left: (-$input-btn-border-width); diff --git a/scss/_variables.scss b/scss/_variables.scss index 794d12d83..29fd3b627 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -400,6 +400,7 @@ $form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; +$input-group-btn-border-color: $input-border-color !default; $custom-control-gutter: 1.5rem !default; $custom-control-spacer-y: .25rem !default; -- cgit v1.2.3 From 09019a8ecdccf61b52681dec3376a88509b4e6a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Jun 2017 21:19:36 -0700 Subject: Set explicit text-align on element so we can use inherit to override the default text-align value --- scss/_reboot.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 33fc2d660..2adedda60 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -48,6 +48,8 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. +// 3. Set an explicit initial text-align value so that we can later use the +// the `inherit` value on things like `` elements. body { margin: 0; // 1 @@ -56,6 +58,7 @@ body { font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; + text-align: left; // 3 background-color: $body-bg; // 2 } @@ -304,8 +307,9 @@ caption { } th { - // Matches default `` alignment - text-align: left; + // Matches default `` alignment by inheriting from the ``, or the + // closest parent with a set `text-align`. + text-align: inherit; } -- cgit v1.2.3 From 365c9753f84a026c8bd9695ec1d1587accf610f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Jun 2017 20:09:00 -0700 Subject: Ensure alignment of modal dismiss when no .modal-title is present --- scss/_modal.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index c0c406716..1f290557a 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -82,6 +82,10 @@ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; + + .close { + margin-left: auto; // Force icon to the right even when there's no .modal-title + } } // Title text within header -- cgit v1.2.3 From 056e5594ef6b26961f7cb7dbb9b8d36a6cb1f4b3 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 20 Apr 2017 10:18:48 -0700 Subject: Only add CSS transitions on Buttons for background-color, border-color, and box-shadow --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 29fd3b627..571362e67 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -350,7 +350,7 @@ $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; -$btn-transition: all .15s ease-in-out !default; +$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Forms -- cgit v1.2.3 From 79fcb527bf83c4d4378837dfd9eb707ff53bb322 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jul 2017 11:45:24 -0700 Subject: Add SF Mono to the monospace font stack --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 571362e67..2cc6caf06 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -232,7 +232,7 @@ $transition-collapse: height .35s ease !default; // Font, line-height, and color for body text, headings, and more. $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; -$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -- cgit v1.2.3 From 0c3ed5d3f0ceb583a39e6f29f754c7b308e002d8 Mon Sep 17 00:00:00 2001 From: envolute Date: Tue, 1 Aug 2017 02:47:23 -0300 Subject: Add "$border-color" variable --- scss/_variables.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 2cc6caf06..8a6e7c3f9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -212,6 +212,7 @@ $line-height-lg: 1.5 !default; $line-height-sm: 1.5 !default; $border-width: 1px !default; +$border-color: $gray-200 !default; $border-radius: .25rem !default; $border-radius-lg: .3rem !default; -- cgit v1.2.3 From eeb1ccab9b4ec08682b54d7fd1c4d0d9802b991d Mon Sep 17 00:00:00 2001 From: envolute Date: Tue, 1 Aug 2017 02:50:09 -0300 Subject: Change border class The class ".border" (css/utilities/_borders.scss) is set the border-color to "$gray-200". So I see that it would be nice to create a variable for the border color "$border-color". Because the default border should not always be "gray-200". Another thing, there is a "$border-width" variable. Would not it be better to use this variable to set the default width of the border? --- scss/utilities/_borders.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index 82e177c80..b7e91c260 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -2,7 +2,7 @@ // Border // -.border { border: 1px solid $gray-200 !important; } +.border { border: $border-width solid $border-color !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } -- cgit v1.2.3 From c2c06bc5816629dc7b921e3b50e55c533c5f943f Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 10:48:57 -0700 Subject: _progress.scss: makes bars 100% height, centers labels horizontally & vertically --- scss/_progress.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index f7491a64b..1be34c439 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,32 +1,37 @@ +// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } +// Basic progress bar .progress { display: flex; + align-items: center; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; + height: $progress-height; line-height: $progress-height; - text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); } .progress-bar { - height: $progress-height; - line-height: $progress-height; + display: flex; + justify-content: center; + align-items: center; + height: 100%; color: $progress-bar-color; background-color: $progress-bar-bg; - @include transition($progress-bar-transition); } +// Striped .progress-bar-striped { @include gradient-striped(); background-size: $progress-height $progress-height; } +// Animated .progress-bar-animated { animation: progress-bar-stripes $progress-bar-animation-timing; } -- cgit v1.2.3 From ad84eeb6e99efddc1be4f317456dc981a8102b92 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 11:11:10 -0700 Subject: Fixes hound code style/standards --- scss/_progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index 1be34c439..4faa890e4 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -18,8 +18,8 @@ .progress-bar { display: flex; - justify-content: center; align-items: center; + justify-content: center; height: 100%; color: $progress-bar-color; background-color: $progress-bar-bg; -- cgit v1.2.3 From 1ab4f57af4553b36e9c65e15e1426c573286bbab Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 26 May 2017 11:21:02 -0700 Subject: Fixes PropertySortOrder errors --- scss/_progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index 4faa890e4..cd52ed386 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,9 +8,9 @@ .progress { display: flex; align-items: center; + height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; - height: $progress-height; line-height: $progress-height; background-color: $progress-bg; @include border-radius($progress-border-radius); -- cgit v1.2.3 From 36a21f355c9c0a87d9c9f6bb8eb208c3b477af9e Mon Sep 17 00:00:00 2001 From: Dave Poole Date: Fri, 26 May 2017 12:47:09 -0700 Subject: remove comments, align-items, and unnecessary height --- scss/_progress.scss | 6 ------ 1 file changed, 6 deletions(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index cd52ed386..d2a0c820d 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,13 +1,10 @@ -// Progress animations @keyframes progress-bar-stripes { from { background-position: $progress-height 0; } to { background-position: 0 0; } } -// Basic progress bar .progress { display: flex; - align-items: center; height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; @@ -20,18 +17,15 @@ display: flex; align-items: center; justify-content: center; - height: 100%; color: $progress-bar-color; background-color: $progress-bar-bg; } -// Striped .progress-bar-striped { @include gradient-striped(); background-size: $progress-height $progress-height; } -// Animated .progress-bar-animated { animation: progress-bar-stripes $progress-bar-animation-timing; } -- cgit v1.2.3 From 120a14237e9becd191a460ded9a9a2a6af960531 Mon Sep 17 00:00:00 2001 From: Dave Poole Date: Fri, 26 May 2017 13:06:47 -0700 Subject: remove unnecessary line-height --- scss/_progress.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index d2a0c820d..efbb44034 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -8,7 +8,6 @@ height: $progress-height; overflow: hidden; // force rounded corners by cropping it font-size: $progress-font-size; - line-height: $progress-height; background-color: $progress-bg; @include border-radius($progress-border-radius); } -- cgit v1.2.3 From 4634b39a1bd2034a5d6d9c3ba9872905580c4a39 Mon Sep 17 00:00:00 2001 From: Pascal Pixel Date: Fri, 11 Aug 2017 14:51:42 +0900 Subject: Emoji Defaults (#22565) --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 8a6e7c3f9..e75e44e6a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -232,7 +232,7 @@ $transition-collapse: height .35s ease !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -- cgit v1.2.3 From b76357d57d472542b391d099629221f05e5a298f Mon Sep 17 00:00:00 2001 From: Morgan Stone Date: Thu, 10 Aug 2017 22:58:12 -0700 Subject: Reduce number of spacing rules (#23208) * reduce # of spacing rules by combining x & y with t r b l * Remove unnecessary spaces --- scss/utilities/_spacing.scss | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index c89816b5e..61af0c66d 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -8,34 +8,42 @@ @each $size, $length in $spacers { .#{$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}t#{$infix}-#{$size}, + .#{$abbrev}y#{$infix}-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r#{$infix}-#{$size}, .#{$abbrev}x#{$infix}-#{$size} { #{$prop}-right: $length !important; - #{$prop}-left: $length !important; } + .#{$abbrev}b#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { - #{$prop}-top: $length !important; #{$prop}-bottom: $length !important; } + .#{$abbrev}l#{$infix}-#{$size}, + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-left: $length !important; + } } } // Some special margin utils .m#{$infix}-auto { margin: auto !important; } - .mt#{$infix}-auto { margin-top: auto !important; } - .mr#{$infix}-auto { margin-right: auto !important; } - .mb#{$infix}-auto { margin-bottom: auto !important; } - .ml#{$infix}-auto { margin-left: auto !important; } + .mt#{$infix}-auto, + .my#{$infix}-auto { + margin-top: auto !important; + } + .mr#{$infix}-auto, .mx#{$infix}-auto { margin-right: auto !important; - margin-left: auto !important; } + .mb#{$infix}-auto, .my#{$infix}-auto { - margin-top: auto !important; margin-bottom: auto !important; } + .ml#{$infix}-auto, + .mx#{$infix}-auto { + margin-left: auto !important; + } } } -- cgit v1.2.3 From c5903ddfd65fe507b416f0cb9ddc9d181614e724 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 10 Aug 2017 22:58:40 -0700 Subject: `$input-height-inner-lg` should use `$font-size-lg` instead of `$font-size-sm` (#23150) --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index e75e44e6a..dc8eaf198 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -383,7 +383,7 @@ $input-height: calc(#{$input-height-inner} + #{$input-height-bo $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; -- cgit v1.2.3 From 9497c2164c04ee160b7de90d3eb66c7d04b70a0b Mon Sep 17 00:00:00 2001 From: Prateek Goel Date: Fri, 11 Aug 2017 06:59:21 +0100 Subject: Add margin variable for breadcrumb (#23138) * add margin variable for breadcrumb * add margin variable for breadcrumb correction * breadcrumb margin variable changes after review --- scss/_breadcrumb.scss | 2 +- scss/_variables.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 2bc0e2086..52fadec69 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,6 +1,6 @@ .breadcrumb { padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: 1rem; + margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); diff --git a/scss/_variables.scss b/scss/_variables.scss index dc8eaf198..8990ad75e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -790,6 +790,8 @@ $breadcrumb-padding-y: .75rem !default; $breadcrumb-padding-x: 1rem !default; $breadcrumb-item-padding: .5rem !default; +$breadcrumb-margin-bottom: 1rem !default; + $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; -- cgit v1.2.3 From 7c452ac60784031facc2872142c92fe1001d95ba Mon Sep 17 00:00:00 2001 From: Prateek Goel Date: Fri, 11 Aug 2017 07:00:01 +0100 Subject: Add margin variable for paragraphs (#23140) --- scss/_reboot.scss | 2 +- scss/_variables.scss | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 2adedda60..9a6b025f6 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -103,7 +103,7 @@ h1, h2, h3, h4, h5, h6 { // bottom margin to use `rem` units instead of `em`. p { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: $paragraph-margin-bottom; } // Abbreviations diff --git a/scss/_variables.scss b/scss/_variables.scss index 8990ad75e..23e1cf3f5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -13,6 +13,7 @@ // Spacing // Body // Links +// Paragraphs // Grid breakpoints // Grid containers // Grid columns @@ -167,6 +168,12 @@ $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem; + // Grid breakpoints // -- cgit v1.2.3 From ffa789327b7c5c295812ec6b1a0a7ef0f8c9ab66 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 10 Aug 2017 23:01:52 -0700 Subject: Custom File padding-x and padding-y values are reversed (#23067) Custom File `$custom-file-focus-box-shadow` should show even if box shadows are disabled Custom File variables should inherit from inputs --- scss/_custom-forms.scss | 6 +++--- scss/_variables.scss | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index ceb0278f4..1bf268b83 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -204,7 +204,7 @@ opacity: 0; &:focus ~ .custom-file-control { - @include box-shadow($custom-file-focus-box-shadow); + box-shadow: $custom-file-focus-box-shadow; } } @@ -215,7 +215,7 @@ left: 0; z-index: 5; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; @@ -240,7 +240,7 @@ z-index: 6; display: block; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; diff --git a/scss/_variables.scss b/scss/_variables.scss index 23e1cf3f5..b57c15f01 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -465,21 +465,21 @@ $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px r $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; -$custom-file-height: 2.5rem !default; +$custom-file-height: $input-height !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; -$custom-file-padding-y: 1rem !default; -$custom-file-padding-x: .5rem !default; -$custom-file-line-height: 1.5 !default; -$custom-file-color: $gray-700 !default; -$custom-file-bg: $white !default; -$custom-file-border-width: $border-width !default; +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; $custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; $custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $gray-200 !default; +$custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( placeholder: ( en: "Choose file..." -- cgit v1.2.3 From 7b66aeb2f6c7f066a8d1f18dae839240886c2fa0 Mon Sep 17 00:00:00 2001 From: Prateek Goel Date: Fri, 11 Aug 2017 07:05:32 +0100 Subject: Fix to Chrome inheritance bug (#22872) (#23118) * Fix to Chrome inheritance bug (#22872) * Remove box-sizing from html box-sizing removed from html and order of wild card selected and html selector swapped to maintain correctness of comments. --- scss/_reboot.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 9a6b025f6..e411e9215 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -18,8 +18,13 @@ // we force a non-overlapping, non-auto-hiding scrollbar to counteract. // 6. Change the default tap highlight to be completely transparent in iOS. -html { +*, +*::before, +*::after { box-sizing: border-box; // 1 +} + +html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 @@ -28,12 +33,6 @@ html { -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } -*, -*::before, -*::after { - box-sizing: inherit; // 1 -} - // IE10+ doesn't honor `` in some cases. @at-root { @-ms-viewport { width: device-width; } -- cgit v1.2.3 From a0521efbb59aefeb447a0ef6927aadf1999fee07 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 13 Jul 2017 11:11:37 -0700 Subject: Input Group Addon add option to configure `$input-group-addon-color` --- scss/_input-group.scss | 2 +- scss/_variables.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 0c9920a2c..4d3fec656 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -71,7 +71,7 @@ font-size: $font-size-base; // Match inputs font-weight: $font-weight-normal; line-height: $input-btn-line-height; - color: $input-color; + color: $input-group-addon-color; text-align: center; background-color: $input-group-addon-bg; background-clip: padding-box; diff --git a/scss/_variables.scss b/scss/_variables.scss index b57c15f01..4b3299ce9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -406,6 +406,7 @@ $form-check-inline-margin-x: .75rem !default; $form-group-margin-bottom: 1rem !default; +$input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; $input-group-btn-border-color: $input-border-color !default; -- cgit v1.2.3 From 34257d25a576cdd07d56a018177c2611741514e8 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 27 Apr 2017 09:19:13 -0700 Subject: Pagination border-widths greater than 1px cause uneven borders between items --- scss/_pagination.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_pagination.scss b/scss/_pagination.scss index a04929987..4ef144204 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -38,7 +38,7 @@ position: relative; display: block; padding: $pagination-padding-y $pagination-padding-x; - margin-left: -1px; + margin-left: -$pagination-border-width; line-height: $pagination-line-height; color: $pagination-color; background-color: $pagination-bg; -- cgit v1.2.3 From 9d988de054ad8a73f1cb1d8901af0f45e3d21f34 Mon Sep 17 00:00:00 2001 From: razh Date: Sat, 12 Aug 2017 02:11:41 -0400 Subject: Remove extra spaces from spacing utilities (#23337) --- scss/utilities/_spacing.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 61af0c66d..150d31631 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -7,7 +7,7 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $length !important; @@ -28,7 +28,7 @@ } // Some special margin utils - .m#{$infix}-auto { margin: auto !important; } + .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; -- cgit v1.2.3 From 02ae73fc0fc21049ea4199dfda18c87c9b709e52 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 1 May 2017 17:59:21 -0700 Subject: Apply `align-items: center;` to `.input-group` instead of input group sub components, causes `.input-group .form-control` and `.input-group-addon` to be large when next to a tall element --- scss/_input-group.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 4d3fec656..40bc50a53 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -5,6 +5,7 @@ .input-group { position: relative; display: flex; + align-items: center; width: 100%; .form-control { @@ -28,10 +29,6 @@ .input-group-addon, .input-group-btn, .input-group .form-control { - // Vertically centers the content of the addons within the input group - display: flex; - align-items: center; - &:not(:first-child):not(:last-child) { @include border-radius(0); } -- cgit v1.2.3 From 80cf395e4d8f91337cf28d8b85ca087b0ce3e8ae Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 1 May 2017 18:00:43 -0700 Subject: Remove `vertical-align: middle` from `.input-group-addon` and `.input-group-btn` left over from V3 --- scss/_input-group.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 40bc50a53..95b17be47 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -37,7 +37,6 @@ .input-group-addon, .input-group-btn { white-space: nowrap; - vertical-align: middle; // Match the inputs } -- cgit v1.2.3 From bde9c64ca9070f9da7825a59e7cce4842247ffd2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Aug 2017 17:13:53 -0700 Subject: Apply the invalid/valid state to the class name --- scss/mixins/_forms.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 4a1e0bc31..67e198c26 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -33,8 +33,8 @@ box-shadow: 0 0 0 .2rem rgba($color,.25); } - ~ .invalid-feedback, - ~ .invalid-tooltip { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { display: block; } } -- cgit v1.2.3 From 54d76805a5e425bc870d7cff9a75210170711ea4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Aug 2017 14:53:24 -0700 Subject: Redo .card-deck and .card-group so they're always flex (#22860) --- scss/_card.scss | 27 +++++++++++++++++++++------ scss/_variables.scss | 3 ++- 2 files changed, 23 insertions(+), 7 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 1ab85a4ec..b5bc26b15 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -130,9 +130,15 @@ // Card deck -@include media-breakpoint-up(sm) { - .card-deck { - display: flex; +.card-deck { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-deck-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; @@ -142,6 +148,7 @@ flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; + margin-bottom: 0; // Override the default margin-left: $card-deck-margin; } } @@ -152,15 +159,22 @@ // Card groups // -@include media-breakpoint-up(sm) { - .card-group { - display: flex; +.card-group { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-group-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; .card { flex: 1 0 0%; + .card { + margin-bottom: 0; margin-left: 0; border-left: 0; } @@ -177,6 +191,7 @@ border-bottom-right-radius: 0; } } + &:last-child { @include border-left-radius(0); diff --git a/scss/_variables.scss b/scss/_variables.scss index 4b3299ce9..049956178 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -632,7 +632,8 @@ $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-deck-margin: ($grid-gutter-width / 2) !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; -- cgit v1.2.3 From bb0cab9f10c4716e01972e9404849deb9f2882ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Aug 2017 14:54:57 -0700 Subject: move max-width: 100% on .container to the root of the make-container mixin so it's not repeated at compilation (#22947) --- scss/mixins/_grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 67dbcd38e..b694b4d01 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -3,11 +3,11 @@ // Generate semantic grid columns with these mixins. @mixin make-container() { + width: 100%; margin-right: auto; margin-left: auto; padding-right: ($grid-gutter-width / 2); padding-left: ($grid-gutter-width / 2); - width: 100%; } -- cgit v1.2.3 From cd22eb1da03d5dbc9062ad5c9e75c05429e4bcd0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Aug 2017 14:55:28 -0700 Subject: Button code cleanup (#22951) * use a mixin there * revamp .btn-link to match default and outline variants * remove unnecessary properties --- scss/_button-group.scss | 40 +++++++++++++++++++++++----------------- scss/_buttons.scss | 32 ++++++++++++-------------------- scss/mixins/_buttons.scss | 2 +- 3 files changed, 36 insertions(+), 38 deletions(-) (limited to 'scss') diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 30a14d883..406350682 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -10,7 +10,6 @@ > .btn { position: relative; flex: 0 1 auto; - margin-bottom: 0; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -66,15 +65,18 @@ .btn-group > .btn-group { float: left; } + .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } + .btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { @include border-right-radius(0); } } + .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { @include border-left-radius(0); } @@ -129,7 +131,6 @@ // .btn-group-vertical { - display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; @@ -146,30 +147,35 @@ margin-top: -$input-btn-border-width; margin-left: 0; } -} -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { - border-radius: 0; + > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } } + &:first-child:not(:last-child) { @include border-bottom-radius(0); } + &:last-child:not(:first-child) { @include border-top-radius(0); } -} -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child:not(:last-child) { - > .btn:last-child, - > .dropdown-toggle { - @include border-bottom-radius(0); + + > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; + } + + > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } + } + + > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(0); } -} -.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { - @include border-top-radius(0); } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 607f24a2d..a708560b3 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -71,36 +71,28 @@ fieldset[disabled] a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; + background-color: transparent; border-radius: 0; - &, - &:active, - &.active, - &:disabled { + @include hover { + color: $link-hover-color; + text-decoration: $link-hover-decoration; background-color: transparent; - @include box-shadow(none); + border-color: transparent; } - &, + &:focus, - &:active { + &.focus { border-color: transparent; box-shadow: none; } - @include hover { - border-color: transparent; - } - @include hover-focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - background-color: transparent; - } - &:disabled { - color: $btn-link-disabled-color; - @include hover-focus { - text-decoration: none; - } + &:disabled, + &.disabled { + color: $btn-link-disabled-color; } + + // No need for an active state here } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f7ec5764e..312a18f1d 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -9,7 +9,7 @@ border-color: $border; @include box-shadow($btn-box-shadow); - &:hover { + @include hover { @include color-yiq($background); background-color: $active-background; border-color: $active-border; -- cgit v1.2.3 From 0bc39aa30aec905f1449c720423093a379def024 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Aug 2017 14:56:30 -0700 Subject: Use empty Sass map and merge into it for easier customization of color maps (#23260) --- scss/_variables.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 049956178..e68fb23c8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -61,7 +61,8 @@ $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; -$grays: ( +$grays: () !default; +$grays: map-merge(( 100: $gray-100, 200: $gray-200, 300: $gray-300, @@ -71,7 +72,7 @@ $grays: ( 700: $gray-700, 800: $gray-800, 900: $gray-900 -) !default; +), $grays); $blue: #007bff !default; $indigo: #6610f2 !default; @@ -84,7 +85,8 @@ $green: #28a745 !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; -$colors: ( +$colors: () !default; +$colors: map-merge(( blue: $blue, indigo: $indigo, purple: $purple, @@ -98,9 +100,10 @@ $colors: ( white: $white, gray: $gray-600, gray-dark: $gray-800 -) !default; +), $colors); -$theme-colors: ( +$theme-colors: () !default; +$theme-colors: map-merge(( primary: $blue, secondary: $gray-600, success: $green, @@ -109,7 +112,7 @@ $theme-colors: ( danger: $red, light: $gray-100, dark: $gray-800 -) !default; +), $theme-colors); // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; -- cgit v1.2.3 From 453a5fa03355300293e7012c3e421feadd69a26b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Kout?= Date: Sun, 13 Aug 2017 23:58:47 +0200 Subject: Move the gap between inline checkboxes to right (#22607) --- scss/_forms.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index e884890e4..83d879737 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -241,14 +241,11 @@ select.form-control-lg { // Radios and checkboxes on same line .form-check-inline { display: inline-block; + margin-right: $form-check-inline-margin-x; .form-check-label { vertical-align: middle; } - - + .form-check-inline { - margin-left: $form-check-inline-margin-x; - } } -- cgit v1.2.3 From e6042e6f44aeac4f160660adae2b0d0a8f512c71 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 28 Jun 2017 12:34:07 -0700 Subject: Add option to disable carets on dropdowns through `$enable-caret` --- scss/_dropdown.scss | 21 ++------------------- scss/_mixins.scss | 1 + scss/_variables.scss | 1 + scss/mixins/_caret.scss | 35 +++++++++++++++++++++++++++++++++++ 4 files changed, 39 insertions(+), 19 deletions(-) create mode 100644 scss/mixins/_caret.scss (limited to 'scss') diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 05e8b1652..9d276f875 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -6,21 +6,7 @@ .dropdown-toggle { // Generate the caret automatically - &::after { - display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; - content: ""; - border-top: $caret-width solid; - border-right: $caret-width solid transparent; - border-left: $caret-width solid transparent; - } - - &:empty::after { - margin-left: 0; - } + @include caret; } // Allow for dropdowns to go bottom up (aka, dropup-menu) @@ -32,10 +18,7 @@ } .dropdown-toggle { - &::after { - border-top: 0; - border-bottom: $caret-width solid; - } + @include caret(up); } } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 09035bf10..d9a1774b7 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -19,6 +19,7 @@ // // Components @import "mixins/alert"; @import "mixins/buttons"; +@import "mixins/caret"; @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; diff --git a/scss/_variables.scss b/scss/_variables.scss index e68fb23c8..71fb384aa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -122,6 +122,7 @@ $theme-color-interval: 8% !default; // // Quickly modify global styling by enabling or disabling optional features. +$enable-caret: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss new file mode 100644 index 000000000..daab9d03c --- /dev/null +++ b/scss/mixins/_caret.scss @@ -0,0 +1,35 @@ +@mixin caret-down { + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-bottom: 0; + border-left: $caret-width solid transparent; +} + +@mixin caret-up { + border-top: 0; + border-right: $caret-width solid transparent; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; +} + +@mixin caret($direction: down) { + @if $enable-caret { + &::after { + display: inline-block; + width: 0; + height: 0; + margin-left: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @if $direction == down { + @include caret-down; + } @else if $direction == up { + @include caret-up; + } + } + + &:empty::after { + margin-left: 0; + } + } +} -- cgit v1.2.3 From 1cfbc2c62df86ed1d243591160634965eb0ef2b7 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 14 Aug 2017 16:02:41 -0300 Subject: changes 1px to border-width variable on cards --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index e68fb23c8..bbbe1ff42 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -626,7 +626,7 @@ $jumbotron-bg: $gray-200 !default; $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; -$card-border-width: 1px !default; +$card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -- cgit v1.2.3 From d3f09ff3eaa9a6d5916036ec4ab9d4c5dd14bcd4 Mon Sep 17 00:00:00 2001 From: Jurre Date: Tue, 15 Aug 2017 03:07:44 +0200 Subject: Removed comment (#23415) There is no _custom.scss file anymore. --- scss/_variables.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index bbbe1ff42..93fdedf34 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,8 +1,5 @@ // Variables // -// Copy settings from this file into the provided `_custom.scss` to override -// the Bootstrap defaults without modifying key, versioned files. -// // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -- cgit v1.2.3 From 63909cacb1544e292e27d7f7b5991e74636ca864 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 15 Aug 2017 03:08:31 +0200 Subject: Remove remaining v4 alpha references (#23414) * Remove remaining references to v4 Alpha This commit removes the remaining refrences to the v4 Alpha website and replaces them with the corresponding v4 Beta ones. **Note:** We have to hard code the current docs version at some places. Wouldn't it be good to have a `/docs/latest/` redirect to solve this "issue" in the future? * Don't update the domain in the CNAME file --- scss/_reboot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index e411e9215..1d09ce89a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -272,7 +272,7 @@ svg:not(:root) { // DON'T remove the click delay when `` is present. // However, they DO support removing the click delay via `touch-action: manipulation`. // See: -// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch +// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch // * http://caniuse.com/#feat=css-touch-action // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay -- cgit v1.2.3 From 77777b388d7def95ef0e17a1b24223a11fa2d12d Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 14 Aug 2017 22:09:44 -0300 Subject: Adds a default flag to paragraph-margin-bottom (#23420) --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 93fdedf34..fe48af523 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -172,7 +172,7 @@ $link-hover-decoration: underline !default; // // Style p element. -$paragraph-margin-bottom: 1rem; +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints -- cgit v1.2.3 From a80198db4d745b02fe0e288a2839a55bbbca9d95 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Aug 2017 18:11:44 -0700 Subject: De-dupe width on .fluid-container (#23402) Fixes #23397 --- scss/_grid.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_grid.scss b/scss/_grid.scss index 9ab9ae02b..a22751537 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -16,7 +16,6 @@ @if $enable-grid-classes { .container-fluid { - width: 100%; @include make-container(); } } -- cgit v1.2.3 From 5b8738afc1c7e746d6f08ec0f25f83603307de45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Aug 2017 22:33:55 -0700 Subject: Fix .btn-outline-light hover color Uses some if/else action to ensure there's readable text on hover. Swapped out a hex value to a variable while I was in there. Fixes #23398, fixes #23351. --- scss/_buttons.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_buttons.scss b/scss/_buttons.scss index a708560b3..b4c28896b 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -58,7 +58,11 @@ fieldset[disabled] a.btn { @each $color, $value in $theme-colors { .btn-outline-#{$color} { - @include button-outline-variant($value, #fff); + @if $color == "light" { + @include button-outline-variant($value, $gray-900); + } @else { + @include button-outline-variant($value, $white); + } } } -- cgit v1.2.3 From f07d870381885f1901f7de78457761a5c13d64b3 Mon Sep 17 00:00:00 2001 From: Jon Wolski Date: Thu, 17 Aug 2017 14:25:38 -0500 Subject: Remove `color` property from `badge` class I suggest removing `color: #FFF` from the `badge` class, because it is provided by the `badge-` classes along with a background-color, whereas there is no corresponding background-color provided on the `badge` class itself. Background ---------- According to the documentation: > [badge] Requires one of the contextual, color modifier classes for `color` and > `background-color`. That is, color and background color should be provided by a modifier class, rather than the badge class itself. e.g. `4` In general, providing a `color` property without also providing a `background-color` should be avoided. [W3 QA tips] In this context, this is a problem only if someone creates a `badge` without providing a modifier. Such an omition may be difficult to trouble-shoot, because this will most likely yield white text on a white background. [W3 QA tips](https://www.w3.org/QA/Tips/color) --- scss/_badge.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_badge.scss b/scss/_badge.scss index 8a7626344..fea10ebb1 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -9,7 +9,6 @@ font-size: $badge-font-size; font-weight: $badge-font-weight; line-height: 1; - color: $badge-color; text-align: center; white-space: nowrap; vertical-align: baseline; -- cgit v1.2.3 From fd8c052c67a0ac3682a4191d0b826ce6c001581f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Aug 2017 22:30:44 -0700 Subject: Restore grid offset classes Fixes #23360 by restoring just the offset class generation to our grid framework mixins. Also restores the `make-col-offset` mixin. Docs have been restored to illustrate this behavior and merged with the newer margin utilities examples. --- scss/mixins/_grid-framework.scss | 9 +++++++++ scss/mixins/_grid.scss | 4 ++++ 2 files changed, 13 insertions(+) (limited to 'scss') diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index d8195ddfa..a9e7c7590 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -51,6 +51,15 @@ order: $i; } } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns) + } + } + } } } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index b694b4d01..584c78b92 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -45,3 +45,7 @@ // do not appear to require this. max-width: percentage($size / $columns); } + +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +} -- cgit v1.2.3 From 6fc9dde72711bf085769e1a2b19d152a82f0c2b5 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Thu, 17 Aug 2017 00:45:21 +0200 Subject: equalize height of the first card of the card-group --- scss/_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index b5bc26b15..51dc8b110 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -172,9 +172,9 @@ .card { flex: 1 0 0%; + margin-bottom: 0; + .card { - margin-bottom: 0; margin-left: 0; border-left: 0; } -- cgit v1.2.3 From c4b3d81887b0f8451308cb35b2820d7d5e8d4824 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 20 Aug 2017 11:37:20 -0700 Subject: Drop the variables file table of contents and update the comment at the top I never use this dang list and it just falls out of date far too easily. Dropping for my own sanity. --- scss/_variables.scss | 38 -------------------------------------- 1 file changed, 38 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index fe48af523..cc4d26a30 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -3,44 +3,6 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -// Table of Contents -// -// Color system -// Options -// Spacing -// Body -// Links -// Paragraphs -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components -// Tables -// Buttons -// Forms -// Dropdowns -// Z-index master list -// Navs -// Navbar -// Pagination -// Jumbotron -// Form states and alerts -// Cards -// Tooltips -// Popovers -// Badges -// Modals -// Alerts -// Progress bars -// List group -// Image thumbnails -// Figures -// Breadcrumbs -// Carousel -// Close -// Code - // // Color system -- cgit v1.2.3 From 1da730c67f82324477ae1a029407b4bc04db94ee Mon Sep 17 00:00:00 2001 From: Alex Chegodaev Date: Thu, 17 Aug 2017 11:27:59 +0300 Subject: added @content directive to media-breakpoint-only mixin for min and max cases --- scss/mixins/_breakpoints.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 8d7378d36..082c5f99b 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -98,8 +98,12 @@ @content; } } @else if $max == null { - @include media-breakpoint-up($name) + @include media-breakpoint-up($name) { + @content; + } } @else if $min == null { - @include media-breakpoint-down($name) + @include media-breakpoint-down($name) { + @content; + } } } -- cgit v1.2.3 From 2ba0127c9154a056d4c747d9c029f734fc5bdbc3 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Wed, 16 Aug 2017 00:20:47 +0200 Subject: fixes double border when .list-group.list-group-flush is preceded by .card-header --- scss/_card.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 51dc8b110..777a1a9aa 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -56,6 +56,10 @@ @include border-bottom-radius($card-border-radius); } } + + .card-header + .list-group > li:first-child { + border: 0; + } } -- cgit v1.2.3 From bb32e9115490b142d7a6684cd508a48a1589f1c6 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Wed, 16 Aug 2017 20:14:56 +0200 Subject: added suggested fix for list-groups with a elements --- scss/_card.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 777a1a9aa..7f1811def 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -57,7 +57,8 @@ } } - .card-header + .list-group > li:first-child { + .card-header + .list-group > li:first-child, + .card-header + .list-group > a:first-child { border: 0; } } -- cgit v1.2.3 From 834ee9b433aa123b74016c91dd403cdfd53e3fc5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 20 Aug 2017 12:14:18 -0700 Subject: Simplify selector and only override what we set 1. Instead of having two selectors, we use the `.list-group-item` class and have coverage for list items and anchors. 2. Rather than override all border values, we only override what we set with `border-top`. --- scss/_card.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 7f1811def..40fa42510 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -57,9 +57,8 @@ } } - .card-header + .list-group > li:first-child, - .card-header + .list-group > a:first-child { - border: 0; + .card-header + .list-group > .list-group-item:first-child { + border-top: 0; } } -- cgit v1.2.3 From 26e6d8b2b28555e2c0e3cdd02e98550420265771 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 20 Aug 2017 13:36:16 -0700 Subject: drop the now unused -color variable --- scss/_variables.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index cc4d26a30..31d019321 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -646,7 +646,6 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau // Badges -$badge-color: $white !default; $badge-font-size: 75% !default; $badge-font-weight: $font-weight-bold !default; $badge-padding-y: .25em !default; -- cgit v1.2.3 From 22f6ee52f04457755328d0230da01334dd48aa54 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 20 Aug 2017 14:06:05 -0700 Subject: remove commented out code, fixes #23530 --- scss/_forms.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index 83d879737..33163a052 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -7,8 +7,6 @@ .form-control { display: block; width: 100%; - // // Make inputs at least the height of their button counterpart (base line-height + padding + border) - // height: $input-height; padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; line-height: $input-btn-line-height; -- cgit v1.2.3 From bd3ca58c08be609f75e092002eb253ee934c2117 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 20 Aug 2017 14:18:11 -0700 Subject: Rename grayscale function to gray --- scss/_functions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_functions.scss b/scss/_functions.scss index 6c0601c50..a63680aa5 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -72,7 +72,7 @@ @return map-get($theme-colors, $key); } -@function grayscale($key: "100") { +@function gray($key: "100") { @return map-get($grays, $key); } -- cgit v1.2.3 From 6b6f45ad673b4f1cbc63e29f01bc5ad10a87ebd5 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 21 Aug 2017 22:45:11 +0100 Subject: Exclude input type=range from touch-action:manipulation --- scss/_reboot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 1d09ce89a..41f084bc4 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -280,7 +280,7 @@ a, area, button, [role="button"], -input, +input:not([type=range]), label, select, summary, -- cgit v1.2.3 From 07594279357fe933d64a3350cd48863ace69404e Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2017 18:13:56 -0700 Subject: (#22414) Rename variables `$table-inverse-bg`, `$table-inverse-accent-bg`, `$table-inverse-hover-bg`, `$table-inverse-border-color`, `$table-inverse-color` to `$table-dark-bg`, `$table-dark-accent-bg`, `$table-dark-hover-bg`, `$table-dark-border-color`, `$table-dark-color` for consistency --- scss/_tables.scss | 14 +++++++------- scss/_variables.scss | 10 +++++----- 2 files changed, 12 insertions(+), 12 deletions(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index a652d17c5..3f3a3f1b7 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -105,8 +105,8 @@ .thead-inverse { th { - color: $table-inverse-color; - background-color: $table-inverse-bg; + color: $table-dark-color; + background-color: $table-dark-bg; } } @@ -118,13 +118,13 @@ } .table-inverse { - color: $table-inverse-color; - background-color: $table-inverse-bg; + color: $table-dark-color; + background-color: $table-dark-bg; th, td, thead th { - border-color: $table-inverse-border-color; + border-color: $table-dark-border-color; } &.table-bordered { @@ -133,14 +133,14 @@ &.table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-inverse-accent-bg; + background-color: $table-dark-accent-bg; } } &.table-hover { tbody tr { @include hover { - background-color: $table-inverse-hover-bg; + background-color: $table-dark-hover-bg; } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 31d019321..c0b5494e6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -283,11 +283,11 @@ $table-border-color: $gray-200 !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; -$table-inverse-bg: $gray-900 !default; -$table-inverse-accent-bg: rgba($white, .05) !default; -$table-inverse-hover-bg: rgba($white, .075) !default; -$table-inverse-border-color: lighten($gray-900, 7.5%) !default; -$table-inverse-color: $body-bg !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; // Buttons -- cgit v1.2.3 From 3bf3bdf420833ed929c999f98dd7e3fa8708b683 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2017 18:17:05 -0700 Subject: Rename `.table-inverse`, `.thead-inverse`, `.thead-default` to `.table-dark`, `.thead-dark`, `.thead-light` respectively --- scss/_tables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index 3f3a3f1b7..df097579c 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -99,25 +99,25 @@ @include table-row-variant(active, $table-active-bg); -// Inverse styles +// Dark styles // // Same table markup, but inverted color scheme: dark background and light text. -.thead-inverse { +.thead-dark { th { color: $table-dark-color; background-color: $table-dark-bg; } } -.thead-default { +.thead-light { th { color: $table-head-color; background-color: $table-head-bg; } } -.table-inverse { +.table-dark { color: $table-dark-color; background-color: $table-dark-bg; -- cgit v1.2.3 From f7eb3c98b261930270c2f65c0e565c454d6cb647 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Sat, 19 Aug 2017 00:10:07 -0700 Subject: `.thead-dark` and `.thead-light` border color should display the right border color --- scss/_tables.scss | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index df097579c..0ef107a7b 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -103,17 +103,21 @@ // // Same table markup, but inverted color scheme: dark background and light text. -.thead-dark { - th { - color: $table-dark-color; - background-color: $table-dark-bg; +.table { + .thead-dark { + th { + color: $table-dark-color; + background-color: $table-dark-bg; + border-color: $table-dark-border-color; + } } -} -.thead-light { - th { - color: $table-head-color; - background-color: $table-head-bg; + .thead-light { + th { + color: $table-head-color; + background-color: $table-head-bg; + border-color: $table-border-color; + } } } -- cgit v1.2.3 From f66fa3fa2bf5973bf7a00205044a006009dba982 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 8 Jun 2017 17:58:31 -0700 Subject: Generate series of `.table-responsive-*` classes to accomodate overflowing tables in a variety of screen sizes --- scss/_tables.scss | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index 0ef107a7b..7804db620 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -153,20 +153,26 @@ // Responsive tables // -// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by -// enabling horizontal scrolling. Only applies <768px. Everything above that -// will display normally. +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. .table-responsive { - @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; + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + 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 c1865b4563f02f8d11591dc23b05778bd045bc7c Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 12 Jun 2017 13:29:55 -0700 Subject: Add momentum scrolling on responsive tables for webkit touch devices --- scss/_tables.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_tables.scss b/scss/_tables.scss index 7804db620..32384391e 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -166,6 +166,7 @@ display: block; width: 100%; overflow-x: auto; + -webkit-overflow-scrolling: touch; -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;` -- cgit v1.2.3 From 6ca451ebf830ee73794b9fd165f3fdbec6781dfa Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 26 May 2017 17:56:37 +0100 Subject: Add pointer-events declarations make outer `.modal-dialog` pass through events for custom click handling, counteract it for the actual `.modal-content` --- scss/_modal.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index 1f290557a..a563e6ffb 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -43,6 +43,8 @@ position: relative; width: auto; margin: $modal-dialog-margin; + // allow clicks to pass through for custom click handling to close modal + pointer-events: none; } // Actual modal @@ -50,6 +52,8 @@ position: relative; display: flex; flex-direction: column; + // counteract the pointer-events: none; in the .modal-dialog + pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; -- cgit v1.2.3 From 70ca04bbdca2c61679c8ce28a61021754bacffb9 Mon Sep 17 00:00:00 2001 From: Svyatoslav Polishchuk Date: Tue, 22 Aug 2017 17:25:23 +0100 Subject: replaced basic line-heights variable with button's line-heights variable for button size classes --- scss/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_buttons.scss b/scss/_buttons.scss index b4c28896b..c6dbb5d50 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -105,11 +105,11 @@ fieldset[disabled] a.btn { // .btn-lg { - @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); } -- cgit v1.2.3 From 6c402a6c7c7c6e01cab03fcaa750d8980432a774 Mon Sep 17 00:00:00 2001 From: Ben Hayward Date: Mon, 4 Sep 2017 23:34:10 +0100 Subject: Add correct button-variant mixin hover color (#23657) --- scss/mixins/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 312a18f1d..44ce4f72e 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -10,7 +10,7 @@ @include box-shadow($btn-box-shadow); @include hover { - @include color-yiq($background); + @include color-yiq($active-background); background-color: $active-background; border-color: $active-border; } -- cgit v1.2.3 From bd8ab1070bb1a8e0f4afd17ceeb280ff056e2775 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 4 Sep 2017 19:36:12 -0300 Subject: changes floats to flex on breadcrumbs (#23683) --- scss/_breadcrumb.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 52fadec69..5d77eeab6 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,15 +1,14 @@ .breadcrumb { + display: flex; + flex-wrap: wrap; padding: $breadcrumb-padding-y $breadcrumb-padding-x; margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); - @include clearfix; } .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 -- cgit v1.2.3 From 782ee6f60ec6aca0efd6b95865a521cabc607342 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Wed, 6 Sep 2017 17:02:57 -0300 Subject: Removes background from form-control-plaintext --- scss/_forms.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index 33163a052..fb3dc5599 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -130,6 +130,7 @@ select.form-control { padding-bottom: $input-btn-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins line-height: $input-btn-line-height; + background-color: transparent; border: solid transparent; border-width: $input-btn-border-width 0; -- cgit v1.2.3 From aa5e97da044d774e4d1b5c54234cc8bf1ce862f5 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Thu, 7 Sep 2017 14:36:01 -0300 Subject: adds missing important on utility classs --- scss/utilities/_borders.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b7e91c260..3ff603c32 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -44,9 +44,9 @@ } .rounded-circle { - border-radius: 50%; + border-radius: 50% !important; } .rounded-0 { - border-radius: 0; + border-radius: 0 !important; } -- cgit v1.2.3 From 0ccb1e8d9ac5736480b8b5cf0c5e8f0e2c0163cd Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 12 Sep 2017 10:32:43 +0200 Subject: Fix navbar IE (#23652) --- scss/_navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index ed49b76b9..45c1e05d4 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -97,7 +97,7 @@ // the default flexbox row orienation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { - flex-basis: 100%; + flex-grow: 1; // For always expanded or extra full navbars, ensure content aligns itself // properly vertically. Can be easily overridden with flex utilities. align-items: center; -- cgit v1.2.3 From 5becfa6fb1c04b57020737d7c352404e72766a0a Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Tue, 12 Sep 2017 15:51:54 -0300 Subject: fixes #23926 responsive state on navbar --- scss/_navbar.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 45c1e05d4..15d218e87 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -97,6 +97,7 @@ // the default flexbox row orienation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { + flex-basis: 100%; flex-grow: 1; // For always expanded or extra full navbars, ensure content aligns itself // properly vertically. Can be easily overridden with flex utilities. @@ -177,6 +178,9 @@ // scss-lint:disable ImportantRule .navbar-collapse { display: flex !important; + + // Changes flex-bases to auto because of an IE10 bug + flex-basis: auto; } // scss-lint:enable ImportantRule -- cgit v1.2.3 From 5cec8e0de6d6d9fa525e82f309ada18fdb3e3753 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 17 Sep 2017 08:18:24 +0300 Subject: Minor Sass cleanup and consistency changes. (#23959) --- scss/_navbar.scss | 3 +-- scss/_variables.scss | 4 ++-- scss/mixins/_grid-framework.scss | 4 ++-- scss/mixins/_grid.scss | 6 +++--- scss/mixins/_hover.scss | 22 ++++++++++++---------- scss/utilities/_background.scss | 9 +++++++-- 6 files changed, 27 insertions(+), 21 deletions(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 15d218e87..57f96886a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -147,8 +147,7 @@ } @include media-breakpoint-up($next) { - flex-direction: row; - flex-wrap: nowrap; + flex-flow: row nowrap; justify-content: flex-start; .navbar-nav { diff --git a/scss/_variables.scss b/scss/_variables.scss index c0b5494e6..8eebffdf8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -407,8 +407,8 @@ $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; -$custom-select-height: $input-height !default; +$custom-select-padding-x: .75rem !default; +$custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index a9e7c7590..5e7d1ffb5 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -10,7 +10,7 @@ width: 100%; min-height: 1px; // Prevent columns from collapsing when empty padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-left: ($gutter / 2); } @each $breakpoint in map-keys($breakpoints) { @@ -56,7 +56,7 @@ @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { - @include make-col-offset($i, $columns) + @include make-col-offset($i, $columns); } } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 584c78b92..808b2cc42 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -7,7 +7,7 @@ margin-right: auto; margin-left: auto; padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); } @@ -24,7 +24,7 @@ display: flex; flex-wrap: wrap; margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-left: ($grid-gutter-width / -2); } @mixin make-col-ready() { @@ -35,7 +35,7 @@ width: 100%; min-height: 1px; // Prevent collapsing padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); } @mixin make-col($size, $columns: $grid-columns) { diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 4aa4b1d5d..72d1804f3 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -9,7 +9,7 @@ // } // @else { // scss-lint:disable Indentation - &:hover { @content } + &:hover { @content; } // scss-lint:enable Indentation // } } @@ -17,12 +17,14 @@ @mixin hover-focus { @if $enable-hover-media-query { - &:focus { @content } - @include hover { @content } + &:focus { + @content; + } + @include hover { @content; } } @else { &:focus, &:hover { - @content + @content; } } } @@ -31,14 +33,14 @@ @if $enable-hover-media-query { &, &:focus { - @content + @content; } - @include hover { @content } + @include hover { @content; } } @else { &, &:focus, &:hover { - @content + @content; } } } @@ -47,14 +49,14 @@ @if $enable-hover-media-query { &:focus, &:active { - @content + @content; } - @include hover { @content } + @include hover { @content; } } @else { &:focus, &:active, &:hover { - @content + @content; } } } diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index 1ef34fd8e..e382d4f90 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -2,5 +2,10 @@ @include bg-variant('.bg-#{$color}', $value); } -.bg-white { background-color: $white !important; } -.bg-transparent { background-color: transparent !important; } +.bg-white { + background-color: $white !important; +} + +.bg-transparent { + background-color: transparent !important; +} -- cgit v1.2.3 From 272745673eab4d7cf7264ad8499f4553ceac6649 Mon Sep 17 00:00:00 2001 From: SpicyDwarf Date: Tue, 26 Sep 2017 07:11:32 +1000 Subject: Fix no rounded corners if there is only one card in a card-group (#24080) --- scss/_card.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 40fa42510..b65279478 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -207,7 +207,7 @@ } } - &:not(:first-child):not(:last-child) { + &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; .card-img-top, @@ -215,6 +215,10 @@ border-radius: 0; } } + + &:only-child { + @include border-radius($card-border-radius); + } } } } -- cgit v1.2.3 From 17fd2c9f84be84fb917f40212d2ddd88fe6a6d1e Mon Sep 17 00:00:00 2001 From: schwastek <31923722+schwastek@users.noreply.github.com> Date: Tue, 26 Sep 2017 14:05:59 +0200 Subject: Improve theme-color-level() using abs() (#24074) `abs()` gets the absolute value of `$level`. That way, `if/else` statement can be completely eliminated. --- scss/_functions.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_functions.scss b/scss/_functions.scss index a63680aa5..5d43b5708 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -80,11 +80,7 @@ @function theme-color-level($color-name: "primary", $level: 0) { $color: theme-color($color-name); $color-base: if($level > 0, #000, #fff); + $level: abs($level); - @if $level < 0 { - // Lighter values need a quick double negative for the Sass math to work - @return mix($color-base, $color, $level * -1 * $theme-color-interval); - } @else { - @return mix($color-base, $color, $level * $theme-color-interval); - } + @return mix($color-base, $color, $level * $theme-color-interval); } -- cgit v1.2.3 From 31c872191380d4cd32af379b9d24359d6a9dc34c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 15:24:14 +0300 Subject: Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one --- scss/_reboot.scss | 2 +- scss/mixins/_image.scss | 2 +- scss/mixins/_screen-reader.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 41f084bc4..3b55c5756 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -273,7 +273,7 @@ svg:not(:root) { // However, they DO support removing the click delay via `touch-action: manipulation`. // See: // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch -// * http://caniuse.com/#feat=css-touch-action +// * https://caniuse.com/#feat=css-touch-action // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay a, diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index c2b45f2ce..fb7d95b54 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -26,7 +26,7 @@ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. - // Compatibility info: http://caniuse.com/#feat=css-media-resolution + // Compatibility info: https://caniuse.com/#feat=css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { // Standardized diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss index a5fa51c5c..31fb68ab9 100644 --- a/scss/mixins/_screen-reader.scss +++ b/scss/mixins/_screen-reader.scss @@ -1,7 +1,7 @@ // 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/ +// See: http://a11yproject.com/posts/how-to-hide-content/ +// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ @mixin sr-only { position: absolute; -- cgit v1.2.3 From 71c06b75c6130927870a8059762766c84c641f66 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Tue, 26 Sep 2017 10:51:27 -0300 Subject: Fixes rounded corners on first and lat child on vertical btn group (#24119) --- scss/_button-group.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 406350682..189036bd3 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -152,14 +152,14 @@ &:not(:first-child):not(:last-child) { border-radius: 0; } - } - &:first-child:not(:last-child) { - @include border-bottom-radius(0); - } + &:first-child:not(:last-child) { + @include border-bottom-radius(0); + } - &:last-child:not(:first-child) { - @include border-top-radius(0); + &:last-child:not(:first-child) { + @include border-top-radius(0); + } } > .btn-group:not(:first-child):not(:last-child) > .btn { -- cgit v1.2.3 From dfc946b7770704334aa27beae0b19214a3dfd96b Mon Sep 17 00:00:00 2001 From: Andrew Luca Date: Tue, 26 Sep 2017 18:14:52 +0300 Subject: Update comment for forms mixins (#24050) Check `form-control-focus` mixin, variable name is `$input-focus-border-color` --- scss/mixins/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 67e198c26..d38c7a819 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,7 +1,7 @@ // Form control focus state // // Generate a customized focus state and for any input with the specified color, -// which defaults to the `@input-border-color-focus` variable. +// which defaults to the `$input-focus-border-color` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on -- cgit v1.2.3 From 0e054fb9c8c2de0575cd1d7a1ef5dc0e61023e51 Mon Sep 17 00:00:00 2001 From: Prateek Goel Date: Tue, 26 Sep 2017 20:44:00 +0100 Subject: Add style for non-overlapping scrollbar in IE (#24081) --- scss/_reboot.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 3b55c5756..1922773b6 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -239,6 +239,9 @@ pre { margin-bottom: 1rem; // Don't allow content to break outside overflow: auto; + // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so + // we force a non-overlapping, non-auto-hiding scrollbar to counteract. + -ms-overflow-style: scrollbar; } -- cgit v1.2.3 From 7fa20188f258787318bf5a92d0714e31a3ff3d03 Mon Sep 17 00:00:00 2001 From: Benjamin Trenkle Date: Wed, 27 Sep 2017 09:57:40 +0200 Subject: Remove border-top if list-group follows card-header (#23022) --- scss/_card.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index b65279478..f18aa59b1 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -76,6 +76,12 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } + + + .list-group { + .list-group-item:first-child { + border-top: 0; + } + } } .card-footer { -- cgit v1.2.3 From 1d6a6c2abf4f4cdefae5741b68e78a38ef59f163 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Wed, 27 Sep 2017 10:00:42 +0200 Subject: Add quotes to mapping keys (#23701) --- scss/_variables.scss | 60 ++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) (limited to 'scss') diff --git a/scss/_variables.scss b/scss/_variables.scss index 8eebffdf8..d95b703cc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -22,15 +22,15 @@ $black: #000 !default; $grays: () !default; $grays: map-merge(( - 100: $gray-100, - 200: $gray-200, - 300: $gray-300, - 400: $gray-400, - 500: $gray-500, - 600: $gray-600, - 700: $gray-700, - 800: $gray-800, - 900: $gray-900 + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 ), $grays); $blue: #007bff !default; @@ -46,31 +46,31 @@ $cyan: #17a2b8 !default; $colors: () !default; $colors: map-merge(( - blue: $blue, - indigo: $indigo, - purple: $purple, - pink: $pink, - red: $red, - orange: $orange, - yellow: $yellow, - green: $green, - teal: $teal, - cyan: $cyan, - white: $white, - gray: $gray-600, - gray-dark: $gray-800 + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 ), $colors); $theme-colors: () !default; $theme-colors: map-merge(( - primary: $blue, - secondary: $gray-600, - success: $green, - info: $cyan, - warning: $yellow, - danger: $red, - light: $gray-100, - dark: $gray-800 + "primary": $blue, + "secondary": $gray-600, + "success": $green, + "info": $cyan, + "warning": $yellow, + "danger": $red, + "light": $gray-100, + "dark": $gray-800 ), $theme-colors); // Set a specific jump point for requesting color jumps -- cgit v1.2.3 From 27a015ba15fa63d5c311c644c5c0efc2a2868fe7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Sep 2017 07:01:00 -0700 Subject: Reset button element border-radius in Reboot (#24126) --- scss/_reboot.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'scss') diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 1922773b6..2bb4904ac 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -325,6 +325,13 @@ label { margin-bottom: .5rem; } +// Remove the default `border-radius` that macOS Chrome adds. +// +// Details at https://github.com/twbs/bootstrap/issues/24093 +button { + border-radius: 0; +} + // Work around a Firefox/IE bug where the transparent `button` background // results in a loss of the default `button` focus styles. // -- cgit v1.2.3 From 136c49a13fc347752674d57442eefc10f050aee0 Mon Sep 17 00:00:00 2001 From: Ari Rizzitano Date: Mon, 18 Sep 2017 15:38:26 -0400 Subject: Remove dropdown anchor focus override Overriding the focus outline for links within the dropdown menu causes accessibility issues for keyboard-only users. This removes the override, reenabling the browser's default focus outline. --- scss/_dropdown.scss | 8 -------- 1 file changed, 8 deletions(-) (limited to 'scss') diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 05e8b1652..6e81947ed 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -105,14 +105,6 @@ } } -// Open state for the dropdown -.show { - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - .dropdown-menu.show { display: block; } -- cgit v1.2.3 From f02f545e0eb4cc8fca282465ccdf54f29d0a1acc Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Thu, 24 Aug 2017 22:11:36 -0300 Subject: changes the order of the close btn on alerts to improve accecibility --- scss/_alert.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_alert.scss b/scss/_alert.scss index 3dfd13f56..66fba24ea 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -3,6 +3,7 @@ // .alert { + position: relative; padding: $alert-padding-y $alert-padding-x; margin-bottom: $alert-margin-bottom; border: $alert-border-width solid transparent; @@ -28,9 +29,9 @@ .alert-dismissible { // Adjust close link position .close { - position: relative; - top: -$alert-padding-y; - right: -$alert-padding-x; + position: absolute; + top: 0; + right: 0; padding: $alert-padding-y $alert-padding-x; color: inherit; } -- cgit v1.2.3 From bbb6ab12751d7a9b385c8d93d1ff9545b239e094 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Thu, 28 Sep 2017 14:25:34 -0300 Subject: changes reset for mixin list reset on pagination --- scss/_pagination.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 4ef144204..69a36ffe5 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -1,8 +1,6 @@ .pagination { display: flex; - // 1-2: Disable browser default list styles - padding-left: 0; // 1 - list-style: none; // 2 + @include list-unstyled(); @include border-radius(); } -- cgit v1.2.3 From 3624025a3bc025ad204ffcf5c8e86f57210b02e3 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Sun, 1 Oct 2017 01:42:24 -0500 Subject: extends the click area of the close btn on modals (#23783) --- scss/_modal.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/_modal.scss b/scss/_modal.scss index a563e6ffb..66f981151 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -82,13 +82,14 @@ // Top section of the modal w/ title and dismiss .modal-header { display: flex; - align-items: center; // vertically center it + align-items: flex-start; // so the close btn always stays on the upper right corner justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; .close { - margin-left: auto; // Force icon to the right even when there's no .modal-title + padding: $modal-header-padding; + margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; // auto on the left force icon to the right even when there is no .modal-title } } -- cgit v1.2.3 From 3ff2a2781ff9ec20a1bd2031bcfe66944935d36a Mon Sep 17 00:00:00 2001 From: Chirag Modi Date: Mon, 2 Oct 2017 05:23:16 +0530 Subject: fixed issue with hr tag mention in 23032 (#23078) --- scss/_card.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index f18aa59b1..26b7a150c 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -12,6 +12,11 @@ background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); + + > hr { + margin-right: 0; + margin-left: 0; + } } .card-body { -- cgit v1.2.3 From deced1bf4db812b5ae22da5eb62b9643973954b3 Mon Sep 17 00:00:00 2001 From: Chirag Modi Date: Mon, 2 Oct 2017 05:53:31 +0530 Subject: Fix #23013: Add boder-top:0 in .list-group-flush .list-group-item (#23108) --- scss/_list-group.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'scss') diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 7e0b19e01..ce3876b6c 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -86,8 +86,13 @@ .list-group-flush { .list-group-item { border-right: 0; + border-bottom: 0; border-left: 0; border-radius: 0; + + &:first-child { + border-top: 0; + } } &:first-child { -- cgit v1.2.3 From 487e5f8b827572892ba73efeabff14b1397d246b Mon Sep 17 00:00:00 2001 From: Chirag Modi Date: Mon, 2 Oct 2017 06:29:26 +0530 Subject: remove Dist fils as per suggestion (#23092) --- scss/_input-group.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 95b17be47..b8e2bbe19 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -165,7 +165,8 @@ > .btn, > .btn-group { z-index: 2; - margin-left: (-$input-btn-border-width); + // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. + margin-left: 0; // Because specificity @include hover-focus-active { z-index: 3; -- cgit v1.2.3 From 67d7e26e05f23bc240f3c411a134d60a7e78a798 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Saparelli?= Date: Mon, 2 Oct 2017 17:00:24 +1300 Subject: Generate CSS variables for colors, breakpoints, fonts (#23761) * Generate CSS variables See #23349 Supersedes #23446 * Ignore _root.scss for linting --- scss/_root.scss | 16 ++++++++++++++++ scss/bootstrap.scss | 1 + 2 files changed, 17 insertions(+) create mode 100644 scss/_root.scss (limited to 'scss') diff --git a/scss/_root.scss b/scss/_root.scss new file mode 100644 index 000000000..78ac03915 --- /dev/null +++ b/scss/_root.scss @@ -0,0 +1,16 @@ +:root { + @each $color, $value in $colors { + --#{$color}: $value; + } + + @each $color, $value in $theme-colors { + --#{$color}: $value; + } + + @each $bp, $value in $grid-breakpoints { + --breakpoint-#{$bp}: $value; + } + + --font-family-sans-serif: $font-family-sans-serif; + --font-family-monospace: $font-family-monospace; +} diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 648f446b6..f83914dc3 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -8,6 +8,7 @@ @import "functions"; @import "variables"; @import "mixins"; +@import "root"; @import "print"; @import "reboot"; @import "type"; -- cgit v1.2.3 From acf76a451388f9c57c242f613e32a6b8fe5caa59 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 2 Oct 2017 10:11:11 -0700 Subject: fixes navbar-text link colors (#23702) --- scss/_navbar.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 57f96886a..a9b6b7b8a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -238,6 +238,13 @@ .navbar-text { color: $navbar-light-color; + a { + color: $navbar-light-active-color; + + @include hover-focus { + color: $navbar-light-active-color; + } + } } } @@ -283,5 +290,12 @@ .navbar-text { color: $navbar-dark-color; + a { + color: $navbar-dark-active-color; + + @include hover-focus { + color: $navbar-dark-active-color; + } + } } } -- cgit v1.2.3 From 243015186530020ca27e93a5f52076e34825ebe8 Mon Sep 17 00:00:00 2001 From: Andres Galante Date: Mon, 2 Oct 2017 10:13:09 -0700 Subject: fixes input group btn height (#23810) --- scss/_input-group.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index b8e2bbe19..48229e4e8 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -5,7 +5,7 @@ .input-group { position: relative; display: flex; - align-items: center; + align-items: stretch; width: 100%; .form-control { @@ -29,6 +29,8 @@ .input-group-addon, .input-group-btn, .input-group .form-control { + display: flex; + align-items: center; &:not(:first-child):not(:last-child) { @include border-radius(0); } @@ -132,6 +134,7 @@ .input-group-btn { position: relative; + align-items: stretch; // Jankily prevent input button groups from wrapping with `white-space` and // `font-size` in combination with `inline-block` on buttons. font-size: 0; -- cgit v1.2.3 From 9145cc8279abb6d9ca73e18d82d6816e386cdab3 Mon Sep 17 00:00:00 2001 From: wojtask9 Date: Mon, 2 Oct 2017 19:15:32 +0200 Subject: fix .col-form-label paddings and add line-height (#23121) --- scss/_forms.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'scss') diff --git a/scss/_forms.scss b/scss/_forms.scss index fb3dc5599..69429fdef 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -88,21 +88,24 @@ 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-btn-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); + padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); margin-bottom: 0; // Override the `