@faststore/ui 2.0.142-alpha.0 → 2.0.152-alpha.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 +2 -2
- package/src/components/atoms/Input/styles.scss +2 -0
- package/src/components/molecules/Carousel/styles.scss +5 -10
- package/src/components/molecules/InputField/styles.scss +1 -0
- package/src/components/organisms/BannerNewsletter/styles.scss +2 -1
- package/src/components/organisms/ImageGallery/styles.scss +2 -1
- package/src/components/organisms/ProductDetails/styles.scss +8 -11
- package/src/styles/base/layout.scss +8 -5
- package/src/styles/base/tokens.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.152-alpha.0",
|
|
4
4
|
"description": "A lightweight, framework agnostic component library for React",
|
|
5
5
|
"author": "emersonlaurentino",
|
|
6
6
|
"license": "MIT",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"node": "16.18.0",
|
|
59
59
|
"yarn": "1.19.1"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "29b026410bf27e71d70f9ced483e494c273d07ad"
|
|
62
62
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
--fs-input-padding : var(--fs-spacing-1) var(--fs-spacing-2);
|
|
8
8
|
--fs-input-height : var(--fs-control-tap-size);
|
|
9
9
|
|
|
10
|
+
--fs-input-bkg-color : var(--fs-color-body-bkg);
|
|
10
11
|
--fs-input-box-shadow : none;
|
|
11
12
|
--fs-input-box-shadow-hover : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
|
|
12
13
|
|
|
@@ -40,6 +41,7 @@
|
|
|
40
41
|
font-size: var(--fs-input-text-size);
|
|
41
42
|
line-height: var(--fs-input-line-height);
|
|
42
43
|
color: var(--fs-input-text-color);
|
|
44
|
+
background-color: var(--fs-input-bkg-color);
|
|
43
45
|
border: var(--fs-input-border-width) solid var(--fs-input-border-color);
|
|
44
46
|
border-radius: var(--fs-input-border-radius);
|
|
45
47
|
box-shadow: var(--fs-input-box-shadow);
|
|
@@ -57,17 +57,13 @@
|
|
|
57
57
|
|
|
58
58
|
[data-fs-carousel-control] {
|
|
59
59
|
bottom: calc(var(--fs-carousel-controls-height) + var(--fs-control-tap-size));
|
|
60
|
-
display: flex;
|
|
61
|
-
align-items: center;
|
|
62
|
-
justify-content: center;
|
|
63
|
-
width: var(--fs-carousel-controls-width);
|
|
64
|
-
height: var(--fs-carousel-controls-height);
|
|
65
60
|
cursor: pointer;
|
|
66
|
-
background-color: var(--fs-carousel-controls-bkg-color);
|
|
67
|
-
border-color: transparent;
|
|
68
|
-
border-radius: var(--fs-carousel-controls-border-radius);
|
|
69
|
-
box-shadow: var(--fs-carousel-controls-box-shadow);
|
|
70
61
|
transform: translateY(-50%);
|
|
62
|
+
[data-fs-button-wrapper] {
|
|
63
|
+
border-radius: var(--fs-carousel-controls-border-radius);
|
|
64
|
+
box-shadow: var(--fs-carousel-controls-box-shadow);
|
|
65
|
+
}
|
|
66
|
+
&:not(:hover) [data-fs-button-wrapper] { background-color: var(--fs-carousel-controls-bkg-color); }
|
|
71
67
|
}
|
|
72
68
|
|
|
73
69
|
[data-fs-carousel-control="left"] {
|
|
@@ -87,7 +83,6 @@
|
|
|
87
83
|
}
|
|
88
84
|
|
|
89
85
|
[data-fs-icon] {
|
|
90
|
-
display: flex;
|
|
91
86
|
color: var(--fs-carousel-controls-icon-color);
|
|
92
87
|
}
|
|
93
88
|
}
|
|
@@ -114,9 +114,10 @@
|
|
|
114
114
|
padding: 0;
|
|
115
115
|
overflow: hidden;
|
|
116
116
|
background-color: transparent;
|
|
117
|
-
border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
|
|
118
117
|
border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
|
|
118
|
+
border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
|
|
119
119
|
transition: all var(--fs-image-gallery-transition-timing) var(--fs-image-gallery-transition-function);
|
|
120
|
+
img { border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius); }
|
|
120
121
|
> span {
|
|
121
122
|
width: 100%;
|
|
122
123
|
height: 100%;
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
// Default properties
|
|
7
7
|
--fs-product-details-vertical-spacing : var(--fs-spacing-4);
|
|
8
|
+
--fs-product-details-horizontal-spacing : var(--fs-product-details-vertical-spacing);
|
|
8
9
|
|
|
10
|
+
--fs-product-details-section-bkg-color : transparent;
|
|
9
11
|
--fs-product-details-section-border-radius : var(--fs-border-radius);
|
|
10
12
|
--fs-product-details-section-border-color : var(--fs-border-color-light);
|
|
11
13
|
--fs-product-details-section-border-width : var(--fs-border-width);
|
|
@@ -25,7 +27,7 @@
|
|
|
25
27
|
display: grid;
|
|
26
28
|
grid-template-columns: repeat(12, 1fr);
|
|
27
29
|
row-gap: 0;
|
|
28
|
-
column-gap: var(--fs-product-details-
|
|
30
|
+
column-gap: var(--fs-product-details-horizontal-spacing);
|
|
29
31
|
}
|
|
30
32
|
}
|
|
31
33
|
|
|
@@ -62,6 +64,8 @@
|
|
|
62
64
|
|
|
63
65
|
[data-fs-product-details-title],
|
|
64
66
|
[data-fs-product-details-info] {
|
|
67
|
+
background-color: var(--fs-product-details-section-bkg-color);
|
|
68
|
+
|
|
65
69
|
@include media(">=tablet") {
|
|
66
70
|
grid-column: 8 / span 5;
|
|
67
71
|
height: 100%;
|
|
@@ -95,6 +99,7 @@
|
|
|
95
99
|
@include media(">=tablet") {
|
|
96
100
|
grid-row: span 5;
|
|
97
101
|
row-gap: 0;
|
|
102
|
+
border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
|
|
98
103
|
}
|
|
99
104
|
}
|
|
100
105
|
|
|
@@ -117,14 +122,6 @@
|
|
|
117
122
|
justify-content: space-between;
|
|
118
123
|
}
|
|
119
124
|
|
|
120
|
-
// Shipping
|
|
121
|
-
|
|
122
|
-
[data-fs-product-details-shipping] {
|
|
123
|
-
@include media(">=tablet") {
|
|
124
|
-
border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
125
|
// -----------------------------
|
|
129
126
|
// Gallery Section
|
|
130
127
|
// -----------------------------
|
|
@@ -163,7 +160,7 @@
|
|
|
163
160
|
// Content Section
|
|
164
161
|
// -----------------------------
|
|
165
162
|
|
|
166
|
-
[data-fs-product-
|
|
163
|
+
[data-fs-product-description] {
|
|
167
164
|
@include media(">=tablet") {
|
|
168
165
|
grid-row: span 10;
|
|
169
166
|
grid-column: span 7;
|
|
@@ -175,7 +172,7 @@
|
|
|
175
172
|
}
|
|
176
173
|
}
|
|
177
174
|
|
|
178
|
-
[data-fs-image-gallery="with-selector"] ~ [data-fs-product-
|
|
175
|
+
[data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
|
|
179
176
|
@include media(">=notebook") {
|
|
180
177
|
grid-column: 2 / 9;
|
|
181
178
|
}
|
|
@@ -4,13 +4,16 @@
|
|
|
4
4
|
// ----------------------------------------------------------
|
|
5
5
|
|
|
6
6
|
body {
|
|
7
|
-
--fs-body-bkg: var(--fs-color-body-bkg);
|
|
8
|
-
|
|
9
7
|
min-height: 100vh;
|
|
10
8
|
color: var(--fs-color-text);
|
|
11
9
|
background: var(--fs-body-bkg);
|
|
12
10
|
}
|
|
13
11
|
|
|
12
|
+
main {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
}
|
|
16
|
+
|
|
14
17
|
.layout__main {
|
|
15
18
|
display: flex;
|
|
16
19
|
flex-wrap: wrap;
|
|
@@ -18,11 +21,11 @@ body {
|
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
.layout__section {
|
|
21
|
-
|
|
24
|
+
margin-bottom: var(--fs-spacing-4);
|
|
22
25
|
margin-top: var(--fs-spacing-4);
|
|
23
26
|
|
|
24
27
|
@include media(">=notebook") {
|
|
25
|
-
|
|
28
|
+
margin-bottom: var(--fs-grid-padding);
|
|
26
29
|
margin-top: var(--fs-grid-padding);
|
|
27
30
|
}
|
|
28
31
|
}
|
|
@@ -41,7 +44,7 @@ body {
|
|
|
41
44
|
.layout__content {
|
|
42
45
|
box-sizing: border-box;
|
|
43
46
|
width: 100%;
|
|
44
|
-
max-width: var(--fs-grid-
|
|
47
|
+
max-width: var(--fs-grid-max-width);
|
|
45
48
|
padding-right: var(--fs-grid-padding);
|
|
46
49
|
padding-left: var(--fs-grid-padding);
|
|
47
50
|
margin-right: auto;
|