| 1 | // Foundation for Sites by ZURB
|
| 2 | // foundation.zurb.com
|
| 3 | // Licensed under MIT Open Source
|
| 4 |
|
| 5 | // sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
|
| 6 |
|
| 7 | ////
|
| 8 | /// @group global
|
| 9 | ////
|
| 10 |
|
| 11 | /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
|
| 12 | /// @type Number
|
| 13 | $global-font-size: 100% !default;
|
| 14 |
|
| 15 | /// Global width of your site. Used by the grid to determine row width.
|
| 16 | /// @type Number
|
| 17 | $global-width: rem-calc(1200) !default;
|
| 18 |
|
| 19 | /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
|
| 20 | /// @type Number
|
| 21 | $global-lineheight: 1.5 !default;
|
| 22 |
|
| 23 | /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
|
| 24 | /// @type Map
|
| 25 | $foundation-palette: (
|
| 26 | primary: #1779ba,
|
| 27 | secondary: #767676,
|
| 28 | success: #3adb76,
|
| 29 | warning: #ffae00,
|
| 30 | alert: #cc4b37,
|
| 31 | ) !default;
|
| 32 |
|
| 33 | /// Color used for light gray UI items.
|
| 34 | /// @type Color
|
| 35 | $light-gray: #e6e6e6 !default;
|
| 36 |
|
| 37 | /// Color used for medium gray UI items.
|
| 38 | /// @type Color
|
| 39 | $medium-gray: #cacaca !default;
|
| 40 |
|
| 41 | /// Color used for dark gray UI items.
|
| 42 | /// @type Color
|
| 43 | $dark-gray: #8a8a8a !default;
|
| 44 |
|
| 45 | /// Color used for black ui items.
|
| 46 | /// @type Color
|
| 47 | $black: #0a0a0a !default;
|
| 48 |
|
| 49 | /// Color used for white ui items.
|
| 50 | /// @type Color
|
| 51 | $white: #fefefe !default;
|
| 52 |
|
| 53 | /// Background color of the body.
|
| 54 | /// @type Color
|
| 55 | $body-background: $white !default;
|
| 56 |
|
| 57 | /// Text color of the body.
|
| 58 | /// @type Color
|
| 59 | $body-font-color: $black !default;
|
| 60 |
|
| 61 | /// Font stack of the body.
|
| 62 | /// @type List
|
| 63 | $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
|
| 64 |
|
| 65 | /// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
|
| 66 | /// @type Boolean
|
| 67 | $body-antialiased: true !default;
|
| 68 |
|
| 69 | /// Global value used for margin on components.
|
| 70 | /// @type Number
|
| 71 | $global-margin: 1rem !default;
|
| 72 |
|
| 73 | /// Global value used for padding on components.
|
| 74 | /// @type Number
|
| 75 | $global-padding: 1rem !default;
|
| 76 |
|
| 77 | /// Global value used for positioning on components.
|
| 78 | /// @type Number
|
| 79 | $global-position: 1rem !default;
|
| 80 |
|
| 81 | /// Global font weight used for normal type.
|
| 82 | /// @type Keyword | Number
|
| 83 | $global-weight-normal: normal !default;
|
| 84 |
|
| 85 | /// Global font weight used for bold type.
|
| 86 | /// @type Keyword | Number
|
| 87 | $global-weight-bold: bold !default;
|
| 88 |
|
| 89 | /// Global value used for all elements that have a border radius.
|
| 90 | /// @type Number
|
| 91 | $global-radius: 0 !default;
|
| 92 |
|
| 93 | /// Global value used for all menu styles. Can be overwritten at individual menu component level.
|
| 94 | /// @type Number
|
| 95 | $global-menu-padding: 0.7rem 1rem !default;
|
| 96 |
|
| 97 | /// Global value used for all menu styles. Nested margin for submenu.
|
| 98 | $global-menu-nested-margin: 1rem !default;
|
| 99 |
|
| 100 | /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
|
| 101 | /// @type Keyword
|
| 102 | $global-text-direction: ltr !default;
|
| 103 |
|
| 104 | /// Enables flexbox for components that support it.
|
| 105 | /// @type Boolean
|
| 106 | $global-flexbox: true !default;
|
| 107 |
|
| 108 | /// Enabled responsive breakpoints for prototypes if applicable
|
| 109 | /// @type Boolean
|
| 110 | $global-prototype-breakpoints: false !default;
|
| 111 |
|
| 112 | /// Button cursor's value, `auto` by default
|
| 113 | /// @type Keyword
|
| 114 | $global-button-cursor: auto !default;
|
| 115 |
|
| 116 | @if not map-has-key($foundation-palette, primary) {
|
| 117 | @error 'In $foundation-palette, you must have a color named "primary".';
|
| 118 | }
|
| 119 |
|
| 120 | // Internal variables used for text direction
|
| 121 | $global-left: if($global-text-direction == rtl, right, left);
|
| 122 | $global-right: if($global-text-direction == rtl, left, right);
|
| 123 |
|
| 124 | /// Global tolerance for color pick contrast.
|
| 125 | /// @type Number
|
| 126 | $global-color-pick-contrast-tolerance: 0 !default;
|
| 127 |
|
| 128 | // Internal variables used for colors
|
| 129 | $primary-color: get-color(primary);
|
| 130 | $secondary-color: get-color(secondary);
|
| 131 | $success-color: get-color(success);
|
| 132 | $warning-color: get-color(warning);
|
| 133 | $alert-color: get-color(alert);
|
| 134 |
|
| 135 | @mixin foundation-global-styles {
|
| 136 | @include -zf-normalize;
|
| 137 |
|
| 138 | // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
|
| 139 | .foundation-mq {
|
| 140 | font-family: '#{-zf-bp-serialize($breakpoints)}';
|
| 141 | }
|
| 142 |
|
| 143 | html {
|
| 144 | box-sizing: border-box;
|
| 145 | font-size: $global-font-size;
|
| 146 | }
|
| 147 |
|
| 148 | // Set box-sizing globally to handle padding and border widths
|
| 149 | *,
|
| 150 | *::before,
|
| 151 | *::after {
|
| 152 | box-sizing: inherit;
|
| 153 | }
|
| 154 |
|
| 155 | // Default body styles
|
| 156 | body {
|
| 157 | margin: 0;
|
| 158 | padding: 0;
|
| 159 |
|
| 160 | background: $body-background;
|
| 161 |
|
| 162 | font-family: $body-font-family;
|
| 163 | font-weight: $global-weight-normal;
|
| 164 | line-height: $global-lineheight;
|
| 165 | color: $body-font-color;
|
| 166 |
|
| 167 | @if ($body-antialiased) {
|
| 168 | -webkit-font-smoothing: antialiased;
|
| 169 | -moz-osx-font-smoothing: grayscale;
|
| 170 | }
|
| 171 | }
|
| 172 |
|
| 173 | img {
|
| 174 | // Get rid of gap under images by making them display: inline-block; by default
|
| 175 | display: inline-block;
|
| 176 | vertical-align: middle;
|
| 177 |
|
| 178 | // Grid defaults to get images and embeds to work properly
|
| 179 | max-width: 100%;
|
| 180 | height: auto;
|
| 181 | -ms-interpolation-mode: bicubic;
|
| 182 | }
|
| 183 |
|
| 184 | // Make sure textarea takes on height automatically
|
| 185 | textarea {
|
| 186 | height: auto;
|
| 187 | min-height: 50px;
|
| 188 | border-radius: $global-radius;
|
| 189 | }
|
| 190 |
|
| 191 | // Make select elements are 100% width by default
|
| 192 | select {
|
| 193 | box-sizing: border-box;
|
| 194 | width: 100%;
|
| 195 | border-radius: $global-radius;
|
| 196 | }
|
| 197 |
|
| 198 | // Styles Google Maps and MapQuest embeds properly
|
| 199 | // sass-lint:disable-line no-ids
|
| 200 | .map_canvas,
|
| 201 | .mqa-display {
|
| 202 | img,
|
| 203 | embed,
|
| 204 | object {
|
| 205 | max-width: none ;
|
| 206 | }
|
| 207 | }
|
| 208 |
|
| 209 | // Reset <button> styles created by most browsers
|
| 210 | button {
|
| 211 | @include disable-mouse-outline;
|
| 212 | padding: 0;
|
| 213 | appearance: none;
|
| 214 | border: 0;
|
| 215 | border-radius: $global-radius;
|
| 216 | background: transparent;
|
| 217 | line-height: 1;
|
| 218 | cursor: $global-button-cursor;
|
| 219 | }
|
| 220 |
|
| 221 | // Prevent text overflow on pre
|
| 222 | pre {
|
| 223 | overflow: auto;
|
| 224 | }
|
| 225 |
|
| 226 | // Make reset inherit font-family instead of settings sans-serif
|
| 227 | button,
|
| 228 | input,
|
| 229 | optgroup,
|
| 230 | select,
|
| 231 | textarea {
|
| 232 | font-family: inherit;
|
| 233 | }
|
| 234 |
|
| 235 | // Internal classes to show/hide elements in JavaScript
|
| 236 | .is-visible {
|
| 237 | display: block ;
|
| 238 | }
|
| 239 |
|
| 240 | .is-hidden {
|
| 241 | display: none ;
|
| 242 | }
|
| 243 | }
|
| 244 |
|
| 245 | /// Loads normalize.css.
|
| 246 | /// @access private
|
| 247 | @mixin -zf-normalize {
|
| 248 | @include normalize();
|
| 249 | }
|