From cc092272eefa0e89bebfc716c8df8214d2804c77 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Wed, 13 Sep 2017 17:32:44 +0200 Subject: [PATCH 1/6] modified the yiq to to an actual function function only returns a value, not the attribute itself updated every use of the former mixin to use the new function --- assets/scss/_colors.scss | 6 +++--- scss/_functions.scss | 6 +++--- scss/mixins/_badge.scss | 4 ++-- scss/mixins/_buttons.scss | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index d09d3a2c574d..8d2825c5700e 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -4,21 +4,21 @@ @each $color, $value in $colors { .swatch-#{$color} { + color: color-yiq($value); background-color: #{$value}; - @include color-yiq($value); } } @each $color, $value in $theme-colors { .swatch-#{$color} { + color: color-yiq($value); background-color: #{$value}; - @include color-yiq($value); } } @each $color, $value in $grays { .swatch-#{$color} { + color: color-yiq($value); background-color: #{$value}; - @include color-yiq($value); } } diff --git a/scss/_functions.scss b/scss/_functions.scss index a63680aa5ca3..bbb015d07ec7 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -49,7 +49,7 @@ } // Color contrast -@mixin color-yiq($color) { +@function color-yiq($color) { $r: red($color); $g: green($color); $b: blue($color); @@ -57,9 +57,9 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >= 150) { - color: #111; + @return #111; } @else { - color: #fff; + @return #fff; } } diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index 257a6abb7d88..c1caafe487df 100644 --- a/scss/mixins/_badge.scss +++ b/scss/mixins/_badge.scss @@ -1,11 +1,11 @@ @mixin badge-variant($bg) { - @include color-yiq($bg); + color: color-yiq($bg); background-color: $bg; &[href] { @include hover-focus { - @include color-yiq($bg); text-decoration: none; + color: color-yiq($bg); background-color: darken($bg, 10%); } } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 44ce4f72e264..ef623ccd55e1 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -4,13 +4,13 @@ // and disabled options for all buttons @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) { - @include color-yiq($background); + color: color-yiq($background); background-color: $background; border-color: $border; @include box-shadow($btn-box-shadow); @include hover { - @include color-yiq($active-background); + color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; } From a77c13c403fdb6a5c2552f44c089cbb10fc279a6 Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Wed, 4 Oct 2017 08:51:24 +0200 Subject: [PATCH 2/6] change order off properties in _colors.scss --- assets/scss/_colors.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 8d2825c5700e..5b6f5f52b4e0 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -4,21 +4,21 @@ @each $color, $value in $colors { .swatch-#{$color} { - color: color-yiq($value); background-color: #{$value}; + color: color-yiq($value); } } @each $color, $value in $theme-colors { .swatch-#{$color} { - color: color-yiq($value); background-color: #{$value}; + color: color-yiq($value); } } @each $color, $value in $grays { .swatch-#{$color} { - color: color-yiq($value); background-color: #{$value}; + color: color-yiq($value); } } From 1db5082c3ff9fad8ab9d154f2244fb3d592f382d Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Wed, 4 Oct 2017 08:52:48 +0200 Subject: [PATCH 3/6] rearrange properties in _borders.scss mixins --- scss/mixins/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index ef623ccd55e1..49d8d18be95c 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -4,15 +4,15 @@ // and disabled options for all buttons @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) { - color: color-yiq($background); background-color: $background; border-color: $border; + color: color-yiq($background); @include box-shadow($btn-box-shadow); @include hover { - color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; + color: color-yiq($active-background); } &:focus, From 48676f0e2b481b99cebc8ec35bd8d4943db5601a Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Wed, 4 Oct 2017 10:55:48 +0200 Subject: [PATCH 4/6] revert a77c13c --- assets/scss/_colors.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss index 5b6f5f52b4e0..8d2825c5700e 100644 --- a/assets/scss/_colors.scss +++ b/assets/scss/_colors.scss @@ -4,21 +4,21 @@ @each $color, $value in $colors { .swatch-#{$color} { - background-color: #{$value}; color: color-yiq($value); + background-color: #{$value}; } } @each $color, $value in $theme-colors { .swatch-#{$color} { - background-color: #{$value}; color: color-yiq($value); + background-color: #{$value}; } } @each $color, $value in $grays { .swatch-#{$color} { - background-color: #{$value}; color: color-yiq($value); + background-color: #{$value}; } } From df6a8f7d813a5327f999ebcbed7c7015ad4dd80a Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Wed, 4 Oct 2017 10:57:02 +0200 Subject: [PATCH 5/6] revert 1db5082 --- scss/mixins/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 49d8d18be95c..ef623ccd55e1 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -4,15 +4,15 @@ // and disabled options for all buttons @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) { + color: color-yiq($background); background-color: $background; border-color: $border; - color: color-yiq($background); @include box-shadow($btn-box-shadow); @include hover { + color: color-yiq($active-background); background-color: $active-background; border-color: $active-border; - color: color-yiq($active-background); } &:focus, From cefc68d464ab173b42f5c09c968ac49dfed08aa1 Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Wed, 4 Oct 2017 11:29:38 +0200 Subject: [PATCH 6/6] fix travis error --- scss/mixins/_badge.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index c1caafe487df..eeca0b40de92 100644 --- a/scss/mixins/_badge.scss +++ b/scss/mixins/_badge.scss @@ -4,8 +4,8 @@ &[href] { @include hover-focus { - text-decoration: none; color: color-yiq($bg); + text-decoration: none; background-color: darken($bg, 10%); } }