45 lines
920 B
CSS
45 lines
920 B
CSS
.colorpicker {
|
|
@apply inline-flex items-center rounded-md h-11;
|
|
@apply border-md border-secondary shadow-input;
|
|
|
|
input[type="color"] {
|
|
@apply rounded-l-md-inset rounded-r-none h-full shrink-0 min-w-11;
|
|
}
|
|
|
|
input[type="text"] {
|
|
@apply rounded-none grow min-w-12;
|
|
}
|
|
|
|
button {
|
|
@apply w-11 min-w-11 h-full shrink-0 flex items-center justify-center rounded-l-none rounded-r-md;
|
|
|
|
&:hover {
|
|
@apply bg-teal-100 shadow-input-hover;
|
|
}
|
|
|
|
&:active {
|
|
@apply pt-2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.colorpicker__swatch {
|
|
width: 2.5rem;
|
|
height: 2.25rem;
|
|
padding: 0;
|
|
border: 1px solid var(--border, #d1d5db);
|
|
border-radius: .5rem;
|
|
background: transparent;
|
|
}
|
|
|
|
.colorpicker__hex {
|
|
@apply w-32 font-mono;
|
|
}
|
|
|
|
.colorpicker__random:disabled,
|
|
.colorpicker__swatch:disabled,
|
|
.colorpicker__hex:disabled {
|
|
opacity: .6;
|
|
cursor: not-allowed;
|
|
}
|