Tagify dropdown styling
This commit is contained in:
parent
179db0f9b7
commit
ec0ba2f9c7
@ -77,4 +77,72 @@
|
||||
|
||||
.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
|
||||
display: none
|
||||
}
|
||||
|
||||
.tagify__dropdown {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
transform: translateY(1px);
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.tagify__dropdown[placement=top] {
|
||||
margin-top: 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0
|
||||
}
|
||||
|
||||
.tagify__dropdown[position=text] {
|
||||
box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), .1);
|
||||
font-size: .9em
|
||||
}
|
||||
|
||||
.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.tagify__dropdown__wrapper {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .2);
|
||||
transition: .25s cubic-bezier(0, 1, .5, 1)
|
||||
}
|
||||
|
||||
.tagify__dropdown__wrapper:hover {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.tagify__dropdown--initial .tagify__dropdown__wrapper {
|
||||
max-height: 20px;
|
||||
transform: translateY(-1em)
|
||||
}
|
||||
|
||||
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
|
||||
transform: translateY(2em)
|
||||
}
|
||||
|
||||
.tagify__dropdown__item {
|
||||
box-sizing: inherit;
|
||||
padding: .3em .5em;
|
||||
margin: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
font-family: $-primary-sans-serif-font;
|
||||
}
|
||||
|
||||
.tagify__dropdown__item--active {
|
||||
color: $-almost-white;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.tagify__dropdown__item:active {
|
||||
filter: brightness(105%)
|
||||
}
|
@ -1500,3 +1500,58 @@ body {
|
||||
|
||||
.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
|
||||
display: none; }
|
||||
|
||||
.tagify__dropdown {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
transform: translateY(1px);
|
||||
overflow: hidden; }
|
||||
|
||||
.tagify__dropdown[placement=top] {
|
||||
margin-top: 0;
|
||||
transform: translateY(-100%); }
|
||||
|
||||
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0; }
|
||||
|
||||
.tagify__dropdown[position=text] {
|
||||
box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
|
||||
font-size: .9em; }
|
||||
|
||||
.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
|
||||
border-width: 1px; }
|
||||
|
||||
.tagify__dropdown__wrapper {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
|
||||
transition: 0.25s cubic-bezier(0, 1, 0.5, 1); }
|
||||
|
||||
.tagify__dropdown__wrapper:hover {
|
||||
overflow: auto; }
|
||||
|
||||
.tagify__dropdown--initial .tagify__dropdown__wrapper {
|
||||
max-height: 20px;
|
||||
transform: translateY(-1em); }
|
||||
|
||||
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
|
||||
transform: translateY(2em); }
|
||||
|
||||
.tagify__dropdown__item {
|
||||
box-sizing: inherit;
|
||||
padding: .3em .5em;
|
||||
margin: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
font-family: Montserrat, Helvetica, sans-serif; }
|
||||
|
||||
.tagify__dropdown__item--active {
|
||||
color: #f9f9f9;
|
||||
background-color: gray; }
|
||||
|
||||
.tagify__dropdown__item:active {
|
||||
filter: brightness(105%); }
|
||||
|
Loading…
Reference in New Issue
Block a user