Sophisticated Business: Update to padding for full width columns

This commit is contained in:
Chris Runnells 2019-03-08 14:40:25 -10:00
parent 5514ff868d
commit 16c4fd40a2
3 changed files with 86 additions and 8 deletions

View file

@ -879,17 +879,21 @@
}
&[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 {
padding-left: calc(2 * #{$size__spacing-unit});
padding-right: calc(2 * #{$size__spacing-unit});
&.alignfull {
padding-left: calc(2 * 1rem);
padding-right: calc(2 * 1rem);
}
}
}

View file

@ -1239,6 +1239,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;
@ -1251,6 +1262,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;
@ -1268,6 +1294,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%;
@ -1276,6 +1309,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;
@ -1284,10 +1323,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;
@ -1299,16 +1352,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: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 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: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
@ -4248,13 +4316,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);
}

View file

@ -4328,13 +4328,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);
}