nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-23 04:09:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix naming variable, structure and create placeholder file

Browse Source
This commit is contained in:
nezumi
2023-08-23 10:32:45 +07:00
parent dafb4c9060
commit cda4735ac3
7 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/pages/login.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
javascript-practice/src/styles/_main.scss
+4
View File
@@ -4,9 +4,13 @@
// Bases // Bases
@import './bases/base'; @import './bases/base';
@import './bases/placeholder';
@import './bases/reset'; @import './bases/reset';
@import './bases/typography'; @import './bases/typography';
// Components
@import './components/loader';
// Layouts // Layouts
@import './layouts/header'; @import './layouts/header';
@import './layouts/nav'; @import './layouts/nav';
javascript-practice/src/styles/abstracts/_variables.scss
+1 -1
View File
@@ -9,7 +9,7 @@ $secondary-text-color: #0000008a;
$secondary-light-text-color: #00000042; $secondary-light-text-color: #00000042;
$receive-money-color: #e51c23; $receive-money-color: #e51c23;
$deducted-money-color: #039be5; $deducted-money-color: #039be5;
$color-background-input: #f5f5f5; $background-input-color: #f5f5f5;
$gray: #dddddd; $gray: #dddddd;
$white: #ffffff; $white: #ffffff;
javascript-practice/src/styles/bases/_base.scss
+1 -45
View File
@@ -1,45 +1 @@
%margin-inline-auto { // TODO
margin-inline: auto;
}
%rounded {
border-radius: 10px;
}
.loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #00000066;
z-index: 1;
transition: opacity 0.75s, visibility 0.75s;
&--hidden {
opacity: 0;
visibility: hidden;
}
&::after {
content: '';
width: 75px;
height: 75px;
border: 10px solid $gray;
border-top-color: $primary-color;
border-radius: 50%;
animation: loading 0.75s ease infinite;
}
}
@keyframes loading {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
javascript-practice/src/styles/bases/_placeholder.scss
+7
View File
@@ -0,0 +1,7 @@
%margin-inline-auto {
margin-inline: auto;
}
%rounded {
border-radius: 10px;
}
javascript-practice/src/styles/components/_loader.scss
+39
View File
@@ -0,0 +1,39 @@
.loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #00000066;
z-index: 1;
transition:
opacity 0.75s,
visibility 0.75s;
&--hidden {
opacity: 0;
visibility: hidden;
}
&::after {
content: '';
width: 75px;
height: 75px;
border: 10px solid $gray;
border-top-color: $primary-color;
border-radius: 50%;
animation: loading 0.75s ease infinite;
}
}
@keyframes loading {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
javascript-practice/src/styles/pages/_login-register.scss
+2 -2
View File
@@ -55,8 +55,8 @@
font-size: $fs-md; font-size: $fs-md;
height: 52px; height: 52px;
border: 2px solid $color-background-input; border: 2px solid $background-input-color;
background-color: $color-background-input; background-color: $background-input-color;
padding-inline: 14px; padding-inline: 14px;
} }