Star Rating

.bundlewatch.config.json

@@ -30,7 +30,7 @@
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "26.1 kB"
+ "maxSize": "26.4 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",

scss/_forms.scss

@@ -6,4 +6,5 @@
 @import "forms/form-range";
 // Boosted mod: no floating-labels
 @import "forms/input-group";
+@import "forms/star-rating"; // Boosted mod
 @import "forms/validation";

scss/_mixins.scss

@@ -31,6 +31,7 @@
 @import "mixins/list-group";
 @import "mixins/forms";
 @import "mixins/table-variants";
+@import "mixins/star-rating"; // Boosted mod
 
 // Skins
 @import "mixins/border-radius";

scss/_variables.scss

@@ -1009,6 +1009,19 @@ $form-check-label-disabled-opacity: null !default;
 $form-check-btn-check-disabled-opacity: null !default;
 
 $form-check-inline-margin-end: 1rem !default;
+
+// Boosted mod: Star rating
+$form-star-size: 1.5625rem !default;
+$form-star-size-sm: 1.25rem !default;
+$form-star-margin-between: -.125rem !default;
+
+$form-star-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$form-star-focus-color: $black !default;
+$form-star-focus-outline: $border-width solid $form-star-focus-color !default;
+
+$form-star-focus-color-dark: $white !default;
+$form-star-focus-outline-dark: $border-width solid $form-star-focus-color-dark !default;
+// End mod
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables

scss/forms/_star-rating.scss

@@ -0,0 +1,99 @@
+//
+// Star rating
+//
+
+.star-rating {
+ &:focus-within {
+ outline: $form-star-focus-outline;
+ box-shadow: $form-star-focus-box-shadow;
+ }
+
+ &.disabled,
+ &:disabled {
+ pointer-events: none;
+ }
+
+ > label {
+ display: block;
+ float: left;
+ width: 1em;
+ height: 1em;
+ font-size: $form-star-size;
+ cursor: pointer;
+ @include form-star-rating($accessible-orange);
+
+ &:not(:first-of-type){
+ margin-left: $form-star-margin-between;
+ }
+ }
+
+ > input:checked ~ label {
+ @include form-star-rating($gray-500);
+ }
+
+ > input:checked + label {
+ @include form-star-rating($accessible-orange);
+ }
+
+ > input:focus ~ label {
+ @include form-star-rating($gray-500);
+ }
+
+ > input:focus + label {
+ @include form-star-rating($accessible-orange);
+ }
+
+ &:hover input + label {
+ @include form-star-rating($black);
+ }
+
+ > input:hover ~ label {
+ @include form-star-rating($gray-500);
+ }
+
+ > input:hover + label {
+ @include form-star-rating($black);
+ }
+}
+
+.star-rating-dark {
+ &:focus-within {
+ outline: $form-star-focus-outline-dark;
+ }
+
+ > label {
+ @include form-star-rating($brand-orange);
+ }
+
+ > input:checked ~ label {
+ @include form-star-rating($gray-700);
+ }
+
+ > input:checked + label {
+ @include form-star-rating($brand-orange);
+ }
+
+ > input:focus ~ label {
+ @include form-star-rating($gray-700);
+ }
+
+ > input:focus + label {
+ @include form-star-rating($brand-orange);
+ }
+
+ &:hover input + label {
+ @include form-star-rating($white);
+ }
+
+ > input:hover ~ label {
+ @include form-star-rating($gray-700);
+ }
+
+ > input:hover + label {
+ @include form-star-rating($white);
+ }
+}
+
+.star-rating-sm > label {
+ font-size: $form-star-size-sm;
+}

scss/mixins/_star-rating.scss

@@ -0,0 +1,5 @@
+// scss-docs-start form-star-rating-mixin
+@mixin form-star-rating($color) {
+ background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#{$color}' d='m12.5 2.9 2.379 7.35 7.721-.007-6.25 4.536 2.392 7.346-6.242-4.547-6.242 4.547 2.392-7.346-6.25-4.536 7.721.007Z'/></svg>"));
+}
+// scss-docs-end form-star-rating-mixin

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

@@ -24,6 +24,7 @@ Boosted ships with custom accessible components to suit specific needs:
 
 - [Back to top]({{< docsref "/components/back-to-top" >}})
 - [Orange Navbars]({{< docsref "/components/orange-navbar" >}})
+- [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}})
 - [Stepped process]({{< docsref "/components/stepped-process" >}})
 
 

site/content/docs/5.1/customize/overview.md

@@ -44,6 +44,7 @@ Several Boosted components include embedded SVGs in our CSS to style components
 - [Breadcrumb]({{< docsref "/components/breadcrumb" >}}) <!-- Boosted mod -->
 - [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
 - [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
+- [Form star rating]({{< docsref "/forms/checks-radios#star-rating" >}}) <!-- Boosted mod -->
 - [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
 - [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
 - [Select menus]({{< docsref "/forms/select" >}})

site/content/docs/5.1/forms/checks-radios.md

@@ -309,8 +309,121 @@ Drop borders using `.btn-no-outline`, too.
 
 <!-- End mod -->
 
+<!-- Boosted mod: star rating -->
+
+## Star rating
+
+Star rating system is built on top of radios. Simply add `.star-rating` to a `<fieldset>` element to use predefined glyphs and compose your star rating system with as much stars as needed.
+
+{{< example >}}
+<form>
+ <fieldset class="star-rating">
+ <legend class="visually-hidden">Results relevance</legend>
+
+ <input type="radio" id="terrible" name="rating" value="1" class="visually-hidden">
+ <label for="terrible" title="Terrible"></label>
+
+ <input type="radio" id="bad" name="rating" value="2" class="visually-hidden">
+ <label for="bad" title="Bad"></label>
+
+ <input type="radio" id="mixed" name="rating" value="3" class="visually-hidden">
+ <label for="mixed" title="Mixed"></label>
+
+ <input type="radio" id="good" name="rating" value="4" class="visually-hidden" checked>
+ <label for="good" title="Good"></label>
+
+ <input type="radio" id="excellent" name="rating" value="5" class="visually-hidden">
+ <label for="excellent" title="Excellent"></label>
+ </fieldset>
+</form>
+{{< /example >}}
+
+### Sizes
+
+Star ratings come with a smaller variant: `.star-rating-sm`.
+
+{{< example >}}
+<form>
+ <fieldset class="star-rating star-rating-sm">
+ <legend class="visually-hidden">Results relevance</legend>
+
+ <input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
+ <label for="terrible2" title="Terrible"></label>
+
+ <input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
+ <label for="bad2" title="Bad"></label>
+
+ <input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
+ <label for="mixed2" title="Mixed"></label>
+
+ <input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
+ <label for="good2" title="Good"></label>
+
+ <input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
+ <label for="excellent2" title="Excellent"></label>
+ </fieldset>
+</form>
+{{< /example >}}
+
+### Dark background
+
+Star ratings come with a dark background variant: `.star-rating-dark`.
+
+{{< example class="bg-dark" >}}
+<form>
+ <fieldset class="star-rating star-rating-dark">
+ <legend class="visually-hidden">Results relevance</legend>
+
+ <input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
+ <label for="terrible3" title="Terrible"></label>
+
+ <input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
+ <label for="bad3" title="Bad"></label>
+
+ <input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
+ <label for="mixed3" title="Mixed"></label>
+
+ <input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
+ <label for="good3" title="Good"></label>
+
+ <input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
+ <label for="excellent3" title="Excellent"></label>
+ </fieldset>
+</form>
+{{< /example >}}
+
+### Disabled
+
+Make star ratings look inactive inside or outside a form by adding the `disabled` boolean attribute to the `<fieldset>` element and the `checked` boolean attribute to any `<input>` element.
+
+{{< example >}}
+<fieldset class="star-rating" disabled>
+ <input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
+ <label for="terrible4" title="Terrible"></label>
+
+ <input type="radio" id="bad4" name="rating" value="2" class="visually-hidden">
+ <label for="bad4" title="Bad"></label>
+
+ <input type="radio" id="mixed4" name="rating" value="3" class="visually-hidden" checked>
+ <label for="mixed4" title="Mixed"></label>
+
+ <input type="radio" id="good4" name="rating" value="4" class="visually-hidden">
+ <label for="good4" title="Good"></label>
+
+ <input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
+ <label for="excellent4" title="Excellent"></label>
+</fieldset>
+<span class="visually-hidden">rated 3 stars out of 5</span>
+{{< /example >}}
+
+<!-- End mod -->
+
 ## Sass
 
 ### Variables
 
 {{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
+
+### Mixin
+
+{{< scss-docs name="form-star-rating-mixin" file="scss/mixins/_star-rating.scss" >}}