crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better Swatch Support (#335)

Browse Source 
* Better support for swatches

* Better support for swatches

* Fix glitch for Swatch

* Fix glitch for Swatch

* Fix glitch for Swatch
This commit is contained in:
B
2021-05-28 10:24:06 -03:00
committed by GitHub
parent f06fe25625
commit 60dac1654b
5 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/product/Swatch/Swatch.module.css
View File

@@ -1,33 +1,52 @@
.root {
.swatch {
box-sizing: border-box;
composes: root from 'components/ui/Button/Button.module.css';
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border;
margin-right: calc(0.75rem - 1px);
overflow: hidden;
}
& > span {
@apply absolute;
}
.swatch::before,
.swatch::after {
box-sizing: border-box;
}
&:hover {
@apply transform scale-110 bg-hover;
}
.swatch:hover {
@apply transform scale-110 bg-hover;
}
.swatch > span {
@apply absolute;
}
.color {
@apply text-black transition duration-150 ease-in-out;
}
&:hover {
@apply text-black;
}
.color :hover {
@apply text-black;
}
&.dark,
&.dark:hover {
color: white !important;
}
.color.dark,
.color.dark:hover {
color: white !important;
}
.active {
&.size {
@apply border-accents-9 border-2;
}
@apply border-accents-9 border-2;
padding-right: 1px;
padding-left: 1px;
}
.textLabel {
@apply w-auto px-4;
min-width: 3rem;
}
.active.textLabel {
@apply border-accents-9 border-2;
padding-right: calc(1rem - 1px);
padding-left: calc(1rem - 1px);
}