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

Init home page

Browse Source
This commit is contained in:
nezumi
2023-09-08 15:18:29 +07:00
parent 4662f94528
commit 6a56a8db6f
13 changed files with 1342 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/pages/index.html
+485 -3
View File
@@ -1,9 +1,491 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
<link rel="stylesheet" href="../styles/_main.scss" />
<title>Money Lover Web</title>
</head>
<body></body>
<body class="home-page">
<div class="overlay active"></div>
<div class="dark-overlay"></div>
<!-- <div class="modal-box success active">
<div class="mark check"></div>
<h2 class="modal-box__title">Login Success!</h2>
<p class="modal-box__message">Welcome to Money Lover!</p>
<button class="modal-box__redirect-btn">OK</button>
</div> -->
<!-- Add a wallet form -->
<div class="dialog active" id="walletForm">
<div class="dialog__add-wallet">
<!-- Dialog header -->
<div class="dialog__header">
<p class="dialog__title">Add a wallet first!</p>
</div>
<!-- Dialog body -->
<div class="dialog__body">
<form class="form">
<div class="form__input-field">
<p class="form__label">Wallet name</p>
<input
type="text"
class="form__input-text"
placeholder="Your wallet name?"
name="wallet-name"
/>
</div>
<div class="form__currency-balance">
<div class="form__input-field">
<p class="form__label">Currency</p>
<div class="form__wrap-text-icon">
<img
src="../assets/images/dollar-icon.svg"
alt="Dollar icon"
/>
<p class="form__text-currency">United States Dollar</p>
</div>
</div>
<div class="form__input-field">
<p class="form__label">Initial Balance</p>
<input type="number" class="form__input-balance" value="0" />
</div>
</div>
<button type="submit" class="form__save-btn">SAVE</button>
</form>
</div>
</div>
</div>
<!-- End form -->
<!-- Add budget form -->
<div class="dialog" id="budgetForm">
<div class="dialog__add-budget">
<!-- Header -->
<div class="dialog__header">
<p class="dialog__title">Add budget</p>
</div>
<!-- Body -->
<div class="dialog__body">
<form class="form" id="formAddBudget">
<div class="form__date-amount-input">
<div class="form__input-field">
<p class="form__label">Date</p>
<div class="date-input-container">
<input class="input-date" type="date" name="selected_date" />
<div class="icon-btn"></div>
</div>
</div>
<div class="form__input-field">
<p class="form__label">Amount</p>
<input
class="form__input-balance"
type="number"
name="date"
value="0"
/>
</div>
</div>
<div class="form__note-input">
<p class="form__label">Note</p>
<input
class="form__input-text"
type="text"
name="note"
placeholder="Note"
/>
</div>
<div class="form__action">
<button type="button" class="form__cancel-btn">CANCEL</button>
<button type="submit" class="form__save-btn">SAVE</button>
</div>
</form>
</div>
</div>
</div>
<!-- End form -->
<!-- Add, edit, delete transaction form -->
<div class="dialog" id="transactionForm">
<div class="dialog__add-transaction">
<!-- Header-->
<div class="dialog__header">
<p class="dialog__title">Add transaction</p>
<button type="button" class="form__delete-btn">DELETE</button>
</div>
<!-- Body -->
<div class="dialog__body">
<form class="form" id="formAddBudget">
<div class="form__date-category-amount-input">
<div class="form__input-field">
<p class="form__label">Date</p>
<div class="date-input-container">
<input class="input-date" type="date" name="selected_date" />
<span class="icon-btn"></span>
</div>
</div>
<div class="form__input-field" id="selectCategory">
<p class="form__label">Category</p>
<div class="category-input-container">
<img
src="../assets/images/question-icon.svg"
alt="Question icon"
/>
<p class="category-name">Select category</p>
<div class="icon-btn"></div>
</div>
</div>
<div class="form__input-field">
<p class="form__label">Amount</p>
<input
class="form__input-balance"
type="number"
name="date"
value="0"
/>
</div>
</div>
<div class="form__note-input">
<p class="form__label">Note</p>
<input
class="form__input-text"
type="text"
name="note"
placeholder="Note"
/>
</div>
<div class="form__action">
<button type="button" class="form__cancel-btn">CANCEL</button>
<button type="submit" class="form__save-btn">SAVE</button>
</div>
</form>
</div>
</div>
</div>
<!-- End form -->
<!-- Select category form -->
<div class="dialog" id="categoryForm">
<div class="dialog__select-category">
<div class="dialog__header">
<div class="dialog__title-container">
<div class="close-icon"></div>
<div class="dialog__title">Select category</div>
</div>
<form class="form">
<div class="form__search-container">
<input
type="text"
name="category"
class="form__category-input-field"
placeholder="Search"
/>
<button type="submit" class="form__search-btn">
<img src="../assets/images/icon-search.svg" alt="Search icon" />
</button>
</div>
</form>
</div>
<div class="dialog__body">
<div class="list-category">
<!-- Category item -->
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
<div class="category-item">
<img
class="icon-category"
src="../assets/images/ic_category_foodndrink.png.png"
alt="Food & Beverage Icon"
/>
<p class="name-category">Food & Beverage</p>
</div>
</div>
</div>
</div>
</div>
<!-- End form -->
<!-- Start header -->
<header class="header">
<div class="wrapper">
<div class="header__content">
<div class="header__left-content">
<div class="wallet">
<div class="wallet__icon">
<img src="../assets/images/icon.png" alt="Wallet Icon" />
</div>
<div class="wallet__info">
<p class="wallet__name">Nezumi</p>
<p class="wallet__price">+$ 499,900,900.00</p>
</div>
</div>
<button class="header__add-btn" id="addBudget">Add budget</button>
</div>
<button class="header__add-btn" id="addTransaction">
Add transaction
</button>
</div>
</div>
</header>
<!-- End header -->
<div class="background">
<!-- Main app -->
<main class="main">
<div class="app">
<div class="app__container">
<!-- Tabs -->
<div class="app__tabs">
<button class="app__tab-item active">SUMMARY</button>
<button class="app__tab-item">TRANSACTION DETAILS</button>
<div class="app__line"></div>
</div>
<!-- Start content app -->
<div class="app__contents">
<div class="app__content-item active">
<!-- Content summary -->
<div class="summary">
<div class="inflow">
<p class="inflow__text">Inflow</p>
<p class="inflow__text--income">+$ 500,000,000.00</p>
</div>
<div class="outflow">
<p class="outflow__text">Outflow</p>
<p class="outflow__text--outcome">-$ 100,000.00</p>
</div>
<div class="summary__line"></div>
<p class="summary__total">+$ 499,900,000.00</p>
</div>
<!-- End content summary -->
</div>
<div class="app__content-item">
<!-- Start content transaction -->
<div class="transaction">
<div class="transaction__list">
<!-- Transaction item -->
<!-- Outcome transaction -->
<div class="transaction__item">
<div class="transaction__category">
<div class="transaction__category-infor">
<div class="transaction__category-icon-container">
<img
src="../assets/images/ic_category_transport.png.png"
alt="Transportation icon category"
/>
</div>
<div class="transaction__category-content">
<p class="transaction__category-name">
Transportation
</p>
<p class="transaction__total">1 Transactions</p>
</div>
</div>
<p class="transaction__category-total">-$ 100,000.00</p>
</div>
<div class="transaction__line"></div>
<!-- Transaction time item -->
<div class="transaction__time">
<div class="transaction__details">
<p class="transaction__day">18</p>
<div class="transaction__time-details">
<p class="transaction__date-time">
Friday, August 2023
</p>
<p class="transaction__note">Test Note</p>
</div>
</div>
<p class="transaction__outcome">-$ 100,000.00</p>
</div>
</div>
<!-- Income transaction -->
<div class="transaction__item">
<div class="transaction__category">
<div class="transaction__category-infor">
<div class="transaction__category-icon-container">
<img
src="../assets/images/ic_category_other_income.png.png"
alt="Transportation icon category"
/>
</div>
<div class="transaction__category-content">
<p class="transaction__category-name">
Transportation
</p>
<p class="transaction__total">1 Transactions</p>
</div>
</div>
<p class="transaction__category-total">
+$ 500,000,000.00
</p>
</div>
<div class="transaction__line"></div>
<!-- Transaction time item -->
<div class="transaction__time">
<div class="transaction__details">
<p class="transaction__day">18</p>
<div class="transaction__time-details">
<p class="transaction__date-time">
Friday, August 2023
</p>
<p class="transaction__note">Initial Balance</p>
</div>
</div>
<p class="transaction__income">+$ 500,000,000.00</p>
</div>
</div>
</div>
</div>
<!-- End content transaction -->
</div>
</div>
<!-- End content app -->
</div>
</div>
</main>
<!-- End app -->
</div>
<!-- All scripts below is use for test purpose! -->
<script>
// Handle event when click on tabs
const tabs = document.querySelectorAll('.app__tab-item');
const all_content = document.querySelectorAll('.app__content-item');
tabs.forEach((tab, index) => {
tab.addEventListener('click', (e) => {
tabs.forEach((tab) => {
tab.classList.remove('active');
});
tab.classList.add('active');
const line = document.querySelector('.app__line');
line.style.width = e.target.offsetWidth + 'px';
line.style.left = e.target.offsetLeft + 'px';
all_content.forEach((content) => {
content.classList.remove('active');
});
all_content[index].classList.add('active');
});
});
// Add event
const addTransactionBtn = document.getElementById('addTransaction');
const addBudgetBtn = document.getElementById('addBudget');
const overlay = document.querySelector('.overlay');
const darkOverlay = document.querySelector('.dark-overlay');
const dialog = document.querySelectorAll('.dialog');
const cancelBtn = document.querySelectorAll('.form__cancel-btn');
const categoryField = document.getElementById('selectCategory');
const closeIcon = document.querySelector('.close-icon');
const budgetForm = document.getElementById('budgetForm');
const transactionForm = document.getElementById('transactionForm');
const categoryForm = document.getElementById('categoryForm');
overlay.addEventListener('click', () => {
overlay.classList.toggle('active');
dialog.forEach((item) => {
if (item.classList.contains('active')) {
item.classList.remove('active');
}
});
});
addTransactionBtn.addEventListener('click', () => {
transactionForm.classList.toggle('active');
overlay.classList.toggle('active');
});
addBudgetBtn.addEventListener('click', () => {
budgetForm.classList.toggle('active');
overlay.classList.toggle('active');
});
cancelBtn.forEach((item) => {
item.addEventListener('click', () => {
overlay.classList.toggle('active');
dialog.forEach((item) => {
if (item.classList.contains('active')) {
item.classList.remove('active');
}
});
});
});
categoryField.addEventListener('click', () => {
categoryForm.classList.add('active');
darkOverlay.classList.add('active');
});
closeIcon.addEventListener('click', () => {
categoryForm.classList.remove('active');
darkOverlay.classList.remove('active');
});
darkOverlay.addEventListener('click', () => {
darkOverlay.classList.remove('active');
categoryForm.classList.remove('active');
});
</script>
</body>
</html>
javascript-practice/src/pages/login.html
+1 -1
View File
@@ -6,7 +6,7 @@
<link rel="stylesheet" href="../styles/_main.scss" />
<title>Login - Money Lover</title>
</head>
<body>
<body class="login-page">
<main>
<div class="background">
<div class="wrapper">
javascript-practice/src/pages/register.html
+1 -1
View File
@@ -6,7 +6,7 @@
<link rel="stylesheet" href="../styles/_main.scss" />
<title>Register - Money Lover</title>
</head>
<body>
<body class="register-page">
<main>
<div class="background">
<div class="wrapper">
javascript-practice/src/styles/_main.scss
+2
View File
@@ -9,6 +9,7 @@
@import './bases/typography';
// Components
@import './components/dialog';
@import './components/icons';
@import './components/loader';
@import './components/popup-form';
@@ -19,3 +20,4 @@
// Pages
@import './pages/login-register';
@import './pages/index';
javascript-practice/src/styles/abstracts/_variables.scss
+7 -2
View File
@@ -1,19 +1,24 @@
$primary-font: 'Roboto';
// Color
$hover-light-primary-color: #cdecd3;
$light-primary-color: #00bc2a;
$primary-color: #2db84c;
$dark-primary-color: #00710f;
$primary-text-color: #000;
$secondary-text-color: #0000008a;
$secondary-light-text-color: #00000042;
$receive-money-color: #e51c23;
$deducted-money-color: #039be5;
$amount-outcome-color: #e51c23;
$amount-income-color: #039be5;
$background-input-color: #f5f5f5;
$dark-error-color: #ce1414;
$light-error-color: #ffc3c3;
$light-gray: #f4f4f4;
$gray: #dddddd;
$dark-gray: #00000042;
$dark-x-gray: #0000008a;
$white: #ffffff;
$black: #000000;
// Font size
$fs-2x-sm: 11px;
javascript-practice/src/styles/bases/_base.scss
+21
View File
@@ -1 +1,22 @@
// TODO
.overlay {
@extend %d-absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
opacity: 0;
pointer-events: none;
&.active {
@extend %active;
}
}
.dark-overlay {
@extend .overlay;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
javascript-practice/src/styles/bases/_placeholder.scss
+39 -1
View File
@@ -2,10 +2,22 @@
margin-inline: auto;
}
%rounded {
%rounded-x-lg {
border-radius: 50px;
}
%rounded-lg {
border-radius: 10px;
}
%rounded {
border-radius: 8px;
}
%rounded-sm {
border-radius: 4px;
}
%d-flex {
display: flex;
}
@@ -13,3 +25,29 @@
%d-absolute {
position: absolute;
}
%base-btn {
border: none;
background: $light-primary-color;
color: $white;
text-transform: uppercase;
}
%active {
opacity: 1;
pointer-events: auto;
}
%input-field {
@extend %rounded;
padding: 6px 16px 13.5px 16px;
border: 1px solid $gray;
}
%base-layout-item {
@extend %d-flex;
@include flex-layout($justify: space-between);
padding: 8 0px;
}
javascript-practice/src/styles/components/_dialog.scss
+23
View File
@@ -0,0 +1,23 @@
.dialog {
@extend %d-absolute, %rounded-sm;
left: 50%;
top: 32%;
transform: translate(-50%, -50%) scale(1);
background-color: $white;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
&__title {
font-size: $fs-x-lg;
font-weight: 500;
line-height: 20px;
}
&.active {
@extend %active;
}
}
javascript-practice/src/styles/components/_icons.scss
+28 -25
View File
@@ -30,29 +30,32 @@
transform: rotate(-45deg);
}
.error:before {
top: 6px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error:after {
top: 21px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
.error {
&:before {
top: 6px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&:after {
top: 21px;
left: 13px;
height: 10px;
width: 10px;
border: solid #c0392b;
border-width: 0 0 4px 4px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
javascript-practice/src/styles/components/_loader.scss
+5 -5
View File
@@ -22,6 +22,11 @@
border-radius: 50%;
animation: loading 0.75s ease infinite;
}
&.hidden {
opacity: 0;
visibility: hidden;
}
}
@keyframes loading {
@@ -32,8 +37,3 @@
transform: rotate(1turn);
}
}
.hidden {
opacity: 0;
visibility: hidden;
}
javascript-practice/src/styles/components/_popup-form.scss
+4 -15
View File
@@ -1,14 +1,3 @@
.overlay {
@extend %d-absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
opacity: 0;
pointer-events: none;
}
.modal-box {
@extend %d-flex;
@extend %d-absolute;
@@ -43,11 +32,11 @@
padding: 15px 30px;
cursor: pointer;
}
}
.active {
opacity: 1;
pointer-events: auto;
&.active {
opacity: 1;
pointer-events: auto;
}
}
.success .modal-box__redirect-btn {
javascript-practice/src/styles/pages/_index.scss
+647
View File
@@ -0,0 +1,647 @@
.home-page {
.background {
height: 100vh;
background: $gray;
}
.wrapper {
max-width: 1920px;
margin-inline: auto;
}
.main {
padding-top: 96px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: $white;
&__content {
@extend %d-flex;
@include flex-layout($justify: space-between, $align: center);
padding: 12px 8px;
}
&__left-content {
@extend %d-flex;
@include flex-layout($align: center, $gap: 12px);
}
&__add-btn {
@extend %base-btn, %rounded-sm;
height: 32px;
padding-inline: 12px;
font-weight: 500;
line-height: 16px;
transition: 0.2s;
cursor: pointer;
&:hover {
background: $dark-primary-color;
}
}
}
.wallet {
@extend %d-flex;
@include flex-layout($align: center, $gap: 8px);
min-width: 170px;
&__icon {
width: 40px;
height: 41px;
}
&__name {
font-size: $fs-x-sm;
line-height: 21px;
}
&__price {
line-height: 18px;
font-weight: 700;
}
}
.app {
border-radius: 4px;
background: $white;
box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.12);
margin-inline: auto;
width: 624px;
&__tabs {
padding-top: 20px;
text-align: center;
border-bottom: 1px solid $gray;
position: relative;
}
&__tab-item {
font-weight: 500;
color: $dark-x-gray;
background: none;
border: none;
padding: 15px 23.62px;
cursor: pointer;
&.active {
color: $primary-color;
}
}
&__content-item {
display: none;
animation: fade 0.5s ease;
&.active {
display: block;
}
}
&__line {
position: absolute;
top: 66px;
left: 150px;
width: 115px;
height: 2px;
background-color: $primary-color;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
}
.summary {
@extend %d-flex;
@include flex-layout($direction: column);
padding: 10px 16px 40px;
text-align: right;
&__line {
width: 150px;
height: 1px;
background-color: $gray;
align-self: flex-end;
}
&__total {
margin-top: 5px;
font-size: $fs-md;
line-height: 16px;
}
}
.inflow {
@extend %base-layout-item;
&__text {
line-height: 16px;
&--income {
font-size: $fs-md;
color: $amount-income-color;
}
}
}
.outflow {
@extend %base-layout-item;
&__text {
line-height: 16px;
&--outcome {
font-size: $fs-md;
color: $amount-outcome-color;
}
}
}
.transaction {
background: $light-gray;
&__line {
width: 100%;
height: 1px;
background-color: $gray;
}
&__list {
@extend %d-flex;
@include flex-layout(
$justify: space-between,
$gap: 32px,
$direction: column
);
}
&__item {
background-color: $white;
}
&__category {
@extend %d-flex;
@include flex-layout($justify: space-between, $align: center);
padding: 16px;
&-infor {
@extend %d-flex;
@include flex-layout($align: center, $gap: 9px);
}
&-icon-container {
width: 40px;
height: 40px;
}
&-name {
font-weight: 500;
line-height: 20px;
}
&-total {
font-size: $fs-lg;
line-height: 15px;
}
}
&__total {
font-size: $fs-x-sm;
color: $dark-x-gray;
line-height: 16px;
}
&__time {
@extend %d-flex;
@include flex-layout($justify: space-between, $align: center);
padding: 16px;
}
&__details {
@extend %d-flex;
@include flex-layout($justify: space-between, $align: center, $gap: 12px);
}
&__day {
font-size: $fs-2x-lg;
line-height: 16px;
font-weight: 300;
}
&__date-time {
font-size: $fs-2x-sm;
line-height: 15px;
text-transform: capitalize;
}
&__note {
@extend .transaction__date-time;
color: $dark-gray;
}
&__outcome {
color: $amount-outcome-color;
}
&__income {
color: $amount-income-color;
}
}
.dialog {
// Add wallet dialog
&__add-wallet {
.dialog {
&__body {
padding: 17px 24px;
}
&__header {
border-bottom: 1px solid $gray;
}
&__title {
padding: 20px 24px 24px 24px;
}
}
.form {
&__save-btn {
margin-top: 31px;
align-self: flex-end;
}
&__currency-balance {
@extend %d-flex;
@include flex-layout($justify: space-between, $gap: 20px);
margin-top: 16px;
}
&__wrap-text-icon {
@extend %d-flex;
@include flex-layout($gap: 16px, $align: center);
margin-top: 6px;
width: 230px;
}
&__text-currency {
font-size: $fs-md;
line-height: 24px;
}
}
}
// Add budget dialog
&__add-budget {
.dialog {
&__body {
padding: 24px 40px 0;
}
&__title {
padding: 20px 40px;
}
}
.form {
&__date-amount-input {
@extend %d-flex;
@include flex-layout($gap: 32px);
& .form__input-field:first-child {
width: 208px;
}
& .form__input-field:last-child {
width: 240px;
}
}
&__note-input {
@extend %input-field;
width: 768px;
margin-top: 24px;
}
&__input-text {
width: 100%;
}
&__cancel-btn {
width: 96px;
height: 36px;
}
&__save-btn {
width: 96px;
height: 36px;
}
}
}
// Add transaction dialog
&__add-transaction {
.dialog {
&__header {
@extend %d-flex;
@include flex-layout($justify: space-between, $align: center);
padding: 20px 40px;
}
&__body {
padding: 24px 40px 0;
}
}
.form {
&__date-category-amount-input {
@extend %d-flex;
@include flex-layout($justify: space-between, $gap: 24px);
}
&__input-field:first-child {
width: 255px;
}
&__input-field:nth-child(2),
&__input-field:nth-child(3) {
width: 240px;
}
&__note-input {
@extend %input-field;
margin-top: 24px;
}
&__save-btn {
width: 96px;
height: 36px;
}
}
}
// Select category dialog
&__select-category {
.dialog {
&__header {
padding-top: 15px;
position: relative;
border-bottom: 1px solid $gray;
}
&__title-container {
@extend %d-flex;
@include flex-layout($align: center, $gap: 28px);
padding-left: 24px;
}
&__title {
font-weight: 400;
}
}
.form {
padding: 10px 144px;
&__search-container {
@extend %d-flex, %rounded-x-lg;
@include flex-layout(
$justify: flex-end,
$gap: 16px,
$direction: row-reverse,
$align: center
);
padding-inline: 16px;
width: 208px;
height: 51px;
background-color: $light-gray;
}
&__category-input-field {
border: none;
background-color: transparent;
&:focus {
outline: none;
}
}
&__search-btn {
cursor: pointer;
border: none;
background-color: transparent;
}
}
}
}
// Common property
.form {
@extend %d-flex;
@include flex-layout($direction: column);
&__input-field {
@extend %rounded;
padding: 6px 16px 13.5px 16px;
border: 1px solid $gray;
}
&__label {
color: $dark-x-gray;
font-size: $fs-x-sm;
line-height: 18px;
}
&__input-text {
margin-top: 7px;
font-size: $fs-lg;
width: 100%;
border: none;
&:focus {
outline: none;
}
&::placeholder {
color: $gray;
}
}
&__input-balance {
font-size: $fs-md;
line-height: 20px;
margin-top: 6px;
border: none;
width: 100%;
&:focus {
outline: none;
}
}
&__save-btn {
@extend %rounded-sm;
border: none;
background-color: $gray;
line-height: 16.1px;
font-weight: 500;
padding: 10px 20px;
color: $dark-gray;
cursor: pointer;
&.active {
background-color: $primary-color;
color: $white;
}
}
&__cancel-btn {
@extend .form__save-btn;
color: $primary-color !important;
margin-right: 16px;
transition: 0.3s;
&:hover {
background-color: $hover-light-primary-color;
}
}
&__delete-btn {
@extend .form__save-btn;
color: $dark-error-color !important;
transition: 0.3s;
&:hover {
background-color: $light-error-color;
}
}
&__action {
align-self: flex-end;
margin-top: 64px;
padding: 14px 0;
}
}
.date-input-container {
position: relative;
float: left;
width: 100%;
}
.input-date {
height: 30px;
width: 100%;
border: none;
font-size: $fs-lg;
&:focus {
outline: none;
}
&::-webkit-calendar-picker-indicator {
background: transparent;
cursor: pointer;
}
}
.icon-btn {
position: absolute;
top: 10px;
right: 5px;
background-color: $white;
border-top: 3px solid $dark-gray;
border-right: 3px solid $dark-gray;
border-bottom: none;
border-left: none;
height: 7px;
width: 7px;
rotate: 45deg;
pointer-events: none;
}
.category-input-container {
@extend %d-flex;
@include flex-layout($align: center, $gap: 8px);
position: relative;
margin-top: 4px;
cursor: pointer;
}
.category-name {
font-size: $fs-lg;
line-height: 25.5px;
color: $dark-gray;
}
.list-category {
@extend %d-flex;
@include flex-layout($direction: column);
padding-top: 5px;
height: 451px;
overflow: auto;
}
.category-item {
@extend %d-flex;
@include flex-layout($align: center, $gap: 16px);
margin-inline: 68px;
padding: 8px 0;
border-bottom: 1px solid $gray;
}
}
.close-icon {
@extend .error, .mark;
border: none;
cursor: pointer;
&::after,
&::before {
border-color: $black;
border-width: 0 0 2px 2px;
}
}
.hide {
opacity: 0;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#categoryForm {
z-index: 4;
}
javascript-practice/src/styles/pages/_login-register.scss
+79 -79
View File
@@ -1,90 +1,90 @@
.background {
height: 100vh;
background: linear-gradient($dark-primary-color 314px, #ebebeb -100%);
}
.login-page,
.register-page {
.background {
height: 100vh;
background: linear-gradient($dark-primary-color 314px, #ebebeb -100%);
}
.wrapper {
@extend %margin-inline-auto;
@extend %d-absolute;
.wrapper {
@extend %margin-inline-auto;
@extend %d-absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
}
top: 0;
left: 0;
right: 0;
text-align: center;
}
.logo-web {
padding-top: 54px;
}
.logo-web {
padding-top: 54px;
}
.form {
@extend %margin-inline-auto;
margin-top: 34px;
padding-top: 34px;
padding-bottom: 40px;
background-color: $white;
width: 670px;
border-radius: 20px;
&__container {
.form {
@extend %margin-inline-auto;
display: flex;
flex-direction: column;
gap: 19px;
width: 280px;
margin-top: 34px;
padding-top: 34px;
padding-bottom: 40px;
background-color: $white;
width: 670px;
border-radius: 20px;
&__container {
@extend %margin-inline-auto;
display: flex;
flex-direction: column;
gap: 19px;
width: 280px;
}
&__title {
color: $primary-text-color;
font-size: $fs-2x-lg;
font-weight: 700;
line-height: 48px;
}
&__error-message {
font-size: $fs-md;
background-color: $light-error-color;
color: $dark-error-color;
padding: 15px 15px;
border-radius: 10px;
line-height: 22px;
}
&__description {
margin-top: 15px;
color: $secondary-text-color;
font-size: $fs-md;
line-height: 24px;
}
&__input {
@extend %rounded-lg;
font-size: $fs-md;
height: 52px;
border: 2px solid $background-input-color;
background-color: $background-input-color;
padding-inline: 14px;
}
&__submit-btn {
@extend %rounded-lg, %base-btn;
height: 36px;
margin-top: 30px;
}
&__link {
color: $primary-color;
}
}
&__title {
color: $primary-text-color;
font-size: $fs-2x-lg;
font-weight: 700;
line-height: 48px;
}
&__error-message {
font-size: $fs-md;
.error-input {
border: 2px solid $dark-error-color;
background-color: $light-error-color;
color: $dark-error-color;
padding: 15px 15px;
border-radius: 10px;
line-height: 22px;
}
&__description {
margin-top: 15px;
color: $secondary-text-color;
font-size: $fs-md;
line-height: 24px;
}
&__input {
@extend %rounded;
font-size: $fs-md;
height: 52px;
border: 2px solid $background-input-color;
background-color: $background-input-color;
padding-inline: 14px;
}
&__submit-btn {
@extend %rounded;
border: none;
background: $light-primary-color;
color: $white;
height: 36px;
margin-top: 30px;
}
&__link {
color: $primary-color;
}
}
.error-input {
border: 2px solid $dark-error-color;
background-color: $light-error-color;
}