@wizishop/wizi-block 3.3.37 → 3.3.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/wizi-block",
-  "version": "3.3.37",
+  "version": "3.3.38",
   "description": "## To use WiziBlock, you have to :",
   "repository": {
     "type": "git",

package/wizi-block.scss

@@ -537,135 +537,6 @@ $transition-base-time: 200ms !default;
     padding-top: rem(12);
   }
 }
-.wb-configs {
-    .button.is-info {
-        margin: 0 rem(5) rem(5) 0;
-        border-color: $wb-border-color;
-        font-size: 0.875rem !important;
-        padding-left: 10px;
-        padding-right: 10px;
-
-        &:last-child {
-            margin-right: rem(0);
-        }
-    }
-
-    &__color {
-        width: rem(40);
-        height: rem(40);
-        border-radius: rem(40);
-        cursor: pointer;
-        border: rem(2) solid $wb-border-color;
-    }
-
-    &__picker {
-        max-height: 0;
-        overflow: hidden;
-        @include simple_transition();
-
-        .color-picker {
-            border: rem(1) solid $wb-border-color;
-            width: 95% !important;
-            margin: rem(12) auto auto;
-
-            &:before {
-                position: absolute;
-                content: '';
-                bottom: 100%;
-                left: rem(10);
-                margin-left: -(rem(8));
-                width: 0;
-                height: 0;
-                border-bottom: rem(8) solid $wb-border-color;
-                border-right: rem(8) solid transparent;
-                border-left: rem(8) solid transparent;
-            }
-
-            .box {
-                border: 0 !important;
-                margin-bottom: 0;
-            }
-
-            .type-policy {
-                top: rem(215);
-            }
-        }
-
-        &.is-active {
-            max-height: 1000px;
-        }
-    }
-
-    .help {
-        a {
-            display: inline-block;
-            position: relative;
-            color: $wb-main-color;
-            @include simple_transition();
-
-            &:before {
-                content: '';
-                width: 0;
-                height: rem(1);
-                position: absolute;
-                bottom: -#{rem(4px)};
-                background-color: $wb-main-color-hover;
-                @include simple_transition();
-            }
-
-            &:hover {
-                color: $wb-main-color-hover;
-
-                &:before {
-                    width: 100%;
-                }
-            }
-        }
-    }
-
-    .icon-help {
-        position: relative;
-        .fa-info-circle {
-            top: rem(-5);
-            padding: 0.5rem 0.5rem 0 0.3rem;
-            span {
-                display: none;
-                font-weight: 300;
-            }
-            &:hover {
-                span {
-                    display: block;
-                    position: absolute;
-                    background-color: $white;
-                    color: $main-text;
-                    left: 0;
-                    top: rem(25);
-                    border: 1px solid $wb-border-color;
-                    padding: 0.25rem 0.5rem;
-                    z-index: 100;
-                    text-align: justify;
-                    font-family: 'Work Sans', helvetica, serif;
-                    font-weight: 300;
-                    font-size: rem(13);
-                    &:hover {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* Firefox */
-input[type='number'] {
-    -moz-appearance: textfield;
-}
 .wb-structure-config {
     position: absolute;
     height: 100%;
@@ -966,6 +837,135 @@ input[type='number'] {
         pointer-events: all;
     }
 }
+.wb-configs {
+    .button.is-info {
+        margin: 0 rem(5) rem(5) 0;
+        border-color: $wb-border-color;
+        font-size: 0.875rem !important;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        &:last-child {
+            margin-right: rem(0);
+        }
+    }
+
+    &__color {
+        width: rem(40);
+        height: rem(40);
+        border-radius: rem(40);
+        cursor: pointer;
+        border: rem(2) solid $wb-border-color;
+    }
+
+    &__picker {
+        max-height: 0;
+        overflow: hidden;
+        @include simple_transition();
+
+        .color-picker {
+            border: rem(1) solid $wb-border-color;
+            width: 95% !important;
+            margin: rem(12) auto auto;
+
+            &:before {
+                position: absolute;
+                content: '';
+                bottom: 100%;
+                left: rem(10);
+                margin-left: -(rem(8));
+                width: 0;
+                height: 0;
+                border-bottom: rem(8) solid $wb-border-color;
+                border-right: rem(8) solid transparent;
+                border-left: rem(8) solid transparent;
+            }
+
+            .box {
+                border: 0 !important;
+                margin-bottom: 0;
+            }
+
+            .type-policy {
+                top: rem(215);
+            }
+        }
+
+        &.is-active {
+            max-height: 1000px;
+        }
+    }
+
+    .help {
+        a {
+            display: inline-block;
+            position: relative;
+            color: $wb-main-color;
+            @include simple_transition();
+
+            &:before {
+                content: '';
+                width: 0;
+                height: rem(1);
+                position: absolute;
+                bottom: -#{rem(4px)};
+                background-color: $wb-main-color-hover;
+                @include simple_transition();
+            }
+
+            &:hover {
+                color: $wb-main-color-hover;
+
+                &:before {
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    .icon-help {
+        position: relative;
+        .fa-info-circle {
+            top: rem(-5);
+            padding: 0.5rem 0.5rem 0 0.3rem;
+            span {
+                display: none;
+                font-weight: 300;
+            }
+            &:hover {
+                span {
+                    display: block;
+                    position: absolute;
+                    background-color: $white;
+                    color: $main-text;
+                    left: 0;
+                    top: rem(25);
+                    border: 1px solid $wb-border-color;
+                    padding: 0.25rem 0.5rem;
+                    z-index: 100;
+                    text-align: justify;
+                    font-family: 'Work Sans', helvetica, serif;
+                    font-weight: 300;
+                    font-size: rem(13);
+                    &:hover {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+    -moz-appearance: textfield;
+}
 @function rem($pxval) {
   @if not unitless($pxval) {
     $pxval: strip-unit($pxval);
@@ -1550,187 +1550,39 @@ input[type='number'] {
                     box-shadow: none;
                     border: none;
                     font-weight: 600;
-                    font-size: rem(16);
-                }
-            }
-        }
-    }
-}
-.wb-blocks {
-    position: relative;
-    z-index: 1;
-
-    span[class^='wb-dynamic-size'] {
-        position: absolute;
-        color: $wb-secondary-text-color;
-        top: 1vw !important;
-        font-size: rem(14);
-        text-align: center;
-        width: rem(200);
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-
-    .button.is-hidden-button.is-rounded {
-        padding: rem(8) rem(8);
-        border: rem(1) solid transparent;
-        position: absolute;
-        top: -#{rem(26)};
-        right: -#{rem(55)};
-        @include media('<=#{$block-width-mobile * 1.4}') {
-            right: -#{rem(26)};
-        }
-        z-index: 11000;
-        width: rem(36);
-        @include simple_transition();
-
-        &:not(.is-danger) {
-            color: lighten($wb-secondary-text-color, 20%);
-            @include media('>=1419px', '<1515px') {
-                right: -20px !important;
-            }
-
-            &:hover {
-                background-color: lighten($wb-secondary-text-color, 20%);
-                color: $wb-white;
-            }
-        }
-    }
-
-    &__container {
-        padding-bottom: rem(30);
-        display: block;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-
-        .wb-component__container {
-            display: block;
-            height: 100%;
-            width: 100%;
-            position: relative;
-        }
-    }
-
-    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
-        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
-
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-
-            &__frame {
-                display: none !important;
-            }
-        }
-    }
-
-    &.cdk-drop-list-dragging {
-        .wb-videos-simple,
-        .wb-videos-txt,
-        .wb-videos-txt-left,
-        .wb-videos-txt-content {
-            &__fakeframe {
-                display: flex !important;
-            }
-            &__frame {
-                display: none !important;
-            }
-        }
-
-        .wb-component__container {
-            border: rem(2) solid $wb-secondary-color !important;
-        }
-    }
-
-    &-empty {
-        text-align: center;
-        background-color: lighten($wb-border-color, 13%);
-        padding: rem(80);
-        margin-bottom: rem(30);
-
-        img {
-            width: rem(75);
-            margin: 0 auto;
-            display: block;
-        }
-
-        p {
-            &:first-of-type {
-                font-size: rem(16);
-                font-weight: 500;
-                color: $wb-main-text-color;
-                margin: rem(20);
-            }
-
-            &:last-of-type {
-                font-size: rem(14);
-                font-weight: 400;
-                color: $wb-secondary-text-color;
+                    font-size: rem(16);
+                }
             }
         }
     }
 }
-
-.wb-blocks__container.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
-    }
-}
-
-.wb-blocks__container.cdk-drag-placeholder {
-    opacity: 0.2;
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+.wb-previews {
+  &__iframe {
+    opacity: 0;
+    width: 100%;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
+    overflow-y: scroll;
+    &.is-active {
+      opacity: 1;
     }
-}
+    border: rem(1) dashed $wb-border-color;
+  }
 
-.wb-blocks__container.cdk-drag-preview {
-    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
-    cursor: move;
+  &__loader {
+    display: none;
+    height: calc(100vh - #{rem(280)});
+    min-height: calc(100vh - #{rem(280)});
 
-    .wb-videos-simple,
-    .wb-videos-txt,
-    .wb-videos-txt-left,
-    .wb-videos-txt-content {
-        &__fakeframe {
-            display: flex !important;
-        }
-        &__frame {
-            display: none !important;
-        }
+    &.is-active {
+      display: block;
     }
-}
+  }
 
-.wb-component {
-    &.border-grey {
-        .wb-component__container {
-            border-color: darken(#95a5a6, 15%);
-        }
-    }
+  .wb-loader {
+    margin: 0 auto 1.875rem auto;
+    padding-top: rem(85);
+  }
 }
 .wb-product-zoom {
   //minimum search sized for product - no less needed
@@ -2660,182 +2512,182 @@ wb-loader {
     }
   }
 }
-.wb-previews {
-  &__iframe {
-    opacity: 0;
-    width: 100%;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
-    overflow-y: scroll;
-    &.is-active {
-      opacity: 1;
-    }
-    border: rem(1) dashed $wb-border-color;
-  }
-
-  &__loader {
-    display: none;
-    height: calc(100vh - #{rem(280)});
-    min-height: calc(100vh - #{rem(280)});
-
-    &.is-active {
-      display: block;
-    }
-  }
-
-  .wb-loader {
-    margin: 0 auto 1.875rem auto;
-    padding-top: rem(85);
-  }
-}
-.wb-product-zoom-more {
-  //minimum search sized for product - no less needed
-  min-height: rem(380);
-
-  .ql-editor {
-    padding: rem(5) 0;
-  }
-
-  &__selected {
-    padding: rem(30);
+.wb-blocks {
     position: relative;
-    z-index: 34;
-
-    &__container-selector {
-      position: absolute;
-      text-align: center;
-      z-index: 10;
-      left: 0;
-      right: 0;
-      margin: auto;
+    z-index: 1;
 
-      bottom: 50px;
+    span[class^='wb-dynamic-size'] {
+        position: absolute;
+        color: $wb-secondary-text-color;
+        top: 1vw !important;
+        font-size: rem(14);
+        text-align: center;
+        width: rem(200);
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
 
-      span {
-        width: rem(15);
-        height: rem(15);
-        background-color: $wb-border-color;
-        opacity: 0.8;
-        display: inline-block;
-        border-radius: 50%;
-        cursor: pointer;
-        margin-right: rem(7);
+    .button.is-hidden-button.is-rounded {
+        padding: rem(8) rem(8);
+        border: rem(1) solid transparent;
+        position: absolute;
+        top: -#{rem(26)};
+        right: -#{rem(55)};
+        @include media('<=#{$block-width-mobile * 1.4}') {
+            right: -#{rem(26)};
+        }
+        z-index: 11000;
+        width: rem(36);
         @include simple_transition();
 
-        &:last-child {
-          margin-right: 0;
-        }
+        &:not(.is-danger) {
+            color: lighten($wb-secondary-text-color, 20%);
+            @include media('>=1419px', '<1515px') {
+                right: -20px !important;
+            }
 
-        &.is-active,
-        &:hover {
-          opacity: 0.8;
-          background-color: $wb-button-color;
+            &:hover {
+                background-color: lighten($wb-secondary-text-color, 20%);
+                color: $wb-white;
+            }
         }
-      }
     }
-    &__container-image {
-      position: relative;
 
-      img {
-        margin-bottom: rem(30);
+    &__container {
+        padding-bottom: rem(30);
+        display: block;
+        height: 100%;
         width: 100%;
-        position: relative;
-        z-index: 1;
-        opacity: 1;
-        left: 0;
-        @include simple_transition();
-        margin-right: rem(30);
+        box-sizing: border-box;
 
-        &:last-child {
-          margin-right: rem(0);
+        .wb-component__container {
+            display: block;
+            height: 100%;
+            width: 100%;
+            position: relative;
         }
-      }
     }
 
-    &__container-other {
-      .column {
-        > h3 {
-          color: $wb-main-text-color;
-          font-size: rem(30);
-          font-weight: 600;
-          line-height: 30px;
-          margin-bottom: 25px;
-        }
-
-        > p {
-          margin: rem(10) 0 rem(30);
-          font-weight: 600;
+    &.cdk-drop-list-dragging .wb-blocks__container:not(.cdk-drag-placeholder) {
+        transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
 
-          &.is-variant {
-            margin: 0 0 rem(30);
-            padding: rem(20) rem(20);
-            font-weight: 400;
-            background-color: lighten($wb-border-color, 10%);
-            border-radius: rem(3);
-            position: relative;
-            user-select: none;
-            cursor: pointer;
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
 
-            &:before {
-              position: absolute;
-              content: '\f078';
-              right: rem(20);
-              top: 0;
-              bottom: 0;
-              font-family: 'Font Awesome 5 Pro';
-              color: $wb-main-text-color;
-              display: block;
-              margin: auto;
-              height: rem(20);
+            &__frame {
+                display: none !important;
             }
-          }
         }
+    }
 
-        > a {
-          text-transform: uppercase;
-          color: $wb-white;
-          font-weight: 600;
-          padding: rem(15) rem(30);
-          background-color: $wb-button-color;
-          border-radius: rem(3);
-          cursor: pointer;
-          display: inline-block;
-          float: right;
+    &.cdk-drop-list-dragging {
+        .wb-videos-simple,
+        .wb-videos-txt,
+        .wb-videos-txt-left,
+        .wb-videos-txt-content {
+            &__fakeframe {
+                display: flex !important;
+            }
+            &__frame {
+                display: none !important;
+            }
+        }
+
+        .wb-component__container {
+            border: rem(2) solid $wb-secondary-color !important;
         }
-      }
     }
-  }
 
-  &__product-config {
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-    position: absolute;
-    z-index: 35;
-    pointer-events: none;
-  }
+    &-empty {
+        text-align: center;
+        background-color: lighten($wb-border-color, 13%);
+        padding: rem(80);
+        margin-bottom: rem(30);
 
-  &__noproduct {
-    min-height: rem(380);
-    height: 100%;
-    padding: 0 rem(50);
-    display: flex;
-    align-content: center;
-    align-items: center;
-    width: 100%;
+        img {
+            width: rem(75);
+            margin: 0 auto;
+            display: block;
+        }
 
-    wb-structure-search-product {
-      width: 100%;
+        p {
+            &:first-of-type {
+                font-size: rem(16);
+                font-weight: 500;
+                color: $wb-main-text-color;
+                margin: rem(20);
+            }
+
+            &:last-of-type {
+                font-size: rem(14);
+                font-weight: 400;
+                color: $wb-secondary-text-color;
+            }
+        }
     }
-  }
 }
 
+.wb-blocks__container.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
 
+.wb-blocks__container.cdk-drag-placeholder {
+    opacity: 0.2;
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
 
+.wb-blocks__container.cdk-drag-preview {
+    box-shadow: 0 rem(30) rem(30) rgba(0, 0, 0, 0.2);
+    cursor: move;
 
+    .wb-videos-simple,
+    .wb-videos-txt,
+    .wb-videos-txt-left,
+    .wb-videos-txt-content {
+        &__fakeframe {
+            display: flex !important;
+        }
+        &__frame {
+            display: none !important;
+        }
+    }
+}
 
-
+.wb-component {
+    &.border-grey {
+        .wb-component__container {
+            border-color: darken(#95a5a6, 15%);
+        }
+    }
+}
 .wb-product-zoom-selected {
     //minimum search sized for product - no less needed
     min-height: rem(380);
@@ -2996,6 +2848,154 @@ wb-loader {
         }
     }
 }
+
+
+
+
+
+
+
+.wb-product-zoom-more {
+  //minimum search sized for product - no less needed
+  min-height: rem(380);
+
+  .ql-editor {
+    padding: rem(5) 0;
+  }
+
+  &__selected {
+    padding: rem(30);
+    position: relative;
+    z-index: 34;
+
+    &__container-selector {
+      position: absolute;
+      text-align: center;
+      z-index: 10;
+      left: 0;
+      right: 0;
+      margin: auto;
+
+      bottom: 50px;
+
+      span {
+        width: rem(15);
+        height: rem(15);
+        background-color: $wb-border-color;
+        opacity: 0.8;
+        display: inline-block;
+        border-radius: 50%;
+        cursor: pointer;
+        margin-right: rem(7);
+        @include simple_transition();
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.is-active,
+        &:hover {
+          opacity: 0.8;
+          background-color: $wb-button-color;
+        }
+      }
+    }
+    &__container-image {
+      position: relative;
+
+      img {
+        margin-bottom: rem(30);
+        width: 100%;
+        position: relative;
+        z-index: 1;
+        opacity: 1;
+        left: 0;
+        @include simple_transition();
+        margin-right: rem(30);
+
+        &:last-child {
+          margin-right: rem(0);
+        }
+      }
+    }
+
+    &__container-other {
+      .column {
+        > h3 {
+          color: $wb-main-text-color;
+          font-size: rem(30);
+          font-weight: 600;
+          line-height: 30px;
+          margin-bottom: 25px;
+        }
+
+        > p {
+          margin: rem(10) 0 rem(30);
+          font-weight: 600;
+
+          &.is-variant {
+            margin: 0 0 rem(30);
+            padding: rem(20) rem(20);
+            font-weight: 400;
+            background-color: lighten($wb-border-color, 10%);
+            border-radius: rem(3);
+            position: relative;
+            user-select: none;
+            cursor: pointer;
+
+            &:before {
+              position: absolute;
+              content: '\f078';
+              right: rem(20);
+              top: 0;
+              bottom: 0;
+              font-family: 'Font Awesome 5 Pro';
+              color: $wb-main-text-color;
+              display: block;
+              margin: auto;
+              height: rem(20);
+            }
+          }
+        }
+
+        > a {
+          text-transform: uppercase;
+          color: $wb-white;
+          font-weight: 600;
+          padding: rem(15) rem(30);
+          background-color: $wb-button-color;
+          border-radius: rem(3);
+          cursor: pointer;
+          display: inline-block;
+          float: right;
+        }
+      }
+    }
+  }
+
+  &__product-config {
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+    position: absolute;
+    z-index: 35;
+    pointer-events: none;
+  }
+
+  &__noproduct {
+    min-height: rem(380);
+    height: 100%;
+    padding: 0 rem(50);
+    display: flex;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+
+    wb-structure-search-product {
+      width: 100%;
+    }
+  }
+}
 .wb-component {
   &__container {
     background-color: $wb-white;
@@ -18498,6 +18498,7 @@ $color-bd: #dddddd;
             pointer-events: none;
 
             > div {
+                width: 100%;
                 pointer-events: all;
                 text-align: center;
                 background-color: $wb-white;
@@ -22593,6 +22594,7 @@ $color-size-choose: #6c6c6c;
             pointer-events: none;
 
             > div {
+                width: 100%;
                 pointer-events: all;
                 text-align: center;
                 background-color: $wb-white;