@wizishop/wizi-block 15.0.32-beta → 15.0.33-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 +29 -89
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wizishop/wizi-block",
3
- "version": "15.0.32-beta",
3
+ "version": "15.0.33-beta",
4
4
  "description": "## To use WiziBlock, you have to :",
5
5
  "repository": {
6
6
  "type": "git",
package/wizi-block.scss CHANGED
@@ -17917,34 +17917,24 @@ $color-bd: #dddddd;
17917
17917
  }
17918
17918
 
17919
17919
  &__container {
17920
+ @include flexbox();
17921
+ @include align-items(center);
17922
+ @include justify-content(center);
17920
17923
  position: relative;
17921
17924
  height: auto;
17922
-
17923
- &:before {
17924
- content: '';
17925
- display: block;
17926
- width: 100%;
17927
- position: relative;
17928
- padding-top: 31%;
17929
- transition: padding 300ms ease;
17930
- }
17925
+ padding: 20px 0;
17926
+ transition: aspect-ratio .3s ease-in-out;
17931
17927
 
17932
17928
  &--small {
17933
- &:before {
17934
- padding-top: 27.5%;
17935
- }
17929
+ aspect-ratio: 40 / 11;
17936
17930
  }
17937
17931
 
17938
17932
  &--medium {
17939
- &:before {
17940
- padding-top: 33%;
17941
- }
17933
+ aspect-ratio: 100 / 33;
17942
17934
  }
17943
17935
 
17944
17936
  &--large {
17945
- &:before {
17946
- padding-top: 38.47%;
17947
- }
17937
+ aspect-ratio: 200 / 77;
17948
17938
  }
17949
17939
 
17950
17940
  &__images {
@@ -18021,29 +18011,22 @@ $color-bd: #dddddd;
18021
18011
  }
18022
18012
 
18023
18013
  &__text {
18024
- position: absolute;
18014
+ position: relative;
18025
18015
  display: flex;
18026
18016
  z-index: 2;
18027
- width: 100%;
18028
- height: 100%;
18029
- color: $wb-white;
18030
18017
  align-content: center;
18031
18018
  align-items: center;
18032
18019
  align-self: center;
18033
18020
  justify-content: center;
18034
18021
  pointer-events: none;
18035
- top: 0;
18036
- left: 0;
18037
18022
 
18038
18023
  > div {
18039
18024
  @include flexbox();
18040
18025
  @include flex-direction(column);
18026
+ @include justify-content(center);
18041
18027
  pointer-events: all;
18042
18028
  text-align: center;
18043
18029
  width: 100%;
18044
- max-height: calc(100% - 40px);
18045
- overflow-y: scroll;
18046
- overflow-x: hidden;
18047
18030
 
18048
18031
  > div {
18049
18032
  &:first-child {
@@ -18879,47 +18862,31 @@ $color-bd: #dddddd;
18879
18862
  @include flex-direction(column);
18880
18863
 
18881
18864
  &__img {
18865
+ @include flexbox();
18866
+ @include justify-content(center);
18867
+ @include align-items(center);
18882
18868
  position: relative;
18869
+ padding: 20px 0;
18883
18870
  background-size: cover;
18884
18871
  background-position: center;
18885
18872
 
18886
- &:before {
18887
- content: '';
18888
- display: block;
18889
- width: 100%;
18890
- position: relative;
18891
- padding-top: 33%;
18892
- transition: padding 300ms ease;
18893
- }
18894
-
18895
18873
  &--small {
18896
- &:before {
18897
- padding-top: 27.5%;
18898
- }
18874
+ aspect-ratio: 40 / 11;
18899
18875
  }
18900
-
18876
+
18901
18877
  &--medium {
18902
- &:before {
18903
- padding-top: 33%;
18904
- }
18878
+ aspect-ratio: 100 / 33;
18905
18879
  }
18906
-
18880
+
18907
18881
  &--large {
18908
- &:before {
18909
- padding-top: 38.47%;
18910
- }
18882
+ aspect-ratio: 200 / 77;
18911
18883
  }
18912
18884
 
18913
18885
  &__text {
18914
18886
  @include flexbox();
18915
18887
  @include flex-direction(column);
18916
18888
  @include justify-content(center);
18917
- position: absolute;
18918
- width: 100%;
18919
- height: 100%;
18920
- top: 0;
18921
- left: 0;
18922
- overflow-y: scroll;
18889
+ position: relative;
18923
18890
 
18924
18891
  &:before {
18925
18892
  position: absolute;
@@ -18967,16 +18934,6 @@ $color-bd: #dddddd;
18967
18934
 
18968
18935
  &__content {
18969
18936
  z-index: 50;
18970
- max-height: 300px;
18971
- overflow-y: scroll;
18972
-
18973
- &__title,
18974
- &__text {
18975
- .ql-editor {
18976
- max-height: 150px;
18977
- overflow-y: auto;
18978
- }
18979
- }
18980
18937
  }
18981
18938
  }
18982
18939
  }
@@ -19096,34 +19053,24 @@ $color-bd: #dddddd;
19096
19053
  }
19097
19054
 
19098
19055
  &__container {
19056
+ @include flexbox();
19057
+ @include justify-content(center);
19058
+ @include align-items(center);
19099
19059
  position: relative;
19100
19060
  height: auto;
19101
-
19102
- &:before {
19103
- content: '';
19104
- display: block;
19105
- width: 100%;
19106
- position: relative;
19107
- padding-top: 31%;
19108
- transition: padding 300ms ease;
19109
- }
19061
+ padding: 20px 0;
19062
+ transition: aspect-ratio .3s ease-in-out;
19110
19063
 
19111
19064
  &--small {
19112
- &:before {
19113
- padding-top: 27.5%;
19114
- }
19065
+ aspect-ratio: 40 / 11;
19115
19066
  }
19116
19067
 
19117
19068
  &--medium {
19118
- &:before {
19119
- padding-top: 33%;
19120
- }
19069
+ aspect-ratio: 100 / 33;
19121
19070
  }
19122
19071
 
19123
19072
  &--large {
19124
- &:before {
19125
- padding-top: 38.47%;
19126
- }
19073
+ aspect-ratio: 200 / 77;
19127
19074
  }
19128
19075
 
19129
19076
  &__images {
@@ -19200,18 +19147,14 @@ $color-bd: #dddddd;
19200
19147
  }
19201
19148
 
19202
19149
  &__text {
19203
- position: absolute;
19150
+ position: relative;
19204
19151
  display: flex;
19205
19152
  z-index: 2;
19206
- width: 100%;
19207
- height: 100%;
19208
19153
  align-content: center;
19209
19154
  align-items: center;
19210
19155
  align-self: center;
19211
19156
  justify-content: center;
19212
19157
  pointer-events: none;
19213
- top: 0;
19214
- left: 0;
19215
19158
 
19216
19159
  > div {
19217
19160
  padding: 5px 15px;
@@ -19220,9 +19163,6 @@ $color-bd: #dddddd;
19220
19163
  width: 100%;
19221
19164
  background-color: $wb-white;
19222
19165
  margin: 0 rem(100);
19223
- max-height: calc(100% - 40px);
19224
- overflow-y: scroll;
19225
- overflow-x: hidden;
19226
19166
 
19227
19167
  > div {
19228
19168
  &:first-child {