Fix Color Class

This commit is contained in:
johnnyq
2026-08-31 12:46:00 -04:00
parent dd1936c4d8
commit accc1948be
9 changed files with 24 additions and 8 deletions

View File

@@ -48,7 +48,7 @@ $category_types_array = ['Expense', 'Income', 'Referral', 'Ticket'];
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
<input type="color" class="form-control form-control-color" name="color" required>
</div>
</div>

View File

@@ -37,7 +37,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $category_color ?>" required>
<input type="color" class="form-control form-control-color" name="color" value="<?= $category_color ?>" required>
</div>
</div>

View File

@@ -67,7 +67,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
<input type="color" class="form-control form-control-color" name="color" required>
</div>
</div>

View File

@@ -50,7 +50,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $tag_color ?>" required>
<input type="color" class="form-control form-control-color" name="color" value="<?= $tag_color ?>" required>
</div>
</div>

View File

@@ -23,7 +23,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
<input type="color" class="form-control form-control-color" name="color" required>
</div>
</div>

View File

@@ -41,7 +41,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $ticket_status_color ?>" required>
<input type="color" class="form-control form-control-color" name="color" value="<?= $ticket_status_color ?>" required>
</div>
</div>

View File

@@ -27,7 +27,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" required>
<input type="color" class="form-control form-control-color" name="color" required>
</div>
</div>

View File

@@ -35,7 +35,7 @@ ob_start();
<label>Color <strong class="text-danger">*</strong></label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
<input type="color" class="form-control form-control-color w-auto flex-grow-0" name="color" value="<?= $calendar_color ?>" required>
<input type="color" class="form-control form-control-color" name="color" value="<?= $calendar_color ?>" required>
</div>
</div>

View File

@@ -1385,6 +1385,22 @@ select.select2[multiple]:not(.tomselected) {
--lte-primary-color-rgb: 0, 0, 0;
}
/* --- Colour inputs ---------------------------------------------------------
Bootstrap sizes `.form-control-color` at width:3rem, but every colour input
in ITFlow sits inside an .input-group, and `.input-group > .form-control`
(0,2,0) sets `width: 1%; flex: 1 1 auto` - which outranks .form-control-color
(0,1,0) and collapses the swatch to a sliver. Matching that specificity is
the only way to win it back; the selector is strictly narrower than the one
it ties with, so nothing but a colour input is affected.
4rem rather than Bootstrap's 3rem: the swatch is the entire point of the
control, and .text-sm keeps the height at the 35px of its neighbours, so
there is only width available to read the colour by. */
.input-group > .form-control-color {
flex: 0 0 auto;
width: 4rem;
}
/* --- intl-tel-input --------------------------------------------------------
The library wraps the input in a .iti container, which inside an
.input-group becomes the flex item instead of the input. Bootstrap sizes its