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

Changes to Button

Browse Source
This commit is contained in:
Belen Curcio 2020-09-29 19:39:16 -03:00
parent 9c3cb31b49
commit 8355ebb740
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,8 @@
.root { .root {
@apply flex flex-row h-screen py-12; @apply flex flex-row h-screen py-12;
} }
.button {
@apply py-5 uppercase text-center;
min-width: 300px;
}

12
components/product/ProductView/ProductView.tsx
View File

@ -17,10 +17,14 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<div className="absolute h-12"> <div className="absolute">
<h1>T-Shirt</h1> <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
T-Shirt
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
$50
</div>
</div> </div>
<div className="absolute h-12">T-Shirt</div>
<div className="flex-1 h-full p-24"> <div className="flex-1 h-full p-24">
<div className="bg-violet h-full"></div> <div className="bg-violet h-full"></div>
</div> </div>
@ -57,7 +61,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
<p>{productData.description}</p> <p>{productData.description}</p>
</section> </section>
<section className="pb-4"> <section className="pb-4">
<Button className="">Add to Cart</Button> <Button className={s.button}>Add to Cart</Button>
</section> </section>
</div> </div>
</div> </div>

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

@ -1,5 +1,5 @@
.root { .root {
@apply cursor-pointer inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium; @apply cursor-pointer inline-flex px-8 py-2 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium text-center justify-center;
} }
.root:hover { .root:hover {
@ -13,3 +13,7 @@
.root:active { .root:active {
@apply bg-gray-700; @apply bg-gray-700;
} }
s.filled {
@apply text-white bg-black;
}