@shift72/core-template 0.5.1 → 1.0.0-alpha.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. package/.github/pull_request_template.md +47 -0
  2. package/.github/workflows/node.js.yml +1 -1
  3. package/.nvmrc +1 -0
  4. package/CHANGELOG.md +65 -10
  5. package/kibble.json +4 -4
  6. package/package.json +1 -2
  7. package/scripts/translate.mjs +30 -22
  8. package/site/ar_LB.all.json +99 -23
  9. package/site/ca_ES.all.json +91 -23
  10. package/site/da_DK.all.json +90 -22
  11. package/site/de_DE.all.json +90 -22
  12. package/site/el_EL.all.json +90 -22
  13. package/site/en_AU.all.json +87 -19
  14. package/site/es_ES.all.json +92 -24
  15. package/site/es_MX.all.json +89 -21
  16. package/site/{ee_EE.all.json → et_ET.all.json} +90 -22
  17. package/site/fi_FI.all.json +93 -25
  18. package/site/fr_FR.all.json +91 -23
  19. package/site/hr_HR.all.json +93 -23
  20. package/site/hu_HU.all.json +91 -23
  21. package/site/it_IT.all.json +91 -23
  22. package/site/ja_JP.all.json +88 -22
  23. package/site/lt_LT.all.json +94 -22
  24. package/site/nl_BE.all.json +90 -22
  25. package/site/no_NO.all.json +91 -23
  26. package/site/pl_PL.all.json +95 -23
  27. package/site/plans.html.jet +17 -17
  28. package/site/pt_BR.all.json +91 -23
  29. package/site/pt_PT.all.json +91 -23
  30. package/site/ru_RU.all.json +103 -31
  31. package/site/sr_SR.all.json +95 -25
  32. package/site/static/fonts/fa-s72.woff +0 -0
  33. package/site/static/js/main.js +2 -1
  34. package/site/static/scripts/main.js.map +1 -1
  35. package/site/styles/_availability-tags.scss +63 -31
  36. package/site/styles/_awards.scss +4 -3
  37. package/site/styles/_buttons.scss +46 -29
  38. package/site/styles/_can-be-watched-button.scss +0 -20
  39. package/site/styles/_carousel.scss +126 -311
  40. package/site/styles/_collections.scss +6 -11
  41. package/site/styles/_cta-buttons.scss +262 -0
  42. package/site/styles/_forms.scss +6 -2
  43. package/site/styles/_icons.scss +182 -9
  44. package/site/styles/_legacy.scss +1 -50
  45. package/site/styles/_meta-detail.scss +80 -229
  46. package/site/styles/_meta-item-tagline.scss +33 -0
  47. package/site/styles/_meta-item.scss +0 -4
  48. package/site/styles/_meta-sub-item.scss +116 -0
  49. package/site/styles/_mixins.scss +45 -0
  50. package/site/styles/_nav.scss +6 -5
  51. package/site/styles/_pages.scss +4 -13
  52. package/site/styles/_plans.scss +24 -17
  53. package/site/styles/_poster.scss +3 -9
  54. package/site/styles/_share-modal.scss +86 -0
  55. package/site/styles/_shift72.scss +11 -0
  56. package/site/styles/_shopping.scss +0 -1
  57. package/site/styles/_skip-link.scss +1 -1
  58. package/site/styles/_tooltips.scss +7 -0
  59. package/site/styles/_variables.scss +11 -12
  60. package/site/styles/_wishlist.scss +2 -2
  61. package/site/styles/main.scss +5 -3
  62. package/site/subscriptions.html.jet +11 -0
  63. package/site/templates/application/application.jet +2 -2
  64. package/site/templates/application/google.jet +8 -13
  65. package/site/templates/application/nav/user_logged_in.jet +7 -2
  66. package/site/templates/bundle/item.jet +2 -4
  67. package/site/templates/collection/carousel/carousel.jet +27 -0
  68. package/site/templates/collection/carousel/item/image.jet +5 -0
  69. package/site/templates/collection/carousel/item/synopsis.jet +5 -0
  70. package/site/templates/collection/carousel/item/tagline.jet +7 -0
  71. package/site/templates/collection/carousel/item/title.jet +3 -0
  72. package/site/templates/collection/carousel/item.jet +41 -0
  73. package/site/templates/collection/carousel/pagination.jet +9 -0
  74. package/site/templates/collection/page_collection.jet +2 -2
  75. package/site/templates/common/cta_buttons.jet +70 -0
  76. package/site/templates/common/social-media-buttons.jet +2 -38
  77. package/site/templates/common/sponsor-image.jet +18 -0
  78. package/site/templates/film/item.jet +98 -102
  79. package/site/templates/items/sub_item.jet +22 -0
  80. package/site/templates/items/tagline.jet +2 -2
  81. package/site/templates/page/homepage.jet +2 -3
  82. package/site/templates/tv/detail.jet +39 -38
  83. package/site/tr_TR.all.json +90 -22
  84. package/site/uk_UA.all.json +95 -23
  85. package/site/zh_TW.all.json +88 -22
  86. package/site/static/fonts/FontAwesome.otf +0 -0
  87. package/site/static/fonts/fontawesome-webfont.eot +0 -0
  88. package/site/static/fonts/fontawesome-webfont.svg +0 -565
  89. package/site/static/fonts/fontawesome-webfont.ttf +0 -0
  90. package/site/static/fonts/fontawesome-webfont.woff +0 -0
  91. package/site/static/fonts/fontawesome-webfont.woff2 +0 -0
  92. package/site/styles/_homepage.scss +0 -3
  93. package/site/styles/_social-media-buttons.scss +0 -159
  94. package/site/templates/bundle/buttons.jet +0 -6
  95. package/site/templates/bundle/extras.jet +0 -13
  96. package/site/templates/collection/carousel.jet +0 -27
  97. package/site/templates/collection/carousel_item.jet +0 -66
  98. package/site/templates/items/bonus_item.jet +0 -23
  99. package/site/templates/items/featured_item.jet +0 -61
  100. package/site/templates/tv/episode.jet +0 -21
@@ -108,40 +108,39 @@
108
108
  }
109
109
  }
110
110
 
111
- .s72-btn-play.s72-btn-trailer {
111
+ .s72-btn-trailer .s72-btn-play {
112
112
  background: transparent;
113
113
  border: 0 none;
114
+
114
115
  @include hover-focus {
115
116
  background: transparent;
116
117
 
117
- .s72-icon-play circle {
118
+ circle {
118
119
  fill: var(--primary);
119
120
  stroke: var(--primary);
120
121
  stroke-width: 3px;
121
122
  }
122
123
 
123
- .s72-icon-play path {
124
+ path {
124
125
  fill: #000;
125
126
  stroke: #000;
126
127
  }
127
128
  }
128
129
 
129
- &.s72-btn-trailer {
130
+ .verb {
130
131
  background: transparent;
131
- border: 0 none;
132
-
133
- @include media-breakpoint-up(md) {
134
- margin-right: 10px;
135
- }
132
+ color: var(--primary);
133
+ }
136
134
 
137
- .verb {
138
- background: transparent;
139
- color:var(--primary);
140
- }
135
+ circle {
136
+ fill: transparent;
137
+ stroke: var(--primary);
138
+ stroke-width: 3px;
141
139
  }
142
140
 
143
- .verb {
144
- color: $trailer-button-text-color;
141
+ path {
142
+ fill: var(--body-color);
143
+ stroke: var(--body-color);
145
144
  }
146
145
 
147
146
  .s72-btn-play-icon {
@@ -149,17 +148,6 @@
149
148
  height: 32px;
150
149
  margin-right: 0;
151
150
  width: 32px;
152
-
153
- circle {
154
- fill: transparent;
155
- stroke: var(--primary);
156
- stroke-width: 3px;
157
- }
158
-
159
- path {
160
- fill: var(--body-color);
161
- stroke: var(--body-color);
162
- }
163
151
  }
164
152
 
165
153
  .s72-btn-play-label {
@@ -181,7 +169,8 @@
181
169
  }
182
170
 
183
171
  .s72-btn-rent,
184
- .s72-btn-purchase {
172
+ .s72-btn-purchase,
173
+ .s72-btn-subscribe {
185
174
  background: $button-background;
186
175
  border: 3px solid $button-background;
187
176
  min-width: 140px;
@@ -200,6 +189,15 @@
200
189
  }
201
190
  }
202
191
 
192
+ .s72-btn.s72-btn-unsubscribe,
193
+ .s72-btn.s72-btn-updatecreditcard {
194
+ @extend .btn-secondary;
195
+ }
196
+
197
+ .s72-btn.s72-btn-explore-subs {
198
+ @extend .btn-primary;
199
+ }
200
+
203
201
  .btn-wishlist {
204
202
  p {
205
203
  margin: 0;
@@ -246,7 +244,10 @@
246
244
  }
247
245
 
248
246
  s72-donate-button:not(:empty) {
249
- &:hover a {
247
+ :hover {
248
+ background-color: $button-background-hover;
249
+ }
250
+ &:hover a {
250
251
  background-color: $button-background-hover;
251
252
  color: $button-text-color-hover;
252
253
  /* stylelint-disable selector-max-compound-selectors */
@@ -258,8 +259,8 @@ s72-donate-button:not(:empty) {
258
259
  /* stylelint-enable selector-max-compound-selectors */
259
260
  }
260
261
  a {
261
- color: $button-text-color;
262
262
  background-color: $button-background;
263
+ color: $button-text-color;
263
264
  }
264
265
  svg {
265
266
  g {
@@ -267,3 +268,19 @@ s72-donate-button:not(:empty) {
267
268
  }
268
269
  }
269
270
  }
271
+
272
+ // sitewide we changed primary btn text to black, but these btns had no bg color, rendering text invisible
273
+ .s72-btn-show-saved-cards,
274
+ .s72-btn-submit-pin,
275
+ .s72-btn-reset-pin {
276
+ color: var(--link-color) !important;
277
+ }
278
+
279
+ // Empty relish components sometimes have structural CSS so hide them.
280
+ s72-play-button,
281
+ can-be-watched-button,
282
+ s72-userwishlist-button {
283
+ &:empty {
284
+ display: none;
285
+ }
286
+ }
@@ -22,26 +22,6 @@
22
22
  }
23
23
  }
24
24
 
25
- .meta-detail-content .meta-detail-buttons,
26
- .meta-item-buttons {
27
- align-items: center;
28
- display: flex;
29
- flex-direction: row;
30
- flex-wrap: wrap;
31
-
32
- .owned-custom-container {
33
- display: none;
34
-
35
- &.s72-show {
36
- display: block;
37
- }
38
- }
39
-
40
- .s72-btn-play {
41
- margin-right: 8px;
42
- }
43
- }
44
-
45
25
  /* stylelint-disable selector-max-compound-selectors */
46
26
  .s72-userwishlist-items .partial > a,
47
27
  .s72-userlibrary-items .partial > a,
@@ -1,71 +1,47 @@
1
- .carousel,
2
1
  s72-carousel {
3
- display: block;
4
- margin: 0 auto;
5
- position: relative;
6
- }
7
-
8
- .s72-carousel-slides {
9
- background: $carousel-bg-color;
10
- height: var(--carousel-height) !important;
11
- position: relative;
2
+ display: flex;
3
+ height: var(--carousel-height);
4
+ margin-bottom: 30px;
12
5
  width: 100%;
6
+
13
7
  @include media-breakpoint-up(sm) {
14
- height: var(--carousel-height-sm) !important;
15
- }
16
- @include media-breakpoint-up(md) {
17
- height: var(--carousel-height-md) !important;
8
+ height: var(--carousel-height-sm);
18
9
  }
19
10
 
20
- s72-image {
21
- float: right;
22
- height: var(--carousel-height);
23
- max-width: 1600px;
24
- overflow: hidden;
25
- position: relative;
26
- width: 100%;
27
- @include media-breakpoint-up(sm) {
28
- height: var(--carousel-height-sm);
29
- }
30
- @include media-breakpoint-up(md) {
31
- height: var(--carousel-height-md);
32
- }
11
+ @include media-breakpoint-up(lg) {
12
+ height: var(--carousel-height-lg);
13
+ }
14
+ }
33
15
 
34
- &::before {
35
- @extend .left-gradient-bg;
36
- bottom: 0;
37
- content: '';
38
- height: 100%;
39
- left: 0;
40
- position: absolute;
41
- top: 0;
42
- width: 60%;
43
- z-index: 8;
44
- @include media-breakpoint-up(lg) {
45
- width: 100%;
46
- }
47
- @include media-breakpoint-up(xl) {
48
- display: block;
49
- }
50
- }
16
+ .page-collection-carousel {
17
+ display: flex;
18
+ flex-direction: column;
19
+ width: 100%;
20
+ }
51
21
 
52
- img {
53
- height: var(--carousel-height);
54
- margin-left: 50%;
55
- transform: translateX(-50%);
22
+ .s72-carousel-slides {
23
+ background: $carousel-bg-color;
24
+ height: 100% !important;
25
+ margin-bottom: 10px;
26
+ overflow: hidden;
27
+ width: 100%;
56
28
 
57
- @include media-breakpoint-up(sm) {
58
- height: var(--carousel-height-sm);
59
- }
60
- @include media-breakpoint-up(md) {
61
- height: var(--carousel-height-md);
62
- width: auto;
63
- }
64
- }
29
+ @include media-breakpoint-up(sm) {
30
+ margin-bottom: 40px;
65
31
  }
32
+ }
33
+
34
+ .carousel-item-link > s72-image {
35
+ height: 100%;
36
+ position: absolute;
37
+ top: 0;
38
+ width: 100%;
66
39
 
67
- .s72-pricing-button-container {
68
- white-space: nowrap;
40
+ img {
41
+ height: 100%;
42
+ object-fit: cover;
43
+ width: 100%;
44
+ z-index: -1;
69
45
  }
70
46
  }
71
47
 
@@ -77,9 +53,6 @@ s72-carousel {
77
53
  transition: opacity 0.7s linear;
78
54
  width: 100%;
79
55
  z-index: 1;
80
- @include media-breakpoint-up(lg) {
81
- position: absolute;
82
- }
83
56
 
84
57
  &.in {
85
58
  display: block;
@@ -97,301 +70,143 @@ s72-carousel {
97
70
 
98
71
  .carousel-item-link {
99
72
  display: block;
100
- height: 500px;
73
+ height: 100%;
74
+
75
+ &:focus-visible {
76
+ outline: none;
77
+
78
+ .meta-item-content {
79
+ border-radius: 4px;
80
+ outline: 1px solid var(--body-color);
81
+ }
82
+ }
101
83
  }
102
84
  }
103
85
 
104
86
  .carousel-item-caption {
87
+ @extend .carousel-bottom-gradient;
88
+ bottom: 0;
89
+ display: flex;
90
+ flex-direction: column;
105
91
  left: 0;
106
- padding: 0 20px;
92
+ padding: var(--carousel-bottom-gradient-height) 20px 1px;
107
93
  position: absolute;
108
- top: var(--carousel-caption-top);
94
+ width: 100%;
109
95
  z-index: 999;
110
- @include media-breakpoint-up(xs) {
111
- left: 60px;
112
- top: var(--carousel-caption-top-xs);
113
- width: 70%;
114
- }
115
- @include media-breakpoint-up(md) {
116
- left: 60px;
117
- top: var(--carousel-caption-top-md);
118
- width: 70%;
119
- }
96
+
120
97
  @include media-breakpoint-up(lg) {
121
- left: 70px;
122
- top: var(--carousel-caption-top-md);
123
- width: 70%;
124
- }
125
- @include media-breakpoint-up(xl) {
126
- left: 120px;
127
- top: var(--carousel-caption-top-md);
128
- width: 50%;
129
- }
130
- @include media-breakpoint-up(xxxl) {
131
- top: var(--carousel-caption-top-md);
132
- width: 50%;
98
+ flex-direction: row;
99
+ padding: var(--carousel-bottom-gradient-height) 50px 1px;
133
100
  }
134
101
 
135
- s72-availability-status,
136
- s72-availability-label {
137
- position: relative;
138
-
139
- .availability-bg {
140
- background: transparent;
141
- display: inline-block;
142
- padding: 10px 0;
143
- }
144
-
145
- .availability-state {
146
- color: var(--body-color);
147
- font-size: 12px;
148
- text-transform: none;
102
+ .sponsor {
103
+ @include media-breakpoint-up(lg) {
104
+ align-self: flex-end;
105
+ margin-bottom: 8px;
106
+ margin-left: auto;
107
+ order: 1;
149
108
  }
150
109
  }
151
110
 
152
- .meta-item-content {
153
- color: #fff;
154
-
155
- h3 {
156
- color: var(--body-color);
157
- font-size: 28px;
158
- font-weight: $font-weight-bold;
159
- margin-bottom: 0;
160
- padding-bottom: 0;
161
- @include media-breakpoint-up(md) {
162
- font-size: 38px;
163
- }
164
- @include media-breakpoint-up(lg) {
165
- font-size: 48px;
166
- }
167
- @include media-breakpoint-up(xxxl) {
168
- font-size: 54px;
169
- }
170
- }
171
-
172
- h4 {
173
- background: var(--primary);
174
- color: #000;
175
- display: inline-block;
176
- font-size: 6px;
177
- font-weight: $font-weight-bold;
178
- padding: 2px 4px;
179
- text-transform: uppercase;
180
- @include media-breakpoint-up(md) {
181
- font-size: 12px;
182
- }
183
- }
184
-
185
- .meta-item-tagline-and-classification {
186
- @extend .d-flex;
187
- align-items: center;
188
- padding-bottom: 8px;
189
- padding-top: 8px;
190
- }
191
-
192
- .s72-classification {
193
- margin-right: 5px;
194
- }
195
-
196
- .meta-item-tagline {
197
- color: rgba(var(--body-color-rgb), 0.8);
198
- font-size: 14px;
199
- font-weight: $font-weight-normal;
200
- @include media-breakpoint-up(xxxl) {
201
- font-size: 18px;
202
- }
203
- }
204
-
205
- .meta-item-synopsis {
206
- display: block;
207
- font-size: 12px;
208
- font-weight: $font-weight-normal;
209
- padding-top: 10px;
210
- @include media-breakpoint-up(md) {
211
- font-size: 16px;
212
- }
213
- @include media-breakpoint-up(xxxl) {
214
- font-size: 16px;
215
- }
216
- @include media-breakpoint-up(xxxl) {
217
- font-size: 18px;
218
- }
219
- }
220
-
221
- .meta-item-extras {
222
- @extend .d-flex;
223
- }
224
-
225
- .btn-wishlist {
226
- position: relative;
227
- }
111
+ .availability-bg {
112
+ margin-bottom: 10px;
228
113
  }
229
114
 
230
- // Purchase, play, trailer, wishlist and share are all in one group now
231
- // Need similar bootstrap approach of handling/wrapping rows and columns via negative margin
232
- .meta-item-buttons {
233
- margin-left: -0.5rem;
234
- margin-right: -0.5rem;
235
-
236
- /* stylelint-disable selector-max-compound-selectors */
237
- s72-pricing-buttons .s72-btn,
238
- .meta-detail-extras,
239
- .meta-item-extras,
240
- s72-play-button,
241
- can-be-watched-button:not(:empty) {
242
- margin-bottom: 10px;
243
- margin-left: 0.5rem;
244
- margin-right: 0.5rem;
245
- }
246
-
247
- // Handles spacing when there is only rent, only buy, or only play button
248
- s72-pricing-buttons .s72-btn,
249
- s72-play-button {
250
- &:nth-child(1) {
251
- margin-right: 0;
252
- }
253
- &:only-child {
254
- margin-right: 0.5rem;
255
- }
256
- }
257
- /* stylelint-enable selector-max-compound-selectors */
115
+ .availability-state {
116
+ color: var(--body-color);
117
+ font-size: 12px;
118
+ margin-bottom: 0 !important; // >:(
119
+ text-transform: none;
258
120
  }
259
121
 
260
- .s72-btn-play {
261
- circle {
262
- fill: transparent;
263
- }
122
+ .meta-item-content {
123
+ color: var(--body-color);
264
124
  }
265
- }
266
125
 
267
- .s72-carousel-pagination {
268
- @extend .d-flex;
269
- bottom: 2px;
270
- height: 60px;
271
- left: 50%;
272
- line-height: 60px;
273
- position: absolute;
274
- transform: translateX(-50%);
126
+ h3 {
127
+ color: var(--body-color);
128
+ font-size: 28px;
129
+ font-weight: $font-weight-normal;
130
+ margin-bottom: 8px;
131
+ max-width: 930px;
132
+ padding-bottom: 0;
275
133
 
276
- .s72-carousel-page {
277
- color: rgba(var(--body-color-rgb), 0.2);
278
134
  @include media-breakpoint-up(md) {
279
- margin: 0 5px;
135
+ font-size: 38px;
280
136
  }
281
137
 
282
- &.current {
283
- color: var(--primary);
138
+ @include media-breakpoint-up(lg) {
139
+ font-size: 46px;
284
140
  }
285
141
 
286
- .fa {
287
- @extend .fa-circle;
288
- font-size: 12px;
289
- padding: 0 3px;
290
- @include media-breakpoint-up(md) {
291
- font-size: 14px;
292
- }
142
+ @include media-breakpoint-up(xxxl) {
143
+ font-size: 46px;
293
144
  }
294
145
  }
295
- }
296
146
 
297
- .s72-carousel-control {
298
- @extend .d-flex;
299
- bottom: 0;
300
- flex-direction: column;
301
- height: 60px;
302
- justify-content: center;
303
- line-height: 60px;
304
- position: absolute;
305
- text-align: center;
306
- top: auto;
307
- width: 50px;
308
- z-index: 6;
309
- @include media-breakpoint-down(sm) {
310
- :hover {
311
- color: var(--primary);
312
- }
147
+ h4 {
148
+ background: var(--primary);
149
+ color: #000;
150
+ display: inline-block;
151
+ font-size: 6px;
152
+ font-weight: $font-weight-bold;
153
+ padding: 2px 4px;
154
+ text-transform: uppercase;
313
155
 
314
- :active {
315
- opacity: 0.8;
156
+ @include media-breakpoint-up(md) {
157
+ font-size: 12px;
316
158
  }
317
159
  }
318
- @include media-breakpoint-up(md) {
319
- background: none;
320
- top: 53%;
321
- }
322
160
 
323
- &.left {
324
- left: 0;
325
- right: auto;
161
+ .meta-item-tagline-and-classification {
162
+ display: flex;
163
+ margin-bottom: 8px;
326
164
  }
327
165
 
328
- &.right {
329
- left: auto;
330
- right: 0;
166
+ .meta-item-tagline {
167
+ color: rgba(var(--body-color-rgb), 0.8);
168
+ font-size: 14px;
169
+ font-weight: $font-weight-normal;
331
170
  }
332
171
 
333
- &:hover,
334
- &:active {
335
- text-decoration: none;
336
- }
172
+ .meta-item-synopsis {
173
+ display: none;
174
+ font-size: 16px;
175
+ font-weight: $font-weight-normal;
176
+ margin-bottom: 8px;
177
+ max-width: 600px;
178
+ padding-top: 0;
337
179
 
338
- span {
339
- font-size: 32px;
340
- text-align: center;
341
- width: 100%;
342
- @include media-breakpoint-up(md) {
343
- font-size: inherit;
180
+ @include media-breakpoint-up(xs) {
181
+ display: block;
344
182
  }
345
183
  }
346
- }
347
184
 
348
- .right-gradient {
349
- @extend .right-gradient-bg;
350
- bottom: 0;
351
- display: none;
352
- height: 100%;
353
- position: absolute;
354
- right: 0;
355
- width: 500px;
356
- z-index: 9;
357
- @include media-breakpoint-up(lg) {
358
- display: none;
185
+ .meta-item-synopsis p {
186
+ margin-bottom: 0;
359
187
  }
360
188
  }
361
189
 
362
- .bottom-gradient {
363
- @extend .bottom-gradient-bg;
364
- bottom: 0;
365
- height: 350px;
366
- left: 0;
367
- position: absolute;
368
- width: 100%;
369
- z-index: 8;
370
- @include media-breakpoint-up(lg) {
371
- display: block;
372
- height: 500px;
373
- width: 100%;
374
- }
190
+ .s72-carousel-pagination {
191
+ display: flex;
192
+ justify-content: center;
193
+ padding: 0 16px;
375
194
  }
376
195
 
377
- .left-gradient {
378
- @extend .left-gradient-bg;
379
- bottom: 0;
380
- display: none;
381
- height: 100%;
382
- left: 0;
383
- position: absolute;
384
- top: 0;
385
- width: 60%;
386
- z-index: 8;
387
- @include media-breakpoint-up(md) {
388
- display: block;
389
- }
390
- @include media-breakpoint-up(lg) {
391
- width: 100%;
196
+ .s72-carousel-page {
197
+ background: none;
198
+ border: 0;
199
+ max-width: 60px;
200
+ padding: 10px 4px;
201
+ width: 100%;
202
+
203
+ .s72-carousel-line {
204
+ background-color: rgba(var(--body-color-rgb), 0.2);
205
+ border-radius: 6px;
206
+ height: 6px;
392
207
  }
393
- @include media-breakpoint-up(xl) {
394
- display: none;
395
- width: 100%;
208
+
209
+ &.current .s72-carousel-line {
210
+ background-color: var(--primary);
396
211
  }
397
212
  }
@@ -1,7 +1,3 @@
1
- .page-collection-carousel {
2
- position: relative;
3
- }
4
-
5
1
  .page-collection {
6
2
  @extend .clearfix;
7
3
  }
@@ -176,13 +172,8 @@
176
172
  flex-wrap: wrap;
177
173
  justify-content: center;
178
174
  padding-top: 10px;
179
-
180
- .s72-classification {
181
- margin-right: 5px;
182
-
183
- .s72-classification-label {
184
- font-size: 12px;
185
- }
175
+ .s72-classification-label {
176
+ font-size: 12px;
186
177
  }
187
178
  }
188
179
 
@@ -242,6 +233,10 @@
242
233
  }
243
234
  }
244
235
  }
236
+
237
+ .s72-subscribe-trial-label {
238
+ display: none;
239
+ }
245
240
  }
246
241
 
247
242
  &:hover {