Skip to content

Navbar: Increase size of links hitbox #1691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Navbar: Increase size of links hitbox #1691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5c59187
First draft
louismaximepiton Dec 7, 2022
2c23d99
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Dec 21, 2022
2090cf9
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Feb 21, 2023
97d1e65
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Mar 9, 2023
9521c0c
Clean version
louismaximepiton Mar 9, 2023
6f408ac
fix(review)
louismaximepiton Mar 13, 2023
64a73a0
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Apr 11, 2023
ecc7e97
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Dec 6, 2023
5d0ae88
Different focus for 4local nav and global header
louismaximepiton Dec 6, 2023
aa3c149
Merge branch 'main' into main-lmp-navbar-hitbox-feature
louismaximepiton Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions scss/_local-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,15 +69,21 @@
&:hover {
color: var(--#{$prefix}local-nav-hover-color);

&::before {
&::after {
color: var(--#{$prefix}local-nav-active-color);
}
}

@include media-breakpoint-down(lg) {
--bs-nav-link-padding-x: 0;
--bs-navbar-border-width: 0px;

padding: var(--bs-nav-link-margin-y) 0;
margin: 0 calc(-1 * var(--bs-nav-link-margin-x)); // stylelint-disable-line function-disallowed-list

&::before {
content: none;
}

&:hover {
color: var(--#{$prefix}local-nav-color);
background-color: var(--#{$prefix}local-nav-hover-bg);
Expand All @@ -88,15 +94,15 @@
.nav-link.active {
--#{$prefix}navbar-active-color: var(--#{$prefix}local-nav-color);

&::before {
bottom: calc(-1 * var(--#{$prefix}local-nav-border-width)); // stylelint-disable-line function-disallowed-list
&::after {
bottom: calc(-1 * (var(--#{$prefix}local-nav-border-width) + var(--bs-nav-link-margin-y))); // stylelint-disable-line function-disallowed-list
color: var(--#{$prefix}local-nav-active-color);
}

@include media-breakpoint-down(lg) {
background-color: var(--#{$prefix}local-nav-active-bg);

&::before {
&::after {
position: absolute;
top: 0;
bottom: 0;
Expand Down
1 change: 1 addition & 0 deletions scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
display: flex; // Boosted mod: instead of `block`
align-items: center; // Boosted mod
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
margin: var(--#{$prefix}nav-link-margin-y) var(--#{$prefix}nav-link-margin-x); // Boosted mod
@include font-size(var(--#{$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
Expand Down
128 changes: 76 additions & 52 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@
--#{$prefix}navbar-nav-font-size: #{$font-size-base}; // Boosted mod
--#{$prefix}navbar-nav-line-height: #{$line-height-base}; // Boosted mod
--#{$prefix}navbar-nav-letter-spacing: #{$letter-spacing-base}; // Boosted mod
--#{$prefix}navbar-nav-link-padding-y: #{$navbar-nav-link-padding-y}; // Boosted mod
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x-xs}; // Boosted mod
--#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y-xs}; // Boosted mod
--#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x-xs}; // Boosted mod
--#{$prefix}navbar-nav-link-margin-y: #{$navbar-nav-link-margin-y}; // Boosted mod
--#{$prefix}navbar-nav-link-margin-x: #{$navbar-nav-link-margin-x-xs}; // Boosted mod: margin over padding for focus
--#{$prefix}navbar-nav-icon-margin-y: #{$navbar-nav-icon-margin-y-xs}; // Boosted mod
--#{$prefix}navbar-nav-icon-margin-x: #{$navbar-nav-icon-margin-x-xs}; // Boosted mod
--#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size-xs}; // Boosted mod
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-margin-y: #{$navbar-toggler-margin-y}; // Boosted mod: margin over padding for focus
--#{$prefix}navbar-toggler-margin-x: #{$navbar-toggler-margin-x}; // Boosted mod: margin over padding for focus
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size-xs}; // Boosted mod
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod
--#{$prefix}navbar-toggler-icon-color: #{$navbar-light-icon-color}; // Boosted mod
Expand Down Expand Up @@ -67,12 +67,12 @@
--#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-nav-icon-padding-y: #{$navbar-nav-icon-padding-y};
--#{$prefix}navbar-nav-icon-padding-x: #{$navbar-nav-icon-padding-x};
--#{$prefix}navbar-nav-link-margin-x: #{$navbar-nav-link-margin-x};
--#{$prefix}navbar-nav-icon-margin-y: #{$navbar-nav-icon-margin-y};
--#{$prefix}navbar-nav-icon-margin-x: #{$navbar-nav-icon-margin-x};
--#{$prefix}navbar-nav-icon-size: #{$navbar-icon-size};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-nav-icon-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-nav-icon-padding-x};
--#{$prefix}navbar-toggler-margin-y: #{$navbar-nav-icon-margin-y};
--#{$prefix}navbar-toggler-margin-x: #{$navbar-nav-icon-margin-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
}
Expand Down Expand Up @@ -197,8 +197,8 @@

.navbar-nav {
// scss-docs-start navbar-nav-css-vars
--#{$prefix}nav-link-padding-x: var(--#{$prefix}navbar-nav-link-padding-x); // Boosted mod
--#{$prefix}nav-link-padding-y: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
--#{$prefix}nav-link-margin-x: var(--#{$prefix}navbar-nav-link-margin-x); // Boosted mod: margin over padding for focus, instead of `0`
--#{$prefix}nav-link-margin-y: var(--#{$prefix}navbar-nav-link-margin-y); // Boosted mod: margin over padding for focus, instead of `$nav-link-padding-y`
@include rfs(var(--#{$prefix}navbar-nav-font-size, $font-size-base), --#{$prefix}nav-link-font-size); // Boosted mod
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
Expand All @@ -218,16 +218,24 @@
// Boosted mod: Handle .nav-link and .nav-icon slightly differently than Bs
.nav-link {
position: relative;
padding-top: subtract(var(--#{$prefix}navbar-nav-link-padding-y), var(--#{$prefix}navbar-border-width));
margin: 0 calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
margin-top: subtract(var(--#{$prefix}nav-link-margin-y), var(--#{$prefix}navbar-border-width));
margin-left: 0;
word-break: break-all;

&:hover {
z-index: 1;
&::before {
position: absolute;
// stylelint-disable function-disallowed-list
top: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px));
right: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px));
bottom: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px));
left: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px));
// stylelint-enable function-disallowed-list
z-index: $stretched-link-z-index;
content: "";
}

@include media-breakpoint-down(lg) {
outline-offset: -$focus-visible-outer-width;
&:hover {
z-index: 1;
}

&.active,
Expand All @@ -236,6 +244,20 @@
}
}

.nav-icon {
--#{$prefix}nav-link-margin-x: var(--#{$prefix}navbar-nav-icon-margin-x);
--#{$prefix}nav-link-margin-y: var(--#{$prefix}navbar-nav-icon-margin-y);

margin-top: var(--#{$prefix}nav-link-margin-y);
white-space: nowrap;

svg,
img {
width: var(--#{$prefix}navbar-nav-icon-size);
height: var(--#{$prefix}navbar-nav-icon-size);
}
}

.nav-item {
border-top: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);

Expand All @@ -244,20 +266,8 @@
margin-top: $navbar-badge-margin-top; // stay in Scss because no need of CSS var
}

.nav-link.nav-icon {
padding: var(--#{$prefix}navbar-nav-icon-padding-y) var(--#{$prefix}navbar-nav-icon-padding-x);
margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
white-space: nowrap;

svg,
img {
width: var(--#{$prefix}navbar-nav-icon-size);
height: var(--#{$prefix}navbar-nav-icon-size);
}
}

&:not(:first-of-type) > .nav-icon {
margin-left: 0;
margin-left: var(--#{$prefix}navbar-nav-icon-margin-x);
}
}

Expand All @@ -277,8 +287,8 @@
//

.navbar-text {
// Boosted mod: no padding-top
padding-bottom: var(--#{$prefix}navbar-nav-link-padding-y); // Boosted mod
margin-top: var(--#{$prefix}navbar-nav-link-margin-y); // Boosted mod: margin over padding for focus
margin-bottom: var(--#{$prefix}navbar-nav-link-margin-y); // Boosted mod: margin over padding for focus
color: var(--#{$prefix}navbar-color);

// Boosted mod: no a:focus
Expand All @@ -290,7 +300,7 @@

// Boosted mod: Navbar item
.navbar-item {
margin-bottom: var(--#{$prefix}navbar-nav-icon-padding-y);
margin-bottom: var(--#{$prefix}navbar-nav-icon-margin-y);
}
// End mod

Expand Down Expand Up @@ -329,10 +339,10 @@

// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
// stylelint-disable-next-line function-disallowed-list
padding: var(--#{$prefix}navbar-toggler-padding-y) calc(var(--#{$prefix}navbar-toggler-padding-x) / 2) var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x); // Boosted mod
// stylelint-disable-next-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); // Boosted mod
position: relative; // Boosted mod
padding: 0; // Boosted mod: margin over padding for focus
margin: var(--#{$prefix}navbar-toggler-margin-y) var(--#{$prefix}navbar-toggler-margin-x); // Boosted mod: margin over padding for focus
margin-right: 0; // Boosted mod
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
line-height: 1;
color: var(--#{$prefix}navbar-color);
Expand All @@ -341,6 +351,20 @@
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition));

// Boosted mod
&::before {
position: absolute;
// stylelint-disable function-disallowed-list
top: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y));
right: calc(-.25 * var(--#{$prefix}gutter-x));
bottom: calc(-1 * var(--#{$prefix}navbar-toggler-margin-y));
left: calc(-1 * var(--#{$prefix}navbar-toggler-margin-x));
// stylelint-enable function-disallowed-list
z-index: $stretched-link-z-index;
content: "";
}
// End mod

&:hover {
text-decoration: none;
}
Expand Down Expand Up @@ -419,13 +443,13 @@

// Boosted mod
.nav-link {
margin: 0;
margin-left: var(--#{$prefix}nav-link-margin-x);

&.active::before {
&.active::after {
position: absolute;
right: var(--#{$prefix}navbar-nav-link-padding-x);
bottom: calc(-1 * var(--#{$prefix}navbar-padding-y)); // stylelint-disable-line function-disallowed-list
left: var(--#{$prefix}navbar-nav-link-padding-x);
right: 0;
bottom: calc(-1 * add(var(--#{$prefix}navbar-padding-y), var(--#{$prefix}nav-link-margin-y))); // stylelint-disable-line function-disallowed-list
left: 0;
height: calc(var(--#{$prefix}navbar-border-width) * 4); // stylelint-disable-line function-disallowed-list
content: "";
background-color: currentcolor;
Expand All @@ -437,19 +461,19 @@
border: 0;

&:first-child > .nav-link {
margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: 0;
}

&:last-child > .nav-link {
margin-right: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: 0;
}

&:first-child > .nav-icon {
margin-left: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: 0;
}

&:last-child > .nav-icon {
margin-right: calc(-1 * var(--#{$prefix}navbar-nav-icon-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: 0;
}
}
// End mod
Expand All @@ -475,17 +499,17 @@

.header-minimized &:first-child:not(.supra),
.header-minimized .supra + &.navbar {
--#{$prefix}navbar-nav-link-padding-y: .75rem;
--#{$prefix}navbar-nav-link-margin-y: .75rem;
}

&:not(.supra) + .navbar {
margin-top: 0;

.nav-link{
padding-bottom: add(var(--#{$prefix}navbar-nav-link-padding-y), .0625rem);
margin-bottom: add(var(--#{$prefix}nav-link-margin-y), .0625rem);

&.active::before{
bottom: 0;
&.active::after{
bottom: calc(-1 * add(var(--#{$prefix}nav-link-margin-y), .0625rem)); // stylelint-disable-line function-disallowed-list
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions scss/_orange-navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@
--#{$prefix}navbar-padding-y: 0px;
--#{$prefix}navbar-nav-font-size: #{$font-size-sm};
--#{$prefix}navbar-nav-line-height: #{$line-height-sm};
--#{$prefix}navbar-nav-link-padding-y: #{$navbar-supra-link-padding-y};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-supra-link-padding-x};
--#{$prefix}navbar-nav-icon-padding-y: #{$navbar-supra-icon-padding-y};
--#{$prefix}navbar-nav-icon-padding-x: #{$navbar-supra-icon-padding-x};
--#{$prefix}navbar-nav-link-margin-y: #{$navbar-supra-link-margin-y};
--#{$prefix}navbar-nav-link-margin-x: #{$navbar-supra-link-margin-x};
--#{$prefix}navbar-nav-icon-margin-y: #{$navbar-supra-icon-margin-y};
--#{$prefix}navbar-nav-icon-margin-x: #{$navbar-supra-icon-margin-x};
--#{$prefix}navbar-nav-icon-size: #{$navbar-supra-icon-size};
// scss-docs-end supra-navbar-css-vars

display: none;

.navbar-nav .nav-link {
padding-top: var(--#{$prefix}navbar-nav-link-padding-y);
margin-top: var(--#{$prefix}navbar-nav-link-margin-y);

&.nav-icon {
padding-top: add(var(--#{$prefix}navbar-nav-icon-padding-y), .3125rem);
margin-top: add(var(--#{$prefix}navbar-nav-icon-margin-y), .3125rem);
}
}

Expand All @@ -38,8 +38,8 @@
--#{$prefix}navbar-brand-logo-size: #{$navbar-brand-logo-size-xs};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-xs};
--#{$prefix}navbar-brand-letter-spacing: #{$navbar-brand-letter-spacing-xs};
--#{$prefix}navbar-nav-icon-padding-y: #{$navbar-minimized-nav-icon-padding-y};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-minimized-toggler-padding-y};
--#{$prefix}navbar-nav-icon-margin-y: #{$navbar-minimized-nav-icon-margin-y};
--#{$prefix}navbar-toggler-margin-y: #{$navbar-minimized-toggler-margin-y};

.two-lined {
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size-two-lined-xs};
Expand Down
32 changes: 16 additions & 16 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1487,18 +1487,18 @@ $navbar-padding-y: .375rem !default; // Boosted mod
$navbar-padding-x: null !default;
$navbar-font-weight: $font-weight-bold !default; // Boosted mod

$navbar-nav-link-padding-y: 1rem !default; // Boosted mod
$navbar-nav-link-padding-x-xs: $spacer * .25 !default; // Boosted mod
$navbar-nav-link-padding-x: $spacer * .5 !default; // Boosted mod
$navbar-nav-link-margin-y: 1rem !default; // Boosted mod
$navbar-nav-link-margin-x-xs: $spacer * .25 !default; // Boosted mod
$navbar-nav-link-margin-x: $spacer * .5 !default; // Boosted mod

$navbar-brand-font-size: 2.1875rem !default; // Boosted mod
// Boosted mod: no nav-link-height calculation
$navbar-brand-padding-y: 0 !default; // Boosted mod
$navbar-brand-margin-end: $spacer * 1.5 !default; // Boosted mod

$navbar-toggler-icon-close-bg: $cross-icon !default; // Boosted mod
$navbar-toggler-padding-y: $spacer * .6 !default; // Boosted mod: same as $navbar-nav-icon-padding-y-xs
$navbar-toggler-padding-x: $spacer * .75 !default; // Boosted mod: same as $navbar-nav-icon-padding-x-xs
$navbar-toggler-margin-y: $spacer * .6 !default; // Boosted mod: same as $navbar-nav-icon-margin-y-xs
$navbar-toggler-margin-x: $spacer * .75 !default; // Boosted mod: same as $navbar-nav-icon-margin-x-xs
$navbar-toggler-font-size-xs: 1.04166666rem !default; // Boosted mod
$navbar-toggler-font-size: 1.25rem !default; // Boosted mod
$navbar-toggler-border-radius: $btn-border-radius !default;
Expand Down Expand Up @@ -1547,20 +1547,20 @@ $navbar-brand-letter-spacing-two-lined: $letter-spacing-base * 8 !default;
$navbar-icon-size-xs: $spacer * 1.25 !default;
$navbar-icon-size: $spacer * 1.5 !default;

$navbar-nav-icon-padding-y-xs: $spacer * .6 !default;
$navbar-nav-icon-padding-x-xs: $spacer * .75 !default;
$navbar-nav-icon-padding-y: $navbar-brand-margin-y !default;
$navbar-nav-icon-padding-x: $spacer !default;
$navbar-nav-icon-margin-y-xs: $spacer * .6 !default;
$navbar-nav-icon-margin-x-xs: $spacer * .75 !default;
$navbar-nav-icon-margin-y: $navbar-brand-margin-y !default;
$navbar-nav-icon-margin-x: $spacer !default;

$navbar-supra-link-padding-y: $spacer * .6 !default;
$navbar-supra-link-padding-x: .46875rem !default;
$navbar-supra-icon-padding-y: $spacer * .25 !default;
$navbar-supra-icon-padding-x: $navbar-nav-icon-padding-x-xs !default;
$navbar-supra-link-margin-y: $spacer * .6 !default;
$navbar-supra-link-margin-x: .46875rem !default;
$navbar-supra-icon-margin-y: $spacer * .25 !default;
$navbar-supra-icon-margin-x: $navbar-nav-icon-margin-x-xs !default;
$navbar-supra-icon-size: $navbar-icon-size-xs !default;

$navbar-minimized-brand-margin-y: $spacer * .75 !default;
$navbar-minimized-nav-icon-padding-y: $navbar-minimized-brand-margin-y !default;
$navbar-minimized-toggler-padding-y: $navbar-minimized-brand-margin-y !default;
$navbar-minimized-nav-icon-margin-y: $navbar-minimized-brand-margin-y !default;
$navbar-minimized-toggler-margin-y: $navbar-minimized-brand-margin-y !default;

$navbar-badge-padding-y: .125rem !default;
$navbar-badge-padding-x: .375rem !default;
Expand Down Expand Up @@ -2463,7 +2463,7 @@ $tag-font-size-sm: $font-size-sm !default;
// Local navigation

// scss-docs-start local-nav-variables
$local-nav-padding-y: $navbar-nav-link-padding-y !default;
$local-nav-padding-y: $navbar-nav-link-margin-y !default;
$local-nav-color: null !default;
$local-nav-bg: var(--#{$prefix}body-bg) !default;
$local-nav-hover-color: var(--#{$prefix}link-hover-color) !default;
Expand Down
Loading