Catalog layout almost complete
This commit is contained in:
Graphictoria
parent
070c79c706
commit
dc77fb8691
|
|
@ -1,6 +1,8 @@
|
||||||
// © XlXi 2021
|
// © XlXi 2021
|
||||||
// Graphictoria 5
|
// Graphictoria 5
|
||||||
|
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
// Lumen 5.0.1
|
// Lumen 5.0.1
|
||||||
// Bootswatch
|
// Bootswatch
|
||||||
|
|
||||||
|
|
@ -34,6 +36,15 @@ img.twemoji {
|
||||||
|
|
||||||
// Shop
|
// Shop
|
||||||
|
|
||||||
|
.graphictoria-list-dropdown::after {
|
||||||
|
@include caret-down();
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.255em;
|
||||||
|
vertical-align: 0.255em;
|
||||||
|
}
|
||||||
|
|
||||||
.graphictoria-item-card {
|
.graphictoria-item-card {
|
||||||
text-decoration: none!important;
|
text-decoration: none!important;
|
||||||
font-weight: 400!important;
|
font-weight: 400!important;
|
||||||
|
|
@ -41,21 +52,21 @@ img.twemoji {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 33.33333333%;
|
width: math.div(100%, 3);
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 25%;
|
width: math.div(100%, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 16.66666667%;
|
width: math.div(100%, 7);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
width: 11.1111111%;
|
width: math.div(100%, 8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -64,7 +75,7 @@ img.twemoji {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphictoria-catalog-overlay {
|
.graphictoria-shop-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -75,10 +86,26 @@ img.twemoji {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphictoria-catalog-overlay > .gtoria-loader {
|
.graphictoria-shop-overlay > .gtoria-loader {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graphictoria-shop-categories {
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
html.gtoria-light & {
|
||||||
|
border-right: 2px solid #dee2e6!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.gtoria-dark & {
|
||||||
|
border-right: 2px solid #333!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// py-1
|
||||||
|
padding-bottom: 0.25rem!important;
|
||||||
|
padding-top: 0.25rem!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Maintenance
|
// Maintenance
|
||||||
|
|
||||||
.gtoria-maintenance-background {
|
.gtoria-maintenance-background {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@section('title', 'Shop')
|
@section('title', 'Shop')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="container my-2">
|
<div class="container-lg my-2">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col d-flex">
|
<div class="col d-flex">
|
||||||
<h4 class="my-auto">Shop</h4>
|
<h4 class="my-auto">Shop</h4>
|
||||||
|
|
@ -16,20 +16,51 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card p-3">
|
<div class="row">
|
||||||
<div class="graphictoria-catalog-overlay">
|
<div class="col-md-2">
|
||||||
<x-loader />
|
<div class="graphictoria-shop-categories border-2 border-end py-1">
|
||||||
|
<h5>Category</h5>
|
||||||
|
<ul class="list-unstyled ps-0">
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test-collapse" aria-expanded="true" href="#">Test</a>
|
||||||
|
<div class="collapse show" id="shop-test-collapse">
|
||||||
|
<ul class="btn-toggle-nav list-unstyled fw-normal small">
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mb-1">
|
||||||
|
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test2-collapse" aria-expanded="false" href="#">Test 2</a>
|
||||||
|
<div class="collapse" id="shop-test2-collapse">
|
||||||
|
<ul class="btn-toggle-nav list-unstyled fw-normal small">
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="col-md-10">
|
||||||
<a class="graphictoria-item-card" href="#">
|
<div class="card p-3">
|
||||||
<span class="card m-2">
|
<div class="graphictoria-shop-overlay">
|
||||||
<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
|
<x-loader />
|
||||||
<div class="p-2">
|
</div>
|
||||||
<p>Test hat</p>
|
<div>
|
||||||
<p class="text-muted">Free</p>
|
<a class="graphictoria-item-card" href="#">
|
||||||
</div>
|
<span class="card m-2">
|
||||||
</span>
|
<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
|
||||||
</a>
|
<div class="p-2">
|
||||||
|
<p>Test hat</p>
|
||||||
|
<p class="text-muted">Free</p>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue