Skip to content

Commit

Permalink
feat(inpage navigation): update design - FRONT-3805 (#2695)
Browse files Browse the repository at this point in the history 
Co-authored-by: planctus <davidepuntoferrante@gmail.com>
  • Loading branch information
@emeryro @planctus
emeryro and planctus committed Nov 29, 2022
1 parent 32306ae commit 308d0b7
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 123 deletions.
103 changes: 54 additions & 49 deletions src/implementations/vanilla/components/inpage-navigation/_inpage-navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

$_border-radius: null !default;
$_shadow: null !default;
$_active-link-border-width: null !default;
$_title: null !default;
$_item: null !default;
$_trigger: null !default;
Expand All @@ -35,7 +34,7 @@ $_outline: null !default;
.ecl-inpage-navigation__trigger {
background: map.get($_trigger, 'background');
background-origin: border-box;
border: map.get($_outline, 'width') solid transparent;
border: none;
color: map.get(theme.$color, 'white-100');
display: none;
padding: map.get($_trigger, 'padding');
Expand Down Expand Up @@ -86,7 +85,7 @@ $_outline: null !default;

.ecl-inpage-navigation__trigger-icon {
position: absolute;
right: calc(#{map.get(theme.$spacing, 's')} - #{map.get($_outline, 'width')});
right: map.get(theme.$spacing, 's');

.ecl-inpage-navigation__trigger[aria-expanded='true'] & {
transform: rotate(0deg);
Expand All @@ -103,7 +102,7 @@ $_outline: null !default;
color: map.get($_title, 'color');
display: block;
font: map.get(theme.$font-prolonged, 'm');
padding: map.get($_title, 'padding');
padding: map.get(theme.$spacing, 's');
text-transform: map.get($_title, 'text-transform');
}
}
Expand All @@ -115,14 +114,13 @@ $_outline: null !default;
list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
list-style-type: none;
margin: 0;
padding: map.get($_list, 'padding');
padding: 0;

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_list, 'background', 'l');
border-top-width: 0;
display: block;
padding: 0;
}
}

Expand All @@ -131,32 +129,62 @@ $_outline: null !default;
flex-direction: column;
}

.ecl-inpage-navigation__item {
border-top: 1px solid map.get($_item, 'separator', 's');

&:first-of-type {
border-top-width: 0;
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
border-top-color: map.get($_item, 'separator', 'l');
}
}

.ecl-inpage-navigation__item--active {
border-top-color: map.get($_item, 'background');
}

.ecl-inpage-navigation__link {
background-color: map.get($_item, 'background', 's');
border-top: map.get($_item, 'separator', 's');
background-color: map.get($_item, 'background');
color: map.get($_item, 'color', 's');
display: block;
font: map.get(theme.$font, 'm');
font-weight: map.get($_item, 'font-weight', 's');
padding: map.get($_item, 'padding', 's');
padding: map.get(theme.$spacing, 's');
text-decoration: none;

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_item, 'background');
color: map.get($_item, 'color', 'l');
font-weight: map.get($_item, 'font-weight', 'l');
}

&:hover {
background-color: map.get($_item, 'background-hover', 's');
color: map.get($_item, 'color', 's');
text-decoration: map.get($_item, 'text-decoration-hover');
text-decoration: underline;

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_item, 'background-hover', 'l');
color: map.get($_item, 'color', 'l');
}
}

&:focus-visible {
border-radius: 0;
color: map.get($_item, 'color', 's');
outline-color: map.get($_outline, 'color');
outline-offset: -2px;
outline-offset: map.get($_outline, 'offset');
text-decoration: underline;

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
color: map.get($_item, 'color', 'l');
outline-color: map.get(theme.$color, 'blue-100');
outline-offset: -2px;
}
}

&:visited {
Expand All @@ -171,35 +199,31 @@ $_outline: null !default;
/* stylelint-disable-next-line no-descending-specificity */
.ecl-inpage-navigation__item--active &,
.ecl-inpage-navigation__item--active &:hover {
background-color: map.get($_item, 'background-active', 's');
color: map.get($_item, 'color-active', 's');
background-color: map.get($_item, 'background-active');
border-inline-start: 4px solid map.get(theme.$color, 'blue-100');
color: map.get($_item, 'color-active');
padding-inline-start: calc(#{map.get(theme.$spacing, 's')} - 4px);

&:focus-visible {
outline-color: map.get($_outline, 'color-active');
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get($_item, 'background-active', 'l');
border-inline-start-color: map.get(theme.$color, 'blue-100');
color: map.get($_item, 'color-active', 'l');

&:focus-visible {
color: map.get($_item, 'color-active');
}
}
}
}

.ecl-inpage-navigation__item:first-of-type .ecl-inpage-navigation__link {
border-top-width: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.ecl-inpage-navigation__item:last-of-type .ecl-inpage-navigation__link {
border-radius: 0 0 $_border-radius $_border-radius;
}

.ecl-inpage-navigation__link--is-active {
/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
background-color: map.get(theme.$color, 'grey-10');
border-inline-start-color: map.get(theme.$color, 'blue-100');
color: map.get(theme.$color, 'grey-100');
}
}

.ecl-inpage-navigation__body {
.ecl-inpage-navigation--visible & {
border-radius: 0 0 $_border-radius $_border-radius;
Expand All @@ -217,25 +241,6 @@ $_outline: null !default;
}
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
.ecl-inpage-navigation__link {
background-color: map.get($_item, 'background', 'l');
border-inline-start: $_active-link-border-width solid transparent;
border-top: map.get($_item, 'separator', 'l');
color: map.get($_item, 'color', 'l');
font: map.get(theme.$font-prolonged, 'm');
font-weight: map.get($_item, 'font-weight', 'l');
padding: map.get($_item, 'padding', 'l');

&:focus-visible {
color: map.get($_item, 'color', 'l');
outline-color: map.get(theme.$color, 'blue');
outline-offset: -2px;
}
}
}

/* stylelint-disable-next-line order/order */
@include breakpoints.down('m') {
.ecl-inpage-navigation__heading--active {
Expand Down
51 changes: 13 additions & 38 deletions src/implementations/vanilla/components/inpage-navigation/inpage-navigation-ec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
@use '@ecl/theme-dev/theme';

// some variable declaration have to be done before
$outline-width: 3px;
$toggle-width: calc(
$_toggle-width: calc(
#{map.get(theme.$spacing, 's')} + #{map.get(theme.$icon, 's')} + #{map.get(
theme.$spacing,
's'
Expand All @@ -13,35 +12,17 @@ $toggle-width: calc(
@use 'inpage-navigation' with (
$_border-radius: 0,
$_shadow: none,
$_active-link-border-width: map.get(theme.$spacing, '2xs'),
$_title: (
'background': transparent,
'color': map.get(theme.$color, 'grey-100'),
'padding': map.get(theme.$spacing, 'xs') map.get(theme.$spacing, 's'),
'text-transform': uppercase,
),
$_item: (
'background': (
's': transparent,
'l': transparent,
),
'background-hover': (
's': transparent,
'l': transparent,
),
'background-active': (
's': transparent,
'l': map.get(theme.$color, 'grey-10'),
),
'padding': (
's': map.get(theme.$spacing, 's')
calc(#{map.get(theme.$spacing, 'xl')} - #{map.get(theme.$spacing, 'm')}),
'l': map.get(theme.$spacing, 'xs') map.get(theme.$spacing, 's')
map.get(theme.$spacing, 'xs') map.get(theme.$spacing, 'xs'),
),
'background': transparent,
'background-active': map.get(theme.$color, 'grey-10'),
'separator': (
's': 1px solid map.get(theme.$color, 'blue-75'),
'l': none,
's': map.get(theme.$color, 'blue-75'),
'l': transparent,
),
'font-weight': (
's': map.get(theme.$font-weight, 'regular'),
Expand All @@ -51,36 +32,30 @@ $toggle-width: calc(
's': map.get(theme.$color, 'white-100'),
'l': map.get(theme.$color, 'blue-100'),
),
'color-active': (
's': map.get(theme.$color, 'white-100'),
'l': map.get(theme.$color, 'grey-100'),
),
'color-active': map.get(theme.$color, 'grey-100'),
'text-decoration-hover': underline,
),
$_trigger: (
'background':
linear-gradient(
to left,
map.get(theme.$color, 'blue-120') $toggle-width,
map.get(theme.$color, 'blue-100') $toggle-width
map.get(theme.$color, 'blue-120') $_toggle-width,
map.get(theme.$color, 'blue-100') $_toggle-width
),
'padding': calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(
#{$toggle-width} + #{map.get(theme.$spacing, 'm')} - #{$outline-width}
)
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{map.get(theme.$spacing, 'm')} - #{$outline-width}),
'padding': map.get(theme.$spacing, 's')
calc(#{$_toggle-width} + #{map.get(theme.$spacing, 's')})
map.get(theme.$spacing, 's') map.get(theme.$spacing, 's'),
'separator': 1px solid map.get(theme.$color, 'blue-120'),
),
$_list: (
'padding': 0 map.get(theme.$spacing, 'm'),
'background': (
's': map.get(theme.$color, 'blue-110'),
'l': transparent,
),
),
$_outline: (
'width': $outline-width,
'color': map.get(theme.$color, 'white-100'),
'color-active': map.get(theme.$color, 'blue-100'),
'offset': -4px,
)
);
47 changes: 11 additions & 36 deletions src/implementations/vanilla/components/inpage-navigation/inpage-navigation-eu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
@use '@ecl/theme-dev/theme';

// some variable declaration have to be done before
$outline-width: 2px;
$toggle-width: calc(
$_toggle-width: calc(
#{map.get(theme.$spacing, 's')} + #{map.get(theme.$icon, 's')} + #{map.get(
theme.$spacing,
's'
Expand All @@ -13,35 +12,17 @@ $toggle-width: calc(
@use 'inpage-navigation' with (
$_border-radius: 8px,
$_shadow: 0 0 6px rgba(map.get(theme.$color, 'blue-100'), 0.2),
$_active-link-border-width: 0,
$_title: (
'background': map.get(theme.$color, 'blue-100'),
'color': map.get(theme.$color, 'white-100'),
'padding': map.get(theme.$spacing, 's'),
'text-transform': none,
),
$_item: (
'background': (
's': map.get(theme.$color, 'blue-5'),
'l': map.get(theme.$color, 'blue-5'),
),
'background-hover': (
's': map.get(theme.$color, 'white-100'),
'l': map.get(theme.$color, 'white-100'),
),
'background-active': (
's': map.get(theme.$color, 'white-100'),
'l': map.get(theme.$color, 'white-100'),
),
'padding': (
's': map.get(theme.$spacing, 's') $toggle-width
map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm'),
'l': map.get(theme.$spacing, 's') map.get(theme.$spacing, 's')
map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm'),
),
'background': map.get(theme.$color, 'white-100'),
'background-active': map.get(theme.$color, 'blue-10'),
'separator': (
's': 1px solid map.get(theme.$color, 'white-100'),
'l': 1px solid map.get(theme.$color, 'white-100'),
's': map.get(theme.$color, 'blue-10'),
'l': map.get(theme.$color, 'blue-10'),
),
'font-weight': (
's': map.get(theme.$font-weight, 'regular'),
Expand All @@ -51,31 +32,25 @@ $toggle-width: calc(
's': map.get(theme.$color, 'blue-100'),
'l': map.get(theme.$color, 'blue-100'),
),
'color-active': (
's': map.get(theme.$color, 'grey-80'),
'l': map.get(theme.$color, 'grey-80'),
),
'color-active': map.get(theme.$color, 'grey-80'),
'text-decoration-hover': none,
),
$_trigger: (
'background': map.get(theme.$color, 'blue-100'),
'padding': calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(
#{$toggle-width} + #{map.get(theme.$spacing, 'm')} - #{$outline-width}
)
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width})
calc(#{map.get(theme.$spacing, 's')} - #{$outline-width}),
'padding': map.get(theme.$spacing, 's')
calc(#{$_toggle-width} + #{map.get(theme.$spacing, 's')})
map.get(theme.$spacing, 's') map.get(theme.$spacing, 's'),
'separator': none,
),
$_list: (
'padding': 0,
'background': (
's': transparent,
'l': transparent,
),
),
$_outline: (
'width': $outline-width,
'color': map.get(theme.$color, 'blue-100'),
'color-active': map.get(theme.$color, 'blue-100'),
'offset': -2px,
)
);

0 comments on commit 308d0b7

Please sign in to comment.