fix addons list to use gap instead of negative margin hackery

pull/98/head
dperolio 2 years ago
parent 27f3afc9b7
commit 3f3c53b67d
No known key found for this signature in database
GPG Key ID: 4191689562D51409

@ -9,7 +9,6 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
min-width: 340px; min-width: 340px;
margin: 10px;
cursor: pointer; cursor: pointer;
transition: box-shadow .2s ease-out, background .2s ease-out; transition: box-shadow .2s ease-out, background .2s ease-out;
flex: 1; flex: 1;

@ -3,12 +3,8 @@
.vz-addons-list { .vz-addons-list {
$base: &; $base: &;
&[vz-display='compact'] { &[vz-display='compact'] {
#{$base}-items {
margin: 25px -5px 0;
}
.vz-addon-card { .vz-addon-card {
padding: 16px; padding: 16px;
margin: 5px;
&-header { &-header {
padding: 0; padding: 0;
} }

@ -4,12 +4,8 @@
$base: &; $base: &;
z-index: 1; z-index: 1;
&[vz-display='list'] { &[vz-display='list'] {
#{$base}-items {
margin: 25px -10px 0;
}
.vz-addon-card { .vz-addon-card {
flex: 1 100%; flex: 1 100%;
margin: 5px 10px;
} }
&:not([vz-banners]) { &:not([vz-banners]) {
.vz-addon-card { .vz-addon-card {

@ -4,31 +4,14 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1; flex: 1;
&-page-content {
// &::before {
// @include vz.size(100%, 350px);
// content: '';
// -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%);
// mask-image: linear-gradient(to top, transparent 0%, #000 70%);
// background-image: url('vizaliy://assets/images/addons-list-bg-dark.png');
// background-repeat: no-repeat;
// background-position: center;
// background-size: cover;
// position: absolute;
// top: 0;
// left: 0;
// z-index: 0;
// animation: vz-fade-half 0.3s forwards;
// [vz-theme='light'] & {
// background-image: url('vizality://assets/images/addons-list-bg-light.png');
// }
// }
}
&-items { &-items {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-flow: row wrap; flex-flow: row wrap;
margin: 20px -10px 20px; // Negative left and right margins to counteract vz-addon-card margin gap: 15px;
[vz-display='compact'] & {
gap: 10px;
}
} }
&-inner { &-inner {
display: flex; display: flex;

Loading…
Cancel
Save