Spinners: Add Large version

Fixes: #63
trimble-oss · Oct 8, 2024 · 9de8f48 · 9de8f48
1 parent b7f53ce
commit 9de8f48
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 19 deletions.
diff --git a/dist/css/modus-bootstrap.css b/dist/css/modus-bootstrap.css
diff --git a/dist/css/modus-bootstrap.css.map b/dist/css/modus-bootstrap.css.map
diff --git a/dist/css/modus-bootstrap.min.css b/dist/css/modus-bootstrap.min.css
diff --git a/dist/css/modus-bootstrap.min.css.map b/dist/css/modus-bootstrap.min.css.map
diff --git a/scss/_modus-variables.scss b/scss/_modus-variables.scss
@@ -292,3 +292,9 @@ $form-check-input-border-radius: .25em; // Modus customized - 4px
 
 $breadcrumb-divider-color: #6c757d !default; // Modus customized light mode only
 $breadcrumb-divider: str-replace(url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2019%2019%22%20width%3D%2712%27%20height%3D%2716%27%3E%3Cpath%20fill%3D%22%23%7B%24breadcrumb-divider-color%7D%22%20d%3D%27M7.2%2C18.4%2C13.52%2C12%2C7.2%2C5.6%2C8.8%2C4l8%2C8-8%2C8Z%27%2F%3E%3C%2Fsvg%3E%0A"), "#", "%23") !default;
+
+// Spinners
+
+$spinner-width-lg: 4rem !default;
+$spinner-height-lg: $spinner-width-lg !default;
+$spinner-border-width-lg: 5px !default;
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
@@ -43,6 +43,14 @@
  // scss-docs-end spinner-border-sm-css-vars
 }
 
+.spinner-border-lg {
+ // scss-docs-start spinner-border-lg-css-vars
+ --#{$prefix}spinner-width: #{$spinner-width-lg};
+ --#{$prefix}spinner-height: #{$spinner-height-lg};
+ --#{$prefix}spinner-border-width: #{$spinner-border-width-lg};
+ // scss-docs-end spinner-border-lg-css-vars
+}
+
 @if $enable-reduced-motion {
  @media (prefers-reduced-motion: reduce) {
  .spinner-border {

diff --git a/site/content/docs/v2/components/spinners.md b/site/content/docs/v2/components/spinners.md
@@ -36,6 +36,24 @@ Use the border spinners for a lightweight loading indicator.
 </div>
 {{< /example >}}
 
+## Large Variant
+
+Use the `.spinner-border-lg` for a larger spinner.
+
+{{< example >}}
+<div class="spinner-border spinner-border-lg" role="status">
+ <span class="visually-hidden">Loading...</span>
+</div>
+
+<div class="spinner-border spinner-border-lg text-secondary" role="status">
+ <span class="visually-hidden">Loading...</span>
+</div>
+
+<div class="spinner-border spinner-border-lg text-tertiary" role="status">
+ <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
+
 ## Alignment
 
 Spinners in Modus Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned.

diff --git a/site/content/docs/v2/content/reboot.md b/site/content/docs/v2/content/reboot.md
@@ -56,12 +56,12 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
 {{< bs-table "table" >}}
 | Heading | Example |
 | --- | --- |
-| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
-| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
-| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
-| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
-| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
-| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+| `<h1></h1>` | <span class="h1">h1. Modus heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Modus heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Modus heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Modus heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Modus heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Modus heading</span> |
 {{< /bs-table >}}
 
 ## Paragraphs

diff --git a/site/content/docs/v2/content/typography.md b/site/content/docs/v2/content/typography.md
@@ -10,8 +10,6 @@ toc: true
 
 Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
 
-- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
-- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
 - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
 - Set the global link color via `$link-color`.
 - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
@@ -45,12 +43,12 @@ All HTML headings, `<h1>` through `<h6>`, are available.
 `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
 
 {{< example >}}
-<p class="h1">h1. Bootstrap heading</p>
-<p class="h2">h2. Bootstrap heading</p>
-<p class="h3">h3. Bootstrap heading</p>
-<p class="h4">h4. Bootstrap heading</p>
-<p class="h5">h5. Bootstrap heading</p>
-<p class="h6">h6. Bootstrap heading</p>
+<p class="h1">h1. Modus heading</p>
+<p class="h2">h2. Modus heading</p>
+<p class="h3">h3. Modus heading</p>
+<p class="h4">h4. Modus heading</p>
+<p class="h5">h5. Modus heading</p>
+<p class="h6">h6. Modus heading</p>
 {{< /example >}}
 
 ### Customizing headings

diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
@@ -9,8 +9,8 @@
  <div class="col-md-8 order-md-1 col-lg-7 text-center text-md-start text-white">
  <h1 class="display-2 fw-bold mb-3">Build fast, responsive sites with Modus Bootstrap</h1>
  <p class="mb-4 lead">
- Quickly design and customize responsive mobile-first sites with Modus Bootstrap, featuring
- Sass variables and mixins, responsive grid system, extensive prebuilt
+ Quickly design and customize responsive mobile-first sites with Modus, featuring
+ CSS custom properties, responsive grid system, extensive prebuilt
  components, and powerful JavaScript plugins.
  </p>