35 lines
1.0 KiB
CSS
35 lines
1.0 KiB
CSS
.colorpicker {
|
|
@apply inline-flex items-center rounded-md h-11 shadow-input;
|
|
|
|
input[type="color"] {
|
|
@apply rounded-l-md-inset rounded-r-none h-full shrink-0 min-w-11;
|
|
@apply border-md border-secondary border-r-0 outline-transparent;
|
|
transition: outline 125ms ease-in-out;
|
|
|
|
&:focus {
|
|
@apply border-primary outline-2 outline-offset-2 outline-cyan-600 z-2;
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
@apply rounded-none grow min-w-12 font-mono;
|
|
}
|
|
|
|
button {
|
|
@apply w-11 min-w-11 h-11 min-h-11 shrink-0 flex items-center justify-center relative right-0;
|
|
@apply border-md border-secondary rounded-l-none rounded-r-md -ml-[1.5px];
|
|
@apply focus:border-primary;
|
|
transition: background-color 125ms ease-in-out,
|
|
box-shadow 125ms ease-in-out,
|
|
border-color 125ms ease-in-out;
|
|
|
|
&:hover {
|
|
@apply bg-teal-100 shadow-input-hover;
|
|
}
|
|
|
|
&:active {
|
|
@apply pt-2px;
|
|
}
|
|
}
|
|
}
|