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 | @if not map-has-key($foundation-palette, primary) {
|
113 | @error 'In $foundation-palette, you must have a color named "primary".';
|
114 | }
|
115 |
|
116 | // Internal variables used for text direction
|
117 | $global-left: if($global-text-direction == rtl, right, left);
|
118 | $global-right: if($global-text-direction == rtl, left, right);
|
119 |
|
120 | /// Global tolerance for color pick contrast.
|
121 | /// @type Number
|
122 | $global-color-pick-contrast-tolerance: 0 !default;
|
123 |
|
124 | // Internal variables used for colors
|
125 | $primary-color: get-color(primary);
|
126 | $secondary-color: get-color(secondary);
|
127 | $success-color: get-color(success);
|
128 | $warning-color: get-color(warning);
|
129 | $alert-color: get-color(alert);
|
130 |
|
131 | @mixin foundation-global-styles {
|
132 | @include -zf-normalize;
|
133 |
|
134 | // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
|
135 | .foundation-mq {
|
136 | font-family: '#{-zf-bp-serialize($breakpoints)}';
|
137 | }
|
138 |
|
139 | html {
|
140 | box-sizing: border-box;
|
141 | font-size: $global-font-size;
|
142 | }
|
143 |
|
144 | // Set box-sizing globally to handle padding and border widths
|
145 | *,
|
146 | *::before,
|
147 | *::after {
|
148 | box-sizing: inherit;
|
149 | }
|
150 |
|
151 | // Default body styles
|
152 | body {
|
153 | margin: 0;
|
154 | padding: 0;
|
155 |
|
156 | background: $body-background;
|
157 |
|
158 | font-family: $body-font-family;
|
159 | font-weight: $global-weight-normal;
|
160 | line-height: $global-lineheight;
|
161 | color: $body-font-color;
|
162 |
|
163 | @if ($body-antialiased) {
|
164 | -webkit-font-smoothing: antialiased;
|
165 | -moz-osx-font-smoothing: grayscale;
|
166 | }
|
167 | }
|
168 |
|
169 | img {
|
170 | // Get rid of gap under images by making them display: inline-block; by default
|
171 | display: inline-block;
|
172 | vertical-align: middle;
|
173 |
|
174 | // Grid defaults to get images and embeds to work properly
|
175 | max-width: 100%;
|
176 | height: auto;
|
177 | -ms-interpolation-mode: bicubic;
|
178 | }
|
179 |
|
180 | // Make sure textarea takes on height automatically
|
181 | textarea {
|
182 | height: auto;
|
183 | min-height: 50px;
|
184 | border-radius: $global-radius;
|
185 | }
|
186 |
|
187 | // Make select elements are 100% width by default
|
188 | select {
|
189 | box-sizing: border-box;
|
190 | width: 100%;
|
191 | border-radius: $global-radius;
|
192 | }
|
193 |
|
194 | // Styles Google Maps and MapQuest embeds properly
|
195 | // sass-lint:disable-line no-ids
|
196 | .map_canvas,
|
197 | .mqa-display {
|
198 | img,
|
199 | embed,
|
200 | object {
|
201 | max-width: none ;
|
202 | }
|
203 | }
|
204 |
|
205 | // Reset <button> styles created by most browsers
|
206 | button {
|
207 | @include disable-mouse-outline;
|
208 |
|
209 | padding: 0;
|
210 |
|
211 | appearance: none;
|
212 | border: 0;
|
213 | border-radius: $global-radius;
|
214 | background: transparent;
|
215 |
|
216 | line-height: 1;
|
217 | }
|
218 |
|
219 | // Prevent text overflow on pre
|
220 | pre {
|
221 | overflow: auto;
|
222 | }
|
223 |
|
224 | // Make reset inherit font-family instead of settings sans-serif
|
225 | button,
|
226 | input,
|
227 | optgroup,
|
228 | select,
|
229 | textarea {
|
230 | font-family: inherit;
|
231 | }
|
232 |
|
233 | // Internal classes to show/hide elements in JavaScript
|
234 | .is-visible {
|
235 | display: block ;
|
236 | }
|
237 |
|
238 | .is-hidden {
|
239 | display: none ;
|
240 | }
|
241 | }
|
242 |
|
243 | /// Loads normalize.css.
|
244 | /// @access private
|
245 | @mixin -zf-normalize {
|
246 | @include normalize();
|
247 | }
|