textile_manual 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,621 @@
1
+ // Foundation for Sites Settings
2
+ // -----------------------------
3
+ //
4
+ // Table of Contents:
5
+ //
6
+ // 1. Global
7
+ // 2. Breakpoints
8
+ // 3. The Grid
9
+ // 4. Base Typography
10
+ // 5. Typography Helpers
11
+ // 6. Abide
12
+ // 7. Accordion
13
+ // 8. Accordion Menu
14
+ // 9. Badge
15
+ // 10. Breadcrumbs
16
+ // 11. Button
17
+ // 12. Button Group
18
+ // 13. Callout
19
+ // 14. Card
20
+ // 15. Close Button
21
+ // 16. Drilldown
22
+ // 17. Dropdown
23
+ // 18. Dropdown Menu
24
+ // 19. Forms
25
+ // 20. Label
26
+ // 21. Media Object
27
+ // 22. Menu
28
+ // 23. Meter
29
+ // 24. Off-canvas
30
+ // 25. Orbit
31
+ // 26. Pagination
32
+ // 27. Progress Bar
33
+ // 28. Responsive Embed
34
+ // 29. Reveal
35
+ // 30. Slider
36
+ // 31. Switch
37
+ // 32. Table
38
+ // 33. Tabs
39
+ // 34. Thumbnail
40
+ // 35. Title Bar
41
+ // 36. Tooltip
42
+ // 37. Top Bar
43
+
44
+ @import 'util/util';
45
+
46
+ // 1. Global
47
+ // ---------
48
+
49
+ $global-font-size: 100%;
50
+ $global-width: rem-calc(1200);
51
+ $global-lineheight: 1.5;
52
+ $foundation-palette: (
53
+ primary: #1779ba,
54
+ secondary: #767676,
55
+ success: #3adb76,
56
+ warning: #ffae00,
57
+ alert: #cc4b37,
58
+ );
59
+ $light-gray: #e6e6e6;
60
+ $medium-gray: #cacaca;
61
+ $dark-gray: #8a8a8a;
62
+ $black: #0a0a0a;
63
+ $white: #fefefe;
64
+ $body-background: $white;
65
+ $body-font-color: $black;
66
+ $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
67
+ $body-antialiased: true;
68
+ $global-margin: 1rem;
69
+ $global-padding: 1rem;
70
+ $global-weight-normal: normal;
71
+ $global-weight-bold: bold;
72
+ $global-radius: 0;
73
+ $global-text-direction: ltr;
74
+ $global-flexbox: false;
75
+ $print-transparent-backgrounds: true;
76
+
77
+ @include add-foundation-colors;
78
+
79
+ // 2. Breakpoints
80
+ // --------------
81
+
82
+ $breakpoints: (
83
+ small: 0,
84
+ medium: 640px,
85
+ large: 1024px,
86
+ xlarge: 1200px,
87
+ xxlarge: 1440px,
88
+ );
89
+ $print-breakpoint: large;
90
+ $breakpoint-classes: (small medium large);
91
+
92
+ // 3. The Grid
93
+ // -----------
94
+
95
+ $grid-row-width: $global-width;
96
+ $grid-column-count: 12;
97
+ $grid-column-gutter: (
98
+ small: 20px,
99
+ medium: 30px,
100
+ );
101
+ $grid-column-align-edge: true;
102
+ $block-grid-max: 8;
103
+
104
+ // 4. Base Typography
105
+ // ------------------
106
+
107
+ $header-font-family: $body-font-family;
108
+ $header-font-weight: $global-weight-normal;
109
+ $header-font-style: normal;
110
+ $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
111
+ $header-color: inherit;
112
+ $header-lineheight: 1.4;
113
+ $header-margin-bottom: 0.5rem;
114
+ $header-styles: (
115
+ small: (
116
+ 'h1': ('font-size': 24),
117
+ 'h2': ('font-size': 20),
118
+ 'h3': ('font-size': 19),
119
+ 'h4': ('font-size': 18),
120
+ 'h5': ('font-size': 17),
121
+ 'h6': ('font-size': 16),
122
+ ),
123
+ medium: (
124
+ 'h1': ('font-size': 48),
125
+ 'h2': ('font-size': 40),
126
+ 'h3': ('font-size': 31),
127
+ 'h4': ('font-size': 25),
128
+ 'h5': ('font-size': 20),
129
+ 'h6': ('font-size': 16),
130
+ ),
131
+ );
132
+ $header-text-rendering: optimizeLegibility;
133
+ $small-font-size: 80%;
134
+ $header-small-font-color: $medium-gray;
135
+ $paragraph-lineheight: 1.6;
136
+ $paragraph-margin-bottom: 1rem;
137
+ $paragraph-text-rendering: optimizeLegibility;
138
+ $code-color: $black;
139
+ $code-font-family: $font-family-monospace;
140
+ $code-font-weight: $global-weight-normal;
141
+ $code-background: $light-gray;
142
+ $code-border: 1px solid $medium-gray;
143
+ $code-padding: rem-calc(2 5 1);
144
+ $anchor-color: $primary-color;
145
+ $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
146
+ $anchor-text-decoration: none;
147
+ $anchor-text-decoration-hover: none;
148
+ $hr-width: $global-width;
149
+ $hr-border: 1px solid $medium-gray;
150
+ $hr-margin: rem-calc(20) auto;
151
+ $list-lineheight: $paragraph-lineheight;
152
+ $list-margin-bottom: $paragraph-margin-bottom;
153
+ $list-style-type: disc;
154
+ $list-style-position: outside;
155
+ $list-side-margin: 1.25rem;
156
+ $list-nested-side-margin: 1.25rem;
157
+ $defnlist-margin-bottom: 1rem;
158
+ $defnlist-term-weight: $global-weight-bold;
159
+ $defnlist-term-margin-bottom: 0.3rem;
160
+ $blockquote-color: $dark-gray;
161
+ $blockquote-padding: rem-calc(9 20 0 19);
162
+ $blockquote-border: 1px solid $medium-gray;
163
+ $cite-font-size: rem-calc(13);
164
+ $cite-color: $dark-gray;
165
+ $cite-pseudo-content: '\2014 \0020';
166
+ $keystroke-font: $font-family-monospace;
167
+ $keystroke-color: $black;
168
+ $keystroke-background: $light-gray;
169
+ $keystroke-padding: rem-calc(2 4 0);
170
+ $keystroke-radius: $global-radius;
171
+ $abbr-underline: 1px dotted $black;
172
+
173
+ // 5. Typography Helpers
174
+ // ---------------------
175
+
176
+ $lead-font-size: $global-font-size * 1.25;
177
+ $lead-lineheight: 1.6;
178
+ $subheader-lineheight: 1.4;
179
+ $subheader-color: $dark-gray;
180
+ $subheader-font-weight: $global-weight-normal;
181
+ $subheader-margin-top: 0.2rem;
182
+ $subheader-margin-bottom: 0.5rem;
183
+ $stat-font-size: 2.5rem;
184
+
185
+ // 6. Abide
186
+ // --------
187
+
188
+ $abide-inputs: true;
189
+ $abide-labels: true;
190
+ $input-background-invalid: get-color(alert);
191
+ $form-label-color-invalid: get-color(alert);
192
+ $input-error-color: get-color(alert);
193
+ $input-error-font-size: rem-calc(12);
194
+ $input-error-font-weight: $global-weight-bold;
195
+
196
+ // 7. Accordion
197
+ // ------------
198
+
199
+ $accordion-background: $white;
200
+ $accordion-plusminus: true;
201
+ $accordion-title-font-size: rem-calc(12);
202
+ $accordion-item-color: $primary-color;
203
+ $accordion-item-background-hover: $light-gray;
204
+ $accordion-item-padding: 1.25rem 1rem;
205
+ $accordion-content-background: $white;
206
+ $accordion-content-border: 1px solid $light-gray;
207
+ $accordion-content-color: $body-font-color;
208
+ $accordion-content-padding: 1rem;
209
+
210
+ // 8. Accordion Menu
211
+ // -----------------
212
+
213
+ $accordionmenu-arrows: true;
214
+ $accordionmenu-arrow-color: $primary-color;
215
+ $accordionmenu-arrow-size: 6px;
216
+
217
+ // 9. Badge
218
+ // --------
219
+
220
+ $badge-background: $primary-color;
221
+ $badge-color: $white;
222
+ $badge-color-alt: $black;
223
+ $badge-palette: $foundation-palette;
224
+ $badge-padding: 0.3em;
225
+ $badge-minwidth: 2.1em;
226
+ $badge-font-size: 0.6rem;
227
+
228
+ // 10. Breadcrumbs
229
+ // ---------------
230
+
231
+ $breadcrumbs-margin: 0 0 $global-margin 0;
232
+ $breadcrumbs-item-font-size: rem-calc(11);
233
+ $breadcrumbs-item-color: $primary-color;
234
+ $breadcrumbs-item-color-current: $black;
235
+ $breadcrumbs-item-color-disabled: $medium-gray;
236
+ $breadcrumbs-item-margin: 0.75rem;
237
+ $breadcrumbs-item-uppercase: true;
238
+ $breadcrumbs-item-slash: true;
239
+
240
+ // 11. Button
241
+ // ----------
242
+
243
+ $button-padding: 0.85em 1em;
244
+ $button-margin: 0 0 $global-margin 0;
245
+ $button-fill: solid;
246
+ $button-background: $primary-color;
247
+ $button-background-hover: scale-color($button-background, $lightness: -15%);
248
+ $button-color: $white;
249
+ $button-color-alt: $black;
250
+ $button-radius: $global-radius;
251
+ $button-sizes: (
252
+ tiny: 0.6rem,
253
+ small: 0.75rem,
254
+ default: 0.9rem,
255
+ large: 1.25rem,
256
+ );
257
+ $button-palette: $foundation-palette;
258
+ $button-opacity-disabled: 0.25;
259
+ $button-background-hover-lightness: -20%;
260
+ $button-hollow-hover-lightness: -50%;
261
+ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
262
+
263
+ // 12. Button Group
264
+ // ----------------
265
+
266
+ $buttongroup-margin: 1rem;
267
+ $buttongroup-spacing: 1px;
268
+ $buttongroup-child-selector: '.button';
269
+ $buttongroup-expand-max: 6;
270
+ $buttongroup-radius-on-each: true;
271
+
272
+ // 13. Callout
273
+ // -----------
274
+
275
+ $callout-background: $white;
276
+ $callout-background-fade: 85%;
277
+ $callout-border: 1px solid rgba($black, 0.25);
278
+ $callout-margin: 0 0 1rem 0;
279
+ $callout-padding: 1rem;
280
+ $callout-font-color: $body-font-color;
281
+ $callout-font-color-alt: $body-background;
282
+ $callout-radius: $global-radius;
283
+ $callout-link-tint: 30%;
284
+
285
+ // 14. Card
286
+ // --------
287
+
288
+ $card-background: $white;
289
+ $card-font-color: $body-font-color;
290
+ $card-divider-background: $light-gray;
291
+ $card-border: 1px solid $light-gray;
292
+ $card-shadow: none;
293
+ $card-border-radius: $global-radius;
294
+ $card-padding: $global-padding;
295
+ $card-margin: $global-margin;
296
+
297
+ // 15. Close Button
298
+ // ----------------
299
+
300
+ $closebutton-position: right top;
301
+ $closebutton-offset-horizontal: (
302
+ small: 0.66rem,
303
+ medium: 1rem,
304
+ );
305
+ $closebutton-offset-vertical: (
306
+ small: 0.33em,
307
+ medium: 0.5rem,
308
+ );
309
+ $closebutton-size: (
310
+ small: 1.5em,
311
+ medium: 2em,
312
+ );
313
+ $closebutton-lineheight: 1;
314
+ $closebutton-color: $dark-gray;
315
+ $closebutton-color-hover: $black;
316
+
317
+ // 16. Drilldown
318
+ // -------------
319
+
320
+ $drilldown-transition: transform 0.15s linear;
321
+ $drilldown-arrows: true;
322
+ $drilldown-arrow-color: $primary-color;
323
+ $drilldown-arrow-size: 6px;
324
+ $drilldown-background: $white;
325
+
326
+ // 17. Dropdown
327
+ // ------------
328
+
329
+ $dropdown-padding: 1rem;
330
+ $dropdown-background: $body-background;
331
+ $dropdown-border: 1px solid $medium-gray;
332
+ $dropdown-font-size: 1rem;
333
+ $dropdown-width: 300px;
334
+ $dropdown-radius: $global-radius;
335
+ $dropdown-sizes: (
336
+ tiny: 100px,
337
+ small: 200px,
338
+ large: 400px,
339
+ );
340
+
341
+ // 18. Dropdown Menu
342
+ // -----------------
343
+
344
+ $dropdownmenu-arrows: true;
345
+ $dropdownmenu-arrow-color: $anchor-color;
346
+ $dropdownmenu-arrow-size: 6px;
347
+ $dropdownmenu-min-width: 200px;
348
+ $dropdownmenu-background: $white;
349
+ $dropdownmenu-border: 1px solid $medium-gray;
350
+
351
+ // 19. Forms
352
+ // ---------
353
+
354
+ $fieldset-border: 1px solid $medium-gray;
355
+ $fieldset-padding: rem-calc(20);
356
+ $fieldset-margin: rem-calc(18 0);
357
+ $legend-padding: rem-calc(0 3);
358
+ $form-spacing: rem-calc(16);
359
+ $helptext-color: $black;
360
+ $helptext-font-size: rem-calc(13);
361
+ $helptext-font-style: italic;
362
+ $input-prefix-color: $black;
363
+ $input-prefix-background: $light-gray;
364
+ $input-prefix-border: 1px solid $medium-gray;
365
+ $input-prefix-padding: 1rem;
366
+ $form-label-color: $black;
367
+ $form-label-font-size: rem-calc(14);
368
+ $form-label-font-weight: $global-weight-normal;
369
+ $form-label-line-height: 1.8;
370
+ $select-background: $white;
371
+ $select-triangle-color: $dark-gray;
372
+ $select-radius: $global-radius;
373
+ $input-color: $black;
374
+ $input-placeholder-color: $medium-gray;
375
+ $input-font-family: inherit;
376
+ $input-font-size: rem-calc(16);
377
+ $input-font-weight: $global-weight-normal;
378
+ $input-background: $white;
379
+ $input-background-focus: $white;
380
+ $input-background-disabled: $light-gray;
381
+ $input-border: 1px solid $medium-gray;
382
+ $input-border-focus: 1px solid $dark-gray;
383
+ $input-shadow: inset 0 1px 2px rgba($black, 0.1);
384
+ $input-shadow-focus: 0 0 5px $medium-gray;
385
+ $input-cursor-disabled: not-allowed;
386
+ $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
387
+ $input-number-spinners: true;
388
+ $input-radius: $global-radius;
389
+ $form-button-radius: $global-radius;
390
+
391
+ // 20. Label
392
+ // ---------
393
+
394
+ $label-background: $primary-color;
395
+ $label-color: $white;
396
+ $label-color-alt: $black;
397
+ $label-palette: $foundation-palette;
398
+ $label-font-size: 0.8rem;
399
+ $label-padding: 0.33333rem 0.5rem;
400
+ $label-radius: $global-radius;
401
+
402
+ // 21. Media Object
403
+ // ----------------
404
+
405
+ $mediaobject-margin-bottom: $global-margin;
406
+ $mediaobject-section-padding: $global-padding;
407
+ $mediaobject-image-width-stacked: 100%;
408
+
409
+ // 22. Menu
410
+ // --------
411
+
412
+ $menu-margin: 0;
413
+ $menu-margin-nested: 1rem;
414
+ $menu-item-padding: 0.7rem 1rem;
415
+ $menu-item-color-active: $white;
416
+ $menu-item-background-active: get-color(primary);
417
+ $menu-icon-spacing: 0.25rem;
418
+ $menu-item-background-hover: $light-gray;
419
+ $menu-border: $light-gray;
420
+
421
+ // 23. Meter
422
+ // ---------
423
+
424
+ $meter-height: 1rem;
425
+ $meter-radius: $global-radius;
426
+ $meter-background: $medium-gray;
427
+ $meter-fill-good: $success-color;
428
+ $meter-fill-medium: $warning-color;
429
+ $meter-fill-bad: $alert-color;
430
+
431
+ // 24. Off-canvas
432
+ // --------------
433
+
434
+ $offcanvas-size: 250px;
435
+ $offcanvas-vertical-size: 250px;
436
+ $offcanvas-background: $light-gray;
437
+ $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
438
+ $offcanvas-push-zindex: 1;
439
+ $offcanvas-overlap-zindex: 10;
440
+ $offcanvas-reveal-zindex: 1;
441
+ $offcanvas-transition-length: 0.5s;
442
+ $offcanvas-transition-timing: ease;
443
+ $offcanvas-fixed-reveal: true;
444
+ $offcanvas-exit-background: rgba($white, 0.25);
445
+ $maincontent-class: 'off-canvas-content';
446
+
447
+ // 25. Orbit
448
+ // ---------
449
+
450
+ $orbit-bullet-background: $medium-gray;
451
+ $orbit-bullet-background-active: $dark-gray;
452
+ $orbit-bullet-diameter: 1.2rem;
453
+ $orbit-bullet-margin: 0.1rem;
454
+ $orbit-bullet-margin-top: 0.8rem;
455
+ $orbit-bullet-margin-bottom: 0.8rem;
456
+ $orbit-caption-background: rgba($black, 0.5);
457
+ $orbit-caption-padding: 1rem;
458
+ $orbit-control-background-hover: rgba($black, 0.5);
459
+ $orbit-control-padding: 1rem;
460
+ $orbit-control-zindex: 10;
461
+
462
+ // 26. Pagination
463
+ // --------------
464
+
465
+ $pagination-font-size: rem-calc(14);
466
+ $pagination-margin-bottom: $global-margin;
467
+ $pagination-item-color: $black;
468
+ $pagination-item-padding: rem-calc(3 10);
469
+ $pagination-item-spacing: rem-calc(1);
470
+ $pagination-radius: $global-radius;
471
+ $pagination-item-background-hover: $light-gray;
472
+ $pagination-item-background-current: $primary-color;
473
+ $pagination-item-color-current: $white;
474
+ $pagination-item-color-disabled: $medium-gray;
475
+ $pagination-ellipsis-color: $black;
476
+ $pagination-mobile-items: false;
477
+ $pagination-mobile-current-item: false;
478
+ $pagination-arrows: true;
479
+
480
+ // 27. Progress Bar
481
+ // ----------------
482
+
483
+ $progress-height: 1rem;
484
+ $progress-background: $medium-gray;
485
+ $progress-margin-bottom: $global-margin;
486
+ $progress-meter-background: $primary-color;
487
+ $progress-radius: $global-radius;
488
+
489
+ // 28. Responsive Embed
490
+ // --------------------
491
+
492
+ $responsive-embed-margin-bottom: rem-calc(16);
493
+ $responsive-embed-ratios: (
494
+ default: 4 by 3,
495
+ widescreen: 16 by 9,
496
+ );
497
+
498
+ // 29. Reveal
499
+ // ----------
500
+
501
+ $reveal-background: $white;
502
+ $reveal-width: 600px;
503
+ $reveal-max-width: $global-width;
504
+ $reveal-padding: $global-padding;
505
+ $reveal-border: 1px solid $medium-gray;
506
+ $reveal-radius: $global-radius;
507
+ $reveal-zindex: 1005;
508
+ $reveal-overlay-background: rgba($black, 0.45);
509
+
510
+ // 30. Slider
511
+ // ----------
512
+
513
+ $slider-width-vertical: 0.5rem;
514
+ $slider-transition: all 0.2s ease-in-out;
515
+ $slider-height: 0.5rem;
516
+ $slider-background: $light-gray;
517
+ $slider-fill-background: $medium-gray;
518
+ $slider-handle-height: 1.4rem;
519
+ $slider-handle-width: 1.4rem;
520
+ $slider-handle-background: $primary-color;
521
+ $slider-opacity-disabled: 0.25;
522
+ $slider-radius: $global-radius;
523
+
524
+ // 31. Switch
525
+ // ----------
526
+
527
+ $switch-background: $medium-gray;
528
+ $switch-background-active: $primary-color;
529
+ $switch-height: 2rem;
530
+ $switch-height-tiny: 1.5rem;
531
+ $switch-height-small: 1.75rem;
532
+ $switch-height-large: 2.5rem;
533
+ $switch-radius: $global-radius;
534
+ $switch-margin: $global-margin;
535
+ $switch-paddle-background: $white;
536
+ $switch-paddle-offset: 0.25rem;
537
+ $switch-paddle-radius: $global-radius;
538
+ $switch-paddle-transition: all 0.25s ease-out;
539
+
540
+ // 32. Table
541
+ // ---------
542
+
543
+ $table-background: $white;
544
+ $table-color-scale: 5%;
545
+ $table-border: 1px solid smart-scale($table-background, $table-color-scale);
546
+ $table-padding: rem-calc(8 10 10);
547
+ $table-hover-scale: 2%;
548
+ $table-row-hover: darken($table-background, $table-hover-scale);
549
+ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
550
+ $table-is-striped: true;
551
+ $table-striped-background: smart-scale($table-background, $table-color-scale);
552
+ $table-stripe: even;
553
+ $table-head-background: smart-scale($table-background, $table-color-scale / 2);
554
+ $table-head-row-hover: darken($table-head-background, $table-hover-scale);
555
+ $table-foot-background: smart-scale($table-background, $table-color-scale);
556
+ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
557
+ $table-head-font-color: $body-font-color;
558
+ $table-foot-font-color: $body-font-color;
559
+ $show-header-for-stacked: false;
560
+
561
+ // 33. Tabs
562
+ // --------
563
+
564
+ $tab-margin: 0;
565
+ $tab-background: $white;
566
+ $tab-color: $primary-color;
567
+ $tab-background-active: $light-gray;
568
+ $tab-active-color: $primary-color;
569
+ $tab-item-font-size: rem-calc(12);
570
+ $tab-item-background-hover: $white;
571
+ $tab-item-padding: 1.25rem 1.5rem;
572
+ $tab-expand-max: 6;
573
+ $tab-content-background: $white;
574
+ $tab-content-border: $light-gray;
575
+ $tab-content-color: $body-font-color;
576
+ $tab-content-padding: 1rem;
577
+
578
+ // 34. Thumbnail
579
+ // -------------
580
+
581
+ $thumbnail-border: solid 4px $white;
582
+ $thumbnail-margin-bottom: $global-margin;
583
+ $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
584
+ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
585
+ $thumbnail-transition: box-shadow 200ms ease-out;
586
+ $thumbnail-radius: $global-radius;
587
+
588
+ // 35. Title Bar
589
+ // -------------
590
+
591
+ $titlebar-background: $black;
592
+ $titlebar-color: $white;
593
+ $titlebar-padding: 0.5rem;
594
+ $titlebar-text-font-weight: bold;
595
+ $titlebar-icon-color: $white;
596
+ $titlebar-icon-color-hover: $medium-gray;
597
+ $titlebar-icon-spacing: 0.25rem;
598
+
599
+ // 36. Tooltip
600
+ // -----------
601
+
602
+ $has-tip-font-weight: $global-weight-bold;
603
+ $has-tip-border-bottom: dotted 1px $dark-gray;
604
+ $tooltip-background-color: $black;
605
+ $tooltip-color: $white;
606
+ $tooltip-padding: 0.75rem;
607
+ $tooltip-font-size: $small-font-size;
608
+ $tooltip-pip-width: 0.75rem;
609
+ $tooltip-pip-height: $tooltip-pip-width * 0.866;
610
+ $tooltip-radius: $global-radius;
611
+
612
+ // 37. Top Bar
613
+ // -----------
614
+
615
+ $topbar-padding: 0.5rem;
616
+ $topbar-background: $light-gray;
617
+ $topbar-submenu-background: $topbar-background;
618
+ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
619
+ $topbar-input-width: 200px;
620
+ $topbar-unstack-breakpoint: medium;
621
+