groundworkcss 0.3.2 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +1 -0
- data/README.md +42 -16
- data/app/assets/javascripts/groundworkcss/libs/PIE.htc +96 -0
- data/app/assets/javascripts/groundworkcss/libs/PIE.js +88 -0
- data/app/assets/javascripts/groundworkcss/plugins/jquery-truncateLines.coffee +70 -31
- data/app/assets/stylesheets/groundworkcss/_settings-rails3.scss +307 -0
- data/app/assets/stylesheets/groundworkcss/_settings-rails4.scss +307 -0
- data/app/assets/stylesheets/groundworkcss/_settings.scss +3 -2
- data/app/assets/stylesheets/groundworkcss/base/_all-base.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/base/_flex-box.scss +35 -14
- data/app/assets/stylesheets/groundworkcss/base/_grid.scss +4 -0
- data/app/assets/stylesheets/groundworkcss/core/_defaults.scss +3 -2
- data/app/assets/stylesheets/groundworkcss/core/_mixins.scss +14 -0
- data/app/assets/stylesheets/groundworkcss/groundwork.scss +1 -1
- data/app/assets/stylesheets/groundworkcss/nav/_buttons.scss +9 -9
- data/app/assets/stylesheets/groundworkcss/responsive/_desktop.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_helpers.scss +3 -3
- data/app/assets/stylesheets/groundworkcss/responsive/_ipad.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_mobile.scss +5 -0
- data/app/assets/stylesheets/groundworkcss/responsive/_small-tablet.scss +1 -0
- data/app/assets/stylesheets/groundworkcss/social-icons-svg.scss +1 -1
- data/groundworkcss.gemspec +1 -1
- data/lib/groundworkcss/generators/install_generator.rb +10 -2
- data/lib/groundworkcss/version.rb +1 -1
- metadata +92 -60
- checksums.yaml +0 -15
- data/app/assets/javascripts/groundworkcss/libs/html5shiv.min.js +0 -8
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
// =============================================
|
|
2
|
+
// Custom Settings
|
|
3
|
+
// Last Updated:2013-6-24
|
|
4
|
+
// =============================================
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
///////////////////////
|
|
8
|
+
// framework //
|
|
9
|
+
///////////////////////
|
|
10
|
+
|
|
11
|
+
// file paths
|
|
12
|
+
$root_path: "/assets/";
|
|
13
|
+
$images_path: asset-path("", image);
|
|
14
|
+
$fonts_path: 'groundworkcss/';
|
|
15
|
+
$boxsizing_path: asset-path("groundworkcss/libs/boxsizing.htc", javascript);
|
|
16
|
+
$PIE_path: asset-path("groundworkcss/libs/PIE.htc", javascript);
|
|
17
|
+
|
|
18
|
+
// build options
|
|
19
|
+
// $reset: true; // enable CSS reset (recommended)
|
|
20
|
+
// elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
|
|
21
|
+
// $reset-elements: html body
|
|
22
|
+
// div span header footer aside nav menu main section article details
|
|
23
|
+
// h1 h2 h3 h4 h5 h6 p
|
|
24
|
+
// ol ul li dl dt dd
|
|
25
|
+
// em small big strong b u i sub sup del strike
|
|
26
|
+
// blockquote cite pre code time address
|
|
27
|
+
// a img center hr
|
|
28
|
+
// form fieldset legend label input textarea button
|
|
29
|
+
// table caption tbody thead tfoot tr th td
|
|
30
|
+
// iframe object canvas audio video;
|
|
31
|
+
|
|
32
|
+
// $global-tags: true; // enable output in base/_global.scss (recommended)
|
|
33
|
+
|
|
34
|
+
// grid settings
|
|
35
|
+
// $grid-classes: true; // enable output of grid classes (recommended)
|
|
36
|
+
// $numerators: one two three four five six seven eight nine ten eleven twelve;
|
|
37
|
+
// $denominators: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
|
|
38
|
+
// $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
|
|
39
|
+
// $grid-adapters: $one-whole $one-half $one-third $one-fourth $one-fifth;
|
|
40
|
+
// $max-width: 1200px; // maximum container width (i.e. - 960px)
|
|
41
|
+
// $gutter: 10px; // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
|
|
42
|
+
|
|
43
|
+
// flexbox settings
|
|
44
|
+
// $flexbox-classes: true; // enable output of flexbox classes (optional)
|
|
45
|
+
// $flexbox-helpers: flex-wrapper flex-box vertical-center; // for flexbox order use @include flex-order($val);
|
|
46
|
+
|
|
47
|
+
// helper settings
|
|
48
|
+
// $layout-classes: true; // enable output of layout helpers (recommended)
|
|
49
|
+
// $layout-helpers: inline block
|
|
50
|
+
// hidden
|
|
51
|
+
// disabled
|
|
52
|
+
// zero
|
|
53
|
+
// pull-right pull-left clear
|
|
54
|
+
// center;
|
|
55
|
+
|
|
56
|
+
// $positioning-classes: true; // enable output of position helpers (optional)
|
|
57
|
+
|
|
58
|
+
// $size-classes: true; // enable output of size helpers (recommended)
|
|
59
|
+
// $size-helpers: small large;
|
|
60
|
+
|
|
61
|
+
// $typography-classes: true; // enable output of typography helpers (recommended)
|
|
62
|
+
// $typography-helpers: align-top align-right align-bottom align-left align-center justify
|
|
63
|
+
// truncate;
|
|
64
|
+
|
|
65
|
+
// $border-classes: true; // enable output of border helpers (optional)
|
|
66
|
+
// $border-helpers: bordered border-right border-left border-top border-bottom;
|
|
67
|
+
|
|
68
|
+
// round/square
|
|
69
|
+
// $default-radius: 4px;
|
|
70
|
+
// $radius-classes: true; // enable output of radius helpers (optional)
|
|
71
|
+
// $radius-helpers: square round;
|
|
72
|
+
|
|
73
|
+
// rotation
|
|
74
|
+
// $rotation-classes: true; // enable output of rotational helpers (optional)
|
|
75
|
+
// $rotation-helpers: rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
|
|
76
|
+
|
|
77
|
+
// spinners
|
|
78
|
+
// $spin-classes: true; // enable output of spin helpers (optional)
|
|
79
|
+
// $spin-helpers: spin spin-once spin-twice spin-thrice
|
|
80
|
+
// spin-fast spin-fast-once spin-fast-twice spin-fast-thrice
|
|
81
|
+
// spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
|
|
82
|
+
|
|
83
|
+
// spacers
|
|
84
|
+
// $spacer-classes: true; // enable output of spacer helpers (recommended)
|
|
85
|
+
// $spacer-helpers: padded pad-top pad-right pad-bottom pad-left
|
|
86
|
+
// gapped gap-top gap-right gap-bottom gap-left
|
|
87
|
+
// offset offset-top offset-right offset-bottom offset-left;
|
|
88
|
+
|
|
89
|
+
// spacer multipliers
|
|
90
|
+
// $spacer-mod-classes: true; // enable output of spacer modifiers (optional)
|
|
91
|
+
// $spacer-modifiers: double triple;
|
|
92
|
+
|
|
93
|
+
// states
|
|
94
|
+
// $ui-states: disabled info alert warning error success;
|
|
95
|
+
// $button-states: on active disabled info alert warning error success;
|
|
96
|
+
|
|
97
|
+
// typography
|
|
98
|
+
// $type-tags: true; // enable output of type selectors (recommended)
|
|
99
|
+
// $type-elements: h1 h2 h3 h4 h5 h6 p
|
|
100
|
+
// ul ol dl
|
|
101
|
+
// blockquote cite
|
|
102
|
+
// small big em b strong
|
|
103
|
+
// sup sub
|
|
104
|
+
// del strike
|
|
105
|
+
// code pre;
|
|
106
|
+
// $type-colors: true; // enable output of colors classes (optional)
|
|
107
|
+
// $type-classes: false; // enable output of type classes (optional)
|
|
108
|
+
// $type-classnames: h1 h2 h3 h4 h5 h6 p
|
|
109
|
+
// ul ol dl
|
|
110
|
+
// blockquote cite
|
|
111
|
+
// small big large
|
|
112
|
+
// b bold strong
|
|
113
|
+
// em italic
|
|
114
|
+
// sup sub
|
|
115
|
+
// del strike
|
|
116
|
+
// code pre
|
|
117
|
+
// invalid valid
|
|
118
|
+
// unstyled;
|
|
119
|
+
// $styled-lists: true; // enable output of styled lists (optional)
|
|
120
|
+
|
|
121
|
+
// webfonts
|
|
122
|
+
// $webfont-classes: true; // enable output of webfont classes (optional)
|
|
123
|
+
|
|
124
|
+
// buttons
|
|
125
|
+
// $button-tags: true; // enable output of button selectors (recommended)
|
|
126
|
+
// $button-classes: true; // enable output of button classes (recommended)
|
|
127
|
+
// $button-modifiers: small large on active square round block;
|
|
128
|
+
|
|
129
|
+
// navigation
|
|
130
|
+
// $nav-tags: true; // enable output of nav selectors (optional)
|
|
131
|
+
// $nav-classes: true;
|
|
132
|
+
|
|
133
|
+
// tabs
|
|
134
|
+
// $tab-classes: true; // enable output of tab classes (optional)
|
|
135
|
+
|
|
136
|
+
// forms
|
|
137
|
+
// $form-tags: true; // enable output of form selectors (recommended)
|
|
138
|
+
// $form-classes: false; // enable output of form classes (optional)
|
|
139
|
+
// $form-elements: fieldset legend label input textarea;
|
|
140
|
+
|
|
141
|
+
// tiles
|
|
142
|
+
// $tiles: true; // enable output of tile classes (optional)
|
|
143
|
+
// $tile-modifiers: on active small large square round disabled;
|
|
144
|
+
|
|
145
|
+
// message & callout boxes
|
|
146
|
+
// $ui-classes: true;
|
|
147
|
+
// $ui-modifiers: dismissible;
|
|
148
|
+
|
|
149
|
+
// tables
|
|
150
|
+
// $table-tags: true;
|
|
151
|
+
// $table-classes: true;
|
|
152
|
+
|
|
153
|
+
// ARIA role selectors (WIP - nav, buttons, tabs, etc.)
|
|
154
|
+
// $aria-selectors: true; // enable Aria role selectors
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
///////////////////////
|
|
158
|
+
// typography //
|
|
159
|
+
///////////////////////
|
|
160
|
+
|
|
161
|
+
// typography
|
|
162
|
+
$base-font-size: 14px; // base font size for Compass vertical rhythm
|
|
163
|
+
$base-line-height: 18px; // base line height for Compass vertical rhythm
|
|
164
|
+
// $font-family: Helvetica, Arial, Geneva, sans-serif;
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
///////////////////////
|
|
168
|
+
// web fonts //
|
|
169
|
+
///////////////////////
|
|
170
|
+
|
|
171
|
+
// font names (no spaces or special characters, these are used to build selectors)
|
|
172
|
+
// $web-font-names: AverageSans,
|
|
173
|
+
// AmericanTypewriter;
|
|
174
|
+
// font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
|
|
175
|
+
// $web-font-files: average-sans-webfont,
|
|
176
|
+
// americantypewriterstd-bold;
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
///////////////////////
|
|
180
|
+
// colors //
|
|
181
|
+
///////////////////////
|
|
182
|
+
|
|
183
|
+
// base styles
|
|
184
|
+
// $background-color: #ffffff;
|
|
185
|
+
// $font-color: #2b2b2d;
|
|
186
|
+
|
|
187
|
+
// links
|
|
188
|
+
// $link-color: #489AC1;
|
|
189
|
+
// $link-active: #198D98;
|
|
190
|
+
|
|
191
|
+
// selection highlight
|
|
192
|
+
// $selection-color: $link-color;
|
|
193
|
+
// $selection-text: #ffffff;
|
|
194
|
+
|
|
195
|
+
// borders
|
|
196
|
+
// $border-thickness: 1px;
|
|
197
|
+
// $border-style: solid;
|
|
198
|
+
// $border-color: #dddddd;
|
|
199
|
+
// $border: #{$border-thickness} #{$border-style} #{$border-color};
|
|
200
|
+
|
|
201
|
+
// buttons
|
|
202
|
+
// $button-color: #1DABB8;
|
|
203
|
+
// $button-border-color: darken($button-color, 10%);
|
|
204
|
+
// $button-active: #198D98;
|
|
205
|
+
// $button-text: #ffffff;
|
|
206
|
+
// $button-active-text: #ffffff;
|
|
207
|
+
|
|
208
|
+
// info
|
|
209
|
+
// $info-color: #3a87ad; // text only
|
|
210
|
+
// $info-text: #ffffff; // box text
|
|
211
|
+
// $info-background: #d9edf7;
|
|
212
|
+
// $info-border: #bce8f1;
|
|
213
|
+
|
|
214
|
+
// alert
|
|
215
|
+
// $alert-color: #c09853; // text only
|
|
216
|
+
// $alert-text: #ffffff; // box text
|
|
217
|
+
// $alert-background: #fcf8e3;
|
|
218
|
+
// $alert-border: #fbeee0;
|
|
219
|
+
|
|
220
|
+
// error
|
|
221
|
+
// $error-color: #b94a48; // text only
|
|
222
|
+
// $error-text: #ffffff; // box text
|
|
223
|
+
// $error-background: #f2dede;
|
|
224
|
+
// $error-border: #eed3d7;
|
|
225
|
+
|
|
226
|
+
// warning
|
|
227
|
+
// $warning-color: #FF971E; // text only
|
|
228
|
+
// $warning-text: #ffffff; // box text
|
|
229
|
+
// $warning-background: #FFE5C7;
|
|
230
|
+
// $warning-border: #FFDBB3;
|
|
231
|
+
|
|
232
|
+
// success
|
|
233
|
+
// $success-color: #468847; // text only
|
|
234
|
+
// $success-text: #ffffff; // box text
|
|
235
|
+
// $success-background: #dff0d8;
|
|
236
|
+
// $success-border: #d6e9c6;
|
|
237
|
+
|
|
238
|
+
// disabled
|
|
239
|
+
// $disabled-color: #808080; // text only
|
|
240
|
+
// $disabled-text: #ffffff; // box text
|
|
241
|
+
// $disabled-background: lighten($disabled-color, 20%);
|
|
242
|
+
// $disabled-border: darken($disabled-color, 10%);
|
|
243
|
+
|
|
244
|
+
// modifier states
|
|
245
|
+
// $state-name: "info" "alert" "warning" "error" "success" "disabled" ;
|
|
246
|
+
// $state-code: $info-color $alert-color $warning-color $error-color $success-color $disabled-color ;
|
|
247
|
+
// $state-text: $info-text $alert-text $warning-text $error-text $success-text $disabled-text ;
|
|
248
|
+
|
|
249
|
+
// modifier colors
|
|
250
|
+
// $green: #2ecc71;
|
|
251
|
+
// $blue: #3498db;
|
|
252
|
+
// $purple: #9b59b6;
|
|
253
|
+
// $yellow: #f1c40f;
|
|
254
|
+
// $orange: #e67e22;
|
|
255
|
+
// $red: #e74c3c;
|
|
256
|
+
// $pink: #f02475;
|
|
257
|
+
// $turquoise: #1abc9c;
|
|
258
|
+
// $asphalt: #34495e;
|
|
259
|
+
|
|
260
|
+
// $modifier-name: "green" "blue" "purple" "yellow" "orange" "red" "pink" "turquoise" "asphalt" ;
|
|
261
|
+
// $modifier-code: $green $blue $purple $yellow $orange $red $pink $turquoise $asphalt ;
|
|
262
|
+
// $modifier-text: $white $white $white $white $white $white $white $white $white ;
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
///////////////////////
|
|
266
|
+
// modals //
|
|
267
|
+
///////////////////////
|
|
268
|
+
|
|
269
|
+
// overlay
|
|
270
|
+
// $overlay-color: #0b0b0b; // Color of overlay screen
|
|
271
|
+
// $overlay-opacity: 0.5; // Opacity of overlay screen
|
|
272
|
+
// $shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
|
|
273
|
+
|
|
274
|
+
// spacing
|
|
275
|
+
// $popup-padding-left: 8px; // Padding from left and from right side
|
|
276
|
+
// $popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px
|
|
277
|
+
|
|
278
|
+
// $z-index-base: 500; // Base z-index of popup
|
|
279
|
+
|
|
280
|
+
// controls
|
|
281
|
+
// $include-arrows: true; // Include styles for nav arrows
|
|
282
|
+
// $controls-opacity: 0.65; // Opacity of controls
|
|
283
|
+
// $controls-color: #FFF; // Color of controls
|
|
284
|
+
// $inner-close-icon-color: #333; // Color of close button when inside
|
|
285
|
+
// $controls-text-color: #CCC; // Color of preloader and '1 of X' indicator
|
|
286
|
+
// $controls-text-color-hover: #FFF; // Hover color of preloader and '1 of X' indicator
|
|
287
|
+
// $IE7support: true; // Very basic IE7 support
|
|
288
|
+
|
|
289
|
+
// Inline-type options
|
|
290
|
+
// $modal-max-width: $max-width; // Maximum width of inline modals
|
|
291
|
+
|
|
292
|
+
// Iframe-type options
|
|
293
|
+
// $include-iframe-type: true; // Enable Iframe-type popups
|
|
294
|
+
// $iframe-padding-top: ($gutter*4); // Iframe padding top
|
|
295
|
+
// $iframe-background: #000; // Background color of iframes
|
|
296
|
+
// $iframe-max-width: $max-width; // Maximum width of iframes
|
|
297
|
+
// $iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
|
|
298
|
+
|
|
299
|
+
// Image-type options
|
|
300
|
+
// $include-image-type: true; // Enable Image-type popups
|
|
301
|
+
// $image-padding-top: ($gutter*4); // Image padding top
|
|
302
|
+
// $image-padding-bottom: ($gutter*4); // Image padding bottom
|
|
303
|
+
// $include-mobile-layout-for-image: true; // Removes paddings from top and bottom
|
|
304
|
+
|
|
305
|
+
// Image caption options
|
|
306
|
+
// $caption-title-color: #F3F3F3; // Caption title color
|
|
307
|
+
// $caption-subtitle-color: #BDBDBD; // Caption subtitle color
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
// =============================================
|
|
2
|
+
// Custom Settings
|
|
3
|
+
// Last Updated:2013-6-24
|
|
4
|
+
// =============================================
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
///////////////////////
|
|
8
|
+
// framework //
|
|
9
|
+
///////////////////////
|
|
10
|
+
|
|
11
|
+
// file paths
|
|
12
|
+
$root_path: "./"; // path to HTML document root (relative from $css_path)
|
|
13
|
+
$images_path: asset-path("images/"); // path to images (relative from $root_path)
|
|
14
|
+
$fonts_path: font-path(""); // path to fonts (relative from $root_path)
|
|
15
|
+
$boxsizing_path: asset-path("groundworkcss/libs/boxsizing.htc"); // path to box sizing polyfill (change to absolute path from HTML document root)
|
|
16
|
+
$PIE_path: asset-path("groundworkcss/libs/PIE.htc"); // path to IE CSS3 polyfill (change to absolute path from HTML document root)
|
|
17
|
+
|
|
18
|
+
// build options
|
|
19
|
+
// $reset: true; // enable CSS reset (recommended)
|
|
20
|
+
// elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
|
|
21
|
+
// $reset-elements: html body
|
|
22
|
+
// div span header footer aside nav menu main section article details
|
|
23
|
+
// h1 h2 h3 h4 h5 h6 p
|
|
24
|
+
// ol ul li dl dt dd
|
|
25
|
+
// em small big strong b u i sub sup del strike
|
|
26
|
+
// blockquote cite pre code time address
|
|
27
|
+
// a img center hr
|
|
28
|
+
// form fieldset legend label input textarea button
|
|
29
|
+
// table caption tbody thead tfoot tr th td
|
|
30
|
+
// iframe object canvas audio video;
|
|
31
|
+
|
|
32
|
+
// $global-tags: true; // enable output in base/_global.scss (recommended)
|
|
33
|
+
|
|
34
|
+
// grid settings
|
|
35
|
+
// $grid-classes: true; // enable output of grid classes (recommended)
|
|
36
|
+
// $numerators: one two three four five six seven eight nine ten eleven twelve;
|
|
37
|
+
// $denominators: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
|
|
38
|
+
// $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
|
|
39
|
+
// $grid-adapters: $one-whole $one-half $one-third $one-fourth $one-fifth;
|
|
40
|
+
// $max-width: 1200px; // maximum container width (i.e. - 960px)
|
|
41
|
+
// $gutter: 10px; // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
|
|
42
|
+
|
|
43
|
+
// flexbox settings
|
|
44
|
+
// $flexbox-classes: true; // enable output of flexbox classes (optional)
|
|
45
|
+
// $flexbox-helpers: flex-wrapper flex-box vertical-center; // for flexbox order use @include flex-order($val);
|
|
46
|
+
|
|
47
|
+
// helper settings
|
|
48
|
+
// $layout-classes: true; // enable output of layout helpers (recommended)
|
|
49
|
+
// $layout-helpers: inline block
|
|
50
|
+
// hidden
|
|
51
|
+
// disabled
|
|
52
|
+
// zero
|
|
53
|
+
// pull-right pull-left clear
|
|
54
|
+
// center;
|
|
55
|
+
|
|
56
|
+
// $positioning-classes: true; // enable output of position helpers (optional)
|
|
57
|
+
|
|
58
|
+
// $size-classes: true; // enable output of size helpers (recommended)
|
|
59
|
+
// $size-helpers: small large;
|
|
60
|
+
|
|
61
|
+
// $typography-classes: true; // enable output of typography helpers (recommended)
|
|
62
|
+
// $typography-helpers: align-top align-right align-bottom align-left align-center justify
|
|
63
|
+
// truncate;
|
|
64
|
+
|
|
65
|
+
// $border-classes: true; // enable output of border helpers (optional)
|
|
66
|
+
// $border-helpers: bordered border-right border-left border-top border-bottom;
|
|
67
|
+
|
|
68
|
+
// round/square
|
|
69
|
+
// $default-radius: 4px;
|
|
70
|
+
// $radius-classes: true; // enable output of radius helpers (optional)
|
|
71
|
+
// $radius-helpers: square round;
|
|
72
|
+
|
|
73
|
+
// rotation
|
|
74
|
+
// $rotation-classes: true; // enable output of rotational helpers (optional)
|
|
75
|
+
// $rotation-helpers: rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
|
|
76
|
+
|
|
77
|
+
// spinners
|
|
78
|
+
// $spin-classes: true; // enable output of spin helpers (optional)
|
|
79
|
+
// $spin-helpers: spin spin-once spin-twice spin-thrice
|
|
80
|
+
// spin-fast spin-fast-once spin-fast-twice spin-fast-thrice
|
|
81
|
+
// spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
|
|
82
|
+
|
|
83
|
+
// spacers
|
|
84
|
+
// $spacer-classes: true; // enable output of spacer helpers (recommended)
|
|
85
|
+
// $spacer-helpers: padded pad-top pad-right pad-bottom pad-left
|
|
86
|
+
// gapped gap-top gap-right gap-bottom gap-left
|
|
87
|
+
// offset offset-top offset-right offset-bottom offset-left;
|
|
88
|
+
|
|
89
|
+
// spacer multipliers
|
|
90
|
+
// $spacer-mod-classes: true; // enable output of spacer modifiers (optional)
|
|
91
|
+
// $spacer-modifiers: double triple;
|
|
92
|
+
|
|
93
|
+
// states
|
|
94
|
+
// $ui-states: disabled info alert warning error success;
|
|
95
|
+
// $button-states: on active disabled info alert warning error success;
|
|
96
|
+
|
|
97
|
+
// typography
|
|
98
|
+
// $type-tags: true; // enable output of type selectors (recommended)
|
|
99
|
+
// $type-elements: h1 h2 h3 h4 h5 h6 p
|
|
100
|
+
// ul ol dl
|
|
101
|
+
// blockquote cite
|
|
102
|
+
// small big em b strong
|
|
103
|
+
// sup sub
|
|
104
|
+
// del strike
|
|
105
|
+
// code pre;
|
|
106
|
+
// $type-colors: true; // enable output of colors classes (optional)
|
|
107
|
+
// $type-classes: false; // enable output of type classes (optional)
|
|
108
|
+
// $type-classnames: h1 h2 h3 h4 h5 h6 p
|
|
109
|
+
// ul ol dl
|
|
110
|
+
// blockquote cite
|
|
111
|
+
// small big large
|
|
112
|
+
// b bold strong
|
|
113
|
+
// em italic
|
|
114
|
+
// sup sub
|
|
115
|
+
// del strike
|
|
116
|
+
// code pre
|
|
117
|
+
// invalid valid
|
|
118
|
+
// unstyled;
|
|
119
|
+
// $styled-lists: true; // enable output of styled lists (optional)
|
|
120
|
+
|
|
121
|
+
// webfonts
|
|
122
|
+
// $webfont-classes: true; // enable output of webfont classes (optional)
|
|
123
|
+
|
|
124
|
+
// buttons
|
|
125
|
+
// $button-tags: true; // enable output of button selectors (recommended)
|
|
126
|
+
// $button-classes: true; // enable output of button classes (recommended)
|
|
127
|
+
// $button-modifiers: small large on active square round block;
|
|
128
|
+
|
|
129
|
+
// navigation
|
|
130
|
+
// $nav-tags: true; // enable output of nav selectors (optional)
|
|
131
|
+
// $nav-classes: true;
|
|
132
|
+
|
|
133
|
+
// tabs
|
|
134
|
+
// $tab-classes: true; // enable output of tab classes (optional)
|
|
135
|
+
|
|
136
|
+
// forms
|
|
137
|
+
// $form-tags: true; // enable output of form selectors (recommended)
|
|
138
|
+
// $form-classes: false; // enable output of form classes (optional)
|
|
139
|
+
// $form-elements: fieldset legend label input textarea;
|
|
140
|
+
|
|
141
|
+
// tiles
|
|
142
|
+
// $tiles: true; // enable output of tile classes (optional)
|
|
143
|
+
// $tile-modifiers: on active small large square round disabled;
|
|
144
|
+
|
|
145
|
+
// message & callout boxes
|
|
146
|
+
// $ui-classes: true;
|
|
147
|
+
// $ui-modifiers: dismissible;
|
|
148
|
+
|
|
149
|
+
// tables
|
|
150
|
+
// $table-tags: true;
|
|
151
|
+
// $table-classes: true;
|
|
152
|
+
|
|
153
|
+
// ARIA role selectors (WIP - nav, buttons, tabs, etc.)
|
|
154
|
+
// $aria-selectors: true; // enable Aria role selectors
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
///////////////////////
|
|
158
|
+
// typography //
|
|
159
|
+
///////////////////////
|
|
160
|
+
|
|
161
|
+
// typography
|
|
162
|
+
$base-font-size: 14px; // base font size for Compass vertical rhythm
|
|
163
|
+
$base-line-height: 18px; // base line height for Compass vertical rhythm
|
|
164
|
+
// $font-family: Helvetica, Arial, Geneva, sans-serif;
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
///////////////////////
|
|
168
|
+
// web fonts //
|
|
169
|
+
///////////////////////
|
|
170
|
+
|
|
171
|
+
// font names (no spaces or special characters, these are used to build selectors)
|
|
172
|
+
// $web-font-names: AverageSans,
|
|
173
|
+
// AmericanTypewriter;
|
|
174
|
+
// font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
|
|
175
|
+
// $web-font-files: average-sans-webfont,
|
|
176
|
+
// americantypewriterstd-bold;
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
///////////////////////
|
|
180
|
+
// colors //
|
|
181
|
+
///////////////////////
|
|
182
|
+
|
|
183
|
+
// base styles
|
|
184
|
+
// $background-color: #ffffff;
|
|
185
|
+
// $font-color: #2b2b2d;
|
|
186
|
+
|
|
187
|
+
// links
|
|
188
|
+
// $link-color: #489AC1;
|
|
189
|
+
// $link-active: #198D98;
|
|
190
|
+
|
|
191
|
+
// selection highlight
|
|
192
|
+
// $selection-color: $link-color;
|
|
193
|
+
// $selection-text: #ffffff;
|
|
194
|
+
|
|
195
|
+
// borders
|
|
196
|
+
// $border-thickness: 1px;
|
|
197
|
+
// $border-style: solid;
|
|
198
|
+
// $border-color: #dddddd;
|
|
199
|
+
// $border: #{$border-thickness} #{$border-style} #{$border-color};
|
|
200
|
+
|
|
201
|
+
// buttons
|
|
202
|
+
// $button-color: #1DABB8;
|
|
203
|
+
// $button-border-color: darken($button-color, 10%);
|
|
204
|
+
// $button-active: #198D98;
|
|
205
|
+
// $button-text: #ffffff;
|
|
206
|
+
// $button-active-text: #ffffff;
|
|
207
|
+
|
|
208
|
+
// info
|
|
209
|
+
// $info-color: #3a87ad; // text only
|
|
210
|
+
// $info-text: #ffffff; // box text
|
|
211
|
+
// $info-background: #d9edf7;
|
|
212
|
+
// $info-border: #bce8f1;
|
|
213
|
+
|
|
214
|
+
// alert
|
|
215
|
+
// $alert-color: #c09853; // text only
|
|
216
|
+
// $alert-text: #ffffff; // box text
|
|
217
|
+
// $alert-background: #fcf8e3;
|
|
218
|
+
// $alert-border: #fbeee0;
|
|
219
|
+
|
|
220
|
+
// error
|
|
221
|
+
// $error-color: #b94a48; // text only
|
|
222
|
+
// $error-text: #ffffff; // box text
|
|
223
|
+
// $error-background: #f2dede;
|
|
224
|
+
// $error-border: #eed3d7;
|
|
225
|
+
|
|
226
|
+
// warning
|
|
227
|
+
// $warning-color: #FF971E; // text only
|
|
228
|
+
// $warning-text: #ffffff; // box text
|
|
229
|
+
// $warning-background: #FFE5C7;
|
|
230
|
+
// $warning-border: #FFDBB3;
|
|
231
|
+
|
|
232
|
+
// success
|
|
233
|
+
// $success-color: #468847; // text only
|
|
234
|
+
// $success-text: #ffffff; // box text
|
|
235
|
+
// $success-background: #dff0d8;
|
|
236
|
+
// $success-border: #d6e9c6;
|
|
237
|
+
|
|
238
|
+
// disabled
|
|
239
|
+
// $disabled-color: #808080; // text only
|
|
240
|
+
// $disabled-text: #ffffff; // box text
|
|
241
|
+
// $disabled-background: lighten($disabled-color, 20%);
|
|
242
|
+
// $disabled-border: darken($disabled-color, 10%);
|
|
243
|
+
|
|
244
|
+
// modifier states
|
|
245
|
+
// $state-name: "info" "alert" "warning" "error" "success" "disabled" ;
|
|
246
|
+
// $state-code: $info-color $alert-color $warning-color $error-color $success-color $disabled-color ;
|
|
247
|
+
// $state-text: $info-text $alert-text $warning-text $error-text $success-text $disabled-text ;
|
|
248
|
+
|
|
249
|
+
// modifier colors
|
|
250
|
+
// $green: #2ecc71;
|
|
251
|
+
// $blue: #3498db;
|
|
252
|
+
// $purple: #9b59b6;
|
|
253
|
+
// $yellow: #f1c40f;
|
|
254
|
+
// $orange: #e67e22;
|
|
255
|
+
// $red: #e74c3c;
|
|
256
|
+
// $pink: #f02475;
|
|
257
|
+
// $turquoise: #1abc9c;
|
|
258
|
+
// $asphalt: #34495e;
|
|
259
|
+
|
|
260
|
+
// $modifier-name: "green" "blue" "purple" "yellow" "orange" "red" "pink" "turquoise" "asphalt" ;
|
|
261
|
+
// $modifier-code: $green $blue $purple $yellow $orange $red $pink $turquoise $asphalt ;
|
|
262
|
+
// $modifier-text: $white $white $white $white $white $white $white $white $white ;
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
///////////////////////
|
|
266
|
+
// modals //
|
|
267
|
+
///////////////////////
|
|
268
|
+
|
|
269
|
+
// overlay
|
|
270
|
+
// $overlay-color: #0b0b0b; // Color of overlay screen
|
|
271
|
+
// $overlay-opacity: 0.5; // Opacity of overlay screen
|
|
272
|
+
// $shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
|
|
273
|
+
|
|
274
|
+
// spacing
|
|
275
|
+
// $popup-padding-left: 8px; // Padding from left and from right side
|
|
276
|
+
// $popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px
|
|
277
|
+
|
|
278
|
+
// $z-index-base: 500; // Base z-index of popup
|
|
279
|
+
|
|
280
|
+
// controls
|
|
281
|
+
// $include-arrows: true; // Include styles for nav arrows
|
|
282
|
+
// $controls-opacity: 0.65; // Opacity of controls
|
|
283
|
+
// $controls-color: #FFF; // Color of controls
|
|
284
|
+
// $inner-close-icon-color: #333; // Color of close button when inside
|
|
285
|
+
// $controls-text-color: #CCC; // Color of preloader and '1 of X' indicator
|
|
286
|
+
// $controls-text-color-hover: #FFF; // Hover color of preloader and '1 of X' indicator
|
|
287
|
+
// $IE7support: true; // Very basic IE7 support
|
|
288
|
+
|
|
289
|
+
// Inline-type options
|
|
290
|
+
// $modal-max-width: $max-width; // Maximum width of inline modals
|
|
291
|
+
|
|
292
|
+
// Iframe-type options
|
|
293
|
+
// $include-iframe-type: true; // Enable Iframe-type popups
|
|
294
|
+
// $iframe-padding-top: ($gutter*4); // Iframe padding top
|
|
295
|
+
// $iframe-background: #000; // Background color of iframes
|
|
296
|
+
// $iframe-max-width: $max-width; // Maximum width of iframes
|
|
297
|
+
// $iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
|
|
298
|
+
|
|
299
|
+
// Image-type options
|
|
300
|
+
// $include-image-type: true; // Enable Image-type popups
|
|
301
|
+
// $image-padding-top: ($gutter*4); // Image padding top
|
|
302
|
+
// $image-padding-bottom: ($gutter*4); // Image padding bottom
|
|
303
|
+
// $include-mobile-layout-for-image: true; // Removes paddings from top and bottom
|
|
304
|
+
|
|
305
|
+
// Image caption options
|
|
306
|
+
// $caption-title-color: #F3F3F3; // Caption title color
|
|
307
|
+
// $caption-subtitle-color: #BDBDBD; // Caption subtitle color
|
|
@@ -13,12 +13,13 @@
|
|
|
13
13
|
// $images_path: "images/"; // path to images (relative from $root_path)
|
|
14
14
|
// $fonts_path: "fonts/"; // path to fonts (relative from $root_path)
|
|
15
15
|
// $boxsizing_path: "/js/libs/boxsizing.htc"; // path to box sizing polyfill (change to absolute path from HTML document root)
|
|
16
|
+
// $PIE_path: "/js/libs/PIE.htc" !default; // path to IE CSS3 polyfill (change to absolute path from HTML document root)
|
|
16
17
|
|
|
17
18
|
// build options
|
|
18
19
|
// $reset: true; // enable CSS reset (recommended)
|
|
19
20
|
// elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
|
|
20
21
|
// $reset-elements: html body
|
|
21
|
-
// div span header footer aside nav menu section article details
|
|
22
|
+
// div span header footer aside nav menu main section article details
|
|
22
23
|
// h1 h2 h3 h4 h5 h6 p
|
|
23
24
|
// ol ul li dl dt dd
|
|
24
25
|
// em small big strong b u i sub sup del strike
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
|
|
42
43
|
// flexbox settings
|
|
43
44
|
// $flexbox-classes: true; // enable output of flexbox classes (optional)
|
|
44
|
-
// $flexbox-helpers: flex-wrapper flex-box vertical-center;
|
|
45
|
+
// $flexbox-helpers: flex-wrapper flex-box vertical-center; // for flexbox order use @include flex-order($val);
|
|
45
46
|
|
|
46
47
|
// helper settings
|
|
47
48
|
// $layout-classes: true; // enable output of layout helpers (recommended)
|