@faststore/ui 2.0.114-alpha.0 → 2.0.122-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.
Files changed (19) hide show
  1. package/package.json +2 -2
  2. package/src/components/atoms/Logo/styles.scss +12 -0
  3. package/src/components/molecules/Banner/styles.scss +125 -0
  4. package/src/components/molecules/Carousel/styles.scss +145 -0
  5. package/src/components/molecules/NavbarLinks/styles.scss +91 -0
  6. package/src/components/molecules/ProductCardSkeleton/styles.scss +56 -0
  7. package/src/components/molecules/ProductTile/styles.scss +79 -0
  8. package/src/components/organisms/BannerNewsletter/styles.scss +21 -0
  9. package/src/components/organisms/FilterSkeleton/styles.scss +49 -0
  10. package/src/components/organisms/Footer/styles.scss +218 -0
  11. package/src/components/organisms/Incentives/styles.scss +120 -0
  12. package/src/components/organisms/Navbar/styles.scss +200 -0
  13. package/src/components/organisms/NavbarSlider/styles.scss +53 -0
  14. package/src/components/organisms/Newsletter/styles.scss +133 -0
  15. package/src/components/organisms/ProductDetails/styles.scss +183 -0
  16. package/src/components/organisms/ProductGallery/styles.scss +180 -0
  17. package/src/components/organisms/Tiles/styles.scss +56 -0
  18. package/src/styles/components.scss +16 -0
  19. package/src/styles/global.scss +0 -1
package/src/components/organisms/Footer/styles.scss ADDED
@@ -0,0 +1,218 @@
1
+ [data-fs-footer] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Footer
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-footer-spacing-vertical-mobile : var(--fs-spacing-4);
8
+ --fs-footer-spacing-vertical-notebook : var(--fs-spacing-5);
9
+ --fs-footer-spacing-horizontal-notebook : var(--fs-grid-gap-3);
10
+
11
+ --fs-footer-bkg-color : var(--fs-color-neutral-bkg);
12
+
13
+ // Divisor
14
+ --fs-footer-divisor-border-width : var(--fs-border-width);
15
+ --fs-footer-divisor-border-color : var(--fs-border-color-light);
16
+
17
+ // Title
18
+ --fs-footer-title-size : var(--fs-text-size-body);
19
+ --fs-footer-title-line-height : 1.25;
20
+ --fs-footer-title-weight : var(--fs-text-weight-bold);
21
+ --fs-footer-title-margin-bottom : var(--fs-spacing-1);
22
+
23
+ // --------------------------------------------------------
24
+ // Structural Styles
25
+ // --------------------------------------------------------
26
+
27
+ &[data-fs-footer] {
28
+ background-color: var(--fs-footer-bkg-color);
29
+ }
30
+
31
+ @include media("<notebook") {
32
+ padding-top: 0;
33
+ }
34
+
35
+ [data-fs-logo] {
36
+ background-position-y: var(--fs-spacing-0);
37
+ }
38
+
39
+ [data-fs-footer-title] {
40
+ margin-bottom: var(--fs-footer-title-margin-bottom);
41
+ font-size: var(--fs-footer-title-size);
42
+ font-weight: var(--fs-footer-title-weight);
43
+ line-height: var(--fs-footer-title-line-height);
44
+
45
+ @include media("<notebook") {
46
+ text-align: center;
47
+ }
48
+ }
49
+
50
+ [data-fs-footer-note],
51
+ [data-fs-footer-nav] {
52
+ position: relative;
53
+ display: flex;
54
+
55
+ @include media("<notebook") {
56
+ flex-direction: column;
57
+ }
58
+
59
+ @include media(">=notebook") {
60
+ display: grid;
61
+ grid-template-columns: repeat(12, 1fr);
62
+ column-gap: var(--fs-footer-spacing-horizontal-notebook);
63
+ }
64
+
65
+ &:not(:first-of-type)::before {
66
+ width: 100%;
67
+ content: "";
68
+ border-top: var(--fs-footer-divisor-border-width) solid var(--fs-footer-divisor-border-color);
69
+
70
+ @include media(">=notebook") {
71
+ grid-column: span 12;
72
+ }
73
+ }
74
+ }
75
+
76
+ [data-fs-footer-nav] {
77
+ @include media(">=notebook") {
78
+ row-gap: var(--fs-footer-spacing-vertical-notebook);
79
+ padding-bottom: var(--fs-footer-spacing-vertical-notebook);
80
+ }
81
+ }
82
+
83
+ [data-fs-footer-note] {
84
+ position: relative;
85
+
86
+ @include media("<notebook") {
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: space-between;
90
+ text-align: center;
91
+
92
+ &::before {
93
+ padding-bottom: var(--fs-footer-spacing-vertical-mobile);
94
+ }
95
+ }
96
+
97
+ @include media(">=notebook") {
98
+ row-gap: var(--fs-footer-spacing-vertical-notebook);
99
+ padding-top: 0;
100
+ }
101
+ }
102
+
103
+ [data-fs-footer-social],
104
+ [data-fs-payment-methods] {
105
+ @include media(">=notebook") {
106
+ grid-column: 11 / span 2;
107
+ margin-left: calc(-1 * var(--fs-spacing-3));
108
+ }
109
+ }
110
+
111
+ [data-fs-footer-social] {
112
+ display: flex;
113
+ flex-direction: column;
114
+
115
+ @include media("<notebook") {
116
+ padding: var(--fs-footer-spacing-vertical-mobile) 0 var(--fs-spacing-3);
117
+ }
118
+
119
+ [data-fs-list] {
120
+ display: flex;
121
+ justify-content: center;
122
+
123
+ @include media(">=notebook") {
124
+ justify-content: space-between;
125
+ }
126
+
127
+ [data-fs-link] {
128
+ display: inline-flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ min-width: var(--fs-control-tap-size);
132
+ min-height: var(--fs-control-tap-size);
133
+ padding: var(--fs-spacing-1);
134
+ }
135
+ }
136
+ }
137
+
138
+ [data-fs-payment-methods] {
139
+ @include media("<notebook") {
140
+ margin: var(--fs-footer-spacing-vertical-mobile) auto;
141
+ }
142
+
143
+ @include media(">=notebook") {
144
+ order: 3;
145
+ }
146
+ }
147
+
148
+ [data-fs-icon] {
149
+ @include media(">=notebook") {
150
+ grid-column: span 2;
151
+ }
152
+ }
153
+
154
+ [data-fs-footer-copyright] {
155
+ p + p {
156
+ margin: var(--fs-spacing-2) auto;
157
+ }
158
+
159
+ address {
160
+ font-style: normal;
161
+ }
162
+
163
+ @include media(">=notebook") {
164
+ grid-column: span 6;
165
+ }
166
+ }
167
+
168
+ [data-fs-footer-links-columns] {
169
+ display: grid;
170
+ grid-template-columns: repeat(auto-fit, minmax(0, auto));
171
+ grid-gap: var(--fs-footer-spacing-horizontal-notebook);
172
+ }
173
+
174
+ &[data-fs-footer-links] {
175
+ [data-fs-link] {
176
+ display: inline-block;
177
+ padding-left: 0;
178
+ }
179
+
180
+ @include media(">=notebook") {
181
+ grid-column: span 9;
182
+ }
183
+
184
+ @include media(">=desktop") {
185
+ grid-column: span 8;
186
+ }
187
+ }
188
+
189
+ // --------------------------------------------------------
190
+ // Variants Styles
191
+ // --------------------------------------------------------
192
+
193
+ &[data-fs-footer-incentives="true"] {
194
+ @include media(">=notebook") {
195
+ padding-top: 0;
196
+ }
197
+ }
198
+
199
+ &:not([data-fs-footer-social="true"]) {
200
+ [data-fs-footer-note]::before {
201
+ @include media("<notebook") {
202
+ border-color: transparent;
203
+ }
204
+ }
205
+
206
+ [data-fs-footer-links] {
207
+ @include media(">=notebook") {
208
+ grid-column: span 12;
209
+ }
210
+ }
211
+ }
212
+
213
+ &:not([data-fs-footer-payment-methods="true"]) [data-fs-footer-copyright] {
214
+ @include media(">=notebook") {
215
+ grid-column: span 10;
216
+ }
217
+ }
218
+ }
package/src/components/organisms/Incentives/styles.scss ADDED
@@ -0,0 +1,120 @@
1
+ [data-fs-incentives] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Incentives
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-incentives-bkg-color : var(--fs-color-primary-bkg-light);
8
+
9
+ --fs-incentives-gap : var(--fs-spacing-4);
10
+ --fs-incentives-padding-top : var(--fs-incentives-gap);
11
+ --fs-incentives-padding-bottom : var(--fs-incentives-gap);
12
+
13
+ --fs-incentives-border-color : var(--fs-border-color-light);
14
+ --fs-incentives-border-width : var(--fs-border-width);
15
+
16
+ // Title
17
+ --fs-incentives-title-size : var(--fs-text-size-1);
18
+ --fs-incentives-title-weight : var(--fs-text-weight-bold);
19
+ --fs-incentives-title-line-height : 1.42;
20
+ --fs-incentives-title-color : var(--fs-color-text);
21
+
22
+ // Description
23
+ --fs-incentives-description-size : var(--fs-incentives-title-size);
24
+ --fs-incentives-description-line-height : 1.14;
25
+ --fs-incentives-description-color : var(--fs-incentives-title-color);
26
+
27
+ // Incentive Icon
28
+ --fs-incentives-icon-color : var(--fs-incentives-title-color);
29
+
30
+ // --------------------------------------------------------
31
+ // Structural Styles
32
+ // --------------------------------------------------------
33
+
34
+ display: flex;
35
+ justify-content: center;
36
+ padding-top: var(--fs-incentives-padding-top);
37
+ padding-bottom: var(--fs-incentives-padding-bottom);
38
+
39
+ [data-fs-list] {
40
+ display: flex;
41
+ width: fit-content;
42
+ overflow-x: auto;
43
+ overflow-y: hidden;
44
+
45
+ @include media(">=notebook") {
46
+ justify-content: center;
47
+ }
48
+ }
49
+
50
+ [data-fs-incentive] {
51
+ display: flex;
52
+ flex-direction: column;
53
+ align-items: center;
54
+ justify-content: center;
55
+
56
+ @include media("<notebook") {
57
+ row-gap: var(--fs-spacing-0);
58
+ }
59
+
60
+ @include media(">=notebook") {
61
+ flex-direction: row;
62
+
63
+ [data-fs-incentive-content] {
64
+ margin-left: var(--fs-spacing-2);
65
+ text-align: left;
66
+ }
67
+ }
68
+ }
69
+
70
+ [data-fs-incentive-title] {
71
+ font-size: var(--fs-incentives-title-size);
72
+ font-weight: var(--fs-incentives-title-weight);
73
+ line-height: var(--fs-incentives-title-line-height);
74
+ color: var(--fs-incentives-title-color);
75
+ }
76
+
77
+ [data-fs-incentive-description] {
78
+ display: block;
79
+ font-size: var(--fs-incentives-description-size);
80
+ line-height: var(--fs-incentives-description-line-height);
81
+ color: var(--fs-incentives-description-color);
82
+ white-space: nowrap;
83
+ }
84
+
85
+ [data-fs-incentive-content] {
86
+ text-align: center;
87
+ }
88
+
89
+ [data-fs-incentive-icon] {
90
+ color: var(--fs-incentives-icon-color);
91
+ }
92
+
93
+ // --------------------------------------------------------
94
+ // Variants Styles
95
+ // --------------------------------------------------------
96
+
97
+ &[data-fs-incentives-colored="true"] {
98
+ background-color: var(--fs-incentives-bkg-color);
99
+ }
100
+
101
+ &[data-fs-incentives-variant="vertical"] {
102
+ ul {
103
+ flex-direction: column;
104
+ }
105
+
106
+ li:not(:last-child) {
107
+ padding-bottom: var(--fs-incentives-gap);
108
+ margin-bottom: var(--fs-incentives-gap);
109
+ border-bottom: var(--fs-incentives-border-width) solid var(--fs-incentives-border-color);
110
+ }
111
+ }
112
+
113
+ &[data-fs-incentives-variant="horizontal"] {
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);
118
+ }
119
+ }
120
+ }
package/src/components/organisms/Navbar/styles.scss ADDED
@@ -0,0 +1,200 @@
1
+ [data-fs-navbar] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Navbar
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+
8
+ --fs-navbar-height-mobile : 3.5rem;
9
+
10
+ --fs-navbar-bkg-color : rgb(255 255 255 / 90%);
11
+
12
+ --fs-navbar-transition-timing : var(--fs-transition-timing);
13
+ --fs-navbar-transition-function : var(--fs-transition-function);
14
+
15
+ --fs-navbar-box-shadow : 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);
16
+
17
+ // Header
18
+ --fs-navbar-header-padding : 0 var(--fs-spacing-0);
19
+
20
+ --fs-navbar-header-padding-top-notebook : var(--fs-spacing-1);
21
+ --fs-navbar-header-padding-bottom-notebook : var(--fs-navbar-header-padding-top-notebook);
22
+
23
+ // Search
24
+ --fs-navbar-search-button-icon-width-mobile : var(--fs-spacing-5);
25
+ --fs-navbar-search-button-icon-height-mobile : var(--fs-navbar-search-button-icon-width-mobile);
26
+
27
+ // Search Expanded
28
+ --fs-navbar-search-expanded-input-wrapper-margin-right : 0.625rem;
29
+ --fs-navbar-search-expanded-input-wrapper-margin-left : var(--fs-spacing-9);
30
+
31
+ --fs-navbar-search-expanded-input-width : calc(100% - var(--fs-spacing-7));
32
+
33
+ --fs-navbar-search-expanded-button-icon-margin-right : -4.063rem;
34
+
35
+ // Logo
36
+ --fs-navbar-logo-border-left-width : var(--fs-border-width);
37
+ --fs-navbar-logo-border-left-color : var(--fs-border-color-light);
38
+
39
+ // --------------------------------------------------------
40
+ // Structural Styles
41
+ // --------------------------------------------------------
42
+
43
+ display: flex;
44
+ flex-direction: column;
45
+ justify-content: center;
46
+ padding: 0;
47
+ box-shadow: var(--fs-navbar-box-shadow);
48
+ transition: top var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
49
+
50
+ @include media("<notebook") {
51
+ height: var(--fs-navbar-height-mobile);
52
+ }
53
+
54
+ &[data-fs-navbar-scroll="down"] {
55
+ > nav {
56
+ top: calc(-1 * var(--fs-spacing-3));
57
+ height: 0;
58
+ padding: 0;
59
+ opacity: 0;
60
+ }
61
+ }
62
+
63
+ &[data-fs-navbar-scroll="up"] {
64
+ > nav {
65
+ top: 0;
66
+ opacity: 1;
67
+ }
68
+ }
69
+
70
+ [data-fs-search-input] {
71
+ flex: 1 0 100%;
72
+ order: 2;
73
+
74
+ @include media("<notebook") {
75
+ display: none;
76
+ }
77
+ }
78
+
79
+ [data-fs-navbar-row] {
80
+ display: flex;
81
+ flex-flow: row wrap;
82
+ align-items: center;
83
+ justify-content: space-between;
84
+ width: 100%;
85
+
86
+ @include media("<notebook") {
87
+ padding: 0;
88
+ }
89
+
90
+ @include media(">=notebook") {
91
+ display: grid;
92
+ grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr;
93
+ }
94
+
95
+ [data-fs-navbar-button-menu] {
96
+ @include media(">=notebook") { display: none; }
97
+ }
98
+ }
99
+
100
+ [data-fs-navbar-buttons] {
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: flex-end;
104
+
105
+ [data-fs-button-signin-link] + [data-fs-cart-toggle] {
106
+ @include media(">=notebook") {
107
+ margin-left: var(--fs-spacing-3);
108
+ }
109
+ }
110
+
111
+ [data-fs-button-signin-link] {
112
+ display: none;
113
+ }
114
+
115
+ @include media(">=notebook") {
116
+ order: 2;
117
+
118
+ [data-fs-button-signin-link] {
119
+ display: inline-flex;
120
+ }
121
+ }
122
+
123
+ [data-fs-search-input] {
124
+ display: none;
125
+ transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
126
+
127
+ @include media("<notebook") {
128
+ display: flex;
129
+ flex: 0;
130
+ flex-direction: column;
131
+ order: 0;
132
+ width: min-content;
133
+
134
+ &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input-field-input] {
135
+ width: 0;
136
+ padding: 0;
137
+ border-width: 0;
138
+
139
+ &:hover, &:focus, &:focus-visible &:hover:focus-visible {
140
+ border-width: 0;
141
+ box-shadow: 0 0;
142
+ }
143
+ }
144
+
145
+ [data-fs-icon] {
146
+ margin-right: 0;
147
+ line-height: 0;
148
+
149
+ svg {
150
+ width: var(--fs-navbar-search-button-icon-width-mobile);
151
+ height: var(--fs-navbar-search-button-icon-height-mobile);
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ &[data-fs-navbar-search-expanded="true"] {
158
+ width: 100%;
159
+
160
+ [data-fs-search-input] {
161
+ flex: 1 1;
162
+ margin-right: var(--fs-navbar-search-expanded-input-wrapper-margin-right);
163
+ margin-left: var(--fs-navbar-search-expanded-input-wrapper-margin-left);
164
+
165
+ [data-fs-search-input-field] [data-fs-search-input-field-input] {
166
+ width: var(--fs-navbar-search-expanded-input-width);
167
+ padding: var(--fs-spacing-2);
168
+ }
169
+
170
+ [data-fs-icon] {
171
+ margin-right: 0;
172
+ }
173
+ }
174
+
175
+ [data-fs-icon-button="true"] {
176
+ margin-right: var(--fs-navbar-search-expanded-button-icon-margin-right);
177
+ transition: margin var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
178
+ }
179
+ }
180
+ }
181
+
182
+ [data-fs-navbar-header] {
183
+ z-index: var(--fs-z-index-top);
184
+ padding: var(--fs-navbar-header-padding);
185
+ overflow-x: clip;
186
+ background-color: var(--fs-navbar-bkg-color);
187
+ backdrop-filter: blur(10px);
188
+ }
189
+
190
+ [data-fs-navbar-logo] {
191
+ align-self: stretch;
192
+
193
+ @include media("<notebook") {
194
+ padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
195
+ margin-right: auto;
196
+ margin-left: var(--fs-spacing-0);
197
+ border-left: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
198
+ }
199
+ }
200
+ }
package/src/components/organisms/NavbarSlider/styles.scss ADDED
@@ -0,0 +1,53 @@
1
+ [data-fs-navbar-slider] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Navbar Slider
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-navbar-slider-padding : var(--fs-spacing-3);
8
+
9
+ // Header
10
+ --fs-navbar-slider-header-padding-bottom : var(--fs-spacing-2);
11
+ --fs-navbar-slider-header-button-margin-right : calc(-1 * var(--fs-spacing-1));
12
+
13
+ // Footer
14
+ --fs-navbar-slider-footer-padding-top : var(--fs-navbar-slider-header-padding-bottom);
15
+ --fs-navbar-slider-footer-margin-top : var(--fs-navbar-slider-header-padding-bottom);
16
+
17
+ // Logo
18
+ --fs-navbar-slider-logo-height : 2.375rem;
19
+ --fs-navbar-slider-logo-padding : 0;
20
+ --fs-navbar-slider-logo-margin-right : var(--fs-spacing-5);
21
+
22
+ // --------------------------------------------------------
23
+ // Structural Styles
24
+ // --------------------------------------------------------
25
+
26
+ padding: var(--fs-navbar-slider-padding);
27
+
28
+ [data-fs-navbar-slider-header] {
29
+ padding: 0;
30
+ padding-bottom: var(--fs-navbar-slider-header-padding-bottom);
31
+ }
32
+
33
+ [data-fs-navbar-slider-logo] {
34
+ height: var(--fs-navbar-slider-logo-height);
35
+ padding: var(--fs-navbar-slider-logo-padding);
36
+ margin-right: var(--fs-navbar-slider-logo-margin-right);
37
+
38
+ img {
39
+ width: 100%;
40
+ height: 100%;
41
+ }
42
+ }
43
+
44
+ [data-fs-navbar-slider-footer] {
45
+ padding-top: var(--fs-navbar-slider-footer-padding-top);
46
+ margin-top: var(--fs-navbar-slider-footer-margin-top);
47
+
48
+ [data-fs-button-signin-link] {
49
+ width: fit-content;
50
+ padding-left: 0;
51
+ }
52
+ }
53
+ }