nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 13:38:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Seperate the card item from offers section style

Browse Source
This commit is contained in:
nezumi
2023-07-24 08:33:43 +07:00
parent 7bf75bde3c
commit 488ff7d4e2
3 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/styles/components/_card-item.scss
+84
View File
@@ -0,0 +1,84 @@
.card-item {
@include flex-container($align-items: center, $flex-direction: column);
@include size(auto, 516px);
position: relative;
}
.food-image {
@include setAbsoluteAndLocation(true, $top: 29px);
margin: auto;
}
.price {
@include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
@include size(52px, 52px);
color: $white;
border: 4px solid $white;
border-radius: 50px;
background-color: $secondary-color;
font-size: $fs-md;
text-align: center;
line-height: 50px;
}
.content-card {
@include setAbsoluteAndLocation(true, $bottom: 60px);
@include size(100%, auto);
@include flex-container($align-items: center, $flex-direction: column);
}
.rate {
@include flex-container($align-items: center, $gap: 10px);
}
.avatar-container {
position: relative;
@include size(74px, 38px);
}
.avatar {
&-1 {
@include setAbsoluteAndLocation(true, $left: 38px);
z-index: 2;
}
&-2 {
@include setAbsoluteAndLocation(true, $left: 19px);
z-index: 1;
}
&-3 {
@include setAbsoluteAndLocation(true, $left: 0);
}
}
.food-name {
margin-top: 30px;
color: $primary-color;
font-size: $fs-lg;
font-weight: 600;
}
.food-description {
@include size(100%, auto);
max-width: 243px;
margin-top: 16px;
text-align: center;
text-transform: capitalize;
color: $black;
}
.order-btn {
@include setAbsoluteAndLocation(true, $bottom: 0px);
padding: 10px 20px;
text-transform: capitalize;
&:hover {
background-color: $secondary-color;
}
}
practice/practice-02/src/styles/layouts/_offer.scss
+7 -92
View File
@@ -48,91 +48,6 @@
} }
} }
&__card-item {
@include flex-container($align-items: center, $flex-direction: column);
@include size(auto, 516px);
position: relative;
}
&__food-image {
@include setAbsoluteAndLocation(true, $top: 29px);
margin: auto;
}
&__price {
@include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
@include size(52px, 52px);
color: $white;
border: 4px solid $white;
border-radius: 50px;
background-color: $secondary-color;
font-size: $fs-md;
text-align: center;
line-height: 50px;
}
&__content-card {
@include setAbsoluteAndLocation(true, $bottom: 60px);
@include size(100%, auto);
@include flex-container($align-items: center, $flex-direction: column);
}
&__rate {
@include flex-container($align-items: center, $gap: 10px);
}
&__avatar-container {
position: relative;
@include size(74px, 38px);
}
&__avatar {
&-1 {
@include setAbsoluteAndLocation(true, $left: 38px);
z-index: 2;
}
&-2 {
@include setAbsoluteAndLocation(true, $left: 19px);
z-index: 1;
}
&-3 {
@include setAbsoluteAndLocation(true, $left: 0);
}
}
&__food-name {
margin-top: 30px;
color: $primary-color;
font-size: $fs-lg;
font-weight: 600;
}
&__food-description {
@include size(100%, auto);
max-width: 243px;
margin-top: 16px;
text-align: center;
text-transform: capitalize;
color: $black;
}
&__order-btn {
@include setAbsoluteAndLocation(true, $bottom: 0px);
padding: 10px 20px;
text-transform: capitalize;
&:hover {
background-color: $secondary-color;
}
}
&__rosemary-container { &__rosemary-container {
@include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0); @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
z-index: 0; z-index: 0;
@@ -147,10 +62,6 @@
max-width: $max-width; max-width: $max-width;
} }
&__food-image {
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
}
&__card-list { &__card-list {
@include flex-container( @include flex-container(
$align-items: center, $align-items: center,
@@ -160,10 +71,14 @@
row-gap: 30px; row-gap: 30px;
flex-wrap: wrap; flex-wrap: wrap;
} }
}
&__price { .price {
@include setAbsoluteAndLocation($top: 176px, $right: 70px); @include setAbsoluteAndLocation($top: 176px, $right: 70px);
} }
.food-image {
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
} }
} }
practice/practice-02/src/styles/main.scss
+1
View File
@@ -11,6 +11,7 @@
@import "./components/button"; @import "./components/button";
@import "./components/toggle-menu"; @import "./components/toggle-menu";
@import "./components/logo"; @import "./components/logo";
@import "./components/card-item";
// Layouts // Layouts
@import "./layouts/navbar"; @import "./layouts/navbar";