klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-01-02 13:11:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

make ajax select appearance consistant with other inputs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
core/static/core/components/ajax-select.scss
View File

@ -1,11 +1,27 @@
.ts-wrapper.multi .ts-control {
min-width: calc(100% - 0.2rem);
}
/* This also requires ajax-select-index.css */
.ts-dropdown {
width: calc(100% - 0.2rem);
left: 0.1rem;
top: calc(100% - 0.2rem - var(--nf-input-border-bottom-width));
border: var(--nf-input-border-color) var(--nf-input-border-width) solid;
border-top: none;
border-bottom-width: var(--nf-input-border-bottom-width);
.option.active {
background-color: #e5eafa;
color: inherit;
}
.select-item {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
overflow: hidden;
img {
height: 40px;
@ -16,19 +32,44 @@
}
}
.ts-wrapper {
margin: 5px;
.ts-wrapper.single {
> .ts-control {
box-shadow: none;
max-width: 300px;
background-color: var(--nf-input-background-color);
&::after {
content: none;
}
}
> .ts-dropdown {
max-width: 300px;
}
}
.ts-wrapper.single {
width: 263px; // same length as regular text inputs
.ts-wrapper input[type="text"] {
border: none;
border-radius: 0;
}
.ts-wrapper.multi, .ts-wrapper.single {
.ts-control:has(input:focus) {
outline: none;
border-color: var(--nf-input-focus-border-color);
box-shadow: none;
}
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
border-left: 1px solid #aaa;
}
.ts-wrapper.multi .ts-control {
.ts-wrapper.multi.has-items .ts-control {
padding: calc(var(--nf-input-size) * 0.65);
display: flex;
gap: calc(var(--nf-input-size) / 3);
[data-value],
[data-value].active {
background-image: none;
@ -37,19 +78,17 @@
border: 1px solid #aaa;
border-radius: 4px;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
text-shadow: none;
box-shadow: none;
.remove {
vertical-align: baseline;
}
}
}
.ts-dropdown {
.option.active {
background-color: #e5eafa;
color: inherit;
}
}
.ts-wrapper.focus .ts-control {
box-shadow: none;
}

50
core/static/core/forms.scss
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;