113 lines
4.4 KiB
CSS
113 lines
4.4 KiB
CSS
@layer components {
|
|
.card {
|
|
@apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
|
|
}
|
|
|
|
.link {
|
|
@apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
|
|
}
|
|
|
|
.product-grid {
|
|
@apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
|
|
}
|
|
|
|
.button-gray {
|
|
@apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
|
|
hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
|
|
focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
|
|
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
|
|
}
|
|
|
|
.page {
|
|
@apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
|
|
}
|
|
|
|
.navbar-bg {
|
|
@apply bg-white dark:bg-gray-800 antialiased;
|
|
}
|
|
|
|
.navbar-content {
|
|
@apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
|
|
}
|
|
|
|
.navbar-align {
|
|
@apply flex items-center justify-between;
|
|
}
|
|
|
|
.navbar-categories {
|
|
@apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
|
|
}
|
|
|
|
.navbar-web-title {
|
|
@apply text-xl font-semibold text-gray-900 dark:text-white;
|
|
}
|
|
|
|
.navbar-title {
|
|
@apply flex items-center space-x-8;
|
|
}
|
|
|
|
.navbar-category-link {
|
|
@apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
|
|
}
|
|
|
|
.navbar-dropdown-menu {
|
|
@apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 px-4 mt-4;
|
|
}
|
|
|
|
.navbar-dropdown-menu-list {
|
|
@apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
|
|
}
|
|
|
|
.navbar-dropdown-menu-list-items {
|
|
@apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
|
|
}
|
|
|
|
.navbar-dropdown-menu-title {
|
|
@apply hover:text-primary-700 dark:hover:text-primary-500;
|
|
}
|
|
|
|
.icon-button {
|
|
@apply flex text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
|
|
}
|
|
|
|
.link-button {
|
|
@apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
|
|
}
|
|
|
|
.cart-navbar-floating {
|
|
@apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
|
|
}
|
|
|
|
.button-primary {
|
|
@apply w-full flex justify-center rounded-lg bg-primary-700 px-5 py-2.5
|
|
text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4
|
|
focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
|
|
content-center items-center cursor-pointer;
|
|
}
|
|
|
|
.input-number {
|
|
@apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
|
|
focus:border-primary-600 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
|
|
dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 mr-4;
|
|
}
|
|
|
|
.input-text {
|
|
@apply my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600
|
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
|
|
}
|
|
|
|
.input-checkbox {
|
|
@apply my-2 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300
|
|
dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800;
|
|
}
|
|
|
|
.search-input {
|
|
@apply block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
|
|
}
|
|
|
|
.txt-2xl {
|
|
@apply text-2xl font-extrabold leading-tight text-gray-900 dark:text-white;
|
|
}
|
|
}
|