Tags

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "37.0 kB"
+      "maxSize": "37.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "34.0 kB"
+      "maxSize": "34.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_tag.scss

@@ -0,0 +1,160 @@
+// stylelint-disable function-disallowed-list
+
+.tag {
+  // scss-docs-start tag-css-vars
+  --#{$prefix}tag-gap: #{$tag-gap};
+  --#{$prefix}tag-padding-x: #{$tag-padding-x};
+  --#{$prefix}tag-padding-y: #{$tag-padding-y};
+  --#{$prefix}tag-margin: 0;
+  @include rfs($tag-font-size, --#{$prefix}tag-font-size);
+  --#{$prefix}tag-font-shift: #{$tag-font-shift};
+  --#{$prefix}tag-font-weight: #{$tag-font-weight};
+  --#{$prefix}tag-font-spacing: #{$tag-font-spacing};
+  --#{$prefix}tag-icon-size: #{$tag-icon-size};
+  --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start};
+  --#{$prefix}tag-close-icon: #{$cross-icon-smooth};
+  --#{$prefix}tag-close-size: #{add(var(--#{$prefix}tag-font-size), .375rem)};
+  --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end};
+  --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start};
+  --#{$prefix}tag-border-width: #{$tag-border-width};
+  --#{$prefix}tag-border-radius: #{$tag-border-radius};
+  --#{$prefix}tag-border-color: #{$tag-border-color};
+  --#{$prefix}tag-active-color: #{$tag-active-color};
+  --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color};
+  --#{$prefix}tag-disabled-color: #{$tag-disabled-color};
+  --#{$prefix}tag-outline-color: var(--#{$prefix}link-hover-color);
+  // scss-docs-end tag-css-vars
+
+  display: inline-flex;
+  gap: var(--#{$prefix}tag-gap);
+  align-items: center;
+  padding: subtract(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5)) var(--#{$prefix}tag-padding-x) add(var(--#{$prefix}tag-padding-y), calc(var(--#{$prefix}tag-font-shift) * .5));
+  margin: var(--#{$prefix}tag-margin);
+  @include font-size(var(--#{$prefix}tag-font-size));
+  font-weight: var(--#{$prefix}tag-font-weight);
+  line-height: add(var(--#{$prefix}tag-font-size), .125rem);
+  color: inherit;
+  letter-spacing: var(--#{$prefix}tag-font-spacing);
+  background-color: transparent;
+  border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
+  outline-offset: 2px;
+  @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+
+  img,
+  svg {
+    width: var(--#{$prefix}tag-icon-size);
+    min-width: var(--#{$prefix}tag-icon-size); // Here to avoid weird behavior on wrap
+    height: var(--#{$prefix}tag-icon-size);
+    margin: add(calc(var(--#{$prefix}tag-icon-size) * -.5), var(--#{$prefix}tag-font-shift)) 0 calc(var(--#{$prefix}tag-icon-size) * -.5) var(--#{$prefix}tag-icon-margin-start);
+  }
+
+  .close {
+    position: relative;
+    width: var(--#{$prefix}tag-close-size);
+    min-width: var(--#{$prefix}tag-close-size); // Here to avoid weird behavior on wrap
+    height: var(--#{$prefix}tag-close-size);
+    margin: add(calc(var(--#{$prefix}tag-close-size) * -.5), var(--#{$prefix}tag-font-shift)) var(--#{$prefix}tag-close-margin-end) calc(var(--#{$prefix}tag-close-size) * -.5) var(--#{$prefix}tag-close-margin-start);
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+    outline-offset: 2px;
+    @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+
+    &::before {
+      position: absolute;
+      top: calc(var(--#{$prefix}tag-padding-y) * -1);
+      right: calc(var(--#{$prefix}tag-padding-y) * -1);
+      bottom: calc(var(--#{$prefix}tag-padding-y) * -1);
+      left: calc(var(--#{$prefix}tag-padding-y) * -1);
+      content: "";
+      @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
+    }
+
+    &::after {
+      display: block;
+      height: 100%;
+      content: "";
+      background-color: currentcolor;
+      mask-image: escape-svg(var(--#{$prefix}tag-close-icon));
+      mask-repeat: no-repeat;
+      mask-position: 50%;
+      mask-size: subtract(var(--#{$prefix}tag-close-size), .375rem);
+    }
+
+    &:hover,
+    &:active {
+      color: var(--#{$prefix}tag-active-color);
+      background-color: var(--#{$prefix}tag-active-decoration-color);
+    }
+
+    &:focus[data-focus-visible-added] {
+      outline: 3px solid var(--#{$prefix}tag-outline-color);
+      outline-offset: 2px;
+    }
+
+    &[disabled] {
+      pointer-events: none;
+    }
+  }
+
+  &[disabled],
+  &.disabled {
+    color: var(--#{$prefix}tag-disabled-color);
+    pointer-events: none;
+    border-color: var(--#{$prefix}tag-disabled-color);
+  }
+}
+
+// stylelint-disable selector-no-qualifying-type
+a.tag,
+button.tag,
+label.tag {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--#{$prefix}tag-active-decoration-color);
+  }
+
+  &:focus[data-focus-visible-added] {
+    z-index: 3;
+    outline: .1875rem solid var(--#{$prefix}tag-outline-color);
+    outline-offset: .125rem;
+  }
+
+  &.active,
+  &:active {
+    color: var(--#{$prefix}tag-active-color);
+    background-color: var(--#{$prefix}tag-active-decoration-color);
+    border-color: var(--#{$prefix}tag-active-decoration-color);
+
+    &[disabled],
+    &.disabled {
+      background-color: var(--#{$prefix}tag-disabled-color);
+      border-color: var(--#{$prefix}tag-disabled-color);
+    }
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+.tag-sm {
+  // scss-docs-start tag-dark-css-vars
+  --#{$prefix}tag-padding-x: #{$tag-padding-x-sm};
+  --#{$prefix}tag-padding-y: #{$tag-padding-y-sm};
+  --#{$prefix}tag-font-size: #{$tag-font-size-sm};
+  --#{$prefix}tag-icon-size: #{$tag-icon-size-sm};
+  --#{$prefix}tag-icon-margin-start: #{$tag-icon-margin-start-sm};
+  --#{$prefix}tag-close-margin-end: #{$tag-close-margin-end-sm};
+  --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm};
+  // scss-docs-end tag-dark-css-vars
+}
+
+.tag-dark {
+  // scss-docs-start tag-sm-css-vars
+  --#{$prefix}tag-border-color: #{$tag-border-color-dark};
+  --#{$prefix}tag-active-color: #{$tag-active-color-dark};
+  --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color-dark};
+  --#{$prefix}tag-disabled-color: #{$tag-disabled-color-dark};
+  // scss-docs-end tag-sm-css-vars
+}

scss/_variables.scss

@@ -354,6 +354,7 @@ $escaped-characters: (
 //// SVG as Data-URi
 $chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2 7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $cross-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
+$cross-icon-smooth:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M24.536 20.298a1.499 1.499 0 0 1 0 2.12l-2.119 2.118a1.499 1.499 0 0 1-2.119 0L15 19.238l-5.298 5.298a1.499 1.499 0 0 1-2.12 0l-2.118-2.119a1.499 1.499 0 0 1 0-2.119L10.762 15 5.464 9.702a1.499 1.499 0 0 1 0-2.12l2.119-2.118a1.499 1.499 0 0 1 2.119 0L15 10.762l5.298-5.298a1.499 1.499 0 0 1 2.12 0l2.118 2.119a1.499 1.499 0 0 1 0 2.119L19.238 15z'/></svg>") !default;
 $cross-icon-stroke:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path stroke='#{$black}' stroke-width='5' stroke-linecap='round' d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 $check-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
 $burger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='M28 21v2H2v-2h26Zm0-7v2H2v-2h26Zm0-7v2H2V7h26Z'/></svg>") !default;
@@ -2163,3 +2164,44 @@ $footer-gap:                              $spacer * .75 !default;
 $footer-gap-xl:                           $spacer * 1.7 !default;
 // scss-docs-end footer
 // End mod
+
+// Tags
+
+// scss-docs-start tag-variables
+$tag-gap:                           map-get($spacers, 1) !default;
+$tag-font-shift:                    $spacer * .1 !default;
+$tag-font-weight:                   $font-weight-bold !default;
+$tag-font-spacing:                  $letter-spacing-base !default;
+$tag-border-width:                  $border-width !default;
+$tag-border-radius:                 $border-radius-pill !default;
+
+$tag-padding-x:                     $spacer * .65 !default;
+$tag-padding-y:                     $spacer * .45 !default;
+$tag-icon-size:                     $spacer * 1.2 !default;
+$tag-icon-margin-start:             -$spacer * .35 !default;
+$tag-close-margin-end:              -$spacer * .3 !default;
+$tag-close-margin-start:            $spacer * .2 !default;
+$tag-font-size:                     $font-size-base !default;
+
+$tag-active-color:                  $white !default;
+$tag-disabled-color:                $gray-500 !default;
+$tag-border-color:                  $gray-500 !default;
+$tag-active-decoration-color:       $black !default;
+// scss-docs-end tag-variables
+
+// scss-docs-start tag-sm-variables
+$tag-padding-x-sm:                  $spacer * .4 !default;
+$tag-padding-y-sm:                  $spacer * .25 !default;
+$tag-icon-size-sm:                  $spacer !default;
+$tag-icon-margin-start-sm:          -$spacer * .1 !default;
+$tag-close-margin-end-sm:           -$spacer * .25 !default;
+$tag-close-margin-start-sm:         0 !default;
+$tag-font-size-sm:                  $font-size-sm !default;
+// scss-docs-end tag-sm-variables
+
+// scss-docs-start tag-dark-variables
+$tag-active-color-dark:             $black !default;
+$tag-disabled-color-dark:           $gray-700 !default;
+$tag-border-color-dark:             $gray-700 !default;
+$tag-active-decoration-color-dark:  $white !default;
+// scss-docs-end tag-dark-variables

scss/boosted.scss

@@ -30,6 +30,7 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
+@import "tag";
 @import "alert";
 @import "progress";
 @import "list-group";

scss/forms/_form-check.scss

@@ -286,6 +286,12 @@
       border-color: $gray-500;
       outline-color: currentcolor;
     }
+
+    + .tag {
+      z-index: 3;
+      outline: .1875rem solid var(--#{$prefix}tag-outline-color);
+      outline-offset: .125rem;
+    }
   }
 
   &:checked {
@@ -306,6 +312,12 @@
         background-color: transparent;
       }
     }
+
+    + .tag {
+      color: var(--bs-tag-active-color);
+      background-color: var(--bs-tag-active-decoration-color);
+      border-color: var(--bs-tag-active-decoration-color);
+    }
   }
 
   &:active + .btn,
@@ -345,6 +357,17 @@
       background-color: transparent;
       border-color: currentcolor;
     }
+
+    + .tag {
+      color: var(--#{$prefix}tag-disabled-color);
+      pointer-events: none;
+      border-color: var(--#{$prefix}tag-disabled-color);
+    }
+
+    &:checked + .tag {
+      color: var(--#{$prefix}tag-active-color);
+      background-color: var(--#{$prefix}tag-disabled-color);
+    }
     // End mod
   }
 

site/assets/scss/_component-examples.scss

@@ -358,3 +358,9 @@
   border: solid $gray-400; // Boosted mod: change border color
   border-width: map-get($border-widths, 1) 0;
 }
+
+.btn-check:checked + .tag {
+  color: var(--bs-tag-active-color);
+  background-color: var(--bs-tag-active-decoration-color);
+  border-color: var(--bs-tag-active-decoration-color);
+}

site/content/docs/5.2/about/overview.md

@@ -29,6 +29,7 @@ Boosted ships with custom accessible components to suit specific needs:
 - [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}})
 - [Stepped process]({{< docsref "/components/stepped-process" >}})
 - [Sticker]({{< docsref "/components/sticker" >}})
+- [Tags]({{< docsref "/components/tags" >}})
 - [Title bars]({{< docsref "/components/title-bars" >}})
 
 ## Bootstrap Team
@@ -47,7 +48,6 @@ With Bootstrap 4, they once again rewrote the project to account for two key arc
 
 Their latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. They improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of their tooling.
 
-
 ## Get involved in Bootstrap
 
 Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new/choose) or submitting a pull request. Read their [contributing guidelines](https://github.com/twbs/bootstrap/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how they develop.