Skip to content

Commit dd30d02

Browse files
artursantiagoartursantiago
committed
feat(ReviewCard): add spaces to review card properties
1 parent 951ff45 commit dd30d02

File tree

1 file changed

+55
-54
lines changed
  • packages/ui/src/components/molecules/ReviewCard

1 file changed

+55
-54
lines changed

‎packages/ui/src/components/molecules/ReviewCard/styles.scss

+55-54
Original file line numberDiff line numberDiff line change
@@ -4,131 +4,132 @@
44
// --------------------------------------------------------
55

66
// Default properties
7-
--fs-review-card-border-color: var(--fs-border-color-light);
8-
--fs-review-card-border-width: var(--fs-border-width);
9-
--fs-review-card-padding-mobile: 1.25rem 0; // 20px
10-
--fs-review-card-gap-mobile: var(--fs-spacing-1);
7+
--fs-review-card-border-color : var(--fs-border-color-light);
8+
--fs-review-card-border-width : var(--fs-border-width);
9+
--fs-review-card-padding-mobile : 1.25rem 0; // 20px
10+
--fs-review-card-gap-mobile : var(--fs-spacing-1);
1111

1212
// Header
13-
--fs-review-card-header-width-desktop: 112px;
14-
--fs-review-card-header-gap: var(--fs-spacing-1);
13+
--fs-review-card-header-width-desktop : 112px;
14+
--fs-review-card-header-gap : var(--fs-spacing-1);
1515

1616
// Date
17-
--fs-review-card-date-color: var(--fs-color-text-light);
18-
--fs-review-card-date-font-size: var(--fs-text-size-0);
19-
--fs-review-card-date-font-weight: var(--fs-text-weight-regular);
20-
--fs-review-card-date-line-height: var(--fs-text-size-base);
17+
--fs-review-card-date-color : var(--fs-color-text-light);
18+
--fs-review-card-date-font-size : var(--fs-text-size-0);
19+
--fs-review-card-date-line-height : var(--fs-text-size-base);
20+
--fs-review-card-date-font-weight : var(--fs-text-weight-regular);
2121

2222
// Text
23-
--fs-review-card-text-gap: var(--fs-spacing-0);
23+
--fs-review-card-text-gap : var(--fs-spacing-0);
2424

2525
// Text-Headline
26-
--fs-review-card-headline-color: var(--fs-color-text);
27-
--fs-review-card-headline-font-size: var(--fs-text-size-2);
28-
--fs-review-card-headline-font-weight: var(--fs-text-weight-medium);
29-
--fs-review-card-headline-line-height: 1.5;
26+
--fs-review-card-headline-color : var(--fs-color-text);
27+
--fs-review-card-headline-font-size : var(--fs-text-size-2);
28+
--fs-review-card-headline-font-weight : var(--fs-text-weight-medium);
29+
--fs-review-card-headline-line-height : 1.5;
3030

3131
// Text-Content
32-
--fs-review-card-text-color: var(--fs-color-text);
33-
--fs-review-card-text-font-size: var(--fs-text-size-1);
34-
--fs-review-card-text-font-weight: var(--fs-text-weight-regular);
35-
--fs-review-card-text-line-height: 1.5;
32+
--fs-review-card-text-color : var(--fs-color-text);
33+
--fs-review-card-text-font-size : var(--fs-text-size-1);
34+
--fs-review-card-text-font-weight : var(--fs-text-weight-regular);
35+
--fs-review-card-text-line-height : 1.5;
3636

3737
// Author
38-
--fs-review-card-author-gap: var(--fs-spacing-1);
39-
--fs-review-card-author-color: var(--fs-color-success-text);
40-
--fs-review-card-author-font-size: var(--fs-text-size-0);
41-
--fs-review-card-author-font-weight: var(--fs-text-weight-regular);
42-
--fs-review-card-author-line-height: 1.33;
38+
--fs-review-card-author-gap : var(--fs-spacing-1);
39+
--fs-review-card-author-color : var(--fs-color-success-text);
40+
--fs-review-card-author-font-size : var(--fs-text-size-0);
41+
--fs-review-card-author-font-weight : var(--fs-text-weight-regular);
42+
--fs-review-card-author-line-height : 1.33;
4343

4444
// Desktop
45-
--fs-review-card-padding-desktop: var(--fs-spacing-3) 0 1.25rem; // 20px
46-
--fs-review-card-gap-desktop: 50px;
45+
--fs-review-card-padding-desktop : var(--fs-spacing-3) 0 1.25rem; // 20px
46+
--fs-review-card-gap-desktop : 50px;
4747

4848
// --------------------------------------------------------
4949
// Structural Styles
5050
// --------------------------------------------------------
5151

5252
display: flex;
5353
flex-direction: column;
54-
padding: var(--fs-review-card-padding-mobile);
5554
gap: var(--fs-review-card-gap-mobile);
56-
border-bottom: var(--fs-review-card-border-width) solid
55+
padding: var(--fs-review-card-padding-mobile);
56+
border-bottom:
57+
var(--fs-review-card-border-width) solid
5758
var(--fs-review-card-border-color);
5859

59-
@include media('>=notebook') {
60+
@include media(">=notebook") {
6061
flex-direction: row;
6162
gap: var(--fs-review-card-gap-desktop);
6263
padding: var(--fs-review-card-padding-desktop);
6364
}
6465

6566
[data-fs-review-card-header] {
6667
display: flex;
67-
justify-content: space-between;
68-
align-items: center;
6968
gap: var(--fs-review-card-header-gap);
69+
align-items: center;
70+
justify-content: space-between;
7071

71-
@include media('>=notebook') {
72-
justify-content: flex-start;
73-
align-items: flex-start;
72+
@include media(">=notebook") {
7473
flex-direction: column;
75-
max-width: var(--fs-review-card-header-width-desktop);
74+
align-items: flex-start;
75+
justify-content: flex-start;
7676
width: 100%;
77+
max-width: var(--fs-review-card-header-width-desktop);
7778
}
7879
}
7980

8081
[data-fs-review-card-author] {
8182
display: flex;
82-
align-items: center;
8383
gap: var(--fs-review-card-author-gap);
84+
align-items: center;
8485
width: 100%;
8586

86-
&[data-fs-review-card-author='desktop'] {
87+
&[data-fs-review-card-author="desktop"] {
8788
display: none;
8889
visibility: hidden;
8990
}
9091

91-
@include media('>=notebook') {
92-
&[data-fs-review-card-author='mobile'] {
92+
@include media(">=notebook") {
93+
&[data-fs-review-card-author="mobile"] {
9394
display: none;
9495
visibility: hidden;
9596
}
9697

97-
&[data-fs-review-card-author='desktop'] {
98+
&[data-fs-review-card-author="desktop"] {
9899
display: flex;
99100
visibility: visible;
100101
}
101102
}
102103
}
103104

104105
[data-fs-review-card-author-name] {
105-
color: var(--fs-review-card-author-color);
106106
font-size: var(--fs-review-card-author-font-size);
107107
font-weight: var(--fs-review-card-author-font-weight);
108108
line-height: var(--fs-review-card-author-line-height);
109+
color: var(--fs-review-card-author-color);
109110

110111
@include truncate-title(1);
111112
}
112113

113114
[data-fs-review-card-date] {
114115
flex-shrink: 0;
115-
color: var(--fs-review-card-date-color);
116116
font-size: var(--fs-review-card-date-font-size);
117117
font-weight: var(--fs-review-card-date-font-weight);
118118
line-height: var(--fs-review-card-date-line-height);
119+
color: var(--fs-review-card-date-color);
119120

120-
&[data-fs-review-card-date='desktop'] {
121+
&[data-fs-review-card-date="desktop"] {
121122
display: none;
122123
visibility: hidden;
123124
}
124125

125-
@include media('>=notebook') {
126-
&[data-fs-review-card-date='mobile'] {
126+
@include media(">=notebook") {
127+
&[data-fs-review-card-date="mobile"] {
127128
display: none;
128129
visibility: hidden;
129130
}
130131

131-
&[data-fs-review-card-date='desktop'] {
132+
&[data-fs-review-card-date="desktop"] {
132133
display: initial;
133134
visibility: visible;
134135
}
@@ -143,38 +144,38 @@
143144

144145
[data-fs-review-card-text-header] {
145146
display: flex;
146-
justify-content: space-between;
147147
gap: var(--fs-review-card-header-gap);
148+
justify-content: space-between;
148149
}
149150

150151
[data-fs-review-card-text-headline] {
151-
color: var(--fs-review-card-headline-color);
152152
font-size: var(--fs-review-card-headline-font-size);
153153
font-weight: var(--fs-review-card-headline-font-weight);
154154
line-height: var(--fs-review-card-headline-line-height);
155+
color: var(--fs-review-card-headline-color);
155156

156157
@include truncate-title;
157158
}
158159

159160
[data-fs-review-card-text-content] {
160-
color: var(--fs-review-card-text-color);
161161
font-size: var(--fs-review-card-text-font-size);
162162
font-weight: var(--fs-review-card-text-font-weight);
163163
line-height: var(--fs-review-card-text-line-height);
164+
color: var(--fs-review-card-text-color);
165+
164166
@include truncate-title(3);
165167
}
166168

167-
[data-fs-review-card-text-content='expanded'] {
168-
line-clamp: unset;
169-
overflow: visible;
169+
[data-fs-review-card-text-content="expanded"] {
170170
display: block;
171+
overflow: visible;
172+
line-clamp: unset;
171173
}
172174

173175
[data-fs-review-card-text-read-more] {
174176
align-self: flex-start;
175-
176-
cursor: pointer;
177177
padding: 0;
178+
cursor: pointer;
178179
}
179180

180181
[data-fs-review-card-author-verified] {

0 commit comments

Comments
 (0)