modularis 0.1 → 1.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.
@@ -1,1192 +0,0 @@
1
- //
2
- // Modularis Variables
3
- //
4
-
5
- //// The default font-size is set to 100% of the browser style sheet (usually 16px)
6
- //// for compatibility with brower-based text zoom or user-set defaults.
7
- $base-font-size: 100% !default;
8
-
9
- //// $base-line-height is 24px while $base-font-size is 16px
10
- //// $base-line-height: 150%;
11
-
12
- //// This is the default html and body font-size for the base em value.
13
-
14
- //// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
15
- //// If you want your base font-size to be a different size and not have it effect grid size too,
16
- //// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
17
- $em-base: 16px !default;
18
-
19
- //// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
20
- @function emCalc($pxWidth) {
21
- @return $pxWidth / $em-base * 1em;
22
- }
23
-
24
- //// Various global styles
25
-
26
- // $body-bg: #fff;
27
- // $body-font-color: #222;
28
- // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
29
- // $body-font-weight: normal;
30
- // $body-font-style: normal;
31
-
32
- //// Font-smoothing
33
-
34
- // $font-smoothing: antialiased;
35
-
36
- //// Text direction settings
37
-
38
- // $text-direction: ltr;
39
-
40
- //// Colors
41
-
42
- // $primary-color: #2ba6cb;
43
- // $secondary-color: #e9e9e9;
44
- // $alert-color: #c60f13;
45
- // $success-color: #5da423;
46
-
47
- //// Make sure border radius matches unless we want it different.
48
-
49
- // $global-radius: 3px;
50
- // $global-rounded: 1000px;
51
-
52
- //// Inset shadow shiny edges and depressions.
53
-
54
- // $shiny-edge-size: 0 1px 0;
55
- // $shiny-edge-color: rgba(#fff, .5);
56
- // $shiny-edge-active-color: rgba(#000, .2);
57
-
58
- //// Control whether or not CSS classes come through in the CSS files.
59
-
60
- // $include-html-classes: true;
61
- // $include-print-styles: true;
62
- // $include-html-grid-classes: $include-html-classes;
63
- // $include-html-visibility-classes: $include-html-classes;
64
- // $include-html-button-classes: $include-html-classes;
65
- // $include-html-form-classes: $include-html-classes;
66
- // $include-html-media-classes: $include-html-classes;
67
- // $include-html-section-classes: $include-html-classes;
68
- // $include-html-reveal-classes: $include-html-classes;
69
- // $include-html-alert-classes: $include-html-classes;
70
- // $include-html-nav-classes: $include-html-classes;
71
- // $include-html-label-classes: $include-html-classes;
72
- // $include-html-panel-classes: $include-html-classes;
73
- // $include-html-pricing-classes: $include-html-classes;
74
- // $include-html-progress-classes: $include-html-classes;
75
- // $include-html-magellan-classes: $include-html-classes;
76
-
77
- //// Media Queries
78
-
79
- // $small-screen: emCalc(768px);
80
- // $medium-screen: emCalc(1280px);
81
- // $large-screen: emCalc(1440px);
82
-
83
- // $screen: "only screen";
84
- // $small: "only screen and (min-width:"#{$small-screen}")";
85
- // $medium: "only screen and (min-width:"#{$medium-screen}")";
86
- // $large: "only screen and (min-width:"#{$large-screen}")";
87
- // $landscape: "only screen and (orientation: landscape)";
88
- // $portrait: "only screen and (orientation: portrait)";
89
-
90
- //
91
- // Grid Variables
92
- //
93
-
94
- // $row-width: emCalc(1000px);
95
- // $column-gutter: emCalc(30px);
96
- // $total-columns: 12;
97
-
98
- //
99
- // Block Grid Variables
100
- //
101
-
102
- //// Maximum number of block grid elements per row
103
-
104
- // $block-grid-elements: 12;
105
- // $block-grid-default-spacing: 10px;
106
-
107
- //// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
108
-
109
- // $block-grid-media-queries: true;
110
-
111
- //
112
- // Typography Variables
113
- //
114
-
115
- //// Heading font styles
116
-
117
- // $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
118
- // $header-font-weight: bold;
119
- // $header-font-style: normal;
120
- // $header-font-color: #222;
121
- // $header-line-height: 1.4;
122
- // $header-top-margin: .2em;
123
- // $header-bottom-margin: .5em;
124
- // $header-text-rendering: optimizeLegibility;
125
-
126
- //// Heading font sizes
127
-
128
- // $h1-font-size: emCalc(44px);
129
- // $h2-font-size: emCalc(37px);
130
- // $h3-font-size: emCalc(27px);
131
- // $h4-font-size: emCalc(23px);
132
- // $h5-font-size: emCalc(18px);
133
- // $h6-font-size: 1em;
134
-
135
- //// Subheaders
136
-
137
- // $subheader-line-height: 1.4;
138
- // $subheader-font-color: lighten($header-font-color, 30%);
139
- // $subheader-font-weight: 300;
140
- // $subheader-top-margin: .2em;
141
- // $subheader-bottom-margin: .5em;
142
-
143
- //// <small> styling
144
-
145
- // $small-font-size: 60%;
146
- // $small-font-color: lighten($header-font-color, 30%);
147
-
148
- //// Paragraphs
149
-
150
- // $paragraph-font-family: inherit;
151
- // $paragraph-font-weight: normal;
152
- // $paragraph-font-size: 1em;
153
- // $paragraph-line-height: 1.6;
154
- // $paragraph-margin-bottom: emCalc(20px);
155
- // $paragraph-aside-font-size: emCalc(14px);
156
- // $paragraph-aside-line-height: 1.35;
157
- // $paragraph-aside-font-style: italic;
158
-
159
- //// <code> tags
160
-
161
- // $code-color: darken($alert-color, 15%);
162
- // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
163
- // $code-font-weight: bold;
164
-
165
- //// Anchors
166
-
167
- // $anchor-text-decoration: none;
168
- // $anchor-font-color: $primary-color;
169
- // $anchor-font-color-hover: darken($primary-color, 5%);
170
-
171
- //// <hr> element
172
-
173
- // $hr-border-width: 1px;
174
- // $hr-border-style: solid;
175
- // $hr-border-color: #ddd;
176
- // $hr-margin: emCalc(20px);
177
-
178
- //// Lists
179
-
180
- // $list-style-position: outside;
181
- // $list-side-margin: emCalc(18px);
182
- // $definition-list-header-weight: bold;
183
- // $definition-list-header-margin-bottom: .3em;
184
- // $definition-list-margin-bottom: emCalc(12px);
185
-
186
- //// Blockquotes
187
-
188
- // $blockquote-font-color: lighten($header-font-color, 30%);
189
- // $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
190
- // $blockquote-border: 1px solid #ddd;
191
- // $blockquote-cite-font-size: emCalc(13px);
192
- // $blockquote-cite-font-color: lighten($header-font-color, 20%);
193
- // $blockquote-cite-link-color: $blockquote-cite-font-color;
194
-
195
- //// Acronym
196
-
197
- // $acronym-underline: 1px dotted #ddd;
198
-
199
- //// Padding and margin
200
-
201
- // $microformat-padding: emCalc(10px) emCalc(12px);
202
- // $microformat-margin: 0 0 emCalc(20px) 0;
203
-
204
- //// Border styles
205
-
206
- // $microformat-border-width: 1px;
207
- // $microformat-border-style: solid;
208
- // $microformat-border-color: #ddd;
209
-
210
- //// Full name font styles
211
-
212
- // $microformat-fullname-font-weight: bold;
213
- // $microformat-fullname-font-size: emCalc(15px);
214
-
215
- //// Summary font styles
216
-
217
- // $microformat-summary-font-weight: bold;
218
-
219
- //// <abbr> padding
220
-
221
- // $microformat-abbr-padding: 0 emCalc(1px);
222
-
223
- //// <abbr> font styles
224
-
225
- // $microformat-abbr-font-weight: bold;
226
- // $microformat-abbr-font-decoration: none;
227
-
228
- //
229
- // Form Variables
230
- //
231
-
232
- //// Base for lots of form spacing and positioning styles
233
-
234
- // $form-spacing: emCalc(16px);
235
-
236
- //// Labels
237
-
238
- // $label-pointer: pointer;
239
- // $label-font-size: emCalc(14px);
240
- // $label-font-weight: 500;
241
- // $label-font-color: lighten(#000, 30%);
242
- // $label-bottom-margin: emCalc(3px);
243
- // $input-font-family: inherit;
244
- // $input-font-color: rgba(0,0,0,0.75);
245
- // $input-font-size: emCalc(14px);
246
- // $input-bg-color: #fff;
247
- // $input-focus-bg-color: darken(#fff, 2%);
248
- // $input-border-color: darken(#fff, 20%);
249
- // $input-focus-border-color: darken(#fff, 40%);
250
- // $input-border-style: solid;
251
- // $input-border-width: 1px;
252
- // $input-disabled-bg: #ddd;
253
- // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
254
-
255
- //// Fieldset border and spacing.
256
-
257
- // $fieldset-border-style: solid;
258
- // $fieldset-border-width: 1px;
259
- // $fieldset-border-color: #ddd;
260
- // $fieldset-padding: emCalc(20px);
261
- // $fieldset-margin: emCalc(18px) 0;
262
-
263
- //// Legends
264
-
265
- // $legend-bg: #fff;
266
- // $legend-font-weight: bold;
267
- // $legend-padding: 0 emCalc(3px);
268
-
269
- //// Prefix and postfix input elements
270
-
271
- // $input-prefix-bg: darken(#fff, 5%);
272
- // $input-prefix-border-color: darken(#fff, 20%);
273
- // $input-prefix-border-size: 1px;
274
- // $input-prefix-border-type: solid;
275
- // $input-prefix-overflow: hidden;
276
- // $input-prefix-font-color: #333;
277
- // $input-prefix-font-color-alt: #fff;
278
-
279
- //// Error states for inputs and labels
280
-
281
- // $input-error-message-padding: emCalc(6px) emCalc(4px);
282
- // $input-error-message-top: -($form-spacing) - emCalc(5px);
283
- // $input-error-message-font-size: emCalc(12px);
284
- // $input-error-message-font-weight: bold;
285
- // $input-error-message-font-color: #fff;
286
- // $input-error-message-font-color-alt: #333;
287
-
288
- //// Padding for buttons.
289
-
290
- // $button-tny: emCalc(7px);
291
- // $button-sml: emCalc(9px);
292
- // $button-med: emCalc(12px);
293
- // $button-lrg: emCalc(16px);
294
-
295
- //// Display property.
296
-
297
- // $button-display: inline-block;
298
- // $button-margin-bottom: emCalc(20px);
299
-
300
- //// Button text styles.
301
-
302
- // $button-font-family: inherit;
303
- // $button-font-color: #fff;
304
- // $button-font-color-alt: #333;
305
- // $button-font-med: emCalc(16px);
306
- // $button-font-tny: emCalc(11px);
307
- // $button-font-sml: emCalc(13px);
308
- // $button-font-lrg: emCalc(20px);
309
- // $button-font-weight: bold;
310
- // $button-font-align: center;
311
-
312
- //// Various hover effects.
313
-
314
- // $button-function-factor: 10%;
315
-
316
- //// Button border styles.
317
-
318
- // $button-border-width: 1px;
319
- // $button-border-style: solid;
320
- // $button-border-color: darken($primary-color, $button-function-factor);
321
-
322
- //// Radius used throughout the core.
323
-
324
- // $button-radius: $global-radius;
325
-
326
- //// Opacity for disabled buttons.
327
-
328
- // $button-disabled-opacity: 0.6;
329
-
330
- //
331
- // Dropdown Button Variables
332
- //
333
-
334
- // Color of the pip in dropdown buttons
335
-
336
- // $dropdown-button-pip-color: #fff;
337
- // $dropdown-button-pip-color-alt: #333;
338
-
339
- //// Tiny dropdown buttons
340
-
341
- // $dropdown-button-padding-tny: $button-tny * 5;
342
- // $dropdown-button-pip-size-tny: $button-tny;
343
- // $dropdown-button-pip-right-tny: $button-tny * 2;
344
- // $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
345
-
346
- //// Small dropdown buttons
347
-
348
- // $dropdown-button-padding-sml: $button-sml * 5;
349
- // $dropdown-button-pip-size-sml: $button-sml;
350
- // $dropdown-button-pip-right-sml: $button-sml * 2;
351
- // $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px);
352
-
353
- //// Medium dropdown buttons
354
-
355
- // $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
356
- // $dropdown-button-pip-size-med: $button-med - emCalc(3px);
357
- // $dropdown-button-pip-right-med: $button-med * 2;
358
- // $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
359
-
360
- //// Large dropdown buttons
361
-
362
- // $dropdown-button-padding-lrg: $button-lrg * 4;
363
- // $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
364
- // $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
365
- // $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
366
-
367
- //
368
- // Split Button Variables
369
- //
370
-
371
- //// Shared styles for Split Buttons
372
-
373
- // $split-button-function-factor: 15%;
374
- // $split-button-pip-color: #fff;
375
- // $split-button-pip-color-alt: #333;
376
- // $split-button-active-bg-tint: rgba(0,0,0,0.1);
377
-
378
- //// Tiny split buttons
379
-
380
- // $split-button-padding-tny: $button-tny * 9;
381
- // $split-button-span-width-tny: $button-tny * 6.5;
382
- // $split-button-pip-size-tny: $button-tny;
383
- // $split-button-pip-top-tny: $button-tny * 2;
384
- // $split-button-pip-left-tny: emCalc(-5px);
385
-
386
- //// Small split buttons
387
-
388
- // $split-button-padding-sml: $button-sml * 7;
389
- // $split-button-span-width-sml: $button-sml * 5;
390
- // $split-button-pip-size-sml: $button-sml;
391
- // $split-button-pip-top-sml: $button-sml * 1.5;
392
- // $split-button-pip-left-sml: emCalc(-9px);
393
-
394
- //// Medium split buttons
395
-
396
- // $split-button-padding-med: $button-med * 6.4;
397
- // $split-button-span-width-med: $button-med * 4;
398
- // $split-button-pip-size-med: $button-med - emCalc(3px);
399
- // $split-button-pip-top-med: $button-med * 1.5;
400
- // $split-button-pip-left-med: emCalc(-9px);
401
-
402
- //// Large split buttons
403
-
404
- // $split-button-padding-lrg: $button-lrg * 6;
405
- // $split-button-span-width-lrg: $button-lrg * 3.75;
406
- // $split-button-pip-size-lrg: $button-lrg - emCalc(6px);
407
- // $split-button-pip-top-lrg: $button-lrg + emCalc(5px);
408
- // $split-button-pip-left-lrg: emCalc(-9px);
409
-
410
- //
411
- // Alert Variables
412
- //
413
-
414
- //// Alert padding.
415
-
416
- // $alert-padding-top: emCalc(11px);
417
- // $alert-padding-left: $alert-padding-top;
418
- // $alert-padding-right: $alert-padding-top + emCalc(10px);
419
- // $alert-padding-bottom: $alert-padding-top + emCalc(1px);
420
-
421
- //// Text style.
422
-
423
- // $alert-font-weight: bold;
424
- // $alert-font-size: emCalc(14px);
425
- // $alert-font-color: #fff;
426
- // $alert-font-color-alt: darken($secondary-color, 60%);
427
-
428
- //// Close hover effect.
429
-
430
- // $alert-function-factor: 10%;
431
-
432
- //// Border styles.
433
-
434
- // $alert-border-style: solid;
435
- // $alert-border-width: 1px;
436
- // $alert-border-color: darken($primary-color, $alert-function-factor);
437
- // $alert-bottom-margin: emCalc(20px);
438
-
439
- //// Close buttons
440
-
441
- // $alert-close-color: #333;
442
- // $alert-close-position: emCalc(5px);
443
- // $alert-close-font-size: emCalc(22px);
444
- // $alert-close-opacity: 0.3;
445
- // $alert-close-opacity-hover: 0.5;
446
- // $alert-close-padding: 5px 4px 4px;
447
-
448
- //// Border radius
449
-
450
- // $alert-radius: $global-radius;
451
-
452
- //
453
- // Breadcrumb Variables
454
- //
455
-
456
- //// Background color for the breadcrumb container.
457
-
458
- // $crumb-bg: lighten($secondary-color, 5%);
459
-
460
- //// Padding around the breadcrumbs.
461
-
462
- // $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
463
- // $crumb-side-padding: emCalc(12px);
464
-
465
- //// Border styles.
466
-
467
- // $crumb-function-factor: 10%;
468
- // $crumb-border-size: 1px;
469
- // $crumb-border-style: solid;
470
- // $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
471
- // $crumb-radius: $global-radius;
472
-
473
- //// Various text styles for breadcrumbs.
474
-
475
- // $crumb-font-size: emCalc(11px);
476
- // $crumb-font-color: $primary-color;
477
- // $crumb-font-color-current: #333;
478
- // $crumb-font-color-unavailable: #999;
479
- // $crumb-font-transform: uppercase;
480
- // $crumb-link-decor: underline;
481
-
482
- //// Slash between breadcrumbs
483
-
484
- // $crumb-slash-color: #aaa;
485
- // $crumb-slash: "/";
486
-
487
- //
488
- // Clearing Variables
489
- //
490
-
491
- //// Background colors for parts of Clearing.
492
-
493
- // $clearing-bg: #111;
494
- // $clearing-caption-bg: $clearing-bg;
495
- // $clearing-carousel-bg: #111;
496
- // $clearing-img-bg: $clearing-bg;
497
-
498
- //// Close button
499
-
500
- // $clearing-close-color: #fff;
501
- // $clearing-close-size: 40px;
502
-
503
- //// Style the arrows
504
-
505
- // $clearing-arrow-size: 16px;
506
- // $clearing-arrow-color: $clearing-close-color;
507
-
508
- //// Style captions
509
-
510
- // $clearing-caption-font-color: #fff;
511
- // $clearing-caption-padding: 10px 30px;
512
-
513
- //// Make the image and carousel height and style
514
-
515
- // $clearing-active-img-height: 75%;
516
- // $clearing-carousel-height: 150px;
517
- // $clearing-carousel-thumb-width: 175px;
518
- // $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
519
-
520
- //
521
- // Custom Form Variables
522
- //
523
-
524
- //// Basic form styles input styles
525
-
526
- // $custom-form-border-color: #ccc;
527
- // $custom-form-bg: #fff;
528
- // $custom-form-bg-disabled: #ddd;
529
- // $custom-form-check-color: #222;
530
-
531
- //// Custom select form element.
532
-
533
- // $custom-select-bg: #fff;
534
- // $custom-select-fade-to-color: #f3f3f3;
535
- // $custom-select-border-color: #ddd;
536
- // $custom-select-triangle-color: #aaa;
537
- // $custom-select-triangle-color-open: #222;
538
- // $custom-select-height: emCalc(13px) + ($form-spacing * 1.5);
539
- // $custom-select-margin-bottom: emCalc(20px);
540
- // $custom-select-font-color-selected: #141414;
541
- // $custom-select-disabled-color: #888;
542
-
543
- //// Custom select dropdown element.
544
-
545
- // $custom-dropdown-height: 200px;
546
- // $custom-dropdown-bg: #fff;
547
- // $custom-dropdown-border-color: darken(#fff, 20%);
548
- // $custom-dropdown-border-width: 1px;
549
- // $custom-dropdown-border-style: solid;
550
- // $custom-dropdown-font-color: #555;
551
- // $custom-dropdown-font-size: emCalc(14px);
552
- // $custom-dropdown-color-selected: #eeeeee;
553
- // $custom-dropdown-font-color-selected: #000;
554
- // $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
555
- // $custom-dropdown-offset-top: none;
556
- // $custom-dropdown-list-padding: emCalc(4px);
557
- // $custom-dropdown-left-padding: emCalc(6px);
558
- // $custom-dropdown-right-padding: emCalc(38px);
559
- // $custom-dropdown-list-item-min-height: emCalc(24px);
560
-
561
- //
562
- // Dropdown Variables
563
- //
564
-
565
- //// Height and width styles.
566
-
567
- // $f-dropdown-max-width: 200px;
568
- // $f-dropdown-height: auto;
569
- // $f-dropdown-max-height: none;
570
- // $f-dropdown-margin-top: 2px;
571
-
572
- //// Background color
573
-
574
- // $f-dropdown-bg: #fff;
575
-
576
- //// Border styles for dropdowns.
577
-
578
- // $f-dropdown-border-style: solid;
579
- // $f-dropdown-border-width: 1px;
580
- // $f-dropdown-border-color: darken(#fff, 20%);
581
-
582
- //// Triangle pip.
583
-
584
- // $f-dropdown-triangle-size: 6px;
585
- // $f-dropdown-triangle-color: #fff;
586
- // $f-dropdown-triangle-side-offset: 10px;
587
-
588
- //// List elements.
589
-
590
- // $f-dropdown-list-style: none;
591
- // $f-dropdown-font-color: #555;
592
- // $f-dropdown-font-size: emCalc(14px);
593
- // $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
594
- // $f-dropdown-line-height: emCalc(18px);
595
- // $f-dropdown-list-hover-bg: #eeeeee;
596
- // $dropdown-mobile-left: 0;
597
-
598
- //// When the dropdown has custom content.
599
-
600
- // $f-dropdown-content-padding: emCalc(20px);
601
-
602
- //
603
- // Flex Video Variables
604
- //
605
-
606
- //// Video container padding and margins
607
-
608
- // $flex-video-padding-top: emCalc(25px);
609
- // $flex-video-padding-bottom: 67.5%;
610
- // $flex-video-margin-bottom: emCalc(16px);
611
-
612
- //// Widescreen bottom padding
613
-
614
- // $flex-video-widescreen-padding-bottom: 57.25%;
615
-
616
- //
617
- // Inline List Variables
618
- //
619
-
620
- //// Margins and padding of the inline list.
621
-
622
- // $inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
623
- // $inline-list-margin: 0 0;
624
- // $inline-list-padding: 0;
625
-
626
- //// Overflow of the inline list.
627
-
628
- // $inline-list-overflow: hidden;
629
-
630
- //// List items
631
-
632
- // $inline-list-display: block;
633
-
634
- //// Elments within list items
635
-
636
- // $inline-list-children-display: block;
637
-
638
- //
639
- // Joyride Variables
640
- //
641
-
642
- //// Joyride styles
643
-
644
- // $joyride-tip-bg: rgb(0,0,0);
645
- // $joyride-tip-default-width: 300px;
646
- // $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
647
- // $joyride-tip-border: solid 1px #555;
648
- // $joyride-tip-radius: 4px;
649
- // $joyride-tip-position-offset: 22px;
650
-
651
- //// Tip font styles
652
-
653
- // $joyride-tip-font-color: #fff;
654
- // $joyride-tip-font-size: emCalc(14px);
655
- // $joyride-tip-header-weight: bold;
656
-
657
- //// Changes the nub size
658
-
659
- // $joyride-tip-nub-size: 14px;
660
-
661
- //// Adjusts the styles for the timer when its enabled
662
-
663
- // $joyride-tip-timer-width: 50px;
664
- // $joyride-tip-timer-height: 3px;
665
- // $joyride-tip-timer-color: #666;
666
-
667
- //// Changes up the styles for the close button
668
-
669
- // $joyride-tip-close-color: #777;
670
- // $joyride-tip-close-size: 30px;
671
- // $joyride-tip-close-weight: normal;
672
-
673
- //// When Joyride is filling the screen, style for the bg
674
-
675
- // $joyride-screenfill: rgba(0,0,0,0.5);
676
-
677
- //
678
- // Keystroke Variables
679
- //
680
-
681
- //// Text styles.
682
-
683
- // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
684
- // $keystroke-font-size: emCalc(15px);
685
- // $keystroke-font-color: #222;
686
- // $keystroke-font-color-alt: #fff;
687
- // $keystroke-function-factor: 7%;
688
-
689
- //// Keystroke padding.
690
-
691
- // $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
692
-
693
- //// Background and border styles.
694
-
695
- // $keystroke-bg: darken(#fff, $keystroke-function-factor);
696
- // $keystroke-border-style: solid;
697
- // $keystroke-border-width: 1px;
698
- // $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
699
- // $keystroke-radius: $global-radius;
700
-
701
- //
702
- // Label Variables
703
- //
704
-
705
- //// Style the labels
706
-
707
- // $label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
708
- // $label-radius: $global-radius;
709
-
710
- //// We use these to style the label text
711
-
712
- // $label-font-sizing: emCalc(14px);
713
- // $label-font-weight: bold;
714
- // $label-font-color: #333;
715
- // $label-font-color-alt: #fff;
716
-
717
- //
718
- // Magellan Variables
719
- //
720
-
721
- //// Basic visual styles
722
-
723
- // $magellan-bg: #fff;
724
- // $magellan-padding: 10px;
725
-
726
- //
727
- // Orbit Settings
728
- //
729
-
730
- //// Caption styles
731
-
732
- // $orbit-container-bg: #f5f5f5;
733
- // $orbit-caption-bg-old-browser: #000;
734
- // $orbit-caption-bg-old: rgb(0,0,0);
735
- // $orbit-caption-bg: rgba(0,0,0,0.6);
736
- // $orbit-caption-font-color: #fff;
737
-
738
- //// Left/right nav styles
739
-
740
- // $orbit-nav-bg-old: rgb(0,0,0);
741
- // $orbit-nav-bg: rgba(0,0,0,0.6);
742
-
743
- //// Timer styles
744
-
745
- // $orbit-timer-bg-old: rgb(0,0,0);
746
- // $orbit-timer-bg: rgba(0,0,0,0.6);
747
-
748
- //// Bullet nav styles
749
-
750
- // $orbit-bullet-nav-color: #999;
751
- // $orbit-bullet-nav-color-active: #222;
752
-
753
- //// Slide numbers
754
-
755
- // $orbit-slide-number-bg: rgb(0,0,0);
756
- // $orbit-slide-number-font-color: #fff;
757
- // $orbit-slide-number-padding: emCalc(5px);
758
-
759
- //// Margin for when Orbit is stacked on small screens
760
-
761
- // $stack-on-small-margin-bottom: emCalc(20px); // Doesn't quite work yet
762
-
763
- //
764
- // Pagination Variables
765
- //
766
-
767
- //// Pagination container
768
-
769
- // $pagination-height: emCalc(24px);
770
- // $pagination-margin: emCalc(-5px);
771
-
772
- //// List-item properties
773
-
774
- // $pagination-li-float: $default-float;
775
- // $pagination-li-height: emCalc(24px);
776
- // $pagination-li-font-color: #222;
777
- // $pagination-li-font-size: emCalc(14px);
778
- // $pagination-li-margin: emCalc(5px);
779
-
780
- //// Pagination anchor links
781
-
782
- // $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
783
- // $pagination-link-font-color: #999;
784
- // $pagination-link-active-bg: darken(#fff, 10%);
785
-
786
- //// Disabled anchor links
787
-
788
- // $pagination-link-unavailable-cursor: default;
789
- // $pagination-link-unavailable-font-color: #999;
790
- // $pagination-link-unavailable-bg-active: transparent;
791
-
792
- //// Currently selected anchor links
793
-
794
- // $pagination-link-current-background: $primary-color;
795
- // $pagination-link-current-font-color: #fff;
796
- // $pagination-link-current-font-weight: bold;
797
- // $pagination-link-current-cursor: default;
798
- // $pagination-link-current-active-bg: $primary-color;
799
-
800
- //
801
- // Panel Variables
802
- //
803
-
804
- //// Background and border styles
805
-
806
- // $panel-bg: darken(#fff, 5%);
807
- // $panel-border-style: solid;
808
- // $panel-border-size: 1px;
809
-
810
- //// Control how much we darken things on hover
811
-
812
- // $panel-function-factor: 10%;
813
- // $panel-border-color: darken($panel-bg, $panel-function-factor);
814
-
815
- //// Inner padding and bottom margin
816
-
817
- // $panel-margin-bottom: emCalc(20px);
818
- // $panel-padding: emCalc(20px);
819
-
820
- //// Font colors
821
-
822
- // $panel-font-color: #333;
823
- // $panel-font-color-alt: #fff;
824
-
825
- //
826
- // Pricing Table Variables
827
- //
828
-
829
- //// Border color
830
-
831
- // $price-table-border: solid 1px #ddd;
832
-
833
- //// Bottom margin of the pricing table
834
-
835
- // $price-table-margin-bottom: emCalc(20px);
836
-
837
- //// Control the title styles
838
-
839
- // $price-title-bg: #ddd;
840
- // $price-title-padding: emCalc(15px) emCalc(20px);
841
- // $price-title-align: center;
842
- // $price-title-color: #333;
843
- // $price-title-weight: bold;
844
- // $price-title-size: emCalc(16px);
845
-
846
- //// Control the price styles
847
-
848
- // $price-money-bg: #eee;
849
- // $price-money-padding: emCalc(15px) emCalc(20px);
850
- // $price-money-align: center;
851
- // $price-money-color: #333;
852
- // $price-money-weight: normal;
853
- // $price-money-size: emCalc(20px);
854
-
855
- //// Description styles
856
-
857
- // $price-bg: #fff;
858
- // $price-desc-color: #777;
859
- // $price-desc-padding: emCalc(15px);
860
- // $price-desc-align: center;
861
- // $price-desc-font-size: emCalc(12px);
862
- // $price-desc-weight: normal;
863
- // $price-desc-line-height: 1.4;
864
- // $price-desc-bottom-border: dotted 1px #ddd;
865
-
866
- //// List item styles
867
-
868
- // $price-item-color: #333;
869
- // $price-item-padding: emCalc(15px);
870
- // $price-item-align: center;
871
- // $price-item-font-size: emCalc(14px);
872
- // $price-item-weight: normal;
873
- // $price-item-bottom-border: dotted 1px #ddd;
874
-
875
- //// CTA area styles
876
-
877
- // $price-cta-bg: #f5f5f5;
878
- // $price-cta-align: center;
879
- // $price-cta-padding: emCalc(20px) emCalc(20px) 0;
880
-
881
- //
882
- // Progress Bar Variables
883
- //
884
-
885
- //// Progress bar height
886
-
887
- // $progress-bar-height: emCalc(25px);
888
- // $progress-bar-color: transparent;
889
-
890
- //// Border styles
891
-
892
- // $progress-bar-border-color: darken(#fff, 20%);
893
- // $progress-bar-border-size: 1px;
894
- // $progress-bar-border-style: solid;
895
- // $progress-bar-border-radius: $global-radius;
896
-
897
- //// Margin & padding
898
-
899
- // $progress-bar-pad: emCalc(2px);
900
- // $progress-bar-margin-bottom: emCalc(10px);
901
-
902
- //// Meter colors
903
-
904
- // $progress-meter-color: $primary-color;
905
- // $progress-meter-secondary-color: $secondary-color;
906
- // $progress-meter-success-color: $success-color;
907
- // $progress-meter-alert-color: $alert-color;
908
-
909
- //
910
- // Reveal Variables
911
- //
912
-
913
- //// Reveal overlay.
914
-
915
- // $reveal-overlay-bg: rgba(#000, .45);
916
- // $reveal-overlay-bg-old: #000;
917
-
918
- //// Modal itself.
919
-
920
- // $reveal-modal-bg: #fff;
921
- // $reveal-position-top: 50px;
922
- // $reveal-default-width: 80%;
923
- // $reveal-modal-padding: emCalc(20px);
924
- // $reveal-box-shadow: 0 0 10px rgba(#000,.4);
925
-
926
- //// Reveal close button
927
-
928
- // $reveal-close-font-size: emCalc(22px);
929
- // $reveal-close-top: emCalc(8px);
930
- // $reveal-close-side: emCalc(11px);
931
- // $reveal-close-color: #aaa;
932
- // $reveal-close-weight: bold;
933
-
934
- //// Modal border
935
-
936
- // $reveal-border-style: solid;
937
- // $reveal-border-width: 1px;
938
- // $reveal-border-color: #666;
939
-
940
- //
941
- // Section Variables
942
- //
943
-
944
- //// Padding and hover factor
945
-
946
- // $section-padding: emCalc(15px);
947
- // $section-function-factor: 10%;
948
-
949
- //// Titles
950
-
951
- // $section-title-color: #333;
952
- // $section-title-bg: #efefef;
953
- // $section-title-bg-active: darken($section-title-bg, $section-function-factor);
954
- // $section-title-bg-active-tabs: #fff;
955
-
956
- //// Border size
957
-
958
- // $section-border-size: 1px;
959
- // $section-border-style: solid;
960
- // $section-border-color: #ccc;
961
-
962
- //// Color of the background and some size options
963
-
964
- // $section-content-bg: #fff;
965
- // $section-vertical-nav-min-width: emCalc(200px);
966
- // $section-vertical-tabs-title-width: emCalc(200px);
967
- // $section-bottom-margin: emCalc(20px);
968
-
969
- //
970
- // Side Nav Variables
971
- //
972
-
973
- //// Padding
974
-
975
- // $side-nav-padding: emCalc(14px) 0;
976
-
977
- //// List styles
978
-
979
- // $side-nav-list-type: none;
980
- // $side-nav-list-position: inside;
981
- // $side-nav-list-margin: 0 0 emCalc(7px) 0;
982
-
983
- //// Link styles
984
-
985
- // $side-nav-link-color: $primary-color;
986
- // $side-nav-link-color-active: lighten(#000, 30%);
987
- // $side-nav-font-size: emCalc(14px);
988
- // $side-nav-font-weight: bold;
989
-
990
- //// Border styles
991
-
992
- // $side-nav-divider-size: 1px;
993
- // $side-nav-divider-style: solid;
994
- // $side-nav-divider-color: darken(#fff, 10%);
995
-
996
- //
997
- // Sub Nav Variables
998
- //
999
-
1000
- //// Margin and padding
1001
-
1002
- // $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
1003
- // $sub-nav-list-padding-top: emCalc(4px);
1004
-
1005
- //// Definition
1006
-
1007
- // $sub-nav-font-size: emCalc(14px);
1008
- // $sub-nav-font-color: #999;
1009
- // $sub-nav-font-weight: normal;
1010
- // $sub-nav-text-decoration: none;
1011
- // $sub-nav-border-radius: 1000px;
1012
-
1013
- //// Active item styles
1014
-
1015
- // $sub-nav-active-font-weight: bold;
1016
- // $sub-nav-active-bg: $primary-color;
1017
- // $sub-nav-active-color: #fff;
1018
- // $sub-nav-active-padding: emCalc(3px) emCalc(9px);
1019
- // $sub-nav-active-cursor: default;
1020
-
1021
- //
1022
- // Switch Variables
1023
- //
1024
-
1025
- //// Border styles and background colors for the switch container
1026
-
1027
- // $switch-border-color: darken(#fff, 20%);
1028
- // $switch-border-style: solid;
1029
- // $switch-border-width: 1px;
1030
- // $switch-bg: #fff;
1031
-
1032
- //// Switch heights for our default classes
1033
-
1034
- // $switch-height-tny: 22px;
1035
- // $switch-height-sml: 28px;
1036
- // $switch-height-med: 36px;
1037
- // $switch-height-lrg: 44px;
1038
- // $switch-bottom-margin: emCalc(20px);
1039
-
1040
- //// Font sizes for our classes.
1041
-
1042
- // $switch-font-size-tny: 11px;
1043
- // $switch-font-size-sml: 12px;
1044
- // $switch-font-size-med: 14px;
1045
- // $switch-font-size-lrg: 17px;
1046
- // $switch-label-side-padding: 6px;
1047
-
1048
- //// Switch-paddle
1049
-
1050
- // $switch-paddle-bg: #fff;
1051
- // $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
1052
- // $switch-paddle-border-color: darken($switch-paddle-bg, 35%);
1053
- // $switch-paddle-border-width: 1px;
1054
- // $switch-paddle-border-style: solid;
1055
- // $switch-paddle-transition-speed: .1s;
1056
- // $switch-paddle-transition-ease: ease-out;
1057
- // $switch-positive-color: lighten($success-color, 50%);
1058
- // $switch-negative-color: #f5f5f5;
1059
-
1060
- //// Outline Style for tabbing through switches
1061
-
1062
- // $switch-label-outline: 1px dotted #888;
1063
-
1064
- //
1065
- // Table Variables
1066
- //
1067
-
1068
- //// Background color for the table and even rows
1069
-
1070
- // $table-bg: #fff;
1071
- // $table-even-row-bg: #f9f9f9;
1072
-
1073
- //// Table cell border style
1074
-
1075
- // $table-border-style: solid;
1076
- // $table-border-size: 1px;
1077
- // $table-border-color: #ddd;
1078
-
1079
- //// Table head styles
1080
-
1081
- // $table-head-bg: #f5f5f5;
1082
- // $table-head-font-size: emCalc(14px);
1083
- // $table-head-font-color: #222;
1084
- // $table-head-font-weight: bold;
1085
- // $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
1086
-
1087
- //// Row padding and font styles
1088
-
1089
- // $table-row-padding: emCalc(9px) emCalc(10px);
1090
- // $table-row-font-size: emCalc(14px);
1091
- // $table-row-font-color: #222;
1092
- // $table-line-height: emCalc(18px);
1093
-
1094
- //// Display and margin of tables
1095
-
1096
- // $table-display: table-cell;
1097
- // $table-margin-bottom: emCalc(20px);
1098
-
1099
- //
1100
- // Image Thumbnail Variables
1101
- //
1102
-
1103
- //// Border styles
1104
-
1105
- // $thumb-border-style: solid;
1106
- // $thumb-border-width: 4px;
1107
- // $thumb-border-color: #fff;
1108
- // $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
1109
- // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
1110
-
1111
- //// Radius and transition speed for thumbs
1112
-
1113
- // $thumb-radius: $global-radius;
1114
- // $thumb-transition-speed: 200ms;
1115
-
1116
- //
1117
- // Tooltip Variables
1118
- //
1119
-
1120
- // $has-tip-border-bottom: dotted 1px #ccc;
1121
- // $has-tip-font-weight: bold;
1122
- // $has-tip-font-color: #333;
1123
- // $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
1124
- // $has-tip-font-color-hover: $primary-color;
1125
- // $has-tip-cursor-type: help;
1126
-
1127
- // $tooltip-padding: emCalc(8px);
1128
- // $tooltip-bg: #000;
1129
- // $tooltip-font-size: emCalc(15px);
1130
- // $tooltip-font-weight: bold;
1131
- // $tooltip-font-color: #fff;
1132
- // $tooltip-line-height: 1.3;
1133
- // $tooltip-close-font-size: emCalc(10px);
1134
- // $tooltip-close-font-weight: normal;
1135
- // $tooltip-close-font-color: #888;
1136
- // $tooltip-font-size-sml: emCalc(14px);
1137
- // $tooltip-radius: $global-radius;
1138
- // $tooltip-pip-size: 5px;
1139
-
1140
- //
1141
- // Top Bar Variables
1142
- //
1143
-
1144
- //// Background color for the top bar
1145
-
1146
- // $topbar-bg: #111;
1147
-
1148
- //// Height and margin
1149
-
1150
- // $topbar-height: 45px;
1151
- // $topbar-margin-bottom: emCalc(30px);
1152
-
1153
- //// Input height for top bar
1154
-
1155
- // $topbar-input-height: 2.45em;
1156
-
1157
- //// Title in the top bar
1158
-
1159
- // $topbar-title-weight: bold;
1160
- // $topbar-title-font-size: emCalc(17px);
1161
-
1162
- //// Link colors and styles for top-level nav
1163
-
1164
- // $topbar-link-color: #fff;
1165
- // $topbar-link-weight: bold;
1166
- // $topbar-link-font-size: emCalc(13px);
1167
- // $topbar-link-hover-lightness: -30% !default; // Darken by 30%
1168
-
1169
- //// Top bar dropdown elements
1170
-
1171
- // $topbar-dropdown-bg: #333;
1172
- // $topbar-dropdown-link-color: #fff;
1173
- // $topbar-dropdown-toggle-size: 5px;
1174
- // $topbar-dropdown-toggle-color: #fff;
1175
- // $topbar-dropdown-toggle-alpha: 0.5;
1176
- // $dropdown-label-color: #555;
1177
-
1178
- //// Top menu icon styles
1179
-
1180
- // $topbar-menu-link-transform: uppercase;
1181
- // $topbar-menu-link-font-size: emCalc(13px);
1182
- // $topbar-menu-link-weight: bold;
1183
- // $topbar-menu-link-color: #fff;
1184
- // $topbar-menu-icon-color: #fff;
1185
- // $topbar-menu-link-color-toggled: #888;
1186
- // $topbar-menu-icon-color-toggled: #888;
1187
-
1188
- //// Transitions and breakpoint styles
1189
-
1190
- // $topbar-transition-speed: 300ms;
1191
- // $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
1192
- // $topbar-media-query: "only screen and (min-width "#{$topbar-breakpoint}")";