From 925dcf60ad7b714de99123ee3a3dd42a43dbd172 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 13:43:46 -0700 Subject: [PATCH 01/12] Remove Bootstrap overrides that use original value We don't need to have these variables defined twice in two separate locations. This file is specifically for values that differ from Bootstrap defaults. --- .../spree/backend/_bootstrap_custom.scss | 883 +----------------- 1 file changed, 3 insertions(+), 880 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index 577e707b55e..6d724d3661e 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -1,181 +1,16 @@ -// Variables +// Bootstrap overrides // -// Copy settings from this file into the provided `_custom.scss` to override -// the Bootstrap defaults without modifying key, versioned files. - - -// Table of Contents -// -// Colors -// Options -// Spacing -// Body -// Links -// Grid breakpoints -// Grid containers -// Grid columns -// Fonts -// Components -// Tables -// Buttons -// Forms -// Dropdowns -// Z-index master list -// Navbar -// Navs -// Pagination -// Jumbotron -// Form states and alerts -// Cards -// Tooltips -// Popovers -// Badges -// Modals -// Alerts -// Progress bars -// List group -// Image thumbnails -// Figures -// Breadcrumbs -// Carousel -// Close -// Code - -@mixin _assert-ascending($map, $map-name) { - $prev-key: null; - $prev-num: null; - @each $key, $num in $map { - @if $prev-num == null { - // Do nothing - } @else if not comparable($prev-num, $num) { - @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } @else if $prev-num >= $num { - @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; - } - $prev-key: $key; - $prev-num: $num; - } -} - -// Replace `$search` with `$replace` in `$string` -// @author Hugo Giraudel -// @param {String} $string - Initial string -// @param {String} $search - Substring to replace -// @param {String} $replace ('') - New value -// @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - - @return $string; -} - -@mixin _assert-starts-at-zero($map) { - $values: map-values($map); - $first-value: nth($values, 1); - @if $first-value != 0 { - @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; - } -} - - -// General variable structure -// -// Variable format should follow the `$component-modifier-state-property` order. - +// Copy variables from `_variables.scss` to this file to override default values +// without modifying source files. // Colors // // Grayscale and brand colors for use across Bootstrap. -// 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; - -// Create grayscale -$gray-dark: #292b2c !default; -$gray: #464a4c !default; -$gray-light: #636c72 !default; -$gray-lighter: #eceeef !default; -$gray-lightest: #f7f7f9 !default; - -// Reassign color vars to semantic color scheme $brand-primary: $color-3 !default; $brand-success: $color-2 !default; -$brand-info: $teal !default; $brand-warning: $color-6 !default; $brand-danger: $color-5 !default; -$brand-inverse: $gray-dark !default; - - -// Options -// -// Quickly modify global styling by enabling or disabling optional features. - -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - - -// Spacing -// -// Control the default styling of most Bootstrap elements by modifying these -// variables. Mostly focused on spacing. -// You can add more entries to the $spacers map, should you need more variation. - -$spacer: 1rem !default; -$spacer-x: $spacer !default; -$spacer-y: $spacer !default; -$spacers: ( - 0: ( - x: 0, - y: 0 - ), - 1: ( - x: ($spacer-x * .25), - y: ($spacer-y * .25) - ), - 2: ( - x: ($spacer-x * .5), - y: ($spacer-y * .5) - ), - 3: ( - x: $spacer-x, - y: $spacer-y - ), - 4: ( - x: ($spacer-x * 1.5), - y: ($spacer-y * 1.5) - ), - 5: ( - x: ($spacer-x * 3), - y: ($spacer-y * 3) - ) -) !default; -$border-width: 1px !default; - -// This variable affects the `.h-*` and `.w-*` classes. -$sizes: ( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100% -) !default; // Body // @@ -183,9 +18,6 @@ $sizes: ( $body-bg: $color-body-bg !default; $body-color: $color-body-text !default; -$inverse-bg: $gray-dark !default; -$inverse-color: $gray-lighter !default; - // Links // @@ -196,70 +28,21 @@ $link-decoration: none !default; $link-hover-color: $color-link-hover !default; $link-hover-decoration: none !default; - -// Grid breakpoints -// -// Define the minimum dimensions at which your layout will change, -// adapting to different screen sizes, for use in media queries. - -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px -) !default; -@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include _assert-starts-at-zero($grid-breakpoints); - - -// Grid containers -// -// Define the maximum width of `.container` for different screen sizes. - -$container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px -) !default; -@include _assert-ascending($container-max-widths, "$container-max-widths"); - - // Grid columns // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; $grid-gutter-width-base: 1.875rem !default; -$grid-gutter-widths: ( - xs: $grid-gutter-width-base, - sm: $grid-gutter-width-base, - md: $grid-gutter-width-base, - lg: $grid-gutter-width-base, - xl: $grid-gutter-width-base -) !default; // Fonts // // Font, line-height, and color for body text, headings, and more. $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; $font-family-base: $base-font-family !default; $font-size-root: $body-font-size !default; -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; -$font-size-xs: .75rem !default; - -$font-weight-normal: normal !default; -$font-weight-bold: bold !default; - -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; $font-size-h1: $h1-size !default; $font-size-h2: $h2-size !default; @@ -268,695 +51,35 @@ $font-size-h4: $h4-size !default; $font-size-h5: $h5-size !default; $font-size-h6: $h6-size !default; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; $headings-font-weight: $font-weight-bold !default; -$headings-line-height: 1.1 !default; $headings-color: $color-headers !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; - -$lead-font-size: 1.25rem !default; -$lead-font-weight: 300 !default; - -$small-font-size: 80% !default; - -$text-muted: $gray-light !default; - -$abbr-border-color: $gray-light !default; - -$blockquote-small-color: $gray-light !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; -$blockquote-border-color: $gray-lighter !default; -$blockquote-border-width: .25rem !default; - -$hr-border-color: rgba($black,.1) !default; -$hr-border-width: $border-width !default; - -$mark-padding: .2em !default; - -$dt-font-weight: $font-weight-bold !default; - -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; - -$list-inline-padding: 5px !default; - - // Components // // Define common padding and border radius sizes and more. -$line-height-lg: (4 / 3) !default; -$line-height-sm: 1.5 !default; - $border-radius: 3px !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; - -$component-active-color: $white !default; -$component-active-bg: $brand-primary !default; - -$caret-width: .3em !default; - -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; - - -// Tables -// -// Customizes the `.table` component with basic values, each used across all table variations. - -$table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; - -$table-bg: transparent !default; - -$table-inverse-bg: $gray-dark !default; -$table-inverse-color: $body-bg !default; - -$table-bg-accent: rgba($black,.05) !default; -$table-bg-hover: rgba($black,.075) !default; -$table-bg-active: $table-bg-hover !default; - -$table-head-bg: $gray-lighter !default; -$table-head-color: $gray !default; - -$table-border-width: $border-width !default; -$table-border-color: $gray-lighter !default; - - -// Buttons -// -// For each of Bootstrap's buttons, define text, background and border color. - -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !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-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: $btn-primary-bg !default; - -$btn-secondary-color: $gray-dark !default; -$btn-secondary-bg: $white !default; -$btn-secondary-border: #ccc !default; - -$btn-info-color: $white !default; -$btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; - -$btn-success-color: $white !default; -$btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; - -$btn-warning-color: $white !default; -$btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; - -$btn-danger-color: $white !default; -$btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; - -$btn-link-disabled-color: $gray-light !default; - -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - -$btn-block-spacing-y: .5rem !default; -$btn-toolbar-margin: .5rem !default; - -// Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; - -$btn-transition: all .2s ease-in-out !default; - // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - -$input-bg: $white !default; -$input-bg-disabled: $gray-lighter !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($black,.075) !default; - -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; - -$input-bg-focus: $input-bg !default; $input-border-focus: $color-txt-hover-brd !default; -$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default; -$input-color-focus: $input-color !default; - -$input-color-placeholder: $gray-light !default; - -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; - -$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; - -$form-text-margin-top: .25rem !default; -$form-feedback-margin-top: $form-text-margin-top !default; - -$form-check-margin-bottom: .5rem !default; -$form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .25rem !default; -$form-check-input-margin-x: .25rem !default; - -$form-check-inline-margin-x: .75rem !default; - -$form-group-margin-bottom: $spacer-y !default; - -$input-group-addon-bg: $gray-lighter !default; -$input-group-addon-border-color: $input-border-color !default; - -$cursor-disabled: not-allowed !default; - -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-spacer-y: .25rem !default; - -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default; -$custom-control-indicator-bg: #ddd !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; - -$custom-control-disabled-cursor: $cursor-disabled !default; -$custom-control-disabled-indicator-bg: $gray-lighter !default; -$custom-control-disabled-description-color: $gray-light !default; - -$custom-control-checked-indicator-color: $white !default; -$custom-control-checked-indicator-bg: $brand-primary !default; -$custom-control-checked-indicator-box-shadow: none !default; - -$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; - -$custom-control-active-indicator-color: $white !default; -$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default; -$custom-control-active-indicator-box-shadow: none !default; - -$custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-checkbox-indeterminate-bg: $brand-primary !default; -$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; -$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indeterminate-box-shadow: none !default; - -$custom-radio-radius: 50% !default; -$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-select-padding-x: .75rem !default; -$custom-select-padding-y: .375rem !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-line-height !default; -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-light !default; -$custom-select-bg: $white !default; -$custom-select-disabled-bg: $gray-lighter !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: #333 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; $custom-select-focus-border-color: $input-border-focus !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; - -$custom-select-sm-padding-y: .2rem !default; -$custom-select-sm-font-size: 75% !default; - -$custom-file-height: 2.5rem !default; -$custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; - -$custom-file-padding-x: .5rem !default; -$custom-file-padding-y: 1rem !default; -$custom-file-line-height: 1.5 !default; -$custom-file-color: $gray !default; -$custom-file-bg: $white !default; -$custom-file-border-width: $border-width !default; -$custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $border-radius !default; -$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $gray-lighter !default; -$custom-file-text: ( - placeholder: ( - en: "Choose file..." - ), - button-label: ( - en: "Browse" - ) -) !default; - - -// Form validation icons -$form-icon-success-color: $brand-success !default; -$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$form-icon-warning-color: $brand-warning !default; -$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$form-icon-danger-color: $brand-danger !default; -$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default; - // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-margin-top: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black,.15) !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-lighter !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; - -$dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: #fff !default; $dropdown-link-hover-bg: $color-3 !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; - -$dropdown-link-disabled-color: $gray-light !default; - -$dropdown-item-padding-x: 1.5rem !default; - -$dropdown-header-color: $gray-light !default; - - -// Z-index master list -// -// Warning: Avoid customizing these values. They're used for a bird's eye view -// of components dependent on the z-axis and are designed to all work together. - -$zindex-dropdown-backdrop: 990 !default; -$zindex-navbar: 1000 !default; -$zindex-dropdown: 1000 !default; -$zindex-fixed: 1030 !default; -$zindex-sticky: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; - - -// Navbar - -$navbar-border-radius: $border-radius !default; -$navbar-padding-x: $spacer !default; -$navbar-padding-y: ($spacer / 2) !default; - -$navbar-brand-padding-y: .25rem !default; - -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-padding-y: .25rem !default; -$navbar-toggler-font-size: $font-size-lg !default; -$navbar-toggler-border-radius: $btn-border-radius !default; - -$navbar-inverse-color: rgba($white,.5) !default; -$navbar-inverse-hover-color: rgba($white,.75) !default; -$navbar-inverse-active-color: rgba($white,1) !default; -$navbar-inverse-disabled-color: rgba($white,.25) !default; -$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-inverse-toggler-border: rgba($white,.1) !default; - -$navbar-light-color: rgba($black,.5) !default; -$navbar-light-hover-color: rgba($black,.7) !default; -$navbar-light-active-color: rgba($black,.9) !default; -$navbar-light-disabled-color: rgba($black,.3) !default; -$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-light-toggler-border: rgba($black,.1) !default; - -// Navs - -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; -$nav-link-padding: .5em 1em !default; -$nav-link-hover-bg: $gray-lighter !default; -$nav-disabled-link-color: $gray-light !default; - -$nav-tabs-border-color: #ddd !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-lighter !default; -$nav-tabs-active-link-hover-color: $gray !default; -$nav-tabs-active-link-hover-bg: $body-bg !default; -$nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; - -$nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; - - -// Pagination - -$pagination-padding-x: .75rem !default; -$pagination-padding-y: .5rem !default; -$pagination-padding-x-sm: .5rem !default; -$pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-padding-y-lg: .75rem !default; -$pagination-line-height: 1.25 !default; - -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: #ddd !default; - -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; - -$pagination-active-color: $white !default; -$pagination-active-bg: $brand-primary !default; -$pagination-active-border: $brand-primary !default; - -$pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border: #ddd !default; - - -// Jumbotron - -$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: darken($state-success-bg, 5%) !default; - -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; -$state-info-border: 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: darken($state-warning-bg, 5%) !default; - -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; -$state-danger-border: darken($state-danger-bg, 5%) !default; - - -// Cards - -$card-spacer-x: 1.25rem !default; -$card-spacer-y: .75rem !default; -$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-bg: $white !default; - -$card-link-hover-color: $white !default; - -$card-img-overlay-padding: 1.25rem !default; - -$card-deck-margin: ($grid-gutter-width-base / 2) !default; - -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; - - -// Tooltips - -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: 3px !default; -$tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; - -$tooltip-arrow-width: 5px !default; -$tooltip-arrow-color: $tooltip-bg !default; - - -// Popovers - -$popover-inner-padding: 1px !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba($black,.2) !default; -$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; - -$popover-title-bg: darken($popover-bg, 3%) !default; -$popover-title-padding-x: 14px !default; -$popover-title-padding-y: 8px !default; - -$popover-content-padding-x: 14px !default; -$popover-content-padding-y: 9px !default; - -$popover-arrow-width: 10px !default; -$popover-arrow-color: $popover-bg !default; - -$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; - - // Badges $badge-default-bg: $color-7 !default; -$badge-primary-bg: $brand-primary !default; -$badge-success-bg: $brand-success !default; -$badge-info-bg: $brand-info !default; -$badge-warning-bg: $brand-warning !default; -$badge-danger-bg: $brand-danger !default; - -$badge-color: $white !default; -$badge-link-hover-color: $white !default; -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-x: .4em !default; -$badge-padding-y: .25em !default; - -$badge-pill-padding-x: .6em !default; -// Use a higher than normal value to ensure completely rounded edges when -// customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; - - -// Modals - -// Padding applied to the modal body -$modal-inner-padding: 15px !default; - -$modal-dialog-margin: 10px !default; -$modal-dialog-sm-up-margin-y: 30px !default; - -$modal-title-line-height: $line-height-base !default; - -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black,.2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default; -$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default; - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-lighter !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 15px !default; - -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; - -$modal-transition: transform .3s ease-out !default; - - -// Alerts -// -// Define alert colors, border radius, and padding. - -$alert-padding-x: 1.25rem !default; -$alert-padding-y: .75rem !default; -$alert-margin-bottom: $spacer-y !default; -$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: $state-success-border !default; - -$alert-info-bg: $state-info-bg !default; -$alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; - -$alert-warning-bg: $state-warning-bg !default; -$alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; - -$alert-danger-bg: $state-danger-bg !default; -$alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; - - -// Progress bars - -$progress-height: 1rem !default; -$progress-font-size: .75rem !default; -$progress-bg: $gray-lighter !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; -$progress-bar-color: $white !default; -$progress-bar-bg: $brand-primary !default; -$progress-bar-animation-timing: 1s linear infinite !default; - -// List group - -$list-group-color: $body-color !default; -$list-group-bg: $white !default; -$list-group-border-color: rgba($black,.125) !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-x: 1.25rem !default; -$list-group-item-padding-y: .75rem !default; - -$list-group-hover-bg: $gray-lightest !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default; - -$list-group-disabled-color: $gray-light !default; -$list-group-disabled-bg: $list-group-bg !default; -$list-group-disabled-text-color: $list-group-disabled-color !default; - -$list-group-link-color: $gray !default; -$list-group-link-heading-color: $gray-dark !default; -$list-group-link-hover-color: $list-group-link-color !default; - -$list-group-link-active-color: $list-group-color !default; -$list-group-link-active-bg: $gray-lighter !default; - - -// Image thumbnails - -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: #ddd !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default; -$thumbnail-transition: all .2s ease-in-out !default; - - -// Figures - -$figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-light !default; - // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; - $breadcrumb-bg: transparent !default; -$breadcrumb-divider-color: $gray-light !default; $breadcrumb-active-color: $color-4 !default; -$breadcrumb-divider: "/" !default; - - -// Carousel - -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; - -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; - -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; - -$carousel-control-icon-width: 20px !default; - -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$carousel-transition: transform .6s ease-in-out !default; - - -// Close - -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - - -// Code - -$code-font-size: 90% !default; -$code-padding-x: .4rem !default; -$code-padding-y: .2rem !default; -$code-color: #bd4147 !default; -$code-bg: $gray-lightest !default; - -$kbd-color: $white !default; -$kbd-bg: $gray-dark !default; - -$pre-bg: $gray-lightest !default; -$pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; -$pre-scrollable-max-height: 340px !default; From 0d429e313291a802eb0de1d1a171b4914acfc30e Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 13:49:34 -0700 Subject: [PATCH 02/12] Use Bootstrap's navbar z-index value --- .../stylesheets/spree/backend/components/_navigation.scss | 2 +- .../assets/stylesheets/spree/backend/globals/_variables.scss | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss index 59cc7d0ee76..524ac5b0637 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss @@ -28,7 +28,7 @@ nav.menu { .admin-nav { border-right: $border-sidebar; background: $color-sidebar-bg; - z-index: $z-index-navbar-flyout; + z-index: $zindex-navbar; } .admin-nav-header { diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 454286e4f2f..bda54af150d 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -238,10 +238,6 @@ $font-weight-normal: 400 !default; $width-sidebar: 200px !default; $width-sidebar-flyout: 225px !default; -// Stacking -//-------------------------------------------------------------- -$z-index-navbar-flyout: 1000 !default; - // Sidebar //-------------------------------------------------------------- $border-sidebar: 1px solid $color-sidebar-border !default; From 69777be281150e6c25c6b39f4ae11f8093fec90d Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:15:43 -0700 Subject: [PATCH 03/12] Move font weight variables to Bootstrap override These are Bootstrap variables so they should reside in our `bootstrap_custom` override file. --- .../assets/stylesheets/spree/backend/_bootstrap_custom.scss | 3 +++ .../assets/stylesheets/spree/backend/globals/_variables.scss | 3 --- 2 files changed, 3 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 6d724d3661e..88bdbb067d1 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -44,6 +44,9 @@ $font-family-base: $base-font-family !default; $font-size-root: $body-font-size !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 600 !default; + $font-size-h1: $h1-size !default; $font-size-h2: $h2-size !default; $font-size-h3: $h3-size !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index bda54af150d..4c47db12290 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -232,9 +232,6 @@ $h2-size: $h3-size + 2 !default; @include solidus-deprecated-variable("h1-size", "font-size-h1"); $h1-size: $h2-size + 2 !default; -$font-weight-bold: 600 !default; -$font-weight-normal: 400 !default; - $width-sidebar: 200px !default; $width-sidebar-flyout: 225px !default; From 379064d988fdc6a9ead6362d56ccfbd334f76fb3 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:19:09 -0700 Subject: [PATCH 04/12] Remove superfluous link color Sass variables These color values can be applied directly to our Boostrap override. --- .../assets/stylesheets/spree/backend/_bootstrap_custom.scss | 4 ++-- .../stylesheets/spree/backend/globals/_variables.scss | 6 ------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index 88bdbb067d1..576b65512c1 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -23,9 +23,9 @@ $body-color: $color-body-text !default; // // Style anchor elements. -$link-color: $color-link !default; +$link-color: $color-3 !default; $link-decoration: none !default; -$link-hover-color: $color-link-hover !default; +$link-hover-color: $color-2 !default; $link-hover-decoration: none !default; // Grid columns diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 4c47db12290..4e33bd977c6 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -30,12 +30,6 @@ $color-body-bg: $color-1 !default; $color-body-text: $color-4 !default; @include solidus-deprecated-variable("color-headers", "headings-color"); $color-headers: $color-4 !default; -@include solidus-deprecated-variable("color-link", "link-color"); -$color-link: $color-3 !default; -@include solidus-deprecated-variable("color-link-hover", "link-hover-color"); -$color-link-hover: $color-2 !default; -@include solidus-deprecated-variable("color-link-focus", "link-hover-color"); -$color-link-focus: $color-2 !default; $color-border: very-light($color-3, 12) !default; // Basic navigation colors From 591b8623062a933f3b95f15b185506d33865ce06 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:26:26 -0700 Subject: [PATCH 05/12] Remove Sass variables that we previously deprecated These are no longer necessary and can be set directly in our Bootstrap override. --- .../stylesheets/spree/backend/_bootstrap_custom.scss | 8 ++++---- .../stylesheets/spree/backend/globals/_variables.scss | 10 +--------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index 576b65512c1..aa614524874 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -16,8 +16,8 @@ $brand-danger: $color-5 !default; // // Settings for the `` element. -$body-bg: $color-body-bg !default; -$body-color: $color-body-text !default; +$body-bg: $color-1 !default; +$body-color: $color-4 !default; // Links // @@ -40,7 +40,7 @@ $grid-gutter-width-base: 1.875rem !default; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; -$font-family-base: $base-font-family !default; +$font-family-base: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; $font-size-root: $body-font-size !default; @@ -55,7 +55,7 @@ $font-size-h5: $h5-size !default; $font-size-h6: $h6-size !default; $headings-font-weight: $font-weight-bold !default; -$headings-color: $color-headers !default; +$headings-color: $color-4 !default; // Components // diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 4e33bd977c6..760b70c6e32 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -4,8 +4,6 @@ // Fonts //-------------------------------------------------------------- -@include solidus-deprecated-variable("base-font-family", "font-family-base"); -$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default; $font-size-pill: 11px; // Colors @@ -24,16 +22,10 @@ $color-7: #F4F4F4 !default; // Light Gray $box-shadow: 0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default; // Body base colors -@include solidus-deprecated-variable("color-body-bg", "body-bg"); -$color-body-bg: $color-1 !default; -@include solidus-deprecated-variable("color-body-text", "body-color"); -$color-body-text: $color-4 !default; -@include solidus-deprecated-variable("color-headers", "headings-color"); -$color-headers: $color-4 !default; $color-border: very-light($color-3, 12) !default; // Basic navigation colors -$color-sidebar-bg: $color-body-bg !default; +$color-sidebar-bg: $color-1 !default; $color-sidebar-border: $color-border !default; $color-navbar: $color-1 !default; $color-navbar-bg: $color-3 !default; From 1e85084959cb8a2949b7933cc2acd8ccb3450388 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:31:07 -0700 Subject: [PATCH 06/12] Remove deprecated heading font size Sass variables These should be set directly in our Bootstrap override. This will also allow us to more easily change this in the near future. --- .../spree/backend/_bootstrap_custom.scss | 12 ++++++------ .../spree/backend/globals/_variables.scss | 13 ------------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index aa614524874..c3c8cdd2fb0 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -47,12 +47,12 @@ $font-size-root: $body-font-size !default; $font-weight-normal: 400 !default; $font-weight-bold: 600 !default; -$font-size-h1: $h1-size !default; -$font-size-h2: $h2-size !default; -$font-size-h3: $h3-size !default; -$font-size-h4: $h4-size !default; -$font-size-h5: $h5-size !default; -$font-size-h6: $h6-size !default; +$font-size-h1: $body-font-size + 12 !default; +$font-size-h2: $body-font-size + 10 !default; +$font-size-h3: $body-font-size + 8 !default; +$font-size-h4: $body-font-size + 6 !default; +$font-size-h5: $body-font-size + 4 !default; +$font-size-h6: $body-font-size + 2 !default; $headings-font-weight: $font-weight-bold !default; $headings-color: $color-4 !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 760b70c6e32..50c7e80a0bf 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -205,19 +205,6 @@ $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-act @include solidus-deprecated-variable("body-font-size", "font-size-root"); $body-font-size: 13px !default; -@include solidus-deprecated-variable("h6-size", "font-size-h6"); -$h6-size: $body-font-size + 2 !default; -@include solidus-deprecated-variable("h5-size", "font-size-h5"); -$h5-size: $h6-size + 2 !default; -@include solidus-deprecated-variable("h4-size", "font-size-h4"); -$h4-size: $h5-size + 2 !default; -@include solidus-deprecated-variable("h3-size", "font-size-h3"); -$h3-size: $h4-size + 2 !default; -@include solidus-deprecated-variable("h2-size", "font-size-h2"); -$h2-size: $h3-size + 2 !default; -@include solidus-deprecated-variable("h1-size", "font-size-h1"); -$h1-size: $h2-size + 2 !default; - $width-sidebar: 200px !default; $width-sidebar-flyout: 225px !default; From cb1c70ceb3b3f345a0588ba75d99954f1473786f Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:33:03 -0700 Subject: [PATCH 07/12] Remove the deprecated body font size Sass variable Bootstrap already provides a variable for us to override so we should use that instead. --- .../spree/backend/_bootstrap_custom.scss | 14 +++++++------- .../spree/backend/globals/_variables.scss | 9 +-------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index c3c8cdd2fb0..7231f5dffb1 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -42,17 +42,17 @@ $font-family-sans-serif: "Helvetica Neue", 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-size-root: $body-font-size !default; +$font-size-root: 13px !default; $font-weight-normal: 400 !default; $font-weight-bold: 600 !default; -$font-size-h1: $body-font-size + 12 !default; -$font-size-h2: $body-font-size + 10 !default; -$font-size-h3: $body-font-size + 8 !default; -$font-size-h4: $body-font-size + 6 !default; -$font-size-h5: $body-font-size + 4 !default; -$font-size-h6: $body-font-size + 2 !default; +$font-size-h1: $font-size-root + 12 !default; +$font-size-h2: $font-size-root + 10 !default; +$font-size-h3: $font-size-root + 8 !default; +$font-size-h4: $font-size-root + 6 !default; +$font-size-h5: $font-size-root + 4 !default; +$font-size-h6: $font-size-root + 2 !default; $headings-font-weight: $font-weight-bold !default; $headings-color: $color-4 !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 50c7e80a0bf..6d94c844e09 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -199,17 +199,10 @@ $actions: edit, clone, remove, void, capture, save, cancel, mail, failure !defau $actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg, $color-action-failure-bg !default; $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd, $color-action-failure-brd !default; -// Sizes +// Sidebar //-------------------------------------------------------------- - -@include solidus-deprecated-variable("body-font-size", "font-size-root"); -$body-font-size: 13px !default; - $width-sidebar: 200px !default; $width-sidebar-flyout: 225px !default; - -// Sidebar -//-------------------------------------------------------------- $border-sidebar: 1px solid $color-sidebar-border !default; // Main From bc2b9b9f2c98310287ec9201c5b830befd3164d6 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 15:57:43 -0700 Subject: [PATCH 08/12] Deprecate the state component Now that we have the Pill component there should be no area in the system that uses the old state component. As a fallback we can `@extend` the new Pill component in an effort to help out some stores that may have some customizations. --- .../spree/backend/components/_pills.scss | 5 +- .../spree/backend/components/_states.scss | 23 +---- .../spree/backend/globals/_variables.scss | 99 +++++-------------- .../spree/backend/sections/_style_guide.scss | 7 -- .../spree/admin/style_guide_controller.rb | 3 +- .../topics/typography/_tags.html.erb | 25 ----- 6 files changed, 34 insertions(+), 128 deletions(-) delete mode 100644 backend/app/views/spree/admin/style_guide/topics/typography/_tags.html.erb diff --git a/backend/app/assets/stylesheets/spree/backend/components/_pills.scss b/backend/app/assets/stylesheets/spree/backend/components/_pills.scss index 3f2c818c51b..49468368d1c 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_pills.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_pills.scss @@ -7,7 +7,7 @@ color: $color-pill-neutral-text; white-space: nowrap; - $states: ( + $pill-states: ( complete: ( background: $color-pill-complete, color: $color-pill-complete-text @@ -34,7 +34,7 @@ ) ); - @each $name, $colors in $states { + @each $name, $colors in $pill-states { &-#{$name} { background: map-get($colors, background); color: map-get($colors, color); @@ -59,6 +59,7 @@ .pill-partial, .pill-payment, .pill-processing, +.pill-ready, .pill-resumed { @extend .pill-pending; } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_states.scss b/backend/app/assets/stylesheets/spree/backend/components/_states.scss index 2b5eccb6a41..6ae12080a83 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_states.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_states.scss @@ -1,24 +1,11 @@ +// The state component has been deprecated in favour of Pills. This will be +// removed in a future version of Solidus. .state { - font-size: 90%; - font-weight: $font-weight-bold; - - &:before { - content: ''; - position: relative; - display: inline-block; - margin-right: 3px; - border-radius: $font-size-root/2; - width: $font-size-root - 4px; - height: $font-size-root - 4px; - } + @extend .pill; @each $state in $states { - &.#{$state}:before { - background-color: get-value($states, $states-bg-colors, $state); - - // &, a { - // color: get-value($states, $states-text-colors, $state); - // } + &.#{$state} { + @extend .pill-#{$state}; } } } diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 6d94c844e09..956e7550561 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -118,81 +118,32 @@ $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 -$color-ste-complete-bg: $color-success !default; -$color-ste-complete-text: $color-1 !default; -$color-ste-completed-bg: $color-success !default; -$color-ste-completed-text: $color-1 !default; -$color-ste-sold-bg: $color-success !default; -$color-ste-sold-text: $color-1 !default; -$color-ste-pending-bg: $color-notice !default; -$color-ste-pending-text: $color-1 !default; -$color-ste-awaiting_return-bg: $color-notice !default; -$color-ste-awaiting_return-text: $color-1 !default; -$color-ste-returned-bg: $color-notice !default; -$color-ste-returned-text: $color-1 !default; -$color-ste-credit_owed-bg: $color-notice !default; -$color-ste-credit_owed-text: $color-1 !default; -$color-ste-paid-bg: $color-success !default; -$color-ste-paid-text: $color-1 !default; -$color-ste-shipped-bg: $color-success !default; -$color-ste-shipped-text: $color-1 !default; -$color-ste-balance_due-bg: $color-notice !default; -$color-ste-balance_due-text: $color-1 !default; -$color-ste-backorder-bg: $color-notice !default; -$color-ste-backorder-text: $color-1 !default; -$color-ste-none-bg: $color-error !default; -$color-ste-none-text: $color-1 !default; -$color-ste-ready-bg: $color-success !default; -$color-ste-ready-text: $color-1 !default; -$color-ste-void-bg: $color-error !default; -$color-ste-void-text: $color-1 !default; -$color-ste-canceled-bg: $color-error !default; -$color-ste-canceled-text: $color-1 !default; -$color-ste-failed-bg: $color-error !default; -$color-ste-failed-text: $color-1 !default; -$color-ste-address-bg: $color-error !default; -$color-ste-address-text: $color-1 !default; -$color-ste-checkout-bg: $color-notice !default; -$color-ste-checkout-text: $color-1 !default; -$color-ste-cart-bg: $color-notice !default; -$color-ste-cart-text: $color-1 !default; -$color-ste-payment-bg: $color-error !default; -$color-ste-payment-text: $color-1 !default; -$color-ste-delivery-bg: $color-success !default; -$color-ste-delivery-text: $color-1 !default; -$color-ste-confirm-bg: $color-error !default; -$color-ste-confirm-text: $color-1 !default; -$color-ste-active-bg: $color-success !default; -$color-ste-active-text: $color-1 !default; -$color-ste-inactive-bg: $color-notice !default; -$color-ste-inactive-text: $color-1 !default; -$color-ste-considered_risky-bg: $color-error !default; -$color-ste-considered_risky-text:$color-1 !default; -$color-ste-considered_safe-bg: $color-success !default; -$color-ste-considered_safe-text: $color-1 !default; -$color-ste-success-bg: $color-success !default; -$color-ste-success-text: $color-1 !default; -$color-ste-notice-bg: $color-notice !default; -$color-ste-notice-text: $color-1 !default; -$color-ste-error-bg: $color-error !default; -$color-ste-error-text: $color-1 !default; - // Available states -$states: completed, complete, sold, pending, awaiting_return, returned, credit_owed, paid, shipped, balance_due, backorder, checkout, cart, address, -delivery, payment, confirm, canceled, failed, ready, void, active, inactive, considered_risky, considered_safe, success, notice, error !default; - -$states-bg-colors: $color-ste-completed-bg, $color-ste-complete-bg, $color-ste-sold-bg, $color-ste-pending-bg, $color-ste-awaiting_return-bg, -$color-ste-returned-bg, $color-ste-credit_owed-bg, $color-ste-paid-bg, $color-ste-shipped-bg, $color-ste-balance_due-bg, $color-ste-backorder-bg, -$color-ste-checkout-bg, $color-ste-cart-bg, $color-ste-address-bg, $color-ste-delivery-bg, $color-ste-payment-bg, $color-ste-confirm-bg, -$color-ste-canceled-bg, $color-ste-failed-bg, $color-ste-ready-bg, $color-ste-void-bg, $color-ste-active-bg, $color-ste-inactive-bg, $color-ste-considered_risky-bg, -$color-ste-considered_safe-bg, $color-ste-success-bg, $color-ste-notice-bg, $color-ste-error-bg !default; - -$states-text-colors: $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-awaiting_return-text, -$color-ste-returned-text, $color-ste-credit_owed-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text, -$color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirm-text, -$color-ste-canceled-text, $color-ste-failed-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-active-text, $color-ste-inactive-text, $color-ste-considered_risky-text, -$color-ste-considered_safe-text, $color-ste-success-text, $color-ste-notice-text, $color-ste-error-text !default; +$states: ( + active, + address, + awaiting_return, + backorder, + balance_due, + canceled, + cart, + checkout, + complete, + completed, + confirm, + credit_owed, + delivery, + error, + failed, + inactive, + paid, + payment, + pending, + ready, + returned, + shipped, + void +) !default; // Available actions $actions: edit, clone, remove, void, capture, save, cancel, mail, failure !default; 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 763f2b5be71..146090a8823 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss @@ -135,10 +135,3 @@ border: 1px solid darken($color-7, 10%); } } - -.tags { - .state { - width: 33%; - float: left; - } -} diff --git a/backend/app/controllers/spree/admin/style_guide_controller.rb b/backend/app/controllers/spree/admin/style_guide_controller.rb index a739470036e..60db5f8fe28 100644 --- a/backend/app/controllers/spree/admin/style_guide_controller.rb +++ b/backend/app/controllers/spree/admin/style_guide_controller.rb @@ -10,8 +10,7 @@ def index 'fonts', 'colors', 'lists', - 'icons', - 'tags' + 'icons' ], forms: [ 'building_forms', diff --git a/backend/app/views/spree/admin/style_guide/topics/typography/_tags.html.erb b/backend/app/views/spree/admin/style_guide/topics/typography/_tags.html.erb deleted file mode 100644 index b8c966890b3..00000000000 --- a/backend/app/views/spree/admin/style_guide/topics/typography/_tags.html.erb +++ /dev/null @@ -1,25 +0,0 @@ -<%- snippet = capture do %> - ready - - complete - completed - balance due - pending - checkout - credit owed - void - address -<%- end %> - -
-

- 3 different visual states to describe ok/success, warnings and errors. -

-

- <%= snippet %> -

-
- -
-
<%= escape_once snippet %>
-
From 137aa75c76478ee099d8351e20f91c4a335bfcbc Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Tue, 1 Aug 2017 16:00:54 -0700 Subject: [PATCH 09/12] Remove deprecated text field Sass variables --- .../stylesheets/spree/backend/_bootstrap_custom.scss | 6 +++--- .../stylesheets/spree/backend/globals/_variables.scss | 8 -------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index 7231f5dffb1..97e8980c5af 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -65,9 +65,9 @@ $border-radius: 3px !default; // Forms -$input-color: $color-txt-text !default; -$input-border-color: $color-txt-brd !default; -$input-border-focus: $color-txt-hover-brd !default; +$input-color: $color-3 !default; +$input-border-color: $color-border !default; +$input-border-focus: $color-2 !default; $custom-select-focus-border-color: $input-border-focus !default; diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 956e7550561..fbf1ab3a666 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -110,14 +110,6 @@ $color-sel-hover-text: $color-1 !default; $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; - // Available states $states: ( active, From 76a355dd9583965bba6c01542eab35ce0b17bce6 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Wed, 2 Aug 2017 09:45:37 -0700 Subject: [PATCH 10/12] Remove unused Select2 Sass variables These aren't being used anywhere in the admin so we should remove them. --- .../stylesheets/spree/backend/globals/_variables.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index fbf1ab3a666..19ebb071be1 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -102,14 +102,6 @@ $color-action-mail-brd: very-light($color-success, 20 ) !default; $color-action-failure-bg: very-light($color-error, 10 ) !default; $color-action-failure-brd: very-light($color-error, 20 ) !default; -// Select2 select field colors -$color-sel-bg: $color-3 !default; -$color-sel-text: $color-1 !default; -$color-sel-hover-bg: $color-2 !default; -$color-sel-hover-text: $color-1 !default; -$color-sel-disabled-bg: $color-7 !default; -$color-sel-disabled-text: $color-4 !default; - // Available states $states: ( active, From 004c7d01670186ac41d00fe8c4c0fc60393415a4 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Wed, 2 Aug 2017 09:46:41 -0700 Subject: [PATCH 11/12] Remove unused admin button Sass variables --- .../stylesheets/spree/backend/globals/_variables.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 19ebb071be1..1c9828ada52 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -34,7 +34,6 @@ $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-submenu-active-bg: $color-navbar-submenu-bg !default; $color-navbar-footer: $color-3 !default; $color-navbar-footer-bg: $color-sidebar-bg !default; $color-navbar-footer-active: $color-2 !default; @@ -55,12 +54,6 @@ $color-tbl-odd: $color-1 !default; $color-tbl-even: very-light($color-3, 4) !default; $color-tbl-thead: very-light($color-3, 4) !default; -// Button colors -$color-btn-bg: $color-3 !default; -$color-btn-text: $color-1 !default; -$color-btn-hover-bg: $color-2 !default; -$color-btn-hover-text: $color-1 !default; - // Pill colors // // For now these are custom assigned colors just for this section. As we go From 546825aec7884088dc3e29161597ab93b087c846 Mon Sep 17 00:00:00 2001 From: Gray Gilmore Date: Wed, 2 Aug 2017 10:28:18 -0700 Subject: [PATCH 12/12] Use better color naming for style guide Sass variables Instead of referring to generic `$color-1` variables we should be using explicitly named Sass variables. --- .../spree/backend/globals/_variables.scss | 10 ++++++++++ .../spree/backend/sections/_style_guide.scss | 16 ++++++++-------- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 1c9828ada52..261f7028a68 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -49,6 +49,16 @@ $color-error: $color-5 !default; // Color for spinner $color-spinner: #fff; +// 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%); + // Table colors $color-tbl-odd: $color-1 !default; $color-tbl-even: very-light($color-3, 4) !default; 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 146090a8823..66d957bbd23 100644 --- a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss +++ b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss @@ -4,7 +4,7 @@ &-sidebar { width: 225px; - background: $color-7; + background: $color-style-guide-nav; padding: 1.5rem; .brand-link { @@ -41,7 +41,7 @@ @include padding(0.75rem null); &:not(:first-of-type) { - border-top: 1px solid darken($color-7, 5%); + border-top: 1px solid $color-style-guide-nav-border; } > a { @@ -52,11 +52,11 @@ a { display: block; - color: darken($color-7, 65%); + color: $color-style-guide-nav-link; padding: 0.3rem 0.5rem; &:hover { - background: darken($color-7, 5%); + background: $color-style-guide-nav-link-hover; } } } @@ -68,7 +68,7 @@ &-section-header { @include margin(7rem 0 3rem); - border-bottom: 1px solid darken($color-7, 10%); + border-bottom: 1px solid $color-style-guide-section-border; font-size: 1.5rem; font-weight: bold; line-height: 0.2; @@ -81,7 +81,7 @@ } a { - color: darken($color-7, 65%); + color: $color-style-guide-link; } } @@ -101,7 +101,7 @@ &-code { pre { margin: 0; - border: 1px solid darken($color-7, 10%); + border: 1px solid $color-style-guide-code; } } @@ -132,6 +132,6 @@ .color-swatch { height: 50px; - border: 1px solid darken($color-7, 10%); + border: 1px solid $color-style-guide-swatch-border; } }