@wizishop/wizi-block 15.0.26-beta → 15.0.27-beta

package/package.json

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

package/wizi-block.scss

@@ -4547,7 +4547,7 @@ $color-bd: #dddddd;
     min-height: 80px;
     width: 100%;
 }
-.wb-forms-imageleft {
+.wb-forms-imageright {
     padding: 0;
     position: relative;
     min-height: rem(500);
@@ -4592,8 +4592,6 @@ $color-bd: #dddddd;
                 text-align: center;
                 font-size: rem(14);
                 color: $wb-secondary-text-color;
-                width: auto;
-                white-space: nowrap;
 
                 &:before {
                     position: absolute;
@@ -4820,7 +4818,7 @@ $color-bd: #dddddd;
     min-height: 80px;
     width: 100%;
 }
-.wb-forms-imageright {
+.wb-forms-imageleft {
     padding: 0;
     position: relative;
     min-height: rem(500);
@@ -4865,6 +4863,8 @@ $color-bd: #dddddd;
                 text-align: center;
                 font-size: rem(14);
                 color: $wb-secondary-text-color;
+                width: auto;
+                white-space: nowrap;
 
                 &:before {
                     position: absolute;
@@ -13490,116 +13490,6 @@ $color-bd: #dddddd;
 .column-max-width-50 {
     max-width: 50% !important;
 }
-.wb-products-list-simple {
-    min-height: rem(540);
-    position: relative;
-
-    > div {
-        &:first-child {
-            width: 100%;
-            overflow: hidden;
-            height: 100%;
-            position: absolute;
-        }
-    }
-
-    &__nolist {
-        p {
-            text-align: center;
-            font-size: rem(20);
-            padding: rem(60) 0;
-            font-weight: 300;
-        }
-    }
-
-    &__text {
-        padding: rem(20) 0 0;
-    }
-
-    &__list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        transform: translateX(-20px);
-        width: calc(100% + 40px);
-        padding: 30px 20px 10px 20px;
-
-        > div {
-            width: calc(33.33% - 40px);
-            box-sizing: border-box;
-            margin: 0 20px 10px 20px;
-            text-align: center;
-            overflow: hidden;
-            position: relative;
-
-            .nb-ligne-1 & {
-                &:nth-child(4),
-                &:nth-child(5),
-                &:nth-child(6),
-                &:nth-child(7),
-                &:nth-child(8),
-                &:nth-child(9) {
-                    display: none;
-                }
-            }
-            .nb-ligne-2 & {
-                &:nth-child(7),
-                &:nth-child(8),
-                &:nth-child(9) {
-                    display: none;
-                }
-            }
-
-            &:nth-child(2),
-            &:hover {
-                > div {
-                    opacity: 1;
-                }
-            }
-
-            > div {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                background-color: rgba(255, 255, 255, 0.7);
-                margin: 0;
-                align-content: center;
-                justify-content: center;
-                align-items: center;
-                justify-items: center;
-                display: flex;
-                flex-direction: column;
-                opacity: 0;
-                @include simple_transition();
-
-                p {
-                    bottom: 0;
-                    width: 100%;
-
-                    &:first-of-type {
-                        font-weight: 600;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                        padding: 0 rem(35);
-                        bottom: rem(20);
-                    }
-                }
-
-                a {
-                    display: inline-block;
-                    padding: rem(10) rem(15);
-                    background-color: $wb-main-color;
-                    color: $wb-white;
-                    border-radius: rem(5);
-                    margin-top: rem(5);
-                }
-            }
-        }
-    }
-}
 .wb-quotes-author {
   > div {
     padding-bottom: rem(30);
@@ -16851,6 +16741,116 @@ $color-bd: #dddddd;
     padding: rem(40);
   }
 }
+.wb-products-list-simple {
+    min-height: rem(540);
+    position: relative;
+
+    > div {
+        &:first-child {
+            width: 100%;
+            overflow: hidden;
+            height: 100%;
+            position: absolute;
+        }
+    }
+
+    &__nolist {
+        p {
+            text-align: center;
+            font-size: rem(20);
+            padding: rem(60) 0;
+            font-weight: 300;
+        }
+    }
+
+    &__text {
+        padding: rem(20) 0 0;
+    }
+
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        transform: translateX(-20px);
+        width: calc(100% + 40px);
+        padding: 30px 20px 10px 20px;
+
+        > div {
+            width: calc(33.33% - 40px);
+            box-sizing: border-box;
+            margin: 0 20px 10px 20px;
+            text-align: center;
+            overflow: hidden;
+            position: relative;
+
+            .nb-ligne-1 & {
+                &:nth-child(4),
+                &:nth-child(5),
+                &:nth-child(6),
+                &:nth-child(7),
+                &:nth-child(8),
+                &:nth-child(9) {
+                    display: none;
+                }
+            }
+            .nb-ligne-2 & {
+                &:nth-child(7),
+                &:nth-child(8),
+                &:nth-child(9) {
+                    display: none;
+                }
+            }
+
+            &:nth-child(2),
+            &:hover {
+                > div {
+                    opacity: 1;
+                }
+            }
+
+            > div {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                background-color: rgba(255, 255, 255, 0.7);
+                margin: 0;
+                align-content: center;
+                justify-content: center;
+                align-items: center;
+                justify-items: center;
+                display: flex;
+                flex-direction: column;
+                opacity: 0;
+                @include simple_transition();
+
+                p {
+                    bottom: 0;
+                    width: 100%;
+
+                    &:first-of-type {
+                        font-weight: 600;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        padding: 0 rem(35);
+                        bottom: rem(20);
+                    }
+                }
+
+                a {
+                    display: inline-block;
+                    padding: rem(10) rem(15);
+                    background-color: $wb-main-color;
+                    color: $wb-white;
+                    border-radius: rem(5);
+                    margin-top: rem(5);
+                }
+            }
+        }
+    }
+}
 .wb-socials-page-complex {
   padding: rem(30);
 
@@ -17961,6 +17961,9 @@ $color-bd: #dddddd;
                 pointer-events: all;
                 text-align: center;
                 width: 100%;
+                max-height: calc(100% - 40px);
+                overflow-y: scroll;
+                overflow-x: hidden;
 
                 > div {
                     &:first-child {
@@ -19474,17 +19477,49 @@ $color-bd: #dddddd;
         }
     }
 }
-.wb-texts-one-background {
+.wb-texts-quadruple {
     position: relative;
-    z-index: 8;
 
     &.is-active {
         z-index: 40;
     }
 
+    &__config {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+    }
+
+    .wb-texts-quadruple__middle-left {
+        .wb-structure-config.is-right-top .wb-structure-config__tools {
+            right: calc(50% + #{rem(18)});
+        }
+    }
+
+    .wb-texts-quadruple__middle-right {
+        .wb-structure-config.is-right-top .wb-structure-config__tools {
+            right: calc(25% + #{rem(18)});
+        }
+    }
+
+    > .columns {
+        .column {
+            position: relative;
+            z-index: 1;
+
+            &:nth-child(1),
+            &:nth-child(2),
+            &:nth-child(3) {
+                border-right: rem(15) solid $wb-white;
+            }
+        }
+    }
+
     &__container {
         position: relative;
         height: 100%;
+        padding: rem(50) 0;
 
         &__tools {
             width: 100%;
@@ -19503,25 +19538,26 @@ $color-bd: #dddddd;
             align-self: center;
             justify-content: center;
             pointer-events: none;
-            padding: 0;
-
-            &.small {
-                padding: rem(50);
-            }
-
-            &.medium {
-                padding: rem(60);
-            }
-
-            &.large {
-                padding: rem(70);
-            }
 
             > div {
                 pointer-events: all;
                 text-align: center;
                 width: 100%;
-                padding: 0;
+                padding: rem(25);
+
+                .align-button & {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: flex-start;
+                    position: relative;
+                    flex-direction: column;
+                    padding-bottom: rem(38);
+                    > div:not(.is-button) {
+                        width: 100%;
+                    }
+                }
 
                 > div {
                     &:first-child {
@@ -19539,6 +19575,12 @@ $color-bd: #dddddd;
                         font-weight: 500;
                         margin-top: rem(12);
                         color: $wb-white;
+
+                        .align-button & {
+                            align-self: center;
+                            margin-top: auto;
+                            transform: translateY(12px);
+                        }
                     }
                 }
 
@@ -19555,49 +19597,17 @@ $color-bd: #dddddd;
         }
     }
 }
-.wb-texts-quadruple {
+.wb-texts-one-background {
     position: relative;
+    z-index: 8;
 
     &.is-active {
         z-index: 40;
     }
 
-    &__config {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
-
-    .wb-texts-quadruple__middle-left {
-        .wb-structure-config.is-right-top .wb-structure-config__tools {
-            right: calc(50% + #{rem(18)});
-        }
-    }
-
-    .wb-texts-quadruple__middle-right {
-        .wb-structure-config.is-right-top .wb-structure-config__tools {
-            right: calc(25% + #{rem(18)});
-        }
-    }
-
-    > .columns {
-        .column {
-            position: relative;
-            z-index: 1;
-
-            &:nth-child(1),
-            &:nth-child(2),
-            &:nth-child(3) {
-                border-right: rem(15) solid $wb-white;
-            }
-        }
-    }
-
     &__container {
         position: relative;
         height: 100%;
-        padding: rem(50) 0;
 
         &__tools {
             width: 100%;
@@ -19616,26 +19626,25 @@ $color-bd: #dddddd;
             align-self: center;
             justify-content: center;
             pointer-events: none;
+            padding: 0;
+
+            &.small {
+                padding: rem(50);
+            }
+
+            &.medium {
+                padding: rem(60);
+            }
+
+            &.large {
+                padding: rem(70);
+            }
 
             > div {
                 pointer-events: all;
                 text-align: center;
                 width: 100%;
-                padding: rem(25);
-
-                .align-button & {
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: center;
-                    align-content: center;
-                    justify-content: flex-start;
-                    position: relative;
-                    flex-direction: column;
-                    padding-bottom: rem(38);
-                    > div:not(.is-button) {
-                        width: 100%;
-                    }
-                }
+                padding: 0;
 
                 > div {
                     &:first-child {
@@ -19653,12 +19662,6 @@ $color-bd: #dddddd;
                         font-weight: 500;
                         margin-top: rem(12);
                         color: $wb-white;
-
-                        .align-button & {
-                            align-self: center;
-                            margin-top: auto;
-                            transform: translateY(12px);
-                        }
                     }
                 }