ahmza/blog-ahmza-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bundle css

Browse Source
This commit is contained in:
Hamza Ahmed
2023-11-16 23:59:06 +00:00
parent 857e677a0b
commit 7e88f4b71e
9 changed files with 3 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/drop-in.css
-83
View File
@@ -1,83 +0,0 @@
:root{
--cl-color-primary: var(--tertiary);
--cl-color-white: var(--content);
}
cl-availability-status[aria-disabled=true],cl-identity-status[aria-disabled=true]{
display:none
}
cl-price-amount{
color: var(--purple);
font-size:1em;
font-weight:600;
line-height:1.5em
}
cl-price-amount[type=compare-at]{
color: var(--content);
font-size:.875em;
font-weight:300;
line-height:1.25em;
text-decoration:line-through
}
cl-price-amount[type=compare-at]::part(strikethrough){
text-decoration:none
}
cl-add-to-cart{
display:inline-block;
background-image:none;
border:none;
font-weight:600;
color:var(--cl-color-white);
padding:.75rem 1rem .75rem 1rem;
border-radius: var(--radius);
background-color: var(--cl-color-primary);
cursor:default;
position: relative;
bottom: 0;
}
cl-add-to-cart:not([aria-disabled=true]){
background-color:var(--cl-color-primary);
cursor:pointer;
}
cl-cart-link,.cl-cart-link{
position:relative;
display:inline-block;
cursor:pointer;
}
cl-cart-link cl-cart-count,.cl-cart-link cl-cart-count{
position:absolute;
bottom:0;
right:0;
font-size:.5rem;
border-radius:50%;
background-color:var(--cl-color-primary);
min-width:1rem;
height:1rem;
display:flex;
align-items:center;
justify-content:center;
color:var(--cl-color-white);
transform:translate(120%, 0%);
padding:.2rem;
}
cl-cart-link cl-cart-count[hide-when-empty=""],cl-cart-link cl-cart-count[hide-when-empty=true],.cl-cart-link cl-cart-count[hide-when-empty=""],.cl-cart-link cl-cart-count[hide-when-empty=true]{
opacity:0
}
cl-cart-link cl-cart-count[quantity],.cl-cart-link cl-cart-count[quantity]{
transition:opacity .3s;opacity:1
}
cl-cart-link svg~cl-cart-count,.cl-cart-link svg~cl-cart-count{
bottom:0%;
right:0%;
transform:translate(30%, 0%);
}
static/css/minicart.css
-69
View File
@@ -1,69 +0,0 @@
cl-cart[type=mini]{
--cl-cart-mini-backdrop-bg: #000;
--cl-cart-mini-backdrop-opacity: 0.4;
--cl-cart-mini-backdrop-shadow: -1px 0px 10px rgba(0, 0, 0, .3);
--cl-cart-mini-modal-z-index: 100;
--cl-cart-mini-modal-bg: #fff;
--cl-cart-mini-modal-width: 400px;
--cl-cart-mini-modal-max-width: calc(100vw - 40px);
--cl-cart-mini-transition-duration: .3s;
--cl-cart-mini-transition-timing-function: ease-in-out;
display:flex;
cursor:auto;
position:fixed;
z-index:var(--cl-cart-mini-modal-z-index);
top:0;
width:var(--cl-cart-mini-modal-width);
max-width:var(--cl-cart-mini-modal-max-width);
height:100%;
pointer-events:none;
box-sizing:border-box;
box-shadow:none;
transition:box-shadow var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini]::before,cl-cart[type=mini]::after{
position:fixed;
content:" ";
opacity:0;
width:100%;
height:100%;
top:0;
right:0;
z-index:-1;
transition:opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini]::before{
background:var(--cl-cart-mini-backdrop-bg)
}
cl-cart[type=mini]::after{
position:fixed;
width:var(--cl-cart-mini-modal-width);
max-width:var(--cl-cart-mini-modal-max-width);
box-shadow:var(--cl-cart-mini-backdrop-shadow)
}
cl-cart[type=mini],cl-cart[type=mini]::after{
right:calc(var(--cl-cart-mini-modal-width)*-1 + 0px);
transition:right var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function),opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}
cl-cart[type=mini][open]:not([open=false]){
right:0;
pointer-events:initial
}
cl-cart[type=mini][open]:not([open=false])::before{
opacity:var(--cl-cart-mini-backdrop-opacity)
}
cl-cart[type=mini][open]:not([open=false])::after{
right:0;
opacity:1
}
body.cl-cart--open{
overflow:hidden
}
static/css/product.css
-38
View File
@@ -1,38 +0,0 @@
.hero {
text-align: center;
padding: 50px;
}
.hero img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.product-details {
background-color: #333;
padding: 20px;
margin-top: 20px;
}
.prodStock {
padding: 20px 0 20px 0;
}
.related-products {
background-color: #333;
padding: 20px;
margin-top: 20px;
}
.shopping-links {
text-align: center;
}
.shopping-links a {
color: var(--secondary);
text-decoration: underline;
display: inline-block;
padding: 20px;
font-size: 14px;
}
static/css/shop.css
-76
View File
@@ -1,76 +0,0 @@
.main {
position: relative;
min-height: calc(100vh - var(--header-height) - var(--footer-height));
max-width: calc(1024px + var(--gap) * 2);
margin: auto;
padding var(--gap)
}
.productList {
display: inline-grid;
grid-template-columns: auto auto auto;
grid-auto-rows: 400px;
grid-gap: 30px 10px;
margin-top: 10px;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--entry);
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
padding: var(--gap);
}
img{
margin-left: auto;
margin-right: auto;
}
.prodImage {
display:block;
width: 100%;
height: auto;
max-height: 100%;
border-radius: var(--radius);
overflow-clip-margin: content-box;
overflow: clip;
padding-bottom: 10px
}
.prodStock {
color: var(--green);
}
.shop-nav {
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: calc(var(--nav-width) + var(--gap) * 2);
margin-inline-start: auto;
margin-inline-end: auto;
}
.shop-nav li {
padding-right:10px;
font-size: 16px;
}
@media only screen and (min-width: 608px) {
.productList {
grid-template-columns: auto auto auto;
}
}
@media only screen and (min-width: 609px) {
.productList {
grid-template-columns: auto auto auto auto;
}
.shop-nav {
justify-content: flex-end
}
}
@media only screen and (min-width: 992px) {
.productList {
grid-template-columns: auto auto auto auto auto;
}
}