hootstrap 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (43) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +54 -0
  4. data/Rakefile +33 -0
  5. data/assets/javascripts/hootstrap/modal.js +795 -0
  6. data/assets/javascripts/hootstrap/rails.js +28 -0
  7. data/assets/javascripts/hootstrap/toast.js +166 -0
  8. data/assets/javascripts/hootstrap/utils/dynamicListener.js +80 -0
  9. data/assets/javascripts/hootstrap.js +3 -0
  10. data/assets/stylesheets/hootstrap/base/_base.scss +5 -0
  11. data/assets/stylesheets/hootstrap/base/_variables.scss +868 -0
  12. data/assets/stylesheets/hootstrap/base/mixins/_background.scss +8 -0
  13. data/assets/stylesheets/hootstrap/base/mixins/_button.scss +42 -0
  14. data/assets/stylesheets/hootstrap/base/mixins/_toast.scss +16 -0
  15. data/assets/stylesheets/hootstrap/base/mixins/_tooltip.scss +29 -0
  16. data/assets/stylesheets/hootstrap/components/_alert.scss +7 -0
  17. data/assets/stylesheets/hootstrap/components/_badge.scss +3 -0
  18. data/assets/stylesheets/hootstrap/components/_base.scss +6 -0
  19. data/assets/stylesheets/hootstrap/components/_button.scss +9 -0
  20. data/assets/stylesheets/hootstrap/components/_forms.scss +64 -0
  21. data/assets/stylesheets/hootstrap/components/_loader.scss +27 -0
  22. data/assets/stylesheets/hootstrap/components/_tooltip.scss +274 -0
  23. data/assets/stylesheets/hootstrap/patterns/_base.scss +5 -0
  24. data/assets/stylesheets/hootstrap/patterns/_card.scss +8 -0
  25. data/assets/stylesheets/hootstrap/patterns/_list-group.scss +8 -0
  26. data/assets/stylesheets/hootstrap/patterns/_navbar.scss +3 -0
  27. data/assets/stylesheets/hootstrap/patterns/_search.scss +45 -0
  28. data/assets/stylesheets/hootstrap/patterns/_toast.scss +34 -0
  29. data/assets/stylesheets/hootstrap/reset/_base.scss +1 -0
  30. data/assets/stylesheets/hootstrap/reset/_html.scss +4 -0
  31. data/assets/stylesheets/hootstrap/utils/_background.scss +3 -0
  32. data/assets/stylesheets/hootstrap/utils/_base.scss +5 -0
  33. data/assets/stylesheets/hootstrap/utils/_flex.scss +3 -0
  34. data/assets/stylesheets/hootstrap/utils/_opacity.scss +3 -0
  35. data/assets/stylesheets/hootstrap/utils/_sizing.scss +16 -0
  36. data/assets/stylesheets/hootstrap/utils/_transition.scss +0 -0
  37. data/assets/stylesheets/hootstrap/utils/_typography.scss +49 -0
  38. data/assets/stylesheets/hootstrap.scss +9 -0
  39. data/lib/hootstrap/engine.rb +9 -0
  40. data/lib/hootstrap/railtie.rb +10 -0
  41. data/lib/hootstrap/version.rb +3 -0
  42. data/lib/hootstrap.rb +20 -0
  43. metadata +141 -0
@@ -0,0 +1,868 @@
1
+ // Hootstrap Variables
2
+ //
3
+ // Variables should follow the `$component-state-property-size` formula for
4
+ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
5
+
6
+ //
7
+ // Color system
8
+ //
9
+
10
+ // stylelint-disable
11
+ $white: #fff;
12
+ $gray-100: #f5f7fa;
13
+ $gray-200: #e9ecef;
14
+ $gray-300: #dee2e6;
15
+ $gray-400: #ced4da;
16
+ $gray-500: #adb5bd;
17
+ $gray-600: #868e96;
18
+ $gray-700: #495057;
19
+ $gray-800: #343a40;
20
+ $gray-900: #212529;
21
+ $black: #000;
22
+
23
+ $grays: ();
24
+ $grays: map-merge(
25
+
26
+ (
27
+ "100": $gray-100,
28
+ "200": $gray-200,
29
+ "300": $gray-300,
30
+ "400": $gray-400,
31
+ "500": $gray-500,
32
+ "600": $gray-600,
33
+ "700": $gray-700,
34
+ "800": $gray-800,
35
+ "900": $gray-900
36
+ ),
37
+ $grays
38
+ );
39
+
40
+ $blue: #116ff7;
41
+ $indigo: #6610f2;
42
+ $purple: #6f42c1;
43
+ $pink: #e83e8c;
44
+ $red: #e21c2c;
45
+ $orange: #fd7e14;
46
+ $yellow: #f3bf51;
47
+ $green: #008761;
48
+ $teal: #20c997;
49
+ $cyan: #bfdbf7;
50
+
51
+ $colors: ();
52
+ $colors: map-merge(
53
+
54
+ (
55
+ "blue": $blue,
56
+ "indigo": $indigo,
57
+ "purple": $purple,
58
+ "pink": $pink,
59
+ "red": $red,
60
+ "orange": $orange,
61
+ "yellow": $yellow,
62
+ "green": $green,
63
+ "teal": $teal,
64
+ "cyan": $cyan,
65
+ "white": $white,
66
+ "gray": $gray-600,
67
+ "gray-dark": $gray-800
68
+ ),
69
+ $colors
70
+ );
71
+
72
+ $theme-colors: ();
73
+ $theme-colors: map-merge(
74
+
75
+ (
76
+ "primary": $blue,
77
+ "secondary": $gray-600,
78
+ "success": $green,
79
+ "info": $cyan,
80
+ "warning": $yellow,
81
+ "danger": $red,
82
+ "light": $gray-100,
83
+ "dark": $gray-800,
84
+ "alert": $red
85
+ ),
86
+ $theme-colors
87
+ );
88
+
89
+ // Set a specific jump point for requesting color jumps
90
+ $theme-color-interval: 8%;
91
+
92
+ // Options
93
+ //
94
+ // Quickly modify global styling by enabling or disabling optional features.
95
+
96
+ $enable-caret: true;
97
+ $enable-rounded: true;
98
+ $enable-shadows: true;
99
+ $enable-gradients: true;
100
+ $enable-transitions: true;
101
+ $enable-hover-media-query: true;
102
+ $enable-grid-classes: true;
103
+ $enable-print-styles: true;
104
+
105
+ // Spacing
106
+ //
107
+ // Control the default styling of most Bootstrap elements by modifying these
108
+ // variables. Mostly focused on spacing.
109
+ // You can add more entries to the $spacers map, should you need more variation.
110
+
111
+ $spacer: 1rem;
112
+ $spacers: (
113
+ 0: 0,
114
+ 1: ($spacer * .25),
115
+ 2: ($spacer * .5),
116
+ 3: $spacer,
117
+ 4: ($spacer * 1.5),
118
+ 5: ($spacer * 3)
119
+ );
120
+
121
+ // This variable affects the `.h-*` and `.w-*` classes.
122
+ $sizes: (25: 25%, 50: 50%, 75: 75%, 100: 100%);
123
+
124
+ // Body
125
+ //
126
+ // Settings for the `<body>` element.
127
+
128
+ $body-bg: $gray-100;
129
+ $body-color: $gray-700;
130
+
131
+ // Links
132
+ //
133
+ // Style anchor elements.
134
+
135
+ $link-color: theme-color("primary");
136
+ $link-decoration: none;
137
+ $link-hover-color: darken($link-color, 15%);
138
+ $link-hover-decoration: underline;
139
+
140
+ // Paragraphs
141
+ //
142
+ // Style p element.
143
+
144
+ $paragraph-margin-bottom: 1rem;
145
+
146
+ // Animations & Transitions
147
+ //
148
+ // Define animation.
149
+
150
+ $base-duration: 150ms;
151
+ $base-timing: ease-in-out;
152
+
153
+ // Grid breakpoints
154
+ //
155
+ // Define the minimum dimensions at which your layout will change,
156
+ // adapting to different screen sizes, for use in media queries.
157
+
158
+ $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
159
+ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
160
+ @include _assert-starts-at-zero($grid-breakpoints);
161
+
162
+ // Grid containers
163
+ //
164
+ // Define the maximum width of `.container` for different screen sizes.
165
+
166
+ $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);
167
+ @include _assert-ascending($container-max-widths, "$container-max-widths");
168
+
169
+ // Grid columns
170
+ //
171
+ // Set the number of columns and specify the width of the gutters.
172
+
173
+ $grid-columns: 12;
174
+ $grid-gutter-width: 30px;
175
+
176
+ // Components
177
+ //
178
+ // Define common padding and border radius sizes and more.
179
+
180
+ $line-height-lg: 1.5;
181
+ $line-height-sm: 1.5;
182
+
183
+ $border-width: 1px;
184
+ $border-color: $gray-200;
185
+
186
+ $border-radius: 0.25rem;
187
+ $border-radius-lg: 0.3rem;
188
+ $border-radius-sm: 0.2rem;
189
+
190
+ $box-shadow: 0 0 0 1px rgba(62, 64, 64, 0.05), 0 1px 3px rgba(62, 64, 64, 0.1),
191
+ 0 1px 2px rgba(0, 0, 0, 0.05);
192
+
193
+ $component-active-color: $white;
194
+ $component-active-bg: theme-color("primary");
195
+
196
+ $caret-width: 0.3em;
197
+
198
+ $transition-base: all 0.2s ease-in-out;
199
+ $transition-fade: opacity 0.15s linear;
200
+ $transition-collapse: height 0.35s ease;
201
+
202
+ // Fonts
203
+ //
204
+ // Font, line-height, and color for body text, headings, and more.
205
+
206
+ // stylelint-disable value-keyword-case
207
+ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
208
+ "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
209
+ "Segoe UI Symbol";
210
+ $font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas,
211
+ "Liberation Mono", "Courier New", monospace;
212
+ $font-family-base: $font-family-sans-serif;
213
+ // stylelint-enable value-keyword-case
214
+
215
+ $font-size-base: 1rem; // Assumes the browser default, typically `16px`
216
+ $font-size-lg: 1.25rem;
217
+ $font-size-sm: .875rem;
218
+
219
+ $font-weight-light: 300;
220
+ $font-weight-normal: 400;
221
+ $font-weight-bold: 600;
222
+
223
+ $font-weight-base: $font-weight-normal;
224
+ $line-height-base: 1.5;
225
+
226
+ $h1-font-size: 2.5rem;
227
+ $h2-font-size: 2rem;
228
+ $h3-font-size: 1.75rem;
229
+ $h4-font-size: 1.5rem;
230
+ $h5-font-size: 1.25rem;
231
+ $h6-font-size: 1rem;
232
+
233
+ $headings-margin-bottom: ($spacer / 2);
234
+ $headings-font-family: inherit;
235
+ $headings-font-weight: 500;
236
+ $headings-line-height: 1.1;
237
+ $headings-color: inherit;
238
+
239
+ $display1-size: 6rem;
240
+ $display2-size: 5.5rem;
241
+ $display3-size: 4.5rem;
242
+ $display4-size: 3.5rem;
243
+
244
+ $display1-weight: 300;
245
+ $display2-weight: 300;
246
+ $display3-weight: 300;
247
+ $display4-weight: 300;
248
+ $display-line-height: $headings-line-height;
249
+
250
+ $lead-font-size: 1.25rem;
251
+ $lead-font-weight: 300;
252
+
253
+ $small-font-size: 80%;
254
+
255
+ $text-muted: $gray-600;
256
+
257
+ $blockquote-small-color: $gray-600;
258
+ $blockquote-font-size: ($font-size-base * 1.25);
259
+
260
+ $hr-border-color: rgba($black, 0.1);
261
+ $hr-border-width: $border-width;
262
+
263
+ $hr-text-color: rgba($black, 0.4);
264
+ $hr-text-line-height: 1;
265
+ $hr-text-padding-x: 0.5rem;
266
+ $hr-text-padding-y: 0;
267
+
268
+ $mark-padding: .2em;
269
+
270
+ $dt-font-weight: $font-weight-bold;
271
+
272
+ $kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25);
273
+ $nested-kbd-font-weight: $font-weight-bold;
274
+
275
+ $list-inline-padding: 5px;
276
+
277
+ $mark-bg: #fcf8e3;
278
+
279
+ // Tables
280
+ //
281
+ // Customizes the `.table` component with basic values, each used across all table variations.
282
+
283
+ $table-cell-padding: .75rem;
284
+ $table-cell-padding-sm: .3rem;
285
+
286
+ $table-bg: transparent;
287
+ $table-accent-bg: rgba($black, .05);
288
+ $table-hover-bg: rgba($black, .075);
289
+ $table-active-bg: $table-hover-bg;
290
+
291
+ $table-border-width: $border-width;
292
+ $table-border-color: $gray-200;
293
+
294
+ $table-head-bg: $gray-200;
295
+ $table-head-color: $gray-700;
296
+
297
+ $table-dark-bg: $gray-900;
298
+ $table-dark-accent-bg: rgba($white, .05);
299
+ $table-dark-hover-bg: rgba($white, .075);
300
+ $table-dark-border-color: lighten($gray-900, 7.5%);
301
+ $table-dark-color: $body-bg;
302
+
303
+ // Buttons
304
+ //
305
+ // For each of Bootstrap's buttons, define text, background and border color.
306
+
307
+ $input-btn-padding-y: .375rem;
308
+ $input-btn-padding-x: .75rem;
309
+ $input-btn-line-height: $line-height-base;
310
+
311
+ $input-btn-padding-y-sm: .25rem;
312
+ $input-btn-padding-x-sm: .5rem;
313
+ $input-btn-line-height-sm: $line-height-sm;
314
+
315
+ $input-btn-padding-y-lg: .5rem;
316
+ $input-btn-padding-x-lg: 1rem;
317
+ $input-btn-line-height-lg: $line-height-lg;
318
+
319
+ $btn-font-weight: $font-weight-normal;
320
+ $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
321
+ $btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25);
322
+ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
323
+
324
+ $btn-link-disabled-color: $gray-600;
325
+
326
+ $btn-block-spacing-y: .5rem;
327
+
328
+ // Allows for customizing button radius independently from global border radius
329
+ $btn-border-radius: $border-radius;
330
+ $btn-border-radius-lg: $border-radius-lg;
331
+ $btn-border-radius-sm: $border-radius-sm;
332
+
333
+ $btn-transition: background-color .15s ease-in-out,
334
+ border-color .15s ease-in-out, box-shadow .15s ease-in-out;
335
+
336
+ // Forms
337
+
338
+ $input-bg: $white;
339
+ $input-disabled-bg: $gray-200;
340
+
341
+ $input-color: $gray-700;
342
+ $input-border-color: $gray-400;
343
+ $input-btn-border-width: $border-width; // For form controls and buttons
344
+ $input-box-shadow: inset 0 1px 2px rgba(216, 221, 230, 0.4);
345
+
346
+ $input-border-radius: $border-radius;
347
+ $input-border-radius-lg: $border-radius-lg;
348
+ $input-border-radius-sm: $border-radius-sm;
349
+
350
+ $input-focus-bg: $input-bg;
351
+ $input-focus-border-color: $blue;
352
+ $input-focus-box-shadow: inset 0 0 1px rgba($blue, 0.75);
353
+ $input-focus-color: $input-color;
354
+
355
+ $input-placeholder-color: $gray-600;
356
+
357
+ $input-height-border: $input-btn-border-width * 2;
358
+
359
+ $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y *
360
+ 2);
361
+ $input-height: calc(#{$input-height-inner} + #{$input-height-border});
362
+
363
+ $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm *
364
+ 2);
365
+ $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border});
366
+
367
+ $input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg *
368
+ 2);
369
+ $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border});
370
+
371
+ $input-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
372
+
373
+ $form-text-margin-top: 0.25rem;
374
+
375
+ $form-check-margin-bottom: 0.5rem;
376
+ $form-check-input-gutter: 1.25rem;
377
+ $form-check-input-margin-y: 0.25rem;
378
+ $form-check-input-margin-x: 0.25rem;
379
+
380
+ $form-check-inline-margin-x: 0.75rem;
381
+
382
+ $form-group-margin-bottom: 1rem;
383
+
384
+ $form-group-error-bg: theme-color-level("danger", -10);
385
+ $form-group-error-border: theme-color-level("danger", -9);
386
+ $form-group-error-color: theme-color-level("danger", 6);
387
+ $form-group-error-border-radius: $border-radius;
388
+ $form-group-error-padding-x: 0.5rem;
389
+ $form-group-error-padding-y: 0.1rem;
390
+
391
+ $input-group-addon-color: $input-color;
392
+ $input-group-addon-bg: $gray-200;
393
+ $input-group-addon-border-color: $input-border-color;
394
+
395
+ $custom-control-gutter: 1.5rem;
396
+ $custom-control-spacer-y: .25rem;
397
+ $custom-control-spacer-x: 1rem;
398
+
399
+ $custom-control-indicator-size: 1rem;
400
+ $custom-control-indicator-bg: #ddd;
401
+ $custom-control-indicator-bg-size: 50% 50%;
402
+ $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1);
403
+
404
+ $custom-control-indicator-disabled-bg: $gray-200;
405
+ $custom-control-description-disabled-color: $gray-600;
406
+
407
+ $custom-control-indicator-checked-color: $white;
408
+ $custom-control-indicator-checked-bg: theme-color("primary");
409
+ $custom-control-indicator-checked-box-shadow: none;
410
+
411
+ $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg,
412
+ 0 0 0 3px theme-color("primary");
413
+
414
+ $custom-control-indicator-active-color: $white;
415
+ $custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%);
416
+ $custom-control-indicator-active-box-shadow: none;
417
+
418
+ $custom-checkbox-indicator-border-radius: $border-radius;
419
+ $custom-checkbox-indicator-icon-checked: str-replace(
420
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"),
421
+ "#",
422
+ "%23"
423
+ );
424
+
425
+ $custom-checkbox-indicator-indeterminate-bg: theme-color("primary");
426
+ $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color;
427
+ $custom-checkbox-indicator-icon-indeterminate: str-replace(
428
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"),
429
+ "#",
430
+ "%23"
431
+ );
432
+ $custom-checkbox-indicator-indeterminate-box-shadow: none;
433
+
434
+ $custom-radio-indicator-border-radius: 50%;
435
+ $custom-radio-indicator-icon-checked: str-replace(
436
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"),
437
+ "#",
438
+ "%23"
439
+ );
440
+
441
+ $custom-select-padding-y: .375rem;
442
+ $custom-select-padding-x: .75rem;
443
+ $custom-select-height: $input-height;
444
+ $custom-select-indicator-padding: 1rem; // Extra padding to account for the presence of the background-image based indicator
445
+ $custom-select-line-height: $input-btn-line-height;
446
+ $custom-select-color: $input-color;
447
+ $custom-select-disabled-color: $gray-600;
448
+ $custom-select-bg: $white;
449
+ $custom-select-disabled-bg: $gray-200;
450
+ $custom-select-bg-size: 8px 10px; // In pixels because image dimensions
451
+ $custom-select-indicator-color: #333;
452
+ $custom-select-indicator: str-replace(
453
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
454
+ "#",
455
+ "%23"
456
+ );
457
+ $custom-select-border-width: $input-btn-border-width;
458
+ $custom-select-border-color: $input-border-color;
459
+ $custom-select-border-radius: $border-radius;
460
+
461
+ $custom-select-focus-border-color: lighten(theme-color("primary"), 25%);
462
+ $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075),
463
+ 0 0 5px rgba($custom-select-focus-border-color, .5);
464
+
465
+ $custom-select-font-size-sm: 75%;
466
+ $custom-select-height-sm: $input-height-sm;
467
+
468
+ $custom-file-height: $input-height;
469
+ $custom-file-width: 14rem;
470
+ $custom-file-focus-box-shadow: 0 0 0 .075rem $white,
471
+ 0 0 0 .2rem theme-color("primary");
472
+
473
+ $custom-file-padding-y: $input-btn-padding-y;
474
+ $custom-file-padding-x: $input-btn-padding-x;
475
+ $custom-file-line-height: $input-btn-line-height;
476
+ $custom-file-color: $input-color;
477
+ $custom-file-bg: $input-bg;
478
+ $custom-file-border-width: $input-btn-border-width;
479
+ $custom-file-border-color: $input-border-color;
480
+ $custom-file-border-radius: $input-border-radius;
481
+ $custom-file-box-shadow: $input-box-shadow;
482
+ $custom-file-button-color: $custom-file-color;
483
+ $custom-file-button-bg: $input-group-addon-bg;
484
+ $custom-file-text: (
485
+ placeholder: (en: "Choose file..."),
486
+ button-label: (en: "Browse")
487
+ );
488
+
489
+ // Form validation
490
+ $form-feedback-valid-color: theme-color("success");
491
+ $form-feedback-invalid-color: theme-color("danger");
492
+
493
+ // Dropdowns
494
+ //
495
+ // Dropdown menu container and contents.
496
+
497
+ $dropdown-min-width: 10rem;
498
+ $dropdown-padding-y: .5rem;
499
+ $dropdown-spacer: .125rem;
500
+ $dropdown-bg: $white;
501
+ $dropdown-border-color: rgba($black, .15);
502
+ $dropdown-border-width: $border-width;
503
+ $dropdown-divider-bg: $gray-200;
504
+ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175);
505
+
506
+ $dropdown-link-color: $gray-900;
507
+ $dropdown-link-hover-color: darken($gray-900, 5%);
508
+ $dropdown-link-hover-bg: $gray-100;
509
+
510
+ $dropdown-link-active-color: $component-active-color;
511
+ $dropdown-link-active-bg: $component-active-bg;
512
+
513
+ $dropdown-link-disabled-color: $gray-600;
514
+
515
+ $dropdown-item-padding-y: .25rem;
516
+ $dropdown-item-padding-x: 1.5rem;
517
+
518
+ $dropdown-header-color: $gray-600;
519
+
520
+ // Loader Animation
521
+ //
522
+ // All variables associated to the loading component.
523
+
524
+ $loader-bg: transparent;
525
+ $loader-fg: $blue;
526
+ $loader-width: 50px;
527
+
528
+ // Z-index master list
529
+ //
530
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
531
+ // of components dependent on the z-axis and are designed to all work together.
532
+
533
+ $zindex-dropdown: 1000;
534
+ $zindex-sticky: 1020;
535
+ $zindex-fixed: 1030;
536
+ $zindex-modal-backdrop: 1040;
537
+ $zindex-modal: 1050;
538
+ $zindex-popover: 1060;
539
+ $zindex-tooltip: 1070;
540
+
541
+ // Navs
542
+
543
+ $nav-link-padding-y: .5rem;
544
+ $nav-link-padding-x: 1rem;
545
+ $nav-link-disabled-color: $gray-600;
546
+
547
+ $nav-tabs-border-color: #ddd;
548
+ $nav-tabs-border-width: $border-width;
549
+ $nav-tabs-border-radius: $border-radius;
550
+ $nav-tabs-link-hover-border-color: $gray-200;
551
+ $nav-tabs-link-active-color: $gray-700;
552
+ $nav-tabs-link-active-bg: $body-bg;
553
+ $nav-tabs-link-active-border-color: #ddd;
554
+
555
+ $nav-pills-border-radius: $border-radius;
556
+ $nav-pills-link-active-color: $component-active-color;
557
+ $nav-pills-link-active-bg: $component-active-bg;
558
+
559
+ // Navbar
560
+
561
+ $navbar-padding-y: ($spacer / 2);
562
+ $navbar-padding-x: $spacer;
563
+
564
+ $navbar-brand-font-size: $font-size-lg;
565
+ // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
566
+ $nav-link-height: $navbar-brand-font-size * $line-height-base;
567
+ $navbar-brand-height: (
568
+ $font-size-base * $line-height-base + $nav-link-padding-y * 2
569
+ );
570
+ $navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2;
571
+
572
+ $navbar-box-shadow: $box-shadow;
573
+
574
+ $navbar-toggler-padding-y: .25rem;
575
+ $navbar-toggler-padding-x: .75rem;
576
+ $navbar-toggler-font-size: $font-size-lg;
577
+ $navbar-toggler-border-radius: $btn-border-radius;
578
+
579
+ $navbar-dark-color: rgba($white, .5);
580
+ $navbar-dark-hover-color: rgba($white, .75);
581
+ $navbar-dark-active-color: rgba($white, 1);
582
+ $navbar-dark-disabled-color: rgba($white, .25);
583
+ $navbar-dark-toggler-icon-bg: str-replace(
584
+ url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
585
+ "#",
586
+ "%23"
587
+ );
588
+ $navbar-dark-toggler-border-color: rgba($white, .1);
589
+
590
+ $navbar-light-color: $gray-600;
591
+ $navbar-light-hover-color: $gray-700;
592
+ $navbar-light-active-color: $gray-800;
593
+ $navbar-light-disabled-color: rgba($black, .3);
594
+ $navbar-light-toggler-icon-bg: str-replace(
595
+ url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
596
+ "#",
597
+ "%23"
598
+ );
599
+ $navbar-light-toggler-border-color: rgba($black, .1);
600
+
601
+ // Pagination
602
+
603
+ $pagination-padding-y: .5rem;
604
+ $pagination-padding-x: .75rem;
605
+ $pagination-padding-y-sm: .25rem;
606
+ $pagination-padding-x-sm: .5rem;
607
+ $pagination-padding-y-lg: .75rem;
608
+ $pagination-padding-x-lg: 1.5rem;
609
+ $pagination-line-height: 1.25;
610
+
611
+ $pagination-color: $link-color;
612
+ $pagination-bg: $white;
613
+ $pagination-border-width: $border-width;
614
+ $pagination-border-color: #ddd;
615
+
616
+ $pagination-hover-color: $link-hover-color;
617
+ $pagination-hover-bg: $gray-200;
618
+ $pagination-hover-border-color: #ddd;
619
+
620
+ $pagination-active-color: $white;
621
+ $pagination-active-bg: theme-color("primary");
622
+ $pagination-active-border-color: theme-color("primary");
623
+
624
+ $pagination-disabled-color: $gray-600;
625
+ $pagination-disabled-bg: $white;
626
+ $pagination-disabled-border-color: #ddd;
627
+
628
+ // Jumbotron
629
+
630
+ $jumbotron-padding: 2rem;
631
+ $jumbotron-bg: $gray-200;
632
+
633
+ // Cards
634
+
635
+ $card-spacer-y: 1.25rem;
636
+ $card-spacer-x: 1.25rem;
637
+ $card-border-width: $border-width;
638
+ $card-border-radius: $border-radius;
639
+ $card-box-shadow: $box-shadow;
640
+ $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
641
+ $card-cap-bg: $white;
642
+ $card-bg: $white;
643
+
644
+ $card-img-overlay-padding: 1.25rem;
645
+
646
+ $card-group-margin: ($grid-gutter-width / 2);
647
+ $card-deck-margin: $card-group-margin;
648
+
649
+ $card-columns-count: 3;
650
+ $card-columns-gap: 1.25rem;
651
+ $card-columns-margin: $card-spacer-y;
652
+
653
+ // Tooltips
654
+
655
+ $tooltip-max-width: 200px;
656
+ $tooltip-color: $white;
657
+ $tooltip-bg: $gray-700;
658
+ $tooltip-opacity: 1;
659
+ $tooltip-padding-y: 3px;
660
+ $tooltip-padding-x: 8px;
661
+
662
+ $tooltip-arrow-width: 5px;
663
+ $tooltip-arrow-height: 5px;
664
+ $tooltip-arrow-color: $tooltip-bg;
665
+
666
+ // Popovers
667
+
668
+ $popover-inner-padding: 1px;
669
+ $popover-bg: $white;
670
+ $popover-max-width: 276px;
671
+ $popover-border-width: $border-width;
672
+ $popover-border-color: rgba($black, .2);
673
+ $popover-box-shadow: 0 5px 10px rgba($black, .2);
674
+
675
+ $popover-header-bg: darken($popover-bg, 3%);
676
+ $popover-header-color: $headings-color;
677
+ $popover-header-padding-y: 8px;
678
+ $popover-header-padding-x: 14px;
679
+
680
+ $popover-body-color: $body-color;
681
+ $popover-body-padding-y: 9px;
682
+ $popover-body-padding-x: 14px;
683
+
684
+ $popover-arrow-width: 10px;
685
+ $popover-arrow-height: 5px;
686
+ $popover-arrow-color: $popover-bg;
687
+
688
+ $popover-arrow-outer-width: ($popover-arrow-width + 1px);
689
+ $popover-arrow-outer-color: fade-in($popover-border-color, .05);
690
+
691
+ // Badges
692
+
693
+ $badge-font-size: 75%;
694
+ $badge-font-weight: $font-weight-bold;
695
+ $badge-line-height: 1.5;
696
+ $badge-padding-y: .25em;
697
+ $badge-padding-x: .4em;
698
+ $badge-border-radius: $border-radius;
699
+
700
+ $badge-pill-padding-x: .6em;
701
+ // Use a higher than normal value to ensure completely rounded edges when
702
+ // customizing padding or font-size on labels.
703
+ $badge-pill-border-radius: 10rem;
704
+
705
+ // Modals
706
+
707
+ // Padding applied to the modal body
708
+ $modal-inner-padding: 15px;
709
+
710
+ $modal-dialog-margin: 10px;
711
+ $modal-dialog-margin-y-sm-up: 30px;
712
+
713
+ $modal-title-line-height: $line-height-base;
714
+
715
+ $modal-content-bg: $white;
716
+ $modal-content-border-color: rgba($black, .2);
717
+ $modal-content-border-width: $border-width;
718
+ $modal-content-box-shadow-xs: 0 3px 9px rgba($black, .5);
719
+ $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black, .5);
720
+
721
+ $modal-backdrop-bg: $black;
722
+ $modal-backdrop-opacity: .5;
723
+ $modal-header-border-color: $gray-200;
724
+ $modal-footer-border-color: $modal-header-border-color;
725
+ $modal-header-border-width: $modal-content-border-width;
726
+ $modal-footer-border-width: $modal-header-border-width;
727
+ $modal-header-padding: 15px;
728
+
729
+ $modal-lg: 800px;
730
+ $modal-md: 500px;
731
+ $modal-sm: 300px;
732
+
733
+ $modal-transition: transform .3s ease-out;
734
+
735
+ // Alerts
736
+ //
737
+ // Define alert colors, border radius, and padding.
738
+
739
+ $alert-padding-y: .75rem;
740
+ $alert-padding-x: 1.25rem;
741
+ $alert-margin-bottom: 1rem;
742
+ $alert-border-radius: $border-radius;
743
+ $alert-link-font-weight: $font-weight-bold;
744
+ $alert-border-width: $border-width;
745
+
746
+ // Toasts
747
+ //
748
+ // Define toast colors, border radius, and padding.
749
+
750
+ $toast-padding-y: 1rem;
751
+ $toast-padding-x: 1rem;
752
+ $toast-border-radius: $border-radius;
753
+ $toast-border-width: $border-width;
754
+ $toast-width: 400px;
755
+
756
+ // Progress bars
757
+
758
+ $progress-height: 1rem;
759
+ $progress-font-size: .75rem;
760
+ $progress-bg: $gray-200;
761
+ $progress-border-radius: $border-radius;
762
+ $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1);
763
+ $progress-bar-color: $white;
764
+ $progress-bar-bg: theme-color("primary");
765
+ $progress-bar-animation-timing: 1s linear infinite;
766
+ $progress-bar-transition: width .6s ease;
767
+
768
+ // List group
769
+
770
+ $list-group-bg: $white;
771
+ $list-group-border-color: rgba($black, .125);
772
+ $list-group-border-width: $border-width;
773
+ $list-group-border-radius: $border-radius;
774
+
775
+ $list-group-item-padding-y: .75rem;
776
+ $list-group-item-padding-x: 1.25rem;
777
+
778
+ $list-group-hover-bg: $gray-100;
779
+ $list-group-active-color: $component-active-color;
780
+ $list-group-active-bg: $component-active-bg;
781
+ $list-group-active-border-color: $list-group-active-bg;
782
+
783
+ $list-group-disabled-color: $gray-600;
784
+ $list-group-disabled-bg: $list-group-bg;
785
+
786
+ $list-group-action-color: $gray-700;
787
+ $list-group-action-hover-color: $list-group-action-color;
788
+
789
+ $list-group-action-active-color: $body-color;
790
+ $list-group-action-active-bg: $gray-200;
791
+
792
+ // Image thumbnails
793
+
794
+ $thumbnail-padding: .25rem;
795
+ $thumbnail-bg: $body-bg;
796
+ $thumbnail-border-width: $border-width;
797
+ $thumbnail-border-color: #ddd;
798
+ $thumbnail-border-radius: $border-radius;
799
+ $thumbnail-box-shadow: 0 1px 2px rgba($black, .075);
800
+ $thumbnail-transition: all .2s ease-in-out;
801
+
802
+ // Figures
803
+
804
+ $figure-caption-font-size: 90%;
805
+ $figure-caption-color: $gray-600;
806
+
807
+ // Breadcrumbs
808
+
809
+ $breadcrumb-padding-y: .75rem;
810
+ $breadcrumb-padding-x: 1rem;
811
+ $breadcrumb-item-padding: .5rem;
812
+
813
+ $breadcrumb-margin-bottom: 1rem;
814
+
815
+ $breadcrumb-bg: $gray-200;
816
+ $breadcrumb-divider-color: $gray-600;
817
+ $breadcrumb-active-color: $gray-600;
818
+ $breadcrumb-divider: "/";
819
+
820
+ // Carousel
821
+
822
+ $carousel-control-color: $white;
823
+ $carousel-control-width: 15%;
824
+ $carousel-control-opacity: .5;
825
+
826
+ $carousel-indicator-width: 30px;
827
+ $carousel-indicator-height: 3px;
828
+ $carousel-indicator-spacer: 3px;
829
+ $carousel-indicator-active-bg: $white;
830
+
831
+ $carousel-caption-width: 70%;
832
+ $carousel-caption-color: $white;
833
+
834
+ $carousel-control-icon-width: 20px;
835
+
836
+ $carousel-control-prev-icon-bg: str-replace(
837
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"),
838
+ "#",
839
+ "%23"
840
+ );
841
+ $carousel-control-next-icon-bg: str-replace(
842
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"),
843
+ "#",
844
+ "%23"
845
+ );
846
+
847
+ $carousel-transition: transform .6s ease;
848
+
849
+ // Close
850
+
851
+ $close-font-size: $font-size-base * 1.5;
852
+ $close-font-weight: $font-weight-bold;
853
+ $close-color: $black;
854
+ $close-text-shadow: 0 1px 0 $white;
855
+
856
+ // Code
857
+
858
+ $code-font-size: 90%;
859
+ $code-padding-y: .2rem;
860
+ $code-padding-x: .4rem;
861
+ $code-color: #bd4147;
862
+ $code-bg: $gray-100;
863
+
864
+ $kbd-color: $white;
865
+ $kbd-bg: $gray-900;
866
+
867
+ $pre-color: $gray-900;
868
+ $pre-scrollable-max-height: 340px;