| 1 | //
|
| 2 | // Component: Variables
|
| 3 | // Description: Defines common values which are used across all components
|
| 4 | //
|
| 5 | // ========================================================================
|
| 6 |
|
| 7 |
|
| 8 | // Load deprecated components
|
| 9 | // ========================================================================
|
| 10 |
|
| 11 | $deprecated: false !default;
|
| 12 |
|
| 13 |
|
| 14 | // Breakpoints
|
| 15 | // ========================================================================
|
| 16 |
|
| 17 | // Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
|
| 18 | // Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
|
| 19 | // Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280),
|
| 20 | // Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
|
| 21 | // Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
|
| 22 |
|
| 23 | $breakpoint-small: 640px !default; // Phone landscape
|
| 24 | $breakpoint-medium: 960px !default; // Tablet Landscape
|
| 25 | $breakpoint-large: 1200px !default; // Desktop
|
| 26 | $breakpoint-xlarge: 1600px !default; // Large Screens
|
| 27 |
|
| 28 | $breakpoint-xsmall-max: ($breakpoint-small - 1) !default;
|
| 29 | $breakpoint-small-max: ($breakpoint-medium - 1) !default;
|
| 30 | $breakpoint-medium-max: ($breakpoint-large - 1) !default;
|
| 31 | $breakpoint-large-max: ($breakpoint-xlarge - 1) !default;
|
| 32 |
|
| 33 |
|
| 34 | // Global variables
|
| 35 | // ========================================================================
|
| 36 |
|
| 37 | //
|
| 38 | // Typography
|
| 39 | //
|
| 40 |
|
| 41 | $global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
| 42 | $global-font-size: 16px !default;
|
| 43 | $global-line-height: 1.5 !default; // 24px
|
| 44 |
|
| 45 | $global-xxlarge-font-size: 2.625rem !default; // 42px
|
| 46 | $global-xlarge-font-size: 2rem !default; // 32px
|
| 47 | $global-large-font-size: 1.5rem !default; // 24px
|
| 48 | $global-medium-font-size: 1.25rem !default; // 20px
|
| 49 | $global-small-font-size: 0.875rem !default; // 14px
|
| 50 |
|
| 51 | //
|
| 52 | // Colors
|
| 53 | //
|
| 54 |
|
| 55 | $global-color: #666 !default;
|
| 56 | $global-emphasis-color: #333 !default;
|
| 57 | $global-muted-color: #999 !default;
|
| 58 |
|
| 59 | $global-link-color: #1e87f0 !default;
|
| 60 | $global-link-hover-color: #0f6ecd !default;
|
| 61 |
|
| 62 | $global-inverse-color: #fff !default;
|
| 63 |
|
| 64 | //
|
| 65 | // Backgrounds
|
| 66 | //
|
| 67 |
|
| 68 | $global-background: #fff !default;
|
| 69 |
|
| 70 | $global-muted-background: #f8f8f8 !default;
|
| 71 | $global-primary-background: #1e87f0 !default;
|
| 72 | $global-secondary-background: #222 !default;
|
| 73 |
|
| 74 | $global-success-background: #32d296 !default;
|
| 75 | $global-warning-background: #faa05a !default;
|
| 76 | $global-danger-background: #f0506e !default;
|
| 77 |
|
| 78 | //
|
| 79 | // Borders
|
| 80 | //
|
| 81 |
|
| 82 | $global-border-width: 1px !default;
|
| 83 | $global-border: #e5e5e5 !default;
|
| 84 |
|
| 85 | //
|
| 86 | // Box-Shadows
|
| 87 | //
|
| 88 |
|
| 89 | $global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08) !default;
|
| 90 | $global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08) !default;
|
| 91 | $global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16) !default;
|
| 92 | $global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16) !default;
|
| 93 |
|
| 94 | //
|
| 95 | // Spacings
|
| 96 | //
|
| 97 |
|
| 98 | // Used in margin, section, list
|
| 99 | $global-margin: 20px !default;
|
| 100 | $global-small-margin: 10px !default;
|
| 101 | $global-medium-margin: 40px !default;
|
| 102 | $global-large-margin: 70px !default;
|
| 103 | $global-xlarge-margin: 140px !default;
|
| 104 |
|
| 105 | // Used in grid, column, container, align, card, padding
|
| 106 | $global-gutter: 30px !default;
|
| 107 | $global-small-gutter: 15px !default;
|
| 108 | $global-medium-gutter: 40px !default;
|
| 109 | $global-large-gutter: 70px !default;
|
| 110 |
|
| 111 | //
|
| 112 | // Controls
|
| 113 | //
|
| 114 |
|
| 115 | $global-control-height: 40px !default;
|
| 116 | $global-control-small-height: 30px !default;
|
| 117 | $global-control-large-height: 55px !default;
|
| 118 |
|
| 119 | //
|
| 120 | // Z-index
|
| 121 | //
|
| 122 |
|
| 123 | $global-z-index: 1000 !default;
|