hootstrap 0.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.
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;