// 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. $space-base: 16px !default; $padding-xs: ($space-base * 0.25); $padding-sm: ($space-base * 0.5); $padding-md: $space-base; $padding-lg: ($space-base * 1.5); $padding-xl: ($space-base * 3); $primary: #78c0a8; $secondary: #26a69a; $accent: #9c27b0; $dark: #1d1d1d; $positive: #81c784; $negative: #dd4a48; $info: #a696c8; $warning: #ffb200; $--color-white: #fff; $--color-dark: #000; $primary-10: mix($--color-dark, $primary, 50%); $primary-9: mix($--color-dark, $primary, 40%); $primary-8: mix($--color-dark, $primary, 30%); $primary-7: mix($--color-dark, $primary, 20%); $primary-6: mix($--color-dark, $primary, 10%); $primary-5: mix($--color-white, $primary, 5%); $primary-4: mix($--color-white, $primary, 10%); $primary-3: mix($--color-white, $primary, 20%); $primary-2: mix($--color-white, $primary, 30%); $primary-1: mix($--color-white, $primary, 50%); $primary-bg-light: rgba(120, 192, 168, 0.136); .bg-primary-bg-light { background: $primary-bg-light; } $border-color: rgba(0, 0, 0, 0.12); $gray-text: rgba(0, 0, 0, 0.871); $gray-light-text: rgba(0, 0, 0, 0.596); $header-heigyht: 50px; :root { --my-ag-grid-primary: rgb(165, 189, 22); --my-ag-grid-primary-light: rgba(165, 189, 22, 0.05); --my-ag-grid-primary-1: rgba(165, 189, 22, 0.1); --my-ag-grid-primary-2: rgba(165, 189, 22, 0.2); --my-ag-grid-primary-5: rgba(165, 189, 22, 0.5); --my-ag-grid-active: rgb(97, 112, 17); --my-ag-grid-text: #fff7f7; }