forked from crowetic/commerce
Changes to Button
This commit is contained in:
parent
9c3cb31b49
commit
8355ebb740
@ -1,3 +1,8 @@
|
||||
.root {
|
||||
@apply flex flex-row h-screen py-12;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply py-5 uppercase text-center;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
@ -17,10 +17,14 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="absolute h-12">
|
||||
<h1>T-Shirt</h1>
|
||||
<div className="absolute">
|
||||
<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 className="absolute h-12">T-Shirt</div>
|
||||
<div className="flex-1 h-full p-24">
|
||||
<div className="bg-violet h-full"></div>
|
||||
</div>
|
||||
@ -57,7 +61,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
||||
<p>{productData.description}</p>
|
||||
</section>
|
||||
<section className="pb-4">
|
||||
<Button className="">Add to Cart</Button>
|
||||
<Button className={s.button}>Add to Cart</Button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
.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 {
|
||||
@ -13,3 +13,7 @@
|
||||
.root:active {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
s.filled {
|
||||
@apply text-white bg-black;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user