mod-base 1.0.5-beta.2 → 1.0.5-beta.3
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 +1 -1
- package/src/styles/base/_ratings.scss +0 -215
package/package.json
CHANGED
|
@@ -207,218 +207,3 @@ a {
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* External ratings
|
|
213
|
-
*/
|
|
214
|
-
.ext-rating-icon {
|
|
215
|
-
@include font-primary-bold;
|
|
216
|
-
border: 1px solid $color-charcoal1;
|
|
217
|
-
border-radius: 16px;
|
|
218
|
-
color: $color-charcoal5;
|
|
219
|
-
display: inline-block;
|
|
220
|
-
font-size: 1.0625rem;
|
|
221
|
-
line-height: 20px;
|
|
222
|
-
padding: 5px 10px;
|
|
223
|
-
transition: border-color $trans-time $trans-func;
|
|
224
|
-
|
|
225
|
-
&--google,
|
|
226
|
-
&--bbb,
|
|
227
|
-
&--trustpilot {
|
|
228
|
-
background-position: 10px 50%;
|
|
229
|
-
background-repeat: no-repeat;
|
|
230
|
-
padding-left: 30px;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
&--google {
|
|
234
|
-
background-image: url('#{$rating-icons-folder}/google.svg');
|
|
235
|
-
background-size: 14px 14px;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
&--bbb {
|
|
239
|
-
background-image: url('#{$rating-icons-folder}/bbb.svg');
|
|
240
|
-
background-position: 8px 50%;
|
|
241
|
-
background-size: 22px 22px;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
&--trustpilot {
|
|
245
|
-
background-image: url('#{$rating-icons-folder}/trustpilot.svg');
|
|
246
|
-
background-position: 8px 50%;
|
|
247
|
-
background-size: 20px 20px;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
@include breakpoint-phone {
|
|
252
|
-
.ext-rating-icon {
|
|
253
|
-
&--trustpilot {
|
|
254
|
-
background-size: 14px 14px;
|
|
255
|
-
padding-left: 26px;
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
a {
|
|
261
|
-
&.ext-rating-icon {
|
|
262
|
-
&:focus,
|
|
263
|
-
&:hover,
|
|
264
|
-
&:active {
|
|
265
|
-
border-color: $color-charcoal2;
|
|
266
|
-
color: $color-charcoal5;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
/**
|
|
272
|
-
* Ratings set
|
|
273
|
-
*/
|
|
274
|
-
.ratings-set {
|
|
275
|
-
margin: 0 0 15px;
|
|
276
|
-
|
|
277
|
-
&__group {
|
|
278
|
-
font-size: 0;
|
|
279
|
-
|
|
280
|
-
& + & {
|
|
281
|
-
margin-top: 10px;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.ext-rating-icon {
|
|
285
|
-
+ .ext-rating-icon {
|
|
286
|
-
margin-left: 9px;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
/**
|
|
293
|
-
* Large rating icons
|
|
294
|
-
*/
|
|
295
|
-
@mixin large-rating-icon-vertical-layout {
|
|
296
|
-
font-size: 1.25rem;
|
|
297
|
-
height: 65px;
|
|
298
|
-
line-height: 20px;
|
|
299
|
-
min-width: 40px;
|
|
300
|
-
padding: 45px 0 0;
|
|
301
|
-
text-align: center;
|
|
302
|
-
white-space: nowrap;
|
|
303
|
-
|
|
304
|
-
&::before {
|
|
305
|
-
left: 50%;
|
|
306
|
-
margin-left: -20px;
|
|
307
|
-
top: 0;
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.large-rating-icon {
|
|
312
|
-
@include font-primary-bold;
|
|
313
|
-
color: $color-charcoal5;
|
|
314
|
-
display: inline-block;
|
|
315
|
-
font-size: 1.75rem;
|
|
316
|
-
height: 40px;
|
|
317
|
-
line-height: 40px;
|
|
318
|
-
padding-left: 45px;
|
|
319
|
-
position: relative;
|
|
320
|
-
|
|
321
|
-
&::before {
|
|
322
|
-
@include icon-fill;
|
|
323
|
-
color: $color-yellow5;
|
|
324
|
-
content: '\e907';
|
|
325
|
-
font-size: 2.5rem;
|
|
326
|
-
height: 40px;
|
|
327
|
-
left: 0;
|
|
328
|
-
line-height: 40px;
|
|
329
|
-
position: absolute;
|
|
330
|
-
top: 0;
|
|
331
|
-
width: 40px;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
&::after {
|
|
335
|
-
@include font-primary-regular;
|
|
336
|
-
color: $color-charcoal4;
|
|
337
|
-
content: '/ 5';
|
|
338
|
-
display: inline-block;
|
|
339
|
-
font-size: .9375rem;
|
|
340
|
-
vertical-align: middle;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
&--empty-star {
|
|
344
|
-
color: $color-charcoal1;
|
|
345
|
-
|
|
346
|
-
&::before {
|
|
347
|
-
@include icon-stroke;
|
|
348
|
-
color: $color-ivory5;
|
|
349
|
-
content: '\e908';
|
|
350
|
-
font-size: 2.5rem;
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
&--google {
|
|
355
|
-
&::before {
|
|
356
|
-
background-image: url('#{$rating-icons-folder}/google.svg');
|
|
357
|
-
background-position: center center;
|
|
358
|
-
background-repeat: no-repeat;
|
|
359
|
-
background-size: 28px 28px;
|
|
360
|
-
content: '';
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
&--trustpilot {
|
|
365
|
-
&::before {
|
|
366
|
-
background-image: url('#{$rating-icons-folder}/trustpilot.svg');
|
|
367
|
-
background-position: center center;
|
|
368
|
-
background-repeat: no-repeat;
|
|
369
|
-
background-size: 28px 28px;
|
|
370
|
-
content: '';
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
&--bbb {
|
|
375
|
-
&::before {
|
|
376
|
-
background-image: url('#{$rating-icons-folder}/bbb.svg');
|
|
377
|
-
background-position: center center;
|
|
378
|
-
background-repeat: no-repeat;
|
|
379
|
-
background-size: 38px 38px;
|
|
380
|
-
content: '';
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
&::after {
|
|
384
|
-
display: none;
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
@include breakpoint-phone {
|
|
390
|
-
.large-rating-icon {
|
|
391
|
-
@include large-rating-icon-vertical-layout;
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
/**
|
|
396
|
-
* Large rating icons set
|
|
397
|
-
*/
|
|
398
|
-
.large-rating-icon-set {
|
|
399
|
-
display: flex;
|
|
400
|
-
flex-wrap: wrap;
|
|
401
|
-
|
|
402
|
-
&__item {
|
|
403
|
-
flex: 1;
|
|
404
|
-
max-width: 165px;
|
|
405
|
-
min-width: 130px;
|
|
406
|
-
padding: 20px 0;
|
|
407
|
-
|
|
408
|
-
&--large {
|
|
409
|
-
max-width: 100%;
|
|
410
|
-
min-width: 300px;
|
|
411
|
-
padding: 0;
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
@include breakpoint-phone {
|
|
417
|
-
.large-rating-icon-set {
|
|
418
|
-
&__item {
|
|
419
|
-
&:not(.large-rating-icon-set__item--large) {
|
|
420
|
-
min-width: 70px;
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
}
|