diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index 4c064b00845..b0d5411213d 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -7,24 +7,27 @@ // // Grayscale and brand colors for use across Bootstrap. -$blue: $color-3 !default; -$red: $color-5 !default; -$orange: $color-6 !default; -$green: $color-2 !default; +$primary: $color-primary !default; +$secondary: $color-dark-accent !default; + +$blue: $color-primary !default; +$red: $color-red !default; +$orange: $color-yellow !default; +$green: $color-success !default; // Body // // Settings for the `` element. -$body-bg: $color-1 !default; -$body-color: $color-4 !default; +$body-bg: $color-white !default; +$body-color: $color-dark !default; // Links // // Style anchor elements. $link-decoration: none !default; -$link-hover-color: $color-2 !default; +$link-hover-color: $color-primary !default; $link-hover-decoration: none !default; // Grid columns @@ -37,9 +40,9 @@ $grid-gutter-width-base: 1.875rem !default; // // Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-sans-serif: "Inter", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; -$font-family-base: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; +$font-family-base: "Inter", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; $font-size-root: 13px !default; @@ -54,7 +57,7 @@ $h5-font-size: $font-size-root + 4 !default; $h6-font-size: $font-size-root + 2 !default; $headings-font-weight: $font-weight-bold !default; -$headings-color: $color-4 !default; +$headings-color: $color-dark !default; // Components // @@ -64,9 +67,10 @@ $border-radius: 3px !default; // Forms -$input-color: $color-3 !default; -$input-border-color: $color-border !default; -$input-focus-border-color: $color-2 !default; +$input-color: $color-dark !default; +$input-placeholder-color: $color-dark-light !default; +$input-border-color: $color-light-accent !default; +$input-focus-border-color: $color-primary !default; $custom-select-focus-border-color: $input-focus-border-color !default; @@ -74,10 +78,14 @@ $custom-select-focus-border-color: $input-focus-border-color !default; // // Dropdown menu container and contents. -$dropdown-link-hover-color: #fff !default; -$dropdown-link-hover-bg: $color-3 !default; +$dropdown-link-hover-color: $color-white !default; +$dropdown-link-hover-bg: $color-primary !default; // Breadcrumbs $breadcrumb-bg: transparent !default; -$breadcrumb-active-color: $color-4 !default; +$breadcrumb-active-color: $color-primary !default; + +// Popover + +$popover-header-bg: $color-primary-light !default; diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss index 53b6a25374d..b284db6be78 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss @@ -1,4 +1,16 @@ .breadcrumb { font-size: 16px; margin-bottom: 0; + + a { + color: $breadcrumb-color; + + &:hover { + color: $breadcrumb-active-color; + } + } + + .active { + font-weight: $font-weight-bold; + } } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss b/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss new file mode 100644 index 00000000000..c74d4648ca8 --- /dev/null +++ b/backend/app/assets/stylesheets/spree/backend/components/_buttons.scss @@ -0,0 +1,18 @@ +.btn-default { + background: linear-gradient($color-white, lighten($color-light-dark, 2%)); + color: $color-dark; + border-color: $color-dark-accent; + + &:hover { + background: linear-gradient($color-white, $color-light-dark); + } + + &.disabled, + &:disabled { + color: $color-disabled; + } +} + +.btn-primary { + border-color: darken($color-primary, 6%); +} diff --git a/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss b/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss index ccc8df633df..8addd94b279 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_image_placeholder.scss @@ -14,8 +14,8 @@ display: inline-block; margin: auto; text-align: center; - border: 1px solid #ddd; - color: #aaa; + border: 1px solid $color-light-dark; + color: $color-light-accent; &:before { font: normal normal normal 14px/1 FontAwesome; diff --git a/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss b/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss index ec57bc88f45..ebfcf1f8e74 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_list_group.scss @@ -8,7 +8,7 @@ padding: 10px 15px; // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; - border: 1px solid #cee1f4; + border: 1px solid $color-border; // Round the first and last items &:first-child { @@ -22,5 +22,5 @@ a.list-group-item:focus { text-decoration: none; - background-color: #eff5fc; + background-color: $color-light; } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss index 5429fb3f50d..757fce36294 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss @@ -1,14 +1,13 @@ .errorExplanation { - padding: 5px; - border: 1px solid very-light(theme-color("danger"), 12); - background-color: very-light(theme-color("danger"), 6); - border-radius: 3px; - color: very-light(theme-color("danger"), 30); + padding: 10px 15px; + border-top: 3px solid theme-color("danger"); + background-color: lighten(theme-color("danger"), 40); + border-radius: 0 0 $border-radius $border-radius; + color: $body-color; margin-bottom: 15px; h2 { font-size: 140%; - color: very-light(theme-color("danger"), 30); margin-bottom: 5px; } @@ -34,15 +33,24 @@ } .flash { + border-top: 3px solid; padding: 16px; text-align: center; font-size: 120%; - color: $color-1; - font-weight: $font-weight-bold; + color: $body-color; - &.notice { background-color: rgba(theme-color("warning"), 0.8) } - &.success { background-color: rgba(theme-color("success"), 0.8) } - &.error { background-color: rgba(theme-color("danger"), 0.8) } + &.notice { + background-color: rgba(very-light($color-notice, 15), .95); + border-top-color: $color-notice; + } + &.success { + background-color: rgba(very-light($color-success, 30), .95); + border-top-color: $color-success; + } + &.error { + background-color: rgba(very-light($color-error, 30), .95); + border-top-color: $color-error; + } } .alert { @@ -53,5 +61,5 @@ text-decoration: underline; } - &.error a { color: very-light(theme-color("danger"), 10) } + &.error a { color: lighten(theme-color("danger"), 8); } } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss index 69d395dff5d..c9ba0771f04 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss @@ -17,9 +17,9 @@ nav.menu { } &.active a { - color: $color-2; + color: $color-primary; border-left-width: 0; - border-bottom-color: $color-2; + border-bottom-color: $color-primary; } } } @@ -32,17 +32,21 @@ nav.menu { } .admin-nav-header { - background-color: $color-1; + background-color: $color-white; border-bottom: 1px solid $color-border; text-align: center; + padding: 0 1.25em; // Using line height for proper vertical centering. // As line height does not take the border width into account we need to subtract it. line-height: $main-header-height - 1px; } .admin-nav-menu { + > ul { + margin: 1.5em 0 0; + } + ul { - margin: 0; padding: 0; list-style: none; } @@ -62,7 +66,7 @@ nav.menu { background: $color-navbar-active-bg; > a { - color: $color-navbar-active; + color: $color-navbar; } } @@ -84,15 +88,37 @@ nav.menu { left: 100%; width: $width-sidebar-flyout; margin-left: 0; - border: $border-sidebar; - background: $color-navbar-submenu-bg; - box-shadow: $box-shadow; - @include caret($direction: left, $color-caret: $color-navbar-submenu-bg); + background: $color-white; + box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1); + border-radius: 0 4px 4px 4px; + border: 1px solid $color-border; + @include caret($direction: left, $color-caret: $color-white); &:before { z-index: 1; top: 1.5em; } + + &:after { + content: ''; + display: block; + position: absolute; + border-width: 1em 1em; + border-style: solid; + border-color: transparent; + border-right-color: $color-border; + left: -2.1em; + top: 1.5em; + margin-top: -1em; + } + + > li { + background: $color-white; + + a { + font-weight: $font-weight-bold; + } + } } } } @@ -101,13 +127,15 @@ nav.menu { display: block; padding: $padding-y-navbar $padding-x-navbar; color: $color-navbar; - font-weight: normal; + font-weight: $font-weight-bold; } .icon_link { text-indent: 2em; &:before { + color: $color-icon-navbar; + font-weight: $font-weight-normal; position: absolute; left: 1em; transform: translateX(-50%); @@ -123,6 +151,7 @@ nav.menu { .admin-subnav { background: $color-navbar-submenu-bg; + margin: 0; padding-top: $padding-y-navbar - $padding-y-navbar-submenu; padding-bottom: $padding-y-navbar - $padding-y-navbar-submenu; @@ -132,6 +161,7 @@ nav.menu { a { color: $color-navbar-submenu; + font-weight: $font-weight-normal; padding-top: $padding-y-navbar-submenu; padding-bottom: $padding-y-navbar-submenu; @@ -143,6 +173,7 @@ nav.menu { .selected { a { color: $color-navbar-submenu-active; + font-weight: $font-weight-bold; } } } @@ -183,6 +214,7 @@ nav.menu { a { display: inline-block; + font-weight: $font-weight-bold; max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -193,3 +225,7 @@ nav.menu { margin-right: 0.5rem; } } + +.brand-link { + display: block; +} diff --git a/backend/app/assets/stylesheets/spree/backend/components/_progress.scss b/backend/app/assets/stylesheets/spree/backend/components/_progress.scss index fd514bddac5..ae03c108932 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_progress.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_progress.scss @@ -1,5 +1,5 @@ .turbolinks-progress-bar { - background-color: $color-3; + background-color: $color-dark-light; } #progress { @@ -22,8 +22,8 @@ margin-left: -100px; margin-top: -50px; padding: 11px 0; - background-color: $color-3; - color: $color-1; + background-color: $color-dark-light; + color: $color-white; text-align: center; } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss b/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss index 96d2e44f400..608c2ce48af 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_sidebar.scss @@ -12,7 +12,6 @@ .sidebar-title { @include line-through($color: $color-border); - color: $color-2; + color: $color-dark; font-size: 14px; - font-weight: $font-weight-normal; } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss b/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss index 42ca820de7c..fd6055b586a 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_tabs.scss @@ -23,12 +23,13 @@ // Move down one pixel to sit on top of the ul's border-bottom position: relative; - top: 1px; + top: 2px; > a { + color: $color-navbar-submenu; display: block; border: 1px solid $color-border; - border-radius: 2px 2px 0 0; + border-radius: 4px 4px 0 0; line-height: 1; } @@ -44,12 +45,12 @@ &.active:hover { background: white; border-bottom-color: white; - color: $body-color; + color: $color-navbar-active; + font-weight: $font-weight-bold; } &:not(.active):hover > a { - background: darken($color-tbl-thead, 5%); - color: $link-color; + color: $color-navbar-active; } } diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_deprecated_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_deprecated_variables.scss new file mode 100644 index 00000000000..e6df004d4d9 --- /dev/null +++ b/backend/app/assets/stylesheets/spree/backend/globals/_deprecated_variables.scss @@ -0,0 +1,24 @@ +// Numbered colors variables are deprecated and will be removed in Solidus v3.0 +@include solidus-deprecated-variable("color-1", "color-white"); +$color-1: $color-white !default; + +@include solidus-deprecated-variable("color-2", "color-primary"); +$color-2: $color-primary !default; + +@include solidus-deprecated-variable("color-3", "color-dark-light"); +$color-3: $color-dark-light !default; + +@include solidus-deprecated-variable("color-4", "color-dark"); +$color-4: $color-dark !default; + +@include solidus-deprecated-variable("color-5", "color-red"); +$color-5: $color-red !default; + +@include solidus-deprecated-variable("color-6", "color-yellow"); +$color-6: $color-yellow !default; + +@include solidus-deprecated-variable("color-7", "color-light"); +$color-7: $color-light !default; + +@include solidus-deprecated-variable("color-8", "color-dark-light"); +$color-8: $color-dark-light !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_deprecation.scss b/backend/app/assets/stylesheets/spree/backend/globals/_deprecation.scss index 703570f630f..8b7dca42b9d 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_deprecation.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_deprecation.scss @@ -7,7 +7,7 @@ $output-solidus-deprecation-warnings: true !default; -@mixin solidus-deprecated-variable($variable, $replacement) { +@mixin bs-deprecated-variable($variable, $replacement) { @if $output-solidus-deprecation-warnings == true { @if global-variable-exists($variable) { @warn "[Solidus] [Deprecation] `$#{$variable}` is deprecated and will be " + @@ -15,3 +15,12 @@ $output-solidus-deprecation-warnings: true !default; } } } + +@mixin solidus-deprecated-variable($variable, $replacement) { + @if $output-solidus-deprecation-warnings == true { + @if global-variable-exists($variable) { + @warn "[Solidus] [Deprecation] `$#{$variable}` is deprecated and will be " + + "removed in Solidus 3.0. Please use `$#{$replacement}` instead"; + } + } +} diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 261f7028a68..8a80a31f9f3 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -4,65 +4,85 @@ // Fonts //-------------------------------------------------------------- -$font-size-pill: 11px; +$font-size-pill: 11px; +$label-font-size: 12px; // Colors //-------------------------------------------------------------- // Basic color palette for admin -$color-1: #FFFFFF !default; // White -$color-2: #9FC820 !default; // Green -$color-3: #5498DA !default; // Light Blue -$color-4: #6788A2 !default; // Dark Blue -$color-5: #C60F13 !default; // Red -$color-6: #FF9300 !default; // Yellow -$color-7: #F4F4F4 !default; // Light Gray + +$color-dark: #24282F !default; +$color-dark-dark: #5B6778 !default; +$color-dark-light: #808C9E !default; +$color-dark-accent: #C7CDD5 !default; + +$color-primary: #3D76F1 !default; +$color-primary-light: #E3EBFD !default; + +$color-light: #F9FAFB !default; +$color-light-dark: #E5E7EB !default; +$color-light-accent: #D7DAE0 !default; + +$color-white: #FFFFFF !default; + +$color-red: #CE452A !default; +$color-yellow: #FFDD59 !default; +$color-green: #52B73B !default; // Basic accents for admin -$box-shadow: 0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default; +$box-shadow: 0 0 4px 0 rgba(0, 0, 0, .12) !default; // Body base colors -$color-border: very-light($color-3, 12) !default; +$color-border: $color-light-dark !default; +$color-disabled: $color-dark-light !default; // Basic navigation colors -$color-sidebar-bg: $color-1 !default; +$color-header-bg: $color-light !default; +$color-sidebar-bg: $color-light !default; $color-sidebar-border: $color-border !default; -$color-navbar: $color-1 !default; -$color-navbar-bg: $color-3 !default; -$color-navbar-active: $color-1 !default; -$color-navbar-active-bg: $color-2 !default; -$color-navbar-submenu: $color-3 !default; -$color-navbar-submenu-bg: very-light($color-navbar-bg, 4) !default; -$color-navbar-submenu-active: $color-2 !default; -$color-navbar-footer: $color-3 !default; -$color-navbar-footer-bg: $color-sidebar-bg !default; -$color-navbar-footer-active: $color-2 !default; +$color-navbar: $color-dark !default; +$color-navbar-bg: $color-light !default; +$color-navbar-active: $color-primary !default; +$color-navbar-active-bg: $color-light !default; +$color-navbar-submenu: $color-dark-light !default; +$color-navbar-submenu-bg: $color-light !default; +$color-navbar-submenu-active: $color-primary !default; +$color-navbar-footer: $color-dark !default; +$color-navbar-footer-bg: $color-light !default; +$color-navbar-footer-active: $color-primary !default; +$color-icon-navbar: $color-dark-light !default; // Basic flash colors -@include solidus-deprecated-variable("color-success", "brand-success"); -$color-success: $color-2 !default; -@include solidus-deprecated-variable("color-notice", "brand-warning"); -$color-notice: $color-6 !default; -@include solidus-deprecated-variable("color-error", "brand-danger"); -$color-error: $color-5 !default; +@include bs-deprecated-variable("color-success", "brand-success"); +$color-success: $color-green !default; +@include bs-deprecated-variable("color-notice", "brand-warning"); +$color-notice: $color-yellow !default; +@include bs-deprecated-variable("color-error", "brand-danger"); +$color-error: $color-red !default; + +// Breadcrumb custom variable + +$breadcrumb-color: $color-dark-light; // Color for spinner -$color-spinner: #fff; +$color-spinner: $color-white; // Style Guide -$color-style-guide-code: darken($color-7, 10%); -$color-style-guide-link: darken($color-7, 65%); -$color-style-guide-nav: $color-7; -$color-style-guide-nav-border: darken($color-7, 5%); -$color-style-guide-nav-link: darken($color-7, 65%); -$color-style-guide-nav-link-hover: darken($color-7, 5%); -$color-style-guide-section-border: darken($color-7, 10%); -$color-style-guide-swatch-border: darken($color-7, 10%); +$color-style-guide-code: darken($color-light, 10%); +$color-style-guide-link: darken($color-light, 65%); +$color-style-guide-nav: $color-light; +$color-style-guide-nav-border: darken($color-light, 5%); +$color-style-guide-nav-link: darken($color-light, 65%); +$color-style-guide-nav-link-hover: darken($color-light, 5%); +$color-style-guide-section-border: darken($color-light, 10%); +$color-style-guide-swatch-border: darken($color-light, 10%); +$color-style-guide-table-border: #CEE1F4; // Table colors -$color-tbl-odd: $color-1 !default; -$color-tbl-even: very-light($color-3, 4) !default; -$color-tbl-thead: very-light($color-3, 4) !default; +$color-tbl-odd: $color-white !default; +$color-tbl-even: very-light($color-dark-light, 4) !default; +$color-tbl-thead: very-light($color-dark-light, 4) !default; // Pill colors // @@ -146,3 +166,6 @@ $border-sidebar: 1px solid $color-sidebar-border !default; // Main //-------------------------------------------------------------- $main-header-height: 75px !default; + +$content-wrapper-bg: $color-white; +$admin-body-bg: $color-white; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables_override.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables_override.scss index 0a49b49d2f5..afc5b57f7af 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables_override.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables_override.scss @@ -5,3 +5,4 @@ file in your application and set variables according to globals/_variables.scss file. --------------------------------------------------------- */ + diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss index d83a43f1d91..10a0c2be7c7 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss @@ -1,4 +1,4 @@ -@mixin caret($width: 1em, $height: 1em, $direction: up, $color-caret: $color-3) { +@mixin caret($width: 1em, $height: 1em, $direction: up, $color-caret: $color-dark-light) { &:before { content: ''; display: block; 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 a296d022fe9..429c87a4da9 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: $body-bg) { +@mixin line-through($color: $color-primary, $background: $body-bg) { position: relative; text-align: center; diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss b/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss index e30ed0d7127..0f9db639edb 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_log_entries.scss @@ -1,13 +1,23 @@ .log_entry { &.success { - i { - color: $color-2; + background: lighten($color-primary, 15); + + td h4 { + color: darken($body-color, 25); + i { + color: $color-primary; + } } } &.fail { - i { - color: $color-5; + background: lighten($color-red, 25); + + td h4 { + color: lighten($body-color, 50); + i { + color: $color-red; + } } } } diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss b/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss index fac56438773..b5eb68a216f 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_orders.scss @@ -17,7 +17,9 @@ .order-total { font-size: 35px; font-weight: $font-weight-bold; - color: theme-color("success"); + background: $color-primary-light; + padding: .1em .3em; + border-radius: 3px; } } @@ -28,7 +30,9 @@ .customer { font-size: 20px; font-weight: $font-weight-bold; - color: theme-color("success"); + background: $color-primary-light; + padding: .1em .3em; + border-radius: 3px; } } @@ -37,10 +41,17 @@ color: $body-color; .shipment-number { - color: theme-color("success"); + color: $color-dark-dark; + background: $color-primary-light; + padding: .1em .3em; + border-radius: 3px; } .stock-location-name { - color: theme-color("success"); + color: $color-dark-dark; + background: $color-primary-light; + padding: .1em .3em; + border-radius: 3px; + word-break: break-word; } } } @@ -58,8 +69,8 @@ label[for="order_bill_address_attributes_firstname"] { } #risk_analysis legend { - background-color: #c00; - color: #FFF; + background-color: $color-red; + color: $color-white; font-size: 2em; } diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_products.scss b/backend/app/assets/stylesheets/spree/backend/sections/_products.scss index 2a2a532660e..dcfe029f032 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_products.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_products.scss @@ -31,7 +31,9 @@ div[data-hook="admin_products_index_search_buttons"] { margin-bottom: 15px; strong { - color: $color-2; + background: $color-primary-light; + padding: .1em .3em; + border-radius: 3px; } } diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss b/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss index 90e488268f4..b3921d39d47 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_promotions.scss @@ -51,7 +51,7 @@ top: 10px; &:hover { - color: #c60f13; + color: $color-red; } } } @@ -71,7 +71,7 @@ top: 10px; &:hover { - color: #c60f13; + color: $color-red; } } } @@ -97,13 +97,13 @@ } &.action-remove { - background-color: lighten($color-5, 50); - border-color: lighten($color-5, 45); + background-color: lighten($color-red, 50); + border-color: lighten($color-red, 45); text-decoration: line-through; .promotion-title, input[type="text"], input[type="number"], .token-input-list { - border-color: lighten($color-5, 45); + border-color: lighten($color-red, 45); } } diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss index bcc09700229..614d891e509 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss @@ -48,7 +48,7 @@ > a { font-size: 1.2rem; - font-weight: 300; + font-weight: $font-weight-normal; } } @@ -64,7 +64,7 @@ } &-intro, - &-section:not(:last-child) { + &-section { margin: 4rem 0; } @@ -112,8 +112,8 @@ table.with-actions-borders { th, td { &.actions { - border-right: 1px solid #cee1f4 !important; - border-bottom: 1px solid #cee1f4 !important; + border-right: 1px solid $color-style-guide-table-border !important; + border-bottom: 1px solid $color-style-guide-table-border !important; } } } diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss b/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss index 574a515b79b..04dac0d84cc 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss @@ -12,7 +12,7 @@ } .taxon { - background-color: very-light($color-3); + background-color: very-light($color-dark-light); border: 1px solid $color-border; border-radius: $border-radius; color: $body-color; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss b/backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss new file mode 100644 index 00000000000..926f3d27f2b --- /dev/null +++ b/backend/app/assets/stylesheets/spree/backend/shared/_fonts.scss @@ -0,0 +1,15 @@ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: $font-weight-normal; + src: font-url("inter/Inter-Regular.woff2") format("woff2"), + font-url("inter/Inter-Regular.woff") format("woff"); +} + +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: $font-weight-bold; + src: font-url("inter/Inter-SemiBold.woff2") format("woff2"), + font-url("inter/Inter-SemiBold.woff") format("woff"); +} diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss index 729eac83db2..da345d81d6b 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_forms.scss @@ -41,6 +41,8 @@ textarea { } label { + font-size: inherit; + &.required:after { content: " *"; } @@ -64,7 +66,19 @@ button, // In order to avoid the clashing between using `:not(.btn)` and // `@extend .btn` we need to use an attribute selector of `[class*="btn"]`. @extend .btn; - @include button-variant(theme-color("primary"), theme-color("primary")); + background: linear-gradient($color-white, lighten($color-light-dark, 2%)); + color: $color-dark; + border-color: $color-dark-accent; + + &:hover { + background: linear-gradient($color-white, $color-light-dark); + color: $color-primary; + } + + &.disabled, + &:disabled { + color: $color-disabled; + } } &:before { @@ -106,6 +120,10 @@ span.info { margin-top: 2.25rem; } } + + label { + font-size: $label-font-size; + } ul { list-style: none; @@ -131,21 +149,21 @@ span.info { &.withError { .field_with_errors { label { - color: very-light(theme-color("danger"), 30); + color: theme-color("danger"); } input { - border-color: very-light(theme-color("danger"), 15); + border-color: theme-color("danger"); } } .formError { - color: very-light(theme-color("danger"), 30); + color: lighten(theme-color("danger"), 15); font-style: italic; font-size: 85%; } .select2-container { border-radius: 4px; - border: 1px solid very-light(theme-color("danger"), 15); + border: 1px solid theme-color("danger"); } } } @@ -172,8 +190,8 @@ fieldset { } legend { - color: $color-2; - font-size: 16px; + color: $color-dark; + font-size: 14px; font-weight: $font-weight-bold; text-align: center; padding: 8px 15px; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss index e6144fdddbb..d738ddd6770 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss @@ -2,8 +2,9 @@ display: flex; align-items: center; padding: 15px $grid-gutter-width; - background-color: very-light($color-3, 4); + background-color: $color-header-bg; border-bottom: 1px solid $color-border; + border-top: 4px solid $color-primary; height: $main-header-height; @media print { display: none } @@ -17,7 +18,7 @@ -moz-osx-font-smoothing: grayscale; i { - color: $color-2; + color: $color-primary; } } diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_icons.scss b/backend/app/assets/stylesheets/spree/backend/shared/_icons.scss index 8914c81f456..8a207201dd1 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_icons.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_icons.scss @@ -14,6 +14,10 @@ } } +.btn.fa { + font: normal normal $btn-font-weight #{$font-size-base}/#{$btn-line-height} "FontAwesome"; +} + .fa-email { @extend .fa-envelope } .fa-resume { @extend .fa-refresh } .fa-approve { @extend .fa-check } diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss index a953a8ac1a9..f73a986546c 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss @@ -8,6 +8,10 @@ body { padding-left: $width-sidebar; } +.admin { + background-color: $admin-body-bg; +} + .admin-nav { position: absolute; top: 0; @@ -18,6 +22,7 @@ body { } .content-wrapper { + background-color: $content-wrapper-bg; padding-top: 1rem; padding-left: $grid-gutter-width; padding-right: $grid-gutter-width; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss index 37b2c6b5631..b09f86dc1cf 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss @@ -47,12 +47,12 @@ table { button[class*='fa-'] { color: $link-color; - background-color: transparent; + background: transparent; border: 0 none; padding: 0 !important; &:hover { - background-color: transparent; + background: transparent; } } @@ -61,7 +61,7 @@ table { padding-left: 0px; &:hover { - color: $color-3; + color: $color-dark-light; } } @@ -108,7 +108,7 @@ table { } th a { - color: $color-4; + color: $color-dark; } tbody { diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss index 8eb2740ec5d..b6c48826d56 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss @@ -7,7 +7,7 @@ html { body { padding: 0; - font-weight: 400; + font-weight: $font-weight-normal; text-rendering: optimizeLegibility; } @@ -17,6 +17,11 @@ hr { border-left: none; } +strong, +b { + font-weight: $font-weight-bold; +} + // Headings //-------------------------------------------------------------- @@ -92,10 +97,10 @@ dl { .uppercase { text-transform: uppercase } -.green { color: $color-2 } -.blue { color: $color-3 } -.red { color: $color-5 } -.yellow { color: $color-6 } +.green { color: $color-green } +.blue { color: $color-primary } +.red { color: $color-red } +.yellow { color: $color-yellow } .negative { color: $red } input[type="number"].negative { color: $red } // needed to override blue style that is more specific than '.negative' diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss index e3d2674d2be..0711d85a822 100644 --- a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss +++ b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss @@ -2,12 +2,14 @@ @import 'spree/backend/globals/deprecation'; @import 'spree/backend/globals/variables_override'; @import 'spree/backend/globals/variables'; +@import 'spree/backend/globals/deprecated_variables'; @import 'bootstrap_custom'; @import 'solidus_admin/bootstrap/bootstrap'; @import 'spree/backend/globals/mixins'; +@import 'spree/backend/shared/fonts'; @import 'spree/backend/shared/typography'; @import 'spree/backend/shared/images'; @import 'spree/backend/shared/tables'; @@ -20,6 +22,7 @@ @import 'spree/backend/components/states'; @import 'spree/backend/components/actions'; @import 'spree/backend/components/breadcrumb'; +@import 'spree/backend/components/buttons'; @import 'spree/backend/components/number_with_currency'; @import 'spree/backend/components/hint'; @import 'spree/backend/components/image_placeholder'; diff --git a/backend/app/views/spree/admin/images/index.html.erb b/backend/app/views/spree/admin/images/index.html.erb index e4465a8285d..1e57a118c33 100644 --- a/backend/app/views/spree/admin/images/index.html.erb +++ b/backend/app/views/spree/admin/images/index.html.erb @@ -5,7 +5,7 @@ <% content_for :page_actions do %> <% if can?(:create, Spree::Image) %> -
  • <%= link_to_with_icon('plus', t('spree.new_image'), new_admin_product_image_url(@product), id: 'new_image_link', class: 'button') %>
    • +
  • <%= link_to_with_icon('plus', t('spree.new_image'), new_admin_product_image_url(@product), id: 'new_image_link', class: 'btn btn-primary') %>
    • <% end %> <% end %> diff --git a/backend/app/views/spree/admin/option_types/edit.html.erb b/backend/app/views/spree/admin/option_types/edit.html.erb index 766a403b5ad..6a4f1cb3b4b 100644 --- a/backend/app/views/spree/admin/option_types/edit.html.erb +++ b/backend/app/views/spree/admin/option_types/edit.html.erb @@ -6,7 +6,7 @@ <% content_for :page_actions do %>
  • - <%= link_to_add_fields t('spree.add_option_value'), "tbody#option_values", class: 'button' %> + <%= link_to_add_fields t('spree.add_option_value'), "tbody#option_values", class: 'btn btn-primary' %>
    • <% end %> diff --git a/backend/app/views/spree/admin/orders/_line_items_edit_form.html.erb b/backend/app/views/spree/admin/orders/_line_items_edit_form.html.erb index e81031e4adf..01b95a985f3 100644 --- a/backend/app/views/spree/admin/orders/_line_items_edit_form.html.erb +++ b/backend/app/views/spree/admin/orders/_line_items_edit_form.html.erb @@ -6,7 +6,7 @@ <%= render partial: "spree/admin/orders/line_items", locals: { order: order } %> <% if can?(:update, @order) && can?(:create, Spree::LineItem) %> - + <% end %> <%= render "spree/admin/orders/order_details", { order: order } %> diff --git a/backend/app/views/spree/admin/products/edit.html.erb b/backend/app/views/spree/admin/products/edit.html.erb index 364a309921f..b66c55fda52 100644 --- a/backend/app/views/spree/admin/products/edit.html.erb +++ b/backend/app/views/spree/admin/products/edit.html.erb @@ -6,7 +6,7 @@ <% end %> <% if defined?(Spree::Frontend::Engine) %> <% end %> <% end %> diff --git a/backend/app/views/spree/admin/reimbursements/edit.html.erb b/backend/app/views/spree/admin/reimbursements/edit.html.erb index 074043a5bf8..5d8adbbd48e 100644 --- a/backend/app/views/spree/admin/reimbursements/edit.html.erb +++ b/backend/app/views/spree/admin/reimbursements/edit.html.erb @@ -97,10 +97,10 @@ <% end %>
    <% if !@reimbursement.reimbursed? %> - <%= button_to [:perform, :admin, @order, @reimbursement], { class: 'button', method: 'post' } do %> + <%= button_to [:perform, :admin, @order, @reimbursement], { class: 'button btn btn-primary', method: 'post' } do %> <%= t('spree.reimburse') %> <% end %> - <%= link_to t('spree.actions.cancel'), url_for([:admin, @order, @reimbursement.customer_return]), class: 'btn btn-primary' %> + <%= link_to t('spree.actions.cancel'), url_for([:admin, @order, @reimbursement.customer_return]), class: 'btn btn-default' %> <% end %>
    diff --git a/backend/app/views/spree/admin/shared/_head.html.erb b/backend/app/views/spree/admin/shared/_head.html.erb index db9a7fc3f6b..be396021d45 100644 --- a/backend/app/views/spree/admin/shared/_head.html.erb +++ b/backend/app/views/spree/admin/shared/_head.html.erb @@ -5,9 +5,6 @@ <%= admin_page_title %> - - - <%= favicon_link_tag 'favicon.ico' %> <%= stylesheet_link_tag 'spree/backend/all', media: 'all', data: {turbolinks_track: 'reload'} %> <%= javascript_include_tag 'spree/backend/all', data: {turbolinks_track: 'reload'} %> diff --git a/backend/app/views/spree/admin/shared/_modal.html.erb b/backend/app/views/spree/admin/shared/_modal.html.erb index 47be042497e..9b34cd94d06 100644 --- a/backend/app/views/spree/admin/shared/_modal.html.erb +++ b/backend/app/views/spree/admin/shared/_modal.html.erb @@ -11,7 +11,7 @@ <%= content %>
    - +
    diff --git a/backend/app/views/spree/admin/store_credits/edit_validity.html.erb b/backend/app/views/spree/admin/store_credits/edit_validity.html.erb index 5d13735f9a9..1eba73e9e99 100644 --- a/backend/app/views/spree/admin/store_credits/edit_validity.html.erb +++ b/backend/app/views/spree/admin/store_credits/edit_validity.html.erb @@ -20,7 +20,7 @@
    <%= button_tag t('spree.store_credit.actions.invalidate'), class: 'btn btn-primary' %> - <%= link_to t('spree.actions.cancel'), admin_user_store_credit_path(@user, @store_credit), class: 'btn btn-primary' %> + <%= link_to t('spree.actions.cancel'), admin_user_store_credit_path(@user, @store_credit), class: 'btn btn-default' %>
    <% end %> diff --git a/backend/app/views/spree/admin/store_credits/index.html.erb b/backend/app/views/spree/admin/store_credits/index.html.erb index 87eb59aa67a..bd133299dd1 100644 --- a/backend/app/views/spree/admin/store_credits/index.html.erb +++ b/backend/app/views/spree/admin/store_credits/index.html.erb @@ -7,7 +7,7 @@ <%= render 'spree/admin/users/tabs', current: :store_credits %> <% content_for :page_actions do %> <% if can?(:create, Spree::StoreCredit) %> -
  • <%= link_to t('spree.admin.store_credits.add'), new_admin_user_store_credit_path(@user), class: 'button' %>
    • +
  • <%= link_to t('spree.admin.store_credits.add'), new_admin_user_store_credit_path(@user), class: 'button btn btn-primary' %>
    • <% end %> <% end %> diff --git a/backend/app/views/spree/admin/store_credits/show.html.erb b/backend/app/views/spree/admin/store_credits/show.html.erb index d66161da918..a7c7b89111b 100644 --- a/backend/app/views/spree/admin/store_credits/show.html.erb +++ b/backend/app/views/spree/admin/store_credits/show.html.erb @@ -8,7 +8,7 @@ <%= render 'spree/admin/users/tabs', current: :store_credits %> <% content_for :page_actions do %> <% if @store_credit.editable? && can?(:edit, @store_credit) %> -
  • <%= link_to t('spree.admin.store_credits.change_amount'), edit_amount_admin_user_store_credit_path(@user, @store_credit), class: 'button' %>
    • +
  • <%= link_to t('spree.admin.store_credits.change_amount'), edit_amount_admin_user_store_credit_path(@user, @store_credit), class: 'button btn btn-primary' %>
    • <% end %> <% if @store_credit.invalidateable? && can?(:invalidate, @store_credit) %>
  • <%= link_to t('spree.invalidate'), edit_validity_admin_user_store_credit_path(@user, @store_credit), class: 'button' %>
    • diff --git a/backend/app/views/spree/admin/style_guide/topics/typography/_colors.html.erb b/backend/app/views/spree/admin/style_guide/topics/typography/_colors.html.erb index 5f0e6e6208e..f5b1b6495e8 100644 --- a/backend/app/views/spree/admin/style_guide/topics/typography/_colors.html.erb +++ b/backend/app/views/spree/admin/style_guide/topics/typography/_colors.html.erb @@ -9,39 +9,49 @@ <%- colors = [ { - name: '$color-1', + name: '$color-white', value: '#FFFFFF', - used_for: 'Backgrounds.' + used_for: 'Body background color.' }, { - name: '$color-2', - value: '#9FC820', - used_for: 'Active states.' + name: '$color-light', + value: '#F9FAFB', + used_for: 'Sidebar and header background color.' }, { - name: '$color-3', - value: '#5498DA', - used_for: 'Buttons, links, form text.' + name: '$color-light-dark', + value: '#E5E7EB', + used_for: 'Borders color.' }, { - name: '$color-4', - value: '#6788A2', - used_for: 'Non-interactive text outside of form fields.' + name: '$color-dark', + value: '#24282F', + used_for: 'Text and headings color.' }, { - name: '$color-5', - value: '#C60F13', - used_for: 'Errors, destructive action warnings.' + name: '$color-dark-light', + value: '#808C9E', + used_for: 'Main text color for navigation, tabs, breadcrumb.' + }, + { + name: '$color-primary', + value: '#3D76F1', + used_for: 'Buttons primary actions, links, active states.' }, { - name: '$color-6', - value: '#FF9300', - used_for: 'Warnings' + name: '$color-success', + value: '#52B73B', + used_for: 'Success actions.' + }, + { + name: '$color-error', + value: '#CE452A', + used_for: 'Errors, destructive action warnings.' }, { - name: '$color-7', - value: '#F4F4F4', - used_for: 'Disabled states' + name: '$color-notice', + value: '#FFDD59', + used_for: 'Warnings actions.' } ] diff --git a/backend/app/views/spree/admin/style_guide/topics/typography/_fonts.html.erb b/backend/app/views/spree/admin/style_guide/topics/typography/_fonts.html.erb index 1b826ec9b40..c1158d907f8 100644 --- a/backend/app/views/spree/admin/style_guide/topics/typography/_fonts.html.erb +++ b/backend/app/views/spree/admin/style_guide/topics/typography/_fonts.html.erb @@ -1,6 +1,6 @@

    - The typography base is "Open Sans" and Helvetica which we leave to the browser to provide. + The typography base is "Inter" and Helvetica which we load by stylesheet with @font-face rule. Set at 13px with no specified line-height.

    diff --git a/backend/app/views/spree/admin/taxonomies/edit.html.erb b/backend/app/views/spree/admin/taxonomies/edit.html.erb index 258f4d0c689..d82c3fcc05a 100644 --- a/backend/app/views/spree/admin/taxonomies/edit.html.erb +++ b/backend/app/views/spree/admin/taxonomies/edit.html.erb @@ -14,7 +14,7 @@ <%= render partial: 'form', locals: { f: f } %>
    <%= button_tag t('spree.actions.update'), class: 'btn btn-primary' %> - <%= link_to t('spree.actions.cancel'), admin_taxonomies_path, class: 'btn btn-primary' %> + <%= link_to t('spree.actions.cancel'), admin_taxonomies_path, class: 'btn btn-default' %>
    diff --git a/backend/app/views/spree/admin/taxons/edit.html.erb b/backend/app/views/spree/admin/taxons/edit.html.erb index 50add82f9f3..5e059818248 100644 --- a/backend/app/views/spree/admin/taxons/edit.html.erb +++ b/backend/app/views/spree/admin/taxons/edit.html.erb @@ -3,7 +3,7 @@ <% content_for :page_actions do %>
  • - <%= link_to t('spree.back_to_taxonomies_list'), spree.admin_taxonomies_path, class: 'btn btn-primary' %> + <%= link_to t('spree.back_to_taxonomies_list'), spree.admin_taxonomies_path, class: 'btn btn-default' %>
    • <% end %> @@ -14,6 +14,6 @@
    <%= button_tag t('spree.actions.update'), class: 'btn btn-primary' %> - <%= link_to t('spree.actions.cancel'), edit_admin_taxonomy_url(@taxonomy), class: 'btn btn-primary' %> + <%= link_to t('spree.actions.cancel'), edit_admin_taxonomy_url(@taxonomy), class: 'btn btn-default' %>
    <% end %> diff --git a/backend/app/views/spree/admin/users/edit.html.erb b/backend/app/views/spree/admin/users/edit.html.erb index aead2cfe84a..ea21b894238 100644 --- a/backend/app/views/spree/admin/users/edit.html.erb +++ b/backend/app/views/spree/admin/users/edit.html.erb @@ -41,8 +41,8 @@
    - <%= button_to t('.clear_key'), spree.clear_api_key_admin_user_path(@user), method: :put, data: { confirm: t('.confirm_clear_key') }, class: 'btn btn-primary' %> - <%= button_to t('.regenerate_key'), spree.generate_api_key_admin_user_path(@user), method: :put, data: { confirm: t('.confirm_regenerate_key') }, class: 'btn btn-primary' %> + <%= button_to t('.clear_key'), spree.clear_api_key_admin_user_path(@user), method: :put, data: { confirm: t('.confirm_clear_key') }, class: 'btn btn-default' %> + <%= button_to t('.regenerate_key'), spree.generate_api_key_admin_user_path(@user), method: :put, data: { confirm: t('.confirm_regenerate_key') }, class: 'btn btn-default' %>
    <% else %> diff --git a/backend/spec/support/appear_before_matcher.rb b/backend/spec/support/appear_before_matcher.rb index aca645a5f84..5d3db89e76d 100644 --- a/backend/spec/support/appear_before_matcher.rb +++ b/backend/spec/support/appear_before_matcher.rb @@ -5,6 +5,6 @@ RSpec::Matchers.define :appear_before do |expected| match do |actual| raise "Page instance required to use the appear_before matcher" unless page - page.body.index(actual) <= page.body.index(expected) + has_text? /#{actual}.*#{expected}/ end end diff --git a/backend/vendor/assets/fonts/inter/Inter-Regular.woff b/backend/vendor/assets/fonts/inter/Inter-Regular.woff new file mode 100644 index 00000000000..e8587fd87cb Binary files /dev/null and b/backend/vendor/assets/fonts/inter/Inter-Regular.woff differ diff --git a/backend/vendor/assets/fonts/inter/Inter-Regular.woff2 b/backend/vendor/assets/fonts/inter/Inter-Regular.woff2 new file mode 100644 index 00000000000..46568fdcd76 Binary files /dev/null and b/backend/vendor/assets/fonts/inter/Inter-Regular.woff2 differ diff --git a/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff b/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff new file mode 100644 index 00000000000..de40b73e844 Binary files /dev/null and b/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff differ diff --git a/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff2 b/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff2 new file mode 100644 index 00000000000..6bb8bee1846 Binary files /dev/null and b/backend/vendor/assets/fonts/inter/Inter-SemiBold.woff2 differ diff --git a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_pagination.scss b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_pagination.scss index 959b2eb4ba2..922ddc8f45c 100644 --- a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_pagination.scss +++ b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_pagination.scss @@ -51,6 +51,10 @@ color: $pagination-active-color; background-color: $pagination-active-bg; border-color: $pagination-active-border-color; + + &:hover { + color: $pagination-active-color; + } } &.disabled .page-link { diff --git a/core/app/assets/images/logo/solidus.svg b/core/app/assets/images/logo/solidus.svg index e899393be5c..cacccee3537 100644 --- a/core/app/assets/images/logo/solidus.svg +++ b/core/app/assets/images/logo/solidus.svg @@ -1,18 +1 @@ - - - - solidus - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/core/app/assets/images/logo/solidus_logo.png b/core/app/assets/images/logo/solidus_logo.png old mode 100644 new mode 100755 index a73a7861a1a..7986e07a280 Binary files a/core/app/assets/images/logo/solidus_logo.png and b/core/app/assets/images/logo/solidus_logo.png differ diff --git a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss index 93814332162..dc41b6c34fc 100644 --- a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss +++ b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss @@ -1265,6 +1265,15 @@ table.order-summary { } +// # Logo +#logo { + padding: 20px 0; + + > a { + display: inline-block; + } +} + @media only screen and (max-width: 767px) { #empty-cart { clear: both;