@wizishop/wizi-block 4.2.23-beta → 4.2.26-beta

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 (21) hide show
  1. package/assets/i18n/en.json +1 -1
  2. package/assets/i18n/fr.json +1 -1
  3. package/bundles/wizishop-wizi-block.umd.js +97 -32
  4. package/bundles/wizishop-wizi-block.umd.js.map +1 -1
  5. package/bundles/wizishop-wizi-block.umd.min.js +1 -1
  6. package/bundles/wizishop-wizi-block.umd.min.js.map +1 -1
  7. package/esm2015/lib/shared/components/editorjs/tools/inline/link-tool.component.js +52 -11
  8. package/esm2015/lib/shared/components/editorjs/tools/inline/text-background-color-tool.component.js +2 -1
  9. package/esm2015/lib/shared/components/editorjs/tools/inline/tool-type/inline-style-tool.component.js +5 -2
  10. package/esm2015/lib/shared/components/editorjs/tools/paragraph/tool-type/paragraph-style-tool.component.js +19 -5
  11. package/esm2015/lib/shared/components/editorjs/tools/paragraph/tool-type/text-edition.component.js +13 -14
  12. package/esm2015/lib/shared/components/editorjs/tools/utils/editorjs-tool.component.js +6 -1
  13. package/esm2015/lib/shared/components/editorjs/tools/utils/i18n/en-i18n.component.js +3 -3
  14. package/esm2015/lib/shared/components/editorjs/tools/utils/i18n/fr-i18n.component.js +3 -3
  15. package/fesm2015/wizishop-wizi-block.js +95 -32
  16. package/fesm2015/wizishop-wizi-block.js.map +1 -1
  17. package/lib/shared/components/editorjs/tools/inline/link-tool.component.d.ts +1 -0
  18. package/lib/shared/components/editorjs/tools/inline/tool-type/inline-style-tool.component.d.ts +1 -0
  19. package/lib/shared/components/editorjs/tools/utils/editorjs-tool.component.d.ts +1 -0
  20. package/package.json +4 -2
  21. package/wizi-block.scss +723 -689
package/wizi-block.scss CHANGED
@@ -1543,146 +1543,144 @@ wb-structure-tools {
1543
1543
  }
1544
1544
  }
1545
1545
  .wb-witness-twice {
1546
- position: relative;
1546
+ position: relative;
1547
1547
 
1548
- > .columns {
1549
- > .column {
1550
- margin: 0 0 0 rem(10) !important;
1551
- &:first-child {
1552
- margin: 0 rem(10) 0 0 !important;
1553
- }
1548
+ > .columns {
1549
+ > .column {
1550
+ margin: 0 0 0 rem(10) !important;
1551
+ &:first-child {
1552
+ margin: 0 rem(10) 0 0 !important;
1553
+ }
1554
+ }
1554
1555
  }
1555
- }
1556
1556
 
1557
- &__tool {
1558
- overflow: hidden;
1559
- position: absolute;
1560
- top: 0;
1561
- left: 0;
1562
- width: 100%;
1563
- height: 100%;
1564
- }
1565
- &__container {
1566
- position: relative;
1567
- min-height: 300px;
1568
- &__item {
1569
- padding: 30px;
1570
- min-height: 300px;
1571
- &__figure {
1572
- text-align: center;
1573
- &__noimage,
1574
- &__image {
1575
- display: inline-block;
1576
- width: rem(80);
1577
- height: rem(80);
1578
- cursor: pointer;
1579
- border-radius: 50%;
1580
- position: relative;
1557
+ &__tool {
1558
+ overflow: hidden;
1559
+ position: absolute;
1560
+ top: 0;
1561
+ left: 0;
1562
+ width: 100%;
1563
+ height: 100%;
1564
+ }
1565
+ &__container {
1566
+ position: relative;
1567
+ min-height: 300px;
1568
+ &__item {
1569
+ padding: 30px;
1570
+ min-height: 300px;
1571
+ &__figure {
1572
+ text-align: center;
1573
+ &__noimage,
1574
+ &__image {
1575
+ display: inline-block;
1576
+ width: rem(80);
1577
+ height: rem(80);
1578
+ cursor: pointer;
1579
+ border-radius: 50%;
1580
+ position: relative;
1581
1581
 
1582
- &:before {
1583
- position: absolute;
1584
- left: 0;
1585
- top: 0;
1586
- width: 100%;
1587
- height: 100%;
1588
- background-color: rgba($wb-main-text-color, 0);
1589
- content: ' ';
1590
- transition: 200ms all;
1591
- border-radius: 50%;
1592
- }
1582
+ &:before {
1583
+ position: absolute;
1584
+ left: 0;
1585
+ top: 0;
1586
+ width: 100%;
1587
+ height: 100%;
1588
+ background-color: rgba($wb-main-text-color, 0);
1589
+ content: ' ';
1590
+ transition: 200ms all;
1591
+ border-radius: 50%;
1592
+ }
1593
1593
 
1594
- &:hover {
1595
- &:before {
1596
- background-color: rgba($wb-main-text-color, 0.1);
1594
+ &:hover {
1595
+ &:before {
1596
+ background-color: rgba($wb-main-text-color, 0.1);
1597
+ }
1598
+ }
1599
+ }
1600
+ &__noimage {
1601
+ background-color: lighten($wb-border-color, 12%);
1602
+ i {
1603
+ display: block;
1604
+ position: absolute;
1605
+ top: 50%;
1606
+ left: 50%;
1607
+ z-index: 2;
1608
+ transform: translate(-50%, -50%);
1609
+ font-size: rem(20);
1610
+ opacity: 0.6;
1611
+ -webkit-backface-visibility: hidden;
1612
+ -webkit-transform: translate(-50%, -50%);
1613
+ }
1614
+ &:before {
1615
+ content: '';
1616
+ display: block;
1617
+ position: absolute;
1618
+ top: 0;
1619
+ left: 0;
1620
+ width: 100%;
1621
+ height: 100%;
1622
+ border: 1px solid $wb-border-color;
1623
+ border-radius: 50%;
1624
+ }
1625
+ &:hover,
1626
+ &:focus {
1627
+ i {
1628
+ opacity: 0.8;
1629
+ }
1630
+ &:before {
1631
+ border-color: darken($wb-border-color, 33%);
1632
+ }
1633
+ }
1634
+ }
1635
+ &__image {
1636
+ -webkit-background-size: cover;
1637
+ background-position: center;
1638
+ background-size: cover;
1639
+ background-position: center;
1640
+ }
1597
1641
  }
1598
- }
1599
- }
1600
- &__noimage {
1601
- background-color: lighten($wb-border-color, 12%);
1602
- i {
1603
- display: block;
1604
- position: absolute;
1605
- top: 50%;
1606
- left: 50%;
1607
- z-index: 2;
1608
- transform: translate(-50%, -50%);
1609
- font-size: rem(20);
1610
- opacity: 0.6;
1611
- -webkit-backface-visibility: hidden;
1612
- -webkit-transform: translate(-50%, -50%);
1613
- }
1614
- &:before {
1615
- content: '';
1616
- display: block;
1617
- position: absolute;
1618
- top: 0;
1619
- left: 0;
1620
- width: 100%;
1621
- height: 100%;
1622
- border: 1px solid $wb-border-color;
1623
- border-radius: 50%;
1624
- }
1625
- &:hover,
1626
- &:focus {
1627
- i {
1628
- opacity: 0.8;
1642
+ &__author,
1643
+ &__testimony {
1644
+ text-align: center;
1645
+ display: flex;
1646
+ flex-wrap: nowrap;
1647
+ justify-content: center;
1648
+ h2 {
1649
+ width: 100%;
1650
+ font-size: rem(18);
1651
+ line-height: rem(22);
1652
+ }
1629
1653
  }
1630
- &:before {
1631
- border-color: darken($wb-border-color, 33%);
1654
+ &__author {
1655
+ h2 {
1656
+ font-size: rem(18);
1657
+ line-height: rem(22);
1658
+ }
1659
+ }
1660
+ &__testimony {
1661
+ p {
1662
+ font-size: rem(13);
1663
+ line-height: rem(22);
1664
+ color: $wb-secondary-text-color;
1665
+ }
1666
+ }
1667
+ &__url {
1668
+ text-align: center;
1669
+ display: flex;
1670
+ flex-wrap: nowrap;
1671
+ justify-content: center;
1672
+ &__container {
1673
+ width: auto;
1674
+ color: $wb-witness-color-link;
1675
+ font-size: rem(13);
1676
+ line-height: rem(15);
1677
+ text-decoration: none;
1678
+ font-weight: 500;
1679
+ cursor: pointer;
1680
+ }
1632
1681
  }
1633
- }
1634
- }
1635
- &__image {
1636
- -webkit-background-size: cover;
1637
- background-position: center;
1638
- background-size: cover;
1639
- background-position: center;
1640
- }
1641
- }
1642
- &__author,
1643
- &__testimony {
1644
- text-align: center;
1645
- display: flex;
1646
- flex-wrap: nowrap;
1647
- justify-content: center;
1648
- h2 {
1649
- width: 100%;
1650
- font-size: rem(18);
1651
- line-height: rem(22);
1652
- }
1653
- }
1654
- &__author {
1655
- h2 {
1656
- font-size: rem(18);
1657
- line-height: rem(22);
1658
- text-align: center;
1659
- }
1660
- }
1661
- &__testimony {
1662
- p {
1663
- font-size: rem(13);
1664
- line-height: rem(22);
1665
- text-align: center;
1666
- color: $wb-secondary-text-color;
1667
- }
1668
- }
1669
- &__url {
1670
- text-align: center;
1671
- display: flex;
1672
- flex-wrap: nowrap;
1673
- justify-content: center;
1674
- &__container {
1675
- width: auto;
1676
- color: $wb-witness-color-link;
1677
- font-size: rem(13);
1678
- line-height: rem(15);
1679
- text-decoration: none;
1680
- font-weight: 500;
1681
- cursor: pointer;
1682
1682
  }
1683
- }
1684
1683
  }
1685
- }
1686
1684
  }
1687
1685
  .wb-newsletter-center-image {
1688
1686
  position: relative;
@@ -2271,6 +2269,11 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
2271
2269
  pointer-events: none;
2272
2270
  transition: opacity 0.3s ease-in-out;
2273
2271
  }
2272
+
2273
+ .ce-settings {
2274
+ right: 0 !important;
2275
+ left: unset !important;
2276
+ }
2274
2277
  }
2275
2278
  }
2276
2279
 
@@ -2980,7 +2983,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
2980
2983
 
2981
2984
  & > div {
2982
2985
  position: relative;
2983
- width: 30px;
2986
+ width: 45px;
2984
2987
  height: 30px;
2985
2988
  border: 1px solid #eaeaea;
2986
2989
  border-radius: 4px;
@@ -3212,6 +3215,27 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3212
3215
  transition: border-color 0.3s ease-in-out;
3213
3216
  }
3214
3217
  }
3218
+
3219
+ ::-webkit-input-placeholder {
3220
+ /* Chrome/Opera/Safari */
3221
+ color: #b4bdd0 !important;
3222
+ opacity: 1;
3223
+ }
3224
+ ::-moz-placeholder {
3225
+ /* Firefox 19+ */
3226
+ color: #b4bdd0 !important;
3227
+ opacity: 1;
3228
+ }
3229
+ :-ms-input-placeholder {
3230
+ /* IE 10+ */
3231
+ color: #b4bdd0 !important;
3232
+ opacity: 1;
3233
+ }
3234
+ :-moz-placeholder {
3235
+ /* Firefox 18- */
3236
+ color: #b4bdd0 !important;
3237
+ opacity: 1;
3238
+ }
3215
3239
  }
3216
3240
 
3217
3241
  &__target {
@@ -3419,8 +3443,15 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3419
3443
 
3420
3444
  &__editor {
3421
3445
  @include flex(1);
3446
+ position: relative;
3422
3447
  border: 1px solid #eaeaea;
3423
3448
  border-radius: 3px;
3449
+ height: calc(100% - 56px);
3450
+
3451
+ .monaco-editor {
3452
+ width: 100% !important;
3453
+ height: 100% !important;
3454
+ }
3424
3455
  }
3425
3456
 
3426
3457
  &__buttons {
@@ -3435,6 +3466,7 @@ $focused-background-color: rgba(34, 186, 255, 0.08);
3435
3466
  border-radius: 3px;
3436
3467
  font-size: 14px;
3437
3468
  cursor: pointer;
3469
+ min-height: 41px;
3438
3470
 
3439
3471
  &:first-of-type {
3440
3472
  margin-right: 15px;
@@ -5481,15 +5513,23 @@ wb-editorjs {
5481
5513
  }
5482
5514
 
5483
5515
  &-center {
5516
+ @include flexbox();
5517
+ @include justify-content(center);
5484
5518
  text-align: center;
5485
5519
  }
5486
5520
 
5487
5521
  &-right {
5522
+ @include flexbox();
5523
+ @include justify-content(flex-end);
5488
5524
  text-align: right;
5489
5525
  }
5490
5526
 
5491
5527
  &-justify {
5492
5528
  text-align: justify;
5529
+
5530
+ li {
5531
+ width: 100%;
5532
+ }
5493
5533
  }
5494
5534
  }
5495
5535
 
@@ -5499,6 +5539,7 @@ wb-editorjs {
5499
5539
 
5500
5540
  li {
5501
5541
  padding-left: 1.5em;
5542
+ width: fit-content;
5502
5543
  }
5503
5544
  }
5504
5545
 
@@ -5508,6 +5549,7 @@ wb-editorjs {
5508
5549
 
5509
5550
  li {
5510
5551
  padding-left: 1.5em;
5552
+ width: fit-content;
5511
5553
  }
5512
5554
  }
5513
5555
 
@@ -27227,312 +27269,308 @@ $color-size-choose: #6c6c6c;
27227
27269
  }
27228
27270
  }
27229
27271
  .wb-witness-triple {
27230
- position: relative;
27272
+ position: relative;
27231
27273
 
27232
- &__config {
27233
- .wb-structure-config.is-right-top .wb-structure-config__tools {
27234
- right: calc(33.333333% + #{rem(20)});
27235
- }
27236
- }
27274
+ &__config {
27275
+ .wb-structure-config.is-right-top .wb-structure-config__tools {
27276
+ right: calc(33.333333% + #{rem(20)});
27277
+ }
27278
+ }
27237
27279
 
27238
- > .columns {
27239
- > .column {
27240
- margin: 0 0 0 rem(15) !important;
27241
- &:first-child {
27242
- margin: 0 !important;
27243
- }
27244
- &:last-child {
27245
- margin: 0 0 0 rem(15) !important;
27246
- }
27280
+ > .columns {
27281
+ > .column {
27282
+ margin: 0 0 0 rem(15) !important;
27283
+ &:first-child {
27284
+ margin: 0 !important;
27285
+ }
27286
+ &:last-child {
27287
+ margin: 0 0 0 rem(15) !important;
27288
+ }
27289
+ }
27247
27290
  }
27248
- }
27249
27291
 
27250
- &__tool {
27251
- overflow: hidden;
27252
- position: absolute;
27253
- top: 0;
27254
- left: 0;
27255
- width: 100%;
27256
- height: 100%;
27257
- }
27258
- &__container {
27259
- position: relative;
27260
- min-height: 300px;
27261
- &__item {
27262
- padding: 30px;
27263
- min-height: 300px;
27264
- &__figure {
27265
- text-align: center;
27266
- &__noimage,
27267
- &__image {
27268
- display: inline-block;
27269
- width: rem(80);
27270
- height: rem(80);
27271
- cursor: pointer;
27272
- border-radius: 50%;
27273
- position: relative;
27292
+ &__tool {
27293
+ overflow: hidden;
27294
+ position: absolute;
27295
+ top: 0;
27296
+ left: 0;
27297
+ width: 100%;
27298
+ height: 100%;
27299
+ }
27300
+ &__container {
27301
+ position: relative;
27302
+ min-height: 300px;
27303
+ &__item {
27304
+ padding: 30px;
27305
+ min-height: 300px;
27306
+ &__figure {
27307
+ text-align: center;
27308
+ &__noimage,
27309
+ &__image {
27310
+ display: inline-block;
27311
+ width: rem(80);
27312
+ height: rem(80);
27313
+ cursor: pointer;
27314
+ border-radius: 50%;
27315
+ position: relative;
27274
27316
 
27275
- &:before {
27276
- position: absolute;
27277
- left: 0;
27278
- top: 0;
27279
- width: 100%;
27280
- height: 100%;
27281
- background-color: rgba($wb-main-text-color, 0);
27282
- content: ' ';
27283
- transition: 200ms all;
27284
- border-radius: 50%;
27285
- }
27317
+ &:before {
27318
+ position: absolute;
27319
+ left: 0;
27320
+ top: 0;
27321
+ width: 100%;
27322
+ height: 100%;
27323
+ background-color: rgba($wb-main-text-color, 0);
27324
+ content: ' ';
27325
+ transition: 200ms all;
27326
+ border-radius: 50%;
27327
+ }
27286
27328
 
27287
- &:hover {
27288
- &:before {
27289
- background-color: rgba($wb-main-text-color, 0.1);
27329
+ &:hover {
27330
+ &:before {
27331
+ background-color: rgba($wb-main-text-color, 0.1);
27332
+ }
27333
+ }
27334
+ }
27335
+ &__noimage {
27336
+ background-color: lighten($wb-border-color, 12%);
27337
+ i {
27338
+ display: block;
27339
+ position: absolute;
27340
+ top: 50%;
27341
+ left: 50%;
27342
+ z-index: 2;
27343
+ transform: translate(-50%, -50%);
27344
+ font-size: rem(20);
27345
+ opacity: 0.6;
27346
+ -webkit-backface-visibility: hidden;
27347
+ -webkit-transform: translate(-50%, -50%);
27348
+ }
27349
+ &:before {
27350
+ content: '';
27351
+ display: block;
27352
+ position: absolute;
27353
+ top: 0;
27354
+ left: 0;
27355
+ width: 100%;
27356
+ height: 100%;
27357
+ border: 1px solid $wb-border-color;
27358
+ border-radius: 50%;
27359
+ }
27360
+ &:hover,
27361
+ &:focus {
27362
+ i {
27363
+ opacity: 0.8;
27364
+ }
27365
+ &:before {
27366
+ border-color: darken($wb-border-color, 33%);
27367
+ }
27368
+ }
27369
+ }
27370
+ &__image {
27371
+ -webkit-background-size: cover;
27372
+ background-position: center;
27373
+ background-size: cover;
27374
+ background-position: center;
27375
+ }
27290
27376
  }
27291
- }
27292
- }
27293
- &__noimage {
27294
- background-color: lighten($wb-border-color, 12%);
27295
- i {
27296
- display: block;
27297
- position: absolute;
27298
- top: 50%;
27299
- left: 50%;
27300
- z-index: 2;
27301
- transform: translate(-50%, -50%);
27302
- font-size: rem(20);
27303
- opacity: 0.6;
27304
- -webkit-backface-visibility: hidden;
27305
- -webkit-transform: translate(-50%, -50%);
27306
- }
27307
- &:before {
27308
- content: '';
27309
- display: block;
27310
- position: absolute;
27311
- top: 0;
27312
- left: 0;
27313
- width: 100%;
27314
- height: 100%;
27315
- border: 1px solid $wb-border-color;
27316
- border-radius: 50%;
27317
- }
27318
- &:hover,
27319
- &:focus {
27320
- i {
27321
- opacity: 0.8;
27377
+ &__author,
27378
+ &__testimony {
27379
+ text-align: center;
27380
+ display: flex;
27381
+ flex-wrap: nowrap;
27382
+ justify-content: center;
27383
+ h2 {
27384
+ width: 100%;
27385
+ font-size: rem(18);
27386
+ line-height: rem(22);
27387
+ }
27322
27388
  }
27323
- &:before {
27324
- border-color: darken($wb-border-color, 33%);
27389
+ &__author {
27390
+ h2 {
27391
+ font-size: rem(18);
27392
+ line-height: rem(22);
27393
+ }
27394
+ }
27395
+ &__testimony {
27396
+ p {
27397
+ font-size: rem(13);
27398
+ line-height: rem(22);
27399
+ color: $wb-secondary-text-color;
27400
+ }
27401
+ }
27402
+ &__url {
27403
+ text-align: center;
27404
+ display: flex;
27405
+ flex-wrap: nowrap;
27406
+ justify-content: center;
27407
+ &__container {
27408
+ width: auto;
27409
+ color: $wb-witness-color-link;
27410
+ font-size: rem(13);
27411
+ line-height: rem(15);
27412
+ text-decoration: none;
27413
+ font-weight: 500;
27414
+ cursor: pointer;
27415
+ }
27325
27416
  }
27326
- }
27327
- }
27328
- &__image {
27329
- -webkit-background-size: cover;
27330
- background-position: center;
27331
- background-size: cover;
27332
- background-position: center;
27333
- }
27334
- }
27335
- &__author,
27336
- &__testimony {
27337
- text-align: center;
27338
- display: flex;
27339
- flex-wrap: nowrap;
27340
- justify-content: center;
27341
- h2 {
27342
- width: 100%;
27343
- font-size: rem(18);
27344
- line-height: rem(22);
27345
- }
27346
- }
27347
- &__author {
27348
- h2 {
27349
- font-size: rem(18);
27350
- line-height: rem(22);
27351
- text-align: center;
27352
- }
27353
- }
27354
- &__testimony {
27355
- p {
27356
- font-size: rem(13);
27357
- line-height: rem(22);
27358
- text-align: center;
27359
- color: $wb-secondary-text-color;
27360
- }
27361
- }
27362
- &__url {
27363
- text-align: center;
27364
- display: flex;
27365
- flex-wrap: nowrap;
27366
- justify-content: center;
27367
- &__container {
27368
- width: auto;
27369
- color: $wb-witness-color-link;
27370
- font-size: rem(13);
27371
- line-height: rem(15);
27372
- text-decoration: none;
27373
- font-weight: 500;
27374
- cursor: pointer;
27375
27417
  }
27376
- }
27377
27418
  }
27378
- }
27379
27419
  }
27380
27420
  .wb-witness-quadruple {
27381
- position: relative;
27421
+ position: relative;
27382
27422
 
27383
- &__middle-right-config {
27384
- .wb-structure-config.is-right-top .wb-structure-config__tools {
27385
- right: calc(25% + #{rem(19)});
27423
+ &__middle-right-config {
27424
+ .wb-structure-config.is-right-top .wb-structure-config__tools {
27425
+ right: calc(25% + #{rem(19)});
27426
+ }
27386
27427
  }
27387
- }
27388
27428
 
27389
- &__middle-left-config {
27390
- .wb-structure-config.is-right-top .wb-structure-config__tools {
27391
- right: calc(50% + #{rem(21)});
27429
+ &__middle-left-config {
27430
+ .wb-structure-config.is-right-top .wb-structure-config__tools {
27431
+ right: calc(50% + #{rem(21)});
27432
+ }
27392
27433
  }
27393
- }
27394
27434
 
27395
- > .columns {
27396
- > .column {
27397
- margin: 0 0 0 rem(15) !important;
27398
- &:first-child {
27399
- margin: 0 !important;
27400
- }
27401
- &:last-child {
27402
- margin: 0 0 0 rem(15) !important;
27403
- }
27435
+ > .columns {
27436
+ > .column {
27437
+ margin: 0 0 0 rem(15) !important;
27438
+ &:first-child {
27439
+ margin: 0 !important;
27440
+ }
27441
+ &:last-child {
27442
+ margin: 0 0 0 rem(15) !important;
27443
+ }
27444
+ }
27404
27445
  }
27405
- }
27406
27446
 
27407
- &__tool {
27408
- overflow: hidden;
27409
- position: absolute;
27410
- top: 0;
27411
- left: 0;
27412
- width: 100%;
27413
- height: 100%;
27414
- }
27415
- &__container {
27416
- position: relative;
27417
- min-height: 300px;
27418
- &__item {
27419
- padding: 30px;
27420
- min-height: 300px;
27421
- &__figure {
27422
- text-align: center;
27423
- &__noimage,
27424
- &__image {
27425
- display: inline-block;
27426
- width: rem(80);
27427
- height: rem(80);
27428
- cursor: pointer;
27429
- border-radius: 50%;
27430
- position: relative;
27447
+ &__tool {
27448
+ overflow: hidden;
27449
+ position: absolute;
27450
+ top: 0;
27451
+ left: 0;
27452
+ width: 100%;
27453
+ height: 100%;
27454
+ }
27455
+ &__container {
27456
+ position: relative;
27457
+ min-height: 300px;
27458
+ &__item {
27459
+ padding: 30px;
27460
+ min-height: 300px;
27461
+ &__figure {
27462
+ text-align: center;
27463
+ &__noimage,
27464
+ &__image {
27465
+ display: inline-block;
27466
+ width: rem(80);
27467
+ height: rem(80);
27468
+ cursor: pointer;
27469
+ border-radius: 50%;
27470
+ position: relative;
27431
27471
 
27432
- &:before {
27433
- position: absolute;
27434
- left: 0;
27435
- top: 0;
27436
- width: 100%;
27437
- height: 100%;
27438
- background-color: rgba($wb-main-text-color, 0);
27439
- content: ' ';
27440
- transition: 200ms all;
27441
- border-radius: 50%;
27442
- }
27472
+ &:before {
27473
+ position: absolute;
27474
+ left: 0;
27475
+ top: 0;
27476
+ width: 100%;
27477
+ height: 100%;
27478
+ background-color: rgba($wb-main-text-color, 0);
27479
+ content: ' ';
27480
+ transition: 200ms all;
27481
+ border-radius: 50%;
27482
+ }
27443
27483
 
27444
- &:hover {
27445
- &:before {
27446
- background-color: rgba($wb-main-text-color, 0.1);
27484
+ &:hover {
27485
+ &:before {
27486
+ background-color: rgba($wb-main-text-color, 0.1);
27487
+ }
27488
+ }
27489
+ }
27490
+ &__noimage {
27491
+ background-color: lighten($wb-border-color, 12%);
27492
+ i {
27493
+ display: block;
27494
+ position: absolute;
27495
+ top: 50%;
27496
+ left: 50%;
27497
+ z-index: 2;
27498
+ transform: translate(-50%, -50%);
27499
+ font-size: rem(20);
27500
+ opacity: 0.6;
27501
+ -webkit-backface-visibility: hidden;
27502
+ -webkit-transform: translate(-50%, -50%);
27503
+ }
27504
+ &:before {
27505
+ content: '';
27506
+ display: block;
27507
+ position: absolute;
27508
+ top: 0;
27509
+ left: 0;
27510
+ width: 100%;
27511
+ height: 100%;
27512
+ border: 1px solid $wb-border-color;
27513
+ border-radius: 50%;
27514
+ }
27515
+ &:hover,
27516
+ &:focus {
27517
+ i {
27518
+ opacity: 0.8;
27519
+ }
27520
+ &:before {
27521
+ border-color: darken($wb-border-color, 33%);
27522
+ }
27523
+ }
27524
+ }
27525
+ &__image {
27526
+ -webkit-background-size: cover;
27527
+ background-position: center;
27528
+ background-size: cover;
27529
+ background-position: center;
27530
+ }
27447
27531
  }
27448
- }
27449
- }
27450
- &__noimage {
27451
- background-color: lighten($wb-border-color, 12%);
27452
- i {
27453
- display: block;
27454
- position: absolute;
27455
- top: 50%;
27456
- left: 50%;
27457
- z-index: 2;
27458
- transform: translate(-50%, -50%);
27459
- font-size: rem(20);
27460
- opacity: 0.6;
27461
- -webkit-backface-visibility: hidden;
27462
- -webkit-transform: translate(-50%, -50%);
27463
- }
27464
- &:before {
27465
- content: '';
27466
- display: block;
27467
- position: absolute;
27468
- top: 0;
27469
- left: 0;
27470
- width: 100%;
27471
- height: 100%;
27472
- border: 1px solid $wb-border-color;
27473
- border-radius: 50%;
27474
- }
27475
- &:hover,
27476
- &:focus {
27477
- i {
27478
- opacity: 0.8;
27532
+ &__author,
27533
+ &__testimony {
27534
+ text-align: center;
27535
+ display: flex;
27536
+ flex-wrap: nowrap;
27537
+ justify-content: center;
27538
+ h2 {
27539
+ width: 100%;
27540
+ font-size: rem(18);
27541
+ line-height: rem(22);
27542
+ }
27479
27543
  }
27480
- &:before {
27481
- border-color: darken($wb-border-color, 33%);
27544
+ &__author {
27545
+ h2 {
27546
+ font-size: rem(18);
27547
+ line-height: rem(22);
27548
+ }
27549
+ }
27550
+ &__testimony {
27551
+ p {
27552
+ font-size: rem(13);
27553
+ line-height: rem(22);
27554
+ color: $wb-secondary-text-color;
27555
+ }
27556
+ }
27557
+ &__url {
27558
+ text-align: center;
27559
+ display: flex;
27560
+ flex-wrap: nowrap;
27561
+ justify-content: center;
27562
+ &__container {
27563
+ width: auto;
27564
+ color: $wb-witness-color-link;
27565
+ font-size: rem(13);
27566
+ line-height: rem(15);
27567
+ text-decoration: none;
27568
+ font-weight: 500;
27569
+ cursor: pointer;
27570
+ }
27482
27571
  }
27483
- }
27484
- }
27485
- &__image {
27486
- -webkit-background-size: cover;
27487
- background-position: center;
27488
- background-size: cover;
27489
- background-position: center;
27490
- }
27491
- }
27492
- &__author,
27493
- &__testimony {
27494
- text-align: center;
27495
- display: flex;
27496
- flex-wrap: nowrap;
27497
- justify-content: center;
27498
- h2 {
27499
- width: 100%;
27500
- font-size: rem(18);
27501
- line-height: rem(22);
27502
- }
27503
- }
27504
- &__author {
27505
- h2 {
27506
- font-size: rem(18);
27507
- line-height: rem(22);
27508
- text-align: center;
27509
- }
27510
- }
27511
- &__testimony {
27512
- p {
27513
- font-size: rem(13);
27514
- line-height: rem(22);
27515
- text-align: center;
27516
- color: $wb-secondary-text-color;
27517
- }
27518
- }
27519
- &__url {
27520
- text-align: center;
27521
- display: flex;
27522
- flex-wrap: nowrap;
27523
- justify-content: center;
27524
- &__container {
27525
- width: auto;
27526
- color: $wb-witness-color-link;
27527
- font-size: rem(13);
27528
- line-height: rem(15);
27529
- text-decoration: none;
27530
- font-weight: 500;
27531
- cursor: pointer;
27532
27572
  }
27533
- }
27534
27573
  }
27535
- }
27536
27574
  }
27537
27575
  .wb-witness-backgroundOne {
27538
27576
  &__tool {
@@ -27619,19 +27657,278 @@ $color-size-choose: #6c6c6c;
27619
27657
  border: rem(1) solid $wb-border-color;
27620
27658
 
27621
27659
  i {
27622
- color: darken($wb-secondary-text-color, 20%);
27660
+ color: darken($wb-secondary-text-color, 20%);
27661
+ }
27662
+
27663
+ p {
27664
+ color: darken($wb-secondary-text-color, 20%);
27665
+
27666
+ &:before {
27667
+ width: 100%;
27668
+ }
27669
+ }
27670
+ }
27671
+ }
27672
+
27673
+ &__image {
27674
+ -webkit-background-size: cover;
27675
+ background-position: center;
27676
+ background-size: cover;
27677
+ background-position: center;
27678
+ }
27679
+ }
27680
+
27681
+ &__zindex {
27682
+ width: 100%;
27683
+ position: relative;
27684
+ z-index: 3;
27685
+ @include media('>=desktop') {
27686
+ padding: 0 40px;
27687
+ }
27688
+ }
27689
+
27690
+ &__hr {
27691
+ height: 2px;
27692
+ width: 60%;
27693
+ margin: 0 auto 10px auto;
27694
+ }
27695
+
27696
+ &__author,
27697
+ &__testimony {
27698
+ text-align: center;
27699
+ display: flex;
27700
+ flex-wrap: nowrap;
27701
+ justify-content: center;
27702
+
27703
+ h2 {
27704
+ width: 100%;
27705
+ font-size: rem(18);
27706
+ line-height: rem(22);
27707
+ }
27708
+ }
27709
+
27710
+ &__author {
27711
+ h2 {
27712
+ font-size: rem(14);
27713
+ line-height: rem(18);
27714
+ color: $white;
27715
+ }
27716
+ }
27717
+
27718
+ &__testimony {
27719
+ margin-bottom: 10px;
27720
+
27721
+ p {
27722
+ font-size: rem(16);
27723
+ line-height: 1.6;
27724
+ color: $white;
27725
+ }
27726
+ }
27727
+
27728
+ &__url {
27729
+ text-align: center;
27730
+ display: flex;
27731
+ flex-wrap: nowrap;
27732
+ justify-content: center;
27733
+
27734
+ &__container {
27735
+ position: relative;
27736
+ width: auto;
27737
+ color: $white;
27738
+ font-size: rem(12);
27739
+ line-height: rem(14);
27740
+ font-weight: 500;
27741
+ cursor: pointer;
27742
+ text-decoration: underline;
27743
+ }
27744
+ }
27745
+ }
27746
+ }
27747
+ }
27748
+ .wb-witness-backgroundDouble {
27749
+ min-height: 370px;
27750
+ position: relative;
27751
+ @include media('>=desktop') {
27752
+ padding: 60px;
27753
+ }
27754
+ .column {
27755
+ z-index: 1;
27756
+ }
27757
+ &__zindex {
27758
+ z-index: 4;
27759
+ & > .columns {
27760
+ margin: 0;
27761
+ }
27762
+ }
27763
+ &__title {
27764
+ z-index: 2;
27765
+ position: relative;
27766
+ text-align: center;
27767
+ font-size: rem(18);
27768
+ line-height: 1.6;
27769
+ color: $wb-white;
27770
+ font-weight: 600;
27771
+ .ql-editor {
27772
+ text-align: center;
27773
+ }
27774
+ }
27775
+ &__noimage {
27776
+ background-color: lighten($wb-border-color, 12%);
27777
+ cursor: pointer;
27778
+ display: flex;
27779
+ align-items: center;
27780
+ align-content: center;
27781
+ justify-content: center;
27782
+ position: absolute;
27783
+ width: 100%;
27784
+ height: 100%;
27785
+ top: 0;
27786
+ left: 0;
27787
+ z-index: 2;
27788
+ p {
27789
+ position: absolute;
27790
+ top: 50%;
27791
+ left: 50%;
27792
+ transform: translate(-50%, -50%);
27793
+ text-align: center;
27794
+ font-size: rem(14);
27795
+ color: $wb-secondary-text-color;
27796
+ width: auto;
27797
+ white-space: nowrap;
27798
+
27799
+ &:before {
27800
+ position: absolute;
27801
+ width: 0;
27802
+ bottom: -(#{rem(3)});
27803
+ height: rem(2);
27804
+ transition: 200ms all;
27805
+ background-color: $wb-border-color;
27806
+ content: ' ';
27807
+ left: 0;
27808
+ }
27809
+ }
27810
+
27811
+ i {
27812
+ color: $wb-secondary-text-color;
27813
+ text-align: center;
27814
+ display: block;
27815
+ font-size: rem(45);
27816
+ opacity: 0.4;
27817
+ transition: 200ms all;
27818
+ margin-bottom: rem(10);
27819
+ }
27820
+
27821
+ border: rem(1) solid lighten($wb-border-color, 12%);
27822
+ transition: 200ms all;
27823
+
27824
+ &:hover {
27825
+ border: rem(1) solid $wb-border-color;
27826
+
27827
+ i {
27828
+ color: darken($wb-secondary-text-color, 20%);
27829
+ }
27830
+
27831
+ p {
27832
+ color: darken($wb-secondary-text-color, 20%);
27833
+
27834
+ &:before {
27835
+ width: 100%;
27836
+ }
27837
+ }
27838
+ }
27839
+ }
27840
+ &__background {
27841
+ position: absolute;
27842
+ top: 0;
27843
+ left: 0;
27844
+ width: 100%;
27845
+ height: 100%;
27846
+ z-index: 1;
27847
+ -webkit-background-size: cover;
27848
+ background-position: center;
27849
+ background-size: cover;
27850
+ background-position: center;
27851
+ cursor: pointer;
27852
+ }
27853
+ &__tool {
27854
+ overflow: hidden;
27855
+ position: absolute;
27856
+ top: 0;
27857
+ left: 0;
27858
+ width: 100%;
27859
+ height: 100%;
27860
+ }
27861
+ &__container {
27862
+ position: relative;
27863
+ min-height: 270px;
27864
+ background-size: cover;
27865
+ background-position: center;
27866
+ &__item {
27867
+ padding: 40px;
27868
+ &__figure {
27869
+ text-align: center;
27870
+ &__noimage,
27871
+ &__image {
27872
+ display: inline-block;
27873
+ width: rem(80);
27874
+ height: rem(80);
27875
+ cursor: pointer;
27876
+ border-radius: 50%;
27877
+ position: relative;
27878
+
27879
+ &:before {
27880
+ position: absolute;
27881
+ left: 0;
27882
+ top: 0;
27883
+ width: 100%;
27884
+ height: 100%;
27885
+ background-color: rgba($wb-main-text-color, 0);
27886
+ content: ' ';
27887
+ transition: 200ms all;
27888
+ border-radius: 50%;
27889
+ }
27890
+
27891
+ &:hover {
27892
+ &:before {
27893
+ background-color: rgba($wb-main-text-color, 0.1);
27894
+ }
27895
+ }
27896
+ }
27897
+ &__noimage {
27898
+ background-color: lighten($wb-border-color, 12%);
27899
+ i {
27900
+ display: block;
27901
+ position: absolute;
27902
+ top: 50%;
27903
+ left: 50%;
27904
+ z-index: 2;
27905
+ transform: translate(-50%, -50%);
27906
+ font-size: rem(20);
27907
+ opacity: 0.6;
27908
+ -webkit-backface-visibility: hidden;
27909
+ -webkit-transform: translate(-50%, -50%);
27910
+ }
27911
+ &:before {
27912
+ content: '';
27913
+ display: block;
27914
+ position: absolute;
27915
+ top: 0;
27916
+ left: 0;
27917
+ width: 100%;
27918
+ height: 100%;
27919
+ border: 1px solid $wb-border-color;
27920
+ border-radius: 50%;
27921
+ }
27922
+ &:hover,
27923
+ &:focus {
27924
+ i {
27925
+ opacity: 0.8;
27623
27926
  }
27624
-
27625
- p {
27626
- color: darken($wb-secondary-text-color, 20%);
27627
-
27628
- &:before {
27629
- width: 100%;
27630
- }
27927
+ &:before {
27928
+ border-color: darken($wb-border-color, 33%);
27631
27929
  }
27632
27930
  }
27633
27931
  }
27634
-
27635
27932
  &__image {
27636
27933
  -webkit-background-size: cover;
27637
27934
  background-position: center;
@@ -27639,66 +27936,46 @@ $color-size-choose: #6c6c6c;
27639
27936
  background-position: center;
27640
27937
  }
27641
27938
  }
27642
-
27643
27939
  &__zindex {
27644
- width: 100%;
27645
27940
  position: relative;
27646
27941
  z-index: 3;
27647
- @include media('>=desktop') {
27648
- padding: 0 40px;
27649
- }
27650
27942
  }
27651
-
27652
- &__hr {
27653
- height: 2px;
27654
- width: 60%;
27655
- margin: 0 auto 10px auto;
27656
- }
27657
-
27658
27943
  &__author,
27659
27944
  &__testimony {
27660
27945
  text-align: center;
27661
27946
  display: flex;
27662
27947
  flex-wrap: nowrap;
27663
27948
  justify-content: center;
27664
-
27665
- h2 {
27949
+ h3 {
27666
27950
  width: 100%;
27667
27951
  font-size: rem(18);
27668
27952
  line-height: rem(22);
27669
27953
  }
27670
27954
  }
27671
-
27672
27955
  &__author {
27673
- h2 {
27956
+ h3 {
27674
27957
  font-size: rem(14);
27675
27958
  line-height: rem(18);
27676
- text-align: center;
27677
- color: $white;
27959
+ color: $wb-white;
27678
27960
  }
27679
27961
  }
27680
-
27681
27962
  &__testimony {
27682
27963
  margin-bottom: 10px;
27683
-
27684
27964
  p {
27685
- font-size: rem(16);
27686
- line-height: 1.6;
27687
- text-align: center;
27688
- color: $white;
27965
+ font-size: rem(14);
27966
+ line-height: 1.4;
27967
+ color: $wb-white;
27689
27968
  }
27690
27969
  }
27691
-
27692
27970
  &__url {
27693
27971
  text-align: center;
27694
27972
  display: flex;
27695
27973
  flex-wrap: nowrap;
27696
27974
  justify-content: center;
27697
-
27698
27975
  &__container {
27699
27976
  position: relative;
27700
27977
  width: auto;
27701
- color: $white;
27978
+ color: $wb-white;
27702
27979
  font-size: rem(12);
27703
27980
  line-height: rem(14);
27704
27981
  font-weight: 500;
@@ -27709,249 +27986,6 @@ $color-size-choose: #6c6c6c;
27709
27986
  }
27710
27987
  }
27711
27988
  }
27712
- .wb-witness-backgroundDouble {
27713
- min-height: 370px;
27714
- position: relative;
27715
- @include media('>=desktop') {
27716
- padding: 60px;
27717
- }
27718
- .column {
27719
- z-index: 1;
27720
- }
27721
- &__zindex {
27722
- z-index: 4;
27723
- & > .columns {
27724
- margin: 0;
27725
- }
27726
- }
27727
- &__title {
27728
- z-index: 2;
27729
- position: relative;
27730
- text-align: center;
27731
- font-size: rem(18);
27732
- line-height: 1.6;
27733
- color: $wb-white;
27734
- font-weight: 600;
27735
- .ql-editor {
27736
- text-align: center;
27737
- }
27738
- }
27739
- &__noimage {
27740
- background-color: lighten($wb-border-color, 12%);
27741
- cursor: pointer;
27742
- display: flex;
27743
- align-items: center;
27744
- align-content: center;
27745
- justify-content: center;
27746
- position: absolute;
27747
- width: 100%;
27748
- height: 100%;
27749
- top: 0;
27750
- left: 0;
27751
- z-index: 2;
27752
- p {
27753
- position: absolute;
27754
- top: 50%;
27755
- left: 50%;
27756
- transform: translate(-50%, -50%);
27757
- text-align: center;
27758
- font-size: rem(14);
27759
- color: $wb-secondary-text-color;
27760
- width: auto;
27761
- white-space: nowrap;
27762
-
27763
- &:before {
27764
- position: absolute;
27765
- width: 0;
27766
- bottom: -(#{rem(3)});
27767
- height: rem(2);
27768
- transition: 200ms all;
27769
- background-color: $wb-border-color;
27770
- content: ' ';
27771
- left: 0;
27772
- }
27773
- }
27774
-
27775
- i {
27776
- color: $wb-secondary-text-color;
27777
- text-align: center;
27778
- display: block;
27779
- font-size: rem(45);
27780
- opacity: 0.4;
27781
- transition: 200ms all;
27782
- margin-bottom: rem(10);
27783
- }
27784
-
27785
- border: rem(1) solid lighten($wb-border-color, 12%);
27786
- transition: 200ms all;
27787
-
27788
- &:hover {
27789
- border: rem(1) solid $wb-border-color;
27790
-
27791
- i {
27792
- color: darken($wb-secondary-text-color, 20%);
27793
- }
27794
-
27795
- p {
27796
- color: darken($wb-secondary-text-color, 20%);
27797
-
27798
- &:before {
27799
- width: 100%;
27800
- }
27801
- }
27802
- }
27803
- }
27804
- &__background {
27805
- position: absolute;
27806
- top: 0;
27807
- left: 0;
27808
- width: 100%;
27809
- height: 100%;
27810
- z-index: 1;
27811
- -webkit-background-size: cover;
27812
- background-position: center;
27813
- background-size: cover;
27814
- background-position: center;
27815
- cursor: pointer;
27816
- }
27817
- &__tool {
27818
- overflow: hidden;
27819
- position: absolute;
27820
- top: 0;
27821
- left: 0;
27822
- width: 100%;
27823
- height: 100%;
27824
- }
27825
- &__container {
27826
- position: relative;
27827
- min-height: 270px;
27828
- background-size: cover;
27829
- background-position: center;
27830
- &__item {
27831
- padding: 40px;
27832
- &__figure {
27833
- text-align: center;
27834
- &__noimage,
27835
- &__image {
27836
- display: inline-block;
27837
- width: rem(80);
27838
- height: rem(80);
27839
- cursor: pointer;
27840
- border-radius: 50%;
27841
- position: relative;
27842
-
27843
- &:before {
27844
- position: absolute;
27845
- left: 0;
27846
- top: 0;
27847
- width: 100%;
27848
- height: 100%;
27849
- background-color: rgba($wb-main-text-color, 0);
27850
- content: ' ';
27851
- transition: 200ms all;
27852
- border-radius: 50%;
27853
- }
27854
-
27855
- &:hover {
27856
- &:before {
27857
- background-color: rgba($wb-main-text-color, 0.1);
27858
- }
27859
- }
27860
- }
27861
- &__noimage {
27862
- background-color: lighten($wb-border-color, 12%);
27863
- i {
27864
- display: block;
27865
- position: absolute;
27866
- top: 50%;
27867
- left: 50%;
27868
- z-index: 2;
27869
- transform: translate(-50%, -50%);
27870
- font-size: rem(20);
27871
- opacity: 0.6;
27872
- -webkit-backface-visibility: hidden;
27873
- -webkit-transform: translate(-50%, -50%);
27874
- }
27875
- &:before {
27876
- content: '';
27877
- display: block;
27878
- position: absolute;
27879
- top: 0;
27880
- left: 0;
27881
- width: 100%;
27882
- height: 100%;
27883
- border: 1px solid $wb-border-color;
27884
- border-radius: 50%;
27885
- }
27886
- &:hover,
27887
- &:focus {
27888
- i {
27889
- opacity: 0.8;
27890
- }
27891
- &:before {
27892
- border-color: darken($wb-border-color, 33%);
27893
- }
27894
- }
27895
- }
27896
- &__image {
27897
- -webkit-background-size: cover;
27898
- background-position: center;
27899
- background-size: cover;
27900
- background-position: center;
27901
- }
27902
- }
27903
- &__zindex {
27904
- position: relative;
27905
- z-index: 3;
27906
- }
27907
- &__author,
27908
- &__testimony {
27909
- text-align: center;
27910
- display: flex;
27911
- flex-wrap: nowrap;
27912
- justify-content: center;
27913
- h3 {
27914
- width: 100%;
27915
- font-size: rem(18);
27916
- line-height: rem(22);
27917
- }
27918
- }
27919
- &__author {
27920
- h3 {
27921
- font-size: rem(14);
27922
- line-height: rem(18);
27923
- text-align: center;
27924
- color: $wb-white;
27925
- }
27926
- }
27927
- &__testimony {
27928
- margin-bottom: 10px;
27929
- p {
27930
- font-size: rem(14);
27931
- line-height: 1.4;
27932
- text-align: center;
27933
- color: $wb-white;
27934
- }
27935
- }
27936
- &__url {
27937
- text-align: center;
27938
- display: flex;
27939
- flex-wrap: nowrap;
27940
- justify-content: center;
27941
- &__container {
27942
- position: relative;
27943
- width: auto;
27944
- color: $wb-white;
27945
- font-size: rem(12);
27946
- line-height: rem(14);
27947
- font-weight: 500;
27948
- cursor: pointer;
27949
- text-decoration: underline;
27950
- }
27951
- }
27952
- }
27953
- }
27954
- }
27955
27989
  .wb-map-right-text {
27956
27990
  position: relative;
27957
27991