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
+155 −81
Open

Navbar: Increase size of links hitbox #1691

Show file tree
Hide file tree
Changes from 5 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
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 @@ -25,6 +25,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
122 changes: 72 additions & 50 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,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-filter: none; // Boosted mod
Expand Down Expand Up @@ -65,12 +65,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 @@ -162,8 +162,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 @@ -183,16 +183,22 @@
// 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-left: 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;
top: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * var(--#{$prefix}nav-link-margin-y, 5px)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * var(--#{$prefix}nav-link-margin-x, 0px)); // stylelint-disable-line 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 @@ -201,6 +207,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 @@ -209,20 +229,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 @@ -242,8 +250,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 @@ -255,7 +263,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 @@ -294,8 +302,10 @@

// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
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); /* stylelint-disable-line function-disallowed-list */ // Boosted mod
margin-right: calc(-.5 * var(--#{$prefix}navbar-toggler-padding-x)); /* stylelint-disable-line function-disallowed-list */ // 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 @@ -304,6 +314,18 @@
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
@include transition(var(--#{$prefix}navbar-toggler-transition));

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

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

// Boosted mod
.nav-link {
margin-left: 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 @@ -397,19 +419,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 @@ -434,17 +456,17 @@
}

&.header-minimized {
--#{$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; /* stylelint-disable-line length-zero-no-unit */
--#{$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 @@ -33,8 +33,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
30 changes: 15 additions & 15 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1407,18 +1407,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 @@ -1465,20 +1465,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
Loading