Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-05 09:53:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add MenuItem design

Browse source 
Clean up SCSS styles
This commit is contained in:
Michał Gdula 2024-04-23 16:41:05 +01:00
parent 4e6b2799f6
commit b56c3cc46d
13 changed files with 288 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

9
front/src/styles/_announcement_banner.scss
View file

@ -1,9 +1,12 @@
.announcement-banner {
padding: $spacing-large;
height: 400px;
background-color: $color-light;
padding: 10px;
border: 1px solid $color-dark;
border-radius: 5px;
color: $color-on-light;
//border: 1px solid $color-dark;
border-radius: $border-radius-normal;
position: relative;
overflow: hidden;

120
front/src/styles/_menu_item.scss Normal file
View file

@ -0,0 +1,120 @@
.menu-item {
padding: $spacing-normal;
width: 200px;
height: 200px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: $border-radius-large;
background-color: $color-dark;
overflow: hidden;
}
.menu-item-image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
z-index: 1;
}
.menu-item-header {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 2;
> ul {
padding: 0 0 0 $spacing-normal;
display: flex;
flex-direction: row;
> li {
margin: 0 0 0 -15px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: $border-radius-circle;
background-color: $color-dark;
color: $color-on-dark;
list-style: none;
&.vegan {
background-color: $color-vegan;
}
&.fish {
background-color: $color-fish;
}
&.nut {
background-color: $color-nut;
}
&.spicy {
background-color: $color-spicy;
}
}
}
> a {
padding-left: 10px;
padding-right: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 14px;
border-radius: $border-radius-circle;
background-color: $color-dark;
color: $color-on-dark;
&:hover {
background-color: $color-light;
color: $color-on-light;
}
}
}
.menu-item-detail {
margin: -$spacing-normal;
padding: $spacing-normal;
position: relative;
display: flex;
flex-direction: column;
font-weight: 800;
background-image: linear-gradient(0deg, $color-dark, rgba($color-dark, 0));
color: $color-light;
z-index: 2;
> li {
list-style: none;
}
}

20
front/src/styles/_navigation_bar.scss
View file

@ -1,13 +1,18 @@
nav {
padding: 1rem;
width: 100%;
height: 55px;
height: $sizing-navigation-height;
display: flex;
flex-direction: row;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
padding: 1rem;
background-color: $color-dark;
color: $color-light;
z-index: 9999999;
@ -20,11 +25,14 @@ nav {
list-style: none;
li {
margin: 0 1rem;
a {
text-decoration: none;
color: inherit;
.active {
color: $color-primary !important;
}
}
&.active {
color: $color-primary !important;
}
}
}
@ -36,6 +44,6 @@ nav {
}
&.scrolled {
box-shadow: 0 0 10px 1px $color-dark;
//box-shadow: 0 0 10px 1px $color-dark;
}
}

20
front/src/styles/_reset.scss
View file

@ -1,5 +1,7 @@
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Erode', serif;
font-weight: 600;
margin: 0;
}
@ -10,5 +12,21 @@ body, #app {
}
body {
background-color: $color-light;
background-color: $color-background;
}
main {
margin-left: auto;
margin-right: auto;
padding: $spacing-normal;
width: 100%;
max-width: $sizing-default-width;
position: relative;
flex-grow: 1;
&.nav-space {
margin-top: $sizing-navigation-height;
}
}

31
front/src/styles/main.scss
View file

@ -1,8 +1,35 @@
$color-primary: #6A9343;
// COLORS
$color-background: #e8e1ce; // #ccc2ae;
$color-on-background: #33251a;
$color-dark: #443023;
$color-light: #fffbf4; // #ccc2ae;
$color-on-dark: #e1dcd3;
$color-light: #fffbf4;
$color-on-light: #33251a;
$color-primary: #6A9343;
$color-on-primary: #ccc2ae;
$color-vegan: #75a446;
$color-fish: #487fa6;
$color-nut: #5c4130;
$color-spicy: #c75e32;
// BORDERS
$border-radius-normal: 5px;
$border-radius-large: 10px;
$border-radius-circle: 99999px;
// SIZING
$sizing-default-width: 1000px;
$sizing-navigation-height: 55px;
// PADDING/MARGIN
$spacing-small: 14px;
$spacing-normal: 16px;
$spacing-large: 24px;
@import "reset";
@import "loading_bar";
@import "navigation_bar";
@import "announcement_banner";
@import "menu_item";