From 1e9872d08b8fce4277897bba63cc0567b34f384c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 Feb 2023 07:15:35 +0100 Subject: [PATCH] =?UTF-8?q?chore(merge=20main):=20patched=20commit=20?= =?UTF-8?q?=E2=86=92=207d9aa9d=20(#1829)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Louis-Maxime Piton --- .bundlewatch.config.json | 2 +- scss/_nav.scss | 77 +++++++++++++++---- scss/_variables.scss | 14 +++- site/content/docs/5.3/components/navs-tabs.md | 77 ++++++++++--------- site/content/docs/5.3/migration.md | 34 +++++++- 5 files changed, 147 insertions(+), 57 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 65fe287eff..0bf61e2eed 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "41.0 kB" + "maxSize": "41.25 kB" }, { "path": "./dist/css/boosted.min.css", diff --git a/scss/_nav.scss b/scss/_nav.scss index 37f8f3a045..9a25bc3334 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -79,7 +79,6 @@ .nav-link { padding: subtract(1rem, var(--#{$prefix}nav-tabs-border-width)) subtract(var(--#{$prefix}nav-tabs-link-padding-x), var(--#{$prefix}nav-tabs-border-width)); // Boosted mod margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list - background: none; border: var(--#{$prefix}nav-tabs-border-width) solid transparent; border-width: var(--#{$prefix}nav-tabs-link-border-width); // Boosted mod @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); @@ -116,19 +115,6 @@ } } -// Boosted mod -.nav-tabs-light { - // scss-docs-start nav-tabs-light-css-vars - --#{$prefix}nav-tabs-border-width: #{calc($nav-tabs-border-width * .5)}; - --#{$prefix}nav-tabs-border-color: #{$gray-500}; - --#{$prefix}nav-tabs-link-hover-color: #{$accessible-orange}; - --#{$prefix}nav-tabs-link-border-width: 0 0 calc(var(--#{$prefix}nav-tabs-border-width) * 4); // stylelint-disable-line function-disallowed-list - --#{$prefix}nav-tabs-link-hover-border-color: transparent; - --#{$prefix}nav-tabs-link-active-border-color: #{$accessible-orange}; - // scss-docs-end nav-tabs-light-css-vars -} -// End mod - // // Pills // @@ -144,8 +130,6 @@ .nav-link { padding-right: var(--#{$prefix}nav-pills-padding-x); // Boosted mod padding-left: var(--#{$prefix}nav-pills-padding-x); // Boosted mod - background: none; - border: 0; @include border-radius(var(--#{$prefix}nav-pills-border-radius)); &:disabled { @@ -168,6 +152,67 @@ // End mod } +// +// Underline +// + +.nav-underline { + // scss-docs-start nav-underline-css-vars + --#{$prefix}nav-underline-gap: #{$nav-underline-gap}; + --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width}; + --#{$prefix}nav-underline-border-color: #{$nav-underline-border-color}; // Boosted mod + --#{$prefix}nav-underline-border-radius: #{$nav-underline-border-radius}; // Boosted mod + --#{$prefix}nav-underline-link-padding-x: #{$nav-underline-link-padding-x}; // Boosted mod + --#{$prefix}nav-underline-link-hover-color: #{$nav-underline-link-hover-color}; // Boosted mod + --#{$prefix}nav-underline-link-hover-bg: transparent; // Boosted mod + --#{$prefix}nav-underline-link-border-width: #{$nav-underline-link-border-width}; // Boosted mod + --#{$prefix}nav-underline-link-hover-border-color: transparent; // Boosted mod + --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color}; + --#{$prefix}nav-underline-link-active-bg: #{$nav-underline-link-active-bg}; // Boosted mod + --#{$prefix}nav-underline-link-active-border-color: #{$nav-underline-link-active-border-color}; // Boosted mod + // scss-docs-end nav-underline-css-vars + + gap: var(--#{$prefix}nav-underline-gap); + border-bottom: var(--#{$prefix}nav-underline-border-width) solid var(--#{$prefix}nav-underline-border-color); // Boosted mod + + // Boosted mod + // Bigger gap between elements from lg breakpoint + @include media-breakpoint-up(lg) { + --#{$prefix}nav-underline-gap: #{$nav-underline-gap-lg}; + } + + .nav-link { + padding: subtract(1rem, var(--#{$prefix}nav-underline-border-width)) subtract(var(--#{$prefix}nav-underline-link-padding-x), var(--#{$prefix}nav-underline-border-width)); // Boosted mod + margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-width)); // stylelint-disable-line function-disallowed-list + border: var(--#{$prefix}nav-underline-border-width) solid transparent; + border-width: var(--#{$prefix}nav-underline-link-border-width); + @include border-top-radius(var(--#{$prefix}nav-underline-border-radius)); + + &:hover { + color: var(--#{$prefix}nav-underline-link-hover-color); + background-color: var(--#{$prefix}nav-underline-link-hover-bg); + // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link + isolation: isolate; + border-color: var(--#{$prefix}nav-underline-link-hover-border-color); + } + + &.disabled, + &:disabled { + color: var(--#{$prefix}nav-link-disabled-color); + background-color: transparent; + border-color: transparent; + } + } + + .nav-link.active, + .nav-item.show .nav-link { + color: var(--#{$prefix}nav-underline-link-active-color); + background-color: var(--#{$prefix}nav-underline-link-active-bg); + border-color: var(--#{$prefix}nav-underline-link-active-border-color); + } + // End mod +} + // // Justified variants diff --git a/scss/_variables.scss b/scss/_variables.scss index df4e135825..02fb20ad4b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1342,10 +1342,22 @@ $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default; $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default; $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg` -$nav-pills-padding-x: $nav-tabs-link-padding-x !default; // Boosted mod +$nav-pills-padding-x: 1.8125rem !default; // Boosted mod $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; + +$nav-underline-gap: 0 !default; // Boosted mod: instead of 1rem +$nav-underline-gap-lg: $spacer * .5 !default; // Boosted mod +$nav-underline-border-width: calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod: instead of .125rem +$nav-underline-border-color: $gray-500 !default; // Boosted mod +$nav-underline-border-radius: var(--#{$prefix}border-radius) !default; // Boosted mod +$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; +$nav-underline-link-padding-x: 1.8125rem !default; // Boosted mod +$nav-underline-link-hover-color: $accessible-orange !default; // Boosted mod +$nav-underline-link-border-width: 0 0 calc(var(--#{$prefix}nav-underline-border-width) * 4) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod +$nav-underline-link-active-bg: var(--#{$prefix}body-bg) !default; // Boosted mod +$nav-underline-link-active-border-color: $accessible-orange !default; // Boosted mod // scss-docs-end nav-variables diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index eef0f8e6f7..390c5cfd8e 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -151,15 +151,18 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb {{< /example >}} - -### Tabs light +### Pills + +Take that same HTML, but use `.nav-pills` instead: -Nav tabs light only differ visually, with a full width bottom border and a different active state. +{{< ods-incompatibility-alert >}} +This variant should not be used because it is a button component in the Orange Design System specifications. +{{< /ods-incompatibility-alert >}} {{< example >}} -