diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index b7f35099a2..990b7ebd3e 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "26.2 kB" + "maxSize": "26.6 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "23.9 kB" + "maxSize": "24.3 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss new file mode 100644 index 0000000000..d0c773d011 --- /dev/null +++ b/scss/_stepped-process.scss @@ -0,0 +1,126 @@ +// +// Orange stepped process +// +.stepped-process { + ol { + display: flex; + padding: 0; + margin: 0; + overflow: hidden; + font-weight: $font-weight-bold; + text-align: center; + list-style: none; + counter-reset: $stepped-process-counter; + } +} + +.stepped-process-item { + display: flex; + flex: 1; + padding: $step-item-padding; + margin-right: $step-item-margin-end; + counter-increment: $stepped-process-counter; + background-color: $step-item-bg; + + &.active { + background-color: $step-item-active-bg; + } + + .active ~ & { + background-color: $step-item-next-bg; + } +} + +.stepped-process-link { + flex: 1 0 $step-link-width; + max-width: $step-link-width; + margin: auto; + overflow: hidden; + color: $step-link-color; + text-decoration: if($link-decoration == none, null, none); + white-space: nowrap; + outline-offset: $spacer; + + &::before { + content: $step-link-marker; + } + + &:hover, + &:focus { + color: $step-link-color; + } + + &:hover { + text-decoration: if($link-hover-decoration == underline, null, underline); + } + + &:focus { + text-decoration: $link-decoration; + outline-offset: $spacer / 4; + } + + .active &, + .active ~ .stepped-process-item & { + color: $step-link-active-color; + } +} + +@include media-breakpoint-up(sm) { + .stepped-process-item { + position: relative; + max-width: $step-item-max-width; + padding: $step-item-padding 0; + margin: 0; + filter: $step-item-drop-shadow; + + & + & { + padding-left: $step-item-padding-end; + } + + &:last-child { + padding-right: $step-item-padding-end; + } + + &:not(:last-child)::after { + position: absolute; + top: 0; + bottom: 0; + left: subtract(100%, 1px); + z-index: -1; + width: $step-item-arrow-width; + content: ""; + background-color: inherit; + clip-path: $step-item-arrow-shape; + } + + &.active { + max-width: none; + } + } + + @for $i from 1 through $stepped-process-max-items { + .stepped-process-item:nth-child(#{$i}) { + $index: subtract($stepped-process-max-items, $i); + z-index: if($index == 0, null, $index); + } + } + + .active .stepped-process-link { + max-width: none; + + &::before { + content: $step-link-marker-lg; + } + } +} + +@include media-breakpoint-up(xl) { + .stepped-process-item, + .stepped-process-link { + max-width: none; + } + + .stepped-process-link::before { + content: $step-link-marker-lg; + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index d40fd8ab9e..19ed8bde6f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1643,4 +1643,29 @@ $back-to-top-icon: var(--#{$boosted-variable-prefix}chevron-icon) $back-to-top-icon-width: add(.5rem, 1px) !default; $back-to-top-icon-height: subtract(1rem, 1px) !default; // scss-docs-end back-to-top + +//// Stepped process +// scss-docs-start stepped-process +$stepped-process-max-items: 5 !default; +$stepped-process-counter: step !default; // Used as a counter name + +$step-item-max-width: 3.75rem !default; +$step-item-margin-end: $border-width !default; +$step-item-padding: $spacer / 2 !default; +$step-item-bg: $black !default; +$step-item-active-bg: $primary !default; +$step-item-next-bg: $gray-400 !default; +$step-item-shadow-size: $border-width * 1.5 !default; +$step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"} !default; +$step-item-padding-end: $step-item-padding * 2 !default; + +$step-link-width: 1.25ch !default; // Matches width of a single number +$step-link-color: $white !default; +$step-link-active-color: $black !default; +$step-link-marker: counter($stepped-process-counter) "\A0" !default; +$step-link-marker-lg: counter($stepped-process-counter) ".\A0" !default; + +$step-item-arrow-width: 1rem !default; +$step-item-arrow-shape: polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"} !default; // Used in clip-path +// scss-docs-end stepped-process // End mod diff --git a/scss/boosted.scss b/scss/boosted.scss index fea047feda..9c25f9f7b7 100644 --- a/scss/boosted.scss +++ b/scss/boosted.scss @@ -51,6 +51,7 @@ // Boosted @import "back-to-top"; +@import "stepped-process"; // Helpers @import "helpers"; diff --git a/site/content/docs/5.0/components/stepped-process.md b/site/content/docs/5.0/components/stepped-process.md new file mode 100644 index 0000000000..8f893955e3 --- /dev/null +++ b/site/content/docs/5.0/components/stepped-process.md @@ -0,0 +1,48 @@ +--- +layout: docs +title: Stepped process +description: Stepped process bar used for multiple steps forms process +group: components +toc: true +--- + +## How to use + +Use a `nav` element with `.stepped-process` class, containing an ordered list `
    ` with `.stepped-process-item` class on list items. + +Use short labels for each step, otherwise they will be cut off to preserve inline layout. More information can be carried on the `title` attribute of the `.stepped-process-link`. + +Add `.active` to a `.stepped-process-item` to indicate the current step, alongside `aria-current="step"` to convey the active state to assistive technologies. + +## Example + +{{< example >}} + +{{< /example >}} + +## Sass + +### Variables + +For more details, please have a look at the exhaustive list of available variables: + +{{< scss-docs name="stepped-process" file="scss/_variables.scss" >}} \ No newline at end of file diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html index 9c87764152..98bf9aa3c5 100644 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html @@ -1418,6 +1418,36 @@

    ترقيم الصفحات

    {{< /example >}} +
    +
    +

    Stepped process

    + }}">Documentation +
    +
    + {{< example show_markup="false" >}} + + {{< /example >}} +
    +

    بوبوفيرس

    diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html index b730f1baf2..5592c9697e 100644 --- a/site/content/docs/5.0/examples/cheatsheet/index.html +++ b/site/content/docs/5.0/examples/cheatsheet/index.html @@ -60,6 +60,7 @@

    On this pageNavs
  1. Navbar
  2. Pagination
    3. +
  3. Stepped process
  4. Popovers
  5. Progress
  6. Scrollspy
    7. @@ -1412,6 +1413,36 @@

    Pagination

    {{< /example >}}
    +
    +
    +

    Stepped process

    + }}">Documentation +
    +
    + {{< example show_markup="false" >}} + + {{< /example >}} +
    +

    Popovers

    diff --git a/site/content/docs/5.0/guidelines/navigation.md b/site/content/docs/5.0/guidelines/navigation.md index 0323a77e2a..bebd50c9a6 100644 --- a/site/content/docs/5.0/guidelines/navigation.md +++ b/site/content/docs/5.0/guidelines/navigation.md @@ -270,7 +270,31 @@ toc: true
    ## Stepped process +[Documentation]({{< docsref "/components/stepped-process" >}}) —  +{{< anchor web-nav-stp-001 >}} +{{< anchor web-nav-stp-002 >}} -{{< callout info >}} -This feature will be delivered with [#524]({{< param repo >}}/issues/524). -{{< /callout >}} +
    +
    + +
    +
    \ No newline at end of file diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 8b716f7ef2..4161e1dac3 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -76,6 +76,7 @@ - title: Popovers - title: Progress - title: Scrollspy + - title: Stepped process - title: Spinners - title: Toasts - title: Tooltips