Skip to content
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.

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

Navbar: Increase size of links hitbox #1691

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions scss/_nav.scss
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
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
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
--#{$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));
MewenLeHo marked this conversation as resolved.
Show resolved Hide resolved
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
MewenLeHo marked this conversation as resolved.
Show resolved Hide resolved
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
MewenLeHo marked this conversation as resolved.
Show resolved Hide resolved
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
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
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