make ajax select appearance consistant with other inputs

This commit is contained in:
imperosol
2024-12-29 18:09:43 +01:00
parent 2f9e5bfee1
commit 0d3fd954a3
2 changed files with 82 additions and 35 deletions

View File

@@ -48,7 +48,8 @@
input,
textarea[type="text"],
[type="number"] {
[type="number"],
.ts-control {
border: none;
text-decoration: none;
background-color: $background-button-color;
@@ -69,7 +70,7 @@
font-family: sans-serif;
}
select {
select, .ts-control {
border: none;
text-decoration: none;
font-size: 1.2em;
@@ -176,7 +177,7 @@ form {
}
// wrap texts
label, legend, ul.errorlist>li, .helptext {
label, legend, ul.errorlist > li, .helptext {
text-wrap: wrap;
}
@@ -225,23 +226,25 @@ form {
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="week"],
input[type="time"],
input[type="month"],
input[type="search"],
textarea,
select {
min-width: 300px;
:not(.ts-control) > {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="week"],
input[type="time"],
input[type="search"],
textarea,
input[type="month"],
select {
min-width: 300px;
&.grow {
width: 95%;
&.grow {
width: 95%;
}
}
}
@@ -260,7 +263,8 @@ form {
input[type="month"],
input[type="search"],
textarea,
select {
select,
.ts-control {
background: var(--nf-input-background-color);
font-size: var(--nf-input-font-size);
border-color: var(--nf-input-border-color);
@@ -720,7 +724,11 @@ form {
// ---------------- SELECT
select {
select,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
background-color: var(--nf-input-background-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
background-repeat: no-repeat;