tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style multi selector

Browse source
This commit is contained in:
Tykayn 2025-09-02 13:58:35 +02:00 • committed by tykayn
parent d30ddc8b51
commit b0b153be93
3 changed files with 56 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
View file

@ -4,6 +4,11 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
sae-multi-selector {
margin-left: 20px;
}
} }
.dropdown { .dropdown {
@ -40,6 +45,7 @@
.chips-listing { .chips-listing {
display: flex; display: flex;
border-radius: 8px;
} }
.filter-group { .filter-group {

13
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
View file

@ -1,13 +1,16 @@
<!-- sélecteurs--> <!-- sélecteurs-->
<div class="input-box"> <div class="input-box">
<i class="ri-search-line"></i> <i class="ri-search-line search-placeholder"></i>
<div class="label">{{ label }}</div> <div class="label">
<span class="d-none">
{{ label }}
</span>
</div>
<input class="is-hidden" placeholder="{{label}}" type="text"> <input class="is-hidden" placeholder="{{label}}" type="text">
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-button"> <div class="dropdown-button selector-button">
<!-- bouton--> <!-- bouton-->
<i class="ri-arrow-down-box-fill"></i> <i class="ri-arrow-down-s-line"></i>
</div> </div>
<div class="dropdown-list"> <div class="dropdown-list">
<!-- selected:--> <!-- selected:-->

49
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
View file

@ -3,12 +3,42 @@
.input-box { .input-box {
margin-left: -1rem; margin-left: -1rem;
i { .d-none {
position: relative; display: none;
left: 2rem;
} }
i {
top: 10px;
left: 1rem;
&::before {
left: 10px;
top: 10px;
}
.disabled & {
color: #525668;
fill: #525668;
}
}
.search-placeholder,
.selector-button {
position: relative;
}
.search-placeholder {
top: 30px;
left: 16px;
}
.selector-button {
top: -30px;
right: -177px;
}
input { input {
border-radius: 8px; border-radius: 8px;
@ -16,14 +46,19 @@
background: var(--color-background-card-on-base, #FFF); background: var(--color-background-card-on-base, #FFF);
padding-left: 2rem; padding: 10px 40px;
padding-top: 6px;
padding-bottom: 6px; width: 210px;
height: 42px;
overflow: hidden; overflow: hidden;
color: var(--color-text-secondary, #525668); color: var(--color-text-secondary, #525668);
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: var(--Font-Base, 14px); font-size: var(--Font-Base, 14px);
.disabled & {
border-color: #525668;
}
} }
} }