diff options
Diffstat (limited to 'themes/twentynineteen/sass/navigation')
6 files changed, 831 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/navigation/_links.scss b/themes/twentynineteen/sass/navigation/_links.scss new file mode 100644 index 00000000..cbee4579 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_links.scss @@ -0,0 +1,21 @@ +a { + + @include link-transition; + color: $color__link; + + &:visited { + color: $color__link-visited; + } + + &:hover, + &:active { + color: $color__link-hover; + outline: 0; + text-decoration: none; + } + + &:focus { + outline: thin dotted; + text-decoration: underline; + } +} diff --git a/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss new file mode 100644 index 00000000..afe69717 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss @@ -0,0 +1,22 @@ +/** === Footer menu === */ + +.footer-navigation { + + display: inline; + + & > div { + display: inline; + } + + .footer-menu { + + display: inline; + padding-left: 0; + + li { + display: inline; + margin-right: 1rem; + } + } + +}
\ No newline at end of file diff --git a/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss new file mode 100644 index 00000000..61d943a7 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss @@ -0,0 +1,505 @@ +/** === Main menu === */ + +.main-navigation { + + display: block; + margin-top: #{0.25 * $size__spacing-unit}; + + body.page & { + display: block; + } + + > div { + display: inline; + } + + /* Un-style buttons */ + button { + display: inline-block; + border: none; + padding: 0; + margin: 0; + font-family: $font__heading; + font-weight: 700; + line-height: $font__line-height-heading; + text-decoration: none; + background: transparent; + color: inherit; + cursor: pointer; + transition: background 250ms ease-in-out, + transform 150ms ease; + -webkit-appearance: none; + -moz-appearance: none; + + &:hover, + &:focus { + background: transparent; + } + + &:focus { + outline: 1px solid transparent; + outline-offset: -4px; + } + + &:active { + transform: scale(0.99); + } + } + + .main-menu { + + display: inline-block; + margin: 0; + padding: 0; + + > li { + + color: $color__link; + display: inline; + position: relative; + + > a { + + font-weight: 700; + color: $color__link; + margin-right: #{0.5 * $size__spacing-unit}; + + + svg { + margin-right: #{0.5 * $size__spacing-unit}; + } + + &:hover, + &:hover + svg { + color: $color__link-hover; + } + } + + &.menu-item-has-children { + + display: inline-block; + position: inherit; + + @include media(tablet) { + position: relative; + } + + > a { + margin-right: #{0.125 * $size__spacing-unit}; + } + + & > a, + .menu-item-has-children > a { + + &:after { + content: ""; + display: none; + } + } + + .submenu-expand { + + display: inline-block; + margin-right: #{0.25 * $size__spacing-unit}; + + /* Priority+ Menu */ + &.main-menu-more-toggle { + + position: relative; + height: 24px; + line-height: $font__line-height-heading; + width: 24px; + padding: 0; + margin-left: #{0.5 * $size__spacing-unit}; + + svg { + height: 24px; + width: 24px; + top: #{-0.125 * $size__spacing-unit}; + vertical-align: text-bottom; + } + } + + .wp-customizer-unloading &, + &.is-empty { + display: none; + } + + svg { + position: relative; + top: 0.2rem; + } + } + } + + &:last-child > a, + &:last-child.menu-item-has-children .submenu-expand { + margin-right: 0; + } + } + } + + .sub-menu { + + background-color: $color__link; + color: $color__background-body; + list-style: none; + padding-left: 0; + + position: absolute; + opacity: 0; + left: -9999px; + z-index: 99999; + + @include media(tablet) { + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + } + + > li { + + display: block; + float: none; + position: relative; + + &.menu-item-has-children { + + .submenu-expand { + display: inline-block; + position: absolute; + width: calc( 24px + #{$size__spacing-unit} ); + right: 0; + top: calc( .125 * #{$size__spacing-unit} ); + bottom: 0; + color: white; + line-height: 1; + padding: calc( .5 * #{$size__spacing-unit} ); + + svg { + top: 0; + } + } + + .submenu-expand { + margin-right: 0; + } + + @include media(tablet) { + + .menu-item-has-children > a { + + &:after { + content: "\203a"; + } + } + } + } + + > a, + > .menu-item-link-return { + + color: $color__background-body; + display: block; + line-height: $font__line-height-heading; + text-shadow: none; + padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit; + white-space: nowrap; + + &:hover, + &:focus { + background: $color__link-hover; + + &:after { + background: $color__link-hover; + } + } + } + + > .menu-item-link-return { + width: 100%; + font-size: $font__size_base; + font-weight: normal; + text-align: left; + } + + > a:empty { + display: none; + } + + &.mobile-parent-nav-menu-item { + + display: none; + font-size: $font__size-sm; + font-weight: normal; + + svg { + position: relative; + top: 0.2rem; + margin-right: calc( .25 * #{$size__spacing-unit} ); + } + } + } + } + + /* + * Sub-menu styles + * + * :focus-within needs its own selector so other similar + * selectors don’t get ignored if a browser doesn’t recognize it + */ + .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 */ + @include media(tablet) { + 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; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; + + @include media(tablet) { + right: 0; + left: auto; + display: block; + width: max-content; + } + } + + .submenu-expand { + display: none; + } + + .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu dashes */ + .sub-menu { + counter-reset: submenu; + } + + .sub-menu > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } + } + + .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + + + /* Non-mobile position */ + @include media(tablet) { + display: block; + float: none; + 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; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; + + @include media(tablet) { + right: 0; + left: auto; + display: table; + width: max-content; + } + } + + .submenu-expand { + display: none; + } + + .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu dashes */ + .sub-menu { + counter-reset: submenu; + } + + .sub-menu > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } + } + + /** + * Fade-in animation for top-level submenus + */ + .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu { + animation: fade_in 0.1s forwards; + } + + /** + * Off-canvas touch device styles + */ + .main-menu .menu-item-has-children.off-canvas .sub-menu { + + .submenu-expand .svg-icon { + transform: rotate(270deg); + } + + .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(-100%); + } + + li:hover, + li:focus, + li > a:hover, + li > a:focus { + background-color: transparent; + } + + > li > a, + > li > .menu-item-link-return { + white-space: inherit; + } + + &.expanded-true { + + display: table; + margin-top: 0; + opacity: 1; + padding-left: 0; + + /* Mobile position */ + left: 0; + top: 0; + right: 0; + bottom: 0; + position: fixed; + z-index: 100000; /* Make sure appears above mobile admin bar */ + width: 100vw; + height: 100vh; + max-width: 100vw; + transform: translateX(+100%); + animation: slide_in_right 0.3s forwards; + + > .mobile-parent-nav-menu-item { + display: block; + } + + /* Prevent menu from being blocked by admin bar */ + .admin-bar & { + top: 46px; + height: calc( 100vh - 46px ); + + .sub-menu.expanded-true { + top: 0; + } + + /* WP core breakpoint */ + @media only screen and ( min-width: 782px ) { + top: 32px; + height: calc( 100vh - 32px ); + + .sub-menu.expanded-true { + top: 0; + } + } + } + } + } + + // Hide duplicate menu-more-link when re-loading a menu in the customizer + .main-menu-more { + &:nth-child(n+3) { + display: none; + } + } + +} + +/* Menu animation */ + +@keyframes slide_in_right { + 100% { + transform: translateX(0%); + } +} + +@keyframes fade_in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss b/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss new file mode 100644 index 00000000..00724b5e --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_menu-social-navigation.scss @@ -0,0 +1,66 @@ +/* Social menu */ + +.social-navigation { + margin-top: calc(#{$size__spacing-unit} / 2 ); + text-align: left; + + ul.social-links-menu { + @include clearfix; + + display: inline-block; + margin: 0; + padding: 0; + + li { + display: inline-block; + vertical-align: bottom; + vertical-align: -webkit-baseline-middle; + list-style: none; + + &:nth-child(n+2) { + margin-left: 0.1em; + } + + a { + border-bottom: 1px solid transparent; + display: block; + color: $color__text-main; + margin-bottom: -1px; + transition: opacity $link_transition ease-in-out; + + &:hover, + &:active { + color: $color__text-main; + opacity: 0.6; + } + + &:focus { + color: $color__text-main; + opacity: 1; + border-bottom: 1px solid $color__text-main; + } + + svg { + display: block; + width: 32px; + height: 32px; + + // Prevent icons from jumping in Safari using hardware acceleration. + transform: translateZ(0); + + &#ui-icon-link { + transform: rotate(-45deg); + } + } + } + } + } +} + +.site-title + .social-navigation, +.site-description + .social-navigation { + + @include media(tablet) { + margin-top: calc(#{$size__spacing-unit} / 5 ); + } +} diff --git a/themes/twentynineteen/sass/navigation/_navigation.scss b/themes/twentynineteen/sass/navigation/_navigation.scss new file mode 100644 index 00000000..a4cf5154 --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_navigation.scss @@ -0,0 +1,16 @@ +/*-------------------------------------------------------------- +## Links +--------------------------------------------------------------*/ +@import "links"; + +/*-------------------------------------------------------------- +## Menus +--------------------------------------------------------------*/ +@import "menu-main-navigation"; +@import "menu-social-navigation"; +@import "menu-footer-navigation"; + +/*-------------------------------------------------------------- +## Next / Previous +--------------------------------------------------------------*/ +@import "next-previous"; diff --git a/themes/twentynineteen/sass/navigation/_next-previous.scss b/themes/twentynineteen/sass/navigation/_next-previous.scss new file mode 100644 index 00000000..b2a4c1db --- /dev/null +++ b/themes/twentynineteen/sass/navigation/_next-previous.scss @@ -0,0 +1,201 @@ +/* Next/Previous navigation */ + +// Singular navigation +.post-navigation { + + margin: calc(3 * 1rem) 0; + + @include media(tablet) { + margin: calc(3 * 1rem) $size__site-margins; + max-width: calc(6 * (100vw / 12)); + } + + @include media(desktop) { + margin: calc(3 * 1rem) 0; + max-width: 100%; + } + + .nav-links { + + margin: 0 $size__spacing-unit; + max-width: 100%; + display: flex; + flex-direction: column; + + @include media(tablet) { + margin: 0; + } + + @include media(desktop) { + flex-direction: row; + margin: 0 $size__site-margins; + max-width: $size__site-desktop-content; + } + + a { + .meta-nav { + color: $color__text-light; + user-select: none; + + &:before, + &:after { + display: none; + content: "—"; + width: 2em; + color: $color__text-light; + height: 1em; + } + } + + .post-title { + hyphens: auto; + } + + &:hover { + color: $color__link-hover; + } + } + + .nav-previous, + .nav-next { + + @include media(desktop) { + min-width: calc(50% - 2 * #{$size__spacing-unit}); + } + } + + .nav-previous { + order: 2; + + @include media(desktop) { + order: 1; + } + + + .nav-next { + margin-bottom: $size__spacing-unit; + } + + .meta-nav { + &:before { + display: inline; + } + } + } + + .nav-next { + order: 1; + + @include media(desktop) { + order: 2; + padding-left: $size__spacing-unit; + } + + .meta-nav { + &:after { + display: inline; + } + } + } + } +} + +// Index/archive navigation +.pagination { + + .nav-links { + + display: flex; + flex-wrap: wrap; + padding: 0 calc(.5 * #{$size__spacing-unit}); + + + & > * { + padding: calc(.5 * #{$size__spacing-unit}); + + &.dots, + &.prev { + padding-left: 0; + } + + &.dots, + &.next { + padding-right: 0; + } + } + + a:focus { + text-decoration: underline; + outline-offset: -1px; + + &.prev, + &.next { + text-decoration: none; + + .nav-prev-text, + .nav-next-text { + text-decoration: underline; + } + } + } + + .nav-next-text, + .nav-prev-text { + display: none; + } + + @include media(tablet) { + + margin-left: $size__site-margins; + padding: 0; + + .prev, + .next { + + & > * { + display: inline-block; + vertical-align: text-bottom; + } + } + + & > * { + padding: $size__spacing-unit; + } + } + } +} + +// Comments navigation +.comment-navigation { + + .nav-links { + display: flex; + flex-direction: row; + } + + .nav-previous, + .nav-next { + min-width: 50%; + width: 100%; + @include font-family( $font__heading ); + font-weight: bold; + + .secondary-text { + display: none; + + @include media(tablet) { + display: inline; + } + } + + svg { + vertical-align: middle; + position: relative; + margin: 0 -0.35em; + top: -1px; + } + } + + .nav-next { + text-align: right; + } +} |