mirror of
https://github.com/Nezumi-2711/typescript-training.git
synced 2026-09-22 13:48:29 +00:00
Init project with HTML, SCSS
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"extends": [
|
||||
"airbnb-base",
|
||||
"plugin:node/recommended",
|
||||
"prettier",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
],
|
||||
"plugins": ["@typescript-eslint", "prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
"endOfLine": "auto",
|
||||
"semi": true
|
||||
}
|
||||
],
|
||||
"no-unused-vars": "warn",
|
||||
"no-console": "off",
|
||||
"func-names": "off",
|
||||
"no-process-exit": "off",
|
||||
"object-shorthand": "off",
|
||||
"class-methods-use-this": "off",
|
||||
"node/no-unsupported-features/es-syntax": [
|
||||
"error",
|
||||
{ "ignores": ["modules"] }
|
||||
],
|
||||
"import/extensions": [
|
||||
"error",
|
||||
"ignorePackages",
|
||||
{
|
||||
"js": "never",
|
||||
"mjs": "never",
|
||||
"ts": "never"
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": {
|
||||
"node": {
|
||||
"extensions": [".js", ".ts", ".json"]
|
||||
}
|
||||
},
|
||||
"import/extensions": [".js", ".ts", ".mjs"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.parcel-cache
|
||||
|
||||
node_modules
|
||||
|
||||
dist
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"bracketSameLine": false,
|
||||
"bracketSpacing": true,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
Generated
+8927
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "typescript-practice",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "parcel src/pages/*.html"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"parcel": "^2.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-sass": "^2.9.3",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.3",
|
||||
"@typescript-eslint/parser": "^6.7.3",
|
||||
"eslint": "^8.50.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-node": "^4.1.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-import": "^2.25.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^5.0.0",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-eslint-cli": "^7.1.0",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVG" clip-path="url(#clip0_9_619)">
|
||||
<g id="Icons/account/ic_account">
|
||||
<path id="Oval-8" fill-rule="evenodd" clip-rule="evenodd" d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM13.4504 14.5983C13.4504 14.7799 13.422 14.9479 13.3652 15.1025C13.3085 15.2571 13.2234 15.3908 13.1099 15.5037C12.9965 15.6165 12.8558 15.7049 12.6879 15.7687C12.5201 15.8325 12.3251 15.8644 12.1028 15.8644C11.909 15.8644 11.7187 15.8361 11.5319 15.7797C11.3452 15.7233 11.1785 15.6251 11.0319 15.4853C10.8853 15.3454 10.7683 15.159 10.6809 14.9259C10.5934 14.6928 10.5496 14.402 10.5496 14.0536H8.5C8.5 14.6425 8.58511 15.1479 8.75532 15.5699C8.92553 15.9919 9.15248 16.3416 9.43617 16.6188C9.71986 16.8961 10.0449 17.1083 10.4113 17.2555C10.7778 17.4027 11.1572 17.4984 11.5496 17.5426V19H12.6773V17.5352C13.1028 17.4911 13.4894 17.3929 13.8369 17.2408C14.1844 17.0887 14.4811 16.8875 14.727 16.6372C14.9728 16.387 15.1631 16.0901 15.2979 15.7466C15.4326 15.4031 15.5 15.0154 15.5 14.5836C15.5 14.1076 15.4255 13.6954 15.2766 13.347C15.1277 12.9986 14.9184 12.6931 14.6489 12.4306C14.3794 12.1681 14.0567 11.9362 13.6809 11.735C13.305 11.5338 12.8877 11.3375 12.4291 11.1462C12.1454 11.0284 11.9078 10.9143 11.7163 10.8039C11.5248 10.6935 11.3712 10.5757 11.2553 10.4506C11.1395 10.3254 11.0579 10.1893 11.0106 10.0421C10.9634 9.89485 10.9397 9.73046 10.9397 9.5489C10.9397 9.36733 10.9634 9.19804 11.0106 9.04101C11.0579 8.88398 11.1312 8.74781 11.2305 8.63249C11.3298 8.51717 11.4563 8.42639 11.6099 8.36015C11.7636 8.2939 11.9468 8.26078 12.1596 8.26078C12.552 8.26078 12.8652 8.40676 13.0993 8.69874C13.3333 8.99071 13.4504 9.43112 13.4504 10.02H15.5C15.5 9.52926 15.4374 9.0864 15.3121 8.69138C15.1868 8.29635 15.0083 7.95408 14.7766 7.66456C14.5449 7.37504 14.2636 7.1395 13.9326 6.95794C13.6017 6.77637 13.2329 6.65615 12.8262 6.59727V5H11.6915V6.57518C11.266 6.61935 10.8818 6.72117 10.539 6.88065C10.1962 7.04013 9.90189 7.24746 9.65603 7.50263C9.41016 7.7578 9.22104 8.05713 9.08865 8.40063C8.95626 8.74413 8.89007 9.12443 8.89007 9.54154C8.89007 10.0224 8.96454 10.4371 9.11347 10.7855C9.26241 11.1339 9.47163 11.4381 9.74113 11.6982C10.0106 11.9583 10.3345 12.1877 10.7128 12.3864C11.091 12.5852 11.5118 12.7753 11.9752 12.9569C12.2447 13.0599 12.4728 13.1654 12.6596 13.2734C12.8463 13.3814 12.9988 13.4991 13.117 13.6267C13.2352 13.7543 13.3203 13.8966 13.3723 14.0536C13.4243 14.2107 13.4504 14.3922 13.4504 14.5983Z" fill="black" fill-opacity="0.54"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9_619">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0393 11.6247L12.8033 11.8607L11.9213 10.9787C12.8027 9.89008 13.3333 8.50675 13.3333 7.00008C13.3333 3.50808 10.492 0.666748 7 0.666748C3.508 0.666748 0.666668 3.50808 0.666668 7.00008C0.666668 10.4921 3.508 13.3334 7 13.3334C8.50667 13.3334 9.89 12.8027 10.9787 11.9214L11.8607 12.8034L11.6247 13.0394L15.626 17.0407L17.04 15.6267L13.0393 11.6247ZM7.00067 11.3334C4.61133 11.3334 2.66733 9.38941 2.66733 7.00008C2.66733 4.61075 4.61133 2.66675 7.00067 2.66675C9.39 2.66675 11.334 4.61075 11.334 7.00008C11.334 9.38941 9.38933 11.3334 7.00067 11.3334Z" fill="gray"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg width="231" height="130" viewBox="0 0 231 130" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_10_135)">
|
||||
<path d="M114.521 124.792C113.763 127.824 111.489 128.582 108.457 128.582C107.052 128.553 105.704 128.015 104.667 127.066L106.183 124.034C106.482 124.322 106.841 124.539 107.234 124.67C107.628 124.801 108.045 124.843 108.457 124.792C109.973 124.792 110.731 124.034 111.489 122.518L112.247 121.002L104.667 103.569H107.7C108.282 103.624 108.823 103.894 109.216 104.327C110.732 107.359 114.522 116.455 114.522 116.455C114.522 116.455 118.312 107.355 119.07 104.327C119.07 103.569 120.586 103.569 120.586 103.569H123.618L114.521 124.792ZM95.571 107.363C92.539 107.363 91.023 108.879 90.265 111.911H100.877C100.119 108.875 98.6 107.363 95.571 107.363ZM103.909 114.943H90.266C90.4929 116.195 91.1444 117.331 92.1109 118.16C93.0773 118.988 94.2996 119.458 95.572 119.491C96.5683 119.519 97.5589 119.33 98.475 118.937C99.3911 118.545 100.211 117.958 100.878 117.217L103.152 119.491C101.077 121.388 98.383 122.466 95.572 122.523C94.364 122.571 93.1592 122.369 92.0332 121.929C90.9073 121.488 89.8847 120.82 89.0299 119.965C88.175 119.11 87.5064 118.088 87.0662 116.962C86.626 115.836 86.4237 114.631 86.472 113.423C86.4237 112.215 86.626 111.01 87.0662 109.884C87.5064 108.758 88.175 107.736 89.0299 106.881C89.8847 106.026 90.9073 105.357 92.0332 104.917C93.1592 104.477 94.364 104.275 95.572 104.323C101.635 104.327 104.667 108.875 103.909 114.938V114.943ZM79.654 121.763V111.907C79.6845 111.401 79.6073 110.895 79.4277 110.421C79.248 109.948 78.9698 109.518 78.6116 109.159C78.2534 108.801 77.8233 108.523 77.3497 108.343C76.876 108.164 76.3697 108.086 75.864 108.117C72.832 108.117 70.558 110.391 70.558 112.665V121.765H66.768V105.085L70.558 104.327V108.117C71.274 106.953 72.2778 105.992 73.4727 105.329C74.6675 104.665 76.0132 104.32 77.38 104.327C81.928 104.327 84.202 106.601 84.202 111.149V121.763H79.654ZM54.641 108.117C53.9395 108.1 53.2419 108.225 52.5904 108.486C51.9389 108.747 51.3471 109.137 50.8509 109.633C50.3548 110.129 49.9646 110.721 49.704 111.372C49.4434 112.024 49.3179 112.721 49.335 113.423C49.335 116.455 51.609 119.487 54.641 119.487C57.673 119.487 59.947 117.213 59.947 113.423C59.9641 112.721 59.8386 112.024 59.578 111.372C59.3174 110.721 58.9272 110.129 58.4311 109.633C57.9349 109.137 57.3431 108.747 56.6916 108.486C56.0401 108.225 55.3425 108.1 54.641 108.117ZM54.641 122.517C53.433 122.565 52.2282 122.363 51.1022 121.923C49.9763 121.482 48.9537 120.814 48.0989 119.959C47.244 119.104 46.5754 118.082 46.1352 116.956C45.695 115.83 45.4927 114.625 45.541 113.417C45.4927 112.209 45.695 111.004 46.1352 109.878C46.5754 108.752 47.244 107.73 48.0989 106.875C48.9537 106.02 49.9763 105.351 51.1022 104.911C52.2282 104.471 53.433 104.269 54.641 104.317C55.849 104.269 57.0538 104.471 58.1798 104.911C59.3057 105.351 60.3283 106.02 61.1831 106.875C62.038 107.73 62.7066 108.752 63.1468 109.878C63.587 111.004 63.7893 112.209 63.741 113.417C63.7895 114.625 63.5872 115.83 63.1471 116.956C62.7069 118.082 62.0384 119.105 61.1835 119.96C60.3287 120.815 59.306 121.483 58.18 121.924C57.054 122.364 55.849 122.566 54.641 122.518V122.517ZM42.513 121.763H38.723V105.085L31.9 118.728C31.5067 119.161 30.9661 119.431 30.384 119.486H29.626C29.0439 119.431 28.5033 119.161 28.11 118.728L21.29 105.085V121.763H17.5V98.2629H21.29C21.8721 98.318 22.4127 98.5883 22.806 99.0209C24.322 102.811 30.386 113.421 30.386 113.421C30.386 113.421 36.45 102.051 37.966 99.0209C38.3593 98.5883 38.8999 98.318 39.482 98.2629H43.272L42.513 121.763Z" fill="white"/>
|
||||
<path d="M208.03 113.421V122.521H204.241V105.843L208.031 105.085V108.875C209.547 106.601 211.063 105.085 214.095 105.085V108.121C210.304 108.121 208.03 110.391 208.03 113.421ZM192.871 107.359C189.839 107.359 188.323 108.875 187.565 111.907H198.177C197.419 109.633 195.903 107.359 192.871 107.359ZM201.209 114.939H187.565C187.792 116.191 188.443 117.327 189.41 118.156C190.376 118.984 191.599 119.454 192.871 119.487C193.867 119.515 194.858 119.326 195.774 118.933C196.69 118.541 197.51 117.954 198.177 117.213L200.451 119.487C198.376 121.385 195.682 122.463 192.871 122.521C191.663 122.569 190.458 122.367 189.332 121.927C188.206 121.486 187.184 120.818 186.329 119.963C185.474 119.108 184.805 118.086 184.365 116.96C183.925 115.834 183.723 114.629 183.771 113.421C183.723 112.213 183.925 111.008 184.365 109.882C184.805 108.756 185.474 107.734 186.329 106.879C187.184 106.024 188.206 105.355 189.332 104.915C190.458 104.475 191.663 104.273 192.871 104.321C198.935 104.327 201.967 108.875 201.209 114.938V114.939ZM176.954 122.521H173.164L166.342 105.085H169.374C169.956 105.14 170.497 105.41 170.89 105.843C172.406 108.875 175.438 118.729 175.438 118.729C175.438 118.729 179.228 108.875 179.986 105.843C179.986 105.085 181.502 105.085 181.502 105.085H184.534L176.954 122.521ZM156.491 108.121C155.79 108.103 155.092 108.228 154.441 108.488C153.789 108.749 153.198 109.138 152.701 109.634C152.205 110.129 151.814 110.72 151.553 111.371C151.292 112.022 151.166 112.72 151.182 113.421C151.182 116.453 153.456 119.485 156.488 119.485C159.52 119.485 161.791 117.212 161.791 113.421C161.807 112.72 161.681 112.024 161.421 111.374C161.16 110.723 160.77 110.132 160.275 109.637C159.779 109.142 159.189 108.752 158.538 108.491C157.888 108.231 157.191 108.105 156.491 108.121ZM156.491 122.521C155.283 122.569 154.078 122.367 152.952 121.927C151.826 121.486 150.804 120.818 149.949 119.963C149.094 119.108 148.425 118.086 147.985 116.96C147.545 115.834 147.343 114.629 147.391 113.421C147.343 112.213 147.545 111.008 147.985 109.882C148.425 108.756 149.094 107.734 149.949 106.879C150.804 106.024 151.826 105.355 152.952 104.915C154.078 104.475 155.283 104.273 156.491 104.321C157.699 104.273 158.904 104.475 160.03 104.915C161.156 105.355 162.178 106.024 163.033 106.879C163.888 107.734 164.557 108.756 164.997 109.882C165.437 111.008 165.639 112.213 165.591 113.421C165.639 114.629 165.437 115.834 164.997 116.96C164.557 118.086 163.888 119.108 163.033 119.963C162.178 120.818 161.156 121.486 160.03 121.927C158.904 122.367 157.699 122.569 156.491 122.521ZM132.991 121.763V99.0209H136.023C136.123 99.0187 136.223 99.0369 136.316 99.0742C136.409 99.1115 136.493 99.1673 136.564 99.2381C136.635 99.3089 136.69 99.3933 136.728 99.4863C136.765 99.5792 136.783 99.6788 136.781 99.7789V118.728H145.119C145.219 118.726 145.319 118.744 145.412 118.781C145.505 118.818 145.589 118.874 145.66 118.945C145.731 119.016 145.786 119.1 145.824 119.193C145.861 119.286 145.879 119.386 145.877 119.486V121.76L132.991 121.763Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.4441 2.758H133.311C135.806 2.73328 138.282 3.20652 140.592 4.15003C142.902 5.09354 145.001 6.48836 146.765 8.25287C148.53 10.0174 149.925 12.1161 150.869 14.4263C151.812 16.7365 152.286 19.2117 152.261 21.707V56.574C152.196 61.3785 150.258 65.9677 146.86 69.3653C143.463 72.7629 138.874 74.7005 134.069 74.766H97.6861C92.8818 74.7003 88.2928 72.7625 84.8954 69.365C81.498 65.9674 79.5605 61.3783 79.4951 56.574V21.707C79.4705 19.2117 79.9438 16.7366 80.8874 14.4265C81.8309 12.1164 83.2258 10.0177 84.9903 8.25323C86.7548 6.48873 88.8535 5.09389 91.1636 4.15032C93.4737 3.20675 95.9488 2.73341 98.4441 2.758Z" fill="#2DB84C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M97.6861 2H134.069C138.873 2.06545 143.463 4.00298 146.86 7.40035C150.258 10.7977 152.195 15.3867 152.261 20.191V27.771C152.196 32.5755 150.258 37.1647 146.86 40.5623C143.463 43.9599 138.874 45.8975 134.069 45.963H97.6861C92.8818 45.8973 88.2928 43.9595 84.8955 40.562C81.4981 37.1644 79.5606 32.5753 79.4951 27.771V20.191C79.5608 15.3869 81.4985 10.798 84.8958 7.40069C88.2931 4.00336 92.882 2.06571 97.6861 2Z" fill="#E2ECE4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M97.686 49.752C98.1917 49.7215 98.698 49.7986 99.1717 49.9783C99.6453 50.158 100.075 50.4361 100.434 50.7943C100.792 51.1525 101.07 51.5827 101.25 52.0563C101.429 52.5299 101.506 53.0363 101.476 53.542C101.506 54.0476 101.429 54.554 101.25 55.0276C101.07 55.5013 100.792 55.9314 100.434 56.2896C100.075 56.6478 99.6453 56.9259 99.1717 57.1056C98.698 57.2853 98.1917 57.3625 97.686 57.332C96.17 57.332 93.896 55.058 93.896 53.542C93.9595 52.5577 94.3792 51.6301 95.0767 50.9327C95.7742 50.2352 96.7017 49.8155 97.686 49.752Z" fill="#247936"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.636 53.542C122.7 53.542 128.006 57.332 128.006 62.642C128.006 67.952 122.7 71.742 116.636 71.742C110.572 71.742 105.266 67.942 105.266 62.642C105.266 57.342 110.572 53.542 116.636 53.542Z" fill="#70D185"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M110.572 60.364C111.163 60.3999 111.72 60.6512 112.138 61.0702C112.556 61.4893 112.807 62.0471 112.841 62.638C112.814 63.0313 112.646 63.4016 112.367 63.6803C112.089 63.9591 111.718 64.1273 111.325 64.154C110.932 64.1273 110.562 63.9591 110.283 63.6803C110.004 63.4016 109.836 63.0313 109.809 62.638C109.666 62.4496 109.572 62.2292 109.534 61.9959C109.496 61.7626 109.515 61.5236 109.59 61.2995C109.665 61.0754 109.794 60.8731 109.965 60.71C110.136 60.547 110.345 60.4282 110.572 60.364Z" fill="#009421"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.9601 31.561H133.311C133.704 31.5877 134.075 31.756 134.353 32.0347C134.632 32.3135 134.8 32.6837 134.827 33.077C134.8 33.4703 134.632 33.8406 134.353 34.1194C134.075 34.3981 133.704 34.5664 133.311 34.593H99.9601C99.5668 34.5664 99.1965 34.3981 98.9178 34.1194C98.639 33.8406 98.4708 33.4703 98.4441 33.077C97.6861 32.319 98.4441 31.561 99.9601 31.561Z" fill="#006015"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.636 9.57996C118.527 9.57891 120.4 9.95066 122.148 10.674C123.896 11.3972 125.483 12.4579 126.821 13.7953C128.158 15.1326 129.219 16.7205 129.942 18.4681C130.665 20.2156 131.037 22.0886 131.036 23.98C130.958 27.9742 129.327 31.7808 126.488 34.592H106.782C103.75 31.56 101.476 27.77 101.476 23.222C101.476 15.644 108.298 9.57996 116.636 9.57996Z" fill="#FFCE00"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M118.91 13.37V32.319H113.604V22.47C113.604 20.954 112.846 21.712 112.846 21.712H110.572V20.95C113.279 19.1643 115.816 17.1345 118.152 14.886C118.152 13.37 118.91 13.37 118.91 13.37Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M121.941 60.364C122.334 60.3907 122.705 60.559 122.983 60.8377C123.262 61.1164 123.43 61.4867 123.457 61.88C123.43 62.2733 123.262 62.6436 122.983 62.9223C122.705 63.2011 122.334 63.3693 121.941 63.396C121.548 63.3693 121.177 63.2011 120.899 62.9223C120.62 62.6436 120.452 62.2733 120.425 61.88C119.667 61.88 120.425 60.364 121.941 60.364Z" fill="#009421"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.827 49.752C135.333 49.7215 135.839 49.7986 136.313 49.9783C136.786 50.158 137.216 50.4361 137.575 50.7943C137.933 51.1525 138.211 51.5827 138.391 52.0563C138.57 52.5299 138.647 53.0363 138.617 53.542C138.647 54.0476 138.57 54.554 138.391 55.0276C138.211 55.5013 137.933 55.9314 137.575 56.2896C137.216 56.6478 136.786 56.9259 136.313 57.1056C135.839 57.2853 135.333 57.3625 134.827 57.332C134.321 57.3625 133.815 57.2853 133.341 57.1056C132.868 56.9259 132.438 56.6478 132.079 56.2896C131.721 55.9314 131.443 55.5013 131.263 55.0276C131.084 54.554 131.007 54.0476 131.037 53.542C131.007 53.0363 131.084 52.5299 131.263 52.0563C131.443 51.5827 131.721 51.1525 132.079 50.7943C132.438 50.4361 132.868 50.158 133.341 49.9783C133.815 49.7986 134.321 49.7215 134.827 49.752Z" fill="#247936"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_10_135">
|
||||
<rect width="230" height="130" fill="white" transform="translate(0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="24" height="24" transform="translate(-0.000244141)" fill="url(#pattern0)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_6_360" transform="scale(0.0104167)"/>
|
||||
</pattern>
|
||||
<image id="image0_6_360" width="96" height="96" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MEQ3NUZEQjYzQUExMUUzQkVDNjhFN0I2MTY3RDVDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3MEQ3NUZEQzYzQUExMUUzQkVDNjhFN0I2MTY3RDVDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcwRDc1RkQ5NjNBQTExRTNCRUM2OEU3QjYxNjdENUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcwRDc1RkRBNjNBQTExRTNCRUM2OEU3QjYxNjdENUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0DRG0gAAB+NJREFUeNrsXUts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"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
|
||||
<link rel="stylesheet" href="../styles/_main.scss" />
|
||||
<title>Money Lover Web</title>
|
||||
</head>
|
||||
<body class="home-page">
|
||||
<!-- Add a wallet form -->
|
||||
<dialog class="dialog" id="walletDialog">
|
||||
<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" id="walletForm">
|
||||
<div class="form__input-container">
|
||||
<div class="form__input-field">
|
||||
<p class="form__label">Wallet name</p>
|
||||
<input
|
||||
type="text"
|
||||
class="form__input-text"
|
||||
placeholder="Your wallet name?"
|
||||
name="walletName"
|
||||
minlength="3"
|
||||
/>
|
||||
</div>
|
||||
</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-container">
|
||||
<div class="form__input-field">
|
||||
<p class="form__label">Initial Balance</p>
|
||||
<input
|
||||
type="number"
|
||||
class="form__input-balance"
|
||||
name="amount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="form__save-btn">SAVE</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!-- End form -->
|
||||
<!-- Add budget form -->
|
||||
<dialog class="dialog" id="budgetDialog">
|
||||
<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-container">
|
||||
<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>
|
||||
<div class="form__input-container">
|
||||
<div class="form__input-field">
|
||||
<p class="form__label">Amount</p>
|
||||
<input
|
||||
class="form__input-balance"
|
||||
type="number"
|
||||
min="1"
|
||||
name="amount"
|
||||
/>
|
||||
</div>
|
||||
</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 class="form__cancel-btn" type="button">CANCEL</button>
|
||||
<button type="submit" class="form__save-btn">SAVE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!-- End form -->
|
||||
<!-- Add, edit, delete transaction form -->
|
||||
<dialog class="dialog" id="transactionDialog">
|
||||
<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="formAddTransaction">
|
||||
<input type="text" name="id_transaction" hidden />
|
||||
<div class="form__date-category-amount-input">
|
||||
<div class="form__input-container">
|
||||
<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>
|
||||
<div class="form__input-container">
|
||||
<div class="form__input-field" id="selectCategory">
|
||||
<p class="form__label">Category</p>
|
||||
<div class="category-input-container">
|
||||
<img
|
||||
class="category-icon"
|
||||
src="../assets/images/question-icon.svg"
|
||||
alt="Question icon"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="category_name"
|
||||
class="category-name"
|
||||
placeholder="Select Category"
|
||||
/>
|
||||
<div class="icon-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__input-container">
|
||||
<div class="form__input-field">
|
||||
<p class="form__label">Amount</p>
|
||||
<input
|
||||
class="form__input-balance"
|
||||
type="number"
|
||||
name="amount"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
</dialog>
|
||||
<!-- End form -->
|
||||
<!-- Select category form -->
|
||||
<dialog class="dialog" id="categoryDialog">
|
||||
<div class="dialog__select-category">
|
||||
<div class="dialog__header">
|
||||
<div class="dialog__title-container">
|
||||
<div formmethod="dialog" 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<!-- 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">User</p>
|
||||
<div class="wallet__dialog">
|
||||
<p class="logout-text">Log Out</p>
|
||||
</div>
|
||||
<p class="wallet__price">+$ 0.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 left"></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">+$ 0.00</p>
|
||||
</div>
|
||||
<div class="outflow">
|
||||
<p class="outflow__text">Outflow</p>
|
||||
<p class="outflow__text--outcome">$ 0.00</p>
|
||||
</div>
|
||||
<div class="summary__line"></div>
|
||||
<p class="summary__total">+$ 0.00</p>
|
||||
</div>
|
||||
<!-- End content summary -->
|
||||
</div>
|
||||
<div class="app__content-item">
|
||||
<!-- Start content transaction -->
|
||||
<div class="transaction">
|
||||
<div class="transaction__list"></div>
|
||||
</div>
|
||||
<!-- End content transaction -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End content app -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- End app -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
|
||||
<link rel="stylesheet" href="../styles/_main.scss" />
|
||||
<title>Login - Money Lover</title>
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<main>
|
||||
<div class="background">
|
||||
<div class="wrapper">
|
||||
<img
|
||||
class="logo-web"
|
||||
src="../assets/images/logo.svg"
|
||||
alt="Logo web"
|
||||
/>
|
||||
<!-- Log in form -->
|
||||
<form action="#" class="form" method="post" id="loginForm">
|
||||
<div class="form__container">
|
||||
<h1 class="form__title">Log In</h1>
|
||||
<p class="form__description">Using Money Lover account</p>
|
||||
<input
|
||||
type="text"
|
||||
class="form__input"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
class="form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<button type="submit" class="form__submit-btn">Login</button>
|
||||
<p class="form__redirect-signup-text">
|
||||
Don't have an account?
|
||||
<a href="/register" class="form__link">Register</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<!-- End form -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
|
||||
<link rel="stylesheet" href="../styles/_main.scss" />
|
||||
<title>Register - Money Lover</title>
|
||||
</head>
|
||||
<body class="register-page">
|
||||
<main>
|
||||
<div class="background">
|
||||
<div class="wrapper">
|
||||
<img
|
||||
class="logo-web"
|
||||
src="../assets/images/logo.svg"
|
||||
alt="Logo web"
|
||||
/>
|
||||
<!-- Register form -->
|
||||
<form action="#" class="form" method="post" id="registerForm">
|
||||
<div class="form__container">
|
||||
<h1 class="form__title">Register</h1>
|
||||
<p class="form__description">Using Money Lover account</p>
|
||||
<div class="form__input-container">
|
||||
<input
|
||||
type="text"
|
||||
class="form__input"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="form__input-container">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
class="form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div class="form__input-container">
|
||||
<input
|
||||
type="password"
|
||||
name="password_confirm"
|
||||
class="form__input"
|
||||
placeholder="Confirm Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="form__submit-btn">Register</button>
|
||||
<p class="form__redirect-signup-text">
|
||||
Have you an account?
|
||||
<a href="/login" class="form__link">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<!-- End form -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
// Abstracts
|
||||
@import './abstracts/mixin';
|
||||
@import './abstracts/variables';
|
||||
|
||||
// Bases
|
||||
@import './bases/placeholder';
|
||||
@import './bases/reset';
|
||||
@import './bases/typography';
|
||||
|
||||
// Components
|
||||
@import './components/dialog';
|
||||
@import './components/icons';
|
||||
@import './components/loader';
|
||||
@import './components/toast-form';
|
||||
|
||||
// Layouts
|
||||
@import './layouts/header';
|
||||
|
||||
// Pages
|
||||
@import './pages/login-register';
|
||||
@import './pages/index';
|
||||
@@ -0,0 +1,27 @@
|
||||
@mixin flex-layout(
|
||||
$justify: null,
|
||||
$align: null,
|
||||
$direction: null,
|
||||
$gap: null,
|
||||
$wrap: null
|
||||
) {
|
||||
@if $justify != null {
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@if $align != null {
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@if $direction != null {
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@if $gap != null {
|
||||
gap: $gap;
|
||||
}
|
||||
|
||||
@if $wrap != null {
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
$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;
|
||||
$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;
|
||||
$fs-x-sm: 12px;
|
||||
$fs-sm: 14px;
|
||||
$fs-md: 16px;
|
||||
$fs-lg: 17px;
|
||||
$fs-x-lg: 20px;
|
||||
$fs-2x-lg: 32px;
|
||||
|
||||
// Z-index
|
||||
$zindex-lv-1: 1;
|
||||
$zindex-lv-2: 2;
|
||||
$zindex-lv-3: 3;
|
||||
$zindex-lv-4: 4;
|
||||
@@ -0,0 +1,59 @@
|
||||
%margin-inline-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
%rounded-x-lg {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
%rounded-lg {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
%rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
%rounded-sm {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
%d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
%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;
|
||||
}
|
||||
|
||||
%error-text {
|
||||
align-self: flex-start;
|
||||
padding-left: 5px;
|
||||
color: $dark-error-color;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
$font-path: '../assets/fonts';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
src: url('#{$font-path}/roboto-regular.woff2') format('woff2'),
|
||||
url('#{$font-path}/roboto-regular.ttf') format('truetype');
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 500;
|
||||
src: url('#{$font-path}/roboto-medium.woff2') format('woff2'),
|
||||
url('#{$font-path}/roboto-medium.ttf') format('truetype');
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
src: url('#{$font-path}/roboto-bold.woff2') format('woff2'),
|
||||
url('#{$font-path}/roboto-bold.ttf') format('truetype');
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: $primary-font, sans-serif;
|
||||
font-size: $fs-sm;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.dialog {
|
||||
@extend %rounded-sm;
|
||||
|
||||
border: none;
|
||||
background-color: $white;
|
||||
padding: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&__title {
|
||||
font-size: $fs-x-lg;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background-color: rgba($color: #000000, $alpha: 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Login page
|
||||
.login-page,
|
||||
.register-page {
|
||||
.dialog {
|
||||
@extend %rounded;
|
||||
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.mark {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #c4cbd2;
|
||||
border-radius: 100px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.check:before {
|
||||
top: 16px;
|
||||
left: 15px;
|
||||
margin: -5px 0 0 -6px;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
border: solid #39ca74;
|
||||
border-width: 0 0 3px 3px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
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);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
@@ -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: $zindex-lv-1;
|
||||
transition:
|
||||
opacity 0.75s,
|
||||
visibility 0.75s;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border: 10px solid $gray;
|
||||
border-top-color: $primary-color;
|
||||
border-radius: 50%;
|
||||
animation: loading 0.75s ease infinite;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
transform: rotate(0turn);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.toast {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column, $align: center, $gap: 30px);
|
||||
|
||||
padding: 40px 50px;
|
||||
|
||||
&__title {
|
||||
font-size: $fs-2x-lg;
|
||||
}
|
||||
|
||||
&__message {
|
||||
font-size: $fs-lg;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__redirect-btn {
|
||||
color: $white;
|
||||
font-size: $fs-md;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.success .toast__redirect-btn {
|
||||
background-color: $light-primary-color;
|
||||
}
|
||||
|
||||
.error .toast__redirect-btn {
|
||||
background-color: $dark-error-color;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.home-page {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,700 @@
|
||||
.home-page {
|
||||
.background {
|
||||
height: 100vh;
|
||||
background: $gray;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1920px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 96px;
|
||||
}
|
||||
|
||||
.wallet {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 8px);
|
||||
|
||||
min-width: 170px;
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__dialog {
|
||||
@extend %rounded-sm;
|
||||
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
border: 1px solid $black;
|
||||
top: 17px;
|
||||
left: 10px;
|
||||
opacity: 0;
|
||||
visibility: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: $fs-x-sm;
|
||||
line-height: 21px;
|
||||
|
||||
&:hover + .wallet__dialog {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__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;
|
||||
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;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-light-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__input-field {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__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 12px;
|
||||
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;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-balance {
|
||||
font-size: $fs-lg;
|
||||
line-height: 20px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
&: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;
|
||||
background-color: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
background-color: transparent;
|
||||
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;
|
||||
|
||||
& .category-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: $fs-lg;
|
||||
line-height: 25.5px;
|
||||
color: $black;
|
||||
border: none;
|
||||
caret-color: transparent;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-category {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: $hover-light-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
font-size: $fs-x-sm;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error-input {
|
||||
background-color: $light-error-color;
|
||||
border-color: $dark-error-color;
|
||||
|
||||
& .form__input-text::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@extend %error-text;
|
||||
}
|
||||
|
||||
.form__input-container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column, $gap: 7px);
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .error, .mark;
|
||||
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-color: $black;
|
||||
border-width: 0 0 2px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#categoryForm {
|
||||
z-index: $zindex-lv-4;
|
||||
}
|
||||
@@ -0,0 +1,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;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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;
|
||||
list-style: inside;
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
&-container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column, $gap: 7px);
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-btn {
|
||||
@extend %rounded-lg, %base-btn;
|
||||
|
||||
height: 36px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error-input {
|
||||
border: 2px solid $dark-error-color;
|
||||
background-color: $light-error-color;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@extend %error-text;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
console.log('Test');
|
||||
Reference in New Issue
Block a user