mirror of https://github.com/4xmen/xshop.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.6 KiB
SCSS
104 lines
2.6 KiB
SCSS
.TreeGridProducts {
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
h1{
|
|
font-size: 22px;
|
|
}
|
|
.tree-product-box{
|
|
padding: .4rem;
|
|
overflow: hidden;
|
|
background: var(--xshop-background);
|
|
border-radius: var(--xshop-border-radius);
|
|
color: var(--xshop-text);
|
|
.price{
|
|
padding: 4px;
|
|
text-align: center;
|
|
color: var(--xshop-secondary);
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
img{
|
|
width: 100%;
|
|
}
|
|
h4{
|
|
font-size: 17px;
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: .4rem;
|
|
overflow: hidden;
|
|
}
|
|
a{
|
|
color: var(--xshop-text);
|
|
}
|
|
|
|
}
|
|
.tree-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(8,1fr);
|
|
grid-template-rows: auto;
|
|
grid-gap: 10px 10px;
|
|
padding-top: 1rem;
|
|
.tree-grid-item {
|
|
|
|
overflow: hidden;
|
|
border-radius: var(--xshop-border-radius);
|
|
//display: flex;
|
|
//align-items: center;
|
|
//justify-content: center;
|
|
color: var(--xshop-diff);
|
|
padding: 2rem 1rem;
|
|
position: relative;
|
|
box-shadow: var(--xshop-shadow);
|
|
&:first-child {
|
|
grid-column: 1/5 span;
|
|
grid-row: 1/3;
|
|
background: var(---main-bg);
|
|
}
|
|
&:nth-child(2) {
|
|
grid-column: 6/3 span;
|
|
grid-row: 1/2;
|
|
background: rgb(255,125,51);
|
|
background: linear-gradient(180deg, var(--gx1) 0%, var(--gx2) 100%);
|
|
overflow: hidden;
|
|
}
|
|
&:nth-child(3) {
|
|
grid-column: 6/3 span;
|
|
grid-row: 2/2;
|
|
background: linear-gradient(180deg, var(--gy1) 0%, var(--gy2) 100%);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
top: 0;
|
|
padding: 15px;
|
|
border-radius: var(--xshop-border-radius);
|
|
width: 75px;
|
|
background: #283035aa !important;
|
|
}
|
|
|
|
.section-second,.section-third{
|
|
img{
|
|
height: 128px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( max-width: 1024px ) {
|
|
.TreeGridProducts {
|
|
.tree-grid {
|
|
grid-template-columns: repeat(1, 1fr) !important;
|
|
grid-template-rows: repeat(1, 1fr) !important;
|
|
.tree-grid-item {
|
|
grid-column: auto !important;
|
|
grid-row: auto !important;
|
|
}
|
|
}
|
|
}
|
|
}
|