cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Stable refactor

Browse Source
This commit is contained in:
Belen Curcio 2020-10-26 11:09:12 -03:00
parent 351725d322
commit 24c1c6c70b
12 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/core/I18nWidget/I18nWidget.module.css
View File

@ -3,7 +3,11 @@
}
.button {
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
}
.button:focus {
@apply outline-none;
}
.dropdownMenu {
@ -15,9 +19,10 @@
}
.item {
@apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
@apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
text-transform: capitalize;
}
.item.active {
.item:hover {
@apply bg-accents-1;
}

12
components/core/Navbar/Navbar.module.css
View File

@ -1,5 +1,11 @@
.link {
@apply group inline-flex items-center text-base leading-6 font-medium
hover:text-accents-8 focus:outline-none focus:text-accents-8 transition
ease-in-out duration-150 cursor-pointer;
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer;
}
.link:hover {
@apply text-accents-8;
}
.link:focus {
@apply outline-none text-accents-8;
}

2
components/core/Searchbar/Searchbar.module.css
View File

@ -1,6 +1,6 @@
.input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition
duration-150 ease-in-out placeholder-accents-5 pr-10;
duration-150 ease-in-out pr-10;
min-width: 300px;
}

23
components/core/UserNav/DropdownMenu.module.css
View File

@ -4,14 +4,17 @@
@screen lg {
@apply absolute border border-accents-1 shadow-lg w-56 h-auto;
}
& .link {
@apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out
duration-150 text-base leading-6 font-medium text-gray-900 items-center;
text-transform: capitalize;
}
&.off {
@apply hidden;
}
}
.link {
@apply flex cursor-pointer px-6 py-3 block transition ease-in-out duration-150 text-primary leading-6 font-medium text-gray-900 items-center;
text-transform: capitalize;
}
.link:hover {
@apply bg-accents-1;
}
.off {
@apply hidden;
}

8
components/core/UserNav/UserNav.module.css
View File

@ -7,7 +7,7 @@
}
.item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center outline-none;
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none;
&:hover {
@apply text-accents-8 transition scale-110 duration-100;
@ -28,5 +28,9 @@
}
.avatarButton {
@apply inline-flex justify-center rounded-full outline-none focus:outline-none;
@apply inline-flex justify-center rounded-full;
}
.avatarButton:focus {
@apply outline-none;
}

4
components/product/ProductCard/ProductCard.module.css
View File

@ -113,12 +113,12 @@
}
.productPrice {
@apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
@apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
letter-spacing: 0.4px;
}
.wishlistButton {
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
}
.imageContainer {

12
components/product/ProductSlider/ProductSlider.module.css
View File

@ -5,7 +5,17 @@
.leftControl,
.rightControl {
@apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
@apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
}
.leftControl:hover,
.rightControl:hover {
@apply bg-hover-2;
}
.leftControl:hover,
.rightControl:hover {
@apply outline-none shadow-outline-blue;
}
.leftControl {

2
components/product/ProductView/ProductView.module.css
View File

@ -83,7 +83,7 @@
}
.wishlistButton {
@apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
@apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
@screen lg {
@apply right-12 text-white bg-violet;

9
components/ui/Button/Button.module.css
View File

@ -1,16 +1,13 @@
.root {
@apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
border border-transparent items-center;
@apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
}
.root:hover {
@apply bg-accents-0 text-base border border-secondary;
@apply bg-accents-0 text-primary border border-secondary;
}
.root:focus {
@apply shadow-outline;
@apply shadow-outline outline-none;
}
.root[data-active] {

8
components/ui/Input/Input.module.css
View File

@ -1,5 +1,7 @@
.root {
@apply focus:outline-none bg-primary focus:shadow-outline-gray py-2
px-6 w-full appearance-none transition duration-150 ease-in-out
placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
@apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
}
.root:focus {
@apply outline-none shadow-outline-gray;
}

4
components/ui/Text/Text.module.css
View File

@ -7,9 +7,9 @@
}
.pageHeading {
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
@apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide;
}
.sectionHeading {
@apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3;
@apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3;
}

8
tailwind.config.js
View File

@ -1,8 +1,4 @@
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
@ -54,9 +50,5 @@ module.exports = {
},
},
},
variants: {},
plugins: [require('@tailwindcss/ui')],
experimental: {
applyComplexClasses: true,
},
}