63 lines
1.7 KiB
CSS
63 lines
1.7 KiB
CSS
@layer components {
|
|
.icon {
|
|
@apply w-5 h-5 md:w-6 md:h-6 text-gray-700;
|
|
}
|
|
|
|
.section-divide-y {
|
|
@apply h-2 bg-gray-100 lg:hidden;
|
|
}
|
|
|
|
.section-divide-x {
|
|
@apply w-0.5 h-4 bg-gray-200;
|
|
}
|
|
|
|
.flex-center {
|
|
@apply flex items-center justify-center;
|
|
}
|
|
|
|
/* text input */
|
|
.text-field__input {
|
|
@apply block w-full px-3 py-1.5 text-base transition-colors border border-gray-200 rounded-md outline-none bg-zinc-50/30 lg:text-lg focus:border-blue-600;
|
|
}
|
|
|
|
.text-field__label {
|
|
@apply text-xs text-gray-700 lg:text-sm md:min-w-max;
|
|
}
|
|
/* text input */
|
|
|
|
/* button */
|
|
.button {
|
|
@apply text-white py-3 px-8 flex-center outline-none rounded-md active:scale-[.98] bg-red-500;
|
|
}
|
|
/* button */
|
|
|
|
/* dropdown */
|
|
.dropdown {
|
|
@apply relative inline-block text-left;
|
|
}
|
|
|
|
.dropdown__button {
|
|
@apply flex-center p-1.5 transition-colors rounded-md hover:bg-red-100;
|
|
}
|
|
|
|
.dropdown__items {
|
|
@apply absolute right-2 mt-2 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-3xl ring-1 ring-black ring-opacity-5 focus:outline-none z-40;
|
|
}
|
|
/* dropdown */
|
|
|
|
.order-badge {
|
|
@apply bottom-0 left-1 bg-slate-200 p-1 rounded-md w-5 h-5 text-center text-xs text-black/80 lg:hidden;
|
|
}
|
|
|
|
.input {
|
|
@apply block w-full px-3 py-1.5 text-base transition-colors border border-gray-200 rounded-md outline-none bg-zinc-50/30 lg:text-lg focus:border-blue-600;
|
|
}
|
|
|
|
.btn {
|
|
@apply text-white bg-red-500 py-3 px-8 flex items-center justify-center rounded-md outline-none;
|
|
}
|
|
.tab {
|
|
@apply w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-600 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 transition-colors;
|
|
}
|
|
}
|