mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
193 lines
11 KiB
SCSS
193 lines
11 KiB
SCSS
// -------------------------------------------------------------
|
|
// Variables used in all other files
|
|
//--------------------------------------------------------------
|
|
|
|
// Fonts
|
|
//--------------------------------------------------------------
|
|
$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
|
|
|
// Styles
|
|
//--------------------------------------------------------------
|
|
|
|
// Body base colors
|
|
$color-body-bg: $white !default;
|
|
$color-body-text: $near-black !default;
|
|
$color-headers: $near-black !default;
|
|
$color-link: $teal !default;
|
|
$color-link-hover: $orient !default;
|
|
$color-link-active: $dark-blue !default;
|
|
$color-link-focus: $orient !default;
|
|
$color-link-visited: $teal !default;
|
|
$color-border: $light-grey !default;
|
|
|
|
// Basic flash colors
|
|
$color-success: $green !default;
|
|
$color-notice: $yellow !default;
|
|
$color-warning: $red !default;
|
|
$color-error: $red !default;
|
|
$color-flash-success-text: $white !default;
|
|
$color-flash-success-bg: $near-black !default;
|
|
$color-flash-notice-text: $color-body-text !default;
|
|
$color-flash-notice-bg: $fair-pink !default;
|
|
$color-flash-error-text: $white !default;
|
|
$color-flash-error-bg: $color-error !default;
|
|
|
|
// Table styles
|
|
$color-tbl-bg: $light-grey !default;
|
|
$color-tbl-cell-bg: $white !default;
|
|
$color-tbl-cell-shadow: rgb(0, 0, 0, 0.15) !default;
|
|
$color-tbl-thead-txt: $color-headers !default;
|
|
$color-tbl-thead-bg: $light-grey !default;
|
|
$color-tbl-border: $pale-blue !default;
|
|
$padding-tbl-cell: 12px;
|
|
$padding-tbl-cell-condensed: 4px 3px;
|
|
$padding-tbl-cell-relaxed: 8px 3px;
|
|
|
|
// Button colors
|
|
$color-btn-bg: $teal !default;
|
|
$color-btn-text: $white !default;
|
|
$color-btn-hover-bg: $orient !default;
|
|
$color-btn-hover-text: $white !default;
|
|
$color-btn-hover-border: $dark-blue !default;
|
|
$color-btn-disabled-bg: $medium-grey !default;
|
|
$color-btn-disabled-text: $lighter-grey !default;
|
|
$color-btn-red-bg: $red !default;
|
|
$color-btn-red-hover-bg: $roof-terracotta !default;
|
|
$color-btn-secondary-bg: $white !default;
|
|
$color-btn-secondary-hover-bg: $mystic !default;
|
|
|
|
// Actions colors
|
|
$color-action-edit-bg: very-light($teal) !default;
|
|
$color-action-edit-brd: #81B4BC !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;
|
|
|
|
// Dropdown styles
|
|
$shadow-dropdown: 0px 0px 8px 0px rgba($near-black, 0.25);
|
|
|
|
// Select2 select field colors
|
|
$color-sel-bg: $lighter-grey !default;
|
|
$color-sel-hover-bg: $lighter-grey !default;
|
|
|
|
// Text inputs styles
|
|
$color-txt-bg: $lighter-grey !default;
|
|
$color-txt-brd: $dark-grey !default;
|
|
$color-txt-text: $near-black !default;
|
|
$color-txt-hover-brd: $teal !default;
|
|
$color-txt-disabled-text: $medium-grey !default;
|
|
$color-txt-disabled-brd: $light-grey !default;
|
|
$color-txt-changed-brd: $bright-orange !default;
|
|
$vpadding-txt: 5px;
|
|
$hpadding-txt: 8px;
|
|
|
|
// Checkboxes
|
|
$color-checkbox-brd: $near-black !default;
|
|
$color-checkbox-fill: $teal !default;
|
|
|
|
// 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: $white !default;
|
|
$color-ste-completed-bg: $color-success !default;
|
|
$color-ste-completed-text: $white !default;
|
|
$color-ste-sold-bg: $color-success !default;
|
|
$color-ste-sold-text: $white !default;
|
|
$color-ste-pending-bg: $color-notice !default;
|
|
$color-ste-pending-text: $white !default;
|
|
$color-ste-requires_authorization-bg: $color-notice !default;
|
|
$color-ste-requires_authorization-text: $white !default;
|
|
$color-ste-awaiting_return-bg: $color-notice !default;
|
|
$color-ste-awaiting_return-text: $white !default;
|
|
$color-ste-returned-bg: $color-notice !default;
|
|
$color-ste-returned-text: $white !default;
|
|
$color-ste-credit_owed-bg: $color-notice !default;
|
|
$color-ste-credit_owed-text: $white !default;
|
|
$color-ste-paid-bg: $color-success !default;
|
|
$color-ste-paid-text: $white !default;
|
|
$color-ste-shipped-bg: $color-success !default;
|
|
$color-ste-shipped-text: $white !default;
|
|
$color-ste-balance_due-bg: $color-notice !default;
|
|
$color-ste-balance_due-text: $white !default;
|
|
$color-ste-backorder-bg: $color-notice !default;
|
|
$color-ste-backorder-text: $white !default;
|
|
$color-ste-none-bg: $color-error !default;
|
|
$color-ste-none-text: $white !default;
|
|
$color-ste-ready-bg: $color-success !default;
|
|
$color-ste-ready-text: $white !default;
|
|
$color-ste-void-bg: $color-error !default;
|
|
$color-ste-void-text: $white !default;
|
|
$color-ste-canceled-bg: $color-error !default;
|
|
$color-ste-canceled-text: $white !default;
|
|
$color-ste-address-bg: $color-error !default;
|
|
$color-ste-address-text: $white !default;
|
|
$color-ste-checkout-bg: $color-notice !default;
|
|
$color-ste-checkout-text: $white !default;
|
|
$color-ste-cart-bg: $color-notice !default;
|
|
$color-ste-cart-text: $white !default;
|
|
$color-ste-payment-bg: $color-error !default;
|
|
$color-ste-payment-text: $white !default;
|
|
$color-ste-delivery-bg: $color-success !default;
|
|
$color-ste-delivery-text: $white !default;
|
|
$color-ste-confirmation-bg: $color-error !default;
|
|
$color-ste-confirmation-text: $white !default;
|
|
$color-ste-active-bg: $color-success !default;
|
|
$color-ste-active-text: $white !default;
|
|
$color-ste-inactive-bg: $color-notice !default;
|
|
$color-ste-inactive-text: $white !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: 14px !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-input: 1px solid $color-txt-brd;
|
|
$border-radius: 4px !default;
|
|
$box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07) !default;
|
|
|
|
$font-weight-bold: 600 !default;
|
|
$font-weight-normal: 400 !default;
|
|
|
|
$btn-relaxed-height: 40px !default;
|
|
$btn-regular-height: 32px !default;
|
|
$btn-condensed-height: 26px !default;
|
|
|
|
// z-index
|
|
//--------------------------------------------------------------
|
|
$tos-banner-z-index: 1001;
|
|
$flash-message-z-index: 1000;
|
|
$tag-drop-down-z-index: 999;
|
|
|
|
$ts-dropdown-z-index: 101;
|
|
$save-bar-z-index: 100;
|