@unlk/keymaster 1.0.2 → 1.0.4

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 (48) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +157 -0
  3. package/dist/css/keymaster.css +642 -588
  4. package/dist/css/keymaster.css.map +1 -1
  5. package/dist/css/keymaster.min.css +5 -5
  6. package/dist/css/keymaster.min.css.map +1 -1
  7. package/dist/js/keymaster.js +180 -80
  8. package/dist/js/keymaster.js.map +1 -1
  9. package/dist/js/keymaster.min.js +65 -65
  10. package/dist/js/keymaster.min.js.map +1 -1
  11. package/js/bootstrap.js +1 -0
  12. package/js/video-modal.js +123 -0
  13. package/package.json +3 -2
  14. package/scss/assets/bootstrap5/_accordion.scss +4 -9
  15. package/scss/assets/bootstrap5/_button-group.scss +8 -3
  16. package/scss/assets/bootstrap5/_card.scss +1 -2
  17. package/scss/assets/bootstrap5/_carousel.scss +15 -25
  18. package/scss/assets/bootstrap5/_close.scss +9 -6
  19. package/scss/assets/bootstrap5/_functions.scss +1 -1
  20. package/scss/assets/bootstrap5/_list-group.scss +27 -25
  21. package/scss/assets/bootstrap5/_modal.scss +6 -2
  22. package/scss/assets/bootstrap5/_nav.scss +1 -1
  23. package/scss/assets/bootstrap5/_navbar.scss +1 -1
  24. package/scss/assets/bootstrap5/_offcanvas.scss +5 -1
  25. package/scss/assets/bootstrap5/_pagination.scss +1 -1
  26. package/scss/assets/bootstrap5/_progress.scss +1 -1
  27. package/scss/assets/bootstrap5/_reboot.scss +1 -1
  28. package/scss/assets/bootstrap5/_type.scss +1 -1
  29. package/scss/assets/bootstrap5/_variables-dark.scss +17 -2
  30. package/scss/assets/bootstrap5/_variables.scss +16 -16
  31. package/scss/assets/bootstrap5/forms/_floating-labels.scss +18 -16
  32. package/scss/assets/bootstrap5/forms/_input-group.scss +1 -1
  33. package/scss/assets/bootstrap5/mixins/_banner.scss +2 -2
  34. package/scss/assets/bootstrap5/mixins/_grid.scss +1 -1
  35. package/scss/assets/bootstrap5/mixins/_visually-hidden.scss +1 -1
  36. package/scss/keymaster.scss +3 -0
  37. package/scss/theme/_accordion.scss +13 -3
  38. package/scss/theme/_alert.scss +2 -0
  39. package/scss/theme/_badge.scss +1 -1
  40. package/scss/theme/_buttons.scss +5 -5
  41. package/scss/theme/_carousel.scss +3 -6
  42. package/scss/theme/_close.scss +3 -0
  43. package/scss/theme/_modal.scss +35 -0
  44. package/scss/theme/_spinners.scss +9 -0
  45. package/scss/theme/_typography.scss +8 -13
  46. package/scss/theme/_utilities-overrides.scss +33 -33
  47. package/scss/theme/_variables-overrides.scss +15 -8
  48. package/scss/theme/_variables.scss +12 -0
@@ -14,9 +14,11 @@
14
14
  top: 0;
15
15
  left: 0;
16
16
  z-index: 2;
17
+ max-width: 100%;
17
18
  height: 100%; // allow textareas
18
19
  padding: $form-floating-padding-y $form-floating-padding-x;
19
20
  overflow: hidden;
21
+ color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
20
22
  text-align: start;
21
23
  text-overflow: ellipsis;
22
24
  white-space: nowrap;
@@ -49,6 +51,7 @@
49
51
  > .form-select {
50
52
  padding-top: $form-floating-input-padding-t;
51
53
  padding-bottom: $form-floating-input-padding-b;
54
+ padding-left: $form-floating-padding-x;
52
55
  }
53
56
 
54
57
  > .form-control:focus,
@@ -56,27 +59,30 @@
56
59
  > .form-control-plaintext,
57
60
  > .form-select {
58
61
  ~ label {
59
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
60
62
  transform: $form-floating-label-transform;
61
-
62
- &::after {
63
- position: absolute;
64
- inset: $form-floating-padding-y ($form-floating-padding-x * .5);
65
- z-index: -1;
66
- height: $form-floating-label-height;
67
- content: "";
68
- background-color: $input-bg;
69
- @include border-radius($input-border-radius);
70
- }
71
63
  }
72
64
  }
73
65
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
74
66
  > .form-control:-webkit-autofill {
75
67
  ~ label {
76
- color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
77
68
  transform: $form-floating-label-transform;
78
69
  }
79
70
  }
71
+ > textarea:focus,
72
+ > textarea:not(:placeholder-shown) {
73
+ ~ label::after {
74
+ position: absolute;
75
+ inset: $form-floating-padding-y ($form-floating-padding-x * .5);
76
+ z-index: -1;
77
+ height: $form-floating-label-height;
78
+ content: "";
79
+ background-color: $input-bg;
80
+ @include border-radius($input-border-radius);
81
+ }
82
+ }
83
+ > textarea:disabled ~ label::after {
84
+ background-color: $input-disabled-bg;
85
+ }
80
86
 
81
87
  > .form-control-plaintext {
82
88
  ~ label {
@@ -87,9 +93,5 @@
87
93
  > :disabled ~ label,
88
94
  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
89
95
  color: $form-floating-label-disabled-color;
90
-
91
- &::after {
92
- background-color: $input-disabled-bg;
93
- }
94
96
  }
95
97
  }
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124
- margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
124
+ margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
125
125
  @include border-start-radius(0);
126
126
  }
127
127
 
@@ -1,7 +1,7 @@
1
1
  @mixin bsBanner($file) {
2
2
  /*!
3
- * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
4
- * Copyright 2011-2024 The Bootstrap Authors
3
+ * Bootstrap #{$file} v5.3.5 (https://getbootstrap.com/)
4
+ * Copyright 2011-2025 The Bootstrap Authors
5
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
6
  */
7
7
  }
@@ -72,7 +72,7 @@
72
72
  @include media-breakpoint-up($breakpoint, $breakpoints) {
73
73
  // Provide basic `.col-{bp}` classes for equal-width flexbox columns
74
74
  .col#{$infix} {
75
- flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
75
+ flex: 1 0 0;
76
76
  }
77
77
 
78
78
  .row-cols#{$infix}-auto > * {
@@ -24,7 +24,7 @@
24
24
  // Use to only display content when it's focused, or one of its child elements is focused
25
25
  // (i.e. when focus is within the element/container that the class was applied to)
26
26
  //
27
- // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
27
+ // Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
28
28
 
29
29
  @mixin visually-hidden-focusable() {
30
30
  &:not(:focus):not(:focus-within) {
@@ -29,3 +29,6 @@
29
29
  @import "theme/alert";
30
30
  @import "theme/badge";
31
31
  @import "theme/carousel";
32
+ @import "theme/spinners";
33
+ @import "theme/modal";
34
+ @import "theme/close";
@@ -10,35 +10,43 @@
10
10
  --#{$prefix}accordion-alt-btn-icon: #{escape-svg($accordion-alt-button-icon)};
11
11
  --#{$prefix}accordion-alt-btn-active-icon: #{escape-svg($accordion-alt-button-active-icon)};
12
12
  --#{$prefix}accordion-alt-active-color: #{$accordion-alt-button-active-color};
13
+
13
14
  .accordion-button {
14
- background-color: var(--#{$prefix}accordion-alt-btn-bg);
15
15
  margin-bottom: 0;
16
+ background-color: var(--#{$prefix}accordion-alt-btn-bg);
17
+
16
18
  i {
17
- margin-right: $spacer * .5;
18
19
  width: var(--#{$prefix}accordion-alt-btn-icon-width);
19
20
  height: var(--#{$prefix}accordion-alt-btn-icon-width);
21
+ margin-right: $spacer * .5;
20
22
  }
23
+
21
24
  &:not(.collapsed) {
22
25
  color: var(--#{$prefix}accordion-alt-active-color);
23
26
  @include box-shadow(none);
27
+
24
28
  &::after {
25
29
  background-image: var(--#{$prefix}accordion-alt-btn-active-icon);
26
30
  transform: var(--#{$prefix}accordion-btn-icon-transform);
27
31
  }
28
32
  }
33
+
29
34
  &::after {
30
35
  width: var(--#{$prefix}accordion-btn-icon-width);
31
36
  height: var(--#{$prefix}accordion-btn-icon-width);
32
37
  background-image: var(--#{$prefix}accordion-alt-btn-icon);
33
38
  }
34
39
  }
40
+
35
41
  > .accordion-item {
36
42
  background-color: var(--#{$prefix}accordion-alt-bg);
37
- border: none;
43
+ border: 0;
38
44
  @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
45
+
39
46
  &:not(:last-child) {
40
47
  @include margin-bottom($spacer);
41
48
  }
49
+
42
50
  // stylelint-disable selector-max-class
43
51
  > .accordion-header .accordion-button {
44
52
  &,
@@ -46,6 +54,7 @@
46
54
  @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
47
55
  }
48
56
  }
57
+
49
58
  // stylelint-enable selector-max-class
50
59
 
51
60
  > .accordion-collapse {
@@ -54,6 +63,7 @@
54
63
 
55
64
  .accordion-body {
56
65
  padding-top: 0;
66
+
57
67
  &.has-icon {
58
68
  padding-left: $spacer * 3.125;
59
69
  }
@@ -1,12 +1,14 @@
1
1
  .alert {
2
2
  position: relative;
3
3
  display: flex;
4
+
4
5
  i {
5
6
  margin-top: $spacer * .25;
6
7
  margin-right: $spacer * .5;
7
8
  font-size: $font-size-base;
8
9
  }
9
10
  }
11
+
10
12
  @each $state, $value in $theme-colors {
11
13
  $alert-border: var(--#{$prefix}#{$state}-border-subtle);
12
14
  $alert-color: var(--#{$prefix}#{$state}-text-emphasis);
@@ -1,6 +1,6 @@
1
1
  .badge-outline {
2
- border: rfs-value(2px) solid $blueprint;
3
2
  color: $blueprint;
3
+ border: rfs-value(2px) solid $blueprint;
4
4
  }
5
5
 
6
6
  .badge-dot {
@@ -16,7 +16,7 @@
16
16
  .btn-link-#{$color} {
17
17
  @if $color == "primary" or $color == "blueprint" {
18
18
  @include button-link-variant(
19
- $value,
19
+ $value,
20
20
  $active-background: $blueprint-700,
21
21
  );
22
22
  }
@@ -26,8 +26,8 @@
26
26
  @each $color, $value in $theme-colors {
27
27
  .btn-#{$color} {
28
28
  @include button-variant(
29
- $value,
30
- $value,
29
+ $value,
30
+ $value,
31
31
  $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
32
32
  $hover-border: shade-color($value, $btn-hover-border-shade-amount),
33
33
  $active-background: shade-color($value, $btn-active-bg-shade-amount),
@@ -41,9 +41,9 @@
41
41
  .btn-outline-#{$color} {
42
42
  @if $color == "light" {
43
43
  @include button-outline-variant(
44
- $value,
44
+ $value,
45
45
  $color-hover: $value,
46
- $active-background: rgba($blueprint-500, 0.25),
46
+ $active-background: rgba($blueprint-500, .25),
47
47
  $active-border: $value,
48
48
  $active-color: $value,
49
49
  );
@@ -5,8 +5,8 @@
5
5
  .carousel-caption {
6
6
  padding-bottom: ($spacer * .75);
7
7
  h6 {
8
- color: $white;
9
8
  margin-bottom: 0;
9
+ color: $white;
10
10
  }
11
11
  }
12
12
  }
@@ -25,6 +25,8 @@
25
25
  .carousel-control-prev,
26
26
  .carousel-control-next {
27
27
  position: unset;
28
+ width: fit-content;
29
+ padding: rfs-value(6px);
28
30
  }
29
31
  .carousel-indicators {
30
32
  position: unset;
@@ -35,8 +37,3 @@
35
37
  @extend .rounded-circle;
36
38
  }
37
39
  }
38
-
39
- .carousel-control-prev, .carousel-control-next {
40
- width: fit-content;
41
- padding: rfs-value(6px);
42
- }
@@ -0,0 +1,3 @@
1
+ .btn-close {
2
+ --#{$prefix}btn-close-media-bg: #{ escape-svg($btn-close-media-bg) };
3
+ }
@@ -0,0 +1,35 @@
1
+ .modal-dialog-media {
2
+ --#{$prefix}modal-close-zindex: #{$zindex-media-modal-close};
3
+ .modal-header {
4
+ position: relative;
5
+ padding: 0;
6
+ border-bottom: none;
7
+ .btn-close {
8
+ position: absolute;
9
+ right: -1em;
10
+ z-index: var(--#{$prefix}modal-close-zindex);
11
+ width: $btn-close-media-width;
12
+ height: $btn-close-media-height;
13
+ text-shadow: 0 0 rfs-value(1px) $gray-400;
14
+ background: transparent var(--#{$prefix}btn-close-media-bg) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
15
+ opacity: .97;
16
+ &:hover {
17
+ opacity: 1;
18
+ }
19
+ .cls-2 {
20
+ &:hover {
21
+ fill: $foundation-500;
22
+ }
23
+ }
24
+ @include media-breakpoint-down(xl) {
25
+ right: 0;
26
+ width: rfs-value(10px);
27
+ height: rfs-value(10px);
28
+ }
29
+ }
30
+ }
31
+ @include media-breakpoint-down(sm) {
32
+ @include margin-right($spacer * 1.25);
33
+ @include margin-left($spacer * 1.25);
34
+ }
35
+ }
@@ -0,0 +1,9 @@
1
+ .spinner-border {
2
+ position: relative;
3
+ background: none;
4
+ border: 0;
5
+ .spinner-border-svg {
6
+ width: 100%;
7
+ height: 100%;
8
+ }
9
+ }
@@ -1,36 +1,31 @@
1
1
  @font-face {
2
2
  font-family: "Wix MadeFor Display";
3
- src: url('#{$font-path}/WixMadeforDisplay-Regular.woff2') format('woff2'),
4
- url('#{$font-path}/WixMadeforDisplay-Regular.ttf') format('truetype');
5
3
  font-weight: 400;
4
+ src: url("#{$font-path}/WixMadeforDisplay-Regular.woff2") format("woff2"), url("#{$font-path}/WixMadeforDisplay-Regular.ttf") format("truetype");
6
5
  }
7
6
 
8
7
  @font-face {
9
8
  font-family: "Wix MadeFor Display";
10
- src: url('#{$font-path}/WixMadeforDisplay-Bold.woff2') format('woff2'),
11
- url('#{$font-path}/WixMadeforDisplay-Bold.ttf') format('truetype');
12
9
  font-weight: 700;
10
+ src: url("#{$font-path}/WixMadeforDisplay-Bold.woff2") format("woff2"), url("#{$font-path}/WixMadeforDisplay-Bold.ttf") format("truetype");
13
11
  }
14
12
 
15
13
  @font-face {
16
- font-family: "STIXTwoText";
17
- src: url('#{$font-path}/STIXTwoText-Italic.woff2') format('woff2'),
18
- url('#{$font-path}/STIXTwoText-Italic.ttf') format('truetype');
19
- font-weight: 400;
14
+ font-family: STIXTwoText;
20
15
  font-style: italic;
16
+ font-weight: 400;
17
+ src: url("#{$font-path}/STIXTwoText-Italic.woff2") format("woff2"), url("#{$font-path}/STIXTwoText-Italic.ttf") format("truetype");
21
18
  }
22
19
 
23
20
  @font-face {
24
21
  font-family: "Neulis Neue";
25
- src: url('#{$font-path}/NeulisNeue-Medium.woff2') format('woff2'),
26
- url('#{$font-path}/NeulisNeue-Medium.woff') format('woff');
27
22
  font-weight: 500;
23
+ src: url("#{$font-path}/NeulisNeue-Medium.woff2") format("woff2"), url("#{$font-path}/NeulisNeue-Medium.woff") format("woff");
28
24
  }
29
25
 
30
26
  @font-face {
31
27
  font-family: "Neulis Neue";
32
- src: url('#{$font-path}/NeulisNeue-MediumItalic.woff2') format('woff2'),
33
- url('#{$font-path}/NeulisNeue-MediumItalic.woff') format('woff');
34
- font-weight: 500;
35
28
  font-style: italic;
29
+ font-weight: 500;
30
+ src: url("#{$font-path}/NeulisNeue-MediumItalic.woff2") format("woff2"), url("#{$font-path}/NeulisNeue-MediumItalic.woff") format("woff");
36
31
  }
@@ -7,49 +7,49 @@
7
7
  $box-shadow-sm: 0 rfs-value(1px) rfs-value(4px) rgba($foundation-500, .1);
8
8
  $box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12);
9
9
  $box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16);
10
- $box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .10) inset;
10
+ $box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .1) inset;
11
11
 
12
12
  $all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers);
13
13
 
14
14
  $utilities: map-merge(
15
- $utilities,
16
- (
17
- "shadow": map-merge(
18
- map-get($utilities, "shadow"),
15
+ $utilities,
16
+ (
17
+ "shadow": map-merge(
18
+ map-get($utilities, "shadow"),
19
+ (
20
+ class: box-shadow,
21
+ values: map-merge(
22
+ map-get(map-get($utilities, "shadow"), "values"),
19
23
  (
20
- class: box-shadow,
21
- values: map-merge(
22
- map-get(map-get($utilities, "shadow"), "values"),
23
- (
24
- null: var(--#{$prefix}box-shadow),
25
- sm: var(--#{$prefix}box-shadow-sm),
26
- lg: var(--#{$prefix}box-shadow-lg),
27
- inset: var(--#{$prefix}box-shadow-inset)
28
- )
29
- )
24
+ null: var(--#{$prefix}box-shadow),
25
+ sm: var(--#{$prefix}box-shadow-sm),
26
+ lg: var(--#{$prefix}box-shadow-lg),
27
+ inset: var(--#{$prefix}box-shadow-inset)
30
28
  )
31
- ),
32
- "color": map-merge(
33
- map-get($utilities, "color"),
29
+ )
30
+ )
31
+ ),
32
+ "color": map-merge(
33
+ map-get($utilities, "color"),
34
+ (
35
+ values: map-merge(
36
+ map-get(map-get($utilities, "color"), "values"),
34
37
  (
35
- values: map-merge(
36
- map-get(map-get($utilities, "color"), "values"),
37
- (
38
- $all-colors
39
- ),
40
- ),
38
+ $all-colors
41
39
  ),
40
+ ),
42
41
  ),
43
- "background-color": map-merge(
44
- map-get($utilities, "background-color"),
42
+ ),
43
+ "background-color": map-merge(
44
+ map-get($utilities, "background-color"),
45
+ (
46
+ values: map-merge(
47
+ map-get(map-get($utilities, "background-color"), "values"),
45
48
  (
46
- values: map-merge(
47
- map-get(map-get($utilities, "background-color"), "values"),
48
- (
49
- $all-colors
50
- ),
51
- ),
49
+ $all-colors
52
50
  ),
51
+ ),
53
52
  ),
54
- )
53
+ ),
54
+ )
55
55
  );
@@ -16,12 +16,12 @@ $font-family-base: "Wix MadeFor Display";
16
16
  $font-family-code: "Wix MadeFor Display";
17
17
 
18
18
  // Colors
19
- $foundation: #1D1F50;
20
- $blueprint: #3E51A2;
21
- $entryway: #3B7BBF;
22
- $skylight: #CDECF9;
23
- $turnkey: #6346D3;
24
- $sunglow: #FBCD2F;
19
+ $foundation: #1d1f50;
20
+ $blueprint: #3e51a2;
21
+ $entryway: #3b7bbf;
22
+ $skylight: #cdecf9;
23
+ $turnkey: #6346d3;
24
+ $sunglow: #fbcd2f;
25
25
  $green: #027a48;
26
26
  $red: #b42318;
27
27
  $gray: #c1c5cc;
@@ -342,7 +342,7 @@ $headings-font-weight: $font-weight-medium;
342
342
  // Display Headings
343
343
  $display-font-family: "Neulis Neue";
344
344
  $display-font-weight: $font-weight-medium;
345
- $display-line-height: 1.1 !default;
345
+ $display-line-height: 1.1;
346
346
 
347
347
  $font-sizes: (
348
348
  1: $font-size-base * 1.25,
@@ -354,7 +354,7 @@ $font-sizes: (
354
354
  );
355
355
 
356
356
  // Tables
357
- $table-bg-scale: -80% !default;
357
+ $table-bg-scale: -80%;
358
358
 
359
359
  $table-variants: (
360
360
  "primary": shift-color($primary, $table-bg-scale),
@@ -407,6 +407,10 @@ $accordion-button-focus-box-shadow: none;
407
407
  $badge-font-size: .9375em;
408
408
  $badge-border-radius: var(--#{$prefix}border-radius-pill);
409
409
 
410
+ // Modal
411
+ $modal-backdrop-bg: $foundation;
412
+ $modal-backdrop-opacity: .7;
413
+
410
414
  // Carousel
411
415
  $carousel-control-color: $black;
412
416
  $carousel-control-icon-width: .75rem;
@@ -415,3 +419,6 @@ $carousel-indicator-height: 6px;
415
419
  $carousel-indicator-active-bg: $foundation-500;
416
420
  $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M0.251787 5.38204C-0.083034 5.72383 -0.083034 6.27891 0.251787 6.62071L4.5375 10.9957C4.87232 11.3375 5.41607 11.3375 5.75089 10.9957C6.08572 10.6539 6.08572 10.0988 5.75089 9.75704L2.925 6.87501H11.1429C11.617 6.87501 12 6.48399 12 6.00001C12 5.51602 11.617 5.12501 11.1429 5.12501H2.92768L5.74822 2.24297C6.08304 1.90118 6.08304 1.3461 5.74822 1.0043C5.41339 0.662506 4.86964 0.662506 4.53482 1.0043L0.249109 5.3793L0.251787 5.38204Z'/></svg>");
417
421
  $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M11.7482 5.87002C12.083 5.52822 12.083 4.97314 11.7482 4.63135L7.4625 0.256348C7.12768 -0.0854492 6.58393 -0.0854492 6.24911 0.256348C5.91429 0.598145 5.91429 1.15322 6.24911 1.49502L9.075 4.37705H0.857143C0.383036 4.37705 0 4.76807 0 5.25205C0 5.73604 0.383036 6.12705 0.857143 6.12705H9.07232L6.25179 9.00908C5.91696 9.35088 5.91696 9.90596 6.25179 10.2478C6.58661 10.5896 7.13036 10.5896 7.46518 10.2478L11.7509 5.87275L11.7482 5.87002Z'/></svg>");
422
+
423
+ // Tooltips
424
+ $tooltip-bg: var(--#{$prefix}primary);
@@ -31,3 +31,15 @@ $badge-font-size-lg: 1.125em;
31
31
  $badge-dot-padding: .5em;
32
32
  $badge-dot-size: 1rem;
33
33
  // scss-docs-end badge-variables
34
+
35
+ // Modals
36
+ // scss-docs-start modal-variables
37
+ $zindex-media-modal-close: 1060;
38
+ $btn-close-media-bg-color: $white;
39
+ $btn-close-media-top-color: $foundation;
40
+ $btn-close-media-stroke-width: rfs-value(1px);
41
+ $btn-close-media-stroke-color: $gray-400;
42
+ $btn-close-media-bg: url("data:image/svg+xml, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'><style>.cls-1{fill:#{$btn-close-media-stroke-color}}.cls-2{fill:#{$btn-close-media-bg-color}}.cls-3{fill:#{$btn-close-media-top-color}}</style><path class='cls-1' d='M20 1.25C22.4623 1.25 24.9005 1.73498 27.1753 2.67726C29.4502 3.61953 31.5172 5.00065 33.2583 6.74175C34.9994 8.48285 36.3805 10.5498 37.3227 12.8247C38.265 15.0995 38.75 17.5377 38.75 20C38.75 22.4623 38.265 24.9005 37.3227 27.1753C36.3805 29.4502 34.9994 31.5172 33.2583 33.2583C31.5172 34.9994 29.4502 36.3805 27.1753 37.3227C24.9005 38.265 22.4623 38.75 20 38.75C17.5377 38.75 15.0995 38.265 12.8247 37.3227C10.5498 36.3805 8.48285 34.9994 6.74175 33.2583C5.00065 31.5172 3.61953 29.4502 2.67726 27.1753C1.73498 24.9005 1.25 22.4623 1.25 20C1.25 17.5377 1.73498 15.0995 2.67726 12.8247C3.61953 10.5498 5.00065 8.48285 6.74175 6.74175C8.48285 5.00065 10.5498 3.61953 12.8247 2.67726C15.0995 1.73498 17.5377 1.25 20 1.25ZM20 40C25.3043 40 30.3914 37.8929 34.1421 34.1421C37.8929 30.3914 40 25.3043 40 20C40 14.6957 37.8929 9.60859 34.1421 5.85786C30.3914 2.10714 25.3043 0 20 0C14.6957 0 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40Z'/><path class='cls-2' d='M1.25 20C1.25 22.4623 1.73498 24.9005 2.67726 27.1753C3.61953 29.4502 5.00065 31.5172 6.74175 33.2583C8.48285 34.9994 10.5498 36.3805 12.8247 37.3227C15.0995 38.265 17.5377 38.75 20 38.75C22.4623 38.75 24.9005 38.265 27.1753 37.3227C29.4502 36.3805 31.5172 34.9994 33.2583 33.2583C34.9994 31.5172 36.3805 29.4502 37.3227 27.1753C38.265 24.9005 38.75 22.4623 38.75 20C38.75 17.5377 38.265 15.0995 37.3227 12.8247C36.3805 10.5498 34.9994 8.48285 33.2583 6.74175C31.5172 5.00065 29.4502 3.61953 27.1753 2.67726C24.9005 1.73498 22.4623 1.25 20 1.25C17.5377 1.25 15.0995 1.73498 12.8247 2.67726C10.5498 3.61953 8.48285 5.00065 6.74175 6.74175C5.00065 8.48285 3.61953 10.5498 2.67726 12.8247C1.73498 15.0995 1.25 17.5377 1.25 20ZM13.9297 13.9297C14.1719 13.6875 14.5703 13.6875 14.8125 13.9297L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9375 14.8203C13.6953 14.5781 13.6953 14.1797 13.9375 13.9375L13.9297 13.9297Z'/><path class='cls-3' d='M13.9297 14.8125C13.6875 14.5703 13.6875 14.1719 13.9297 13.9297L13.9375 13.9375C14.1797 13.6953 14.5781 13.6953 14.8203 13.9375L20 19.1172L25.1797 13.9375C25.4219 13.6953 25.8203 13.6953 26.0625 13.9375C26.3047 14.1797 26.3047 14.5781 26.0625 14.8203L20.8828 20L26.0625 25.1797C26.3047 25.4219 26.3047 25.8203 26.0625 26.0625C25.8203 26.3047 25.4219 26.3047 25.1797 26.0625L20 20.8828L14.8203 26.0625C14.5781 26.3047 14.1797 26.3047 13.9375 26.0625C13.6953 25.8203 13.6953 25.4219 13.9375 25.1797L19.1172 20L13.9297 14.8125Z'/></svg>");
43
+ $btn-close-media-width: rfs-value(35px);
44
+ $btn-close-media-height: $btn-close-media-width;
45
+ // scss-docs-end modal-variables