Fixed issue with image of product card getting cropped due to CSS
This commit is contained in:
parent
42d067c44a
commit
caf165d06c
|
|
@ -355,8 +355,6 @@
|
|||
<label class="mb-10" for="attribute_values">{{ __('admin::app.promotion.select-attribute') }}</label>
|
||||
|
||||
<multiselect v-model="attribute_values" :options="attribute_options" :searchable="false" :custom-label="attributeLabel" :show-labels="true" placeholder="Select Attributes" track-by="code" :multiple="true" :taggable="true" @tag="categoryTag"></multiselect>
|
||||
|
||||
@{{ attribute_values }}
|
||||
</div> --}}
|
||||
|
||||
<div class="control-container mt-20" v-for="(condition, index) in attribute_list" :key="index">
|
||||
|
|
@ -610,23 +608,5 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
pre {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.multiselect__option--selected.multiselect__option--highlight {
|
||||
background: rgba(0, 64, 255, 0.6);
|
||||
}
|
||||
|
||||
.multiselect__option--highlight {
|
||||
background: #4CAF50;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@stop
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"/js/shop.js": "/js/shop.js?id=71f03d05d9690fe24784",
|
||||
"/css/shop.css": "/css/shop.css?id=73e6fda213d31cc70bd6"
|
||||
"/js/shop.js": "/js/shop.js?id=ad1039174ce2c81c8805",
|
||||
"/css/shop.css": "/css/shop.css?id=d48d50893f24c7ee8ddf"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ input {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 770px) {
|
||||
.pagination.shop {
|
||||
justify-content: space-between;
|
||||
|
|
@ -329,7 +328,7 @@ input {
|
|||
grid-auto-rows: auto;
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 15px;
|
||||
justify-items: end;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.product-grid-3 {
|
||||
|
|
@ -342,8 +341,7 @@ input {
|
|||
|
||||
.product-card {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
|
||||
border: 1px solid black;
|
||||
.product-image {
|
||||
max-height: 350px;
|
||||
max-width: 280px;
|
||||
|
|
@ -352,7 +350,7 @@ input {
|
|||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -423,11 +421,13 @@ input {
|
|||
}
|
||||
|
||||
.product-card:hover {
|
||||
outline: 1px solid $outline-hvr;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
-webkit-box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
|
||||
-moz-box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
|
||||
box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
|
||||
padding: 10px;
|
||||
transition: .3s;
|
||||
outline: 1px solid $outline-hvr;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 580px) {
|
||||
|
|
@ -444,13 +444,31 @@ input {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 854px) {
|
||||
.product-image {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid-4 {
|
||||
grid-template-columns: 29.5% 29.5% 29.5%;
|
||||
grid-column-gap: 35px;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 653px) {
|
||||
.product-image {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid-4 {
|
||||
grid-template-columns: 48.5% 48.5%;
|
||||
grid-column-gap: 17px;
|
||||
|
|
@ -461,6 +479,13 @@ input {
|
|||
.product-card {
|
||||
font-size: 90%;
|
||||
|
||||
.product-image {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-md {
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ Vue.component("swatch-picker", require("./components/swatch-picker"));
|
|||
Vue.directive("debounce", require("./directives/debounce"));
|
||||
|
||||
import { Multiselect } from 'vue-multiselect';
|
||||
|
||||
Vue.component('multiselect', Multiselect);
|
||||
|
||||
require('flatpickr/dist/flatpickr.css');
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
return {
|
||||
colorModel: this.color
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue