Product details page layout complete
This commit is contained in:
prashant-webkul
parent
e173f9c7e6
commit
2e4fc2f8a3
|
|
@ -6,8 +6,8 @@ Route::group(['middleware' => ['web']], function () {
|
|||
'view' => 'shop::store.home.index'
|
||||
])->name('store.home');
|
||||
|
||||
Route::get('/category', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
|
||||
'view' => 'shop::store.category.index'
|
||||
Route::get('/product', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
|
||||
'view' => 'shop::store.product.index'
|
||||
]);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="106px" height="16px" viewBox="0 0 106 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Star-4</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Star-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<polygon id="Star" fill="#242424" points="8.41169779 13.2668737 3.21298265 16 4.2058489 10.2111456 2.29816166e-14 6.11145618 5.81234022 5.26687371 8.41169779 0 11.0110554 5.26687371 16.8233956 6.11145618 12.6175467 10.2111456 13.6104129 16"></polygon>
|
||||
<polygon id="Star" fill="#242424" points="31.4116978 13.2668737 26.2129827 16 27.2058489 10.2111456 23 6.11145618 28.8123402 5.26687371 31.4116978 0 34.0110554 5.26687371 39.8233956 6.11145618 35.6175467 10.2111456 36.6104129 16"></polygon>
|
||||
<polygon id="Star" fill="#242424" points="53.4116978 13.2668737 48.2129827 16 49.2058489 10.2111456 45 6.11145618 50.8123402 5.26687371 53.4116978 0 56.0110554 5.26687371 61.8233956 6.11145618 57.6175467 10.2111456 58.6104129 16"></polygon>
|
||||
<polygon id="Star" fill="#242424" points="75.4116978 13.2668737 70.2129827 16 71.2058489 10.2111456 67 6.11145618 72.8123402 5.26687371 75.4116978 0 78.0110554 5.26687371 83.8233956 6.11145618 79.6175467 10.2111456 80.6104129 16"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-grid-view</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Category" transform="translate(-918.000000, -652.000000)" fill="#242424">
|
||||
<g id="icon-grid-view" transform="translate(918.000000, 652.000000)">
|
||||
<rect id="1" x="0" y="0" width="10" height="10"></rect>
|
||||
<rect id="2" x="0" y="14" width="10" height="10"></rect>
|
||||
<rect id="3" x="14" y="0" width="10" height="10"></rect>
|
||||
<rect id="4" x="14" y="14" width="10" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 947 B |
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-list-view</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Category" transform="translate(-952.000000, -652.000000)" fill="#242424">
|
||||
<g id="icon-list-view" transform="translate(952.000000, 652.000000)">
|
||||
<rect id="4" x="0" y="0" width="10" height="10"></rect>
|
||||
<rect id="4" x="0" y="14" width="10" height="10"></rect>
|
||||
<rect id="Rectangle-4" x="12" y="0" width="12" height="3"></rect>
|
||||
<rect id="Rectangle-4-Copy" x="12" y="5" width="10" height="3"></rect>
|
||||
<rect id="Rectangle-4" x="12" y="14" width="12" height="3"></rect>
|
||||
<rect id="Rectangle-4-Copy" x="12" y="19" width="10" height="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-share</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="icon-share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M17.6017572,10.3626848 L17.6017572,8.97307668 L17.7423684,8.6716255 C18.0755216,7.95739026 18.7398682,7.5 19.5457911,7.5 C20.1894353,7.5 20.7487974,7.78098589 21.2150301,8.2450489 L25.7080449,12.7380637 L26.4358083,14.1586418 L25.673421,15.4378805 L25.5412491,15.5700523 L21.4220501,19.6885211 C20.7714032,20.3058878 20.2492699,20.6394498 19.5457911,20.6394498 C18.4975787,20.6394498 17.9427193,19.9473628 17.6730945,19.0185829 L17.6136225,18.8137191 L17.6136225,17.7824848 L17.0348214,17.7824848 C14.7402618,18.0465879 13.3365725,18.4574553 12.9871802,18.8050312 C12.8906505,18.901059 12.7357942,19.3763592 12.6365699,20.1145364 C12.6079463,20.3274811 12.5836405,20.5556138 12.5597427,20.8255333 C12.5451306,20.9905732 12.4990927,21.5648652 12.5023767,21.5251552 C12.4357011,22.3313848 12.3949365,22.6163508 12.2061579,22.9983804 C11.452927,24.5226869 9.71842249,24.8652049 8.74190088,23.2916804 C8.3315068,22.6303892 8.01010578,21.536647 7.69057879,19.8821889 C7.45964356,18.6864444 7.38096076,16.8312152 7.7443344,15.6617817 C8.1616307,14.3188106 8.80512846,13.2419676 9.75271558,12.4112199 C11.2470104,11.1011747 13.3610793,10.4388485 16.0925932,10.3626848 L17.6017572,10.3626848 Z" id="Path-4" stroke="#242424" stroke-width="3"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -10,10 +10,13 @@ $offer-color: #ff6472;
|
|||
//shop variables ends here
|
||||
|
||||
//customer variables
|
||||
$product-font-color: #242424;
|
||||
$product-price-color: #FF6472;
|
||||
$sign-up-text-color: #5e5e5e;
|
||||
$login-text: #3a3a3a;
|
||||
$background-color: #ffffff;
|
||||
$color-black : black;
|
||||
$forgot-password-color: #0031f0;
|
||||
$profile-content-color: #5e5e5e;
|
||||
$horizontal-rule-color: #E8E8E8;
|
||||
//customer variables ends here
|
||||
|
|
|
|||
|
|
@ -738,6 +738,240 @@ section.slider-block {
|
|||
|
||||
//customers page css ends here
|
||||
|
||||
// product pages css starts here
|
||||
|
||||
section.product-detail {
|
||||
font-size: 16px;
|
||||
|
||||
div.category-breadcrumbs {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.layouter {
|
||||
display:flex;
|
||||
flex-flow: row;
|
||||
margin-top: 2%;
|
||||
|
||||
div.product-image-group {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin-right: 2.5%;
|
||||
|
||||
.side-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.product-hero-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.wishlist {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.share {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
|
||||
.product-heading {
|
||||
font-size: 24px;
|
||||
color: $product-font-color;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.rating {
|
||||
color: $product-font-color;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-bottom: 14px;
|
||||
|
||||
.main-price {
|
||||
font-size: 24px;
|
||||
color: $product-price-color;
|
||||
}
|
||||
}
|
||||
|
||||
.stock-status {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
hr{
|
||||
border-top: 1px solid $horizontal-rule-color;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.attributes {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.attribute {
|
||||
height: 39px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-width: 130px;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
.values {
|
||||
display: inline-flex;
|
||||
|
||||
.colors {
|
||||
margin-right:5px;
|
||||
}
|
||||
.colors:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.red {
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
background: red;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
background: blue;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.green {
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
background: green;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.size {
|
||||
margin-right:5px;
|
||||
line-height: 38px;
|
||||
height: 37px;
|
||||
width: 60px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.size:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
.values {
|
||||
.control {
|
||||
height: 37px !important;
|
||||
width: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.full-specification{
|
||||
|
||||
}
|
||||
|
||||
.rating-reviews {
|
||||
margin-top: 30px;
|
||||
|
||||
.title{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.overall {
|
||||
|
||||
.number{
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
button {
|
||||
float: right;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.reviews {
|
||||
margin-top: 34px;
|
||||
margin-bottom: 80px;
|
||||
|
||||
.review {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.stars {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.message {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.view-all {
|
||||
margin-top:15px;
|
||||
color: $logo-color;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.related-products-wrapper {
|
||||
margin-bottom: 80px;
|
||||
|
||||
.title{
|
||||
margin-bottom: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.horizontal-rule {
|
||||
height: 1px;
|
||||
background: $horizontal-rule-color;
|
||||
width: 148px;
|
||||
margin-bottom: 24px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.related-products {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.header {
|
||||
// border: 1px solid black;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
@extends('shop::store.layouts.master')
|
||||
@section('content-wrapper')
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
@extends('shop::store.layouts.master')
|
||||
@section('content-wrapper')
|
||||
<section class="product-detail">
|
||||
<div class="category-breadcrumbs">
|
||||
|
||||
<span class="breadcrumb">Home</span> > <span class="breadcrumb">Men</span> > <span class="breadcrumb">Slit Open Jeans</span>
|
||||
|
||||
</div>
|
||||
<div class="layouter">
|
||||
|
||||
<div class="product-image-group">
|
||||
|
||||
<div class="side-group">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans.jpg') }}" />
|
||||
</div>
|
||||
|
||||
<div class="product-hero-image">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
|
||||
<img class="wishlist" src="{{ asset('vendor/webkul/shop/assets/images/wish.svg') }}" />
|
||||
<img class="share" src="{{ asset('vendor/webkul/shop/assets/images/icon-share.svg') }}" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
|
||||
<div class="product-heading">
|
||||
<span>Rainbow creation Embroidered</span>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
|
||||
75 Ratings & 11 Reviews
|
||||
</div>
|
||||
<div class="price">
|
||||
<span class="main-price">
|
||||
$24.00
|
||||
</span>
|
||||
<span class="real-price">
|
||||
$25.00
|
||||
</span>
|
||||
<span class="discount">
|
||||
10% Off
|
||||
</span>
|
||||
</div>
|
||||
<div class="stock-status">
|
||||
InStock
|
||||
</div>
|
||||
<br/>
|
||||
<div class="description">
|
||||
Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers.
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="attributes">
|
||||
|
||||
<div class="attribute color">
|
||||
<div class="title">Color</div>
|
||||
|
||||
<div class="values">
|
||||
<div class="colors red"></div>
|
||||
<div class="colors blue"></div>
|
||||
<div class="colors green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attribute size">
|
||||
<div class="title">Size</div>
|
||||
|
||||
<div class="values">
|
||||
<div class="size xl">XL</div>
|
||||
<div class="size xxl">XXL</div>
|
||||
<div class="size xxxl">XXXL</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attribute quantity">
|
||||
<div class="title">Quantity</div>
|
||||
|
||||
<div class="values">
|
||||
<div class="size">1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
{{-- The elements below will be accordians --}}
|
||||
<div class="full-description">
|
||||
<h4>Description</h4>
|
||||
Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
|
||||
Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm d rivers. Bluetooth-enabled connectivity with NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
|
||||
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="full-specifications">
|
||||
<h4>Specification</h4>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="rating-reviews">
|
||||
<div class="title">
|
||||
Ratings & Reviews
|
||||
</div>
|
||||
<div class="overall">
|
||||
<span class="number">
|
||||
4.3
|
||||
</span>
|
||||
<span class="stars">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
|
||||
</span>
|
||||
|
||||
<button class="btn btn-md btn-primary">Write Review</button>
|
||||
|
||||
<div class="total-reviews">
|
||||
24,330 Ratings & 104 Reviews
|
||||
</div>
|
||||
</div>
|
||||
<div class="reviews">
|
||||
<div class="review">
|
||||
<div class="title">
|
||||
Awesome
|
||||
</div>
|
||||
<div class="stars">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
|
||||
</div>
|
||||
<div class="message">
|
||||
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
</div>
|
||||
<div class="reviewer-details">
|
||||
<span class="by">
|
||||
By John Doe
|
||||
</span>
|
||||
<span class="when">
|
||||
, 25, June 2018
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="title">
|
||||
Awesome
|
||||
</div>
|
||||
<div class="stars">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
|
||||
</div>
|
||||
<div class="message">
|
||||
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
</div>
|
||||
<div class="reviewer-details">
|
||||
<span class="by">
|
||||
By John Doe
|
||||
</span>
|
||||
<span class="when">
|
||||
, 25, June 2018
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="title">
|
||||
Awesome
|
||||
</div>
|
||||
<div class="stars">
|
||||
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
|
||||
</div>
|
||||
<div class="message">
|
||||
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
|
||||
</div>
|
||||
<div class="reviewer-details">
|
||||
<span class="by">
|
||||
By John Doe
|
||||
</span>
|
||||
<span class="when">
|
||||
, 25, June 2018
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-all">View All</div>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="related-products-wrapper">
|
||||
|
||||
<div class="title">
|
||||
We found other products you might like!
|
||||
</div>
|
||||
|
||||
<div class="horizontal-rule"></div>
|
||||
|
||||
<div class="related-products">
|
||||
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<img src="vendor/webkul/shop/assets/images/grid.png" />
|
||||
</div>
|
||||
<div class="product-name">
|
||||
<span>Red Black Tees</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span>$65.00</span>
|
||||
</div>
|
||||
<div class="product-ratings">
|
||||
<span>
|
||||
<img src="vendor/webkul/shop/assets/images/5star.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="cart-fav-seg">
|
||||
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
|
||||
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<img src="vendor/webkul/shop/assets/images/grid.png" />
|
||||
</div>
|
||||
<div class="product-name">
|
||||
<span>Red Black Tees</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span>$65.00</span>
|
||||
</div>
|
||||
<div class="product-ratings">
|
||||
<span>
|
||||
<img src="vendor/webkul/shop/assets/images/5star.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="cart-fav-seg">
|
||||
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
|
||||
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<img src="vendor/webkul/shop/assets/images/grid.png" />
|
||||
</div>
|
||||
<div class="product-name">
|
||||
<span>Red Black Tees</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span>$65.00</span>
|
||||
</div>
|
||||
<div class="product-ratings">
|
||||
<span>
|
||||
<img src="vendor/webkul/shop/assets/images/5star.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="cart-fav-seg">
|
||||
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
|
||||
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<img src="vendor/webkul/shop/assets/images/grid.png" />
|
||||
</div>
|
||||
<div class="product-name">
|
||||
<span>Red Black Tees</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span>$65.00</span>
|
||||
</div>
|
||||
<div class="product-ratings">
|
||||
<span>
|
||||
<img src="vendor/webkul/shop/assets/images/5star.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="cart-fav-seg">
|
||||
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
|
||||
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -4,4 +4,8 @@ $danger-color: #FC6868;
|
|||
$success-color: #4CAF50;
|
||||
$warning-color: #FFC107;
|
||||
$control-border-color: #C7C7C7;
|
||||
$border-color: rgba(162, 162, 162, 0.2);
|
||||
$border-color: rgba(162, 162, 162, 0.2);
|
||||
$filter-toggle-color : #8e8e8e;
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-black-shade : #000311;
|
||||
|
|
@ -225,7 +225,7 @@ h2 {
|
|||
padding: 10px;
|
||||
border-bottom: solid 1px #d3d3d3;
|
||||
color: $font-color;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
|
||||
&.actions {
|
||||
text-align: right;
|
||||
|
|
@ -683,22 +683,6 @@ h2 {
|
|||
.dropdown-filters {
|
||||
display: inline-flex;
|
||||
|
||||
// .column-filter {
|
||||
// margin-right: 5px;
|
||||
|
||||
// .control {
|
||||
// font-family: "montserrat", sans-serif;
|
||||
// padding-left: 5px;
|
||||
// height: 36px;
|
||||
// width: 150px;
|
||||
// border: 2px solid $control-border-color;
|
||||
// border-radius: 3px;
|
||||
// background-color: white;
|
||||
// color: #8e8e8e;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.more-filters {
|
||||
margin-right: 5px;
|
||||
|
||||
|
|
@ -714,7 +698,7 @@ h2 {
|
|||
border: 2px solid $control-border-color;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
color: #8e8e8e;
|
||||
color: $filter-toggle-color;
|
||||
font-size: 14px;
|
||||
|
||||
.dropdown-header {
|
||||
|
|
@ -735,8 +719,8 @@ h2 {
|
|||
li.filter-column-dropdown {
|
||||
.filter-column-select {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 2px solid #c7c7c7;
|
||||
background: $color-white;
|
||||
border: 2px solid $control-border-color;
|
||||
border-radius: 3px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
|
|
@ -753,8 +737,8 @@ h2 {
|
|||
}
|
||||
li {
|
||||
select {
|
||||
background: #fff;
|
||||
border: 2px solid #c7c7c7;
|
||||
background: $color-white;
|
||||
border: 2px solid $control-border-color;
|
||||
border-radius: 3px;
|
||||
height: 36px;
|
||||
max-width: 100%;
|
||||
|
|
@ -833,7 +817,7 @@ h2 {
|
|||
display: inline-flex;
|
||||
background: #e7e7e7;
|
||||
padding-left: 5px;
|
||||
color: #000311;
|
||||
color: $color-black-shade;
|
||||
vertical-align: middle;
|
||||
|
||||
.f-value {
|
||||
|
|
@ -882,6 +866,12 @@ h2 {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
td.action {
|
||||
a:first-child {
|
||||
margin-right:8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
|
|
|
|||
Loading…
Reference in New Issue