mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-09-06 10:49:20 +02:00
Multiselect options wouldn't show up in production environment because of purgecss removing state classes.
184 lines
4.0 KiB
CSS
184 lines
4.0 KiB
CSS
/*===============================
|
|
= MultiSelect =
|
|
===============================*/
|
|
|
|
@layer components {
|
|
.multiselect {
|
|
@apply relative;
|
|
|
|
&:focus {
|
|
@apply outline-none ring;
|
|
}
|
|
&:last-child {
|
|
@apply mb-0;
|
|
}
|
|
&.is-disabled {
|
|
&.multiselect__inner,
|
|
&.multiselect__input {
|
|
@apply bg-gray-300 cursor-not-allowed select-none;
|
|
}
|
|
&.multiselect__item {
|
|
@apply cursor-not-allowed;
|
|
}
|
|
}
|
|
|
|
& [hidden] {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
.multiselect[data-type*="select-multiple"],
|
|
.multiselect[data-type*="text"] {
|
|
& .multiselect__inner {
|
|
@apply cursor-text;
|
|
}
|
|
& .multiselect__button {
|
|
@apply relative inline-block w-2 pl-4 mt-0 mb-0 ml-1 opacity-75;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
|
background-size: 8px;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multiselect__inner {
|
|
@apply inline-block w-full px-2 pt-2 pb-1 overflow-hidden align-top bg-white border rounded;
|
|
|
|
&.is-focused,
|
|
&.is-open {
|
|
@apply ring;
|
|
}
|
|
&.is-open {
|
|
@apply rounded-b-none;
|
|
}
|
|
&.is-flipped.is-open {
|
|
@apply rounded-t-none;
|
|
}
|
|
}
|
|
|
|
.multiselect__list {
|
|
@apply p-0 m-0 list-none;
|
|
}
|
|
|
|
.multiselect__list--multiple {
|
|
@apply inline;
|
|
|
|
& .multiselect__item {
|
|
@apply inline-flex px-2 py-1 mb-1 mr-2 text-sm text-white break-all rounded bg-pine-600;
|
|
|
|
&[data-deletable] {
|
|
@apply pr-1;
|
|
}
|
|
& [dir="rtl"] {
|
|
@apply ml-2 mr-0;
|
|
}
|
|
&.is-highlighted {
|
|
@apply bg-pine-600;
|
|
}
|
|
&.is-disabled {
|
|
@apply bg-gray-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multiselect__list--dropdown {
|
|
@apply absolute z-10 invisible w-full overflow-hidden break-all bg-white border border-t-0 rounded-b shadow-lg;
|
|
top: 100%;
|
|
will-change: visibility;
|
|
|
|
&.is-active {
|
|
@apply visible;
|
|
}
|
|
&.is-open {
|
|
@apply ring;
|
|
}
|
|
&.is-flipped {
|
|
@apply top-auto mt-0 rounded-t;
|
|
bottom: 100%;
|
|
}
|
|
& .multiselect__list {
|
|
@apply relative overflow-auto;
|
|
max-height: 300px;
|
|
-webkit-overflow-scrolling: touch;
|
|
will-change: scroll-position;
|
|
}
|
|
& .multiselect__item {
|
|
@apply relative p-3;
|
|
|
|
& [dir="rtl"] {
|
|
@apply text-right;
|
|
}
|
|
}
|
|
& .multiselect__item--selectable {
|
|
@screen sm {
|
|
padding-right: 100px;
|
|
&:after {
|
|
@apply absolute text-sm transform -translate-y-1/2 opacity-0;
|
|
content: attr(data-select-text);
|
|
right: 10px;
|
|
top: 50%;
|
|
}
|
|
& [dir="rtl"] {
|
|
@apply text-right;
|
|
padding-left: 100px;
|
|
padding-right: 10px;
|
|
&:after {
|
|
@apply right-auto;
|
|
left: 10px;
|
|
}
|
|
}
|
|
}
|
|
&.is-highlighted {
|
|
@apply bg-gray-100;
|
|
&:after {
|
|
@apply opacity-50;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.multiselect__item {
|
|
@apply cursor-default;
|
|
}
|
|
|
|
.multiselect__item--selectable {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.multiselect__item--disabled {
|
|
@apply opacity-50 cursor-not-allowed select-none;
|
|
}
|
|
|
|
.multiselect__heading {
|
|
@apply p-3 font-semibold text-gray-600 border-b;
|
|
}
|
|
|
|
.multiselect__button {
|
|
@apply bg-transparent bg-center bg-no-repeat border-0 appearance-none cursor-pointer;
|
|
text-indent: -9999px;
|
|
|
|
&:focus {
|
|
@apply outline-none;
|
|
}
|
|
}
|
|
|
|
.multiselect__input {
|
|
@apply inline-block max-w-full py-1 pl-1 mb-1 align-baseline bg-transparent border-0 rounded-none;
|
|
&:focus {
|
|
@apply outline-none;
|
|
}
|
|
& [dir="rtl"] {
|
|
@apply pl-0 pr-1;
|
|
}
|
|
}
|
|
|
|
.multiselect__placeholder {
|
|
@apply opacity-50;
|
|
}
|
|
}
|
|
|
|
/*===== End of Multiselect ======*/
|