mirror of
https://github.com/Nezumi-2711/javascript-training.git
synced 2026-09-23 04:09:58 +00:00
Init home page
This commit is contained in:
@@ -1,9 +1,491 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
</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>
|
</html>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<link rel="stylesheet" href="../styles/_main.scss" />
|
<link rel="stylesheet" href="../styles/_main.scss" />
|
||||||
<title>Login - Money Lover</title>
|
<title>Login - Money Lover</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="login-page">
|
||||||
<main>
|
<main>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<link rel="stylesheet" href="../styles/_main.scss" />
|
<link rel="stylesheet" href="../styles/_main.scss" />
|
||||||
<title>Register - Money Lover</title>
|
<title>Register - Money Lover</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="register-page">
|
||||||
<main>
|
<main>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
@import './bases/typography';
|
@import './bases/typography';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
@import './components/dialog';
|
||||||
@import './components/icons';
|
@import './components/icons';
|
||||||
@import './components/loader';
|
@import './components/loader';
|
||||||
@import './components/popup-form';
|
@import './components/popup-form';
|
||||||
@@ -19,3 +20,4 @@
|
|||||||
|
|
||||||
// Pages
|
// Pages
|
||||||
@import './pages/login-register';
|
@import './pages/login-register';
|
||||||
|
@import './pages/index';
|
||||||
|
|||||||
@@ -1,19 +1,24 @@
|
|||||||
$primary-font: 'Roboto';
|
$primary-font: 'Roboto';
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
|
$hover-light-primary-color: #cdecd3;
|
||||||
$light-primary-color: #00bc2a;
|
$light-primary-color: #00bc2a;
|
||||||
$primary-color: #2db84c;
|
$primary-color: #2db84c;
|
||||||
$dark-primary-color: #00710f;
|
$dark-primary-color: #00710f;
|
||||||
$primary-text-color: #000;
|
$primary-text-color: #000;
|
||||||
$secondary-text-color: #0000008a;
|
$secondary-text-color: #0000008a;
|
||||||
$secondary-light-text-color: #00000042;
|
$secondary-light-text-color: #00000042;
|
||||||
$receive-money-color: #e51c23;
|
$amount-outcome-color: #e51c23;
|
||||||
$deducted-money-color: #039be5;
|
$amount-income-color: #039be5;
|
||||||
$background-input-color: #f5f5f5;
|
$background-input-color: #f5f5f5;
|
||||||
$dark-error-color: #ce1414;
|
$dark-error-color: #ce1414;
|
||||||
$light-error-color: #ffc3c3;
|
$light-error-color: #ffc3c3;
|
||||||
|
$light-gray: #f4f4f4;
|
||||||
$gray: #dddddd;
|
$gray: #dddddd;
|
||||||
|
$dark-gray: #00000042;
|
||||||
|
$dark-x-gray: #0000008a;
|
||||||
$white: #ffffff;
|
$white: #ffffff;
|
||||||
|
$black: #000000;
|
||||||
|
|
||||||
// Font size
|
// Font size
|
||||||
$fs-2x-sm: 11px;
|
$fs-2x-sm: 11px;
|
||||||
|
|||||||
@@ -1 +1,22 @@
|
|||||||
// TODO
|
// 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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,10 +2,22 @@
|
|||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
%rounded {
|
%rounded-x-lg {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
%rounded-lg {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%rounded {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
%rounded-sm {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
%d-flex {
|
%d-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@@ -13,3 +25,29 @@
|
|||||||
%d-absolute {
|
%d-absolute {
|
||||||
position: 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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -30,29 +30,32 @@
|
|||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error:before {
|
.error {
|
||||||
top: 6px;
|
&:before {
|
||||||
left: 13px;
|
top: 6px;
|
||||||
height: 10px;
|
left: 13px;
|
||||||
width: 10px;
|
height: 10px;
|
||||||
border: solid #c0392b;
|
width: 10px;
|
||||||
border-width: 0 0 4px 4px;
|
border: solid #c0392b;
|
||||||
-webkit-transform: rotate(-45deg);
|
border-width: 0 0 4px 4px;
|
||||||
-moz-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
-ms-transform: rotate(-45deg);
|
-moz-transform: rotate(-45deg);
|
||||||
-o-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
-o-transform: rotate(-45deg);
|
||||||
}
|
transform: rotate(-45deg);
|
||||||
.error:after {
|
}
|
||||||
top: 21px;
|
|
||||||
left: 13px;
|
&:after {
|
||||||
height: 10px;
|
top: 21px;
|
||||||
width: 10px;
|
left: 13px;
|
||||||
border: solid #c0392b;
|
height: 10px;
|
||||||
border-width: 0 0 4px 4px;
|
width: 10px;
|
||||||
-webkit-transform: rotate(135deg);
|
border: solid #c0392b;
|
||||||
-moz-transform: rotate(135deg);
|
border-width: 0 0 4px 4px;
|
||||||
-ms-transform: rotate(135deg);
|
-webkit-transform: rotate(135deg);
|
||||||
-o-transform: rotate(135deg);
|
-moz-transform: rotate(135deg);
|
||||||
transform: rotate(135deg);
|
-ms-transform: rotate(135deg);
|
||||||
|
-o-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,6 +22,11 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: loading 0.75s ease infinite;
|
animation: loading 0.75s ease infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading {
|
@keyframes loading {
|
||||||
@@ -32,8 +37,3 @@
|
|||||||
transform: rotate(1turn);
|
transform: rotate(1turn);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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 {
|
.modal-box {
|
||||||
@extend %d-flex;
|
@extend %d-flex;
|
||||||
@extend %d-absolute;
|
@extend %d-absolute;
|
||||||
@@ -43,11 +32,11 @@
|
|||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
&.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.success .modal-box__redirect-btn {
|
.success .modal-box__redirect-btn {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -1,90 +1,90 @@
|
|||||||
.background {
|
.login-page,
|
||||||
height: 100vh;
|
.register-page {
|
||||||
background: linear-gradient($dark-primary-color 314px, #ebebeb -100%);
|
.background {
|
||||||
}
|
height: 100vh;
|
||||||
|
background: linear-gradient($dark-primary-color 314px, #ebebeb -100%);
|
||||||
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
@extend %margin-inline-auto;
|
@extend %margin-inline-auto;
|
||||||
@extend %d-absolute;
|
@extend %d-absolute;
|
||||||
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-web {
|
.logo-web {
|
||||||
padding-top: 54px;
|
padding-top: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
@extend %margin-inline-auto;
|
|
||||||
|
|
||||||
margin-top: 34px;
|
|
||||||
padding-top: 34px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
background-color: $white;
|
|
||||||
width: 670px;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
&__container {
|
|
||||||
@extend %margin-inline-auto;
|
@extend %margin-inline-auto;
|
||||||
|
|
||||||
display: flex;
|
margin-top: 34px;
|
||||||
flex-direction: column;
|
padding-top: 34px;
|
||||||
gap: 19px;
|
padding-bottom: 40px;
|
||||||
width: 280px;
|
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 {
|
.error-input {
|
||||||
color: $primary-text-color;
|
border: 2px solid $dark-error-color;
|
||||||
font-size: $fs-2x-lg;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error-message {
|
|
||||||
font-size: $fs-md;
|
|
||||||
background-color: $light-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;
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user