@wizishop/wizi-block 15.0.83-beta → 15.0.84-beta

package/package.json

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

package/wizi-block.scss

@@ -1370,7 +1370,11 @@ wb-structure-config-extended-input {
 }
 
 wb-structure-tools {
+    position: absolute;
     z-index: 2;
+    left: 0;
+    width: 100%;
+    height: 1px;
 }
 
 .cdk-drag-dragging, .cdk-drag-preview {
@@ -1380,13 +1384,16 @@ wb-structure-tools {
 }
 .wb-component {
     &__container {
-        background-color: $wb-white;
         border: rem(2) solid $wb-wizishop-blue-light;
         @include simple_transition();
         padding: rem(60) rem(12) rem(12);
         border-radius: 3px;
         position: relative;
         z-index: 1;
+
+        &:focus-within {
+            z-index: 99999;
+        }
     }
 
     .wb-structure-tools {
@@ -1954,10 +1961,6 @@ html .ql-bubble {
     height: 21px;
 }
 
-.editorjs-focused {
-    z-index: 99 !important;
-}
-
 wz-editor {
     display: block;
     width: 100%;
@@ -2994,10 +2997,10 @@ wb-loader {
 }
 .wb-structure-tools {
     position: relative;
-    z-index: 9;
+    z-index: 1;
 
     &.hover {
-        z-index: 41;
+        z-index: 99999;
         background-color: $wizishop-blue !important;
     }
 
@@ -19625,9 +19628,18 @@ $color-bd: #dddddd;
         width: 100%;
         height: 100%;
         position: absolute;
+
+        &:focus-within {
+            z-index: 99;
+        }
     }
 
     > .columns {
+        position: relative;
+        z-index: 1;
+        &:focus-within {
+            z-index: 9999;
+        }
         .column {
             position: relative;
             z-index: 1;
@@ -19648,6 +19660,10 @@ $color-bd: #dddddd;
             overflow: hidden;
             height: 100%;
             position: absolute;
+
+            &:focus-within {
+                z-index: 99999;
+            }
         }
 
         &__text {
@@ -19661,6 +19677,10 @@ $color-bd: #dddddd;
             justify-content: center;
             pointer-events: none;
 
+            &:focus-within {
+                z-index: 99999;
+            }
+
             > div {
                 pointer-events: all;
                 text-align: center;
@@ -19861,12 +19881,21 @@ $color-bd: #dddddd;
         overflow: hidden;
         height: 100%;
         position: absolute;
+
+        &:focus-within {
+            z-index: 99999;
+        }
     }
 
     &__container {
         position: relative;
         height: 100%;
         padding: rem(50) 0;
+        z-index: 1;
+
+        &:focus-within {
+            z-index: 99999;
+        }
 
         &__text {
             position: relative;
@@ -19940,12 +19969,16 @@ $color-bd: #dddddd;
             overflow: hidden;
             height: 100%;
             position: absolute;
+
+            &:focus-within {
+                z-index: 99999;
+            }
         }
 
         &__text {
             position: relative;
             display: flex;
-            z-index: 2;
+            z-index: 1;
             width: 100%;
             height: 100%;
             align-content: center;
@@ -20022,6 +20055,10 @@ $color-bd: #dddddd;
         width: 100%;
         height: 100%;
         position: absolute;
+
+        &:focus-within {
+            z-index: 99;
+        }
     }
 
     .wb-texts-quadruple__middle-left {
@@ -20037,6 +20074,11 @@ $color-bd: #dddddd;
     }
 
     > .columns {
+        position: relative;
+        z-index: 1;
+        &:focus-within {
+            z-index: 9999;
+        }
         .column {
             position: relative;
             z-index: 1;
@@ -20379,6 +20421,10 @@ $color-bd: #dddddd;
         width: 100%;
         height: 100%;
         position: absolute;
+
+        &:focus-within {
+            z-index: 99;
+        }
     }
 
     .wb-texts-triple__middle {
@@ -20388,6 +20434,11 @@ $color-bd: #dddddd;
     }
 
     > .columns {
+        position: relative;
+        z-index: 1;
+        &:focus-within {
+            z-index: 9999;
+        }
         .column {
             position: relative;
             z-index: 1;