Skip to content
Snippets Groups Projects
Unverified Commit a6f06716 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3182200 by andy-blum, kiran.kadam911, mherchel, tushar_sachdeva: Follow... 

Issue #3182200 by andy-blum, kiran.kadam911, mherchel, tushar_sachdeva: Follow proper BEM syntax within secondary navigation menu
parent f429abac
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 241 additions and 166 deletions
core/themes/olivero/css/components/navigation/nav-secondary.css
+ 91
− 93
View file @ a6f06716
......@@ -13,141 +13,123 @@
.secondary-nav {
letter-spacing: 0.02em;
font-size: 0.875rem;
font-weight: 600
font-weight: 600;
}
[dir="ltr"] .secondary-nav ul.menu {
margin-left: 0
[dir="ltr"] .secondary-nav__menu {
margin-left: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
margin-right: 0
[dir="rtl"] .secondary-nav__menu {
margin-right: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
margin-right: 0
[dir="ltr"] .secondary-nav__menu {
margin-right: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
margin-left: 0
[dir="rtl"] .secondary-nav__menu {
margin-left: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
padding-left: 0
[dir="ltr"] .secondary-nav__menu {
padding-left: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
padding-right: 0
[dir="rtl"] .secondary-nav__menu {
padding-right: 0;
}
[dir="ltr"] .secondary-nav ul.menu {
padding-right: 0
[dir="ltr"] .secondary-nav__menu {
padding-right: 0;
}
[dir="rtl"] .secondary-nav ul.menu {
padding-left: 0
[dir="rtl"] .secondary-nav__menu {
padding-left: 0;
}
.secondary-nav ul.menu {
display: flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
list-style: none
}
.secondary-nav__menu {
display: flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
list-style: none;
}
.secondary-nav ul.menu li {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
.secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
/* @todo should this be scoped to desktop nav? */
width: -webkit-max-content;
width: max-content;
max-width: 12.5rem
}
/* @todo should this be scoped to desktop nav? */
width: -webkit-max-content;
width: max-content;
max-width: 12.5rem
}
[dir="ltr"] .secondary-nav ul.menu li:not(:last-child) {
margin-right: 1.6875rem
[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
margin-right: 1.6875rem;
}
[dir="rtl"] .secondary-nav ul.menu li:not(:last-child) {
margin-left: 1.6875rem
[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
margin-left: 1.6875rem;
}
.secondary-nav ul.menu a:not(.button--primary) {
position: relative;
display: inline-flex;
align-items: center;
height: 2.25rem;
text-decoration: none;
color: inherit
}
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
height: 2.25rem;
text-decoration: none;
color: inherit
}
.secondary-nav ul.menu a:not(.button--primary):after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: 0;
left: 0;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: 0;
content: "";
transition: opacity 0.2s, transform 0.2s;
transform: translateY(0.3125rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
.secondary-nav__menu-link:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
content: "";
transition: opacity 0.2s, transform 0.2s;
transform: translateY(0.3125rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
.secondary-nav ul.menu a:not(.button--primary):hover:after {
transform: translateY(0);
opacity: 0.8;
}
.secondary-nav__menu-link:hover:after {
transform: translateY(0);
opacity: 0.8;
}
@media (min-width: 75rem) {
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
margin-left: 1.125rem
margin-left: 1.125rem;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
margin-right: 1.125rem
margin-right: 1.125rem;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
padding-left: 2.25rem
padding-left: 2.25rem;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
padding-right: 2.25rem
padding-right: 2.25rem;
}
body:not(.is-always-mobile-nav) .secondary-nav {
position: relative;
display: flex
}
body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus {
position: relative;
outline: 0
}
body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 1.125rem);
height: 3.375rem;
content: "";
transform: translate(-50%, -50%);
border: solid 2px #2494db;
border-radius: 0.25rem;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
left: 0
left: 0;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
right: 0
right: 0;
}
body:not(.is-always-mobile-nav) .secondary-nav:before {
......@@ -160,11 +142,27 @@
background-color: #d7e1e8;
}
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
margin-right: 2.25rem
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-right: 2.25rem;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
margin-left: 2.25rem
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-left: 2.25rem;
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative;
outline: 0
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 1.125rem);
height: 3.375rem;
content: "";
transform: translate(-50%, -50%);
border: solid 2px #2494db;
border-radius: 0.25rem;
}
}
core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
+ 69
− 71
View file @ a6f06716
......@@ -9,63 +9,61 @@
letter-spacing: 0.02em;
font-size: var(--font-size-s);
font-weight: 600;
}
& ul.menu {
display: flex;
align-items: center;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
.secondary-nav__menu {
display: flex;
align-items: center;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
& li {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
.secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
/* @todo should this be scoped to desktop nav? */
width: max-content;
max-width: 200px;
/* @todo should this be scoped to desktop nav? */
width: max-content;
max-width: 200px;
&:not(:last-child) {
margin-inline-end: var(--sp1-5);
}
}
&:not(:last-child) {
margin-inline-end: var(--sp1-5);
}
}
& a:not(.button--primary) {
position: relative;
display: inline-flex;
align-items: center;
height: var(--sp2);
text-decoration: none;
color: inherit;
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
height: var(--sp2);
text-decoration: none;
color: inherit;
&:after {
position: absolute;
/* stylelint-disable csstools/use-logical */
bottom: 0;
left: 0;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: 0;
content: "";
transition: opacity 0.2s, transform 0.2s;
transform: translateY(5px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
&:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
content: "";
transition: opacity 0.2s, transform 0.2s;
transform: translateY(5px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
&:hover {
&:after {
transform: translateY(0);
opacity: 0.8;
}
}
&:hover {
&:after {
transform: translateY(0);
opacity: 0.8;
}
}
}
......@@ -78,25 +76,6 @@ body:not(.is-always-mobile-nav) {
margin-inline-start: var(--sp);
padding-inline-start: var(--sp2);
& .menu__link {
&:focus {
position: relative;
outline: 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--blue-50);
border-radius: 4px;
}
}
}
&:before {
position: absolute;
inset-block-start: 50%;
......@@ -107,9 +86,28 @@ body:not(.is-always-mobile-nav) {
transform: translateY(-50%);
background-color: var(--color--gray-70);
}
}
& .secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp2);
}
& ul.menu li:not(:last-child) {
margin-inline-end: var(--sp2);
& .secondary-nav__menu-link {
&:focus {
position: relative;
outline: 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--blue-50);
border-radius: 4px;
}
}
}
}
......
core/themes/olivero/olivero.theme
+ 4
− 1
View file @ a6f06716
......@@ -130,6 +130,9 @@ function olivero_preprocess_block(&$variables) {
$variables['#attached']['library'][] = 'olivero/search-narrow';
}
}
elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'system_menu_block') {
$variables['content']['#attributes']['region'] = $region;
}
elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'search_form_block') {
// Attaching library for search block if present at secondary menu
// region.
......@@ -158,7 +161,7 @@ function olivero_preprocess_block(&$variables) {
* Implements hook_theme_suggestions_HOOK_alter() for menu.
*/
function olivero_theme_suggestions_menu_alter(&$suggestions, array $variables) {
if (isset($variables['attributes']['region']) && $variables['attributes']['region'] === 'primary_menu') {
if (isset($variables['attributes']['region'])) {
$suggestions[] = 'menu__' . $variables['attributes']['region'];
}
}
......
core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
+ 1
− 1
View file @ a6f06716
{#
/**
* @file
* Olivero's theme implementation for the main menu.
* Olivero's theme implementation for the menus in the primary_menu region.
*
* Available variables:
* - menu_name: The machine name of the menu.
......
core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig 0 → 100644
+ 76
− 0
View file @ a6f06716
{#
/**
* @file
* Olivero's theme implementation for the menus in the secondary_menu region.
*
* Available variables:
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*
* @ingroup themeable
*/
#}
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see https://twig.symfony.com/doc/1.x/tags/macro.html
#}
{% set attributes = attributes.addClass('menu') %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% set secondary_nav_level = 'secondary-nav__menu--level-' ~ (menu_level + 1) %}
{% import _self as menus %}
{% if items %}
<ul{{ attributes.addClass('secondary-nav__menu', secondary_nav_level) }}>
{% set attributes = attributes.removeClass(secondary_nav_level) %}
{% for item in items %}
{% if item.url.isRouted and item.url.routeName == '<nolink>' %}
{% set menu_item_type = 'nolink' %}
{% elseif item.url.isRouted and item.url.routeName == '<button>' %}
{% set menu_item_type = 'button' %}
{% else %}
{% set menu_item_type = 'link' %}
{% endif %}
{% set item_classes = [
'secondary-nav__menu-item',
'secondary-nav__menu-item--' ~ menu_item_type,
'secondary-nav__menu-item--level-' ~ (menu_level + 1),
item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
item.below ? 'secondary-nav__menu-item--has-children',
]
%}
{% set link_classes = [
'secondary-nav__menu-link',
'secondary-nav__menu-link--' ~ menu_item_type,
'secondary-nav__menu-link--level-' ~ (menu_level + 1),
item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
item.below ? 'secondary-nav__menu-link--has-children',
]
%}
<li{{ item.attributes.addClass(item_classes) }}>
{{ link(item.title, item.url, { 'class': link_classes }) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment