@wizishop/wizi-block 15.0.49-beta → 15.0.50-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 (2) hide show
  1. package/package.json +1 -1
  2. package/wizi-block.scss +239 -225
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wizishop/wizi-block",
3
- "version": "15.0.49-beta",
3
+ "version": "15.0.50-beta",
4
4
  "description": "## To use WiziBlock, you have to :",
5
5
  "repository": {
6
6
  "type": "git",
package/wizi-block.scss CHANGED
@@ -5681,6 +5681,217 @@ $color-bd: #dddddd;
5681
5681
  }
5682
5682
  }
5683
5683
  }
5684
+ .wb-images-double {
5685
+ overflow: hidden;
5686
+ position: relative;
5687
+ min-height: 220px;
5688
+
5689
+ .columns {
5690
+ overflow: hidden;
5691
+ }
5692
+
5693
+ img {
5694
+ width: 100%;
5695
+ display: block;
5696
+ }
5697
+
5698
+ .column {
5699
+ position: relative;
5700
+ }
5701
+
5702
+ &__noimages {
5703
+ background-color: lighten($wb-border-color, 12%);
5704
+ cursor: pointer;
5705
+ display: flex;
5706
+ align-items: center;
5707
+ align-content: center;
5708
+ justify-content: center;
5709
+ position: absolute;
5710
+ width: calc(100% - 20px);
5711
+ top: 0;
5712
+ height: 100%;
5713
+
5714
+ p {
5715
+ position: absolute;
5716
+ top: 50%;
5717
+ left: 50%;
5718
+ transform: translate(-50%, -50%);
5719
+ text-align: center;
5720
+ font-size: rem(14);
5721
+ color: $wb-secondary-text-color;
5722
+ width: auto;
5723
+ white-space: nowrap;
5724
+
5725
+ &:before {
5726
+ position: absolute;
5727
+ width: 0;
5728
+ bottom: -(#{rem(3)});
5729
+ height: rem(2);
5730
+ transition: 200ms all;
5731
+ background-color: $wb-border-color;
5732
+ content: ' ';
5733
+ left: 0;
5734
+ }
5735
+ }
5736
+
5737
+ i {
5738
+ color: $wb-secondary-text-color;
5739
+ text-align: center;
5740
+ display: block;
5741
+ font-size: rem(45);
5742
+ opacity: 0.4;
5743
+ transition: 200ms all;
5744
+ margin-bottom: rem(10);
5745
+ }
5746
+
5747
+ border: rem(1) solid lighten($wb-border-color, 12%);
5748
+ transition: 200ms all;
5749
+
5750
+ &:hover {
5751
+ border: rem(1) solid $wb-border-color;
5752
+
5753
+ i {
5754
+ color: darken($wb-secondary-text-color, 20%);
5755
+ }
5756
+
5757
+ p {
5758
+ color: darken($wb-secondary-text-color, 20%);
5759
+
5760
+ &:before {
5761
+ width: 100%;
5762
+ }
5763
+ }
5764
+ }
5765
+ }
5766
+
5767
+ &__container {
5768
+ position: relative;
5769
+ height: auto;
5770
+
5771
+ &:before {
5772
+ content: '';
5773
+ display: block;
5774
+ width: 100%;
5775
+ position: relative;
5776
+ padding-top: 64%;
5777
+ transition: padding 300ms ease;
5778
+ }
5779
+
5780
+ &--small {
5781
+ &:before {
5782
+ padding-top: 55.555555%;
5783
+ }
5784
+ }
5785
+
5786
+ &--medium {
5787
+ &:before {
5788
+ padding-top: 66.668%;
5789
+ }
5790
+ }
5791
+
5792
+ &--large {
5793
+ &:before {
5794
+ padding-top: 77.778%;
5795
+ }
5796
+ }
5797
+
5798
+ &__images {
5799
+ position: absolute;
5800
+ width: 100%;
5801
+ right: 0;
5802
+ opacity: 1;
5803
+ top: 0;
5804
+ @include simple_transition();
5805
+
5806
+ &__item {
5807
+ background-size: cover;
5808
+ background-position: center;
5809
+ height: auto;
5810
+ cursor: pointer;
5811
+ position: relative;
5812
+ width: 100%;
5813
+ &:before {
5814
+ content: '';
5815
+ display: block;
5816
+ width: 100%;
5817
+ position: relative;
5818
+ padding-top: 64%;
5819
+ transition: padding 300ms ease;
5820
+ }
5821
+
5822
+ &:after {
5823
+ content: '\f03e';
5824
+ font-family: 'Font Awesome 5 Pro';
5825
+ display: block;
5826
+ @include simple_transition();
5827
+ position: absolute;
5828
+ z-index: 38;
5829
+ font-size: rem(70);
5830
+ top: -#{rem(50)};
5831
+ opacity: 0;
5832
+ left: 0;
5833
+ right: 0;
5834
+ bottom: 0;
5835
+ margin: auto;
5836
+ width: rem(70);
5837
+ height: rem(90);
5838
+ color: $wb-white;
5839
+ pointer-events: none;
5840
+ }
5841
+
5842
+ &--small {
5843
+ &:before {
5844
+ padding-top: 55.555555%;
5845
+ }
5846
+ }
5847
+
5848
+ &--medium {
5849
+ &:before {
5850
+ padding-top: 66.668%;
5851
+ }
5852
+ }
5853
+
5854
+ &--large {
5855
+ &:before {
5856
+ padding-top: 77.778%;
5857
+ }
5858
+ }
5859
+ }
5860
+
5861
+ > div {
5862
+ position: relative;
5863
+ overflow: hidden;
5864
+
5865
+ > div {
5866
+ background-size: cover;
5867
+ background-position: center;
5868
+ height: auto;
5869
+ cursor: pointer;
5870
+
5871
+ &:before {
5872
+ background-color: rgba($wb-main-text-color, 0);
5873
+ content: ' ';
5874
+ transition: 200ms all;
5875
+ }
5876
+
5877
+ &:hover {
5878
+ &:before {
5879
+ background-color: rgba($wb-main-text-color, 0.1);
5880
+ }
5881
+
5882
+ &:after {
5883
+ top: -#{rem(25)};
5884
+ opacity: 0.3;
5885
+ }
5886
+ }
5887
+ }
5888
+ }
5889
+ }
5890
+ }
5891
+ span[class^='wb-dynamic-size'] {
5892
+ top: 15px;
5893
+ }
5894
+ }
5684
5895
  .wb-images-bigs-and-double-middle {
5685
5896
  overflow: hidden;
5686
5897
  position: relative;
@@ -5979,217 +6190,6 @@ $color-bd: #dddddd;
5979
6190
  }
5980
6191
  }
5981
6192
  }
5982
- .wb-images-double {
5983
- overflow: hidden;
5984
- position: relative;
5985
- min-height: 220px;
5986
-
5987
- .columns {
5988
- overflow: hidden;
5989
- }
5990
-
5991
- img {
5992
- width: 100%;
5993
- display: block;
5994
- }
5995
-
5996
- .column {
5997
- position: relative;
5998
- }
5999
-
6000
- &__noimages {
6001
- background-color: lighten($wb-border-color, 12%);
6002
- cursor: pointer;
6003
- display: flex;
6004
- align-items: center;
6005
- align-content: center;
6006
- justify-content: center;
6007
- position: absolute;
6008
- width: calc(100% - 20px);
6009
- top: 0;
6010
- height: 100%;
6011
-
6012
- p {
6013
- position: absolute;
6014
- top: 50%;
6015
- left: 50%;
6016
- transform: translate(-50%, -50%);
6017
- text-align: center;
6018
- font-size: rem(14);
6019
- color: $wb-secondary-text-color;
6020
- width: auto;
6021
- white-space: nowrap;
6022
-
6023
- &:before {
6024
- position: absolute;
6025
- width: 0;
6026
- bottom: -(#{rem(3)});
6027
- height: rem(2);
6028
- transition: 200ms all;
6029
- background-color: $wb-border-color;
6030
- content: ' ';
6031
- left: 0;
6032
- }
6033
- }
6034
-
6035
- i {
6036
- color: $wb-secondary-text-color;
6037
- text-align: center;
6038
- display: block;
6039
- font-size: rem(45);
6040
- opacity: 0.4;
6041
- transition: 200ms all;
6042
- margin-bottom: rem(10);
6043
- }
6044
-
6045
- border: rem(1) solid lighten($wb-border-color, 12%);
6046
- transition: 200ms all;
6047
-
6048
- &:hover {
6049
- border: rem(1) solid $wb-border-color;
6050
-
6051
- i {
6052
- color: darken($wb-secondary-text-color, 20%);
6053
- }
6054
-
6055
- p {
6056
- color: darken($wb-secondary-text-color, 20%);
6057
-
6058
- &:before {
6059
- width: 100%;
6060
- }
6061
- }
6062
- }
6063
- }
6064
-
6065
- &__container {
6066
- position: relative;
6067
- height: auto;
6068
-
6069
- &:before {
6070
- content: '';
6071
- display: block;
6072
- width: 100%;
6073
- position: relative;
6074
- padding-top: 64%;
6075
- transition: padding 300ms ease;
6076
- }
6077
-
6078
- &--small {
6079
- &:before {
6080
- padding-top: 55.555555%;
6081
- }
6082
- }
6083
-
6084
- &--medium {
6085
- &:before {
6086
- padding-top: 66.668%;
6087
- }
6088
- }
6089
-
6090
- &--large {
6091
- &:before {
6092
- padding-top: 77.778%;
6093
- }
6094
- }
6095
-
6096
- &__images {
6097
- position: absolute;
6098
- width: 100%;
6099
- right: 0;
6100
- opacity: 1;
6101
- top: 0;
6102
- @include simple_transition();
6103
-
6104
- &__item {
6105
- background-size: cover;
6106
- background-position: center;
6107
- height: auto;
6108
- cursor: pointer;
6109
- position: relative;
6110
- width: 100%;
6111
- &:before {
6112
- content: '';
6113
- display: block;
6114
- width: 100%;
6115
- position: relative;
6116
- padding-top: 64%;
6117
- transition: padding 300ms ease;
6118
- }
6119
-
6120
- &:after {
6121
- content: '\f03e';
6122
- font-family: 'Font Awesome 5 Pro';
6123
- display: block;
6124
- @include simple_transition();
6125
- position: absolute;
6126
- z-index: 38;
6127
- font-size: rem(70);
6128
- top: -#{rem(50)};
6129
- opacity: 0;
6130
- left: 0;
6131
- right: 0;
6132
- bottom: 0;
6133
- margin: auto;
6134
- width: rem(70);
6135
- height: rem(90);
6136
- color: $wb-white;
6137
- pointer-events: none;
6138
- }
6139
-
6140
- &--small {
6141
- &:before {
6142
- padding-top: 55.555555%;
6143
- }
6144
- }
6145
-
6146
- &--medium {
6147
- &:before {
6148
- padding-top: 66.668%;
6149
- }
6150
- }
6151
-
6152
- &--large {
6153
- &:before {
6154
- padding-top: 77.778%;
6155
- }
6156
- }
6157
- }
6158
-
6159
- > div {
6160
- position: relative;
6161
- overflow: hidden;
6162
-
6163
- > div {
6164
- background-size: cover;
6165
- background-position: center;
6166
- height: auto;
6167
- cursor: pointer;
6168
-
6169
- &:before {
6170
- background-color: rgba($wb-main-text-color, 0);
6171
- content: ' ';
6172
- transition: 200ms all;
6173
- }
6174
-
6175
- &:hover {
6176
- &:before {
6177
- background-color: rgba($wb-main-text-color, 0.1);
6178
- }
6179
-
6180
- &:after {
6181
- top: -#{rem(25)};
6182
- opacity: 0.3;
6183
- }
6184
- }
6185
- }
6186
- }
6187
- }
6188
- }
6189
- span[class^='wb-dynamic-size'] {
6190
- top: 15px;
6191
- }
6192
- }
6193
6193
  .wb-four-images-title {
6194
6194
  position: relative;
6195
6195
  overflow: hidden;
@@ -14896,12 +14896,12 @@ $color-bd: #dddddd;
14896
14896
  position: relative;
14897
14897
  min-height: 220px;
14898
14898
 
14899
- &__containerconfig {
14899
+ &__containerconfig {
14900
14900
  overflow: hidden;
14901
14901
  position: relative;
14902
14902
 
14903
- > .columns {
14904
- > .column {
14903
+ >.columns {
14904
+ >.column {
14905
14905
  &:first-child {
14906
14906
  border-right: rem(15) solid $wb-white;
14907
14907
  }
@@ -14909,11 +14909,11 @@ $color-bd: #dddddd;
14909
14909
  }
14910
14910
  }
14911
14911
 
14912
- .wb-structure-config.is-right-bottom {
14913
- .wb-structure-config__tools {
14914
- bottom: rem(90);
14915
- }
14912
+ .wb-structure-config.is-right-bottom {
14913
+ .wb-structure-config__tools {
14914
+ bottom: rem(90);
14916
14915
  }
14916
+ }
14917
14917
 
14918
14918
  .columns {
14919
14919
  margin-bottom: 0 !important;
@@ -14950,8 +14950,8 @@ $color-bd: #dddddd;
14950
14950
  pointer-events: none;
14951
14951
 
14952
14952
  &__images {
14953
- > div {
14954
- > div {
14953
+ >div {
14954
+ >div {
14955
14955
  pointer-events: all;
14956
14956
  cursor: pointer;
14957
14957
  }
@@ -14990,6 +14990,7 @@ $color-bd: #dddddd;
14990
14990
  &:before {
14991
14991
  padding-top: 39.7%;
14992
14992
  }
14993
+
14993
14994
  &.wb-slider-double-imageright__noimages--two {
14994
14995
  &:before {
14995
14996
  padding-top: 57.1%;
@@ -15001,6 +15002,7 @@ $color-bd: #dddddd;
15001
15002
  &:before {
15002
15003
  padding-top: 47.65%;
15003
15004
  }
15005
+
15004
15006
  &.wb-slider-double-imageright__noimages--two {
15005
15007
  &:before {
15006
15008
  padding-top: 68.9%;
@@ -15012,6 +15014,7 @@ $color-bd: #dddddd;
15012
15014
  &:before {
15013
15015
  padding-top: 55.56%;
15014
15016
  }
15017
+
15015
15018
  &.wb-slider-double-imageright__noimages--two {
15016
15019
  &:before {
15017
15020
  padding-top: 80.9%;
@@ -15089,6 +15092,7 @@ $color-bd: #dddddd;
15089
15092
  &:before {
15090
15093
  padding-top: 39.7%;
15091
15094
  }
15095
+
15092
15096
  &.wb-slider-double-imageright__container--two {
15093
15097
  &:before {
15094
15098
  padding-top: 57.1%;
@@ -15100,6 +15104,7 @@ $color-bd: #dddddd;
15100
15104
  &:before {
15101
15105
  padding-top: 47.65%;
15102
15106
  }
15107
+
15103
15108
  &.wb-slider-double-imageright__container--two {
15104
15109
  &:before {
15105
15110
  padding-top: 68.9%;
@@ -15111,6 +15116,7 @@ $color-bd: #dddddd;
15111
15116
  &:before {
15112
15117
  padding-top: 55.56%;
15113
15118
  }
15119
+
15114
15120
  &.wb-slider-double-imageright__container--two {
15115
15121
  &:before {
15116
15122
  padding-top: 80.9%;
@@ -15170,6 +15176,7 @@ $color-bd: #dddddd;
15170
15176
  &:before {
15171
15177
  padding-top: 39.7%;
15172
15178
  }
15179
+
15173
15180
  &.wb-slider-double-imageright__container__images__item--two {
15174
15181
  &:before {
15175
15182
  padding-top: 57.1%;
@@ -15181,6 +15188,7 @@ $color-bd: #dddddd;
15181
15188
  &:before {
15182
15189
  padding-top: 47.65%;
15183
15190
  }
15191
+
15184
15192
  &.wb-slider-double-imageright__container__images__item--two {
15185
15193
  &:before {
15186
15194
  padding-top: 68.9%;
@@ -15192,6 +15200,7 @@ $color-bd: #dddddd;
15192
15200
  &:before {
15193
15201
  padding-top: 55.56%;
15194
15202
  }
15203
+
15195
15204
  &.wb-slider-double-imageright__container__images__item--two {
15196
15205
  &:before {
15197
15206
  padding-top: 80.9%;
@@ -15200,11 +15209,11 @@ $color-bd: #dddddd;
15200
15209
  }
15201
15210
  }
15202
15211
 
15203
- > div {
15212
+ >div {
15204
15213
  position: relative;
15205
15214
  overflow: hidden;
15206
15215
 
15207
- > div {
15216
+ >div {
15208
15217
  background-size: cover;
15209
15218
  background-position: center;
15210
15219
  height: auto;
@@ -15237,7 +15246,7 @@ $color-bd: #dddddd;
15237
15246
  width: 100%;
15238
15247
  justify-content: center;
15239
15248
 
15240
- > span {
15249
+ >span {
15241
15250
  display: inline-block;
15242
15251
  width: rem(15);
15243
15252
  height: rem(15);
@@ -15366,12 +15375,17 @@ $color-bd: #dddddd;
15366
15375
  }
15367
15376
  }
15368
15377
  }
15378
+
15379
+ &>div:not(.is-active) {
15380
+ wb-structure-config {
15381
+ display: none;
15382
+ }
15383
+ }
15369
15384
  }
15370
15385
 
15371
15386
  .wb-slider-double-imageright__container__slider-selector.cdk-drag-placeholder {
15372
15387
  opacity: 0.2;
15373
- }
15374
- .wb-slider-fullpage {
15388
+ }.wb-slider-fullpage {
15375
15389
  overflow: hidden;
15376
15390
  position: relative;
15377
15391
  min-height: 220px;