@faststore/ui 3.92.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.
- package/package.json +3 -3
- package/src/components/atoms/Skeleton/styles.scss +14 -4
- package/src/components/atoms/Slider/styles.scss +10 -2
- package/src/components/molecules/CartItem/styles.scss +10 -10
- package/src/components/molecules/Modal/styles.scss +3 -3
- package/src/components/molecules/Popover/styles.scss +14 -13
- package/src/components/molecules/QuantitySelector/styles.scss +3 -4
- package/src/components/molecules/RegionBar/styles.scss +6 -5
- package/src/components/molecules/SearchInputField/styles.scss +6 -5
- package/src/components/molecules/Table/styles.scss +4 -5
- package/src/components/molecules/Tag/styles.scss +12 -12
- package/src/components/molecules/Toast/styles.scss +6 -6
- package/src/components/molecules/Toggle/styles.scss +25 -13
- package/src/components/molecules/Tooltip/styles.scss +40 -18
- package/src/components/organisms/Footer/styles.scss +2 -2
- package/src/components/organisms/Incentives/styles.scss +5 -5
- package/src/components/organisms/Navbar/styles.scss +7 -8
- package/src/components/organisms/ProductGallery/styles.scss +1 -2
- package/src/components/organisms/SlideOver/styles.scss +15 -4
- package/src/styles/base/layout.scss +3 -4
- 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.
|
|
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.
|
|
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": "
|
|
73
|
+
"gitHead": "416e6884a8d702b8997222351908c5b58b5cee97"
|
|
74
74
|
}
|
|
@@ -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
|
-
|
|
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
|
+
}
|
|
@@ -119,13 +119,21 @@
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
[data-fs-slider-value-label="min"] {
|
|
122
|
-
text-align:
|
|
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:
|
|
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] {
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
|
|
51
51
|
position: fixed;
|
|
52
52
|
top: var(--fs-modal-position-top);
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
96
|
+
inset-inline-end: var(--fs-modal-header-close-button-position-right);
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
87
|
+
inset-inline-start: 0;
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
&[data-fs-popover-placement="top-start"] [data-fs-popover-indicator] {
|
|
90
|
-
|
|
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
|
-
|
|
96
|
+
inset-inline-end: 0;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
&[data-fs-popover-placement="top-end"] [data-fs-popover-indicator] {
|
|
99
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
129
|
+
inset-inline-start: 0;
|
|
129
130
|
}
|
|
130
131
|
|
|
131
132
|
&[data-fs-popover-placement="bottom-start"] [data-fs-popover-indicator] {
|
|
132
|
-
|
|
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
|
-
|
|
138
|
+
inset-inline-end: 0;
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
&[data-fs-popover-placement="bottom-end"] [data-fs-popover-indicator] {
|
|
141
|
-
|
|
142
|
+
inset-inline-end: var(--fs-spacing-3);
|
|
142
143
|
}
|
|
143
144
|
}
|
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
&:first-of-type {
|
|
70
|
-
&:last-of-type {
|
|
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
|
}
|
|
@@ -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-
|
|
66
|
+
margin-inline-end: var(--fs-region-bar-icon-margin-right);
|
|
66
67
|
|
|
67
68
|
&:last-child {
|
|
68
69
|
position: absolute;
|
|
69
|
-
|
|
70
|
+
inset-inline-end: 0;
|
|
70
71
|
}
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
// @deprecated
|
|
74
75
|
[data-fs-region-bar-cta] {
|
|
75
|
-
margin-
|
|
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-
|
|
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-
|
|
88
|
+
margin-inline-end: var(--fs-region-bar-message-margin-right);
|
|
88
89
|
font-weight: var(--fs-text-weight-regular);
|
|
89
90
|
}
|
|
90
91
|
|
|
@@ -33,22 +33,23 @@
|
|
|
33
33
|
|
|
34
34
|
[data-fs-icon-button][data-fs-button-variant] {
|
|
35
35
|
position: relative;
|
|
36
|
-
|
|
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
|
-
|
|
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-
|
|
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
|
}
|
|
@@ -37,13 +37,12 @@
|
|
|
37
37
|
|
|
38
38
|
[data-fs-table-cell="header"],
|
|
39
39
|
[data-fs-table-cell="data"] {
|
|
40
|
-
padding-
|
|
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:
|
|
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:
|
|
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-
|
|
93
|
+
margin-inline-end: var(--fs-spacing-2);
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
// --------------------------------------------------------
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
position: relative;
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
|
-
padding-
|
|
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
|
-
|
|
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.
|
|
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-
|
|
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
|
}
|
|
@@ -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
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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);
|
|
@@ -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
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
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] {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -85,44 +85,49 @@
|
|
|
85
85
|
|
|
86
86
|
/* TOP-CENTER */
|
|
87
87
|
[data-fs-tooltip-placement="top-center"] {
|
|
88
|
-
|
|
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
|
-
|
|
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
|
-
|
|
101
|
+
inset-inline-start: 0;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
[data-fs-tooltip-placement="top-start"] [data-fs-tooltip-indicator] {
|
|
105
|
-
|
|
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
|
-
|
|
110
|
+
inset-inline-end: 0;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
[data-fs-tooltip-placement="top-end"] [data-fs-tooltip-indicator] {
|
|
114
|
-
|
|
114
|
+
inset-inline-end: var(--fs-spacing-3);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
/* RIGHT */
|
|
118
118
|
[data-fs-tooltip-placement^="right"] {
|
|
119
|
-
|
|
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
|
-
|
|
125
|
-
border-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
196
|
+
inset-inline-start: 0;
|
|
186
197
|
}
|
|
187
198
|
|
|
188
199
|
[data-fs-tooltip-placement="bottom-start"] [data-fs-tooltip-indicator] {
|
|
189
|
-
|
|
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
|
-
|
|
205
|
+
inset-inline-end: 0;
|
|
195
206
|
}
|
|
196
207
|
|
|
197
208
|
[data-fs-tooltip-placement="bottom-end"] [data-fs-tooltip-indicator] {
|
|
198
|
-
|
|
209
|
+
inset-inline-end: var(--fs-spacing-3);
|
|
199
210
|
}
|
|
200
211
|
|
|
201
212
|
/* LEFT */
|
|
202
213
|
[data-fs-tooltip-placement^="left"] {
|
|
203
|
-
|
|
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
|
-
|
|
209
|
-
border-
|
|
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%);
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
[data-fs-payment-methods] {
|
|
113
113
|
@include media(">=notebook") {
|
|
114
114
|
grid-column: 11 / span 2;
|
|
115
|
-
margin-
|
|
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-
|
|
181
|
+
padding-inline-start: 0;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
@include media(">=notebook") {
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
flex-direction: row;
|
|
62
62
|
|
|
63
63
|
[data-fs-incentive-content] {
|
|
64
|
-
margin-
|
|
65
|
-
text-align:
|
|
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-
|
|
116
|
-
margin-
|
|
117
|
-
border-
|
|
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
|
}
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
|
|
108
108
|
[data-fs-button-signin-link] + [data-fs-cart-toggle] {
|
|
109
109
|
@include media(">=notebook") {
|
|
110
|
-
margin-
|
|
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-
|
|
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-
|
|
172
|
+
margin-inline-end: 0;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
[data-fs-icon-button="true"] {
|
|
177
|
-
|
|
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
|
-
|
|
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-
|
|
202
|
-
|
|
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] {
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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-
|
|
87
|
+
margin-inline-end: calc(-1 * var(--fs-spacing-1));
|
|
77
88
|
|
|
78
89
|
svg {
|
|
79
90
|
width: 32px;
|
|
@@ -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-
|
|
35
|
-
margin-left: auto;
|
|
34
|
+
margin-inline: auto;
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
[data-fs-content] { @include layout-content; }
|
|
@@ -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-
|
|
52
|
-
margin-left: auto;
|
|
52
|
+
margin-inline: auto;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
@mixin layout-content-full {
|