crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 05:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated CSS

Browse Source
This commit is contained in:
Henrik Larsson 2023-08-13 22:56:21 +02:00
parent 82350503b4
commit f7129605ec
1 changed files with 72 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
app/[locale]/globals.css
View File

@ -40,100 +40,95 @@
* { * {
@apply border-border; @apply border-border;
} }
::-moz-selection {
/* Code for Firefox */
color: #ffffff;
background: #333333;
}
::selection {
color: #ffffff;
background: #333333;
}
html,
body {
@apply h-full bg-white font-sans 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;
}
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* BASE */ @layer components {
*, /* DYNAMIC CONTENT MANAGER */
*:before, .dynamic-content > :not(.hero) {
*:after { @apply my-12 md:my-16 lg:my-24;
box-sizing: inherit; }
}
::-moz-selection { .dynamic-content > :first-child {
/* Code for Firefox */ @apply mt-0 md:mt-0 lg:mt-0;
color: #ffffff; }
background: #333333;
}
::selection { .dynamic-content > :last-child {
color: #ffffff; @apply mb-12 md:mb-16 lg:mb-24;
background: #333333; }
}
html, .dynamic-content .dynamic-content {
body { @apply px-0 md:px-0;
@apply h-full bg-white font-sans text-high-contrast; }
box-sizing: border-box; .dynamic-content .dynamic-content > {
touch-action: manipulation; @apply my-0 md:my-0 lg:my-0;
text-rendering: optimizeLegibility; }
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-x: none;
}
/* DYNAMIC CONTENT MANAGER */ .dynamic-content .dynamic-content > :last-child {
.dynamic-content > :not(.hero) { @apply my-0 md:my-0 lg:my-0;
@apply my-12 md:my-16 lg:my-24; }
}
.dynamic-content > :first-child { /* GLIDER SLIDER */
@apply mt-0 md:mt-0 lg:mt-0; .glider {
} scrollbar-width: none;
-ms-overflow-style: none;
}
.dynamic-content > :last-child { .glider::-webkit-scrollbar {
@apply mb-12 md:mb-16 lg:mb-24; display: none;
} }
.dynamic-content .dynamic-content { .glider-dots {
@apply px-0 md:px-0; @apply !mt-8 flex !space-x-[2px];
} }
.dynamic-content .dynamic-content > { .glider-dot {
@apply my-0 md:my-0 lg:my-0; @apply !m-0 !h-4 !w-12 !rounded-none !bg-transparent after:block after:h-[3px] after:w-12 after:bg-ui-border after:content-[''] 2xl:!w-16 2xl:after:w-16;
} }
.dynamic-content .dynamic-content > :last-child { .glider-dot.active {
@apply my-0 md:my-0 lg:my-0; @apply after:!bg-high-contrast;
} }
/* GLIDER SLIDER */ .glider-prev {
.glider { @apply !-top-10 !left-auto !right-12 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-16 2xl:!right-[100px];
scrollbar-width: none; }
-ms-overflow-style: none;
}
.glider::-webkit-scrollbar { .glider-next {
display: none; @apply !-top-10 !right-4 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-8 2xl:!right-16;
} }
.glider-dots { .pdp .glider-prev {
@apply !mt-8 flex !space-x-[2px]; @apply absolute !left-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
} }
.glider-dot { .pdp .glider-next {
@apply !m-0 !h-4 !w-12 !rounded-none !bg-transparent after:block after:h-[3px] after:w-12 after:bg-ui-border after:content-[''] 2xl:!w-16 2xl:after:w-16; @apply absolute !right-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
} }
.glider-dot.active {
@apply after:!bg-high-contrast;
}
.glider-prev {
@apply !-top-10 !left-auto !right-12 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-16 2xl:!right-[100px];
}
.glider-next {
@apply !-top-10 !right-4 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-8 2xl:!right-16;
}
.pdp .glider-prev {
@apply absolute !left-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
}
.pdp .glider-next {
@apply absolute !right-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
} }