Skip to content

Commit

Permalink
Dark mode: Quantity selector (#2287)
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton @julien-deramond
louismaximepiton authored and julien-deramond committed Dec 1, 2023
1 parent 85ef84b commit ab17bed
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 3 deletions.
5 changes: 5 additions & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2324,6 +2324,11 @@ $quantity-selector-sm-width: 5.625rem !default;

$quantity-selector-btn-padding-x: add($btn-icon-padding-x, 2px) !default;
$quantity-selector-btn-padding-x-sm: add($btn-icon-padding-x-sm, 2px) !default;
$quantity-selector-btn-bg: var(--#{$prefix}body-bg) !default;
$quantity-selector-btn-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent) !default;

$quantity-selector-disabled-color: var(--#{$prefix}disabled-color) !default;
$quantity-selector-disabled-bg: var(--#{$prefix}body-bg) !default;

$quantity-selector-icon-width: .875rem !default;
$quantity-selector-icon-sm-width: .625rem !default;
Expand Down
11 changes: 8 additions & 3 deletions scss/forms/_quantity-selector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,18 @@
}

&:disabled {
color: $gray-500;
background-color: $white;
color: $quantity-selector-disabled-color;
background-color: $quantity-selector-disabled-bg;
}
}

button {
border: var(--#{$prefix}border-width) solid $gray-500;
background-color: $quantity-selector-btn-bg;
border: $quantity-selector-btn-border;

&:disabled {
background-color: $quantity-selector-btn-bg;
}

&:first-of-type {
@include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after");
Expand Down
117 changes: 117 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2621,6 +2621,123 @@ sitemap_exclude: true
<div class="form-text" data-bs-theme="light">Form text helper</div>
</div>

### Quantity selector

<h4 class="mt-3">No theme</h4>

<div class="d-flex gap-2 border border-tertiary p-3">
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelectorDisabled1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="down" disabled>
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled1" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="d-flex gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
<div class="input-group quantity-selector">
<input type="number" id="inputQuantitySelectorDisabled2" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="down" disabled>
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled2" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #282d55;">
<div class="input-group quantity-selector" data-bs-theme="dark">
<input type="number" id="inputQuantitySelector3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector3" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
<div class="input-group quantity-selector" data-bs-theme="dark">
<input type="number" id="inputQuantitySelectorDisabled3" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="down" disabled>
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled3" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="d-flex gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="input-group quantity-selector" data-bs-theme="light">
<input type="number" id="inputQuantitySelector4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="5" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="down">
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector4" data-bs-step="up">
<span class="visually-hidden">Step up</span>
</button>
</div>
<div class="input-group quantity-selector" data-bs-theme="light">
<input type="number" id="inputQuantitySelectorDisabled4" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="down" disabled>
<span class="visually-hidden">Step down</span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled4" data-bs-step="up" disabled>
<span class="visually-hidden">Step up</span>
</button>
</div>
</div>

### Range

<h4 class="mt-3">No theme</h4>
Expand Down

0 comments on commit ab17bed

Please sign in to comment.