Full Site Editing: Update Navigation Menu style on Varia and Maywood (#1364)
Update the Navigation Menu style in Varia, and via both inheritance and overrides in Maywood. See: https://github.com/Automattic/wp-calypso/pull/35880
This commit is contained in:
Jacopo Tomasone
GitHub
parent
df0bc96046
commit
b6e15ce3a8
12 changed files with 515 additions and 122 deletions
|
|
@ -12,11 +12,35 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.main-navigation ul {
|
||||
justify-content: center;
|
||||
a {
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
.main-navigation {
|
||||
text-align: center;
|
||||
ul {
|
||||
justify-content: center;
|
||||
a {
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
.main-navigation .footer-menu {
|
||||
justify-content: flex-start;
|
||||
|
||||
@include media(mobile) {
|
||||
justify-content: center;
|
||||
}
|
||||
@include media(tablet) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16.6px;
|
||||
text-decoration: none;
|
||||
@include media(mobile-only) {
|
||||
font-size: 13.8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,16 @@
|
|||
@import "../../varia/sass/full-site-editing/imports";
|
||||
|
||||
.fse-enabled {
|
||||
.site-header.entry-content {
|
||||
margin-bottom: 0;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
@include media(mobile-only) {
|
||||
.main-navigation .menu-primary-container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,4 +106,4 @@ b, strong {
|
|||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
@import "full-site-editing-editor";
|
||||
@import "full-site-editing-editor";
|
||||
|
|
|
|||
|
|
@ -1269,12 +1269,12 @@ b, strong {
|
|||
color: #685636;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -1283,37 +1283,37 @@ b, strong {
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
|
||||
color: #686868;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
|
||||
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -1321,11 +1321,11 @@ b, strong {
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: #685636;
|
||||
}
|
||||
|
||||
|
|
@ -1363,6 +1363,98 @@ b, strong {
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation {
|
||||
/**
|
||||
* Placeholder button style
|
||||
* - Since buttons appear in various blocks,
|
||||
* let’s use a placeholder to keep them all
|
||||
* in-sync
|
||||
*/
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
}
|
||||
|
||||
.site-header .main-navigation button,
|
||||
.site-header .main-navigation .button,
|
||||
.site-header .main-navigation input[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link,
|
||||
.site-header .main-navigation .wp-block-file__button {
|
||||
line-height: 1;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
background-color: #897248;
|
||||
border-radius: 5px;
|
||||
border-width: 0;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:before,
|
||||
.site-header .main-navigation .button:before,
|
||||
.site-header .main-navigation input[type="submit"]:before,
|
||||
.site-header .main-navigation .wp-block-button__link:before,
|
||||
.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
|
||||
.site-header .main-navigation .button:after,
|
||||
.site-header .main-navigation input[type="submit"]:after,
|
||||
.site-header .main-navigation .wp-block-button__link:after,
|
||||
.site-header .main-navigation .wp-block-file__button:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:before,
|
||||
.site-header .main-navigation .button:before,
|
||||
.site-header .main-navigation input[type="submit"]:before,
|
||||
.site-header .main-navigation .wp-block-button__link:before,
|
||||
.site-header .main-navigation .wp-block-file__button:before {
|
||||
margin-bottom: -0.12em;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:after,
|
||||
.site-header .main-navigation .button:after,
|
||||
.site-header .main-navigation input[type="submit"]:after,
|
||||
.site-header .main-navigation .wp-block-button__link:after,
|
||||
.site-header .main-navigation .wp-block-file__button:after {
|
||||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:hover,
|
||||
.site-header .main-navigation .button:hover,
|
||||
.site-header .main-navigation input:hover[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link:hover,
|
||||
.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
|
||||
.site-header .main-navigation .button:focus,
|
||||
.site-header .main-navigation input:focus[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link:focus,
|
||||
.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
|
||||
.site-header .main-navigation .has-focus.button,
|
||||
.site-header .main-navigation input.has-focus[type="submit"],
|
||||
.site-header .main-navigation .has-focus.wp-block-button__link,
|
||||
.site-header .main-navigation .has-focus.wp-block-file__button {
|
||||
color: white;
|
||||
background-color: #685636;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
|
||||
color: #897248;
|
||||
background: transparent;
|
||||
border: 2px solid currentcolor;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
|
||||
color: #685636;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.site-header .main-navigation a {
|
||||
font-size: 21.6px;
|
||||
}
|
||||
|
|
@ -1373,23 +1465,24 @@ b, strong {
|
|||
}
|
||||
}
|
||||
|
||||
.site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-footer .main-navigation .hide-visually,
|
||||
.site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.main-navigation {
|
||||
background-color: #897248;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 16px 16px;
|
||||
.site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.main-navigation:before {
|
||||
content: "Menu";
|
||||
.site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.main-navigation:after {
|
||||
content: "+";
|
||||
.site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1404,6 +1497,10 @@ b, strong {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.site-header .main-navigation {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-header .main-navigation ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1412,3 +1509,30 @@ b, strong {
|
|||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-footer .main-navigation .footer-menu {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 560px) {
|
||||
.site-footer .main-navigation .footer-menu {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.site-footer .main-navigation .footer-menu {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer .main-navigation .footer-menu a {
|
||||
font-size: 16.6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.site-footer .main-navigation .footer-menu a {
|
||||
font-size: 13.8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2604,12 +2604,12 @@ table th,
|
|||
color: #685636;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -2618,37 +2618,37 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
color: #686868;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -2656,11 +2656,11 @@ table th,
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: #685636;
|
||||
}
|
||||
|
||||
|
|
@ -3768,11 +3768,11 @@ p:not(.site-title) a:hover {
|
|||
/**
|
||||
* Footer Navigation
|
||||
*/
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
|
|
@ -3780,9 +3780,36 @@ p:not(.site-title) a:hover {
|
|||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
.fse-enabled .site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fse-enabled .site-footer .main-navigation .hide-visually,
|
||||
.fse-enabled .site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fse-enabled .site-header.entry-content {
|
||||
margin-bottom: 0;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2621,12 +2621,12 @@ table th,
|
|||
color: #685636;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -2635,37 +2635,37 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
color: #686868;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -2673,11 +2673,11 @@ table th,
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: #685636;
|
||||
}
|
||||
|
||||
|
|
@ -3797,11 +3797,11 @@ p:not(.site-title) a:hover {
|
|||
/**
|
||||
* Footer Navigation
|
||||
*/
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
|
|
@ -3809,9 +3809,36 @@ p:not(.site-title) a:hover {
|
|||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
.fse-enabled .site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fse-enabled .site-footer .main-navigation .hide-visually,
|
||||
.fse-enabled .site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fse-enabled .site-header.entry-content {
|
||||
margin-bottom: 0;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-header.entry-content .main-navigation .menu-primary-container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,8 +36,12 @@
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.main-navigation a {
|
||||
font-size: 21.6px;
|
||||
.main-navigation {
|
||||
@import "../blocks/button/style";
|
||||
|
||||
a {
|
||||
font-size: 21.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,25 +49,28 @@
|
|||
@include media(tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
@include media(mobile-only) {
|
||||
background-color: #{map-deep-get($config-button, "color", "background")};
|
||||
border-radius: #{map-deep-get($config-button, "border-radius")};
|
||||
color: #{map-deep-get($config-button, "color", "text")};
|
||||
display: inline-block;
|
||||
font-family: #{map-deep-get($config-button, "font", "family")};
|
||||
font-size: 18px;
|
||||
font-weight: #{map-deep-get($config-button, "font", "weight")};
|
||||
line-height: #{map-deep-get($config-button, "font", "line-height")};
|
||||
padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
|
||||
.main-navigation {
|
||||
@extend .footer-navigation;
|
||||
|
||||
&:before {
|
||||
content: "Menu";
|
||||
display: block;
|
||||
|
||||
.hide-visually,
|
||||
#toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
content: "+";
|
||||
|
||||
@include media(mobile-only) {
|
||||
.menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
width: auto;
|
||||
|
||||
.sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
varia/sass/full-site-editing/_imports.scss
Normal file
27
varia/sass/full-site-editing/_imports.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.fse-enabled {
|
||||
.site-footer {
|
||||
.main-navigation {
|
||||
@extend .footer-navigation;
|
||||
|
||||
display: block;
|
||||
|
||||
.hide-visually,
|
||||
#toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media(mobile-only) {
|
||||
.menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
width: auto;
|
||||
|
||||
.sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1154,12 +1154,12 @@ table th,
|
|||
color: indigo;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -1168,37 +1168,37 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
|
||||
color: #767676;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
|
||||
font-family: sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -1206,11 +1206,11 @@ table th,
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: indigo;
|
||||
}
|
||||
|
||||
|
|
@ -1248,6 +1248,98 @@ table th,
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation {
|
||||
/**
|
||||
* Placeholder button style
|
||||
* - Since buttons appear in various blocks,
|
||||
* let’s use a placeholder to keep them all
|
||||
* in-sync
|
||||
*/
|
||||
/**
|
||||
* Block Options
|
||||
*/
|
||||
}
|
||||
|
||||
.site-header .main-navigation button,
|
||||
.site-header .main-navigation .button,
|
||||
.site-header .main-navigation input[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link,
|
||||
.site-header .main-navigation .wp-block-file__button {
|
||||
line-height: 1;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
background-color: blue;
|
||||
border-radius: 9px;
|
||||
border-width: 0;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:before,
|
||||
.site-header .main-navigation .button:before,
|
||||
.site-header .main-navigation input[type="submit"]:before,
|
||||
.site-header .main-navigation .wp-block-button__link:before,
|
||||
.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
|
||||
.site-header .main-navigation .button:after,
|
||||
.site-header .main-navigation input[type="submit"]:after,
|
||||
.site-header .main-navigation .wp-block-button__link:after,
|
||||
.site-header .main-navigation .wp-block-file__button:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:before,
|
||||
.site-header .main-navigation .button:before,
|
||||
.site-header .main-navigation input[type="submit"]:before,
|
||||
.site-header .main-navigation .wp-block-button__link:before,
|
||||
.site-header .main-navigation .wp-block-file__button:before {
|
||||
margin-bottom: -0.12em;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:after,
|
||||
.site-header .main-navigation .button:after,
|
||||
.site-header .main-navigation input[type="submit"]:after,
|
||||
.site-header .main-navigation .wp-block-button__link:after,
|
||||
.site-header .main-navigation .wp-block-file__button:after {
|
||||
margin-top: -0.11em;
|
||||
}
|
||||
|
||||
.site-header .main-navigation button:hover,
|
||||
.site-header .main-navigation .button:hover,
|
||||
.site-header .main-navigation input:hover[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link:hover,
|
||||
.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
|
||||
.site-header .main-navigation .button:focus,
|
||||
.site-header .main-navigation input:focus[type="submit"],
|
||||
.site-header .main-navigation .wp-block-button__link:focus,
|
||||
.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
|
||||
.site-header .main-navigation .has-focus.button,
|
||||
.site-header .main-navigation input.has-focus[type="submit"],
|
||||
.site-header .main-navigation .has-focus.wp-block-button__link,
|
||||
.site-header .main-navigation .has-focus.wp-block-file__button {
|
||||
color: white;
|
||||
background-color: indigo;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link {
|
||||
color: blue;
|
||||
background: transparent;
|
||||
border: 2px solid currentcolor;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link:focus, .site-header .main-navigation .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
|
||||
color: indigo;
|
||||
}
|
||||
|
||||
.site-header .main-navigation .wp-block-button.is-style-squared .wp-block-button__link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.site-header .main-navigation a {
|
||||
font-size: 21.6px;
|
||||
}
|
||||
|
|
@ -1258,22 +1350,23 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-footer .main-navigation .hide-visually,
|
||||
.site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.main-navigation {
|
||||
background-color: blue;
|
||||
border-radius: 9px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
padding: 16px 16px;
|
||||
.site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.main-navigation:before {
|
||||
content: "Menu";
|
||||
.site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.main-navigation:after {
|
||||
content: "+";
|
||||
.site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2567,12 +2567,12 @@ table th,
|
|||
color: indigo;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -2581,37 +2581,37 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
color: #767676;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
font-family: sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -2619,11 +2619,11 @@ table th,
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: indigo;
|
||||
}
|
||||
|
||||
|
|
@ -3363,3 +3363,28 @@ img#wpstats {
|
|||
.wp-block-jetpack-subscriptions form > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
.fse-enabled .site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fse-enabled .site-footer .main-navigation .hide-visually,
|
||||
.fse-enabled .site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2584,12 +2584,12 @@ table th,
|
|||
color: indigo;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation {
|
||||
.footer-navigation, .fse-enabled .site-footer .main-navigation {
|
||||
flex: 1 0 50%;
|
||||
order: 2;
|
||||
margin-top: 0;
|
||||
|
|
@ -2598,37 +2598,37 @@ table th,
|
|||
}
|
||||
}
|
||||
|
||||
.footer-navigation > div {
|
||||
.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
color: #767676;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
.footer-navigation .footer-menu {
|
||||
.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li {
|
||||
.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:first-of-type > a {
|
||||
.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu > li:last-of-type {
|
||||
.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a {
|
||||
.footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
|
||||
font-family: sans-serif;
|
||||
font-size: 0.83333rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -2636,11 +2636,11 @@ table th,
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
|
||||
.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.footer-navigation .footer-menu a:hover {
|
||||
.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
|
||||
color: indigo;
|
||||
}
|
||||
|
||||
|
|
@ -3392,3 +3392,28 @@ img#wpstats {
|
|||
.wp-block-jetpack-subscriptions form > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
.fse-enabled .site-footer .main-navigation {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fse-enabled .site-footer .main-navigation .hide-visually,
|
||||
.fse-enabled .site-footer .main-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 559px) {
|
||||
.fse-enabled .site-footer .main-navigation .menu-primary-container {
|
||||
display: block;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li {
|
||||
width: auto;
|
||||
}
|
||||
.fse-enabled .site-footer .main-navigation li .sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,3 +77,9 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
|||
* - Styles for 3rd party plugins and WP extensions
|
||||
*/
|
||||
@import "sass/vendors/imports";
|
||||
|
||||
/**
|
||||
* Full Site Editing
|
||||
* - Full Site Editing overrides
|
||||
*/
|
||||
@import "sass/full-site-editing/imports";
|
||||
|
|
|
|||
Loading…
Reference in a new issue