Fix Compatibility with Twenty Twenty theme

elementor · Mar 24, 2021 · 708a19f · 708a19f
1 parent 89b2895
commit 708a19f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,4 +1,3 @@
-/*! pojo-accessibility - v2.0.3 - 28-05-2018 */
 #pojo-a11y-toolbar {
   position: fixed;
   font-size: 16px !important;
@@ -31,11 +30,6 @@
 #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
   left: 180px;
 }
-#pojo-a11y-toolbar.pojo-a11y-toolbar-open .pojo-a11y-toolbar-toggle,
-#pojo-a11y-toolbar.pojo-a11y-toolbar-open .pojo-a11y-toolbar-overlay {
-  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-}
 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
   position: absolute;
 }
@@ -52,6 +46,9 @@
   -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
 }
+#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
+  max-width: inherit;
+}
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
   border: 1px solid;
   font-size: 100%;
@@ -64,6 +61,11 @@
   padding: 10px 15px 0;
   margin: 0;
 }
+#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay.pojo-a11y-toolbar-open .pojo-a11y-toolbar-toggle a,
+#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay.pojo-a11y-toolbar-open .pojo-a11y-toolbar-overlay {
+  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+}
 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items {
   list-style: none;
   margin: 0;
@@ -1452,9 +1454,9 @@ body.rtl .pojo-skip-link:focus {
   right: 50px;
   left: auto;
 }
-*,
-::before,
-::after {
+#pojo-a11y-toolbar *,
+#pojo-a11y-toolbar ::before,
+#pojo-a11y-toolbar ::after {
   box-sizing: border-box;
 }
 .pojo-a11y-visible-phone {

diff --git a/assets/css/style.min.css b/assets/css/style.min.css
diff --git a/assets/less/_toolbar.less b/assets/less/_toolbar.less
@@ -37,14 +37,6 @@
 	.pojo-a11y-toolbar-position(right);
 	.pojo-a11y-toolbar-position(left);
 
-	&.pojo-a11y-toolbar-open {
-		.pojo-a11y-toolbar-toggle,
-		.pojo-a11y-toolbar-overlay {
-			-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-			box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
-		}
-	}
-
 	.pojo-a11y-toolbar-toggle {
 		position: absolute;
 
@@ -62,6 +54,10 @@
 				box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
 			}
 		}
+
+		svg {
+			max-width: inherit; //Compatibility for Twenty Twenty theme `svg {max-width:100%;}`
+		}
 	}
 
 	.pojo-a11y-toolbar-overlay {
@@ -77,6 +73,15 @@
 			margin: 0;
 		}
 
+		&.pojo-a11y-toolbar-open {
+
+			.pojo-a11y-toolbar-toggle a,
+			.pojo-a11y-toolbar-overlay {
+				-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+				box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+			}
+		}
+
 		ul.pojo-a11y-toolbar-items {
 			list-style: none;
 			margin: 0;

diff --git a/assets/less/style.less b/assets/less/style.less
@@ -50,8 +50,13 @@ body.rtl {
 	}
 }
 
-*, ::before, ::after {
-    box-sizing: border-box;
+#pojo-a11y-toolbar {
+
+	*,
+	::before,
+	::after {
+		box-sizing: border-box;
+	}
 }
 
-@import "_visibility";
+@import "_visibility";
diff --git a/package.json b/package.json
@@ -23,4 +23,4 @@
 		"grunt-wp-deploy": "~1.2.1",
 		"matchdep": "~2.0.0"
 	}
-}
+}