Skip to content

Instantly share code, notes, and snippets.

@drnic
Last active Aug 15, 2022
Embed
What would you like to do?
Rewrite of https://github.com/brianvoe/slim-select stylesheet using tailwindcss. Some color/size changes for my specific project; but you can find them easily now.
.ss-main {
@apply relative inline-block select-none w-full text-slate-500;
}
.ss-main .ss-single-selected {
@apply flex cursor-pointer w-full min-h-[38px] p-[6px];
@apply bg-white border border-gray-200 shadow-sm rounded outline-0;
@apply transition-colors duration-200;
}
.ss-main .ss-single-selected.ss-disabled {
@apply bg-slate-300 cursor-not-allowed;
}
.ss-main .ss-single-selected.ss-open-above {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ss-main .ss-single-selected.ss-open-below {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ss-main .ss-single-selected .placeholder {
flex: 1 1 100%;
width: calc(100% - 30px);
@apply text-left leading-4 select-none;
}
.ss-main .ss-single-selected .placeholder,
.ss-main .ss-single-selected .placeholder * {
@apply flex items-center overflow-hidden whitespace-nowrap overflow-ellipsis;
}
.ss-main .ss-single-selected .placeholder * {
@apply w-auto;
}
.ss-main .ss-single-selected .placeholder .ss-disabled {
@apply text-slate-300;
}
.ss-main .ss-single-selected .ss-deselect {
@apply flex items-center justify-end flex-initial my-0 mx-[6px] font-bold;
}
.ss-main .ss-single-selected .ss-deselect.ss-hide {
@apply hidden;
}
.ss-main .ss-single-selected .ss-arrow {
@apply flex items-center justify-end flex-initial my-0 mx-[6px];
}
.ss-main .ss-single-selected .ss-arrow span {
@apply inline-block p-[3px] border border-slate-600;
border-width: 0 2px 2px 0;
transition: transform 0.2s, margin 0.2s;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-up {
transform: rotate(-135deg);
margin: 3px 0 0;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-down {
@apply rotate-45 mt-[-3px];
}
.ss-main .ss-multi-selected {
@apply flex flex-row min-h-[38px] w-full p-0 pl-1;
@apply bg-white border border-gray-200 shadow-sm rounded outline-0;
@apply transition-colors duration-200;
}
.ss-main .ss-multi-selected.ss-disabled {
@apply bg-slate-400 cursor-not-allowed;
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled {
@apply text-slate-600;
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {
@apply cursor-not-allowed;
}
.ss-main .ss-multi-selected.ss-open-above {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ss-main .ss-multi-selected.ss-open-below {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ss-main .ss-multi-selected .ss-values {
@apply flex flex-wrap justify-start;
flex: 1 1 100%;
width: calc(100% - 30px);
}
.ss-main .ss-multi-selected .ss-values .ss-disabled {
@apply flex items-center w-full overflow-hidden whitespace-nowrap overflow-ellipsis;
@apply text-slate-300 my-[2px] mx-0 py-1 px-[5px] leading-4;
}
@keyframes scaleIn {
0% {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes scaleOut {
0% {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
.ss-main .ss-multi-selected .ss-values .ss-value {
@apply flex items-center select-none py-[3px] px-[5px] my-[3px] mr-[5px];
@apply text-sm text-slate-800 bg-slate-50 border border-slate-300 rounded;
animation-name: scaleIn;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.ss-main .ss-multi-selected .ss-values .ss-value.ss-out {
@apply duration-200 ease-out;
animation-name: scaleOut;
}
.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
@apply text-slate-500 m-0 ml-1 cursor-pointer;
}
.ss-main .ss-multi-selected .ss-add {
@apply flex flex-col justify-center my-0 mr-3 ml-1;
flex: 0 1 3px;
}
.ss-main .ss-multi-selected .ss-add .ss-plus {
@apply relative h-[10px] w-[2px] flex items-center justify-center;
@apply bg-slate-600 transition-transform duration-200;
}
.ss-main .ss-multi-selected .ss-add .ss-plus:after {
content: '';
@apply absolute bg-slate-600 h-[2px] w-[10px] left-[-4px] top-[4px];
}
.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross {
@apply rotate-45;
}
.ss-main .ss-content {
margin: -1px 0 0;
transform-origin: center top;
@apply absolute w-full border border-slate-400 z-50;
@apply bg-white transition duration-200;
@apply opacity-0 scale-y-0;
}
.ss-main .ss-content.ss-open {
@apply block opacity-100 scale-100;
}
.ss-main .ss-content .ss-search {
@apply flex flex-row px-2 pt-2 pb-1;
}
.ss-main .ss-content .ss-search.ss-hide,
.ss-main .ss-content .ss-search.ss-hide input {
@apply m-0 p-0 opacity-0 h-0;
}
.ss-main .ss-content .ss-search input {
@apply inline-flex flex-auto w-full min-w-0 h-8;
@apply py-1 px-2 m-0 bg-white border border-slate-400 rounded-sm;
@apply text-slate-800 text-sm text-left outline-0;
}
.ss-main .ss-content .ss-search input::placeholder {
@apply text-primary-500 align-middle;
}
.ss-main .ss-content .ss-search input:focus {
@apply ring-primary-300;
}
.ss-main .ss-content .ss-search .ss-addable {
flex: 0 0 30px;
@apply inline-flex items-center justify-center cursor-pointer;
@apply m-0 ml-2 text-xl font-bold h-8 rounded border border-slate-300;
}
.ss-main .ss-content .ss-addable {
@apply pt-0;
}
.ss-main .ss-content .ss-list {
@apply text-sm text-left overflow-x-hidden overflow-y-auto max-h-[200px];
}
.ss-main .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
@apply py-1 px-4 font-bold;
}
.ss-main .ss-content .ss-list .ss-optgroup .ss-option {
padding: 6px 6px 6px 25px;
}
.ss-main .ss-content .ss-list .ss-optgroup-label-selectable {
@apply cursor-pointer;
}
.ss-main .ss-content .ss-list .ss-optgroup-label-selectable:hover {
@apply text-slate-800 bg-slate-100;
}
.ss-main .ss-content .ss-list .ss-option {
@apply py-1 px-4 cursor-pointer select-none;
}
.ss-main .ss-content .ss-list .ss-option * {
@apply inline-block;
}
.ss-main .ss-content .ss-list .ss-option.ss-highlighted,
.ss-main .ss-content .ss-list .ss-option:hover {
@apply text-slate-800 bg-slate-100;
}
.ss-main .ss-content .ss-list .ss-option.ss-disabled {
@apply text-slate-300 bg-white cursor-not-allowed;
}
.ss-main .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
@apply text-slate-700 bg-slate-200;
}
.ss-main .ss-content .ss-list .ss-option.ss-hide {
@apply hidden;
}
.ss-main .ss-content .ss-list .ss-option .ss-search-highlight {
@apply bg-yellow-200;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment