From 929127772e247ff4a8ad3b5cbe00c828cd5bb0f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:25:17 -0700 Subject: [PATCH 01/25] new color vars with light and dark shades --- scss/_variables.scss | 157 ++++++++++++++++++++++--------------------- 1 file changed, 82 insertions(+), 75 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 6b00d9b1998d..a208051db19a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -94,21 +94,49 @@ // Start with assigning color names to specific hex values. $white: #fff !default; $black: #000 !default; -$red: #d9534f !default; -$orange: #f0ad4e !default; -$yellow: #ffd500 !default; -$green: #5cb85c !default; -$blue: #0275d8 !default; -$teal: #5bc0de !default; -$pink: #ff5b77 !default; -$purple: #613d7c !default; + +$red: #d9534f !default; +$red-light: #f2dede !default; +$red-dark: #a94442 !default; + +$orange: #f0ad4e !default; +$orange-light: #f0ad4e !default; // todo +$orange-dark: #f0ad4e !default; // todo + +$yellow: #ffd500 !default; +$yellow-light: #fcf8e3 !default; +$yellow-dark: #8a6d3b !default; + +$green: #5cb85c !default; +$green-light: #dff0d8 !default; +$green-dark: #3c763d !default; + +$blue: #0275d8 !default; +$blue-light: #0275d8 !default; // todo +$blue-dark: #0275d8 !default; // todo + +$teal: #5bc0de !default; +$teal-light: #d9edf7 !default; +$teal-dark: #31708f !default; + +$pink: #ff5b77 !default; +$pink-light: #ff5b77 !default; // todo +$pink-dark: #ff5b77 !default; // todo + +$purple: #613d7c !default; +$purple-light: #613d7c !default; // todo +$purple-dark: #613d7c !default; // todo // Create grayscale -$gray-dark: #292b2c !default; -$gray: #464a4c !default; -$gray-light: #636c72 !default; -$gray-lighter: #eceeef !default; -$gray-lightest: #f7f7f9 !default; +$gray-dark: #292b2c !default; +$gray: #464a4c !default; +$gray-light: #636c72 !default; +$gray-lighter: #eceeef !default; +$gray-lightest: #f7f7f9 !default; + +// Color map +// Used within Bootstrap to generate a list of class modifiers (e.g., `.btn-blue`). + // Reassign color vars to semantic color scheme $brand-primary: $blue !default; @@ -167,7 +195,7 @@ $body-color: $gray-dark !default; // // Style anchor elements. -$link-color: $brand-primary !default; +$link-color: $blue !default; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; @@ -231,7 +259,7 @@ $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; $component-active-color: $white !default; -$component-active-bg: $brand-primary !default; +$component-active-bg: $blue !default; $caret-width: .3em !default; @@ -307,6 +335,8 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: 5px !default; +$mark-bg: #fcf8e3 !default; + // Tables // @@ -352,32 +382,32 @@ $input-btn-line-height-lg: 1.5 !default; $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; -$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; +$btn-focus-box-shadow: 0 0 0 2px rgba($blue, .25) !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; -$btn-primary-color: $white !default; -$btn-primary-bg: $brand-primary !default; -$btn-primary-border-color: $btn-primary-bg !default; - -$btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: $white !default; -$btn-secondary-border-color: #ccc !default; - -$btn-info-color: $white !default; -$btn-info-bg: $brand-info !default; -$btn-info-border-color: $btn-info-bg !default; - -$btn-success-color: $white !default; -$btn-success-bg: $brand-success !default; -$btn-success-border-color: $btn-success-bg !default; - -$btn-warning-color: $white !default; -$btn-warning-bg: $brand-warning !default; -$btn-warning-border-color: $btn-warning-bg !default; - -$btn-danger-color: $white !default; -$btn-danger-bg: $brand-danger !default; -$btn-danger-border-color: $btn-danger-bg !default; +// $btn-primary-color: $white !default; +// $btn-primary-bg: $blue !default; +// $btn-primary-border-color: $btn-primary-bg !default; +// +// $btn-secondary-color: $gray-dark !default; +// $btn-secondary-bg: $white !default; +// $btn-secondary-border-color: #ccc !default; +// +// $btn-info-color: $white !default; +// $btn-info-bg: $brand-info !default; +// $btn-info-border-color: $btn-info-bg !default; +// +// $btn-success-color: $white !default; +// $btn-success-bg: $brand-success !default; +// $btn-success-border-color: $btn-success-bg !default; +// +// $btn-warning-color: $white !default; +// $btn-warning-bg: $brand-warning !default; +// $btn-warning-border-color: $btn-warning-bg !default; +// +// $btn-danger-color: $white !default; +// $btn-danger-bg: $brand-danger !default; +// $btn-danger-border-color: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; @@ -649,29 +679,6 @@ $pagination-disabled-border-color: #ddd !default; $jumbotron-padding: 2rem !default; $jumbotron-bg: $gray-lighter !default; - -// Form states and alerts -// -// Define colors for form feedback states and, by default, alerts. - -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; -$state-success-border-color: darken($state-success-bg, 5%) !default; - -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; -$state-info-border-color: darken($state-info-bg, 7%) !default; - -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; -$mark-bg: $state-warning-bg !default; -$state-warning-border-color: darken($state-warning-bg, 5%) !default; - -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; -$state-danger-border-color: darken($state-danger-bg, 5%) !default; - - // Cards $card-spacer-y: .75rem !default; @@ -680,7 +687,7 @@ $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: $gray-lightest !default; +$card-cap-bg: rgba(0,0,0,.05) !default; $card-bg: $white !default; $card-link-hover-color: $white !default; @@ -797,21 +804,21 @@ $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: $border-width !default; -$alert-success-bg: $state-success-bg !default; -$alert-success-text: $state-success-text !default; -$alert-success-border-color: $state-success-border-color !default; +$alert-success-bg: #dff0d8 !default; +$alert-success-text: #3c763d !default; +$alert-success-border-color: darken($alert-success-bg, 5%) !default; -$alert-info-bg: $state-info-bg !default; -$alert-info-text: $state-info-text !default; -$alert-info-border-color: $state-info-border-color !default; +$alert-info-bg: #d9edf7 !default; +$alert-info-text: #31708f !default; +$alert-info-border-color: darken($alert-info-bg, 5%) !default; -$alert-warning-bg: $state-warning-bg !default; -$alert-warning-text: $state-warning-text !default; -$alert-warning-border-color: $state-warning-border-color !default; +$alert-warning-bg: #fcf8e3 !default; +$alert-warning-text: #8a6d3b !default; +$alert-warning-border-color: darken($alert-warning-bg, 5%) !default; -$alert-danger-bg: $state-danger-bg !default; -$alert-danger-text: $state-danger-text !default; -$alert-danger-border-color: $state-danger-border-color !default; +$alert-danger-bg: #f2dede !default; +$alert-danger-text: #a94442 !default; +$alert-danger-border-color: darken($alert-danger-bg, 5%) !default; // Progress bars From b62300796e9cca0c600e68adb85611f722fd326e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:25:31 -0700 Subject: [PATCH 02/25] turn the colors into a sass map we can loop over --- scss/_variables.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/scss/_variables.scss b/scss/_variables.scss index a208051db19a..d4ff61ebf0ac 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -137,6 +137,19 @@ $gray-lightest: #f7f7f9 !default; // Color map // Used within Bootstrap to generate a list of class modifiers (e.g., `.btn-blue`). +$colors: ( + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "blue": $blue, + "pink": $pink, + "purple": $purple, + "white": $white, + "gray": $gray-light, + "gray-dark": $gray-dark +) !default; // Reassign color vars to semantic color scheme $brand-primary: $blue !default; From 48525213e7b93e54564ecf49cc6125afef290730 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:25:40 -0700 Subject: [PATCH 03/25] color contrat via yiq method --- scss/_variables.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/scss/_variables.scss b/scss/_variables.scss index d4ff61ebf0ac..40aefb994d30 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -81,6 +81,19 @@ } } +@mixin color-yiq($color) { + $r: red($color); + $g: green($color); + $b: blue($color); + + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + + @if ($yiq >= 128) { + color: #111; + } @else { + color: #fff; + } +} // General variable structure // From 8670b134ebbba87b179fe17d7b67516e012620c8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:25:58 -0700 Subject: [PATCH 04/25] no need for a mixin when we can loop --- scss/mixins/_background-variant.scss | 12 ------------ scss/utilities/_background.scss | 21 ++++++++++----------- 2 files changed, 10 insertions(+), 23 deletions(-) delete mode 100644 scss/mixins/_background-variant.scss diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss deleted file mode 100644 index 54a734dcc82f..000000000000 --- a/scss/mixins/_background-variant.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Contextual backgrounds - -@mixin bg-variant($parent, $color) { - #{$parent} { - background-color: $color !important; - } - a#{$parent} { - @include hover-focus { - background-color: darken($color, 10%) !important; - } - } -} diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index b9ac295231cf..00dea96bc5ec 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -6,14 +6,13 @@ background-color: darken($body-bg, 3%); } -@include bg-variant('.bg-primary', $brand-primary); - -@include bg-variant('.bg-success', $brand-success); - -@include bg-variant('.bg-info', $brand-info); - -@include bg-variant('.bg-warning', $brand-warning); - -@include bg-variant('.bg-danger', $brand-danger); - -@include bg-variant('.bg-inverse', $brand-inverse); +@each $color, $value in $colors { + .bg-#{$color} { + background-color: $value !important; + } + a.bg-#{$color} { + &:hover { + background-color: darken($value, 10%) !important; + } + } +} From c65c310f96e7708450cdee58209769689ecb84ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:26:09 -0700 Subject: [PATCH 05/25] use loop instead of mixin for text utils --- scss/mixins/_text-emphasis.scss | 12 ------------ scss/utilities/_text.scss | 30 +++++++++++++----------------- 2 files changed, 13 insertions(+), 29 deletions(-) delete mode 100644 scss/mixins/_text-emphasis.scss diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss deleted file mode 100644 index 9cd4b6a4f008..000000000000 --- a/scss/mixins/_text-emphasis.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Typography - -@mixin text-emphasis-variant($parent, $color) { - #{$parent} { - color: $color !important; - } - a#{$parent} { - @include hover-focus { - color: darken($color, 10%) !important; - } - } -} diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 4ac90533acb9..2b4045ef6f07 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -34,25 +34,21 @@ // Contextual colors -.text-white { - color: #fff !important; -} - -@include text-emphasis-variant('.text-muted', $text-muted); - -@include text-emphasis-variant('.text-primary', $brand-primary); - -@include text-emphasis-variant('.text-success', $brand-success); - -@include text-emphasis-variant('.text-info', $brand-info); +.text-white { color: $white !important; } -@include text-emphasis-variant('.text-warning', $brand-warning); +.text-gray { color: $gray !important; } +.text-gray-dark { color: $gray-dark !important; } -@include text-emphasis-variant('.text-danger', $brand-danger); - -// Font color - -@include text-emphasis-variant('.text-gray-dark', $gray-dark); +@each $color, $value in $colors { + .text-#{$color} { + color: $value !important; + } + a.text-#{$color} { + &:hover { + color: darken($value, 10%) !important; + } + } +} // Misc From f23e29207cf50ccb23dc2d5f64d064f9bc1e2343 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:26:30 -0700 Subject: [PATCH 06/25] add color borders while we're add it idea being we can nuke more component modifiers for these (e.g., card outline styles) --- scss/utilities/_borders.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b256881e5ece..40e438bbf730 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -2,12 +2,20 @@ // Border // +.border { border: 1px solid $gray-lightest !important; } + .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-left-0 { border-left: 0 !important; } +@each $color, $value in $colors { + .border-#{$color} { + border-color: $value !important; + } +} + // // Border-radius // From 9167257f42c0234e29945932b5fdd425282d4d1f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:26:44 -0700 Subject: [PATCH 07/25] update to use new colors that compile --- scss/_tables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 36c3dab77a2a..ff001a213756 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -94,10 +94,10 @@ // Generate the contextual variants @include table-row-variant(active, $table-bg-active); -@include table-row-variant(success, $state-success-bg); -@include table-row-variant(info, $state-info-bg); -@include table-row-variant(warning, $state-warning-bg); -@include table-row-variant(danger, $state-danger-bg); +@include table-row-variant(success, $brand-success); +@include table-row-variant(info, $brand-info); +@include table-row-variant(warning, $brand-warning); +@include table-row-variant(danger, $brand-danger); // Inverse styles From 83e6266142c3c936bd82faf5469bde22a24452e3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:26:50 -0700 Subject: [PATCH 08/25] remove deleted mixins --- scss/_mixins.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/scss/_mixins.scss b/scss/_mixins.scss index cc3394f0a035..8a75e333119b 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -11,7 +11,6 @@ @import "mixins/screen-reader"; @import "mixins/size"; @import "mixins/reset-text"; -@import "mixins/text-emphasis"; @import "mixins/text-hide"; @import "mixins/text-truncate"; @import "mixins/visibility"; @@ -28,7 +27,6 @@ @import "mixins/table-row"; // // Skins -@import "mixins/background-variant"; @import "mixins/border-radius"; @import "mixins/box-shadow"; @import "mixins/gradients"; From 7c2fcf72c02e8f26bd72f278833f04d1840e3a49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:26:57 -0700 Subject: [PATCH 09/25] comment out for now --- scss/_list-group.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index fef2c1532a7c..d7840905ec06 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -109,7 +109,7 @@ // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. -@include list-group-item-variant(success, $state-success-bg, $state-success-text); -@include list-group-item-variant(info, $state-info-bg, $state-info-text); -@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); -@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); +// @include list-group-item-variant(success, $brand-success, $state-success-text); +// @include list-group-item-variant(info, $brand-info, $state-info-text); +// @include list-group-item-variant(warning, $brand-warning, $state-warning-text); +// @include list-group-item-variant(danger, $brand-danger, $state-danger-text); From 9b7bbf730e6949010b216f68886e31a0c3f96b2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:27:03 -0700 Subject: [PATCH 10/25] move to generating classes --- scss/_card.scss | 43 +++++++++++-------------------------------- 1 file changed, 11 insertions(+), 32 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index 7be2aaf8b54f..4c60a4314a35 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -104,42 +104,21 @@ // Background variations // -.card-primary { - @include card-variant($brand-primary, $brand-primary); -} -.card-success { - @include card-variant($brand-success, $brand-success); -} -.card-info { - @include card-variant($brand-info, $brand-info); -} -.card-warning { - @include card-variant($brand-warning, $brand-warning); -} -.card-danger { - @include card-variant($brand-danger, $brand-danger); +@each $color, $value in $colors { + .card-#{$color} { + background-color: $value; + border-color: $value; + } } -// Remove all backgrounds -.card-outline-primary { - @include card-outline-variant($btn-primary-bg); -} -.card-outline-secondary { - @include card-outline-variant($btn-secondary-border-color); -} -.card-outline-info { - @include card-outline-variant($btn-info-bg); -} -.card-outline-success { - @include card-outline-variant($btn-success-bg); -} -.card-outline-warning { - @include card-outline-variant($btn-warning-bg); -} -.card-outline-danger { - @include card-outline-variant($btn-danger-bg); +@each $color, $value in $colors { + .card-outline-#{$color} { + background-color: transparent; + border-color: $value; + } } + // // Inverse text within a card for use with dark backgrounds // From 5ffd2d8511533225d8022a8ab1ce95a25ab623a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:27:10 -0700 Subject: [PATCH 11/25] hella buttons up in here --- scss/_buttons.scss | 77 +++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 05c54e4ee012..51a62dd99e07 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -50,44 +50,57 @@ fieldset[disabled] a.btn { // Alternate buttons // -.btn-primary { - @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); +@each $color, $value in $colors { + .btn-#{$color} { + @include button-variant(#fff, $value, $value); + } } + +// .btn-primary { +// @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); +// } .btn-secondary { - @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color); -} -.btn-info { - @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); -} -.btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); -} -.btn-warning { - @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); -} -.btn-danger { - @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); + // @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color); +} +// .btn-info { +// @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color); +// } +// .btn-success { +// @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); +// } +// .btn-warning { +// @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); +// } +// .btn-danger { +// @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); +// } + + +@each $color, $value in $colors { + .btn-outline-#{$color} { + @include button-outline-variant($value, #fff); + } } // Remove all backgrounds -.btn-outline-primary { - @include button-outline-variant($btn-primary-bg, $btn-primary-color); -} +// .btn-outline-primary { +// @include button-outline-variant($btn-primary-bg, $btn-primary-color); +// } .btn-outline-secondary { - @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color); -} -.btn-outline-info { - @include button-outline-variant($btn-info-bg, $btn-info-color); -} -.btn-outline-success { - @include button-outline-variant($btn-success-bg, $btn-success-color); -} -.btn-outline-warning { - @include button-outline-variant($btn-warning-bg, $btn-warning-color); -} -.btn-outline-danger { - @include button-outline-variant($btn-danger-bg, $btn-danger-color); -} + // @include button-outline-variant($btn-secondary-border-color, $btn-secondary-color); +} +// .btn-outline-info { +// @include button-outline-variant($btn-info-bg, $btn-info-color); +// } +// .btn-outline-success { +// @include button-outline-variant($btn-success-bg, $btn-success-color); +// } +// .btn-outline-warning { +// @include button-outline-variant($btn-warning-bg, $btn-warning-color); +// } +// .btn-outline-danger { +// @include button-outline-variant($btn-danger-bg, $btn-danger-color); +// } // From fcd23e5cde79bb7be872209a7758fa4b444c7c5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:27:24 -0700 Subject: [PATCH 12/25] tweak mixin to use color contrast function, reduce styles, tweak active/hover values --- scss/mixins/_buttons.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 47f2834ff591..89496ee7908b 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -4,17 +4,25 @@ // and disabled options for all buttons @mixin button-variant($color, $background, $border) { - $active-background: darken($background, 10%); - $active-border: darken($border, 12%); + $active-background: darken($background, 7.5%); + $active-border: darken($border, 10%); - color: $color; + // @if (lightness($background) < 50%) { + // color: $white; + // } @else { + // color: $gray-dark; + // } + + @include color-yiq($background); + + // color: $color; background-color: $background; border-color: $border; @include box-shadow($btn-box-shadow); // Hover and focus styles are shared @include hover { - color: $color; + @include color-yiq($background); background-color: $active-background; border-color: $active-border; } @@ -38,7 +46,6 @@ &:active, &.active, .show > &.dropdown-toggle { - color: $color; background-color: $active-background; background-image: none; // Remove the gradient for the pressed/active state border-color: $active-border; From f26a126da7e0475c8b0274f5a1796a108b2ed690 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:27:29 -0700 Subject: [PATCH 13/25] rip the card mixins --- scss/mixins/_cards.scss | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss index e535b316d7f6..88d57d792dc9 100644 --- a/scss/mixins/_cards.scss +++ b/scss/mixins/_cards.scss @@ -1,26 +1,5 @@ // Card variants -@mixin card-variant($background, $border) { - background-color: $background; - border-color: $border; - - .card-header, - .card-footer { - background-color: transparent; - } -} - -@mixin card-outline-variant($color) { - background-color: transparent; - border-color: $color; - - .card-header, - .card-footer { - background-color: transparent; - border-color: $color; - } -} - // // Inverse text within a card for use with dark backgrounds // From 46b2083052c8767afccfd752af2b83b829007fe1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Apr 2017 08:27:44 -0700 Subject: [PATCH 14/25] document all the new rad shit --- docs/_data/colors.yml | 32 ++++++++++++++ docs/assets/scss/_component-examples.scss | 18 +++++--- docs/components/buttons.md | 53 ++++++++--------------- docs/components/card.md | 36 ++------------- docs/utilities/borders.md | 20 ++++++--- docs/utilities/colors.md | 27 +++--------- 6 files changed, 85 insertions(+), 101 deletions(-) create mode 100644 docs/_data/colors.yml diff --git a/docs/_data/colors.yml b/docs/_data/colors.yml new file mode 100644 index 000000000000..5000bdf0d16c --- /dev/null +++ b/docs/_data/colors.yml @@ -0,0 +1,32 @@ +- name: red + hex: "#d9534f" + +- name: orange + hex: "#f0ad4e" + +- name: yellow + hex: "#ffd500" + +- name: green + hex: "#5cb85c" + +- name: teal + hex: "#5bc0de" + +- name: blue + hex: "#5cb85c" + +- name: pink + hex: "#ff5b77" + +- name: purple + hex: "#613d7c" + +- name: white + hex: "#fff" + +- name: gray + hex: "#464a4c" + +- name: gray-dark + hex: "#292b2c" diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index 91fcc4424be3..72e842c3248c 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -210,6 +210,12 @@ } // Buttons +.bd-example { + > .btn { + margin: .25rem; + } +} + .bd-example > .btn-group { margin-top: .25rem; margin-bottom: .25rem; @@ -357,12 +363,12 @@ .bd-example-border-utils { [class^="border-"] { - display: inline-block; - width: 6rem; - height: 6rem; - margin: .25rem; - background-color: #f5f5f5; - border: 1px solid; + // display: inline-block; + // width: 6rem; + // height: 6rem; + // margin: .25rem; + // background-color: #f5f5f5; + // border: 1px solid; } } diff --git a/docs/components/buttons.md b/docs/components/buttons.md index 7f701d90a393..b2dc3ab5d71f 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -18,23 +18,8 @@ Use Bootstrap's custom button styles for actions in forms, dialogs, and more. In Bootstrap includes six predefined button styles, each serving its own semantic purpose. {% example html %} - - - - - - - - - - - - - - - - - +{% for color in site.data.colors %} +{% endfor %} @@ -50,11 +35,11 @@ The `.btn` classes are designed to be used with the ` - - - +Link + + + + {% endexample %} ## Outline buttons @@ -62,12 +47,8 @@ When using button classes on `` elements that are used to trigger in-page fun In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. {% example html %} - - - - - - +{% for color in site.data.colors %} +{% endfor %} {% endexample %} @@ -76,20 +57,20 @@ In need of a button, but not the hefty background colors they bring? Replace the Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. {% example html %} - - + + {% endexample %} {% example html %} - - + + {% endexample %} Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. {% example html %} - - + + {% endexample %} ## Active state @@ -97,8 +78,8 @@ Create block level buttons—those that span the full width of a parent—by add Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to ` - - + + + {% endexample %} @@ -39,18 +39,18 @@ Combine sets of button groups into button toolbars for more complex components. {% example html %} {% endexample %} @@ -60,10 +60,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th {% example html %}