Elegant Business: Update quote block border styles, to work better with the new styles planned for Gutenberg 5.2. See #594.

This commit is contained in:
Laurel Fulford 2019-02-14 12:12:37 -08:00
parent aa993afb5c
commit 9dc40f1ca4
5 changed files with 82 additions and 73 deletions

View file

@ -436,7 +436,8 @@
&:not(.is-large),
&:not(.is-style-large) {
border-left: 2px solid $color__link;
border-color: $color__link;
border-width: 2px;
padding-top: 0;
padding-bottom: 0;
}

View file

@ -420,7 +420,8 @@ figcaption,
/** === Blockquote === */
.wp-block-quote:not(.is-large):not(.is-style-large) {
border-left: 2px solid #c43d80;
border-color: #c43d80;
border-width: 2px;
}
.wp-block-quote.is-large, .wp-block-quote.is-style-large {

View file

@ -400,7 +400,8 @@ figcaption,
.wp-block-quote {
&:not(.is-large):not(.is-style-large) {
border-left: 2px solid $color__link;
border-color: $color__link;
border-width: 2px;
}
&.is-large,

View file

@ -1250,17 +1250,6 @@ 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;
@ -1273,21 +1262,6 @@ 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;
@ -1305,13 +1279,6 @@ 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%;
@ -1320,12 +1287,6 @@ 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;
@ -1334,24 +1295,10 @@ 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;
@ -1363,31 +1310,16 @@ 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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-weight: normal;
@ -3177,13 +3109,17 @@ body.page .main-navigation {
}
/* 404 & Not found */
.error-404.not-found .page-title,
.error-404.not-found .page-content,
.no-results.not-found .page-title,
.no-results.not-found .page-content {
margin: calc(3 * 1rem) 1rem;
}
@media only screen and (min-width: 768px) {
.error-404.not-found .page-title,
.error-404.not-found .page-content,
.no-results.not-found .page-title,
.no-results.not-found .page-content {
margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2);
}
@ -3848,7 +3784,8 @@ body.page .main-navigation {
}
.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) {
border-right: 2px solid #c43d80;
border-color: #c43d80;
border-width: 2px;
padding-top: 0;
padding-bottom: 0;
}

View file

@ -1261,6 +1261,17 @@ body.page .main-navigation {
/* Nested sub-menu dashes */
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
left: 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;
left: 0;
@ -1273,6 +1284,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;
left: 0;
right: 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;
@ -1312,6 +1338,13 @@ body.page .main-navigation {
position: absolute;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
left: 0;
width: 100%;
display: table;
position: absolute;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
left: 0;
width: 100%;
@ -1320,6 +1353,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 {
right: 0;
left: auto;
display: block;
width: max-content;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
right: 0;
left: auto;
@ -1338,6 +1377,10 @@ body.page .main-navigation {
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 .submenu-expand {
display: none;
}
@ -1352,6 +1395,16 @@ body.page .main-navigation {
/* 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;
position: relative;
width: 100%;
left: 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;
@ -1363,6 +1416,10 @@ 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%;
@ -1377,6 +1434,10 @@ body.page .main-navigation {
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 {
counter-reset: submenu;
}
@ -1388,6 +1449,13 @@ body.page .main-navigation {
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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", 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: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-weight: normal;
@ -3864,7 +3932,8 @@ body.page .main-navigation {
}
.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) {
border-left: 2px solid #c43d80;
border-color: #c43d80;
border-width: 2px;
padding-top: 0;
padding-bottom: 0;
}