@faststore/ui 2.1.16 → 2.1.23

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 (18) hide show
  1. package/dist/components/organisms/Tiles/Tiles.js +1 -1
  2. package/dist/components/organisms/Tiles/Tiles.js.map +1 -1
  3. package/package.json +3 -3
  4. package/src/components/atoms/List/styles.scss +0 -1
  5. package/src/components/molecules/Breadcrumb/styles.scss +4 -6
  6. package/src/components/molecules/Carousel/styles.scss +1 -1
  7. package/src/components/molecules/NavbarLinks/styles.scss +2 -2
  8. package/src/components/molecules/ProductCard/styles.scss +5 -0
  9. package/src/components/organisms/Banner/styles.scss +5 -6
  10. package/src/components/organisms/Footer/styles.scss +1 -1
  11. package/src/components/organisms/Navbar/styles.scss +1 -1
  12. package/src/components/organisms/Newsletter/styles.scss +8 -2
  13. package/src/components/organisms/ProductGallery/styles.scss +17 -16
  14. package/src/components/organisms/ProductGrid/styles.scss +2 -0
  15. package/src/components/organisms/Tiles/Tiles.tsx +1 -0
  16. package/src/styles/base/layout.scss +3 -29
  17. package/src/styles/base/tokens.scss +6 -6
  18. package/src/styles/base/utilities.scss +37 -0
package/dist/components/organisms/Tiles/Tiles.js CHANGED
@@ -24,7 +24,7 @@ const Tiles = forwardRef(function Tiles({ testId = 'store-tiles', children, ...o
24
24
  : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
25
25
  ? 'expanded-first-two'
26
26
  : '';
27
- return (React.createElement("ul", { ref: ref, role: "list", "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-testid": testId, ...otherProps }, children));
27
+ return (React.createElement("ul", { ref: ref, role: "list", "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-fs-content": "tiles", "data-testid": testId, ...otherProps }, children));
28
28
  });
29
29
  export default Tiles;
30
30
  //# sourceMappingURL=Tiles.js.map
package/dist/components/organisms/Tiles/Tiles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,kDAEY,aAAa,iBACvB,MAAM,KACf,UAAU,IAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../../src/components/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,kDAEY,aAAa,qBACpB,OAAO,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "2.1.16",
3
+ "version": "2.1.23",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -34,7 +34,7 @@
34
34
  }
35
35
  ],
36
36
  "dependencies": {
37
- "@faststore/components": "^2.1.16",
37
+ "@faststore/components": "^2.1.18",
38
38
  "include-media": "^1.4.10",
39
39
  "modern-normalize": "^1.1.0",
40
40
  "react-swipeable": "^7.0.0",
@@ -58,5 +58,5 @@
58
58
  "node": "16.18.0",
59
59
  "yarn": "1.19.1"
60
60
  },
61
- "gitHead": "a1b180b75407f3e4064b4637e8595e8aab130a2e"
61
+ "gitHead": "35d8b4198e73984acf586c0d3d213486bfbf4aea"
62
62
  }
package/src/components/atoms/List/styles.scss CHANGED
@@ -11,7 +11,6 @@
11
11
  // Structural Styles
12
12
  // --------------------------------------------------------
13
13
 
14
- margin: 0;
15
14
  padding: 0;
16
15
 
17
16
  &[data-fs-list-marker="true"] {
package/src/components/molecules/Breadcrumb/styles.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  // --------------------------------------------------------
5
5
 
6
6
  // Default properties
7
- --fs-breadcrumb-margin-left : calc(-1 * var(--fs-spacing-1));
7
+ --fs-breadcrumb-margin-left : var(--fs-spacing-0);
8
8
  --fs-breadcrumb-padding : var(--fs-spacing-2) 0;
9
9
 
10
10
  // List item
@@ -42,15 +42,13 @@
42
42
  width: 100%;
43
43
  padding: var(--fs-breadcrumb-padding);
44
44
 
45
- @include media(">=notebook") {
46
- width: 50%;
47
- }
48
-
49
45
  [data-fs-breadcrumb-list] {
50
46
  display: flex;
51
47
  align-items: center;
52
- margin-left: var(--fs-breadcrumb-margin-left);
53
48
  overflow-x: hidden;
49
+ @include media("<notebook") {
50
+ margin-left: var(--fs-breadcrumb-margin-left);
51
+ }
54
52
  }
55
53
 
56
54
  [data-fs-breadcrumb-list-item] {
package/src/components/molecules/Carousel/styles.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  // Track
7
7
  --fs-carousel-padding-mobile : 0 var(--fs-grid-padding);
8
- --fs-carousel-padding-desktop : 0 calc((100vw - 1230px)/2) var(--fs-spacing-0);
8
+ --fs-carousel-padding-desktop : 0 calc((100% - var(--fs-grid-max-width))/2) var(--fs-spacing-0);
9
9
 
10
10
  // Item
11
11
  --fs-carousel-item-width-mobile : 60%;
package/src/components/molecules/NavbarLinks/styles.scss CHANGED
@@ -34,8 +34,8 @@
34
34
 
35
35
  @include media("<notebook") { padding: 0; }
36
36
 
37
- @include media(">=notebook") {
38
- > div {
37
+ [data-fs-navbar-links-wrapper] {
38
+ @include media(">=notebook") {
39
39
  display: flex;
40
40
  align-items: center;
41
41
  }
package/src/components/molecules/ProductCard/styles.scss CHANGED
@@ -113,6 +113,8 @@
113
113
  text-decoration: none;
114
114
  outline: none;
115
115
 
116
+ > span { @include truncate-title(1); }
117
+
116
118
  &::after {
117
119
  position: absolute;
118
120
  top: 0;
@@ -189,6 +191,9 @@
189
191
  [data-fs-product-card-content] {
190
192
  padding-left: var(--fs-product-card-wide-content-padding);
191
193
  padding-right: var(--fs-product-card-wide-content-padding);
194
+
195
+ [data-fs-link] > span { @include truncate-title(2); }
196
+
192
197
  @include media(">=notebook") {
193
198
  flex-direction: row;
194
199
  justify-content: space-between;
package/src/components/organisms/Banner/styles.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  // Default properties
7
7
  --fs-banner-padding-mobile : var(--fs-spacing-6) 5%;
8
- --fs-banner-padding-desktop : var(--fs-spacing-9) 15%;
8
+ --fs-banner-padding-desktop : var(--fs-spacing-9) 10%;
9
9
 
10
10
  // Button Link
11
11
  --fs-banner-button-link-min-width : 11.25rem;
@@ -42,19 +42,18 @@
42
42
  // --------------------------------------------------------
43
43
 
44
44
  height: 100%;
45
- padding: var(--fs-banner-padding-mobile);
46
45
  text-align: center;
47
46
 
48
- @include media(">=notebook") {
49
- padding: var(--fs-banner-padding-desktop);
50
- }
51
-
52
47
  [data-fs-banner-content] {
53
48
  display: flex;
54
49
  flex-direction: column;
55
50
  align-items: center;
56
51
  justify-content: center;
57
52
  height: 100%;
53
+ padding: var(--fs-banner-padding-mobile);
54
+ @include media(">=notebook") {
55
+ padding: var(--fs-banner-padding-desktop);
56
+ }
58
57
  }
59
58
 
60
59
  [data-fs-banner-link] {
package/src/components/organisms/Footer/styles.scss CHANGED
@@ -104,7 +104,7 @@
104
104
 
105
105
  @include media(">=notebook") {
106
106
  row-gap: var(--fs-footer-spacing-vertical-notebook);
107
- padding-top: 0;
107
+ padding-bottom: var(--fs-footer-spacing-vertical-notebook);
108
108
  }
109
109
  }
110
110
 
package/src/components/organisms/Navbar/styles.scss CHANGED
@@ -203,7 +203,7 @@
203
203
 
204
204
  [data-fs-logo] {
205
205
  width: var(--fs-navbar-logo-width);
206
-
206
+
207
207
  @include media(">=notebook") {
208
208
  padding: var(--fs-spacing-2) 0;
209
209
  }
package/src/components/organisms/Newsletter/styles.scss CHANGED
@@ -4,7 +4,8 @@
4
4
  // --------------------------------------------------------
5
5
 
6
6
  // Default properties
7
- --fs-newsletter-padding : var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1);
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);
8
9
  --fs-newsletter-bkg : var(--fs-color-primary-bkg);
9
10
  --fs-newsletter-text-color : var(--fs-color-text-inverse);
10
11
 
@@ -23,11 +24,16 @@
23
24
  flex-direction: column;
24
25
  align-items: center;
25
26
  width: 100%;
26
- padding: var(--fs-newsletter-padding);
27
+ padding: var(--fs-newsletter-padding-mobile);
27
28
  color: var(--fs-newsletter-text-color);
28
29
  background-color: var(--fs-newsletter-bkg);
29
30
 
31
+ @include media(">=notebook") {
32
+ padding: var(--fs-newsletter-padding-desktop);
33
+ }
34
+
30
35
  [data-fs-newsletter-form] {
36
+
31
37
  @include media(">=notebook") {
32
38
  display: grid;
33
39
  grid-template-columns: repeat(2, 1fr);
package/src/components/organisms/ProductGallery/styles.scss CHANGED
@@ -5,13 +5,7 @@
5
5
  padding-top: 0;
6
6
 
7
7
  [data-fs-empty-state] {
8
- margin: var(--fs-spacing-3) 0;
9
- }
10
-
11
- @include media(">=notebook") {
12
- [data-fs-empty-state] {
13
- margin: 0 0 var(--fs-spacing-5);
14
- }
8
+ margin-bottom: var(--fs-spacing-5);
15
9
  }
16
10
 
17
11
  [data-fs-product-listing-search-term] {
@@ -34,8 +28,12 @@
34
28
  display: flex;
35
29
  flex-direction: column;
36
30
  height: 100%;
37
- padding-right: 0;
38
- padding-left: 0;
31
+ width: 100%;
32
+
33
+ @include media("<notebook") {
34
+ padding-right: 0;
35
+ padding-left: 0;
36
+ }
39
37
 
40
38
  @include media(">=notebook") {
41
39
  display: grid;
@@ -43,8 +41,6 @@
43
41
  grid-template-columns: repeat(12, 1fr);
44
42
  row-gap: var(--fs-spacing-0);
45
43
  column-gap: var(--fs-spacing-4);
46
- padding-right: var(--fs-grid-padding);
47
- padding-left: var(--fs-grid-padding);
48
44
  }
49
45
  }
50
46
 
@@ -65,8 +61,7 @@
65
61
  order: 1;
66
62
  width: 100%;
67
63
  min-height: rem(68px);
68
- padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
69
- background-color: var(--fs-color-body-bkg);
64
+ padding: 0 var(--fs-grid-padding);
70
65
 
71
66
  [data-fs-product-listing-sort-skeleton] {
72
67
  min-width: rem(225px);
@@ -97,7 +92,10 @@
97
92
  order: 2;
98
93
  min-height: rem(45px);
99
94
  padding: var(--fs-spacing-2) var(--fs-spacing-3);
100
- background-color: var(--fs-color-neutral-bkg);
95
+
96
+ @include media("<notebook") {
97
+ background-color: var(--fs-color-neutral-bkg);
98
+ }
101
99
 
102
100
  @include media(">=notebook") {
103
101
  grid-column: 4 /span 2;
@@ -117,8 +115,11 @@
117
115
  --padding: var(--fs-spacing-1);
118
116
 
119
117
  order: 3;
120
- padding: var(--padding) var(--padding) 0;
121
- background-color: var(--fs-color-neutral-bkg);
118
+ padding: 0 var(--padding);
119
+
120
+ @include media("<notebook") {
121
+ background-color: var(--fs-color-neutral-bkg);
122
+ }
122
123
 
123
124
  @include media(">=notebook") {
124
125
  grid-column: 4 / span 9;
package/src/components/organisms/ProductGrid/styles.scss CHANGED
@@ -31,6 +31,8 @@
31
31
  }
32
32
  }
33
33
 
34
+ @include media("<notebook") { padding-bottom: var(--fs-grid-gap-2); }
35
+
34
36
  @include media(">=notebook") {
35
37
  grid-gap: var(--fs-product-grid-gap-desktop);
36
38
  }
package/src/components/organisms/Tiles/Tiles.tsx CHANGED
@@ -54,6 +54,7 @@ const Tiles = forwardRef<HTMLUListElement, TilesProps>(function Tiles(
54
54
  role="list"
55
55
  data-fs-tiles
56
56
  data-fs-tiles-variant={expandedClass}
57
+ data-fs-content="tiles"
57
58
  data-testid={testId}
58
59
  {...otherProps}
59
60
  >
package/src/styles/base/layout.scss CHANGED
@@ -14,12 +14,6 @@ main {
14
14
  flex-direction: column;
15
15
  }
16
16
 
17
- .layout__main {
18
- display: flex;
19
- flex-wrap: wrap;
20
- background: var(--fs-body-bkg);
21
- }
22
-
23
17
  .layout__section {
24
18
  margin-bottom: var(--fs-spacing-4);
25
19
  margin-top: var(--fs-spacing-4);
@@ -30,27 +24,17 @@ main {
30
24
  }
31
25
  }
32
26
 
33
- .layout__content-full {
34
- width: 100%;
35
- padding-top: var(--fs-spacing-4);
36
- padding-bottom: var(--fs-spacing-4);
37
-
38
- @include media(">=notebook") {
39
- padding-top: var(--fs-grid-padding);
40
- padding-bottom: var(--fs-grid-padding);
41
- }
42
- }
43
-
44
27
  .layout__content {
45
28
  box-sizing: border-box;
46
29
  width: 100%;
30
+ width: calc(100% - var(--fs-grid-padding) - var(--fs-grid-padding));
47
31
  max-width: var(--fs-grid-max-width);
48
- padding-right: var(--fs-grid-padding);
49
- padding-left: var(--fs-grid-padding);
50
32
  margin-right: auto;
51
33
  margin-left: auto;
52
34
  }
53
35
 
36
+ [data-fs-content] { @include layout-content; }
37
+
54
38
  .no-scroll {
55
39
  overflow: hidden;
56
40
  touch-action: none;
@@ -78,13 +62,3 @@ main {
78
62
  height: 100%;
79
63
  object-fit: cover;
80
64
  }
81
-
82
- ////////////////////
83
- // Pages
84
- ////////////////////
85
-
86
- // Homepage
87
- .section-newsletter {
88
- padding-top: var(--fs-grid-padding);
89
- padding-bottom: 0;
90
- }
package/src/styles/base/tokens.scss CHANGED
@@ -17,11 +17,11 @@ body {
17
17
  --fs-color-main-3 : #002c71;
18
18
  --fs-color-main-4 : #002155;
19
19
 
20
- --fs-color-accent-0 : #e3e6e8;
21
- --fs-color-accent-1 : #e3e6e8;
22
- --fs-color-accent-2 : #74808b;
23
- --fs-color-accent-3 : #5d666f;
24
- --fs-color-accent-4 : #171a1c;
20
+ --fs-color-accent-0 : #efeaf5;
21
+ --fs-color-accent-1 : #d3c9de;
22
+ --fs-color-accent-2 : #9d8abf;
23
+ --fs-color-accent-3 : #74678c;
24
+ --fs-color-accent-4 : #423759;
25
25
 
26
26
  --fs-color-neutral-0 : #ffffff;
27
27
  --fs-color-neutral-1 : #f1f2f3;
@@ -205,7 +205,7 @@ body {
205
205
  --fs-z-index-highest : 3;
206
206
 
207
207
  // CONTAINER
208
- --fs-grid-max-width : var(--fs-grid-breakpoint-notebook);
208
+ --fs-grid-max-width : calc(var(--fs-grid-breakpoint-notebook) - var(--fs-grid-padding) - var(--fs-grid-padding));
209
209
 
210
210
  // GAPS
211
211
  --fs-grid-gap-0 : var(--fs-spacing-1);
package/src/styles/base/utilities.scss CHANGED
@@ -23,6 +23,42 @@ $base: 16px !default;
23
23
  @return #{$rem}rem;
24
24
  }
25
25
 
26
+
27
+ @mixin layout-content {
28
+ box-sizing: border-box;
29
+ width: calc(100% - var(--fs-grid-padding) - var(--fs-grid-padding));
30
+ max-width: var(--fs-grid-max-width);
31
+ margin-right: auto;
32
+ margin-left: auto;
33
+ }
34
+
35
+ @mixin layout-content-full {
36
+ width: 100%;
37
+ max-width: 100%;
38
+ }
39
+
40
+ @mixin layout-colored($bkg-color: var(--fs-color-neutral-bkg), $padding-top: var(--fs-spacing-5), $padding-bottom: var(--fs-spacing-7)) {
41
+ padding-top: $padding-top;
42
+ padding-bottom: $padding-bottom;
43
+ background-color: $bkg-color;
44
+ }
45
+
46
+ @mixin section-divisor($position: "top", $padding: #{var(--fs-grid-padding)}) {
47
+ @if $position == "top" {
48
+ padding-top: $padding;
49
+ border-top: var(--fs-border-width) solid var(--fs-border-color-light);
50
+
51
+ @include media(">=notebook") { padding-top: $padding; }
52
+ }
53
+
54
+ @if $position == "bottom" {
55
+ padding-bottom: $padding;
56
+ border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
57
+
58
+ @include media(">=notebook") { padding-bottom: $padding; }
59
+ }
60
+ }
61
+
26
62
  @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
27
63
  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
28
64
  @supports (-webkit-appearance:none) { // Use `focus` instead of `focus-visible`
@@ -72,4 +108,5 @@ $base: 16px !default;
72
108
  line-clamp: $max-lines;
73
109
  text-overflow: -o-ellipsis-lastline;
74
110
  text-overflow: ellipsis;
111
+ white-space: normal;
75
112
  }