openfoodfoundation/openfoodnetwork

View on GitHub
app/webpacker/css/admin/globals/variables.scss

Summary

Maintainability
Test Coverage
// -------------------------------------------------------------
//   Variables used in all other files
//--------------------------------------------------------------

// Fonts
//--------------------------------------------------------------
$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

// Colors
//--------------------------------------------------------------

// Body base colors
$color-body-bg:                  $color-1 !default;
$color-body-text:                $color-4 !default;
$color-headers:                  $color-4 !default;
$color-link:                     $color-3 !default;
$color-link-hover:               $color-2 !default;
$color-link-active:              $color-2 !default;
$color-link-focus:               $color-2 !default;
$color-link-visited:             $color-3 !default;
$color-border:                   very-light($color-3, 12) !default;

// Basic flash colors
$color-success:                  $color-2 !default;
$color-notice:                   $color-6 !default;
$color-warning:                  $color-5 !default;
$color-error:                    $color-5 !default;

// 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-border:               $pale-blue !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;
$color-btn-disabled-bg:          $light-grey !default;

// Actions colors
$color-action-edit-bg:           very-light($color-success, 5  ) !default;
$color-action-edit-brd:          very-light($color-success, 20 ) !default;
$color-action-clone-bg:          very-light($color-notice,  5  ) !default;
$color-action-clone-brd:         very-light($color-notice,  15 ) !default;
$color-action-remove-bg:         very-light($color-error,   5  ) !default;
$color-action-remove-brd:        very-light($color-error,   10 ) !default;
$color-action-void-bg:           very-light($color-error,   10 ) !default;
$color-action-void-brd:          very-light($color-error,   20 ) !default;
$color-action-cancel-bg:         very-light($color-notice,  10 ) !default;
$color-action-cancel-brd:        very-light($color-notice,  20 ) !default;
$color-action-capture-bg:        very-light($color-success, 5  ) !default;
$color-action-capture-brd:       very-light($color-success, 20 ) !default;
$color-action-save-bg:           very-light($color-success, 5  ) !default;
$color-action-save-brd:          very-light($color-success, 20 ) !default;
$color-action-mail-bg:           very-light($color-success, 5  ) !default;
$color-action-mail-brd:          very-light($color-success, 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;

// Text inputs colors
$color-txt-brd:                  $color-border !default;
$color-txt-text:                 $color-3 !default;
$color-txt-hover-brd:            $color-2 !default;
$vpadding-txt:                   7px;
$hpadding-txt:                   10px;

// Modal colors
$color-modal-close-btn:          $color-5 !default;
$color-modal-close-btn-hover:    darken($color-5, 5%) !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-requires_authorization-bg: $color-notice !default;
$color-ste-requires_authorization-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-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-confirmation-bg:      $color-error !default;
$color-ste-confirmation-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;

// Available states
$states:                      completed,                 complete,                 sold,                 pending,                 awaiting_return,                 returned,                 credit_owed,                 paid,                 shipped,                 balance_due,                 backorder,                 checkout,                 cart,                 address,                 delivery,                 payment,                 confirmation,                 canceled,                 ready,                 void,                 requires_authorization,                 active,                 inactive  !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-confirmation-bg,   $color-ste-canceled-bg,   $color-ste-ready-bg,   $color-ste-void-bg,   $color-ste-requires_authorization-bg,   $color-ste-active-bg,   $color-ste-inactive-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-confirmation-text, $color-ste-canceled-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-requires_authorization-text, $color-ste-active-text, $color-ste-inactive-text !default;

// Available actions
$actions:                        edit,                   clone,                   remove,                   void,                   capture,                   save,                      cancel,                   mail  !default;
$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  !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 !default;

// Sizes
//--------------------------------------------------------------
$body-font-size:                 13px !default;

$h6-size:                        $body-font-size + 2 !default;
$h5-size:                        $h6-size + 2 !default;
$h4-size:                        $h5-size + 2 !default;
$h3-size:                        $h4-size + 2 !default;
$h2-size:                        $h3-size + 2 !default;
$h1-size:                        $h2-size + 2 !default;

$border-radius:                  3px !default;

$font-weight-bold:               600 !default;
$font-weight-normal:             400 !default;

// z-index
//--------------------------------------------------------------
$tos-banner-z-index: 102;