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

Move styles to SCSS file

Browse source 
Rename components
Add Loader
This commit is contained in:
Michał Gdula 2024-04-22 19:29:20 +01:00
parent 12a33388f6
commit 4e6b2799f6
15 changed files with 282 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

17
front/src/styles/_announcement_banner.scss Normal file
View file

@ -0,0 +1,17 @@
.announcement-banner {
height: 400px;
background-color: $color-light;
padding: 10px;
border: 1px solid $color-dark;
border-radius: 5px;
position: relative;
overflow: hidden;
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
}

103
front/src/styles/_loading_bar.scss Normal file
View file

@ -0,0 +1,103 @@
.loader {
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 4px;
border-radius: 999px;
overflow: hidden;
animation: start .3s ease-in;
&.bottom {
top: unset;
bottom: 2px
}
.bar {
position: absolute;
background-color: $color-primary;
transition: transform .2s linear;
left: 0;
top: 0;
bottom: 0;
border-radius: 999px;
width: 100%;
&.bar-1 {
animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
}
&.bar-2 {
animation: growBar2 2.5s infinite, moveBar2 2.5s infinite;
}
}
}
@keyframes growBar1 {
0% {
animation-timing-function: linear;
transform: scaleX(0.1);
}
36.6% {
animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
transform: scaleX(0.1);
}
69.15% {
animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
transform: scaleX(0.83);
}
100% {
transform: scaleX(0.1);
}
}
@keyframes moveBar1 {
0% {
left: -105.16667%;
animation-timing-function: linear;
}
20% {
left: -105.16667%;
animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
}
69.15% {
left: 21.5%;
animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
}
100% {
left: 95.44444%;
}
}
@keyframes growBar2 {
0% {
animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397);
transform: scaleX(0.1);
}
19.15% {
animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
transform: scaleX(0.57);
}
44.15% {
animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
transform: scaleX(0.91);
}
100% {
transform: scaleX(0.1);
}
}
@keyframes moveBar2 {
0% {
left: -54.88889%;
animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
}
25% {
left: -17.25%;
animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
}
48.35% {
left: 29.5%;
animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
}
100% {
left: 117.38889%;
}
}

41
front/src/styles/_navigation_bar.scss Normal file
View file

@ -0,0 +1,41 @@
nav {
width: 100%;
height: 55px;
display: flex;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
padding: 1rem;
background-color: $color-dark;
color: $color-light;
z-index: 9999999;
ul {
width: 300px;
padding: 0;
margin: 0;
display: flex;
list-style: none;
li {
margin: 0 1rem;
a {
color: inherit;
.active {
color: $color-primary !important;
}
}
}
}
span {
margin: 0 1rem;
font-weight: bolder;
font-size: 25px;
}
&.scrolled {
box-shadow: 0 0 10px 1px $color-dark;
}
}

14
front/src/styles/_reset.scss Normal file
View file

@ -0,0 +1,14 @@
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
body, #app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
body {
background-color: $color-light;
}

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

@ -1,9 +1,8 @@
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
body, #app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
$color-primary: #6A9343;
$color-dark: #443023;
$color-light: #fffbf4; // #ccc2ae;
@import "reset";
@import "loading_bar";
@import "navigation_bar";
@import "announcement_banner";