lostplaces-frontend/components/_tagify.scss

150 lines
2.8 KiB
SCSS
Raw Permalink Normal View History

2020-09-01 18:19:51 +02:00
.tagify {
@extend .LP-Input__Field;
&+input,
&+textarea {
display: none;
}
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.tagify--focus {
@extend .LP-Input__Field--active
}
.tagify__tag {
@extend .LP-Tag;
@extend .LP-TagList__Item;
background-color: #bdbdbd;
&:hover {
background-color: #e9e9e9;
}
display: inline-flex;
cursor: default;
transition: .13s ease-out;
height: max-content;
align-items: center;
gap: 3px;
}
.tagify__input {
flex-grow: 1;
display: inline-block;
min-width: 110px;
margin: 5px;
line-height: inherit;
position: relative;
white-space: pre-wrap;
margin-left: 15px;
2020-09-01 22:27:32 +02:00
height: 1em;
2020-09-01 18:19:51 +02:00
}
.tagify__tag__removeBtn {
order: 5;
cursor: pointer;
2020-09-01 22:27:32 +02:00
font: 1.5em/1 Arial;
2020-09-01 18:19:51 +02:00
transition: .2s ease-out;
color: $-wine-red;
}
.tagify__tag__removeBtn::after {
content: "\00D7"
}
.tagify__tag__removeBtn:hover {
color: $-grey;
}
.tagify__tag__removeBtn:hover+div>span {
opacity: .5
}
.tagify__tag__removeBtn:hover+div::before {
box-shadow: 0 0 0 1.1em rgba(211, 148, 148, .3) inset !important;
box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
transition: .2s
}
.tagify__tag--loading .tagify__tag__removeBtn {
display: none
}
.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
display: none
2020-09-01 18:31:29 +02:00
}
.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%)
2021-10-02 07:19:34 +02:00
}