Parcourir la source

Friendly Business: Fixes padding and uneven margin issues in column blocks.

Allan Cole il y a 6 ans
Parent
commit
aed7e517f5

+ 7 - 2
friendly-business/sass/blocks/_blocks.scss

@@ -873,15 +873,20 @@
 			}
 
 			&[class*='has-'] > * {
+
+				margin-left: $size__spacing-unit;
 				margin-right: $size__spacing-unit;
 
+				&:first-child {
+					margin-left: 0;
+				}
+
 				&:last-child {
 					margin-right: 0;
 				}
 			}
 
-			&.alignfull,
-			&.alignfull .wp-block-column {
+			&.alignfull {
 				padding-left: calc(2 * #{$size__spacing-unit});
 				padding-right: calc(2 * #{$size__spacing-unit});
 			}

+ 73 - 2
friendly-business/style-rtl.css

@@ -1231,6 +1231,17 @@ body.page .main-navigation {
   margin-left: calc( .25 * 1rem);
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
+  display: block;
+  right: 0;
+  margin-top: 0;
+  opacity: 1;
+  width: auto;
+  min-width: 100%;
+  /* Non-mobile position */
+  /* Nested sub-menu dashes */
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
   display: block;
   right: 0;
@@ -1243,6 +1254,21 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
+    display: block;
+    margin-top: 0;
+    opacity: 1;
+    position: absolute;
+    right: 0;
+    left: auto;
+    top: auto;
+    bottom: auto;
+    height: auto;
+    min-width: -moz-max-content;
+    min-width: -webkit-max-content;
+    min-width: max-content;
+    transform: none;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
     display: block;
     margin-top: 0;
@@ -1260,6 +1286,13 @@ body.page .main-navigation {
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
+  right: 0;
+  width: 100%;
+  display: table;
+  position: absolute;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
   right: 0;
   width: 100%;
@@ -1268,6 +1301,12 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
+    left: 0;
+    right: auto;
+    display: block;
+    width: max-content;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
     left: 0;
     right: auto;
@@ -1276,10 +1315,24 @@ body.page .main-navigation {
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
+  display: none;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
   display: none;
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+  display: block;
+  margin-top: inherit;
+  position: relative;
+  width: 100%;
+  right: 0;
+  opacity: 1;
+  /* Non-mobile position */
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   display: block;
   margin-top: inherit;
@@ -1291,16 +1344,31 @@ body.page .main-navigation {
 }
 
 @media only screen and (min-width: 768px) {
+  .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+    float: none;
+    max-width: 100%;
+  }
   .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
     float: none;
     max-width: 100%;
   }
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
+  counter-reset: submenu;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
   counter-reset: submenu;
 }
 
+.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
+  font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+  font-weight: normal;
+  content: "– " counters(submenu, "– ", none);
+  counter-increment: submenu;
+}
+
 .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
   font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
   font-weight: normal;
@@ -4193,13 +4261,16 @@ body.page .main-navigation {
     margin-bottom: 0;
   }
   .entry .entry-content .wp-block-columns[class*='has-'] > * {
+    margin-right: 1rem;
     margin-left: 1rem;
   }
+  .entry .entry-content .wp-block-columns[class*='has-'] > *:first-child {
+    margin-right: 0;
+  }
   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
     margin-left: 0;
   }
-  .entry .entry-content .wp-block-columns.alignfull,
-  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
+  .entry .entry-content .wp-block-columns.alignfull {
     padding-right: calc(2 * 1rem);
     padding-left: calc(2 * 1rem);
   }

+ 5 - 2
friendly-business/style.css

@@ -4273,13 +4273,16 @@ body.page .main-navigation {
     margin-bottom: 0;
   }
   .entry .entry-content .wp-block-columns[class*='has-'] > * {
+    margin-left: 1rem;
     margin-right: 1rem;
   }
+  .entry .entry-content .wp-block-columns[class*='has-'] > *:first-child {
+    margin-left: 0;
+  }
   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
     margin-right: 0;
   }
-  .entry .entry-content .wp-block-columns.alignfull,
-  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
+  .entry .entry-content .wp-block-columns.alignfull {
     padding-left: calc(2 * 1rem);
     padding-right: calc(2 * 1rem);
   }