diff --git a/src/Resources/app/storefront/src/scss/_mixins.scss b/src/Resources/app/storefront/src/scss/_mixins.scss index 5e68304..aa0aecb 100644 --- a/src/Resources/app/storefront/src/scss/_mixins.scss +++ b/src/Resources/app/storefront/src/scss/_mixins.scss @@ -7,33 +7,3 @@ @mixin for-min-size($size) { @media screen and (min-width: $size) { @content; } } - -/** - * Aspect ratio - */ -@mixin aspect-ratio($width, $height, $float: false) { - position: relative; - @if $float { - overflow: hidden; - &:before { - display: table; - content: ""; - padding-top: ($height / $width) * 100%; - float: left; - } - } @else { - &:before { - display: block; - content: ""; - width: 100%; - padding-top: ($height / $width) * 100%; - } - > * { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - } -} diff --git a/src/Resources/app/storefront/src/scss/_product-box.scss b/src/Resources/app/storefront/src/scss/_product-box.scss index 92c6921..7d5b9a7 100644 --- a/src/Resources/app/storefront/src/scss/_product-box.scss +++ b/src/Resources/app/storefront/src/scss/_product-box.scss @@ -17,11 +17,19 @@ .product-image-wrapper { padding: 1rem; - margin-bottom: 0.250rem; margin-bottom: 0; - @include aspect-ratio(1, 1); + aspect-ratio: 1 / 1; height: auto; flex: 0 0 auto; + position: relative; + + > * { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } } .awards { diff --git a/src/Resources/app/storefront/src/scss/base.scss b/src/Resources/app/storefront/src/scss/base.scss index 16f9682..c748316 100644 --- a/src/Resources/app/storefront/src/scss/base.scss +++ b/src/Resources/app/storefront/src/scss/base.scss @@ -19,9 +19,8 @@ strong { .head-hero { position: relative; - @include aspect-ratio(2500, 625, true); + aspect-ratio: 2500 / 625; background: url("../assets/layout/header_bg.jpg") 50% 50% no-repeat; - -webkit-background-size: cover; background-size: cover; min-height: 200px; } @@ -66,7 +65,7 @@ strong { } .head-base-logo { - @include aspect-ratio(1, 1); + aspect-ratio: 1 / 1; z-index: 0; position: absolute; left: 50%; @@ -89,6 +88,11 @@ strong { display: flex; align-items: center; justify-content: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } img {