diff --git a/app/assets/stylesheets/admin/product_import.css.scss b/app/assets/stylesheets/admin/product_import.css.scss index 3d25492c18e..5867111bf3b 100644 --- a/app/assets/stylesheets/admin/product_import.css.scss +++ b/app/assets/stylesheets/admin/product_import.css.scss @@ -1,18 +1,22 @@ @import "variables"; -div.panel-section { +$pi-red: $warning-red; +$pi-green: lighten($spree-green, 10%); +$pi-orange: $bright-orange; +$pi-blue: lighten($spree-blue, 10%); +$pi-light-yellow: #faffaf; - .neutral { - color: #bfbfbf; - } +// scss-lint:disable NestingDepth + +div.panel-section { .error { - color: $warning-red; + color: $pi-red; } .warning { - color: #ffa92e; + color: $bright-orange; } .success { - color: #86d83a; + color: $pi-green; } .info { color: #68b7c0; @@ -98,8 +102,8 @@ div.panel-section { background-color: darken(#f05c51, 5%); } - &:hover td.not_updatable { - background-color: darken(#faffaf, 5%); + &:hover td.not-updatable { + background-color: darken($pi-light-yellow, 5%); } i { @@ -116,17 +120,17 @@ div.panel-section { color: white; } - &.not_updatable { - background-color: #faffaf; - box-shadow: inset 0px 0px 1px #ffa92e; + &.not-updatable { + background-color: $pi-light-yellow; + box-shadow: inset 0 0 1px $bright-orange; } } span.not-updatable i { float: left; + font-size: 1.1em !important; margin-right: 0.4em; padding-top: 0.3em; - font-size: 1.1em !important; } } @@ -204,7 +208,7 @@ table.import-settings { span.header-error { font-size: 0.85em; - color: $warning-red; + color: $pi-red; } .select2-search { @@ -235,10 +239,10 @@ table.import-settings { } i.fa-check-circle { - color: #86d83a; + color: $pi-green; } i.fa-info-circle { - color: #68b7c0; + color: $pi-blue; } } @@ -312,7 +316,7 @@ div.progress-bar { span.progress-track{ display: block; - background: #b7ea53; + background: lighten($pi-green, 10%); height: 100%; border-radius: 0.3em; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); @@ -343,7 +347,7 @@ div.progress-bar { span.category { display: inline-block; - background-color: lighten($spree-blue, 10%); + background-color: $pi-blue; color: white; padding: 0.3em 0.6em; margin: 0 0.4em 0.5em 0; diff --git a/app/assets/stylesheets/admin/variables.css.scss b/app/assets/stylesheets/admin/variables.css.scss index c7f904a38a3..86ddaaf8c92 100644 --- a/app/assets/stylesheets/admin/variables.css.scss +++ b/app/assets/stylesheets/admin/variables.css.scss @@ -6,6 +6,7 @@ $spree-light-blue: #eff5fc; $warning-red: #da5354; $warning-orange: #da7f52; +$bright-orange: #ffa92e; $medium-grey: #919191; $pale-blue: #cee1f4; diff --git a/app/views/admin/product_import/_entries_table.html.haml b/app/views/admin/product_import/_entries_table.html.haml index c4946d49a7f..34606eddcad 100644 --- a/app/views/admin/product_import/_entries_table.html.haml +++ b/app/views/admin/product_import/_entries_table.html.haml @@ -10,7 +10,7 @@ %i{ng: {class: "{'fa fa-warning error': (count(entry.errors) > 0), 'fa fa-check-circle success': (count(entry.errors) == 0)}"}} %td {{line_number}} - %td{ng: {repeat: "(attribute, value) in entry.attributes", class: "{'invalid': attribute_invalid(attribute, line_number), 'not_updatable': attribute_not_updatable(attribute, line_number)}"}} + %td{ng: {repeat: "(attribute, value) in entry.attributes", class: "{'invalid': attribute_invalid(attribute, line_number), 'not-updatable': attribute_not_updatable(attribute, line_number)}"}} %span{ng: {show: "!attribute_not_updatable(attribute, line_number)"}} {{value}} %span.not-updatable{'ofn-with-tip' => t('.not_updatable'), ng: {show: "attribute_not_updatable(attribute, line_number)"}}