From 92a4df232f8d5b3675db44da5bd9b346f05ced6d Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Fri, 24 Mar 2017 14:53:17 -0700 Subject: [PATCH 01/13] Remove hardcodes of background colour --- .../spree/backend/globals/mixins/_line_through.scss | 2 +- .../stylesheets/spree/backend/shared/_forms.scss | 10 +++++----- .../stylesheets/spree/backend/shared/_layout.scss | 1 - 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss index 55fefca7a80..d760ea383b2 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss @@ -1,4 +1,4 @@ -@mixin line-through($color: $color-2, $background: $color-1) { +@mixin line-through($color: $color-2, $background: $body-bg) { position: relative; text-align: center; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index b72e91191fc..9a842191aef 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -253,11 +253,11 @@ fieldset { button, .button, input[type="submit"], input[type="button"] { border-radius: $border-radius; - -webkit-box-shadow: 0 0 0 15px $color-1; - -moz-box-shadow: 0 0 0 15px $color-1; - -ms-box-shadow: 0 0 0 15px $color-1; - -o-box-shadow: 0 0 0 15px $color-1; - box-shadow: 0 0 0 15px $color-1; + -webkit-box-shadow: 0 0 0 15px $body-bg; + -moz-box-shadow: 0 0 0 15px $body-bg; + -ms-box-shadow: 0 0 0 15px $body-bg; + -o-box-shadow: 0 0 0 15px $body-bg; + box-shadow: 0 0 0 15px $body-bg; &:hover { border-color: $color-1; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss index 58d7c1a501d..01e3f80a709 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss @@ -56,7 +56,6 @@ body { } #content { - background-color: $color-1; position: relative; z-index: 0; padding: 0; From 9b76032431dc6f8084b4e07916c41e9af2445b00 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 13:26:23 -0700 Subject: [PATCH 02/13] Deprecate input colours in favour of bootstrap --- .../assets/stylesheets/spree/backend/_bootstrap_custom.scss | 6 +++--- .../stylesheets/spree/backend/globals/_variables.scss | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index d3bc47021ea..54e2a66655a 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -289,8 +289,8 @@ $input-padding-y: .375rem !default; $input-bg: #fff !default; $input-bg-disabled: $gray-lighter !default; -$input-color: $gray !default; -$input-border-color: #ccc !default; +$input-color: $color-txt-text !default; +$input-border-color: $color-txt-brd !default; $input-btn-border-width: $border-width !default; // For form controls and buttons $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; @@ -298,7 +298,7 @@ $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; -$input-border-focus: #66afe9 !default; +$input-border-focus: $color-txt-hover-brd !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 2faf8225da5..1c752cd4e71 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -104,8 +104,11 @@ $color-sel-disabled-bg: $color-7 !default; $color-sel-disabled-text: $color-4 !default; // Text inputs colors +@include solidus-deprecated-variable("color-txt-brd", "input-border-color"); $color-txt-brd: $color-border !default; +@include solidus-deprecated-variable("color-txt-text", "input-color"); $color-txt-text: $color-3 !default; +@include solidus-deprecated-variable("color-txt-hover-brd", "input-border-focus"); $color-txt-hover-brd: $color-2 !default; // States label colors From 6781281ce65a8f28eb3953b952a94360bb58394b Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Fri, 24 Mar 2017 15:16:13 -0700 Subject: [PATCH 03/13] Use bootstrap variables for styling form inputs --- .../stylesheets/spree/backend/shared/_forms.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 9a842191aef..10d83d11b9c 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -9,17 +9,18 @@ input[type="number"], input[type="tel"], textarea { padding: 7px 10px; - border: 1px solid $color-txt-brd; - border-radius: $border-radius; - color: $color-txt-text; + color: $input-color; + border: 1px solid $input-border-color; + border-radius: $input-border-radius; + background: $input-bg; font-size: 90%; &:focus { - border-color: $color-txt-hover-brd; + border-color: $input-border-focus; } - &[disabled] { - opacity: 0.7; + &:disabled { + background: $input-bg-disabled; } } From bcc8d61ac68726072c46130ebc9024ea77006000 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Fri, 24 Mar 2017 15:17:21 -0700 Subject: [PATCH 04/13] Remove duplicate input-group declaration --- .../spree/backend/shared/_forms.scss | 39 ------------------- 1 file changed, 39 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 10d83d11b9c..5d178913753 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -32,45 +32,6 @@ textarea { width: 100%; } -.input-group { - position: relative; - display: table; - border-collapse: separate; - - .form-control, - .input-group-addon { - display: table-cell; - - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - .form-control { - width: 100%; - } - - .input-group-addon { - padding: 6px 10px; - border: 1px solid #cee1f4; - background: #eff5fc; - border-radius: 3px; - - &:first-child { - border-right: none; - } - - &:last-child { - border-left: none; - } - } -} - label { font-weight: $font-weight-bold; font-size: 90%; From 2fe8d4a2562a16a318bf3d39ea397f77ca0db985 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 15:02:15 -0700 Subject: [PATCH 05/13] Set placeholder styles --- .../app/assets/stylesheets/spree/backend/shared/_forms.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 5d178913753..4d8fb180454 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -22,6 +22,12 @@ textarea { &:disabled { background: $input-bg-disabled; } + + &::placeholder { + color: $input-color-placeholder; + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } } textarea { From faeb451169155a69f47761c0e9a1f25add95cc02 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 14:58:05 -0700 Subject: [PATCH 06/13] Use bootstrap vars to style form inputs --- .../app/assets/stylesheets/spree/backend/shared/_forms.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 4d8fb180454..4238083ceb6 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -8,15 +8,16 @@ input[type="url"], input[type="number"], input[type="tel"], textarea { - padding: 7px 10px; + padding: $input-padding-y $input-padding-x; color: $input-color; - border: 1px solid $input-border-color; + border: $input-btn-border-width solid $input-border-color; border-radius: $input-border-radius; background: $input-bg; font-size: 90%; &:focus { border-color: $input-border-focus; + outline: 0; } &:disabled { From 6a60ea2c782925b0ff18662a2be385c889ba176a Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 14:58:48 -0700 Subject: [PATCH 07/13] Don't reduce form input font size --- backend/app/assets/stylesheets/spree/backend/shared/_forms.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 4238083ceb6..47c445405b4 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -13,7 +13,6 @@ textarea { border: $input-btn-border-width solid $input-border-color; border-radius: $input-border-radius; background: $input-bg; - font-size: 90%; &:focus { border-color: $input-border-focus; From b267b25a7b174938c7928c46b5706196ebaf1ecb Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Mon, 27 Mar 2017 11:48:50 -0700 Subject: [PATCH 08/13] Remove unused .grand-total CSS The html using this was removed in 057c6084003bbf2ddc2a6814bf07abd172cb66e3 --- .../stylesheets/spree/backend/shared/_tables.scss | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss index 9eb019c0139..d8269840a8e 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss @@ -197,18 +197,5 @@ table { &.no-border-top tr:first-child td { border-top: none; } - - &.grand-total { - td { - border-color: $color-2 !important; - font-size: 110%; - font-weight: $font-weight-bold; - background-color: lighten($color-2, 50); - } - .total { - background-color: $color-2; - color: $color-1; - } - } } } From baefbeb8b2e76db7f450e3457de8d8e089d40852 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Tue, 28 Mar 2017 17:09:52 -0700 Subject: [PATCH 09/13] Remove custom anchor styles Instead we should rely on bootstrap's styling of anchors. The main motivation is that specifying the color for `:visited` is incompatible with bootstrap's styles (like those for a.button). Bootstrap colours :focus the same as :hover, making that variable unnecessary. --- .../spree/backend/globals/_variables.scss | 3 +-- .../spree/backend/shared/_typography.scss | 19 ------------------- 2 files changed, 1 insertion(+), 21 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 1c752cd4e71..8e8a0f8b266 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -33,9 +33,8 @@ $color-headers: $color-4 !default; $color-link: $color-3 !default; @include solidus-deprecated-variable("color-link-hover", "link-hover-color"); $color-link-hover: $color-2 !default; -$color-link-active: $color-2 !default; +@include solidus-deprecated-variable("color-link-focus", "link-hover-color"); $color-link-focus: $color-2 !default; -$color-link-visited: $color-3 !default; $color-border: very-light($color-3, 12) !default; // Basic navigation colors diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss index 4a8a05895f0..15ec4d6c519 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss @@ -12,25 +12,6 @@ hr { border-left: none; } -// links -//-------------------------------------------------------------- -a { - line-height: inherit; - - &:active { - text-decoration: none; - } - &:visited { - color: $color-link-visited; - } - &:focus { - color: $color-link-focus; - } - &:active { - color: $color-link-active; - } -} - // Headings //-------------------------------------------------------------- From 1f8b9ba28b8fe9e05165792b73163d04f490c238 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Mon, 27 Mar 2017 11:54:14 -0700 Subject: [PATCH 10/13] Use bootstrap styling for buttons --- .../spree/backend/shared/_forms.scss | 27 ++----------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 47c445405b4..03d13576085 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -63,40 +63,17 @@ label { input[type="submit"], input[type="button"], button, .button { - display: inline-block; - padding: 6px 15px; - border: none; - border-radius: $border-radius; - background-color: $color-btn-bg; - color: $color-btn-text; - font-weight: $font-weight-bold !important; - white-space: nowrap; - line-height: $line-height; + @extend .btn; + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); &:before { font-weight: normal !important; } - &:visited, &:active, &:focus { color: $color-btn-text } - - &:hover { - background-color: $color-btn-hover-bg; - color: $color-btn-hover-text; - } - - &:active:focus { - box-shadow: 0 0 8px 0 darken($color-btn-hover-bg, 5) inset; - } - &.fullwidth { width: 100%; text-align: center; } - - &[disabled], &.disabled { - background-color: #c2c4c7; - cursor: default; - } } span.info { From 2388e53ae7635c5963b448da09ca33f7681af092 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Tue, 28 Mar 2017 17:33:22 -0700 Subject: [PATCH 11/13] Remove unused labels-inline css The last element using this was removed in 4de00c773080165cb1ce756d5064f76ca81a72e1 --- .../spree/backend/shared/_forms.scss | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 03d13576085..c2800e837c4 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -214,31 +214,6 @@ fieldset { margin-left: 2em; } } - - &.labels-inline { - .field { - margin-bottom: 0; - display: table; - width: 100%; - - label, input { - display: table-cell !important; - } - input { - width: 100%; - } - - &.checkbox { - input { - width: auto !important - } - } - } - .actions { - padding: 0; - text-align: right; - } - } } .form-actions { From ce7f2dbce054c249cbe1c93c401d11f0b8cdd569 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Tue, 28 Mar 2017 17:43:35 -0700 Subject: [PATCH 12/13] Remove unnecessary box-shadow vendor prefixes --- .../assets/stylesheets/spree/backend/shared/_forms.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index c2800e837c4..468e24e1f2e 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -197,12 +197,7 @@ fieldset { button, .button, input[type="submit"], input[type="button"] { border-radius: $border-radius; - - -webkit-box-shadow: 0 0 0 15px $body-bg; - -moz-box-shadow: 0 0 0 15px $body-bg; - -ms-box-shadow: 0 0 0 15px $body-bg; - -o-box-shadow: 0 0 0 15px $body-bg; - box-shadow: 0 0 0 15px $body-bg; + box-shadow: 0 0 0 15px $body-bg; &:hover { border-color: $color-1; From 87761500b1abb675834edd0166785e9903d53dd1 Mon Sep 17 00:00:00 2001 From: John Hawthorn Date: Wed, 29 Mar 2017 13:42:41 -0700 Subject: [PATCH 13/13] Fix buttons in filter-actions --- .../app/assets/stylesheets/spree/backend/shared/_forms.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 468e24e1f2e..aa779442198 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -196,12 +196,7 @@ fieldset { } button, .button, input[type="submit"], input[type="button"] { - border-radius: $border-radius; box-shadow: 0 0 0 15px $body-bg; - - &:hover { - border-color: $color-1; - } } // Always make sure the choices at the bottom of a fieldset are spaced out