@faststore/ui 3.92.1-dev.0 → 3.93.0-dev.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 (21) hide show
  1. package/package.json +3 -3
  2. package/src/components/atoms/Skeleton/styles.scss +14 -4
  3. package/src/components/atoms/Slider/styles.scss +10 -2
  4. package/src/components/molecules/CartItem/styles.scss +10 -10
  5. package/src/components/molecules/Modal/styles.scss +3 -3
  6. package/src/components/molecules/Popover/styles.scss +14 -13
  7. package/src/components/molecules/QuantitySelector/styles.scss +3 -4
  8. package/src/components/molecules/RegionBar/styles.scss +6 -5
  9. package/src/components/molecules/SearchInputField/styles.scss +6 -5
  10. package/src/components/molecules/Table/styles.scss +4 -5
  11. package/src/components/molecules/Tag/styles.scss +12 -12
  12. package/src/components/molecules/Toast/styles.scss +6 -6
  13. package/src/components/molecules/Toggle/styles.scss +25 -13
  14. package/src/components/molecules/Tooltip/styles.scss +40 -18
  15. package/src/components/organisms/Footer/styles.scss +2 -2
  16. package/src/components/organisms/Incentives/styles.scss +5 -5
  17. package/src/components/organisms/Navbar/styles.scss +7 -8
  18. package/src/components/organisms/ProductGallery/styles.scss +1 -2
  19. package/src/components/organisms/SlideOver/styles.scss +15 -4
  20. package/src/styles/base/layout.scss +3 -4
  21. package/src/styles/base/utilities.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "3.92.1-dev.0",
3
+ "version": "3.93.0-dev.0",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -47,7 +47,7 @@
47
47
  }
48
48
  ],
49
49
  "dependencies": {
50
- "@faststore/components": "^3.92.1-dev.0",
50
+ "@faststore/components": "^3.93.0-dev.0",
51
51
  "include-media": "^1.4.10",
52
52
  "modern-normalize": "^1.1.0",
53
53
  "react-swipeable": "^7.0.0",
@@ -70,5 +70,5 @@
70
70
  "volta": {
71
71
  "extends": "../../package.json"
72
72
  },
73
- "gitHead": "9ee7e58b4eacbfc74c8b70b0351fef2c502e1e74"
73
+ "gitHead": "416e6884a8d702b8997222351908c5b58b5cee97"
74
74
  }
package/src/components/atoms/Skeleton/styles.scss CHANGED
@@ -17,33 +17,38 @@
17
17
  --fs-skeleton-shimmer-transition-function : linear;
18
18
  --fs-skeleton-shimmer-transition-iteration : infinite;
19
19
 
20
+ position: relative;
21
+
20
22
  // --------------------------------------------------------
21
23
  // Structural Styles
22
24
  // --------------------------------------------------------
23
25
 
24
26
  overflow: hidden;
25
- position: relative;
26
27
  background: var(--fs-skeleton-bkg-color);
27
28
  border-radius: var(--fs-skeleton-border-radius);
28
29
 
29
30
  [data-fs-skeleton-shimmer] {
30
31
  position: absolute;
31
32
  top: 0;
32
- left: 0;
33
+ inset-inline-start: 0;
33
34
  width: 100vw;
34
35
  height: 100%;
35
36
  animation: loading var(--fs-skeleton-shimmer-transition-timing) var(--fs-skeleton-shimmer-transition-iteration) var(--fs-skeleton-shimmer-transition-function);
37
+
38
+ html[dir="rtl"] & {
39
+ animation-name: loading-rtl;
40
+ }
41
+
36
42
  &::after {
37
43
  position: absolute;
38
- content: '';
39
44
  width: var(--fs-skeleton-shimmer-width);
40
45
  height: var(--fs-skeleton-shimmer-height);
46
+ content: "";
41
47
  background: var(--fs-skeleton-shimmer-bkg-color);
42
48
  box-shadow: var(--fs-skeleton-shimmer-box-shadow);
43
49
  }
44
50
  }
45
51
 
46
-
47
52
  // --------------------------------------------------------
48
53
  // Variants Styles
49
54
  // --------------------------------------------------------
@@ -65,3 +70,8 @@
65
70
  0% { transform: translate3d(-50vw, 0, 0); }
66
71
  100% { transform: translate3d(0, 0, 0); }
67
72
  }
73
+
74
+ @keyframes loading-rtl {
75
+ 0% { transform: translate3d(50vw, 0, 0); }
76
+ 100% { transform: translate3d(0, 0, 0); }
77
+ }
package/src/components/atoms/Slider/styles.scss CHANGED
@@ -119,13 +119,21 @@
119
119
  }
120
120
 
121
121
  [data-fs-slider-value-label="min"] {
122
- text-align: left;
122
+ text-align: start;
123
123
  transform: translateX(-1rem);
124
+
125
+ html[dir="rtl"] & {
126
+ transform: translateX(1rem);
127
+ }
124
128
  }
125
129
 
126
130
  [data-fs-slider-value-label="max"] {
127
- text-align: right;
131
+ text-align: end;
128
132
  transform: translateX(calc(-100% + 1.25rem));
133
+
134
+ html[dir="rtl"] & {
135
+ transform: translateX(calc(100% - 1.25rem));
136
+ }
129
137
  }
130
138
 
131
139
  [data-fs-slider-absolute-values] {
package/src/components/molecules/CartItem/styles.scss CHANGED
@@ -37,25 +37,25 @@
37
37
  display: flex;
38
38
  flex-wrap: wrap;
39
39
  justify-content: space-between;
40
+ width: 100%;
40
41
  background-color: var(--fs-cart-item-bkg-color);
41
42
  border: var(--fs-cart-item-border-width) solid var(--fs-cart-item-border-color);
42
43
  border-radius: var(--fs-cart-item-border-radius);
43
- width: 100%;
44
44
 
45
45
  [data-fs-cart-item-content] {
46
- padding: var(--fs-cart-item-padding) 0 var(--fs-cart-item-padding) var(--fs-cart-item-padding);
47
46
  display: flex;
48
47
  column-gap: var(--fs-cart-item-padding);
49
48
  align-items: flex-start;
50
49
  width: calc(100% - var(--fs-control-tap-size));
50
+ padding: var(--fs-cart-item-padding) 0 var(--fs-cart-item-padding) var(--fs-cart-item-padding);
51
51
  }
52
52
 
53
53
  [data-fs-cart-item-image] {
54
- border-radius: var(--fs-cart-item-image-border-radius);
55
- overflow: hidden;
54
+ flex-shrink: 0;
56
55
  width: var(--fs-cart-item-image-width);
57
56
  height: var(--fs-cart-item-image-height);
58
- flex-shrink: 0;
57
+ overflow: hidden;
58
+ border-radius: var(--fs-cart-item-image-border-radius);
59
59
  }
60
60
 
61
61
  [data-fs-cart-item-title] {
@@ -71,18 +71,18 @@
71
71
  [data-fs-cart-item-skus] {
72
72
  display: flex;
73
73
  flex-wrap: wrap;
74
- column-gap: var(--fs-cart-item-skus-column-gap);
75
74
  row-gap: var(--fs-cart-item-skus-row-gap);
75
+ column-gap: var(--fs-cart-item-skus-column-gap);
76
+ margin-top: var(--fs-cart-item-skus-margin-top);
76
77
  font-size: var(--fs-cart-item-skus-text-size);
77
78
  line-height: var(--fs-cart-item-skus-line-height);
78
79
  color: var(--fs-cart-item-skus-text-color);
79
- margin-top: var(--fs-cart-item-skus-margin-top);
80
80
  span { font-weight: var(--fs-cart-item-title-weight); }
81
81
  }
82
82
 
83
83
  [data-fs-cart-item-remove-button] {
84
84
  position: absolute;
85
- right: 0;
85
+ inset-inline-end: 0;
86
86
  }
87
87
 
88
88
  [data-fs-cart-item-prices] {
@@ -92,10 +92,11 @@
92
92
  [data-fs-cart-item-actions] {
93
93
  display: flex;
94
94
  align-items: center;
95
- width: 100%;
96
95
  justify-content: space-between;
96
+ width: 100%;
97
97
  padding-right: var(--fs-cart-item-padding);
98
98
  border-top: var(--fs-cart-item-border-width) solid var(--fs-cart-item-border-color);
99
+
99
100
  [data-quantity-selector-input] {
100
101
  border-color: transparent;
101
102
  border-top-left-radius: 0;
@@ -111,5 +112,4 @@
111
112
  background-color: var(--fs-color-neutral-bkg);
112
113
  [data-fs-cart-item-actions] { display: none; }
113
114
  }
114
-
115
115
  }
package/src/components/molecules/Modal/styles.scss CHANGED
@@ -50,8 +50,8 @@
50
50
 
51
51
  position: fixed;
52
52
  top: var(--fs-modal-position-top);
53
- right: var(--fs-modal-position-right);
54
- left: var(--fs-modal-position-left);
53
+ inset-inline-start: var(--fs-modal-position-left);
54
+ inset-inline-end: var(--fs-modal-position-right);
55
55
  max-width: var(--fs-modal-max-width);
56
56
  min-height: var(--fs-modal-min-height);
57
57
  margin: var(--fs-modal-margin);
@@ -93,7 +93,7 @@
93
93
  [data-fs-modal-header-close-button] {
94
94
  position: absolute;
95
95
  top: var(--fs-modal-header-close-button-position-top);
96
- right: var(--fs-modal-header-close-button-position-right);
96
+ inset-inline-end: var(--fs-modal-header-close-button-position-right);
97
97
  }
98
98
  }
99
99
 
package/src/components/molecules/Popover/styles.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  // Default properties
7
7
  --fs-popover-margin : 0 var(--fs-spacing-3);
8
8
  --fs-popover-padding : var(--fs-spacing-3) var(--fs-spacing-4) var(--fs-spacing-4);
9
+ --fs-popover-padding-inline : var(--fs-spacing-4);
9
10
  --fs-popover-border-radius : var(--fs-border-radius);
10
11
  --fs-popover-bkg-color : var(--fs-color-body-bkg);
11
12
  --fs-popover-box-shadow : var(--fs-shadow-darker);
@@ -42,8 +43,8 @@
42
43
  }
43
44
 
44
45
  [data-fs-popover-header-dismiss-button] {
46
+ margin-inline-end: calc(-1 * var(--fs-spacing-3));
45
47
  margin-top: calc(-1 * var(--fs-spacing-3));
46
- margin-right: calc(-1 * var(--fs-spacing-3));
47
48
  }
48
49
 
49
50
  [data-fs-popover-indicator] {
@@ -70,33 +71,33 @@
70
71
 
71
72
  /* TOP-CENTER */
72
73
  &[data-fs-popover-placement="top-center"] {
73
- left: 50%;
74
+ inset-inline-start: 50%;
74
75
  transform:
75
76
  translateX(-50%)
76
77
  translateY(calc(-1 * var(--fs-popover-indicator-translate)));
77
78
  }
78
79
 
79
80
  &[data-fs-popover-placement="top-center"] [data-fs-popover-indicator] {
80
- left: 50%;
81
+ inset-inline-start: 50%;
81
82
  transform: translateX(-50%);
82
83
  }
83
84
 
84
85
  /* TOP-START */
85
86
  &[data-fs-popover-placement="top-start"] {
86
- left: 0;
87
+ inset-inline-start: 0;
87
88
  }
88
89
 
89
90
  &[data-fs-popover-placement="top-start"] [data-fs-popover-indicator] {
90
- left: var(--fs-spacing-3);
91
+ inset-inline-start: var(--fs-spacing-3);
91
92
  }
92
93
 
93
94
  /* TOP-END */
94
95
  &[data-fs-popover-placement="top-end"] {
95
- right: 0;
96
+ inset-inline-end: 0;
96
97
  }
97
98
 
98
99
  &[data-fs-popover-placement="top-end"] [data-fs-popover-indicator] {
99
- right: var(--fs-spacing-3);
100
+ inset-inline-end: var(--fs-spacing-3);
100
101
  }
101
102
 
102
103
  /* BOTTOM */
@@ -112,32 +113,32 @@
112
113
 
113
114
  /* BOTTOM-CENTER */
114
115
  &[data-fs-popover-placement="bottom-center"] {
115
- left: 50%;
116
+ inset-inline-start: 50%;
116
117
  transform:
117
118
  translateX(-50%)
118
119
  translateY(var(--fs-popover-indicator-translate));
119
120
  }
120
121
 
121
122
  &[data-fs-popover-placement="bottom-center"] [data-fs-popover-indicator] {
122
- left: 50%;
123
+ inset-inline-start: 50%;
123
124
  transform: translateX(-50%);
124
125
  }
125
126
 
126
127
  /* BOTTOM-START */
127
128
  &[data-fs-popover-placement="bottom-start"] {
128
- left: 0;
129
+ inset-inline-start: 0;
129
130
  }
130
131
 
131
132
  &[data-fs-popover-placement="bottom-start"] [data-fs-popover-indicator] {
132
- left: var(--fs-spacing-3);
133
+ inset-inline-start: var(--fs-spacing-3);
133
134
  }
134
135
 
135
136
  /* BOTTOM-END */
136
137
  &[data-fs-popover-placement="bottom-end"] {
137
- right: 0;
138
+ inset-inline-end: 0;
138
139
  }
139
140
 
140
141
  &[data-fs-popover-placement="bottom-end"] [data-fs-popover-indicator] {
141
- right: var(--fs-spacing-3);
142
+ inset-inline-end: var(--fs-spacing-3);
142
143
  }
143
144
  }
package/src/components/molecules/QuantitySelector/styles.scss CHANGED
@@ -66,8 +66,8 @@
66
66
  }
67
67
  }
68
68
 
69
- &:first-of-type { left: 0; }
70
- &:last-of-type { right: 0; }
69
+ &:first-of-type { inset-inline-start: 0; }
70
+ &:last-of-type { inset-inline-end: 0; }
71
71
 
72
72
  &:disabled {
73
73
  [data-fs-button-wrapper],
@@ -86,7 +86,6 @@
86
86
  box-shadow: var(--fs-qty-selector-shadow-hover);
87
87
  }
88
88
  }
89
-
90
89
  }
91
90
 
92
91
  // --------------------------------------------------------
@@ -95,8 +94,8 @@
95
94
 
96
95
  [data-fs-quantity-selector="disabled"] {
97
96
  [data-quantity-selector-input] {
97
+ color: var(--fs-qty-selector-disabled-text-color);
98
98
  background-color: var(--fs-qty-selector-disabled-bkg-color);
99
99
  border-color: var(--fs-qty-selector-disabled-border-color);
100
- color: var(--fs-qty-selector-disabled-text-color);
101
100
  }
102
101
  }
package/src/components/molecules/RegionBar/styles.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  // Default properties
7
7
  --fs-region-bar-width : 100%;
8
8
  --fs-region-bar-padding : var(--fs-spacing-0) 0 var(--fs-spacing-0) var(--fs-spacing-2);
9
+ --fs-region-bar-padding-inline-start : var(--fs-spacing-2);
9
10
 
10
11
  --fs-region-bar-text-color : var(--fs-color-text-display);
11
12
 
@@ -62,29 +63,29 @@
62
63
 
63
64
  [data-fs-icon] {
64
65
  flex-shrink: 0;
65
- margin-right: var(--fs-region-bar-icon-margin-right);
66
+ margin-inline-end: var(--fs-region-bar-icon-margin-right);
66
67
 
67
68
  &:last-child {
68
69
  position: absolute;
69
- right: 0;
70
+ inset-inline-end: 0;
70
71
  }
71
72
  }
72
73
 
73
74
  // @deprecated
74
75
  [data-fs-region-bar-cta] {
75
- margin-left: var(--fs-region-bar-cta-margin-left);
76
+ margin-inline-start: var(--fs-region-bar-cta-margin-left);
76
77
  text-decoration: var(--fs-region-bar-cta-text-decoration);
77
78
  }
78
79
 
79
80
  // @deprecated
80
81
  [data-fs-region-bar-postal-code] {
81
- margin-right: var(--fs-region-bar-postal-code-margin-right);
82
+ margin-inline-end: var(--fs-region-bar-postal-code-margin-right);
82
83
  font-weight: var(--fs-text-weight-regular);
83
84
  }
84
85
 
85
86
  // @deprecated
86
87
  [data-fs-region-bar-message] {
87
- margin-right: var(--fs-region-bar-message-margin-right);
88
+ margin-inline-end: var(--fs-region-bar-message-margin-right);
88
89
  font-weight: var(--fs-text-weight-regular);
89
90
  }
90
91
 
package/src/components/molecules/SearchInputField/styles.scss CHANGED
@@ -33,22 +33,23 @@
33
33
 
34
34
  [data-fs-icon-button][data-fs-button-variant] {
35
35
  position: relative;
36
- right: .125rem;
36
+ inset-inline-end: .125rem;
37
+
37
38
  @include media(">=notebook") {
38
39
  position: absolute;
40
+ min-height: var(--fs-search-input-field-button-min-height);
39
41
  padding-top: var(--fs-search-input-field-button-padding-top-desktop);
40
42
  padding-bottom: var(--fs-search-input-field-button-padding-bottom-desktop);
41
- min-height: var(--fs-search-input-field-button-min-height);
42
- right: 0;
43
+ inset-inline-end: 0;
43
44
  }
44
45
  }
45
46
 
46
47
  [data-fs-search-input-field-input] {
47
48
  height: auto;
48
- padding-right: var(--fs-search-input-field-input-padding-right);
49
+ padding-inline-end: var(--fs-search-input-field-input-padding-right);
49
50
  background-color: var(--fs-search-input-field-input-bkg-color);
50
51
  transition: box-shadow var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-timing), border var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-function);
52
+
51
53
  @include media("<notebook") { border: 0; }
52
54
  }
53
-
54
55
  }
package/src/components/molecules/Table/styles.scss CHANGED
@@ -37,13 +37,12 @@
37
37
 
38
38
  [data-fs-table-cell="header"],
39
39
  [data-fs-table-cell="data"] {
40
- padding-right: var(--fs-table-cell-padding-x);
41
- padding-left: var(--fs-table-cell-padding-x);
40
+ padding-inline: var(--fs-table-cell-padding-x);
42
41
  overflow-x: auto;
43
42
  text-align: center;
44
- &[data-fs-table-cell-align="left"] { text-align: left; }
43
+ &[data-fs-table-cell-align="left"] { text-align: start; }
45
44
  &[data-fs-table-cell-align="center"] { text-align: center; }
46
- &[data-fs-table-cell-align="right"] { text-align: right; }
45
+ &[data-fs-table-cell-align="right"] { text-align: end; }
47
46
  }
48
47
 
49
48
  thead [data-fs-table-cell="header"] {
@@ -91,7 +90,7 @@
91
90
  [data-fs-icon] {
92
91
  width: var(--fs-spacing-3);
93
92
  height: var(--fs-spacing-3);
94
- margin-right: var(--fs-spacing-2);
93
+ margin-inline-end: var(--fs-spacing-2);
95
94
  }
96
95
 
97
96
  // --------------------------------------------------------
package/src/components/molecules/Tag/styles.scss CHANGED
@@ -18,13 +18,13 @@
18
18
  position: relative;
19
19
  display: flex;
20
20
  align-items: center;
21
- padding-right: var(--fs-spacing-6);
21
+ padding-inline-end: var(--fs-spacing-6);
22
22
  line-height: initial;
23
23
  }
24
24
 
25
25
  [data-fs-tag-icon-button] {
26
26
  position: absolute;
27
- right: calc(-1 * var(--fs-spacing-1));
27
+ inset-inline-end: calc(-1 * var(--fs-spacing-1));
28
28
  display: flex;
29
29
  align-items: center;
30
30
  justify-content: center;
@@ -33,14 +33,14 @@
33
33
  color: var(--fs-tag-text-color);
34
34
 
35
35
  > [data-fs-icon] {
36
+ padding: 3px;
36
37
  border: var(--fs-border-width) solid transparent;
37
38
  border-radius: var(--fs-border-radius-circle);
38
- padding: 3px;
39
39
  transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
40
40
  }
41
41
 
42
42
  &:hover > [data-fs-icon], &:focus > [data-fs-icon] {
43
- filter: brightness(0.90);
43
+ filter: brightness(0.9);
44
44
  }
45
45
 
46
46
  &:focus > [data-fs-icon] {
@@ -50,49 +50,49 @@
50
50
  svg {
51
51
  width: var(--fs-tag-icon-size);
52
52
  height: var(--fs-tag-icon-size);
53
- stroke-width: var(--fs-tag-icon-stroke-width);
54
53
  color: var(--fs-tag-text-color);
55
54
  vertical-align: middle;
55
+ stroke-width: var(--fs-tag-icon-stroke-width);
56
56
  }
57
57
  }
58
58
 
59
59
  &[data-fs-badge-size="big"] [data-fs-tag-label] {
60
60
  padding-top: 1px;
61
- margin-right: var(--fs-spacing-4);
61
+ margin-inline-end: var(--fs-spacing-4);
62
62
  }
63
63
 
64
64
  &[data-fs-badge-variant="warning"] {
65
- [data-fs-tag-icon-button] > [data-fs-icon] {
65
+ [data-fs-tag-icon-button] > [data-fs-icon] {
66
66
  background-color: var(--fs-badge-warning-bkg-color);
67
67
  }
68
68
  }
69
69
 
70
70
  &[data-fs-badge-variant="highlighted"] {
71
- [data-fs-tag-icon-button] > [data-fs-icon] {
71
+ [data-fs-tag-icon-button] > [data-fs-icon] {
72
72
  background-color: var(--fs-badge-highlighted-bkg-color);
73
73
  }
74
74
  }
75
75
 
76
76
  &[data-fs-badge-variant="neutral"] {
77
- [data-fs-tag-icon-button] > [data-fs-icon] {
77
+ [data-fs-tag-icon-button] > [data-fs-icon] {
78
78
  background-color: var(--fs-badge-neutral-bkg-color);
79
79
  }
80
80
  }
81
81
 
82
82
  &[data-fs-badge-variant="info"] {
83
- [data-fs-tag-icon-button] > [data-fs-icon] {
83
+ [data-fs-tag-icon-button] > [data-fs-icon] {
84
84
  background-color: var(--fs-badge-info-bkg-color);
85
85
  }
86
86
  }
87
87
 
88
88
  &[data-fs-badge-variant="danger"] {
89
- [data-fs-tag-icon-button] > [data-fs-icon] {
89
+ [data-fs-tag-icon-button] > [data-fs-icon] {
90
90
  background-color: var(--fs-badge-danger-bkg-color);
91
91
  }
92
92
  }
93
93
 
94
94
  &[data-fs-badge-variant="success"] {
95
- [data-fs-tag-icon-button] > [data-fs-icon] {
95
+ [data-fs-tag-icon-button] > [data-fs-icon] {
96
96
  background-color: var(--fs-badge-success-bkg-color);
97
97
  }
98
98
  }
package/src/components/molecules/Toast/styles.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  --fs-toast-border-width : var(--fs-border-width);
17
17
  --fs-toast-border-color : transparent;
18
18
 
19
- --fs-toast-shadow : 0 1px 3px rgba(0,0,0,.1);
19
+ --fs-toast-shadow : 0 1px 3px rgb(0 0 0 / 10%);
20
20
  --fs-toast-bkg-color : var(--fs-color-neutral-0);
21
21
 
22
22
  --fs-toast-transition-property : var(--fs-transition-property);
@@ -46,12 +46,12 @@
46
46
 
47
47
  position: fixed;
48
48
  top: var(--fs-toast-top-mobile);
49
- right: 0;
49
+ inset-inline-end: 0;
50
50
  z-index: 10;
51
51
  display: flex;
52
52
  flex-direction: row;
53
53
  align-items: center;
54
- justify-content: left;
54
+ justify-content: start;
55
55
  width: var(--fs-toast-width);
56
56
  min-height: var(--fs-toast-min-height);
57
57
  padding: var(--fs-toast-padding);
@@ -65,7 +65,7 @@
65
65
 
66
66
  @include media(">=tablet") {
67
67
  top: var(--fs-toast-top-tablet);
68
- right: var(--fs-spacing-4);
68
+ inset-inline-end: var(--fs-spacing-4);
69
69
  max-width: rem(398px);
70
70
  }
71
71
 
@@ -95,7 +95,7 @@
95
95
  }
96
96
 
97
97
  [data-fs-toast-title] {
98
- margin-left: var(--fs-toast-title-margin-left);
98
+ margin-inline-start: var(--fs-toast-title-margin-left);
99
99
  overflow: hidden;
100
100
  font-size: var(--fs-toast-title-size);
101
101
  font-weight: var(--fs-toast-title-weight);
@@ -103,7 +103,7 @@
103
103
  }
104
104
 
105
105
  [data-fs-toast-message] {
106
- margin-left: var(--fs-toast-message-margin-left);
106
+ margin-inline-start: var(--fs-toast-message-margin-left);
107
107
  overflow: hidden;
108
108
  font-size: var(--fs-toast-message-size);
109
109
  line-height: var(--fs-toast-message-line-height);
package/src/components/molecules/Toggle/styles.scss CHANGED
@@ -59,11 +59,12 @@
59
59
  // --------------------------------------------------------
60
60
 
61
61
  position: relative;
62
- overflow: visible;
63
62
  width: fit-content;
63
+ overflow: visible;
64
64
 
65
65
  input {
66
66
  @include focus-ring-visible;
67
+
67
68
  position: absolute;
68
69
  z-index: 1;
69
70
  display: block;
@@ -76,37 +77,45 @@
76
77
  box-shadow: var(--fs-toggle-shadow);
77
78
  transition: var(--fs-toggle-transition-property) var(--fs-toggle-transition-timing) var(--fs-toggle-transition-function);
78
79
  appearance: none;
80
+
79
81
  &:checked {
80
82
  background-color: var(--fs-toggle-checked-bkg-color);
81
83
  border: var(--fs-toggle-border-width) solid var(--fs-toggle-checked-border-color);
84
+
82
85
  + [data-fs-toggle-knob] {
83
86
  color: var(--fs-toggle-knob-icon-checked-color);
84
87
  background-color: var(--fs-toggle-knob-checked-bkg-color);
85
88
  border-color: var(--fs-toggle-knob-checked-border-color);
86
89
  }
90
+
87
91
  @media (hover: hover) {
88
92
  &:hover:not(:disabled) {
89
93
  background-color: var(--fs-toggle-checked-bkg-color-hover);
90
94
  border: var(--fs-toggle-border-width) solid var(--fs-toggle-checked-border-color-hover);
95
+
91
96
  + [data-fs-toggle-knob] {
92
97
  color: var(--fs-toggle-knob-icon-checked-color-hover);
93
98
  }
94
99
  }
95
100
  }
96
101
  }
102
+
97
103
  &:not(:checked) {
98
104
  background-color: var(--fs-toggle-bkg-color);
99
105
  border: var(--fs-toggle-border-width) solid var(--fs-toggle-border-color);
106
+
100
107
  + [data-fs-toggle-knob] {
101
108
  color: var(--fs-toggle-knob-icon-color);
102
109
  background-color: var(--fs-toggle-knob-bkg-color);
103
110
  border: var(--fs-toggle-border-width) solid var(--fs-toggle-knob-border-color);
104
111
  }
112
+
105
113
  @media (hover: hover) {
106
114
  &:hover:not(:disabled) {
107
115
  background-color: var(--fs-toggle-bkg-color-hover);
108
116
  border-color: var(--fs-toggle-border-color-hover);
109
117
  box-shadow: var(--fs-toggle-shadow-hover);
118
+
110
119
  + [data-fs-toggle-knob] {
111
120
  background-color: var(--fs-toggle-knob-bkg-color-hover);
112
121
  border-color: var(--fs-toggle-knob-border-color-hover);
@@ -114,14 +123,17 @@
114
123
  }
115
124
  }
116
125
  }
126
+
117
127
  &:disabled {
118
128
  pointer-events: none;
119
129
  background-color: var(--fs-toggle-disabled-bkg-color);
120
130
  border-color: var(--fs-toggle-disabled-border-color);
131
+
121
132
  + [data-fs-toggle-knob] {
122
133
  background-color: var(--fs-toggle-knob-disabled-bkg-color);
123
134
  border-color: var(--fs-toggle-knob-disabled-border-color);
124
135
  }
136
+
125
137
  &:checked + [data-fs-toggle-knob] {
126
138
  color: var(--fs-toggle-knob-icon-disabled-color);
127
139
  }
@@ -129,15 +141,15 @@
129
141
  }
130
142
 
131
143
  [data-fs-toggle-knob] {
132
- position: absolute;
133
- z-index: 2;
134
- display: flex;
135
- align-items: center;
136
- justify-content: center;
137
- pointer-events: none;
138
- border-radius: var(--fs-toggle-knob-border-radius);
139
- box-shadow: var(--fs-toggle-knob-shadow);
140
- transition: var(--fs-toggle-transition-property) var(--fs-toggle-transition-timing) var(--fs-toggle-transition-function);
144
+ position: absolute;
145
+ z-index: 2;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ pointer-events: none;
150
+ border-radius: var(--fs-toggle-knob-border-radius);
151
+ box-shadow: var(--fs-toggle-knob-shadow);
152
+ transition: var(--fs-toggle-transition-property) var(--fs-toggle-transition-timing) var(--fs-toggle-transition-function);
141
153
  }
142
154
 
143
155
  // --------------------------------------------------------
@@ -148,11 +160,11 @@
148
160
  min-width: calc(var(--fs-toggle-height) * 1.75);
149
161
  height: var(--fs-toggle-height);
150
162
 
151
- input:checked + [data-fs-toggle-knob] { left: calc(50% + var(--fs-toggle-border-width)); }
163
+ input:checked + [data-fs-toggle-knob] { inset-inline-start: calc(50% + var(--fs-toggle-border-width)); }
152
164
 
153
165
  [data-fs-toggle-knob] {
154
166
  top: calc(var(--fs-toggle-border-width) * 4);
155
- left: calc(var(--fs-toggle-border-width) * 4);
167
+ inset-inline-start: calc(var(--fs-toggle-border-width) * 4);
156
168
  width: calc(50% - (var(--fs-toggle-border-width) * 5));
157
169
  height: calc(100% - (var(--fs-toggle-border-width) * 8));
158
170
  }
@@ -166,7 +178,7 @@
166
178
 
167
179
  [data-fs-toggle-knob] {
168
180
  bottom: calc(var(--fs-toggle-border-width) * 4);
169
- left: calc(var(--fs-toggle-border-width) * 4);
181
+ inset-inline-start: calc(var(--fs-toggle-border-width) * 4);
170
182
  width: calc(100% - (var(--fs-toggle-border-width) * 8));
171
183
  height: calc(50% - (var(--fs-toggle-border-width) * 5));
172
184
  }
package/src/components/molecules/Tooltip/styles.scss CHANGED
@@ -85,44 +85,49 @@
85
85
 
86
86
  /* TOP-CENTER */
87
87
  [data-fs-tooltip-placement="top-center"] {
88
- left: 50%;
88
+ inset-inline-start: 50%;
89
89
  transform:
90
90
  translateX(-50%)
91
91
  translateY(calc(-1 * var(--fs-tooltip-indicator-translate)));
92
92
  }
93
93
 
94
94
  [data-fs-tooltip-placement="top-center"] [data-fs-tooltip-indicator] {
95
- left: 50%;
95
+ inset-inline-start: 50%;
96
96
  transform: translateX(-50%);
97
97
  }
98
98
 
99
99
  /* TOP-START */
100
100
  [data-fs-tooltip-placement="top-start"] {
101
- left: 0;
101
+ inset-inline-start: 0;
102
102
  }
103
103
 
104
104
  [data-fs-tooltip-placement="top-start"] [data-fs-tooltip-indicator] {
105
- left: var(--fs-spacing-3);
105
+ inset-inline-start: var(--fs-spacing-3);
106
106
  }
107
107
 
108
108
  /* TOP-END */
109
109
  [data-fs-tooltip-placement="top-end"] {
110
- right: 0;
110
+ inset-inline-end: 0;
111
111
  }
112
112
 
113
113
  [data-fs-tooltip-placement="top-end"] [data-fs-tooltip-indicator] {
114
- right: var(--fs-spacing-3);
114
+ inset-inline-end: var(--fs-spacing-3);
115
115
  }
116
116
 
117
117
  /* RIGHT */
118
118
  [data-fs-tooltip-placement^="right"] {
119
- left: 100%;
119
+ inset-inline-start: 100%;
120
120
  transform: translateX(var(--fs-tooltip-indicator-translate));
121
121
  }
122
122
 
123
+ html[dir="rtl"] [data-fs-tooltip-placement^="right"] {
124
+ inset-inline-end: 100%;
125
+ transform: translateX(calc(-1 * var(--fs-tooltip-indicator-translate)));
126
+ }
127
+
123
128
  [data-fs-tooltip-placement^="right"] [data-fs-tooltip-indicator] {
124
- right: 100%;
125
- border-right-color: var(--fs-tooltip-background);
129
+ inset-inline-end: 100%;
130
+ border-inline-end-color: var(--fs-tooltip-background);
126
131
  }
127
132
 
128
133
  /* RIGHT-CENTER */
@@ -133,6 +138,12 @@
133
138
  translateX(var(--fs-tooltip-indicator-translate));
134
139
  }
135
140
 
141
+ html[dir="rtl"] [data-fs-tooltip-placement="right-center"] {
142
+ transform:
143
+ translateY(-50%)
144
+ translateX(calc(-1 * var(--fs-tooltip-indicator-translate)));
145
+ }
146
+
136
147
  [data-fs-tooltip-placement="right-center"] [data-fs-tooltip-indicator] {
137
148
  top: 50%;
138
149
  transform: translateY(-50%);
@@ -169,44 +180,49 @@
169
180
 
170
181
  /* BOTTOM-CENTER */
171
182
  [data-fs-tooltip-placement="bottom-center"] {
172
- left: 50%;
183
+ inset-inline-start: 50%;
173
184
  transform:
174
185
  translateX(-50%)
175
186
  translateY(var(--fs-tooltip-indicator-translate));
176
187
  }
177
188
 
178
189
  [data-fs-tooltip-placement="bottom-center"] [data-fs-tooltip-indicator] {
179
- left: 50%;
190
+ inset-inline-start: 50%;
180
191
  transform: translateX(-50%);
181
192
  }
182
193
 
183
194
  /* BOTTOM-START */
184
195
  [data-fs-tooltip-placement="bottom-start"] {
185
- left: 0;
196
+ inset-inline-start: 0;
186
197
  }
187
198
 
188
199
  [data-fs-tooltip-placement="bottom-start"] [data-fs-tooltip-indicator] {
189
- left: var(--fs-spacing-3);
200
+ inset-inline-start: var(--fs-spacing-3);
190
201
  }
191
202
 
192
203
  /* BOTTOM-END */
193
204
  [data-fs-tooltip-placement="bottom-end"] {
194
- right: 0;
205
+ inset-inline-end: 0;
195
206
  }
196
207
 
197
208
  [data-fs-tooltip-placement="bottom-end"] [data-fs-tooltip-indicator] {
198
- right: var(--fs-spacing-3);
209
+ inset-inline-end: var(--fs-spacing-3);
199
210
  }
200
211
 
201
212
  /* LEFT */
202
213
  [data-fs-tooltip-placement^="left"] {
203
- right: 100%;
214
+ inset-inline-end: 100%;
204
215
  transform: translateX(calc(-1 * var(--fs-tooltip-indicator-translate)));
205
216
  }
206
217
 
218
+ html[dir="rtl"] [data-fs-tooltip-placement^="left"] {
219
+ inset-inline-start: 100%;
220
+ transform: translateX(var(--fs-tooltip-indicator-translate));
221
+ }
222
+
207
223
  [data-fs-tooltip-placement^="left"] [data-fs-tooltip-indicator] {
208
- left: 100%;
209
- border-left-color: var(--fs-tooltip-background);
224
+ inset-inline-start: 100%;
225
+ border-inline-start-color: var(--fs-tooltip-background);
210
226
  }
211
227
 
212
228
  /* LEFT-CENTER */
@@ -217,6 +233,12 @@
217
233
  translateX(calc(-1 * var(--fs-tooltip-indicator-translate)));
218
234
  }
219
235
 
236
+ html[dir="rtl"] [data-fs-tooltip-placement="left-center"] {
237
+ transform:
238
+ translateY(-50%)
239
+ translateX(var(--fs-tooltip-indicator-translate));
240
+ }
241
+
220
242
  [data-fs-tooltip-placement="left-center"] [data-fs-tooltip-indicator] {
221
243
  top: 50%;
222
244
  transform: translateY(-50%);
package/src/components/organisms/Footer/styles.scss CHANGED
@@ -112,7 +112,7 @@
112
112
  [data-fs-payment-methods] {
113
113
  @include media(">=notebook") {
114
114
  grid-column: 11 / span 2;
115
- margin-left: calc(-1 * var(--fs-spacing-3));
115
+ margin-inline-start: calc(-1 * var(--fs-spacing-3));
116
116
  }
117
117
  }
118
118
 
@@ -178,7 +178,7 @@
178
178
  &[data-fs-footer-links] {
179
179
  [data-fs-link] {
180
180
  display: inline-block;
181
- padding-left: 0;
181
+ padding-inline-start: 0;
182
182
  }
183
183
 
184
184
  @include media(">=notebook") {
package/src/components/organisms/Incentives/styles.scss CHANGED
@@ -61,8 +61,8 @@
61
61
  flex-direction: row;
62
62
 
63
63
  [data-fs-incentive-content] {
64
- margin-left: var(--fs-spacing-2);
65
- text-align: left;
64
+ margin-inline-start: var(--fs-spacing-2);
65
+ text-align: start;
66
66
  }
67
67
  }
68
68
  }
@@ -112,9 +112,9 @@
112
112
 
113
113
  &[data-fs-incentives-variant="horizontal"] {
114
114
  li:not(:last-child) {
115
- padding-right: var(--fs-incentives-gap);
116
- margin-right: var(--fs-incentives-gap);
117
- border-right: var(--fs-incentives-border-width) solid var(--fs-incentives-border-color);
115
+ padding-inline-end: var(--fs-incentives-gap);
116
+ margin-inline-end: var(--fs-incentives-gap);
117
+ border-inline-end: var(--fs-incentives-border-width) solid var(--fs-incentives-border-color);
118
118
  }
119
119
  }
120
120
  }
package/src/components/organisms/Navbar/styles.scss CHANGED
@@ -107,7 +107,7 @@
107
107
 
108
108
  [data-fs-button-signin-link] + [data-fs-cart-toggle] {
109
109
  @include media(">=notebook") {
110
- margin-left: var(--fs-spacing-3);
110
+ margin-inline-start: var(--fs-spacing-3);
111
111
  }
112
112
  }
113
113
 
@@ -146,7 +146,7 @@
146
146
  }
147
147
 
148
148
  [data-fs-icon] {
149
- margin-right: 0;
149
+ margin-inline-end: 0;
150
150
  line-height: 0;
151
151
 
152
152
  svg {
@@ -169,17 +169,17 @@
169
169
  }
170
170
 
171
171
  [data-fs-icon] {
172
- margin-right: 0;
172
+ margin-inline-end: 0;
173
173
  }
174
174
  }
175
175
 
176
176
  [data-fs-icon-button="true"] {
177
- right: 0;
177
+ inset-inline-end: 0;
178
178
  transition: margin var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
179
179
  }
180
180
 
181
181
  [data-fs-cart-toggle] {
182
- right: 0;
182
+ inset-inline-end: 0;
183
183
  display: none;
184
184
  }
185
185
  }
@@ -198,9 +198,8 @@
198
198
 
199
199
  @include media("<notebook") {
200
200
  padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
201
- margin-right: auto;
202
- margin-left: var(--fs-spacing-0);
203
- border-left: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
201
+ margin-inline: auto 0;
202
+ border-inline-start: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
204
203
  }
205
204
 
206
205
  [data-fs-logo] {
package/src/components/organisms/ProductGallery/styles.scss CHANGED
@@ -31,8 +31,7 @@
31
31
  height: 100%;
32
32
 
33
33
  @include media("<notebook") {
34
- padding-right: 0;
35
- padding-left: 0;
34
+ padding-inline: 0;
36
35
  }
37
36
 
38
37
  @include media(">=notebook") {
package/src/components/organisms/SlideOver/styles.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  [data-fs-slide-over] {
2
-
3
2
  // --------------------------------------------------------
4
3
  // Design Tokens for Slide Over
5
4
  // --------------------------------------------------------
@@ -50,19 +49,31 @@
50
49
  }
51
50
 
52
51
  &[data-fs-slide-over-direction="leftSide"] {
53
- left: 0;
52
+ inset-inline-start: 0;
54
53
 
55
54
  &[data-fs-slide-over-state="out"] {
56
55
  transform: translateX(-100%);
57
56
  }
57
+
58
+ @media (prefers-reduced-motion: no-preference) {
59
+ html[dir="rtl"] &[data-fs-slide-over-state="out"] {
60
+ transform: translateX(100%);
61
+ }
62
+ }
58
63
  }
59
64
 
60
65
  &[data-fs-slide-over-direction="rightSide"] {
61
- right: 0;
66
+ inset-inline-end: 0;
62
67
 
63
68
  &[data-fs-slide-over-state="out"] {
64
69
  transform: translateX(100%);
65
70
  }
71
+
72
+ @media (prefers-reduced-motion: no-preference) {
73
+ html[dir="rtl"] &[data-fs-slide-over-state="out"] {
74
+ transform: translateX(-100%);
75
+ }
76
+ }
66
77
  }
67
78
 
68
79
  [data-fs-slide-over-header] {
@@ -73,7 +84,7 @@
73
84
  background-color: var(--fs-slide-over-header-bkg-color);
74
85
 
75
86
  [data-fs-slide-over-header-icon] {
76
- margin-right: calc(-1 * var(--fs-spacing-1));
87
+ margin-inline-end: calc(-1 * var(--fs-spacing-1));
77
88
 
78
89
  svg {
79
90
  width: 32px;
package/src/styles/base/layout.scss CHANGED
@@ -17,12 +17,12 @@
17
17
  }
18
18
 
19
19
  .layout__section {
20
- margin-bottom: var(--fs-spacing-4);
21
20
  margin-top: var(--fs-spacing-4);
21
+ margin-bottom: var(--fs-spacing-4);
22
22
 
23
23
  @include media(">=notebook") {
24
- margin-bottom: var(--fs-grid-padding);
25
24
  margin-top: var(--fs-grid-padding);
25
+ margin-bottom: var(--fs-grid-padding);
26
26
  }
27
27
  }
28
28
 
@@ -31,8 +31,7 @@
31
31
  width: 100%;
32
32
  width: calc(100% - var(--fs-grid-padding) - var(--fs-grid-padding));
33
33
  max-width: var(--fs-grid-max-width);
34
- margin-right: auto;
35
- margin-left: auto;
34
+ margin-inline: auto;
36
35
  }
37
36
 
38
37
  [data-fs-content] { @include layout-content; }
package/src/styles/base/utilities.scss CHANGED
@@ -5,6 +5,7 @@
5
5
 
6
6
  /* SQ-DISABLE */
7
7
  @use "sass:math";
8
+
8
9
  /* SQ-ENABLE */
9
10
 
10
11
  // Include Media Overwrites //////////////////////////
@@ -48,8 +49,7 @@ $base: 16px !default;
48
49
  box-sizing: border-box;
49
50
  width: calc(100% - var(--fs-grid-padding) - var(--fs-grid-padding));
50
51
  max-width: var(--fs-grid-max-width);
51
- margin-right: auto;
52
- margin-left: auto;
52
+ margin-inline: auto;
53
53
  }
54
54
 
55
55
  @mixin layout-content-full {