Added click area to select background colour

This commit is contained in:
2021-12-08 13:21:18 +00:00
parent b9c4edeb48
commit 2f6de34051
2 changed files with 33 additions and 29 deletions

View File

@ -74,43 +74,43 @@
<div class="row gx-5 gy-5 mt-1">
<div class="col">
<h5>Select Background Colour</h5>
<div class="p-3 bg-light text-dark">
<div class="p-3 bg-light text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked>
<label for="bg-light" class="form-check-label">Default Light</label>
</div>
</div>
<div class="p-3 q-bg-light-1 text-dark">
<div class="p-3 q-bg-light-1 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1">
<label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
</div>
</div>
<div class="p-3 q-bg-light-2 text-dark">
<div class="p-3 q-bg-light-2 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2">
<label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
</div>
</div>
<div class="p-3 alert-primary text-dark">
<div class="p-3 alert-primary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary">
<label for="alert-primary" class="form-check-label">Blue</label>
</div>
</div>
<div class="p-3 alert-secondary text-dark">
<div class="p-3 alert-secondary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary">
<label for="alert-secondary" class="form-check-label">Grey 1</label>
</div>
</div>
<div class="p-3 alert-dark text-dark">
<div class="p-3 alert-dark text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark">
<label for="alert-dark" class="form-check-label">Grey 2</label>
</div>
</div>
<div class="p-3 bg-dark text-light">
<div class="p-3 bg-dark text-light bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark">
<label for="bg-dark" class="form-check-label">Dark</label>