From 488ff7d4e21d53f8a59c99b3a0c00c18bce47165 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Mon, 24 Jul 2023 08:33:43 +0700
Subject: [PATCH] Seperate the card item from offers section style

---
 .../src/styles/components/_card-item.scss     | 84 ++++++++++++++++
 .../src/styles/layouts/_offer.scss            | 99 ++-----------------
 practice/practice-02/src/styles/main.scss     |  1 +
 3 files changed, 92 insertions(+), 92 deletions(-)
 create mode 100644 practice/practice-02/src/styles/components/_card-item.scss

diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
new file mode 100644
index 0000000..2c99b45
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -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;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index d8a86cb..797bd3d 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -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 {
     @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
     z-index: 0;
@@ -147,10 +62,6 @@
       max-width: $max-width;
     }
 
-    &__food-image {
-      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-    }
-
     &__card-list {
       @include flex-container(
         $align-items: center,
@@ -160,10 +71,14 @@
       row-gap: 30px;
       flex-wrap: wrap;
     }
+  }
 
-    &__price {
-      @include setAbsoluteAndLocation($top: 176px, $right: 70px);
-    }
+  .price {
+    @include setAbsoluteAndLocation($top: 176px, $right: 70px);
+  }
+
+  .food-image {
+    @include setAbsoluteAndLocation($top: 29px, $right: 55px);
   }
 }
 
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 63c2ab3..941a339 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -11,6 +11,7 @@
 @import "./components/button";
 @import "./components/toggle-menu";
 @import "./components/logo";
+@import "./components/card-item";
 
 // Layouts
 @import "./layouts/navbar";