142 lines
3.0 KiB
SCSS
142 lines
3.0 KiB
SCSS
// Quasar SCSS (& Sass) Variables
|
|
// --------------------------------------------------
|
|
// To customize the look and feel of this app, you can override
|
|
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
|
|
|
|
// Check documentation for full list of Quasar variables
|
|
|
|
// Your own variables (that are declared here) and Quasar's own
|
|
// ones will be available out of the box in your .vue/.scss/.sass files
|
|
|
|
// It's highly recommended to change the default colors
|
|
// to match your app's branding.
|
|
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
|
|
|
$primary: #117564;
|
|
$secondary: #26a69a;
|
|
$accent: #9c27b0;
|
|
|
|
$header: rgba(17, 117, 100, 1);
|
|
$title: rgba(17, 117, 100, 1);
|
|
|
|
$dark: #1d1d1d;
|
|
$dark-page: #121212;
|
|
|
|
$positive: #21ba45;
|
|
$negative: #c10015;
|
|
$info: #31ccec;
|
|
$warning: #f2c037;
|
|
|
|
//! Media queries
|
|
$med-hg: 1441px;
|
|
$med-xlg: 1440px;
|
|
$med-lg: 1024px;
|
|
$med-xmd: 960px;
|
|
$med-md: 768px;
|
|
$med-sm: 445px;
|
|
|
|
//! Desktop grid
|
|
$desktop-grid-columns: 12;
|
|
$desktop-grid-gap: 20px;
|
|
$desktop-grid-margin: 32px;
|
|
|
|
//! Mobile grid
|
|
$mobile-grid-columns: 4;
|
|
$mobile-grid-gap: 8px;
|
|
$mobile-grid-margin: 16px;
|
|
|
|
//! Primary pallete
|
|
$primary-dark: $primary;
|
|
$primary-darken: #045e4e;
|
|
$primary-dark-transparent: #11756470;
|
|
$primary-light: #cdebd2;
|
|
|
|
//! Secondary pallete
|
|
$white: #ffffff;
|
|
$secondary-orange: #ff9900;
|
|
$secondary-100: #141414;
|
|
$secondary-80: #54544f;
|
|
$secondary-60: #979797;
|
|
$secondary-40: #ededed;
|
|
$secondary-20: #f8f8f8;
|
|
$secondary-10: #f9f9f9;
|
|
|
|
//! Font color pallete
|
|
$title-default: #117564;
|
|
$text-default: #6d6d6d;
|
|
|
|
$black: #101010;
|
|
$text-black: $black;
|
|
$text-gray: $text-default;
|
|
$text-white: $white;
|
|
$paragraph-color: #50535a;
|
|
|
|
$text-h1: $white;
|
|
$text-h2: $white;
|
|
$text-subtitle: $white;
|
|
$text-muted: #58585a;
|
|
$text-muted-one: #525151;
|
|
|
|
$text-title-100: $black;
|
|
$text-title-80: #10101080;
|
|
$text-title-60: #10101060;
|
|
$text-title-40: #10101040;
|
|
$text-title-20: #10101020;
|
|
$text-title-10: #10101010;
|
|
|
|
$text-normal-100: #242424;
|
|
$text-normal-80: #24242480;
|
|
$text-normal-60: #24242460;
|
|
$text-normal-40: #24242440;
|
|
$text-normal-20: #24242420;
|
|
$text-normal-10: #24242410;
|
|
|
|
$grey-700: #f9f9f9;
|
|
//! Font family
|
|
$font-lora: 'Lora', serif;
|
|
$font-roboto: 'Roboto', sans-serif;
|
|
$font-mulish: 'Mulish', sans-serif;
|
|
$font-questrial: 'Questrial', sans-serif;
|
|
$font-montserrat: 'Montserrat', sans-serif;
|
|
|
|
//! Price font
|
|
$text-price-font: $font-questrial;
|
|
$text-price: $black;
|
|
$text-price-offer: #f5333f;
|
|
$text-price-tachado: strikethrough;
|
|
|
|
//! Font sizes
|
|
$font-hg: 100px;
|
|
$font-xxxlg: 70px;
|
|
$font-xxlg: 65px;
|
|
$font-xlg: 48px;
|
|
$font-lg: 45px;
|
|
$font-xxxxmd: 40px;
|
|
$font-xxxmd: 35px;
|
|
$font-xxmd: 28px;
|
|
$font-xmd: 26px;
|
|
$font-md: 22px;
|
|
$font-sm: 21px;
|
|
$font-xsm: 20px;
|
|
$font-xxsm: 18px;
|
|
$font-xxxsm: 16px;
|
|
$font-xxxxsm: 14px;
|
|
$font-xxxxxsm: 12px;
|
|
$font-copy: 10px;
|
|
|
|
$font-40: 2.5rem;
|
|
$font-35: 2.1875rem;
|
|
$font-30: 1.875rem;
|
|
$font-28: 1.75rem;
|
|
$font-25: 1.5625rem;
|
|
$font-24: 1.5rem;
|
|
$font-20: 1.25rem;
|
|
$font-18: 1.125rem;
|
|
$font-16: 1rem;
|
|
$font-14: 0.875rem;
|
|
$font-12: 0.75rem;
|
|
|
|
//! Button
|
|
$btn-black-bg: $text-title-100;
|
|
$btn-white-bg: $white;
|