| 1 |
// CSS Variables |
| 2 |
:root { |
| 3 |
--sp-smart-primary-2-50: #EFE6FB; |
| 4 |
--sp-smart-primary-2-100: #D6C2F5; |
| 5 |
--sp-smart-primary-2-200: #BB99EE; |
| 6 |
--sp-smart-primary-2-300: #9E6DE9; |
| 7 |
--sp-smart-primary-2-400: #884AE3; |
| 8 |
--sp-smart-primary-2-500: #6F22DD; |
| 9 |
--sp-smart-primary-2-600: #641DD7; |
| 10 |
--sp-smart-primary-2-700: #5412CF; |
| 11 |
--sp-smart-primary-2-800: #4307C9; |
| 12 |
--sp-smart-primary-2-900: #1E00C0; |
| 13 |
--sp-smart-primary-2-gradient: linear-gradient(90deg, #0054FB 0%, #4A70FE 65.02%); |
| 14 |
} |
| 15 |
|
| 16 |
// SCSS Variables |
| 17 |
$sp-primary-600: #641DD7; |
| 18 |
$sp-primary-700: #5412CF; |
| 19 |
$sp-green: #4AB866; |
| 20 |
$sp-text-color: #333333; |
| 21 |
$sp-border-color: #E0E0E0; |
| 22 |
$sp-bg-light: #F9F9F9; |
| 23 |
$sp-bg-white: #FFFFFF; |
| 24 |
|
| 25 |
// Quick Start Page Specific Colors |
| 26 |
$qs-primary-color: #F26C0D; |
| 27 |
$qs-primary-hover: #e9510c; |
| 28 |
$qs-text-muted: #757575; |
| 29 |
$qs-link-blue: #1a74e4; |
| 30 |
$qs-link-blue-hover: #0f5cb3; |
| 31 |
$qs-max-width: 1400px; |
| 32 |
|
| 33 |
// Common SCSS Variables |
| 34 |
$max-width: 1400px; |
| 35 |
$white: #FFFFFF; |
| 36 |
$border-color: #E0E0E0; |
| 37 |
$link-blue: #1a74e4; |
| 38 |
$link-blue-hover: #0f5cb3; |
| 39 |
$primary-color: #F26C0D; |
| 40 |
|
| 41 |
// Spacing |
| 42 |
$sp-spacing-xs: 4px; |
| 43 |
$sp-spacing-sm: 8px; |
| 44 |
$sp-spacing-md: 16px; |
| 45 |
$sp-spacing-lg: 24px; |
| 46 |
$sp-spacing-xl: 32px; |
| 47 |
|
| 48 |
// Border Radius |
| 49 |
$sp-radius-sm: 4px; |
| 50 |
$sp-radius-md: 8px; |
| 51 |
$sp-radius-lg: 12px; |
| 52 |
$sp-radius-full: 9999px; |
| 53 |
|
| 54 |
// Transitions |
| 55 |
$sp-transition-fast: 0.15s ease; |
| 56 |
$sp-transition-normal: 0.25s ease; |
| 57 |
$sp-transition-slow: 0.3s ease; |
| 58 |
|
