@faststore/ui 2.2.63 → 2.2.67

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "2.2.63",
3
+ "version": "2.2.67",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -48,7 +48,7 @@
48
48
  }
49
49
  ],
50
50
  "dependencies": {
51
- "@faststore/components": "^2.2.63",
51
+ "@faststore/components": "^2.2.67",
52
52
  "include-media": "^1.4.10",
53
53
  "modern-normalize": "^1.1.0",
54
54
  "react-swipeable": "^7.0.0",
@@ -71,5 +71,5 @@
71
71
  "volta": {
72
72
  "extends": "../../package.json"
73
73
  },
74
- "gitHead": "1723768de147478e2cfddc4671845b1802707e8c"
74
+ "gitHead": "2e3616dde052d47d898067f985b4b0e067311495"
75
75
  }
@@ -1,22 +1,10 @@
1
1
  [data-fs-banner-text-newsletter] {
2
- margin-bottom: var(--fs-grid-padding);
3
2
 
4
- [data-fs-banner-text] {
5
- border-radius: var(--fs-border-radius);
6
- }
7
-
8
- > section {
9
- margin-top: 0;
10
- }
3
+ > section > [data-fs-content] { width: 100%; }
11
4
 
12
5
  @include media(">=notebook") {
13
6
  display: grid;
14
7
  grid-template-columns: 1fr 1fr;
15
8
  column-gap: var(--fs-grid-gap-3);
16
-
17
- > section {
18
- padding-top: 0;
19
- padding-bottom: 0;
20
- }
21
9
  }
22
10
  }
@@ -6,6 +6,7 @@
6
6
  // Default properties
7
7
  --fs-banner-text-padding-mobile : var(--fs-spacing-6) 5%;
8
8
  --fs-banner-text-padding-desktop : var(--fs-spacing-9) 10%;
9
+ --fs-banner-text-border-radius : var(--fs-border-radius);
9
10
 
10
11
  // Button Link
11
12
  --fs-banner-text-button-link-min-width : 11.25rem;
@@ -43,6 +44,7 @@
43
44
 
44
45
  height: 100%;
45
46
  text-align: center;
47
+ border-radius: var(--fs-banner-text-border-radius);
46
48
 
47
49
  [data-fs-banner-text-content] {
48
50
  display: flex;
@@ -81,14 +83,11 @@
81
83
  &[data-fs-banner-text-variant="secondary"] {
82
84
  h2 {
83
85
  margin-bottom: var(--fs-spacing-2);
84
- font-size: var(--fs-banner-text-title-size);
86
+ font-size: var(--fs-banner-text-secondary-title-size);
85
87
  font-weight: var(--fs-banner-text-title-weight);
86
88
  line-height: var(--fs-banner-text-title-line-height);
87
89
 
88
- @include media(">=notebook") {
89
- display: block;
90
- font-size: var(--fs-banner-text-secondary-title-size);
91
- }
90
+ @include media(">=notebook") { display: block; }
92
91
  }
93
92
 
94
93
  p {
@@ -114,7 +113,7 @@
114
113
  }
115
114
  }
116
115
 
117
- &[data-fs-banner-color-variant="accent"] {
116
+ &[data-fs-banner-text-color-variant="accent"] {
118
117
  background-color: var(--fs-banner-text-accent-bkg-color);
119
118
 
120
119
  [data-fs-banner-text-heading] {
@@ -4,18 +4,32 @@
4
4
  // --------------------------------------------------------
5
5
 
6
6
  // Default properties
7
- --fs-newsletter-padding-mobile : var(--fs-spacing-4) var(--fs-spacing-3) var(--fs-spacing-5);
8
- --fs-newsletter-padding-desktop : var(--fs-spacing-4) 0 var(--fs-spacing-5);
9
- --fs-newsletter-bkg : var(--fs-color-primary-bkg);
10
- --fs-newsletter-text-color : var(--fs-color-text-inverse);
7
+ --fs-newsletter-padding-mobile : var(--fs-spacing-5);
8
+ --fs-newsletter-padding-desktop : var(--fs-spacing-9) 10%;
9
+ --fs-newsletter-border-radius : var(--fs-border-radius);
11
10
 
12
11
  // Title
13
12
  --fs-newsletter-title-size : var(--fs-text-size-title-section);
14
13
  --fs-newsletter-title-weight : var(--fs-text-weight-bold);
15
14
 
15
+ // Icon
16
+ --fs-newsletter-icon-size : var(--fs-spacing-5);
17
+
16
18
  // Card
17
19
  --fs-newsletter-card-border-radius : var(--fs-border-radius);
18
20
 
21
+ // Main
22
+ --fs-newsletter-main-bkg-color : var(--fs-color-primary-bkg);
23
+ --fs-newsletter-main-text-color : var(--fs-color-primary-text);
24
+
25
+ // Light
26
+ --fs-newsletter-light-bkg-color : var(--fs-color-secondary-bkg-light);
27
+ --fs-newsletter-light-text-color : var(--fs-color-text-display);
28
+
29
+ // Accent
30
+ --fs-newsletter-accent-bkg-color : var(--fs-color-highlighted-bkg);
31
+ --fs-newsletter-accent-text-color : var(--fs-newsletter-light-text-color);
32
+
19
33
  // --------------------------------------------------------
20
34
  // Structural Styles
21
35
  // --------------------------------------------------------
@@ -23,46 +37,28 @@
23
37
  display: flex;
24
38
  flex-direction: column;
25
39
  align-items: center;
26
- width: 100%;
27
- padding: var(--fs-newsletter-padding-mobile);
28
- color: var(--fs-newsletter-text-color);
29
- background-color: var(--fs-newsletter-bkg);
30
-
31
- @include media(">=notebook") {
32
- padding: var(--fs-newsletter-padding-desktop);
33
- }
40
+ border-radius: var(--fs-newsletter-border-radius);
34
41
 
35
42
  [data-fs-newsletter-form] {
43
+ padding: var(--fs-newsletter-padding-mobile);
44
+ display: flex;
45
+ flex-direction: column;
46
+ row-gap: var(--fs-spacing-4);
36
47
 
37
48
  @include media(">=notebook") {
38
- display: grid;
39
- grid-template-columns: repeat(2, 1fr);
40
- column-gap: var(--fs-spacing-8);
41
- padding-top: var(--fs-spacing-6);
42
- padding-bottom: var(--fs-spacing-6);
43
-
44
- [data-fs-newsletter-header] {
45
- align-content: flex-start;
46
- }
49
+ padding: var(--fs-newsletter-padding-desktop);
47
50
  }
48
51
 
49
- [data-fs-newsletter-controls] {
50
- @include media(">=notebook") {
51
- grid-template-columns: repeat(3, 1fr);
52
- margin-top: 0;
53
-
54
- [data-fs-input-field] {
55
- grid-column: 1 / span 3;
56
- }
52
+ }
57
53
 
58
- [data-fs-button-inverse] {
59
- grid-column: 3;
60
- }
54
+ [data-fs-newsletter-content] {
55
+ display: flex;
56
+ flex-direction: column;
57
+ row-gap: var(--fs-spacing-3);
61
58
 
62
- [data-fs-newsletter-addendum] {
63
- grid-column: 1 / span 3;
64
- }
65
- }
59
+ [data-fs-button] {
60
+ width: 100%;
61
+ margin-top: var(--fs-spacing-3);
66
62
  }
67
63
  }
68
64
 
@@ -74,32 +70,29 @@
74
70
 
75
71
  @include media(">=notebook") {
76
72
  text-align: left;
73
+ align-content: flex-start;
77
74
  }
78
75
  }
79
76
 
80
- [data-fs-newsletter-header] h3 {
81
- display: grid;
82
- grid-template-columns: var(--fs-spacing-5) auto;
77
+ [data-fs-newsletter-header-title] {
78
+ display: flex;
79
+ flex-wrap: wrap;
80
+ row-gap: var(--fs-spacing-1);
83
81
  column-gap: var(--fs-spacing-1);
84
82
  align-items: center;
85
83
  justify-content: center;
86
84
  font-size: var(--fs-newsletter-title-size);
87
85
  font-weight: var(--fs-newsletter-title-weight);
88
- color: var(--fs-newsletter-text-color);
86
+ line-height: 1.2;
89
87
 
90
- @include media(">=notebook") {
91
- justify-content: left;
88
+ [data-fs-icon] {
89
+ flex-shrink: 0;
90
+ width: var(--fs-newsletter-icon-size);
91
+ height: var(--fs-newsletter-icon-size);
92
92
  }
93
- }
94
93
 
95
- [data-fs-newsletter-controls] {
96
- display: grid;
97
- row-gap: var(--fs-spacing-3);
98
- margin-top: var(--fs-spacing-4);
99
-
100
- [data-fs-button-inverse] {
101
- width: 100%;
102
- margin-top: var(--fs-spacing-3);
94
+ @include media(">=notebook") {
95
+ justify-content: left;
103
96
  }
104
97
  }
105
98
 
@@ -115,26 +108,50 @@
115
108
  // Variants Styles
116
109
  // --------------------------------------------------------
117
110
 
118
- &[data-fs-newsletter="card"] {
119
- text-align: center;
120
- border-radius: var(--fs-newsletter-card-border-radius);
121
-
122
- [data-fs-newsletter-header] {
123
- text-align: center;
124
- }
125
-
111
+ &:not([data-fs-newsletter="card"]) {
126
112
  @include media(">=notebook") {
127
113
  [data-fs-newsletter-form] {
128
- display: block;
114
+ display: grid;
115
+ grid-template-columns: repeat(2, 1fr);
116
+ column-gap: var(--fs-spacing-8);
129
117
  }
130
118
 
131
- [data-fs-newsletter-controls] {
132
- margin-top: var(--fs-spacing-4);
119
+ [data-fs-button] {
120
+ width: auto;
121
+ margin-left: auto;
122
+ min-width: 40%;
133
123
  }
134
124
  }
125
+ }
135
126
 
136
- [data-fs-newsletter-header] h3 {
127
+ &[data-fs-newsletter="card"] {
128
+ text-align: center;
129
+ border-radius: var(--fs-newsletter-card-border-radius);
130
+
131
+ [data-fs-newsletter-header],
132
+ [data-fs-newsletter-addendum] {
133
+ text-align: center;
134
+ }
135
+
136
+ [data-fs-newsletter-header-title] {
137
137
  justify-content: center;
138
138
  }
139
139
  }
140
+
141
+ &[data-fs-newsletter-color-variant="main"] {
142
+ background-color: var(--fs-newsletter-main-bkg-color);
143
+ color: var(--fs-newsletter-main-text-color);
144
+
145
+ [data-fs-link="true"] { color: var(--fs-color-link-inverse); }
146
+ }
147
+
148
+ &[data-fs-newsletter-color-variant="light"] {
149
+ background-color: var(--fs-newsletter-light-bkg-color);
150
+ color: var(--fs-newsletter-light-text-color);
151
+ }
152
+
153
+ &[data-fs-newsletter-color-variant="accent"] {
154
+ background-color: var(--fs-newsletter-accent-bkg-color);
155
+ color: var(--fs-newsletter-accent-text-color);
156
+ }
140
157
  }