mirror of
https://github.com/vercel/commerce.git
synced 2025-05-16 06:26:58 +00:00
102 lines
2.2 KiB
CSS
102 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
|
|
img[loading='lazy'] {
|
|
clip-path: inset(0.6px);
|
|
}
|
|
}
|
|
|
|
/* BASE */
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
::-moz-selection {
|
|
/* Code for Firefox */
|
|
color: #ffffff;
|
|
background: #333333;
|
|
}
|
|
|
|
::selection {
|
|
color: #ffffff;
|
|
background: #333333;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
@apply font-sans h-full bg-white text-high-contrast;
|
|
|
|
box-sizing: border-box;
|
|
touch-action: manipulation;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overscroll-behavior-x: none;
|
|
}
|
|
|
|
/* DYNAMIC CONTENT MANAGER */
|
|
.dynamic-content > :not(.hero) {
|
|
@apply my-16 lg:my-24;
|
|
}
|
|
|
|
.dynamic-content > :first-child {
|
|
@apply mt-0 md:mt-0 lg:mt-0;
|
|
}
|
|
|
|
.dynamic-content > :last-child {
|
|
@apply mb-16 lg:mb-24;
|
|
}
|
|
|
|
.dynamic-content .dynamic-content {
|
|
@apply px-0 md:px-0;
|
|
}
|
|
|
|
.dynamic-content .dynamic-content > {
|
|
@apply my-0 md:my-0 lg:my-0;
|
|
}
|
|
|
|
.dynamic-content .dynamic-content > :last-child {
|
|
@apply my-0 md:my-0 lg:my-0;
|
|
}
|
|
|
|
/* GLIDER SLIDER */
|
|
.glider {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.glider::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.glider-dots {
|
|
@apply flex !space-x-[2px] !mt-8;
|
|
}
|
|
|
|
.glider-dot {
|
|
@apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
|
|
}
|
|
|
|
.glider-dot.active {
|
|
@apply after:!bg-high-contrast;
|
|
}
|
|
|
|
.glider-prev {
|
|
@apply text-high-contrast !right-12 !-top-10 !left-auto lg:!right-16 lg:!-top-12 2xl:!-top-16 2xl:!right-[100px] !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
|
|
}
|
|
|
|
.glider-next {
|
|
@apply text-high-contrast !right-4 !-top-10 lg:!right-8 lg:!-top-12 2xl:!-top-16 2xl:!right-16 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
|
|
}
|
|
|
|
.pdp .glider-prev {
|
|
@apply text-high-contrast absolute !left-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
|
|
}
|
|
|
|
.pdp .glider-next {
|
|
@apply text-high-contrast absolute !right-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
|
|
} |