Skip to content

Commit

Permalink
Apply BEM refactoring to nav(ecl and ITZBund themes)
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@anicyne
anicyne committed Dec 3, 2024
1 parent dbe08f5 commit 23a067d
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 233 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/nav/shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export class KolNav implements NavAPI {
'kol-nav--is-compact': this.state._hideLabel,
}}
>
<nav class="kol-nav_navigation" aria-label={this.state._label} id="nav">
<nav class="kol-nav__navigation" aria-label={this.state._label} id="nav">
<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>
</nav>
{hasCompactButton && (
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/nav/test/__snapshots__/snapshot.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down Expand Up @@ -38,7 +38,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down Expand Up @@ -75,7 +75,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down Expand Up @@ -109,7 +109,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down Expand Up @@ -143,7 +143,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--is-compact kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="hide-label kol-nav__entry">
Expand Down Expand Up @@ -211,7 +211,7 @@ exports[`kol-nav should render with _label="Nav Label" _links=[{"_label":"Homepa
<kol-nav>
<template shadowrootmode="open">
<div class="kol-nav kol-nav--vertical">
<nav aria-label="Nav Label" class="kol-nav_navigation" id="nav">
<nav aria-label="Nav Label" class="kol-nav__navigation" id="nav">
<ul class="false kol-nav__list kol-nav__list--vertical" data-deep="0">
<li>
<div class="kol-nav__entry">
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/default/src/components/nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
$root: &;
font-family: var(--font-family);

&_navigation {
&__navigation {
background-color: var(--color-mute);
}

Expand Down
116 changes: 55 additions & 61 deletions packages/themes/ecl/src/ecl-ec/components/nav.scss
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,69 @@
@import '../../mixins/rem';

@layer kol-theme-component {
:host {
.kol-nav {
font-family: var(--font-family);
}

.list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li > ul,
li + li {
border-color: var(--color-blue-75);
border-style: solid;
border-width: 0;
border-top-width: rem(2);
}

.list.vertical {
flex-direction: column;
}
/* custom. */
&__navigation {
background-color: var(--color-blue);
}

.entry {
display: flex;
}
&__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;

.entry .kol-button-wc:first-child,
.entry .kol-link-wc,
.entry .kol-span-wc {
flex-grow: 1;
}
&--vertical {
flex-direction: column;
}
}

/* custom. */
nav {
background-color: var(--color-blue);
}
&__entry {
display: flex;

ul {
list-style: none;
margin: 0;
padding: 0;
}
.kol-button-wc:first-child,
.kol-link-wc,
.kol-span-wc {
flex-grow: 1;
}

.expand-button button {
background-color: var(--color-blue-130);
margin: auto;
height: 100%;
&--expand-button button {
background-color: var(--color-blue-130);
margin: auto;
height: 100%;
}

&--link {
text-decoration: none;
}
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
border-color: var(--color-white);
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
text-decoration: underline;
}

&__entry--expand-button kol-icon::part(icon)::before {
content: '\eab6';
}

&list--expanded &__entry--expand-button kol-icon::part(icon)::before {
content: '\eab4';
}
}

.kol-span-wc {
Expand All @@ -53,33 +76,4 @@
padding: rem(16);
height: 100%;
}

li > ul,
li + li {
border-color: var(--color-blue-75);
border-style: solid;
border-width: 0;
border-top-width: rem(2);
}

a {
text-decoration: none;
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
border-color: var(--color-white);
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
text-decoration: underline;
}

div > .expand-button kol-icon::part(icon)::before {
content: '\eab6';
}

.expanded > div > .expand-button kol-icon::part(icon)::before {
content: '\eab4';
}
}
116 changes: 55 additions & 61 deletions packages/themes/ecl/src/ecl-eu/components/nav.scss
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,69 @@
@import '../../mixins/rem';

@layer kol-theme-component {
:host {
.kol-nav {
font-family: var(--font-family);
}

.list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li > ul,
li + li {
border-color: var(--color-blue-75);
border-style: solid;
border-width: 0;
border-top-width: rem(2);
}

.list.vertical {
flex-direction: column;
}
/* custom. */
&__navigation {
background-color: var(--color-blue);
}

.entry {
display: flex;
}
&__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;

.entry .kol-button-wc:first-child,
.entry .kol-link-wc,
.entry .kol-span-wc {
flex-grow: 1;
}
&--vertical {
flex-direction: column;
}
}

/* custom. */
nav {
background-color: var(--color-blue);
}
&__entry {
display: flex;

ul {
list-style: none;
margin: 0;
padding: 0;
}
&--link {
text-decoration: none;
}

.expand-button button {
background-color: var(--color-blue-130);
margin: auto;
height: 100%;
.kol-button-wc:first-child,
.kol-link-wc,
.kol-span-wc {
flex-grow: 1;
}

&--expand-button button {
background-color: var(--color-blue-130);
margin: auto;
height: 100%;
}
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
border-color: var(--color-white);
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
text-decoration: underline;
}

&__entry--expand-button kol-icon::part(icon)::before {
content: '\eab6';
}

&list--expanded &__entry--expand-button kol-icon::part(icon)::before {
content: '\eab4';
}
}

.kol-span-wc {
Expand All @@ -53,33 +76,4 @@
padding: rem(16);
height: 100%;
}

li > ul,
li + li {
border-color: var(--color-blue-75);
border-style: solid;
border-width: 0;
border-top-width: rem(2);
}

a {
text-decoration: none;
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {
border-color: var(--color-white);
}

:is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,
:is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {
text-decoration: underline;
}

div > .expand-button kol-icon::part(icon)::before {
content: '\eab6';
}

.expanded > div > .expand-button kol-icon::part(icon)::before {
content: '\eab4';
}
}
Loading

0 comments on commit 23a067d

Please sign in to comment.