fix(stamp): radius styles of color input (#1862)

Closes 1830
This commit is contained in:
designtesbrot 2024-09-09 19:58:04 +02:00 committed by GitHub
parent 12ff0ecac2
commit 0ad8c635ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 2 deletions

View file

@ -792,6 +792,23 @@ textarea.form-control {
box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
}
.form-control-color {
padding: 0;
height: 2.4rem;
width: 2.4rem;
}
.form-control input[type="color"] {
opacity: 0;
height: 2.4rem;
width: 2.4rem;
box-sizing: border-box;
}
.form-control input[type="color"]:hover{
cursor: pointer;
}
/* Navbar Components */
.navbar-brand {
color: var(--md-sys-color-on-surface) !important;

View file

@ -119,7 +119,22 @@
<div class="mb-3">
<label for="customColor" class="form-label" th:text="#{AddStampRequest.customColor}">Custom Color</label>
<input type="color" class="form-control form-control-color" id="customColor" name="customColor" value="#d3d3d3">
<div class="form-control form-control-color" style="background-color: #d3d3d3;">
<input type="color" id="customColor" name="customColor" value="#d3d3d3">
</div>
<script>
let colorInput = document.getElementById("customColor");
if (colorInput) {
let colorInputContainer = colorInput.parentElement;
if (colorInputContainer) {
colorInput.onchange = function() {
colorInputContainer.style.backgroundColor = colorInput.value;
}
colorInputContainer.style.backgroundColor = colorInput.value;
}
}
</script>
</div>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{AddStampRequest.submit}"></button>