diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug index f6e01ac..4b47151 100644 --- a/practice/practice-02/src/includes/mixins.pug +++ b/practice/practice-02/src/includes/mixins.pug @@ -8,11 +8,7 @@ mixin foodItemCard(food) .avatar-container if food.avatarImageList && food.avatarImageList.length > 0 each avatar, index in food.avatarImageList - img( - src=avatar.avatarUrl, - alt="Avatar user rate", - class="avatar-" + index - ) + img.avatar(src=avatar.avatarUrl, alt="Avatar user rate") .star-container img(src=offer_img_path + "star.png", alt="Star image") span.rate-point= "(" + food.ratePoint + ")" diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss index 9771080..ea14f18 100644 --- a/practice/practice-02/src/styles/abstracts/_mixins.scss +++ b/practice/practice-02/src/styles/abstracts/_mixins.scss @@ -52,7 +52,7 @@ } } -@mixin setAbsoluteAndLocation( +@mixin set-absolute-and-location( $absolute: false, $top: null, $left: null, diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss index a60ea48..899d44f 100644 --- a/practice/practice-02/src/styles/components/_card-item.scss +++ b/practice/practice-02/src/styles/components/_card-item.scss @@ -6,13 +6,13 @@ } .food-image { - @include setAbsoluteAndLocation(true, $top: 29px); + @include set-absolute-and-location(true, $top: 29px); margin: auto; } .price { - @include setAbsoluteAndLocation(true, $top: 176px, $right: 70px); + @include set-absolute-and-location(true, $top: 176px, $right: 70px); @include size(52px, 52px); color: $white; @@ -25,7 +25,7 @@ } .content-card { - @include setAbsoluteAndLocation(true, $bottom: 60px); + @include set-absolute-and-location(true, $bottom: 60px); @include size(100%, auto); @include flex-container(true, $align-items: center, $flex-direction: column); } @@ -35,23 +35,26 @@ } .avatar-container { - position: relative; @include size(74px, 38px); + + position: relative; } .avatar { - &-0 { - @include setAbsoluteAndLocation(true, $left: 38px); + &:first-child { + @include set-absolute-and-location(true, $left: 38px); + z-index: 2; } - &-1 { - @include setAbsoluteAndLocation(true, $left: 19px); + &:nth-child(2) { + @include set-absolute-and-location(true, $left: 19px); + z-index: 1; } - &-2 { - @include setAbsoluteAndLocation(true, $left: 0); + &:last-child { + @include set-absolute-and-location(true, $left: 0); } } @@ -73,7 +76,7 @@ } .order-btn { - @include setAbsoluteAndLocation(true, $bottom: 0px); + @include set-absolute-and-location(true, $bottom: 0px); padding: 10px 20px; text-transform: capitalize; diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 528e34d..7bf1d7c 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -1,5 +1,5 @@ .header { - @include setAbsoluteAndLocation( + @include set-absolute-and-location( $absolute: true, $top: 0, $right: 0, diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss index a797e66..f29aa7c 100644 --- a/practice/practice-02/src/styles/layouts/_offer.scss +++ b/practice/practice-02/src/styles/layouts/_offer.scss @@ -17,7 +17,7 @@ } &__dot-background { - @include setAbsoluteAndLocation(true, $top: 168px, $left: 0px); + @include set-absolute-and-location(true, $top: 168px, $left: 0px); display: none; } @@ -48,13 +48,15 @@ overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; + &::-webkit-scrollbar { display: none; } } &__rosemary-container { - @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0); + @include set-absolute-and-location(true, $bottom: -120px, $right: 0); + z-index: 0; } } @@ -73,6 +75,7 @@ $gap: 18px, $justify-content: center ); + row-gap: 30px; flex-wrap: wrap; } diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index c6fcf80..703312c 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -29,18 +29,26 @@ } &__lines-background { - @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0); + @include set-absolute-and-location($absolute: true, $top: -76px, $right: 0); @include size(187px, 430px); } &__arrow-img-up { - @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px); + @include set-absolute-and-location( + $absolute: true, + $top: -15px, + $right: 50px + ); @include size(43px, 215px); } &__mint-img { - @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0); + @include set-absolute-and-location( + $absolute: true, + $bottom: 100px, + $right: 0 + ); } // End banner @@ -59,7 +67,7 @@ } &__orange-img-wrapper { - @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px); + @include set-absolute-and-location($absolute: true, $top: 0, $right: 35px); } &__text-box { @@ -86,7 +94,7 @@ &__head-arrow-container { @include size(13px, 7.3px); - @include setAbsoluteAndLocation($absolute: true, $right: 107px); + @include set-absolute-and-location($absolute: true, $right: 107px); } &__heading { @@ -98,7 +106,7 @@ } &__underline-img-container { - @include setAbsoluteAndLocation( + @include set-absolute-and-location( $absolute: true, $bottom: -20px, $left: 0px @@ -241,13 +249,13 @@ } &__lines-background { - @include setAbsoluteAndLocation($top: -150px, $right: 0px); + @include set-absolute-and-location($top: -150px, $right: 0px); @include size(313px, 718px); } &__arrow-img-up { @include size(117px, 315px); - @include setAbsoluteAndLocation($top: -40px, $right: 5px); + @include set-absolute-and-location($top: -40px, $right: 5px); transition: 0.2s; } @@ -272,7 +280,7 @@ } &__orange-img-wrapper { - @include setAbsoluteAndLocation($top: 170px, $right: -50px); + @include set-absolute-and-location($top: 170px, $right: -50px); transition: 0.2s; } @@ -282,7 +290,7 @@ } &__underline-img-container { - @include setAbsoluteAndLocation($bottom: -25px, $left: 8px); + @include set-absolute-and-location($bottom: -25px, $left: 8px); } &__description { @@ -302,7 +310,7 @@ } &__arrow-down-img-wrapper { - @include setAbsoluteAndLocation( + @include set-absolute-and-location( $absolute: true, $top: -50px, $left: 220px @@ -318,7 +326,7 @@ &__slider-container { display: block; - @include setAbsoluteAndLocation( + @include set-absolute-and-location( $absolute: true, $bottom: -135px, $left: 65px @@ -336,15 +344,15 @@ } &__arrow-img-up { - @include setAbsoluteAndLocation($top: 8px, $right: 62px); + @include set-absolute-and-location($top: 8px, $right: 62px); } &__orange-img-wrapper { - @include setAbsoluteAndLocation($top: 110px, $right: -50px); + @include set-absolute-and-location($top: 110px, $right: -50px); } &__arrow-down-img-wrapper { - @include setAbsoluteAndLocation($top: -75px, $left: 230px); + @include set-absolute-and-location($top: -75px, $left: 230px); } } }