@enact/limestone 1.3.0 → 1.9.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 (166) hide show
  1. package/.github/workflows/ci-branch.yml +21 -0
  2. package/.github/workflows/ci-pull-request.yml +16 -0
  3. package/.github/workflows/ci-reusable.yml +73 -0
  4. package/ActionGuide/ActionGuide.d.ts +5 -4
  5. package/ActionGuide/ActionGuide.module.css +1 -1
  6. package/Alert/Alert.d.ts +4 -2
  7. package/Alert/Alert.js +4 -1
  8. package/Alert/Alert.module.css +36 -0
  9. package/BodyText/BodyText.d.ts +5 -4
  10. package/BodyText/BodyText.module.css +7 -7
  11. package/Button/Button.d.ts +17 -12
  12. package/Button/Button.js +1 -1
  13. package/Button/Button.module.css +195 -268
  14. package/CHANGELOG.md +226 -0
  15. package/Card/Card.d.ts +36 -8
  16. package/Card/Card.js +157 -20
  17. package/Card/Card.module.css +277 -58
  18. package/Card/tests/Card-specs.js +30 -0
  19. package/Checkbox/Checkbox.d.ts +8 -7
  20. package/Checkbox/Checkbox.js +3 -1
  21. package/Checkbox/Checkbox.module.css +213 -120
  22. package/Checkbox/tests/Checkbox-specs.js +1 -1
  23. package/CheckboxItem/CheckboxItem.d.ts +22 -7
  24. package/CheckboxItem/CheckboxItem.js +69 -4
  25. package/Chips/Chip.js +60 -7
  26. package/Chips/Chip.module.css +3 -3
  27. package/Chips/Chips.js +26 -12
  28. package/Chips/Chips.module.css +1 -1
  29. package/Chips/tests/Chip-specs.js +19 -9
  30. package/Chips/tests/Chips-specs.js +19 -19
  31. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
  32. package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
  33. package/ContextualPopupDecorator/ContextualPopupDecorator.js +557 -549
  34. package/DatePicker/DatePicker.d.ts +4 -5
  35. package/DayPicker/DayPicker.d.ts +8 -7
  36. package/Dropdown/Dropdown.d.ts +11 -13
  37. package/Dropdown/Dropdown.module.css +9 -9
  38. package/Dropdown/DropdownList.js +16 -11
  39. package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
  40. package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
  41. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
  42. package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
  43. package/Heading/Heading.d.ts +8 -7
  44. package/Heading/Heading.module.css +5 -5
  45. package/Icon/Icon.d.ts +14 -4
  46. package/Icon/Icon.js +48 -2
  47. package/Icon/Icon.module.css +1 -1
  48. package/Icon/IconList.js +25 -1
  49. package/IconItem/IconItem.d.ts +13 -12
  50. package/IconItem/IconItem.js +15 -0
  51. package/IconItem/IconItem.module.css +107 -1
  52. package/Image/Image.d.ts +5 -4
  53. package/ImageItem/ImageItem.d.ts +11 -10
  54. package/ImageItem/ImageItem.js +37 -31
  55. package/ImageItem/ImageItem.module.css +30 -30
  56. package/ImageItem/tests/ImageItem-specs.js +3 -10
  57. package/Input/Input.js +9 -2
  58. package/Input/Input.module.css +37 -8
  59. package/Input/InputField.js +5 -1
  60. package/Input/InputField.module.css +17 -2
  61. package/Input/InputFieldSpotlightDecorator.js +213 -229
  62. package/Input/index.d.ts +15 -18
  63. package/Input/tests/InputField-specs.js +21 -0
  64. package/Item/Item.d.ts +16 -9
  65. package/Item/Item.js +20 -2
  66. package/Item/Item.module.css +1 -1
  67. package/KeyGuide/KeyGuide.d.ts +8 -7
  68. package/KeyGuide/KeyGuide.module.css +25 -1
  69. package/Marquee/Marquee.d.ts +2 -4
  70. package/MediaOverlay/MediaOverlay.d.ts +12 -11
  71. package/MediaOverlay/MediaOverlay.js +43 -21
  72. package/MediaOverlay/MediaOverlay.module.css +114 -15
  73. package/MediaPlayer/MediaControls.js +195 -13
  74. package/MediaPlayer/MediaControls.module.css +3 -2
  75. package/MediaPlayer/MediaSlider.module.css +7 -20
  76. package/MediaPlayer/index.d.ts +59 -7
  77. package/PageViews/PageViews.js +165 -80
  78. package/PageViews/PageViewsRouter.js +9 -0
  79. package/PageViews/tests/PageViews-specs.js +84 -0
  80. package/Panels/Header.js +48 -30
  81. package/Panels/Header.module.css +83 -31
  82. package/Panels/Panel.module.css +1 -1
  83. package/Panels/index.d.ts +7 -8
  84. package/Picker/Picker.d.ts +4 -5
  85. package/Picker/Picker.module.css +2 -2
  86. package/Popup/Popup.js +242 -240
  87. package/Popup/Popup.module.css +24 -24
  88. package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
  89. package/PopupTabLayout/PopupTabLayout.js +15 -9
  90. package/PopupTabLayout/PopupTabLayout.module.css +53 -16
  91. package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
  92. package/ProgressBar/ProgressBar.d.ts +5 -4
  93. package/ProgressBar/ProgressBarTooltip.module.css +12 -12
  94. package/ProgressButton/ProgressButton.d.ts +4 -5
  95. package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
  96. package/RadioItem/RadioItem.d.ts +18 -5
  97. package/RadioItem/RadioItem.js +67 -2
  98. package/RadioItem/RadioItem.module.css +36 -36
  99. package/RangePicker/RangePicker.module.css +2 -2
  100. package/Scroller/EditableWrapper.js +11 -4
  101. package/Scroller/Scroller.d.ts +20 -16
  102. package/Scroller/Scroller.js +9 -3
  103. package/Scroller/Scroller.module.css +4 -4
  104. package/Slider/Slider.d.ts +16 -14
  105. package/Slider/Slider.js +37 -4
  106. package/Slider/Slider.module.css +314 -91
  107. package/Slider/tests/Slider-specs.js +2 -1
  108. package/Spinner/Spinner.d.ts +5 -4
  109. package/Spinner/Spinner.module.css +9 -9
  110. package/Steps/Steps.d.ts +5 -4
  111. package/Steps/Steps.js +9 -5
  112. package/Switch/Switch.d.ts +8 -7
  113. package/Switch/Switch.module.css +100 -13
  114. package/SwitchItem/SwitchItem.d.ts +9 -6
  115. package/TabLayout/RefocusDecorator.js +15 -9
  116. package/TabLayout/TabGroup.js +3 -2
  117. package/TabLayout/TabGroup.module.css +2 -2
  118. package/TabLayout/TabLayout.d.ts +6 -0
  119. package/TabLayout/TabLayout.js +11 -1
  120. package/TabLayout/TabLayout.module.css +18 -0
  121. package/TabLayout/tests/TabLayout-specs.js +52 -0
  122. package/ThemeDecorator/ThemeDecorator.d.ts +9 -10
  123. package/ThemeDecorator/fontGenerator.js +1 -1
  124. package/ThemeDecorator/screenTypes.json +1 -0
  125. package/TimePicker/TimePicker.module.css +1 -1
  126. package/TooltipDecorator/Tooltip.module.css +1 -2
  127. package/TooltipDecorator/tests/util-specs.js +12 -0
  128. package/TooltipDecorator/useTooltip.js +1 -1
  129. package/TooltipDecorator/util.js +18 -11
  130. package/VideoPlayer/Feedback.js +3 -0
  131. package/VideoPlayer/Feedback.module.css +5 -9
  132. package/VideoPlayer/FeedbackIcons.js +1 -1
  133. package/VideoPlayer/FeedbackTooltip.module.css +55 -11
  134. package/VideoPlayer/VideoPlayer.d.ts +44 -18
  135. package/VideoPlayer/VideoPlayer.js +128 -23
  136. package/VideoPlayer/VideoPlayer.module.css +28 -11
  137. package/VirtualList/VirtualList.d.ts +9 -2
  138. package/VirtualList/VirtualList.js +31 -6
  139. package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
  140. package/VirtualList/tests/VirtualList-specs.js +28 -1
  141. package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
  142. package/VirtualList/tests/useEvent-specs.js +39 -0
  143. package/VirtualList/useEvent.js +45 -10
  144. package/VirtualList/useThemeVirtualList.js +3 -0
  145. package/WizardPanels/WizardPanels.module.css +2 -2
  146. package/WizardPanels/index.d.ts +4 -2
  147. package/fonts/Limestone_Icons.ttf +0 -0
  148. package/internal/$L/$L.js +3 -3
  149. package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
  150. package/internal/DateTime/DateTime.module.css +1 -0
  151. package/internal/Panels/PanelsRouter.js +16 -5
  152. package/internal/Picker/Picker.module.css +2 -2
  153. package/internal/SharedStateDecorator/SharedStateDecorator.js +76 -99
  154. package/internal/validators/validators.js +21 -2
  155. package/package.json +14 -14
  156. package/styles/colors-highcontrast.less +9 -1
  157. package/styles/colors.less +11 -7
  158. package/styles/motion-mixins.less +66 -0
  159. package/styles/motions.less +78 -0
  160. package/styles/variables.less +176 -150
  161. package/useScroll/HoverToScroll.js +8 -5
  162. package/useScroll/ScrollbarTrack.module.css +8 -8
  163. package/useScroll/useEvent.js +7 -1
  164. package/useScroll/useScroll.js +2 -0
  165. package/useScroll/useScroll.module.css +6 -6
  166. package/.travis.yml +0 -40
package/styles/colors.less CHANGED
@@ -26,6 +26,7 @@
26
26
  // ---------------------------------------
27
27
  @lime-alert-overlay-bg-color: var(--semantic-color-background-popup-default);
28
28
  @lime-alert-overlay-bg-color-opacity: 1;
29
+ @lime-alert-overlay-button-bg-color: var(--semantic-color-surface-popup-default);
29
30
  @lime-alert-overlay-label-color: var(--semantic-color-on-background-popup-main);
30
31
  @lime-alert-overlay-label-sub-color: var(--semantic-color-on-background-popup-sub);
31
32
  @lime-alert-overlay-outline-style: none;
@@ -63,7 +64,6 @@
63
64
  // ---------------------------------------
64
65
  @lime-button-fill-label-color: var(--semantic-color-on-surface-main);
65
66
  @lime-button-fill-container-color: var(--semantic-color-surface-default);
66
- @lime-button-fill-icon-color: var(--semantic-color-on-surface-main);
67
67
  @lime-button-fill-label-focused-color: var(--semantic-color-on-surface-main-focused);
68
68
  @lime-button-fill-container-focused-color: var(--semantic-color-surface-default-focused);
69
69
  @lime-button-fill-icon-focused-color: @lime-button-fill-label-focused-color;
@@ -80,7 +80,6 @@
80
80
  @lime-button-outline-container-selected-color: ~"color(from" var(--semantic-color-surface-default-selected) ~"srgb r g b / 0.5)";
81
81
  @lime-button-outline-border-selected-color: var(--semantic-color-stroke-main-selected);
82
82
  @lime-button-transparent-label-color: var(--semantic-color-on-background-main);
83
- @lime-button-transparent-icon-color: @lime-button-transparent-label-color;
84
83
  @lime-button-transparent-label-focused-color: @lime-button-fill-label-focused-color;
85
84
  @lime-button-transparent-container-focused-color: @lime-button-fill-container-focused-color;
86
85
  @lime-button-transparent-icon-focused-color: @lime-button-fill-icon-focused-color;
@@ -98,7 +97,7 @@
98
97
  @lime-card-container-color: ~"color(from" var(--semantic-color-surface-default-translucent) ~"srgb r g b / 0.1)";
99
98
  @lime-card-selection-icon-color: transparent;
100
99
  @lime-card-selection-icon-selected-color: var(--semantic-color-on-surface-main-selected);
101
- @lime-card-selection-container-selected-color: var(--semantic-color-surface-accent);
100
+ @lime-card-selection-container-selected-color: var(--semantic-color-surface-highlight);
102
101
  @lime-card-border-selected-color: var(--semantic-color-stroke-main-selected);
103
102
  @lime-card-container-focused-color: var(--semantic-color-surface-default-focused);
104
103
  @lime-card-border-focused-color: var(--semantic-color-stroke-main-focused);
@@ -113,7 +112,7 @@
113
112
  // ---------------------------------------
114
113
  @lime-checkbox-container-color: transparent;
115
114
  @lime-checkbox-container-focused-color: @lime-checkbox-container-color;
116
- @lime-checkbox-container-selected-color: var(--semantic-color-surface-accent);
115
+ @lime-checkbox-container-selected-color: var(--semantic-color-surface-highlight);
117
116
  @lime-checkbox-container-selected-focused-color: @lime-checkbox-container-selected-color;
118
117
  @lime-checkbox-container-selected-disabled-color: @lime-checkbox-container-selected-color;
119
118
  @lime-checkbox-container-selected-disabled-focused-color: @lime-checkbox-container-selected-color;
@@ -215,7 +214,7 @@
215
214
  @lime-imageitem-selected-image-border-color: ~"color(from" var(--semantic-color-on-surface-main-selected) ~"srgb r g b / 0.7)";
216
215
  @lime-imageitem-selection-container-color: transparent;
217
216
  @lime-imageitem-selection-icon-color: transparent;
218
- @lime-imageitem-selection-container-selected-color: var(--semantic-color-surface-accent);
217
+ @lime-imageitem-selection-container-selected-color: var(--semantic-color-surface-highlight);
219
218
  @lime-imageitem-selection-icon-selected-color: var(--semantic-color-on-surface-white);
220
219
  @lime-imageitem-selection-container-focused-color: @lime-imageitem-selection-container-color;
221
220
  @lime-imageitem-selection-icon-focused-color: @lime-imageitem-selection-icon-color;
@@ -232,6 +231,7 @@
232
231
  @lime-input-fullscreen-dot-color: var(--semantic-color-on-surface-input-field);
233
232
  @lime-input-overlay-background-color: var(--semantic-color-background-popup-default);
234
233
  @lime-input-overlay-dot-color: var(--semantic-color-on-surface-popup-input-field);
234
+ @lime-input-overlay-button-bg-color: var(--semantic-color-surface-popup-default);
235
235
  @lime-input-dot-focused-color: var(--semantic-color-on-surface-main-focused);
236
236
  @lime-input-button-popup-transparent-icon-color: var(--semantic-color-on-background-popup-main);
237
237
  @lime-input-button-popup-transparent-label-color: var(--semantic-color-on-background-popup-main);
@@ -270,6 +270,7 @@
270
270
  // KeyGuide
271
271
  // ---------------------------------------
272
272
  @lime-keyguide-container-color: var(--semantic-color-surface-overlay-default);
273
+ @lime-keyguide-outline-color: transparent;
273
274
  @lime-keyguide-label-color: var(--semantic-color-on-surface-overlay-main);
274
275
  @lime-keyguide-icon-color: var(--semantic-color-on-surface-overlay-sub);
275
276
  @lime-keyguide-colordot-red-color: @lime-colorkey-icon-red;
@@ -345,7 +346,7 @@
345
346
  @lime-radioitem-item-container-selected-color: transparent;
346
347
  @lime-radioitem-container-color: transparent;
347
348
  @lime-radioitem-container-focused-color: transparent;
348
- @lime-radioitem-container-selected-color: var(--semantic-color-surface-accent);
349
+ @lime-radioitem-container-selected-color: var(--semantic-color-surface-highlight);
349
350
  @lime-radioitem-container-selected-focused-color: @lime-radioitem-container-selected-color;
350
351
  @lime-radioitem-border-color: var(--semantic-color-stroke-selection-inactive);
351
352
  @lime-radioitem-border-focused-color: var(--semantic-color-stroke-selection-inactive-focused);
@@ -367,6 +368,7 @@
367
368
 
368
369
  // Slider
369
370
  // ---------------------------------------
371
+ @lime-slider-min-max-color: var(--semantic-color-on-background-sub);
370
372
  @lime-slider-track-color: ~"color(from" var(--semantic-color-surface-default-track) ~"srgb r g b / 0.7)";
371
373
  @lime-slider-track-buffer-color: ~"color(from" var(--semantic-color-surface-white) ~"srgb r g b / 0.5)";
372
374
  @lime-slider-track-active-color: var(--semantic-color-surface-accent);
@@ -384,7 +386,7 @@
384
386
  @lime-spinner-color: var(--semantic-color-on-background-main);
385
387
  @lime-spinner-head-color: @lime-spinner-color;
386
388
  @lime-spinner-empty-color: ~"color(from" @lime-spinner-color ~"srgb r g b / 0.2)";
387
- @lime-spinner-bg-color: var(--semantic-color-surface-default);
389
+ @lime-spinner-bg-color: var(--semantic-color-surface-spinner);
388
390
  @lime-spinner-label-color: var(--semantic-color-on-background-sub);
389
391
 
390
392
  // Steps
@@ -429,6 +431,8 @@
429
431
  @lime-video-player-bottom-bg-color: transparent;
430
432
  @lime-video-player-label-color: var(--semantic-color-on-background-main);
431
433
  @lime-video-player-scrim-gradient-color: linear-gradient(180deg, transparent 0%, #000 100%);
434
+ @lime-video-tooltip-background-color: ~"color(from" var(--semantic-color-surface-overlay-default) ~"srgb r g b / 0.5)";
435
+ @lime-video-tooltip-gradient-color: linear-gradient(180deg, transparent 0%, ~"color(from" var(--semantic-color-on-surface-black) ~"srgb r g b / 0.7)" 100%);
432
436
 
433
437
  // VirtualList
434
438
  // ---------------------------------------
package/styles/motion-mixins.less ADDED
@@ -0,0 +1,66 @@
1
+ // Motion Variables
2
+ @import "./motions.less";
3
+ @import "./mixins.less";
4
+
5
+ /* ---------------------------------------
6
+ Motion Variables
7
+ ------------------------------------------ */
8
+ @lime-bounce-motion: var(--lime-bounce-motion);
9
+ @lime-check-motion: var(--lime-check-motion);
10
+
11
+ /* ---------------------------------------
12
+ Motion Mixins
13
+ ------------------------------------------ */
14
+ .lime-toggle-motion(@offset: var(--lime-bounce-motion-offset-default-value), @duration: var(--lime-bounce-motion-duration)) {
15
+ animation: var(--lime-bounce-animation-name) @duration var(--lime-bounce-motion-easing-function);
16
+ --lime-bounce-motion-offset-value: @offset;
17
+ }
18
+
19
+ .lime-check-motion() {
20
+ &::after {
21
+ content: '';
22
+ position: absolute;
23
+ .position(0);
24
+ background-color: inherit;
25
+ animation: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
26
+ }
27
+ }
28
+
29
+ .lime-focus-in-motion() {
30
+ transform: @lime-focusexpand-focus-transform;
31
+ transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
32
+ }
33
+
34
+ .lime-focus-out-motion() {
35
+ transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
36
+ }
37
+
38
+ .lime-press-motion() {
39
+ transform: @lime-focusexpand-pressed-transform;
40
+ transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
41
+ }
42
+
43
+ .lime-release-motion() {
44
+ transform: @lime-focusexpand-focus-transform;
45
+ transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
46
+ }
47
+
48
+ .lime-slider-focus-in-motion() {
49
+ transform: @lime-translate-center @lime-slider-focusin-transform;
50
+ transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
51
+ }
52
+
53
+ .lime-slider-focus-out-motion() {
54
+ transform: @lime-translate-center @lime-slider-focusout-transform;
55
+ transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
56
+ }
57
+
58
+ .lime-slider-press-motion() {
59
+ transform: @lime-translate-center @lime-slider-press-transform;
60
+ transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
61
+ }
62
+
63
+ .lime-slider-release-motion() {
64
+ transform: @lime-translate-center @lime-slider-release-transform;
65
+ transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
66
+ }
package/styles/motions.less ADDED
@@ -0,0 +1,78 @@
1
+ @import "../styles/variables.less";
2
+
3
+ // Motion Tokens
4
+
5
+ /* ---------------------------------------
6
+ Animations
7
+ ------------------------------------------ */
8
+ :root {
9
+ /* Bounce
10
+ ------------------------------------------ */
11
+ --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
12
+ --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
13
+ }
14
+
15
+ /* ---------------------------------------
16
+ Animations properties
17
+ ------------------------------------------ */
18
+ :root {
19
+ /* ---------------------------------------
20
+ Durations
21
+ ------------------------------------------ */
22
+ --lime-motion-default-duration: 200ms;
23
+ --lime-motion-medium1-duration: 250ms;
24
+ --lime-motion-medium2-duration: 300ms;
25
+ --lime-motion-medium4-duration: 400ms;
26
+ --lime-motion-long2-duration: 500ms;
27
+ --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
28
+ --lime-check-motion-duration: var(--lime-motion-medium4-duration);
29
+ --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
30
+ --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
31
+ --lime-press-motion-duration: var(--lime-motion-medium1-duration);
32
+ --lime-release-motion-duration: var(--lime-motion-medium2-duration);
33
+
34
+ /* ---------------------------------------
35
+ Easing functions
36
+ ------------------------------------------ */
37
+ --lime-default-motion-easing-function: ease-out;
38
+ --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0.0, 0.05, 1.0);
39
+ --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1.0);
40
+ --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
41
+ --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
42
+ --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
43
+ --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
44
+ --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
45
+
46
+ /* ---------------------------------------
47
+ Keyframes names
48
+ ------------------------------------------ */
49
+ --lime-bounce-animation-name: bounce-motion;
50
+ --lime-check-animation-name: check-motion;
51
+
52
+ /* ---------------------------------------
53
+ Keyframes values
54
+ ------------------------------------------ */
55
+ --lime-bounce-motion-offset-default-value: 6px;
56
+ }
57
+
58
+ /* ---------------------------------------
59
+ Keyframes
60
+ ------------------------------------------ */
61
+
62
+ /* Bounce
63
+ ------------------------------------------ */
64
+ @keyframes bounce-motion {
65
+ @offset-value: var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value);
66
+
67
+ 0% {transform: translateX(0)}
68
+ 50% {transform: translateX(@offset-value)}
69
+ 80% {transform: translateX(~"calc(@{offset-value} / -2)")}
70
+ 100% {transform: translateX(0)}
71
+ }
72
+
73
+ /* Check
74
+ ------------------------------------------ */
75
+ @keyframes check-motion {
76
+ 0% {transform: translateX(0)}
77
+ 100% {transform: translateX(100%)}
78
+ }