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

Fix style for offers UI

Browse Source
This commit is contained in:
nezumi
2023-07-25 09:26:48 +07:00
parent 9d8c747f0a
commit a82faf709e
5 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/styles/abstracts/_mixins.scss
+5 -1
View File
@@ -15,12 +15,16 @@
}
@mixin flex-container(
$flex: false,
$justify-content: null,
$flex-direction: null,
$align-items: null,
$gap: null
) {
display: flex;
@if $flex != false {
display: flex;
}
@if $justify-content != null {
justify-content: $justify-content;
}
practice/practice-02/src/styles/components/_card-item.scss
+7 -7
View File
@@ -1,5 +1,5 @@
.card-item {
@include flex-container($align-items: center, $flex-direction: column);
@include flex-container(true, $align-items: center, $flex-direction: column);
@include size(auto, 516px);
position: relative;
@@ -12,7 +12,7 @@
}
.price {
@include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
@include setAbsoluteAndLocation(true, $top: 176px, $right: 70px);
@include size(52px, 52px);
color: $white;
@@ -27,11 +27,11 @@
.content-card {
@include setAbsoluteAndLocation(true, $bottom: 60px);
@include size(100%, auto);
@include flex-container($align-items: center, $flex-direction: column);
@include flex-container(true, $align-items: center, $flex-direction: column);
}
.rate {
@include flex-container($align-items: center, $gap: 10px);
@include flex-container(true, $align-items: center, $gap: 10px);
}
.avatar-container {
@@ -40,17 +40,17 @@
}
.avatar {
&-1 {
&-0 {
@include setAbsoluteAndLocation(true, $left: 38px);
z-index: 2;
}
&-2 {
&-1 {
@include setAbsoluteAndLocation(true, $left: 19px);
z-index: 1;
}
&-3 {
&-2 {
@include setAbsoluteAndLocation(true, $left: 0);
}
}
practice/practice-02/src/styles/layouts/_header.scss
+2 -2
View File
@@ -11,7 +11,7 @@
}
.header-container {
@include flex-container(space-between, $align-items: center);
@include flex-container(true, space-between, $align-items: center);
position: relative;
max-width: 428px;
@@ -21,7 +21,7 @@
}
.header-content {
@include flex-container(space-between);
@include flex-container(true, space-between);
}
@media screen and (min-width: 840px) {
practice/practice-02/src/styles/layouts/_navbar.scss
+1 -1
View File
@@ -53,7 +53,7 @@
.nav-list {
@include size(auto, auto);
@include flex-container(space-between, column);
@include flex-container(true, space-between, column);
position: unset;
flex-direction: row;
practice/practice-02/src/styles/layouts/_offer.scss
+9 -12
View File
@@ -4,7 +4,11 @@
margin-inline: auto;
&__container {
@include flex-container($justify-content: center, $flex-direction: column);
@include flex-container(
true,
$justify-content: center,
$flex-direction: column
);
max-width: 380px;
margin: auto;
@@ -36,10 +40,11 @@
}
&__card-list {
display: grid;
@include flex-container(true, $gap: 70px);
padding-inline: 35px;
flex-wrap: nowrap;
padding-top: 65px;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
@@ -72,14 +77,6 @@
flex-wrap: wrap;
}
}
.price {
@include setAbsoluteAndLocation($top: 176px, $right: 70px);
}
.food-image {
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
}
}
@media screen and (min-width: 1200px) {