From 531a12c3a6ca38dc46d6b77daee7e0c26a3e1ec7 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Mon, 30 Sep 2024 15:34:48 +0200 Subject: [PATCH 001/132] chore(frontend): use ember-apply to bootstrap tailwind --- frontend/.gitignore | 3 + frontend/app/index.html | 7 +- frontend/config/tailwind/tailwind-input.css | 3 + frontend/config/tailwind/tailwind.config.js | 16 + frontend/package.json | 12 +- frontend/pnpm-lock.yaml | 326 +++++++++++++++++++- frontend/tests/index.html | 1 + 7 files changed, 360 insertions(+), 8 deletions(-) create mode 100644 frontend/config/tailwind/tailwind-input.css create mode 100644 frontend/config/tailwind/tailwind.config.js diff --git a/frontend/.gitignore b/frontend/.gitignore index d10296ee0..6205b5232 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -1,6 +1,9 @@ # See https://help.github.com/ignore-files/ for more about ignoring files. + # compiled output +public/assets/tailwind.css + /dist /tmp diff --git a/frontend/app/index.html b/frontend/app/index.html index 9d5e0817e..ae50a9050 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -5,9 +5,10 @@ Timed - - - + + + + {{content-for "head"}} diff --git a/frontend/config/tailwind/tailwind-input.css b/frontend/config/tailwind/tailwind-input.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/frontend/config/tailwind/tailwind-input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/frontend/config/tailwind/tailwind.config.js b/frontend/config/tailwind/tailwind.config.js new file mode 100644 index 000000000..44cff368d --- /dev/null +++ b/frontend/config/tailwind/tailwind.config.js @@ -0,0 +1,16 @@ +"use strict"; +// located in /config/tailwind/ + +const path = require("path"); + +const appRoot = path.join(__dirname, "../../"); +const appEntry = path.join(appRoot, "app"); +const relevantFilesGlob = "**/*.{html,js,ts,hbs,gjs,gts}"; + +module.exports = { + content: [path.join(appEntry, relevantFilesGlob)], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/frontend/package.json b/frontend/package.json index f2f7c05f5..97d14737a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,7 +10,7 @@ "test": "tests" }, "scripts": { - "build": "ember build --environment=production", + "build": "npm run tailwind:build && ember build --environment=production", "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"", "lint:scss": "stylelint \"**/*.scss\"", "lint:scss:fix": "concurrently \"npm:lint:scss -- --fix\"", @@ -19,9 +19,12 @@ "lint:hbs:fix": "ember-template-lint . --fix", "lint:js": "eslint --config .eslintrc.js .", "lint:js:fix": "eslint --config .eslintrc.js . --fix", - "start": "ember server --proxy https://timed.localhost --secure-proxy=false", + "start": "concurrently 'npm:start:ember' 'npm:tailwind:watch' --names 'serve,styles'", "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"", - "test:ember": "ember test" + "test:ember": "ember test", + "tailwind:build": "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css", + "tailwind:watch": "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css --watch", + "start:ember": "ember server --proxy https://timed.localhost --secure-proxy=false" }, "devDependencies": { "@adfinis/eslint-config": "^2.1.1", @@ -123,6 +126,7 @@ "stylelint-config-standard-scss": "^13.1.0", "stylelint-prettier": "^3.0.0", "stylelint-scss": "^6.3.0", + "tailwindcss": "^3.0.0", "tracked-built-ins": "3.1.1", "tracked-toolbox": "2.0.0", "webpack": "5.92.1" @@ -146,4 +150,4 @@ } }, "packageManager": "pnpm@9.5.0-beta.0+sha512.c2e60e7ed04e459591c982f2760cd8f7d1f48fe1ca4d46ccbbf8377df1eb2d077ace1e9d334b06250dddf23c03b4562858f77992b9a3bb4a93355aefd173df32" -} \ No newline at end of file +} diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index ebb84ee46..daa974e7d 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -305,6 +305,9 @@ importers: stylelint-scss: specifier: ^6.3.0 version: 6.3.2(stylelint@16.6.1(typescript@5.5.2)) + tailwindcss: + specifier: ^3.0.0 + version: 3.4.13 tracked-built-ins: specifier: 3.1.1 version: 3.1.1 @@ -342,6 +345,10 @@ packages: eslint-plugin-qunit: optional: true + '@alloc/quick-lru@5.2.0': + resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} + engines: {node: '>=10'} + '@ampproject/remapping@2.3.0': resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} @@ -1483,6 +1490,10 @@ packages: resolution: {integrity: sha512-79hP/VWdZ2UVc9bFGJnoQ/lQMpL74mGgzSYX1xUqCVk7/v73vJCMw1VuyWN1jGkZ9B3z7THAbySqGbCNefcjfA==} engines: {node: '>=18'} + '@isaacs/cliui@8.0.2': + resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} + engines: {node: '>=12'} + '@istanbuljs/load-nyc-config@1.1.0': resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==} engines: {node: '>=8'} @@ -1534,6 +1545,10 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@pkgjs/parseargs@0.11.0': + resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} + engines: {node: '>=14'} + '@pnpm/constants@7.1.1': resolution: {integrity: sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==} engines: {node: '>=16.14'} @@ -1988,6 +2003,10 @@ packages: resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} engines: {node: '>=8'} + ansi-styles@6.2.1: + resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==} + engines: {node: '>=12'} + ansi-to-html@0.6.15: resolution: {integrity: sha512-28ijx2aHJGdzbs+O5SNQF65r6rrKYnkuwTYm8lZlChuoJ9P1vVzIpWO20sQTqTPDXYp6NFwk326vApTtLVFXpQ==} engines: {node: '>=8.0.0'} @@ -1996,6 +2015,9 @@ packages: ansicolors@0.2.1: resolution: {integrity: sha512-tOIuy1/SK/dr94ZA0ckDohKXNeBNqZ4us6PjMVLs5h1w2GBB6uPtOknp2+VF4F/zcy9LI70W+Z+pE2Soajky1w==} + any-promise@1.3.0: + resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} + anymatch@2.0.0: resolution: {integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==} @@ -2017,6 +2039,9 @@ packages: engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} deprecated: This package is no longer supported. + arg@5.0.2: + resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} + argparse@1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} @@ -2604,6 +2629,10 @@ packages: camel-case@4.1.2: resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==} + camelcase-css@2.0.1: + resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} + engines: {node: '>= 6'} + camelcase@5.3.1: resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==} engines: {node: '>=6'} @@ -3250,6 +3279,9 @@ packages: resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==} engines: {node: '>=8'} + didyoumean@1.2.2: + resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} + diff@4.0.2: resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==} engines: {node: '>=0.3.1'} @@ -3265,6 +3297,9 @@ packages: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} + dlv@1.1.3: + resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + doctrine@2.1.0: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} engines: {node: '>=0.10.0'} @@ -3290,6 +3325,9 @@ packages: duplexify@3.7.1: resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==} + eastasianwidth@0.2.0: + resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} + editions@1.3.4: resolution: {integrity: sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==} engines: {node: '>=0.8'} @@ -3828,6 +3866,9 @@ packages: emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + emoji-regex@9.2.2: + resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} + emojis-list@3.0.0: resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==} engines: {node: '>= 4'} @@ -4355,6 +4396,10 @@ packages: resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==} engines: {node: '>=0.10.0'} + foreground-child@3.3.0: + resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} + engines: {node: '>=14'} + forwarded@0.2.0: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} @@ -4427,7 +4472,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 + deprecated: Upgrade to fsevents v2 to mitigate potential security issues fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} @@ -4514,6 +4559,10 @@ packages: glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} + glob@10.4.5: + resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} + hasBin: true + glob@5.0.15: resolution: {integrity: sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==} deprecated: Glob versions prior to v9 are no longer supported @@ -5103,10 +5152,17 @@ packages: resolution: {integrity: sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==} engines: {node: '>=0.12'} + jackspeak@3.4.3: + resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + jest-worker@27.5.1: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} + jiti@1.21.6: + resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==} + hasBin: true + js-sha256@0.10.1: resolution: {integrity: sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw==} @@ -5227,6 +5283,14 @@ packages: lie@3.1.1: resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==} + lilconfig@2.1.0: + resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} + engines: {node: '>=10'} + + lilconfig@3.1.2: + resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==} + engines: {node: '>=14'} + line-column@1.0.2: resolution: {integrity: sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==} @@ -5557,6 +5621,10 @@ packages: resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==} engines: {node: '>=16 || 14 >=14.17'} + minimatch@9.0.5: + resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} + engines: {node: '>=16 || 14 >=14.17'} + minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} @@ -5638,6 +5706,9 @@ packages: resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + mz@2.7.0: + resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} + nan@2.20.0: resolution: {integrity: sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==} @@ -5831,6 +5902,10 @@ packages: resolution: {integrity: sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==} engines: {node: '>= 0.10.0'} + object-hash@3.0.0: + resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} + engines: {node: '>= 6'} + object-inspect@1.13.2: resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==} engines: {node: '>= 0.4'} @@ -5983,6 +6058,9 @@ packages: resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} engines: {node: '>=6'} + package-json-from-dist@1.0.1: + resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + pako@1.0.11: resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} @@ -6099,10 +6177,18 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + pify@2.3.0: + resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} + engines: {node: '>=0.10.0'} + pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} + pirates@4.0.6: + resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} + engines: {node: '>= 6'} + pkg-dir@3.0.0: resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==} engines: {node: '>=6'} @@ -6131,6 +6217,30 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} + postcss-import@15.1.0: + resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} + engines: {node: '>=14.0.0'} + peerDependencies: + postcss: ^8.0.0 + + postcss-js@4.0.1: + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + + postcss-load-config@4.0.2: + resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + postcss-media-query-parser@0.2.3: resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} @@ -6158,6 +6268,12 @@ packages: peerDependencies: postcss: ^8.1.0 + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + postcss-resolve-nested-selector@0.1.1: resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==} @@ -6177,6 +6293,10 @@ packages: resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==} engines: {node: '>=4'} + postcss-selector-parser@6.1.2: + resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} + engines: {node: '>=4'} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -6324,6 +6444,9 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + read-cache@1.0.0: + resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} + readable-stream@1.0.34: resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==} @@ -6898,6 +7021,10 @@ packages: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} engines: {node: '>=8'} + string-width@5.1.2: + resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==} + engines: {node: '>=12'} + string.prototype.matchall@4.0.11: resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==} engines: {node: '>= 0.4'} @@ -7031,6 +7158,11 @@ packages: engines: {node: '>=18.12.0'} hasBin: true + sucrase@3.35.0: + resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} + engines: {node: '>=16 || 14 >=14.17'} + hasBin: true + supports-color@2.0.0: resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==} engines: {node: '>=0.8.0'} @@ -7076,6 +7208,11 @@ packages: resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==} engines: {node: '>=10.0.0'} + tailwindcss@3.4.13: + resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==} + engines: {node: '>=14.0.0'} + hasBin: true + tap-parser@7.0.0: resolution: {integrity: sha512-05G8/LrzqOOFvZhhAk32wsGiPZ1lfUrl+iV7+OkKgfofZxiceZWMHkKmow71YsyVQ8IvGBP2EjcIjE5gL4l5lA==} hasBin: true @@ -7143,6 +7280,13 @@ packages: resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==} engines: {node: '>=0.8'} + thenify-all@1.6.0: + resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} + engines: {node: '>=0.8'} + + thenify@3.3.1: + resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + through2@2.0.5: resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==} @@ -7250,6 +7394,9 @@ packages: resolution: {integrity: sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==} engines: {node: '>=0.10.0'} + ts-interface-checker@0.1.13: + resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + ts-invariant@0.10.3: resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} engines: {node: '>=8'} @@ -7593,6 +7740,10 @@ packages: resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} engines: {node: '>=10'} + wrap-ansi@8.1.0: + resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==} + engines: {node: '>=12'} + wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} @@ -7637,6 +7788,11 @@ packages: resolution: {integrity: sha512-Hv9xxHtsJ9228wNhk03xnlDReUuWVvHwM4rIbjdAXYvHLs17xjuyF50N6XXFMN6N0omBaqgOok/MCK3At9fTAg==} engines: {node: ^4.5 || 6.* || >= 7.*} + yaml@2.5.1: + resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==} + engines: {node: '>= 14'} + hasBin: true + yargs-parser@21.1.1: resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} engines: {node: '>=12'} @@ -7680,6 +7836,8 @@ snapshots: eslint-plugin-n: 15.7.0(eslint@8.46.0) eslint-plugin-qunit: 7.3.4(eslint@8.46.0) + '@alloc/quick-lru@5.2.0': {} + '@ampproject/remapping@2.3.0': dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -10002,6 +10160,15 @@ snapshots: '@inquirer/figures@1.0.5': {} + '@isaacs/cliui@8.0.2': + dependencies: + string-width: 5.1.2 + string-width-cjs: string-width@4.2.3 + strip-ansi: 7.1.0 + strip-ansi-cjs: strip-ansi@6.0.1 + wrap-ansi: 8.1.0 + wrap-ansi-cjs: wrap-ansi@7.0.0 + '@istanbuljs/load-nyc-config@1.1.0': dependencies: camelcase: 5.3.1 @@ -10062,6 +10229,9 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 + '@pkgjs/parseargs@0.11.0': + optional: true + '@pnpm/constants@7.1.1': {} '@pnpm/error@5.0.3': @@ -10602,12 +10772,16 @@ snapshots: dependencies: color-convert: 2.0.1 + ansi-styles@6.2.1: {} + ansi-to-html@0.6.15: dependencies: entities: 2.2.0 ansicolors@0.2.1: {} + any-promise@1.3.0: {} + anymatch@2.0.0: dependencies: micromatch: 3.1.10 @@ -10631,6 +10805,8 @@ snapshots: delegates: 1.0.0 readable-stream: 3.6.2 + arg@5.0.2: {} + argparse@1.0.10: dependencies: sprintf-js: 1.0.3 @@ -11800,6 +11976,8 @@ snapshots: pascal-case: 3.1.2 tslib: 2.6.3 + camelcase-css@2.0.1: {} + camelcase@5.3.1: {} can-symlink@1.0.0: @@ -12333,6 +12511,8 @@ snapshots: detect-newline@3.1.0: {} + didyoumean@1.2.2: {} + diff@4.0.2: {} diff@5.2.0: {} @@ -12347,6 +12527,8 @@ snapshots: dependencies: path-type: 4.0.0 + dlv@1.1.3: {} + doctrine@2.1.0: dependencies: esutils: 2.0.3 @@ -12375,6 +12557,8 @@ snapshots: readable-stream: 2.3.8 stream-shift: 1.0.3 + eastasianwidth@0.2.0: {} + editions@1.3.4: {} editions@2.3.1: @@ -13761,6 +13945,8 @@ snapshots: emoji-regex@8.0.0: {} + emoji-regex@9.2.2: {} + emojis-list@3.0.0: {} encodeurl@1.0.2: {} @@ -14500,6 +14686,11 @@ snapshots: for-in@1.0.2: {} + foreground-child@3.3.0: + dependencies: + cross-spawn: 7.0.3 + signal-exit: 4.1.0 + forwarded@0.2.0: {} fragment-cache@0.2.1: @@ -14704,6 +14895,15 @@ snapshots: glob-to-regexp@0.4.1: {} + glob@10.4.5: + dependencies: + foreground-child: 3.3.0 + jackspeak: 3.4.3 + minimatch: 9.0.5 + minipass: 7.1.2 + package-json-from-dist: 1.0.1 + path-scurry: 1.11.1 + glob@5.0.15: dependencies: inflight: 1.0.6 @@ -15333,12 +15533,20 @@ snapshots: editions: 2.3.1 textextensions: 2.6.0 + jackspeak@3.4.3: + dependencies: + '@isaacs/cliui': 8.0.2 + optionalDependencies: + '@pkgjs/parseargs': 0.11.0 + jest-worker@27.5.1: dependencies: '@types/node': 20.14.9 merge-stream: 2.0.0 supports-color: 8.1.1 + jiti@1.21.6: {} + js-sha256@0.10.1: {} js-string-escape@1.0.1: {} @@ -15442,6 +15650,10 @@ snapshots: dependencies: immediate: 3.0.6 + lilconfig@2.1.0: {} + + lilconfig@3.1.2: {} + line-column@1.0.2: dependencies: isarray: 1.0.0 @@ -15785,6 +15997,10 @@ snapshots: dependencies: brace-expansion: 2.0.1 + minimatch@9.0.5: + dependencies: + brace-expansion: 2.0.1 + minimist@1.2.8: {} minipass@2.9.0: @@ -15871,6 +16087,12 @@ snapshots: mute-stream@1.0.0: {} + mz@2.7.0: + dependencies: + any-promise: 1.3.0 + object-assign: 4.1.1 + thenify-all: 1.6.0 + nan@2.20.0: optional: true @@ -16018,6 +16240,8 @@ snapshots: object-hash@1.3.1: {} + object-hash@3.0.0: {} + object-inspect@1.13.2: {} object-keys@1.1.1: {} @@ -16183,6 +16407,8 @@ snapshots: p-try@2.2.0: {} + package-json-from-dist@1.0.1: {} + pako@1.0.11: {} parallel-transform@1.2.0: @@ -16282,8 +16508,12 @@ snapshots: picomatch@2.3.1: {} + pify@2.3.0: {} + pify@4.0.1: {} + pirates@4.0.6: {} + pkg-dir@3.0.0: dependencies: find-up: 3.0.0 @@ -16312,6 +16542,25 @@ snapshots: possible-typed-array-names@1.0.0: {} + postcss-import@15.1.0(postcss@8.4.39): + dependencies: + postcss: 8.4.39 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + + postcss-js@4.0.1(postcss@8.4.39): + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.39 + + postcss-load-config@4.0.2(postcss@8.4.39): + dependencies: + lilconfig: 3.1.2 + yaml: 2.5.1 + optionalDependencies: + postcss: 8.4.39 + postcss-media-query-parser@0.2.3: {} postcss-modules-extract-imports@3.1.0(postcss@8.4.39): @@ -16335,6 +16584,11 @@ snapshots: icss-utils: 5.1.0(postcss@8.4.39) postcss: 8.4.39 + postcss-nested@6.2.0(postcss@8.4.39): + dependencies: + postcss: 8.4.39 + postcss-selector-parser: 6.1.2 + postcss-resolve-nested-selector@0.1.1: {} postcss-safe-parser@7.0.0(postcss@8.4.39): @@ -16350,6 +16604,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@6.1.2: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-value-parser@4.2.0: {} postcss@8.4.39: @@ -16498,6 +16757,10 @@ snapshots: react-is@16.13.1: {} + read-cache@1.0.0: + dependencies: + pify: 2.3.0 + readable-stream@1.0.34: dependencies: core-util-is: 1.0.3 @@ -17160,6 +17423,12 @@ snapshots: is-fullwidth-code-point: 3.0.0 strip-ansi: 6.0.1 + string-width@5.1.2: + dependencies: + eastasianwidth: 0.2.0 + emoji-regex: 9.2.2 + strip-ansi: 7.1.0 + string.prototype.matchall@4.0.11: dependencies: call-bind: 1.0.7 @@ -17337,6 +17606,16 @@ snapshots: - supports-color - typescript + sucrase@3.35.0: + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + commander: 4.1.1 + glob: 10.4.5 + lines-and-columns: 1.2.4 + mz: 2.7.0 + pirates: 4.0.6 + ts-interface-checker: 0.1.13 + supports-color@2.0.0: {} supports-color@5.5.0: @@ -17392,6 +17671,33 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 + tailwindcss@3.4.13: + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.6.0 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.6 + lilconfig: 2.1.0 + micromatch: 4.0.7 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.1 + postcss: 8.4.39 + postcss-import: 15.1.0(postcss@8.4.39) + postcss-js: 4.0.1(postcss@8.4.39) + postcss-load-config: 4.0.2(postcss@8.4.39) + postcss-nested: 6.2.0(postcss@8.4.39) + postcss-selector-parser: 6.1.0 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + tap-parser@7.0.0: dependencies: events-to-array: 1.1.2 @@ -17544,6 +17850,14 @@ snapshots: textextensions@2.6.0: {} + thenify-all@1.6.0: + dependencies: + thenify: 3.3.1 + + thenify@3.3.1: + dependencies: + any-promise: 1.3.0 + through2@2.0.5: dependencies: readable-stream: 2.3.8 @@ -17673,6 +17987,8 @@ snapshots: trim-right@1.0.1: {} + ts-interface-checker@0.1.13: {} + ts-invariant@0.10.3: dependencies: tslib: 2.6.3 @@ -18090,6 +18406,12 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 + wrap-ansi@8.1.0: + dependencies: + ansi-styles: 6.2.1 + string-width: 5.1.2 + strip-ansi: 7.1.0 + wrappy@1.0.2: {} write-file-atomic@3.0.3: @@ -18121,6 +18443,8 @@ snapshots: fs-extra: 4.0.3 lodash.merge: 4.6.2 + yaml@2.5.1: {} + yargs-parser@21.1.1: {} yargs@17.7.2: diff --git a/frontend/tests/index.html b/frontend/tests/index.html index ce87d237d..627eaffff 100644 --- a/frontend/tests/index.html +++ b/frontend/tests/index.html @@ -9,6 +9,7 @@ {{content-for "head"}} {{content-for "test-head"}} + From b475564e587237118d4d93dd7f83e0bacfc07a20 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Tue, 1 Oct 2024 08:51:27 +0200 Subject: [PATCH 002/132] chore(frontend): use postcss for tailwind --- frontend/.gitignore | 3 - frontend/app/index.html | 1 - frontend/app/styles/app.css | 8 + frontend/config/tailwind.config.js | 36 +++ frontend/config/tailwind/tailwind-input.css | 3 - frontend/config/tailwind/tailwind.config.js | 16 - frontend/ember-cli-build.js | 20 +- frontend/package.json | 16 +- frontend/pnpm-lock.yaml | 323 ++++++++++++++------ frontend/tests/index.html | 1 - 10 files changed, 295 insertions(+), 132 deletions(-) create mode 100644 frontend/app/styles/app.css create mode 100644 frontend/config/tailwind.config.js delete mode 100644 frontend/config/tailwind/tailwind-input.css delete mode 100644 frontend/config/tailwind/tailwind.config.js diff --git a/frontend/.gitignore b/frontend/.gitignore index 6205b5232..d10296ee0 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -1,9 +1,6 @@ # See https://help.github.com/ignore-files/ for more about ignoring files. - # compiled output -public/assets/tailwind.css - /dist /tmp diff --git a/frontend/app/index.html b/frontend/app/index.html index ae50a9050..8545e0805 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -5,7 +5,6 @@ Timed - diff --git a/frontend/app/styles/app.css b/frontend/app/styles/app.css new file mode 100644 index 000000000..378e28e8f --- /dev/null +++ b/frontend/app/styles/app.css @@ -0,0 +1,8 @@ +@import "tailwindcss/base"; +@import "./base.css" layer(base); + +@import "tailwindcss/components"; +@import "./components.css" layer(components); + +@import "tailwindcss/utilities"; +@import "./utilities.css" layer(utilities); diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js new file mode 100644 index 000000000..9479c3356 --- /dev/null +++ b/frontend/config/tailwind.config.js @@ -0,0 +1,36 @@ +"use strict"; +// located in /config/tailwind/ + +const path = require("path"); + +const forms = require("@tailwindcss/forms"); + +const appRoot = path.join(__dirname, "../"); +const appEntry = path.join(appRoot, "app"); +const relevantFilesGlob = "**/*.{html,js,ts,hbs,gjs,gts}"; + +module.exports = { + content: [path.join(appEntry, relevantFilesGlob)], + darkMode: "class", + theme: { + extend: { + fontFamily: { + sans: ["Source Sans Pro", "sans-serif"], + mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"], + }, + colors: { + background: "var(--background)", + border: "var(--border)", + danger: "var(--danger)", + foreground: "var(--foreground)", + "foreground-muted": "var(--foreground-muted)", + primary: "var(--primary)", + secondary: "var(--secondary)", + success: "var(--success)", + warning: "var(--warning)", + }, + }, + }, + plugins: [forms()], + safelist: [{ pattern: /noUi-/ }], +}; diff --git a/frontend/config/tailwind/tailwind-input.css b/frontend/config/tailwind/tailwind-input.css deleted file mode 100644 index b5c61c956..000000000 --- a/frontend/config/tailwind/tailwind-input.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/frontend/config/tailwind/tailwind.config.js b/frontend/config/tailwind/tailwind.config.js deleted file mode 100644 index 44cff368d..000000000 --- a/frontend/config/tailwind/tailwind.config.js +++ /dev/null @@ -1,16 +0,0 @@ -"use strict"; -// located in /config/tailwind/ - -const path = require("path"); - -const appRoot = path.join(__dirname, "../../"); -const appEntry = path.join(appRoot, "app"); -const relevantFilesGlob = "**/*.{html,js,ts,hbs,gjs,gts}"; - -module.exports = { - content: [path.join(appEntry, relevantFilesGlob)], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/frontend/ember-cli-build.js b/frontend/ember-cli-build.js index a83d50b35..019771a56 100644 --- a/frontend/ember-cli-build.js +++ b/frontend/ember-cli-build.js @@ -6,14 +6,28 @@ const EmberApp = require("ember-cli/lib/broccoli/ember-app"); module.exports = function (defaults) { const app = new EmberApp(defaults, { + postcssOptions: { + compile: { + plugins: [ + { module: require("postcss-import") }, + { + module: require("tailwindcss"), + options: { + config: "./config/tailwind.config.js", + }, + }, + { module: require("autoprefixer"), options: {} }, + ], + }, + }, babel: { plugins: [ require.resolve("ember-concurrency/async-arrow-task-transform"), ], }, - sassOptions: { - onlyIncluded: true, - }, + // sassOptions: { + // onlyIncluded: true, + // }, "ember-fetch": { preferNative: true, }, diff --git a/frontend/package.json b/frontend/package.json index 97d14737a..b8b320e0c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,7 +10,7 @@ "test": "tests" }, "scripts": { - "build": "npm run tailwind:build && ember build --environment=production", + "build": "ember build --environment=production", "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"", "lint:scss": "stylelint \"**/*.scss\"", "lint:scss:fix": "concurrently \"npm:lint:scss -- --fix\"", @@ -19,12 +19,9 @@ "lint:hbs:fix": "ember-template-lint . --fix", "lint:js": "eslint --config .eslintrc.js .", "lint:js:fix": "eslint --config .eslintrc.js . --fix", - "start": "concurrently 'npm:start:ember' 'npm:tailwind:watch' --names 'serve,styles'", + "start": "ember server --proxy https://timed.localhost --secure-proxy=false", "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"", - "test:ember": "ember test", - "tailwind:build": "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css", - "tailwind:watch": "npx tailwindcss -c ./config/tailwind/tailwind.config.js -i ./config/tailwind/tailwind-input.css -o ./public/assets/tailwind.css --watch", - "start:ember": "ember server --proxy https://timed.localhost --secure-proxy=false" + "test:ember": "ember test" }, "devDependencies": { "@adfinis/eslint-config": "^2.1.1", @@ -47,6 +44,8 @@ "@glimmer/tracking": "1.1.2", "@html-next/vertical-collection": "4.0.2", "@sentry/ember": "^7.98.0", + "@tailwindcss/forms": "^0.5.9", + "autoprefixer": "^10.4.20", "broccoli-asset-rev": "^3.0.0", "broccoli-funnel": "^3.0.8", "concurrently": "^8.0.1", @@ -67,7 +66,7 @@ "ember-cli-inject-live-reload": "2.1.0", "ember-cli-mirage": "^3.0.0", "ember-cli-nouislider": "derrabauke/ember-cli-nouislider#cf0d87986cf25d5795e1edd6c8b9f008c5b39872", - "ember-cli-sass": "11.0.1", + "ember-cli-postcss": "^8.2.0", "ember-cli-sri": "2.1.1", "ember-cli-terser": "4.0.2", "ember-composable-helpers": "5.0.0", @@ -115,10 +114,11 @@ "lodash.uniqby": "^4.7.0", "miragejs": "^0.1.48", "moment": "^2.30.1", + "postcss": "^8.4.47", + "postcss-import": "^16.1.0", "prettier": "2.8.8", "qunit": "2.19.4", "qunit-dom": "3.0.0", - "sass": "1.58.3", "shepherd.js": "^11.2.0", "simplebar": "^6.2.5", "stylelint": "^16.4.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index daa974e7d..91031de4b 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -68,6 +68,12 @@ importers: '@sentry/ember': specifier: ^7.98.0 version: 7.118.0(@glint/template@1.4.0)(webpack@5.92.1) + '@tailwindcss/forms': + specifier: ^0.5.9 + version: 0.5.9(tailwindcss@3.4.13) + autoprefixer: + specifier: ^10.4.20 + version: 10.4.20(postcss@8.4.47) broccoli-asset-rev: specifier: ^3.0.0 version: 3.0.0 @@ -128,9 +134,9 @@ importers: ember-cli-nouislider: specifier: derrabauke/ember-cli-nouislider#cf0d87986cf25d5795e1edd6c8b9f008c5b39872 version: https://codeload.github.com/derrabauke/ember-cli-nouislider/tar.gz/cf0d87986cf25d5795e1edd6c8b9f008c5b39872 - ember-cli-sass: - specifier: 11.0.1 - version: 11.0.1 + ember-cli-postcss: + specifier: ^8.2.0 + version: 8.2.0 ember-cli-sri: specifier: 2.1.1 version: 2.1.1 @@ -272,6 +278,12 @@ importers: moment: specifier: ^2.30.1 version: 2.30.1 + postcss: + specifier: ^8.4.47 + version: 8.4.47 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.47) prettier: specifier: 2.8.8 version: 2.8.8 @@ -281,9 +293,6 @@ importers: qunit-dom: specifier: 3.0.0 version: 3.0.0 - sass: - specifier: 1.58.3 - version: 1.58.3 shepherd.js: specifier: ^11.2.0 version: 11.2.0 @@ -298,7 +307,7 @@ importers: version: 32.0.0(stylelint@16.6.1(typescript@5.5.2)) stylelint-config-standard-scss: specifier: ^13.1.0 - version: 13.1.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.2)) + version: 13.1.0(postcss@8.4.47)(stylelint@16.6.1(typescript@5.5.2)) stylelint-prettier: specifier: ^3.0.0 version: 3.0.0(prettier@2.8.8)(stylelint@16.6.1(typescript@5.5.2)) @@ -1644,6 +1653,11 @@ packages: '@socket.io/component-emitter@3.1.2': resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==} + '@tailwindcss/forms@0.5.9': + resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==} + peerDependencies: + tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20' + '@types/acorn@4.0.6': resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} @@ -2150,6 +2164,13 @@ packages: engines: {node: '>= 4.5.0'} hasBin: true + autoprefixer@10.4.20: + resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -2495,6 +2516,14 @@ packages: resolution: {integrity: sha512-a4zUsWtA1uns1K7p9rExYVYG99rdKeGRymW0qOCNkvDPHQxVi3yVyJHhQbM3EZwdt2E0mnhr5e0c/bPpJ7p3Wg==} engines: {node: 10.* || >= 12.*} + broccoli-postcss-single@5.0.2: + resolution: {integrity: sha512-r4eWtz/5uihtHwOszViWwV6weJr9VryvaqtVo1DOh4gL+TbTyU+NX+Y+t9TqUw99OtuivMz4uHLLH7zZECbZmw==} + engines: {node: '>= 10'} + + broccoli-postcss@6.1.0: + resolution: {integrity: sha512-I8+DHq5xcCBHU0PpCtDMayAmSUVx07CqAquUpdlNUHckXeD//cUFf4aFQllnZBhF8Z86YLhuA+j7qvCYYgBXRg==} + engines: {node: '>= 10'} + broccoli-rollup@2.1.1: resolution: {integrity: sha512-aky/Ovg5DbsrsJEx2QCXxHLA6ZR+9u1TNVTf85soP4gL8CjGGKQ/JU8R3BZ2ntkWzo6/83RCKzX6O+nlNKR5MQ==} engines: {node: '>=4.0'} @@ -2503,10 +2532,6 @@ packages: resolution: {integrity: sha512-QdMuXHwsdz/LOS8zu4HP91Sfi4ofimrOXoYP/lrPdRh7lJYD87Lfq4WzzUhGHsxMfzANIEvl/7qVHKD3cFJ4tA==} engines: {node: '>=12.0'} - broccoli-sass-source-maps@4.2.4: - resolution: {integrity: sha512-MHwqLkgYW24T9k2OzprdYtERCAaO3wuSGqKna8QcAzCjDxYyoojisg2lfSWj9k2G72PlACUjUg8O39jttE84og==} - engines: {node: '>=10.24.1'} - broccoli-slow-trees@3.1.0: resolution: {integrity: sha512-FRI7mRTk2wjIDrdNJd6znS7Kmmne4VkAkl8Ix1R/VoePFMD0g0tEl671xswzFqaRjpT9Qu+CC4hdXDLDJBuzMw==} @@ -2571,6 +2596,11 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + browserslist@4.24.0: + resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + bser@2.1.1: resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==} @@ -2650,6 +2680,9 @@ packages: caniuse-lite@1.0.30001639: resolution: {integrity: sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==} + caniuse-lite@1.0.30001664: + resolution: {integrity: sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==} + capture-exit@2.0.0: resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==} engines: {node: 6.* || 8.* || >= 10.*} @@ -3342,6 +3375,9 @@ packages: electron-to-chromium@1.4.815: resolution: {integrity: sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==} + electron-to-chromium@1.5.29: + resolution: {integrity: sha512-PF8n2AlIhCKXQ+gTpiJi0VhcHDb69kYX4MtCiivctc2QD3XuNZ/XIOlbGzt7WAjjEev0TtaH6Cu3arZExm5DOw==} + elliptic@6.5.5: resolution: {integrity: sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==} @@ -3494,14 +3530,14 @@ packages: ember-cli-path-utils@1.0.0: resolution: {integrity: sha512-Qq0vvquzf4cFHoDZavzkOy3Izc893r/5spspWgyzLCPTaG78fM3HsrjZm7UWEltbXUqwHHYrqZd/R0jS08NqSA==} + ember-cli-postcss@8.2.0: + resolution: {integrity: sha512-S2HQqmNtcezmLSt/OPZKCXg+aRV7yFoZp+tn1HCLSbR/eU95xl7MWxTjbj/wOIGMfhggy/hBT2+STDh8mGuVpw==} + engines: {node: '>= 14'} + ember-cli-preprocess-registry@5.0.1: resolution: {integrity: sha512-Jb2zbE5Kfe56Nf4IpdaQ10zZ72p/RyLdgE5j5/lKG3I94QHlq+7AkAd18nPpb5OUeRUT13yQTAYpU+MbjpKTtg==} engines: {node: 16.* || >= 18} - ember-cli-sass@11.0.1: - resolution: {integrity: sha512-RMlFPMK4kaB+67seF/IIoY3EC4rRd+L58q+lyElrxB3FcQTgph/qmGwtqf9Up7m3SDbPiA7cccCOSmgReMgCXA==} - engines: {node: '>= 10.*'} - ember-cli-sri@2.1.1: resolution: {integrity: sha512-YG/lojDxkur9Bnskt7xB6gUOtJ6aPl/+JyGYm9HNDk3GECVHB3SMN3rlGhDKHa1ndS5NK2W2TSLb9bzRbGlMdg==} engines: {node: '>= 0.10.0'} @@ -3961,6 +3997,10 @@ packages: resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} + escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} @@ -4404,6 +4444,9 @@ packages: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} + fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + fragment-cache@0.2.1: resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==} engines: {node: '>=0.10.0'} @@ -4833,9 +4876,6 @@ packages: immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} - immutable@4.3.6: - resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==} - import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -5557,6 +5597,9 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} + merge@2.1.1: + resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==} + methods@1.1.2: resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} engines: {node: '>= 0.6'} @@ -5600,6 +5643,10 @@ packages: peerDependencies: webpack: ^5.0.0 + mini-svg-data-uri@1.4.4: + resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} + hasBin: true + minimalistic-assert@1.0.1: resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==} @@ -5768,6 +5815,9 @@ packages: node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} + node-watch@0.7.3: resolution: {integrity: sha512-3l4E8uMPY1HdMMryPRUAl+oIHtXtyiTlIiESNSVSNxcPfzAFzeTbXFQkZfAwBbo0B1qMSG8nUABx+Gd+YrbKrQ==} engines: {node: '>=6'} @@ -5784,6 +5834,10 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + nouislider@14.7.0: resolution: {integrity: sha512-4RtQ1+LHJKesDCNJrXkQcwXAWCrC2aggdLYMstS/G5fEWL+fXZbUA9pwVNHFghMGuFGRATlDLNInRaPeRKzpFQ==} @@ -6173,6 +6227,9 @@ packages: picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} + picocolors@1.1.0: + resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} + picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -6223,6 +6280,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -6300,8 +6363,8 @@ packages: postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - postcss@8.4.39: - resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==} + postcss@8.4.47: + resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} engines: {node: ^10 || ^12 || >=14} prelude-ls@1.2.1: @@ -6737,11 +6800,6 @@ packages: engines: {node: 10.* || >= 12.*} hasBin: true - sass@1.58.3: - resolution: {integrity: sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==} - engines: {node: '>=12.0.0'} - hasBin: true - schema-utils@1.0.0: resolution: {integrity: sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==} engines: {node: '>= 4'} @@ -6925,6 +6983,10 @@ packages: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + source-map-resolve@0.5.3: resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==} deprecated: See https://github.com/lydell/source-map-resolve#deprecated @@ -7551,6 +7613,12 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + update-browserslist-db@1.1.1: + resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -10359,6 +10427,11 @@ snapshots: '@socket.io/component-emitter@3.1.2': {} + '@tailwindcss/forms@0.5.9(tailwindcss@3.4.13)': + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.4.13 + '@types/acorn@4.0.6': dependencies: '@types/estree': 1.0.5 @@ -10942,6 +11015,16 @@ snapshots: atob@2.1.2: {} + autoprefixer@10.4.20(postcss@8.4.47): + dependencies: + browserslist: 4.24.0 + caniuse-lite: 1.0.30001664 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.1 + postcss: 8.4.47 + postcss-value-parser: 4.2.0 + available-typed-arrays@1.0.7: dependencies: possible-typed-array-names: 1.0.0 @@ -11689,6 +11772,27 @@ snapshots: transitivePeerDependencies: - supports-color + broccoli-postcss-single@5.0.2: + dependencies: + broccoli-caching-writer: 3.0.3 + include-path-searcher: 0.1.0 + minimist: 1.2.8 + mkdirp: 1.0.4 + object-assign: 4.1.1 + postcss: 8.4.47 + transitivePeerDependencies: + - supports-color + + broccoli-postcss@6.1.0: + dependencies: + broccoli-funnel: 3.0.8 + broccoli-persistent-filter: 3.1.3 + minimist: 1.2.8 + object-assign: 4.1.1 + postcss: 8.4.47 + transitivePeerDependencies: + - supports-color + broccoli-rollup@2.1.1: dependencies: '@types/node': 9.6.61 @@ -11719,14 +11823,6 @@ snapshots: transitivePeerDependencies: - supports-color - broccoli-sass-source-maps@4.2.4: - dependencies: - broccoli-caching-writer: 3.0.3 - include-path-searcher: 0.1.0 - rsvp: 4.8.5 - transitivePeerDependencies: - - supports-color - broccoli-slow-trees@3.1.0: dependencies: heimdalljs: 0.2.6 @@ -11894,6 +11990,13 @@ snapshots: node-releases: 2.0.14 update-browserslist-db: 1.0.16(browserslist@4.23.1) + browserslist@4.24.0: + dependencies: + caniuse-lite: 1.0.30001664 + electron-to-chromium: 1.5.29 + node-releases: 2.0.18 + update-browserslist-db: 1.1.1(browserslist@4.24.0) + bser@2.1.1: dependencies: node-int64: 0.4.0 @@ -11995,6 +12098,8 @@ snapshots: caniuse-lite@1.0.30001639: {} + caniuse-lite@1.0.30001664: {} + capture-exit@2.0.0: dependencies: rsvp: 4.8.5 @@ -12365,13 +12470,13 @@ snapshots: css-loader@5.2.7(webpack@5.92.1): dependencies: - icss-utils: 5.1.0(postcss@8.4.39) + icss-utils: 5.1.0(postcss@8.4.47) loader-utils: 2.0.4 - postcss: 8.4.39 - postcss-modules-extract-imports: 3.1.0(postcss@8.4.39) - postcss-modules-local-by-default: 4.0.5(postcss@8.4.39) - postcss-modules-scope: 3.2.0(postcss@8.4.39) - postcss-modules-values: 4.0.0(postcss@8.4.39) + postcss: 8.4.47 + postcss-modules-extract-imports: 3.1.0(postcss@8.4.47) + postcss-modules-local-by-default: 4.0.5(postcss@8.4.47) + postcss-modules-scope: 3.2.0(postcss@8.4.47) + postcss-modules-values: 4.0.0(postcss@8.4.47) postcss-value-parser: 4.2.0 schema-utils: 3.3.0 semver: 7.6.2 @@ -12570,6 +12675,8 @@ snapshots: electron-to-chromium@1.4.815: {} + electron-to-chromium@1.5.29: {} + elliptic@6.5.5: dependencies: bn.js: 4.12.0 @@ -12989,19 +13096,20 @@ snapshots: ember-cli-path-utils@1.0.0: {} - ember-cli-preprocess-registry@5.0.1: + ember-cli-postcss@8.2.0: dependencies: - broccoli-funnel: 3.0.8 - debug: 4.3.5 + broccoli-merge-trees: 4.2.0 + broccoli-postcss: 6.1.0 + broccoli-postcss-single: 5.0.2 + ember-cli-babel: 7.26.11 + merge: 2.1.1 transitivePeerDependencies: - supports-color - ember-cli-sass@11.0.1: + ember-cli-preprocess-registry@5.0.1: dependencies: - broccoli-funnel: 2.0.2 - broccoli-merge-trees: 3.0.2 - broccoli-sass-source-maps: 4.2.4 - ember-cli-version-checker: 2.2.0 + broccoli-funnel: 3.0.8 + debug: 4.3.5 transitivePeerDependencies: - supports-color @@ -14091,6 +14199,8 @@ snapshots: escalade@3.1.2: {} + escalade@3.2.0: {} + escape-html@1.0.3: {} escape-string-regexp@1.0.5: {} @@ -14693,6 +14803,8 @@ snapshots: forwarded@0.2.0: {} + fraction.js@4.3.7: {} + fragment-cache@0.2.1: dependencies: map-cache: 0.2.2 @@ -15208,9 +15320,9 @@ snapshots: safer-buffer: 2.1.2 optional: true - icss-utils@5.1.0(postcss@8.4.39): + icss-utils@5.1.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 ieee754@1.2.1: {} @@ -15220,8 +15332,6 @@ snapshots: immediate@3.0.6: {} - immutable@4.3.6: {} - import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -15929,6 +16039,8 @@ snapshots: merge2@1.4.1: {} + merge@2.1.1: {} + methods@1.1.2: {} micromatch@3.1.10: @@ -15977,6 +16089,8 @@ snapshots: tapable: 2.2.1 webpack: 5.92.1 + mini-svg-data-uri@1.4.4: {} + minimalistic-assert@1.0.1: {} minimalistic-crypto-utils@1.0.1: {} @@ -16186,6 +16300,8 @@ snapshots: node-releases@2.0.14: {} + node-releases@2.0.18: {} + node-watch@0.7.3: {} nopt@3.0.6: @@ -16198,6 +16314,8 @@ snapshots: normalize-path@3.0.0: {} + normalize-range@0.1.2: {} + nouislider@14.7.0: {} npm-git-info@1.0.3: {} @@ -16506,6 +16624,8 @@ snapshots: picocolors@1.0.1: {} + picocolors@1.1.0: {} + picomatch@2.3.1: {} pify@2.3.0: {} @@ -16542,62 +16662,69 @@ snapshots: possible-typed-array-names@1.0.0: {} - postcss-import@15.1.0(postcss@8.4.39): + postcss-import@15.1.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - postcss-js@4.0.1(postcss@8.4.39): + postcss-import@16.1.0(postcss@8.4.47): + dependencies: + postcss: 8.4.47 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + + postcss-js@4.0.1(postcss@8.4.47): dependencies: camelcase-css: 2.0.1 - postcss: 8.4.39 + postcss: 8.4.47 - postcss-load-config@4.0.2(postcss@8.4.39): + postcss-load-config@4.0.2(postcss@8.4.47): dependencies: lilconfig: 3.1.2 yaml: 2.5.1 optionalDependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-media-query-parser@0.2.3: {} - postcss-modules-extract-imports@3.1.0(postcss@8.4.39): + postcss-modules-extract-imports@3.1.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 - postcss-modules-local-by-default@4.0.5(postcss@8.4.39): + postcss-modules-local-by-default@4.0.5(postcss@8.4.47): dependencies: - icss-utils: 5.1.0(postcss@8.4.39) - postcss: 8.4.39 - postcss-selector-parser: 6.1.0 + icss-utils: 5.1.0(postcss@8.4.47) + postcss: 8.4.47 + postcss-selector-parser: 6.1.2 postcss-value-parser: 4.2.0 - postcss-modules-scope@3.2.0(postcss@8.4.39): + postcss-modules-scope@3.2.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 - postcss-selector-parser: 6.1.0 + postcss: 8.4.47 + postcss-selector-parser: 6.1.2 - postcss-modules-values@4.0.0(postcss@8.4.39): + postcss-modules-values@4.0.0(postcss@8.4.47): dependencies: - icss-utils: 5.1.0(postcss@8.4.39) - postcss: 8.4.39 + icss-utils: 5.1.0(postcss@8.4.47) + postcss: 8.4.47 - postcss-nested@6.2.0(postcss@8.4.39): + postcss-nested@6.2.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-selector-parser: 6.1.2 postcss-resolve-nested-selector@0.1.1: {} - postcss-safe-parser@7.0.0(postcss@8.4.39): + postcss-safe-parser@7.0.0(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 - postcss-scss@4.0.9(postcss@8.4.39): + postcss-scss@4.0.9(postcss@8.4.47): dependencies: - postcss: 8.4.39 + postcss: 8.4.47 postcss-selector-parser@6.1.0: dependencies: @@ -16611,11 +16738,11 @@ snapshots: postcss-value-parser@4.2.0: {} - postcss@8.4.39: + postcss@8.4.47: dependencies: nanoid: 3.3.7 - picocolors: 1.0.1 - source-map-js: 1.2.0 + picocolors: 1.1.0 + source-map-js: 1.2.1 prelude-ls@1.2.1: {} @@ -17071,12 +17198,6 @@ snapshots: minimist: 1.2.8 walker: 1.0.8 - sass@1.58.3: - dependencies: - chokidar: 3.6.0 - immutable: 4.3.6 - source-map-js: 1.2.0 - schema-utils@1.0.0: dependencies: ajv: 6.12.6 @@ -17326,6 +17447,8 @@ snapshots: source-map-js@1.2.0: {} + source-map-js@1.2.1: {} + source-map-resolve@0.5.3: dependencies: atob: 2.1.2 @@ -17511,14 +17634,14 @@ snapshots: styled_string@0.0.1: {} - stylelint-config-recommended-scss@14.0.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.2)): + stylelint-config-recommended-scss@14.0.0(postcss@8.4.47)(stylelint@16.6.1(typescript@5.5.2)): dependencies: - postcss-scss: 4.0.9(postcss@8.4.39) + postcss-scss: 4.0.9(postcss@8.4.47) stylelint: 16.6.1(typescript@5.5.2) stylelint-config-recommended: 14.0.1(stylelint@16.6.1(typescript@5.5.2)) stylelint-scss: 6.3.2(stylelint@16.6.1(typescript@5.5.2)) optionalDependencies: - postcss: 8.4.39 + postcss: 8.4.47 stylelint-config-recommended@11.0.0(stylelint@16.6.1(typescript@5.5.2)): dependencies: @@ -17528,13 +17651,13 @@ snapshots: dependencies: stylelint: 16.6.1(typescript@5.5.2) - stylelint-config-standard-scss@13.1.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.2)): + stylelint-config-standard-scss@13.1.0(postcss@8.4.47)(stylelint@16.6.1(typescript@5.5.2)): dependencies: stylelint: 16.6.1(typescript@5.5.2) - stylelint-config-recommended-scss: 14.0.0(postcss@8.4.39)(stylelint@16.6.1(typescript@5.5.2)) + stylelint-config-recommended-scss: 14.0.0(postcss@8.4.47)(stylelint@16.6.1(typescript@5.5.2)) stylelint-config-standard: 36.0.1(stylelint@16.6.1(typescript@5.5.2)) optionalDependencies: - postcss: 8.4.39 + postcss: 8.4.47 stylelint-config-standard@32.0.0(stylelint@16.6.1(typescript@5.5.2)): dependencies: @@ -17590,9 +17713,9 @@ snapshots: micromatch: 4.0.7 normalize-path: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.39 + postcss: 8.4.47 postcss-resolve-nested-selector: 0.1.1 - postcss-safe-parser: 7.0.0(postcss@8.4.39) + postcss-safe-parser: 7.0.0(postcss@8.4.47) postcss-selector-parser: 6.1.0 postcss-value-parser: 4.2.0 resolve-from: 5.0.0 @@ -17687,11 +17810,11 @@ snapshots: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.39 - postcss-import: 15.1.0(postcss@8.4.39) - postcss-js: 4.0.1(postcss@8.4.39) - postcss-load-config: 4.0.2(postcss@8.4.39) - postcss-nested: 6.2.0(postcss@8.4.39) + postcss: 8.4.47 + postcss-import: 15.1.0(postcss@8.4.47) + postcss-js: 4.0.1(postcss@8.4.47) + postcss-load-config: 4.0.2(postcss@8.4.47) + postcss-nested: 6.2.0(postcss@8.4.47) postcss-selector-parser: 6.1.0 resolve: 1.22.8 sucrase: 3.35.0 @@ -18141,6 +18264,12 @@ snapshots: escalade: 3.1.2 picocolors: 1.0.1 + update-browserslist-db@1.1.1(browserslist@4.24.0): + dependencies: + browserslist: 4.24.0 + escalade: 3.2.0 + picocolors: 1.1.0 + uri-js@4.4.1: dependencies: punycode: 2.3.1 diff --git a/frontend/tests/index.html b/frontend/tests/index.html index 627eaffff..ce87d237d 100644 --- a/frontend/tests/index.html +++ b/frontend/tests/index.html @@ -9,7 +9,6 @@ {{content-for "head"}} {{content-for "test-head"}} - From 8941817660360f4046242f14bc39704dc45282fc Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Tue, 1 Oct 2024 08:54:11 +0200 Subject: [PATCH 003/132] chore(frontend): delete scss styles --- frontend/app/styles/activities.scss | 74 - frontend/app/styles/adcssy.scss | 4148 ----------------- frontend/app/styles/analysis.scss | 65 - frontend/app/styles/app.scss | 457 -- frontend/app/styles/attendances.scss | 15 - frontend/app/styles/badge.scss | 35 - .../styles/components/attendance-slider.scss | 81 - .../app/styles/components/balance-donut.scss | 108 - .../app/styles/components/date-buttons.scss | 3 - .../styles/components/date-navigation.scss | 22 - .../components/filter-sidebar--group.scss | 47 - .../components/filter-sidebar--label.scss | 11 - .../app/styles/components/loading-icon.scss | 84 - .../app/styles/components/magic-link-btn.scss | 7 - frontend/app/styles/components/nav-top.scss | 53 - .../styles/components/progress-tooltip.scss | 81 - .../app/styles/components/record-button.scss | 80 - .../styles/components/scroll-container.scss | 25 - .../app/styles/components/sort-header.scss | 4 - .../styles/components/statistic-list-bar.scss | 85 - .../app/styles/components/sy-calendar.scss | 44 - .../app/styles/components/sy-checkbox.scss | 6 - .../app/styles/components/sy-datepicker.scss | 15 - .../components/sy-durationpicker-day.scss | 18 - frontend/app/styles/components/sy-modal.scss | 17 - frontend/app/styles/components/sy-toggle.scss | 26 - .../app/styles/components/timed-clock.scss | 25 - .../app/styles/components/tracking-bar.scss | 36 - .../components/weekly-overview-benchmark.scss | 39 - .../components/weekly-overview-day.scss | 74 - .../styles/components/weekly-overview.scss | 15 - .../app/styles/components/welcome-modal.scss | 5 - .../app/styles/ember-power-select-custom.scss | 137 - frontend/app/styles/filter-sidebar.scss | 132 - frontend/app/styles/form-list.scss | 122 - frontend/app/styles/loader.scss | 49 - frontend/app/styles/login.scss | 18 - frontend/app/styles/projects.scss | 100 - frontend/app/styles/reports.scss | 78 - frontend/app/styles/statistics.scss | 4 - frontend/app/styles/toolbar.scss | 15 - frontend/app/styles/tour.scss | 85 - frontend/app/styles/users-navigation.scss | 49 - frontend/app/styles/users.scss | 262 -- frontend/app/styles/variables.scss | 41 - 45 files changed, 6897 deletions(-) delete mode 100644 frontend/app/styles/activities.scss delete mode 100644 frontend/app/styles/adcssy.scss delete mode 100644 frontend/app/styles/analysis.scss delete mode 100644 frontend/app/styles/app.scss delete mode 100644 frontend/app/styles/attendances.scss delete mode 100644 frontend/app/styles/badge.scss delete mode 100644 frontend/app/styles/components/attendance-slider.scss delete mode 100644 frontend/app/styles/components/balance-donut.scss delete mode 100644 frontend/app/styles/components/date-buttons.scss delete mode 100644 frontend/app/styles/components/date-navigation.scss delete mode 100644 frontend/app/styles/components/filter-sidebar--group.scss delete mode 100644 frontend/app/styles/components/filter-sidebar--label.scss delete mode 100644 frontend/app/styles/components/loading-icon.scss delete mode 100644 frontend/app/styles/components/magic-link-btn.scss delete mode 100644 frontend/app/styles/components/nav-top.scss delete mode 100644 frontend/app/styles/components/progress-tooltip.scss delete mode 100644 frontend/app/styles/components/record-button.scss delete mode 100644 frontend/app/styles/components/scroll-container.scss delete mode 100644 frontend/app/styles/components/sort-header.scss delete mode 100644 frontend/app/styles/components/statistic-list-bar.scss delete mode 100644 frontend/app/styles/components/sy-calendar.scss delete mode 100644 frontend/app/styles/components/sy-checkbox.scss delete mode 100644 frontend/app/styles/components/sy-datepicker.scss delete mode 100644 frontend/app/styles/components/sy-durationpicker-day.scss delete mode 100644 frontend/app/styles/components/sy-modal.scss delete mode 100644 frontend/app/styles/components/sy-toggle.scss delete mode 100644 frontend/app/styles/components/timed-clock.scss delete mode 100644 frontend/app/styles/components/tracking-bar.scss delete mode 100644 frontend/app/styles/components/weekly-overview-benchmark.scss delete mode 100644 frontend/app/styles/components/weekly-overview-day.scss delete mode 100644 frontend/app/styles/components/weekly-overview.scss delete mode 100644 frontend/app/styles/components/welcome-modal.scss delete mode 100644 frontend/app/styles/ember-power-select-custom.scss delete mode 100644 frontend/app/styles/filter-sidebar.scss delete mode 100644 frontend/app/styles/form-list.scss delete mode 100644 frontend/app/styles/loader.scss delete mode 100644 frontend/app/styles/login.scss delete mode 100644 frontend/app/styles/projects.scss delete mode 100644 frontend/app/styles/reports.scss delete mode 100644 frontend/app/styles/statistics.scss delete mode 100644 frontend/app/styles/toolbar.scss delete mode 100644 frontend/app/styles/tour.scss delete mode 100644 frontend/app/styles/users-navigation.scss delete mode 100644 frontend/app/styles/users.scss delete mode 100644 frontend/app/styles/variables.scss diff --git a/frontend/app/styles/activities.scss b/frontend/app/styles/activities.scss deleted file mode 100644 index 45c929145..000000000 --- a/frontend/app/styles/activities.scss +++ /dev/null @@ -1,74 +0,0 @@ -.activities { - display: flex; - flex-direction: row-reverse; -} - -.table--activity-edit > tbody > tr > td { - vertical-align: middle; - text-align: center; - - &:nth-child(1) { - width: 80px; - } - - &:nth-child(2) { - width: 25px; - } - - &:nth-child(3) { - width: 80px; - } -} - -.activities-list { - flex: 1 1 auto; - overflow: hidden; - - tr.selected td { - background-color: #1e87f0; - color: #fff; - } -} - -.activities-edit { - flex: 0 1 100%; - - &:empty { - flex-basis: 0%; - } - - &:not(:empty) + .activities-list { - flex-basis: 0%; - } -} - -.transferred { - cursor: not-allowed; - color: #a29b96; -} - -.checkboxes { - display: flex; - justify-content: space-around; -} - -@media #{$lg-viewport} { - .activities-edit:not(:empty) + .activities-list { - flex-basis: 70%; - } - - .activities-edit { - padding-left: 1rem; - flex: 0 1 45%; - } - - .activities-edit:empty { - padding-left: 0; - } -} - -@media #{$xl-viewport} { - .activities-edit { - flex-basis: 30%; - } -} diff --git a/frontend/app/styles/adcssy.scss b/frontend/app/styles/adcssy.scss deleted file mode 100644 index e60a547ee..000000000 --- a/frontend/app/styles/adcssy.scss +++ /dev/null @@ -1,4148 +0,0 @@ -.color-primary { - color: #5b8edb; -} - -.color-secondary { - color: #a29b96; -} - -.color-tertiary { - color: #867f7c; -} - -.color-success { - color: #5cb85c; -} - -.color-info { - color: #5bc0de; -} - -.color-warning { - color: #f0ad4e; -} - -.color-danger { - color: #d9534f; -} - -.background-color-primary { - background-color: #5b8edb; -} - -.background-color-secondary { - background-color: #a29b96; -} - -.background-color-tertiary { - background-color: #867f7c; -} - -.background-color-success { - background-color: #5cb85c; -} - -.background-color-info { - background-color: #5bc0de; -} - -.background-color-warning { - background-color: #f0ad4e; -} - -.background-color-danger { - background-color: #d9534f; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} - -@font-face { - font-family: TheSansLT; - font-weight: 300; - font-style: normal; - src: url("../fonts/TheSans_LT_300_.eot") format("embedded-opentype"), - url("../fonts/TheSans_LT_300_.svg") format("svg"), - url("../fonts/TheSans_LT_300_.woff") format("woff"); -} - -@font-face { - font-family: TheSansLT; - font-weight: 300; - font-style: italic; - src: url("../fonts/TheSans_LT_300i.eot") format("embedded-opentype"), - url("../fonts/TheSans_LT_300i.svg") format("svg"), - url("../fonts/TheSans_LT_300i.woff") format("woff"); -} - -@font-face { - font-family: TheSansLT; - font-weight: 500; - font-style: normal; - src: url("../fonts/TheSans_LT_500_.eot") format("embedded-opentype"), - url("../fonts/TheSans_LT_500_.svg") format("svg"), - url("../fonts/TheSans_LT_500_.woff") format("woff"); -} - -@font-face { - font-family: TheSansLT; - font-weight: 500; - font-style: italic; - src: url("../fonts/TheSans_LT_500i.eot") format("embedded-opentype"), - url("../fonts/TheSans_LT_500i.svg") format("svg"), - url("../fonts/TheSans_LT_500i.woff") format("woff"); -} - -.media-debug::before { - content: "mo"; - text-transform: uppercase; - position: fixed; - display: block; - top: 0; - right: 0; - padding: 5px; - border-left: 1px solid; - border-bottom: 1px solid; - border-color: #e1e1e1; - background-color: rgb(92 184 92 / 70%); - z-index: 99999; -} - -@media only screen and (width >=480px) { - .media-debug::before { - content: "xs"; - background-color: rgb(132 152 88 / 76%); - } -} - -@media only screen and (width >=768px) { - .media-debug::before { - content: "sm"; - background-color: rgb(161 128 85 / 82%); - } -} - -@media only screen and (width >=992px) { - .media-debug::before { - content: "md"; - background-color: rgb(184 110 82 / 88%); - } -} - -@media only screen and (width >=1200px) { - .media-debug::before { - content: "lg"; - background-color: rgb(202 95 81 / 94%); - } -} - -@media only screen and (width >=1440px) { - .media-debug::before { - content: "xl"; - background-color: rgb(217 83 79 / 70%); - } -} - -*, -::after, -::before { - box-sizing: border-box; -} - -body { - margin: 0; -} - -main { - display: block; -} - -ol, -ul { - padding-left: 0; - margin: 0; -} - -ol > li, -ul > li { - margin-left: 0; -} - -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - line-height: inherit; - margin: 0; -} - -textarea { - min-height: 4em; -} - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -button { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -[hidden] { - display: none !important; -} - -template { - display: none; -} - -progress { - display: inline-block; -} - -code, -kbd, -pre, -samp, -tt { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 1em; -} - -html { - height: 100%; - background: #fff; - color: #3d3d3d; - font-weight: 400; - font-family: "Source Sans Pro", sans-serif; - font-size: calc(11px + 5 * ((100vw - 420px) / 1020)); -} - -@media screen and (width >=1440px) { - html { - font-size: 16px; - } -} - -@media screen and (width <=420px) { - html { - font-size: 11px; - } -} - -a { - color: #5b8edb; - text-decoration: none; -} - -a:hover { - transition: background 0.1s ease 0, color 0.1s ease 0; -} - -a:active, -a:hover { - color: #86ace4; -} - -a:focus { - outline: thin dotted; - outline-offset: -1px; -} - -a:visited { - color: #3272d2; -} - -::selection { - background-color: #c4d7f2; - text-shadow: none; -} - -.hidden, -.sr-only, -.visible-lg, -.visible-md, -.visible-sm, -.visible-xl, -.visible-xs { - display: none !important; -} - -@media only screen and (width >=480px) { - .visible-xs { - display: block !important; - } - - table.visible-xs { - display: table !important; - } - - tr.visible-xs { - display: table-row !important; - } - - td.visible-xs, - th.visible-xs { - display: table-cell !important; - } - - .hidden-xs { - display: none !important; - } -} - -@media only screen and (width >=768px) { - .visible-sm { - display: block !important; - } - - table.visible-sm { - display: table !important; - } - - tr.visible-sm { - display: table-row !important; - } - - td.visible-sm, - th.visible-sm { - display: table-cell !important; - } - - .hidden-sm { - display: none !important; - } -} - -@media only screen and (width >=992px) { - .visible-md { - display: block !important; - } - - table.visible-md { - display: table !important; - } - - tr.visible-md { - display: table-row !important; - } - - td.visible-md, - th.visible-md { - display: table-cell !important; - } - - .hidden-md { - display: none !important; - } -} - -@media only screen and (width >=1200px) { - .visible-lg { - display: block !important; - } - - table.visible-lg { - display: table !important; - } - - tr.visible-lg { - display: table-row !important; - } - - td.visible-lg, - th.visible-lg { - display: table-cell !important; - } - - .hidden-lg { - display: none !important; - } -} - -@media only screen and (width >=1440px) { - .visible-xl { - display: block !important; - } - - table.visible-xl { - display: table !important; - } - - tr.visible-xl { - display: table-row !important; - } - - td.visible-xl, - th.visible-xl { - display: table-cell !important; - } - - .hidden-xl { - display: none !important; - } -} - -.link-prefix::before { - content: ">"; - vertical-align: 6%; - padding: 0 0.2em 0 0; - transition: padding 0.1s; - display: inline-block; - background-color: #fff; -} - -.link-prefix:focus::before, -.link-prefix:hover::before { - padding: 0 0.1em; -} - -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} - -.flex-grow { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -button.close { - padding: 0; - cursor: pointer; - background: none; - border: 0; -} - -.close { - float: right; - font-size: 1.5rem; - font-weight: 500; - line-height: 1; - color: #000; - opacity: 0.33; - text-shadow: 0 1px 0 #fff; -} - -.close:focus, -.close:hover { - color: #000; - text-decoration: none; - cursor: pointer; - opacity: 0.75; -} - -@keyframes a { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: none; - } -} - -@keyframes a { - 0% { - transform: translateX(-100%); - } - - 100% { - transform: none; - } -} - -@keyframes b { - 0% { - transform: translateX(100%); - } - - 100% { - transform: none; - } -} - -@keyframes b { - 0% { - transform: translateX(100%); - } - - 100% { - transform: none; - } -} - -.slide-in { - animation: 0.2s ease-out 0s normal forwards 1 running a; -} - -.slide-in--to-left { - animation-name: b; -} - -@keyframes c { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes c { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.fade-in { - animation: 0.2s ease 0s normal forwards 1 running c; -} - -@keyframes d { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } - - 100% { - opacity: 0; - } -} - -@keyframes d { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } - - 100% { - opacity: 0; - } -} - -.loading-dots i { - animation: d 1.3s infinite; - font-style: normal; - opacity: 1; -} - -.loading-dots i + i { - animation-delay: 0.1s; - opacity: 0; -} - -.loading-dots i + i + i { - animation-delay: 0.2s; -} - -@keyframes e { - 0% { - background-position: 45px 0; - } - - 100% { - background-position: 0 0; - } -} - -@keyframes e { - 0% { - background-position: 45px 0; - } - - 100% { - background-position: 0 0; - } -} - -.btn.loading, -.loadingbar-stripes, -.nav-side-list .ember-transitioning-in, -.nav-tabs .ember-transitioning-in { - position: relative; - cursor: wait; - z-index: 0; -} - -.btn.loading::after, -.loadingbar-stripes::after, -.nav-side-list .ember-transitioning-in::after, -.nav-tabs .ember-transitioning-in::after { - content: ""; - pointer-events: none; - inset: 0; - position: absolute; - animation: 2s linear 0s normal none infinite running e; - background-image: linear-gradient( - 45deg, - hsl(0deg 0% 100% / 20%) 25%, - transparent 0, - transparent 50%, - hsl(0deg 0% 100% / 20%) 0, - hsl(0deg 0% 100% / 20%) 75%, - transparent 0, - transparent - ); - background-size: 45px 45px; - z-index: -1; -} - -@keyframes f { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -@keyframes f { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -.loading-mask { - position: relative; -} - -.loading-mask::before { - content: ""; - position: absolute; - z-index: 1; - inset: 0; - background-color: rgb(0 0 0 / 25%); -} - -.loading-mask::after { - content: ""; - position: absolute; - z-index: 2; - border: 3px solid #fff; - border-top-color: transparent; - border-radius: 50%; - width: 100px; - height: 100px; - top: calc(50% - 50px); - left: calc(50% - 50px); - animation: f 2s infinite linear; - filter: drop-shadow(0 0 2px rgb(0 0 0 / 33%)); -} - -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.text-left { - text-align: left; -} - -.grid { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - flex-wrap: wrap; - list-style: none; - margin: 0 -1rem 1rem; - padding: 0; -} - -.grid--nowrap { - flex-wrap: nowrap; -} - -.grid-cell { - -webkit-box-flex: 1; - flex: 1 0 auto; - padding-left: 1rem; - padding-right: 1rem; -} - -.grid--no-gutters { - margin-left: 0; - margin-right: 0; -} - -.grid--no-gutters > .grid-cell { - padding-left: 0; - padding-right: 0; -} - -.grid--row { - -webkit-box-orient: horizontal; - flex-direction: row; -} - -.grid--col, -.grid--row { - -webkit-box-direction: normal; -} - -.grid--col { - -webkit-box-orient: vertical; - flex-direction: column; -} - -.grid--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; -} - -.grid--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; -} - -.grid--align-start { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; -} - -.grid--align-center { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.grid--align-end { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; -} - -.grid--justify-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -.grid-cell--align-start { - -ms-flex-item-align: start; - align-self: flex-start; -} - -.grid-cell--align-center { - -ms-flex-item-align: center; - align-self: center; -} - -.grid-cell--align-end { - -ms-flex-item-align: end; - align-self: flex-end; -} - -.grid--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; -} - -.grid--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; -} - -.grid--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; -} - -.grid--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; -} - -.grid--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; -} - -.grid--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; -} - -.grid--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; -} - -.grid--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; -} - -.grid--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; -} - -.grid--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; -} - -.grid--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; -} - -.grid--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; -} - -@media only screen and (width >=480px) { - .grid-xs--row { - -webkit-box-orient: horizontal; - flex-direction: row; - } - - .grid-xs--col, - .grid-xs--row { - -webkit-box-direction: normal; - } - - .grid-xs--col { - -webkit-box-orient: vertical; - flex-direction: column; - } - - .grid-xs--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; - } - - .grid-xs--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; - } - - .grid-xs--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid-xs--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid-xs--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid-xs--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid-xs--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid-xs--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid-xs--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid-xs--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid-xs--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid-xs--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid-xs--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid-xs--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=768px) { - .grid-sm--row { - -webkit-box-orient: horizontal; - flex-direction: row; - } - - .grid-sm--col, - .grid-sm--row { - -webkit-box-direction: normal; - } - - .grid-sm--col { - -webkit-box-orient: vertical; - flex-direction: column; - } - - .grid-sm--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; - } - - .grid-sm--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; - } - - .grid-sm--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid-sm--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid-sm--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid-sm--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid-sm--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid-sm--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid-sm--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid-sm--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid-sm--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid-sm--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid-sm--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid-sm--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=992px) { - .grid-md--row { - -webkit-box-orient: horizontal; - flex-direction: row; - } - - .grid-md--col, - .grid-md--row { - -webkit-box-direction: normal; - } - - .grid-md--col { - -webkit-box-orient: vertical; - flex-direction: column; - } - - .grid-md--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; - } - - .grid-md--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; - } - - .grid-md--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid-md--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid-md--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid-md--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid-md--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid-md--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid-md--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid-md--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid-md--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid-md--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid-md--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid-md--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=1200px) { - .grid-lg--row { - -webkit-box-orient: horizontal; - flex-direction: row; - } - - .grid-lg--col, - .grid-lg--row { - -webkit-box-direction: normal; - } - - .grid-lg--col { - -webkit-box-orient: vertical; - flex-direction: column; - } - - .grid-lg--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; - } - - .grid-lg--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; - } - - .grid-lg--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid-lg--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid-lg--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid-lg--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid-lg--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid-lg--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid-lg--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid-lg--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid-lg--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid-lg--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid-lg--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid-lg--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=1440px) { - .grid-xl--row { - -webkit-box-orient: horizontal; - flex-direction: row; - } - - .grid-xl--col, - .grid-xl--row { - -webkit-box-direction: normal; - } - - .grid-xl--col { - -webkit-box-orient: vertical; - flex-direction: column; - } - - .grid-xl--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - flex-direction: row-reverse; - } - - .grid-xl--col-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - flex-direction: column-reverse; - } - - .grid-xl--1of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid-xl--2of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid-xl--3of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid-xl--4of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid-xl--5of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid-xl--6of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid-xl--7of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid-xl--8of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid-xl--9of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid-xl--10of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid-xl--11of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid-xl--12of12 > .grid-cell { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -.grid > .grid-cell--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; -} - -.grid > .grid-cell--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; -} - -.grid > .grid-cell--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; -} - -.grid > .grid-cell--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; -} - -.grid > .grid-cell--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; -} - -.grid > .grid-cell--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; -} - -.grid > .grid-cell--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; -} - -.grid > .grid-cell--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; -} - -.grid > .grid-cell--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; -} - -.grid > .grid-cell--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; -} - -.grid > .grid-cell--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; -} - -.grid > .grid-cell--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; -} - -@media only screen and (width >=480px) { - .grid > .grid-cell-xs--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid > .grid-cell-xs--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid > .grid-cell-xs--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid > .grid-cell-xs--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid > .grid-cell-xs--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid > .grid-cell-xs--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid > .grid-cell-xs--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid > .grid-cell-xs--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid > .grid-cell-xs--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid > .grid-cell-xs--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid > .grid-cell-xs--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid > .grid-cell-xs--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=768px) { - .grid > .grid-cell-sm--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid > .grid-cell-sm--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid > .grid-cell-sm--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid > .grid-cell-sm--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid > .grid-cell-sm--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid > .grid-cell-sm--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid > .grid-cell-sm--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid > .grid-cell-sm--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid > .grid-cell-sm--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid > .grid-cell-sm--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid > .grid-cell-sm--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid > .grid-cell-sm--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=992px) { - .grid > .grid-cell-md--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid > .grid-cell-md--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid > .grid-cell-md--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid > .grid-cell-md--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid > .grid-cell-md--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid > .grid-cell-md--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid > .grid-cell-md--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid > .grid-cell-md--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid > .grid-cell-md--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid > .grid-cell-md--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid > .grid-cell-md--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid > .grid-cell-md--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=1200px) { - .grid > .grid-cell-lg--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid > .grid-cell-lg--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid > .grid-cell-lg--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid > .grid-cell-lg--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid > .grid-cell-lg--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid > .grid-cell-lg--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid > .grid-cell-lg--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid > .grid-cell-lg--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid > .grid-cell-lg--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid > .grid-cell-lg--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid > .grid-cell-lg--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid > .grid-cell-lg--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -@media only screen and (width >=1440px) { - .grid > .grid-cell-xl--1of12 { - -webkit-box-flex: 0; - flex: 0 0 8.3333%; - } - - .grid > .grid-cell-xl--2of12 { - -webkit-box-flex: 0; - flex: 0 0 16.6667%; - } - - .grid > .grid-cell-xl--3of12 { - -webkit-box-flex: 0; - flex: 0 0 25%; - } - - .grid > .grid-cell-xl--4of12 { - -webkit-box-flex: 0; - flex: 0 0 33.3333%; - } - - .grid > .grid-cell-xl--5of12 { - -webkit-box-flex: 0; - flex: 0 0 41.6667%; - } - - .grid > .grid-cell-xl--6of12 { - -webkit-box-flex: 0; - flex: 0 0 50%; - } - - .grid > .grid-cell-xl--7of12 { - -webkit-box-flex: 0; - flex: 0 0 58.3333%; - } - - .grid > .grid-cell-xl--8of12 { - -webkit-box-flex: 0; - flex: 0 0 66.6667%; - } - - .grid > .grid-cell-xl--9of12 { - -webkit-box-flex: 0; - flex: 0 0 75%; - } - - .grid > .grid-cell-xl--10of12 { - -webkit-box-flex: 0; - flex: 0 0 83.3333%; - } - - .grid > .grid-cell-xl--11of12 { - -webkit-box-flex: 0; - flex: 0 0 91.6667%; - } - - .grid > .grid-cell-xl--12of12 { - -webkit-box-flex: 0; - flex: 0 0 100%; - } -} - -.page { - -webkit-box-orient: vertical; - flex-direction: column; - min-height: 100%; -} - -.page, -.page-viewport, -.page.ember-application > .ember-view:first-of-type { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-direction: normal; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.page-viewport, -.page.ember-application > .ember-view:first-of-type { - -webkit-box-orient: horizontal; - flex-direction: row; - position: relative; - overflow: hidden; - width: 100vw; -} - -.page--column.ember-application > .ember-view:first-of-type, -.page-viewport--column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; -} - -.page-content-footer, -.page-content-header { - -webkit-box-flex: 0; - flex: 0 0 auto; -} - -.page-content { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - min-height: 100vh; -} - -.page-main { - overflow: hidden; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.page-content, -.page-main { - display: -webkit-box; - display: flexbox; - display: flex; - background: #fff; -} - -.page-content--scroll, -.page-main--scroll { - height: 100vh; - overflow: auto; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; -} - -.page-content-main { - -webkit-box-flex: 1; - flex: 1 0 auto; -} - -.page-content { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: 1em 1.5em; -} - -@media only screen and (width >=1200px) { - .page-content { - padding: 1.25em 1.875em; - } -} - -@media only screen and (width >=1440px) { - .page-content { - padding: 1.5em 2.25em; - } -} - -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, -h1, -h2, -h3, -h4, -h5, -h6 { - color: #000; - font-family: "Source Sans Pro", sans-serif; - font-feature-settings: "dlig", "liga", "lnum", "kern"; - font-weight: 500; - letter-spacing: -1; - line-height: 1.25; - margin: 0 0 0.4em; - text-rendering: geometricprecision; -} - -.h1, -h1 { - font-size: 31.5px; - color: #5b8edb; -} - -.h2, -h2 { - font-size: 28px; - color: #5b8edb; -} - -.h3, -h3 { - font-size: 25.2px; - color: #5b8edb; -} - -.h4, -h4 { - font-size: 21px; -} - -.h5, -h5 { - font-size: 17.5px; -} - -.h6, -h6 { - font-size: 15.4px; -} - -.h1 .small, -.h1 small, -.h2 .small, -.h2 small, -.h3 .small, -.h3 small, -.h4 .small, -.h4 small, -.h5 .small, -.h5 small, -.h6 .small, -.h6 small, -h1 .small, -h1 small, -h2 .small, -h2 small, -h3 .small, -h3 small, -h4 .small, -h4 small, -h5 .small, -h5 small, -h6 .small, -h6 small { - font-weight: 400; - line-height: 1; - color: gray; -} - -.typeset { - counter-reset: a; -} - -.typeset .h1-counter { - counter-reset: b; -} - -.typeset .h2-counter { - counter-reset: c; -} - -.typeset .h3-counter { - counter-reset: d; -} - -.typeset .h4-counter { - counter-reset: e; -} - -.typeset .h5-counter { - counter-reset: f; -} - -.typeset .h1-counter::before { - counter-increment: a; - content: counter(a) ". "; -} - -.typeset .h2-counter::before { - counter-increment: b; - content: counter(a) "." counter(b) ". "; -} - -.typeset .h3-counter::before { - counter-increment: c; - content: counter(a) "." counter(b) "." counter(c) ". "; -} - -.typeset .h4-counter::before { - counter-increment: d; - content: counter(a) "." counter(b) "." counter(c) "." counter(d) ". "; -} - -.typeset .h5-counter::before { - counter-increment: e; - content: counter(a) "." counter(b) "." counter(c) "." counter(d) "." - counter(e) ". "; -} - -.typeset .h6-counter::before { - counter-increment: f; - content: counter(a) "." counter(b) "." counter(c) "." counter(d) "." - counter(e) "." counter(f) ". "; -} - -blockquote, -p { - margin: 0 0 1.5em; -} - -.typeset ol, -.typeset ul { - margin: 0 0 1.25em; -} - -li, -p { - font-feature-settings: "dlig", "liga", "salt", "kern"; -} - -.lead { - color: #242424; - font-size: 17.5px; - font-weight: 400; -} - -article li, -article p { - color: #3d3d3d; -} - -blockquote { - quotes: none; - margin-left: -1rem; - border-left: 0.15rem solid #5b8edb; -} - -blockquote p { - font-family: Merriweather, "Times New Roman", serif; - font-style: italic; - padding: 0.5rem 0 0.5rem 1rem; -} - -code, -pre { - background-color: #f1f0ef; -} - -pre { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - margin: 0 0 2em; - padding: 1em; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; -} - -pre > code { - padding: 0; -} - -code { - font-size: 0.9rem; - line-height: 1.8rem; - padding: 0 0.2rem; - color: #383838; -} - -.typeset a:hover { - background-image: -webkit-gradient( - linear, - left top, - left bottom, - color-stop(50%, transparent), - color-stop(50%, #5b8edb) - ); - background-image: linear-gradient(180deg, transparent 50%, #5b8edb 0); - background-position: 0 85%; - background-repeat: repeat-x; - background-size: 100% 1px; - text-shadow: 0.1rem 0 #fff, 0.15rem 0 #fff, -0.1rem 0 #fff, -0.15rem 0 #fff; -} - -.nav-toggle { - display: -webkit-box; - display: flexbox; - display: flex; - border: 0; - padding: 0 8px; - margin: 0; - font-size: 2rem; - width: 54px; - -webkit-box-flex: 0; - flex: 0 0 54px; - cursor: pointer; - background-color: #f6f6f6; -} - -.nav-toggle:focus { - outline: thin dotted; - outline-offset: -4px; -} - -.nav-toggle-icon, -.nav-toggle-icon::after, -.nav-toggle-icon::before { - display: -webkit-box; - display: flexbox; - display: flex; - height: 6px; - width: 36px; - border-radius: 3px; - transition: all 0.3s ease 0s; - background: #000; -} - -.nav-toggle-icon { - position: relative; -} - -.nav-toggle-icon::after, -.nav-toggle-icon::before { - content: ""; - position: absolute; - left: 0; - transform-origin: 3px center; -} - -.nav-toggle-icon::before { - top: 10px; -} - -.nav-toggle-icon::after { - top: -10px; -} - -.nav-side--expand .nav-toggle-icon::after, -.nav-side--expand .nav-toggle-icon::before { - top: 0; - width: 20px; -} - -.nav-side--expand .nav-toggle-icon::before { - transform: rotate(45deg); -} - -.nav-side--expand .nav-toggle-icon::after { - transform: rotate(-45deg); -} - -.nav-top--expand .nav-toggle-icon { - transform: rotate(-90deg); - width: 30px; -} - -.nav-top--expand .nav-toggle-icon::after, -.nav-top--expand .nav-toggle-icon::before { - left: auto; - right: -5px; - width: 20px; -} - -.nav-top--expand .nav-toggle-icon::after { - transform: rotate(45deg); -} - -.nav-top--expand .nav-toggle-icon::before { - transform: rotate(-45deg); -} - -.nav-side { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - background-color: #f6f6f6; - border-right: 1px solid #e1e1e1; - z-index: 1000; - -ms-flex-preferred-size: 55px; - flex-basis: 55px; - -ms-flex-negative: 0; - flex-shrink: 0; - transition: -webkit-flex-basis 0.2s, -webkit-transform 0.2s; - transition: flex-basis 0.2s, transform 0.2s; - transition: flex-basis 0.2s, transform 0.2s, -webkit-flex-basis 0.2s, - -ms-flex-preferred-size 0.2s, -webkit-transform 0.2s; - height: 100vh; -} - -.nav-side, -.nav-side-header { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.nav-side-header { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding-bottom: 1rem; -} - -.nav-side-body { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - overflow-y: auto; - background: linear-gradient(#f6f6f6 15px, hsl(0deg 0% 96% / 0%)) 0 0/100% 50px, - radial-gradient(at top, rgb(0 0 0 / 25%), transparent 70%) 0 0/100% 15px, - linear-gradient(0deg, #f6f6f6 15px, hsl(0deg 0% 96% / 0%)) bottom/100% 50px, - radial-gradient(at bottom, rgb(0 0 0 / 25%), transparent 70%) bottom/100% - 15px; - background-repeat: no-repeat; - background-attachment: local, scroll, local, scroll; -} - -.nav-side-body i { - font-size: 2rem; - width: 1.5em; - text-align: center; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.nav-side-toggle { - width: 54px; - height: 44px; -} - -.nav-side--expand { - -ms-flex-preferred-size: 240px; - flex-basis: 240px; -} - -.nav-side--expand + .page-main { - margin-right: -240px; -} - -.page-main-overlay { - background-color: #000; - transition: left 0.2s, opacity 0.2s, position 0.2s; - opacity: 0; - left: 0; -} - -.nav-side--expand + .page-main + .page-main-overlay { - position: absolute; - inset: 0 0 0 240px; - opacity: 0.4; - z-index: 900; -} - -.nav-side + .page-main { - transition: margin-right 0.2s; -} - -.nav-side-list { - list-style: none; - line-height: 3rem; - font-size: 0; -} - -.nav-side-list:first-child .nav-side-list-header { - margin-top: 0; -} - -.nav-side-list-header, -.nav-side-list a { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0.1rem 0.5rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.nav-side-list-header { - color: #707070; - letter-spacing: 1px; - margin-top: 1rem; - line-height: 2rem; - text-transform: uppercase; - height: 0; - overflow: hidden; - padding: 0; - transition: height 0.2s, padding 0.2s; -} - -.nav-side-header-title { - width: 0; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - font-weight: 500; - color: #575757; - transition: width 0.2s; -} - -.nav-side--expand .nav-side-list-header, -.nav-side--expand .nav-side-list a { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.nav-side--expand .nav-side-list-header { - height: 2em; -} - -.nav-side--expand .nav-side-header-title { - width: 100%; -} - -.nav-side--expand .nav-side-list { - font-size: 1.25rem; -} - -.nav-side--expand .nav-side-list-header, -.nav-side--expand .nav-side-list a { - padding: 0 0.5rem; -} - -.nav-side--expand .nav-side-list i { - margin-right: 0.5rem; -} - -.nav-side--expand .nav-side-body i:not([class])::before { - content: ""; - display: inline-block; -} - -.nav-side-list a { - color: #265bab; - transition: color 0.2s, background-color 0.2s; -} - -.nav-side-list a.active, -.nav-side-list a:hover { - color: #fff; - background: #5b8edb; -} - -.nav-side-list a.ember-transitioning-in { - color: #fff; - background: #8cb0e6; -} - -.nav-side-footer .nav-hide { - display: none; -} - -@media only screen and (width >=768px) { - .nav-side:not(.nav-side--autohide) { - position: relative; - display: -webkit-box; - display: flexbox; - display: flex; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - background-color: #f6f6f6; - border-right: 1px solid #e1e1e1; - } - - .nav-side--expand + .page-main + .page-main-overlay, - .nav-side-toggle { - display: none; - } - - .nav-side--expand + .page-main { - margin-right: 0; - } - - .nav-side--right { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - border-right: none; - border-left: 1px solid #e1e1e1; - } - - .nav-side:not(.nav-side--autohide) .nav-side-header-title { - width: 100%; - margin-top: 1rem; - padding-right: 1rem; - } - - .nav-side-header { - height: 4rem; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .nav-side-header, - .nav-side-header > a { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - text-align: left; - } - - .nav-side-header > a { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - } - - .nav-side-header-logo { - width: 32px; - height: 32px; - -ms-flex-negative: 0; - flex-shrink: 0; - background: url("../pictures/logo/sy.png") 50% / contain; - margin: 1rem 0.5rem 0 1rem; - border-radius: 4px; - } - - .nav-side--autohide .nav-side-header-logo { - margin: 1rem auto 0; - } - - .nav-side:not(.nav-side--autohide) .nav-side-body { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - overflow-y: auto; - width: auto; - } - - .nav-side-body i { - font-size: inherit; - } - - .nav-side:not(.nav-side--autohide) .nav-side-list { - padding: 0 1rem 0 0; - font-size: 0.85rem; - line-height: 1.5 !important; - } - - .nav-side:not(.nav-side--autohide) .nav-side--right .nav-side-list { - padding: 0 0 0 1rem; - } - - .nav-side:not(.nav-side--autohide) .nav-side-list-header, - .nav-side:not(.nav-side--autohide) .nav-side-list a { - padding: 0.3rem 1rem; - } - - .nav-side:not(.nav-side--autohide) .nav-side-list a { - font-size: inherit; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - - .nav-side--right .nav-side-list a { - border-radius: 3px 0 0 3px; - } - - .nav-side-list-header { - height: 2em; - } - - .nav-side-list i { - margin-right: 0.5rem; - text-align: center; - width: 1.5em; - } - - .nav-side--autohide .nav-side-list i { - font-size: 1.25rem; - margin: 0; - } - - .nav-side-body i:not([class])::before { - content: ""; - } - - .nav-side-footer { - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-direction: row; - height: 3rem; - } - - .nav-side-footer, - .nav-side-footer .nav-hide { - display: -webkit-box; - display: flexbox; - display: flex; - } -} - -.nav-side--sub { - display: none; - -ms-flex-negative: 1; - flex-shrink: 1; - border-right: 1px solid #eaeaea; - z-index: 999; -} - -.nav-side--sub .nav-side-list { - margin-top: 1rem; - font-size: inherit; -} - -.nav-side--sub .nav-side-list:first-child { - margin-top: 0; -} - -@media only screen and (width >=768px) { - .nav-side--sub { - display: -webkit-box; - display: flexbox; - display: flex; - background-color: #fbfbfb; - } - - .nav-side--sub .nav-side-header { - padding-left: 1rem; - } - - .nav-side--sub .nav-side-body { - background: linear-gradient(#fbfbfb 15px, hsl(0deg 0% 98% / 0%)) 0 0/100% - 50px, - radial-gradient(at top, rgb(0 0 0 / 25%), transparent 70%) 0 0/100% 15px, - linear-gradient(0deg, #fbfbfb 15px, hsl(0deg 0% 98% / 0%)) bottom/100% - 50px, - radial-gradient(at bottom, rgb(0 0 0 / 25%), transparent 70%) bottom/100% - 15px; - background-repeat: no-repeat; - background-attachment: local, scroll, local, scroll; - } - - .nav-side--sub .nav-side-list { - padding: 0 1rem 0 0; - font-size: 0.85rem; - line-height: 1.5 !important; - } -} - -.nav-top { - position: relative; - width: 100%; - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - background-color: #f6f6f6; - border-bottom: 1px solid #e1e1e1; - z-index: 1000; -} - -.nav-top--fixed { - position: fixed; - width: 100%; - top: 0; - left: 0; -} - -.nav-top--fixed + * { - margin-top: 51px; -} - -.nav-top + .page-content--scroll { - height: calc(100vh - 51px); -} - -.nav-top-header, -.nav-top-header a { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.nav-top-header { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.nav-top-header-logo { - width: 40px; - height: 40px; - background: url("../pictures/logo/sy.png"); - background-size: 40px 40px; - border-radius: 4px; - margin-right: 0.5rem; -} - -.nav-top-header-logo, -.nav-top-header-title { - -ms-flex-item-align: center; - align-self: center; -} - -.nav-top-header-title { - color: #575757; - margin-right: 0.5rem; -} - -.nav-top--expand .nav-top-body { - display: block; - max-height: 400px; - overflow-y: auto; - transition: max-height 0.7s; -} - -.nav-top-body { - max-height: 0; - overflow: hidden; -} - -.nav-top-list { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - font-size: 1.25rem; - line-height: 2rem; - list-style: none; -} - -.nav-top-list, -.nav-top-list a { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.nav-top-list a { - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: 0.75rem 0.75rem 0.75rem 0.5rem; -} - -.nav-top-list .fa { - -webkit-box-flex: 0; - flex: 0 0 2em; - text-align: center; -} - -.nav-top-list a:hover { - color: #fff; - background: #5b8edb; -} - -.nav-top-list-item { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.nav-top-list a { - color: #265bab; - transition: color 0.2s, background-color 0.2s; -} - -.nav-top-list--right { - border-top: 1px solid #e1e1e1; -} - -@media only screen and (width >=768px) { - .nav-top { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-direction: row; - padding: 0 1.5em; - } - - .nav-top-toggle { - display: none; - } - - .nav-top-header { - -webkit-box-pack: left; - -ms-flex-pack: left; - justify-content: left; - } - - .nav-top-body { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-height: 50px; - transition: none; - } - - .nav-top-list { - height: 50px; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-direction: row; - font-size: 0.85rem; - } - - .nav-top-list--right { - border-top: 0; - margin-left: auto; - } - - .nav-top-list a { - display: block; - -ms-flex-item-align: center; - align-self: center; - padding: 1rem 0.5rem; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - } -} - -.table { - display: table; - width: 100%; - max-width: 100%; - margin-bottom: 1rem; - border-collapse: collapse; -} - -.table--bordered, -.table--bordered > tbody > tr > td, -.table--bordered > tbody > tr > th, -.table--bordered > tfoot > tr > td, -.table--bordered > tfoot > tr > th, -.table--bordered > thead > tr > td, -.table--bordered > thead > tr > th { - border: 1px solid #e1e1e1; -} - -.table--striped > tbody > tr:nth-of-type(odd) { - background-color: #f3f3f3; -} - -.table--hover > tbody > tr:hover { - background-color: #ececec; -} - -.table caption { - color: #7d7d7d; - text-align: left; -} - -.table > tbody > tr > td, -.table > tbody > tr > th, -.table > tfoot > tr > td, -.table > tfoot > tr > th, -.table > thead > tr > td, -.table > thead > tr > th { - padding: 0.5rem; - vertical-align: top; - border-top: 1px solid #e1e1e1; -} - -.table--condensed > tbody > tr > td, -.table--condensed > tbody > tr > th, -.table--condensed > tfoot > tr > td, -.table--condensed > tfoot > tr > th, -.table--condensed > thead > tr > td, -.table--condensed > thead > tr > th { - padding: 0.25rem; -} - -.table > thead > tr > th { - font-weight: 500; - text-align: left; - vertical-align: bottom; - border-bottom: 2px solid #e1e1e1; -} - -.table > caption + thead > tr:first-child > td, -.table > caption + thead > tr:first-child > th, -.table > colgroup + thead > tr:first-child > td, -.table > colgroup + thead > tr:first-child > th, -.table > thead:first-child > tr:first-child > td, -.table > thead:first-child > tr:first-child > th { - border-top: 0; -} - -.table > tbody > tr.primary { - background-color: #c0d2ec; -} - -.table--striped > tbody > tr.primary:nth-of-type(odd) { - background-color: #c8d7ef; -} - -.table--hover > tbody > tr.primary:hover { - background-color: #b0c8ee; -} - -.table tr.success { - background-color: #b3d5b3; -} - -.table--striped > tbody > tr.success:nth-of-type(odd) { - background-color: #bad9ba; -} - -.table--hover > tbody > tr.success:hover { - background-color: #a3d7a3; -} - -.table tr.info { - background-color: #bfe2ed; -} - -.table--striped > tbody > tr.info:nth-of-type(odd) { - background-color: #c7e6ef; -} - -.table--hover > tbody > tr.info:hover { - background-color: #afe0ef; -} - -.table tr.warning { - background-color: #f5ddbc; -} - -.table--striped > tbody > tr.warning:nth-of-type(odd) { - background-color: #f6e2c5; -} - -.table--hover > tbody > tr.warning:hover { - background-color: #f8d8ab; -} - -.table tr.danger { - background-color: #e9b6b4; -} - -.table--striped > tbody > tr.danger:nth-of-type(odd) { - background-color: #ebbebc; -} - -.table--hover > tbody > tr.danger:hover { - background-color: #eba5a3; -} - -.btn { - display: -webkit-box; - display: flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-direction: row; - margin-bottom: 0; - padding: calc(0.75rem + 1px) 1.25rem 0.75rem; - border: 1px solid #e1e1e1; - border-bottom-width: 2px; - background: #fff; - border-radius: 4px; - text-align: center; - text-decoration: none; - text-transform: uppercase; - text-shadow: none; - white-space: nowrap; - height: 100%; - min-height: 3rem; - letter-spacing: 1px; - font-size: 1rem; - line-height: 1.2; - font-weight: 400; - cursor: pointer; - user-select: none; - box-shadow: 0 1px 0 hsl(0deg 0% 100% / 15%) inset; - box-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 15%); - transition: color 0.2s ease 0s, background 0.2s ease 0s, - border-color 0.2s ease 0s; -} - -@media only screen and (width >=768px) { - .btn { - font-size: 0.75rem; - padding: calc(0.5rem + 1px) 1rem 0.5rem; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - align-items: flex-start; - min-height: 2rem; - } -} - -.btn, -.btn:visited { - color: #707070; -} - -.btn-danger, -.btn-danger:visited, -.btn-info, -.btn-info:visited, -.btn-primary, -.btn-primary:visited, -.btn-success, -.btn-success:visited, -.btn-warning, -.btn-warning:visited { - color: #fff; -} - -.btn:not([disabled]):hover { - color: #5b8edb; - border-color: #b0c8ee; - text-decoration: none; -} - -.btn:focus { - outline: none; - box-shadow: 0 0 6px 2px hsl(0deg 0% 88% / 60%); -} - -.btn.active:not(.no-active-class), -.btn:active { - box-shadow: 0 1px 10px rgb(0 0 0 / 20%) inset, - 0 -1px 0 hsl(0deg 0% 100% / 20%) inset; - box-shadow: inset 0 1px 10px rgb(0 0 0 / 20%), - inset 0 -1px 0 hsl(0deg 0% 100% / 20%); - padding: 0.75rem 1.25rem calc(0.75rem + 1px); - border-top-width: 2px; - border-bottom-width: 1px; -} - -@media only screen and (width >=768px) { - .btn.active:not(.no-active-class), - .btn:active { - padding: 0.5rem 1rem calc(0.5rem + 1px); - } -} - -.btn.active:not(.no-active-class):focus, -.btn:active:focus { - box-shadow: none; -} - -.btn-primary { - background-color: #5b8edb; - border-color: #4780d7; -} - -.btn-primary:not([disabled]):hover { - background-color: #2c71d8; - border-color: #265bab; - color: #fff; -} - -.btn-primary:focus { - box-shadow: 0 0 2px 2px rgb(91 142 219 / 50%); -} - -.btn-success { - background-color: #5cb85c; - border-color: #4cae4c; -} - -.btn-success:not([disabled]):hover { - background-color: #3fa23f; - border-color: #357935; - color: #fff; -} - -.btn-success:focus { - box-shadow: 0 0 2px 2px rgb(92 184 92 / 50%); -} - -.btn-info { - background-color: #5bc0de; - border-color: #45b6d9; -} - -.btn-info:not([disabled]):hover { - background-color: #29b1db; - border-color: #248dae; - color: #fff; -} - -.btn-info:focus { - box-shadow: 0 0 2px 2px rgb(91 192 222 / 50%); -} - -.btn-warning { - background-color: #f0ad4e; - border-color: #eda135; -} - -.btn-warning:not([disabled]):hover { - background-color: #f29718; - border-color: #c57a11; - color: #fff; -} - -.btn-warning:focus { - box-shadow: 0 0 2px 2px rgb(240 173 78 / 50%); -} - -.btn-danger { - background-color: #d9534f; - border-color: #d4403a; -} - -.btn-danger:not([disabled]):hover { - background-color: #cf2c26; - border-color: #9f2723; - color: #fff; -} - -.btn-danger:focus { - box-shadow: 0 0 2px 2px rgb(217 83 79 / 50%); -} - -.btn-link { - color: #5b8edb; - padding: 0; - margin: 0; - border: none; - display: inline; - line-height: inherit; - text-transform: none; - min-height: auto; - letter-spacing: normal; -} - -.btn-link, -.btn-link.active:not(.no-active-class), -.btn-link:active, -.btn-link:focus, -.btn-link:hover { - border-color: transparent; - background: none; - box-shadow: none; -} - -.btn.disabled, -.btn[disabled], -fieldset[disabled] .btn { - cursor: not-allowed; - opacity: 0.4; -} - -.btn-group { - display: -webkit-box; - display: flexbox; - display: flex; - flex-wrap: nowrap; -} - -.btn-group > .btn { - z-index: 1; -} - -.btn-group > .btn.active:not(.no-active-class) + .btn, -.btn-group > .btn:active + .btn, -.btn-group > .btn:focus + .btn, -.btn-group > .btn:hover + .btn { - z-index: 0; -} - -.btn-group > .btn:first-child:not(:last-child, .dropdown-toggle) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.btn-group > .btn:first-child { - margin-left: 0; -} - -.btn-group > .btn:not(:first-child, :last-child, .dropdown-toggle) { - border-radius: 0; -} - -.btn-group > .btn + .btn, -.btn-group > .btn + .btn-group, -.btn-group > .btn-group + .btn, -.btn-group > .btn-group + .btn-group { - margin-left: -1px; -} - -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group--vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; -} - -.btn-group--vertical > .btn:first-child:not(:last-child, .dropdown-toggle) { - border-top-right-radius: 4px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.btn-group--vertical > .btn:not(:first-child) { - box-shadow: none; -} - -.btn-group--vertical > .btn.active:not(.no-active-class), -.btn-group--vertical > .btn:active, -.btn-group--vertical > .btn:last-child.active:not(.no-active-class), -.btn-group--vertical > .btn:last-child:active { - box-shadow: 0 1px 10px rgb(0 0 0 / 20%) inset, - 0 -1px 0 hsl(0deg 0% 100% / 20%) inset; - box-shadow: inset 0 1px 10px rgb(0 0 0 / 20%), - inset 0 -1px 0 hsl(0deg 0% 100% / 20%); -} - -.btn-group--vertical > .btn:not(:last-child) { - border-bottom-color: transparent; -} - -.btn-group--vertical > .btn + .btn, -.btn-group--vertical > .btn + .btn-group, -.btn-group--vertical > .btn-group + .btn, -.btn-group--vertical > .btn-group + .btn-group { - margin-top: -1px; - margin-left: 0; -} - -.btn-group--vertical > .btn:last-child:not(:first-child) { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 4px; -} - -.btn-group--vertical - > .btn-group:last-child:not(:first-child) - > .btn:first-child { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.btn-toolbar { - display: -webkit-box; - display: flexbox; - display: flex; - margin-left: -5px; -} - -.btn-toolbar > .btn, -.btn-toolbar > .btn-group, -.btn-toolbar > .input-group { - margin-left: 5px; -} - -.form-group { - margin-bottom: 1rem; -} - -.form-group label { - display: inline-block; - max-width: 100%; - margin-bottom: 0.25rem; - font-weight: 500; -} - -.form-control::input-placeholder { - color: #999; - opacity: 1; -} - -.form-control:input-placeholder { - color: #999; - opacity: 1; -} - -.form-control::placeholder { - color: #999; - opacity: 1; -} - -.form-control { - display: block; - width: 100%; - min-height: 3rem; - padding: 0.3rem 0.5rem; - font-size: 1.2rem; - line-height: 1.5; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset; - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%); - transition: border-color 0.15s, -webkit-box-shadow 0.15s; - transition: border-color 0.15s, box-shadow 0.15s; - transition: border-color 0.15s, box-shadow 0.15s, -webkit-box-shadow 0.15s; -} - -@media only screen and (width >=768px) { - .form-control { - font-size: 0.9rem; - min-height: 2rem; - } -} - -select.form-control[multiple] { - height: auto; - padding: 0.1rem 0.2rem; -} - -select.form-control[multiple] > option { - margin: 2px 0; - padding: 2px 0.3rem; -} - -select.form-control[multiple] > :checked, -select.form-control[multiple] > [selected] { - border-radius: 4px; -} - -select.form-control { - appearance: none; -} - -select.form-control::-ms-expand { - display: none; -} - -select.form-control:not([multiple]) { - background-image: url('data:image/svg+xml;charset=utf-8,'); - background-position: right 0.5rem center; - background-size: 22px; - background-repeat: no-repeat; - padding-right: 2rem; -} - -.form-control:focus { - border-color: #7ca5e2; - outline: 0; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(91 142 219 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(91 142 219 / 60%); -} - -.form-control.success { - border-color: #7dc67d; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(92 184 92 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(92 184 92 / 60%); -} - -.form-control.info { - border-color: #7ccde5; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(91 192 222 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(91 192 222 / 60%); -} - -.form-control.warning { - border-color: #f3bd71; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(240 173 78 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(240 173 78 / 60%); -} - -.form-control.invalid, -.form-control:invalid { - border-color: #e17572; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(217 83 79 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(217 83 79 / 60%); -} - -.form-control[disabled], -fieldset[disabled] .form-control { - cursor: not-allowed; -} - -.form-control[disabled], -.form-control[readonly], -fieldset[disabled] .form-control { - background-color: #eee; -} - -@media only screen and (width >=768px) { - .form-inline .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } - - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } - - .form-inline .checkbox, - .form-inline .radio { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle; - } - - .form-inline .btn { - display: inline-block; - } -} - -.checkbox, -.radio { - position: relative; - display: block; - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.checkbox > input[type="checkbox"]:checked, -.checkbox > input[type="checkbox"]:not(:checked), -.checkbox > input[type="radio"]:checked, -.checkbox > input[type="radio"]:not(:checked), -.radio > input[type="checkbox"]:checked, -.radio > input[type="checkbox"]:not(:checked), -.radio > input[type="radio"]:checked, -.radio > input[type="radio"]:not(:checked) { - position: absolute; - left: -99999px; -} - -.checkbox > input[type="checkbox"]:checked + label, -.checkbox > input[type="checkbox"]:not(:checked) + label, -.checkbox > input[type="radio"]:checked + label, -.checkbox > input[type="radio"]:not(:checked) + label, -.radio > input[type="checkbox"]:checked + label, -.radio > input[type="checkbox"]:not(:checked) + label, -.radio > input[type="radio"]:checked + label, -.radio > input[type="radio"]:not(:checked) + label { - position: relative; - display: -webkit-box; - display: flexbox; - display: flex; - padding-left: 2.5rem; - line-height: 2rem; - cursor: pointer; -} - -.checkbox > input[type="checkbox"]:checked + label::before, -.checkbox > input[type="checkbox"]:not(:checked) + label::before, -.checkbox > input[type="radio"]:checked + label::before, -.checkbox > input[type="radio"]:not(:checked) + label::before, -.radio > input[type="checkbox"]:checked + label::before, -.radio > input[type="checkbox"]:not(:checked) + label::before, -.radio > input[type="radio"]:checked + label::before, -.radio > input[type="radio"]:not(:checked) + label::before { - content: ""; - position: absolute; - left: 0; - width: 2rem; - height: 2rem; - border: 1px solid #ccc; - background-color: #fff; - background-image: none; - border-radius: 4px; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset; - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%); - transition: border-color 0.15s, -webkit-box-shadow 0.15s; - transition: border-color 0.15s, box-shadow 0.15s; - transition: border-color 0.15s, box-shadow 0.15s, -webkit-box-shadow 0.15s; -} - -.checkbox > input[type="radio"]:checked + label::before, -.checkbox > input[type="radio"]:not(:checked) + label::before, -.radio > input[type="radio"]:checked + label::before, -.radio > input[type="radio"]:not(:checked) + label::before { - border-radius: 50%; -} - -.checkbox > input[type="checkbox"]:checked + label::after, -.checkbox > input[type="checkbox"]:not(:checked) + label::after, -.checkbox > input[type="radio"]:checked + label::after, -.checkbox > input[type="radio"]:not(:checked) + label::after, -.radio > input[type="checkbox"]:checked + label::after, -.radio > input[type="checkbox"]:not(:checked) + label::after, -.radio > input[type="radio"]:checked + label::after, -.radio > input[type="radio"]:not(:checked) + label::after { - content: "\2713"; - position: absolute; - left: 0.4rem; - top: 0.1rem; - line-height: 1; - font-size: 2rem; - font-weight: 500; - color: #5cb85c; - transition: all 0.2s; -} - -.checkbox > input[type="radio"]:checked + label::after, -.checkbox > input[type="radio"]:not(:checked) + label::after, -.radio > input[type="radio"]:checked + label::after, -.radio > input[type="radio"]:not(:checked) + label::after { - content: "\2022"; - left: 0.465rem; - top: -0.035rem; -} - -.checkbox > input[type="checkbox"]:not(:checked) + label::after, -.checkbox > input[type="radio"]:not(:checked) + label::after, -.radio > input[type="checkbox"]:not(:checked) + label::after, -.radio > input[type="radio"]:not(:checked) + label::after { - opacity: 0; - transform: scale(0); -} - -.checkbox > input[type="checkbox"]:checked + label::after, -.checkbox > input[type="radio"]:checked + label::after, -.radio > input[type="checkbox"]:checked + label::after, -.radio > input[type="radio"]:checked + label::after { - opacity: 1; - transform: scale(1); -} - -.checkbox > input[type="checkbox"]:checked:disabled + label::before, -.checkbox > input[type="checkbox"]:not(:checked):disabled + label::before, -.checkbox > input[type="radio"]:checked:disabled + label::before, -.checkbox > input[type="radio"]:not(:checked):disabled + label::before, -.radio > input[type="checkbox"]:checked:disabled + label::before, -.radio > input[type="checkbox"]:not(:checked):disabled + label::before, -.radio > input[type="radio"]:checked:disabled + label::before, -.radio > input[type="radio"]:not(:checked):disabled + label::before { - box-shadow: none; - border-color: #bbb; - background-color: #ddd; -} - -.checkbox > input[type="checkbox"]:disabled:checked + label::after, -.checkbox > input[type="radio"]:disabled:checked + label::after, -.radio > input[type="checkbox"]:disabled:checked + label::after, -.radio > input[type="radio"]:disabled:checked + label::after { - color: #999; -} - -.checkbox > input[type="checkbox"]:disabled + label, -.checkbox > input[type="radio"]:disabled + label, -.radio > input[type="checkbox"]:disabled + label, -.radio > input[type="radio"]:disabled + label { - cursor: not-allowed; - color: #aaa; -} - -.checkbox > input[type="checkbox"]:checked:focus + label::before, -.checkbox > input[type="checkbox"]:not(:checked):focus + label::before, -.checkbox > input[type="radio"]:checked:focus + label::before, -.checkbox > input[type="radio"]:not(:checked):focus + label::before, -.radio > input[type="checkbox"]:checked:focus + label::before, -.radio > input[type="checkbox"]:not(:checked):focus + label::before, -.radio > input[type="radio"]:checked:focus + label::before, -.radio > input[type="radio"]:not(:checked):focus + label::before { - border-color: #7ca5e2; - outline: 0; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, 0 0 8px rgb(91 142 219 / 60%); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%), 0 0 8px rgb(91 142 219 / 60%); -} - -.checkbox > input[type="checkbox"]:checked + label:hover::before, -.checkbox > input[type="checkbox"]:not(:checked) + label:hover::before, -.checkbox > input[type="radio"]:checked + label:hover::before, -.checkbox > input[type="radio"]:not(:checked) + label:hover::before, -.radio > input[type="checkbox"]:checked + label:hover::before, -.radio > input[type="checkbox"]:not(:checked) + label:hover::before, -.radio > input[type="radio"]:checked + label:hover::before, -.radio > input[type="radio"]:not(:checked) + label:hover::before { - border-color: #adc7ed; -} - -@media only screen and (width >=768px) { - .checkbox > input[type="checkbox"]:checked + label::before, - .checkbox > input[type="checkbox"]:not(:checked) + label::before, - .checkbox > input[type="radio"]:checked + label::before, - .checkbox > input[type="radio"]:not(:checked) + label::before, - .radio > input[type="checkbox"]:checked + label::before, - .radio > input[type="checkbox"]:not(:checked) + label::before, - .radio > input[type="radio"]:checked + label::before, - .radio > input[type="radio"]:not(:checked) + label::before { - width: 1rem; - height: 1rem; - } - - .checkbox > input[type="checkbox"]:checked + label::after, - .checkbox > input[type="checkbox"]:not(:checked) + label::after, - .checkbox > input[type="radio"]:checked + label::after, - .checkbox > input[type="radio"]:not(:checked) + label::after, - .radio > input[type="checkbox"]:checked + label::after, - .radio > input[type="checkbox"]:not(:checked) + label::after, - .radio > input[type="radio"]:checked + label::after, - .radio > input[type="radio"]:not(:checked) + label::after { - font-size: 1rem; - left: 0.2rem; - top: -0.025rem; - } - - .checkbox > input[type="checkbox"]:checked + label, - .checkbox > input[type="checkbox"]:not(:checked) + label, - .checkbox > input[type="radio"]:checked + label, - .checkbox > input[type="radio"]:not(:checked) + label, - .radio > input[type="checkbox"]:checked + label, - .radio > input[type="checkbox"]:not(:checked) + label, - .radio > input[type="radio"]:checked + label, - .radio > input[type="radio"]:not(:checked) + label { - padding-left: 1.5rem; - line-height: 1; - } - - .checkbox > input[type="radio"]:checked + label::after, - .checkbox > input[type="radio"]:not(:checked) + label::after, - .radio > input[type="radio"]:checked + label::after, - .radio > input[type="radio"]:not(:checked) + label::after { - left: 0.25rem; - } -} - -.page-login .page-content { - background: -webkit-gradient( - linear, - left top, - left bottom, - from(#867f7c), - to(#a29b96) - ); - background: linear-gradient(180deg, #867f7c, #a29b96); - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; -} - -.page-login .btn { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; -} - -.page-login .form-group { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.page-login .form-control { - border: none; - box-shadow: none; - width: 265px; - background: #e1e1e1; - padding-left: 2.5rem; -} - -.page-login .form-control:focus { - background: #f0f0f0; -} - -.page-login .btn-link, -.page-login .btn-link:active { - color: #fff; -} - -.page-login .btn-link:focus, -.page-login .btn-link:hover { - color: #edeeee; - text-decoration: underline; -} - -@media only screen and (width >=768px) { - .page-login .btn { - width: auto; - } - - .page-login .form-group { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - } -} - -.login-form { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin: 0 auto; -} - -.login-form, -.login-form > form { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; -} - -.login-form > form { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - width: 100%; -} - -.login-form .btn-primary { - margin-bottom: 1rem; -} - -.login-form-email, -.login-form-password, -.login-form-user { - position: relative; -} - -.login-form-email::before, -.login-form-password::before, -.login-form-user::before { - font-family: FontAwesome; - position: absolute; - top: 8px; - left: 1rem; - width: 16px; - text-align: center; -} - -.login-form-user::before { - content: "\f007"; -} - -.login-form-email::before { - content: "\f0e0"; -} - -.login-form-password::before { - content: "\f023"; -} - -@media only screen and (width >=768px) { - .login-form { - width: 670px; - } - - .login-form > form { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - flex-direction: row; - } - - .login-form--password-reset { - width: auto; - } - - .login-form--password-reset > form { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - } - - .login-form .btn-primary { - margin-bottom: 0; - } - - .login-form-password-reset-btn { - margin-top: 0.5rem; - -ms-flex-item-align: start; - align-self: flex-start; - } - - .login-form--password-reset .btn { - width: 100%; - } -} - -.alert { - padding: 1rem; - margin-bottom: 1.25rem; - border: 1px solid transparent; - border-radius: 4px; -} - -.alert-dismissable, -.alert-dismissible { - padding-right: 35px; -} - -.alert-dismissable .close, -.alert-dismissible .close { - position: relative; - top: -2px; - right: -21px; - color: inherit; -} - -.alert-success { - color: #458a45; - border-color: #aedcae; - background-color: #d6edd6; -} - -.alert-info { - color: #4490a7; - border-color: #ade0ef; - background-color: #d6eff7; -} - -.alert-warning { - color: #b4823b; - border-color: #f8d6a7; - background-color: #fbebd3; -} - -.alert-danger { - color: #a33e3b; - border-color: #eca9a7; - background-color: #f6d4d3; -} - -.pagination { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.pagination > li:first-child > a, -.pagination > li:first-child > span { - margin-left: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; -} - -.pagination > li:last-child > a, -.pagination > li:last-child > span { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.pagination > li > a:focus, -.pagination > li > a:hover, -.pagination > li > span:focus, -.pagination > li > span:hover { - background-color: #f0f0f0; -} - -.pagination > li { - display: none; - font-feature-settings: "lnum"; - z-index: 1; -} - -.pagination > li.active + li, -.pagination > li:focus + li, -.pagination > li:hover + li { - z-index: 0; -} - -.pagination > .active, -.pagination > .next, -.pagination > .previous { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.pagination > li > a, -.pagination > li > span { - padding: 0.3rem 0.9rem; - margin-left: -1px; - color: #5b8edb; - background-color: #fff; - border: 1px solid #e1e1e1; - text-align: center; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.pagination > .active > a, -.pagination > .active > a:focus, -.pagination > .active > a:hover, -.pagination > .active > span, -.pagination > .active > span:focus, -.pagination > .active > span:hover { - color: #fff; - cursor: default; - background-color: #5b8edb; - border-color: #5b8edb; -} - -.pagination > .disabled > a, -.pagination > .disabled > a:focus, -.pagination > .disabled > a:hover, -.pagination > .disabled > span, -.pagination > .disabled > span:focus, -.pagination > .disabled > span:hover { - color: #7c7c7c; - cursor: not-allowed; - background-color: #fff; - border: 1px solid #e1e1e1; -} - -@media only screen and (width >=768px) { - .pagination > li { - display: -webkit-box; - display: flexbox; - display: flex; - } - - .pagination > .active, - .pagination > .next, - .pagination > .previous { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - } -} - -.nav-tabs { - list-style: none; - padding-left: 0; - margin-bottom: 0; - border-bottom: 1px solid #e1e1e1; -} - -.nav-tabs, -.nav-tabs > li { - display: -webkit-box; - display: flexbox; - display: flex; -} - -.nav-tabs > li { - margin-bottom: -1px; -} - -.nav-tabs > li > a { - padding: 0.5rem 1rem; - margin-right: 2px; - border: 1px solid transparent; - border-radius: 4px 4px 0 0; -} - -.nav-tabs > li > a.ember-transitioning-in { - color: #fff; - background: #8cb0e6; -} - -.nav-tabs > li > a:focus { - outline: 0; - border-style: dotted; -} - -.nav-tabs > li > a.active { - border-color: #e1e1e1; - border-style: solid; - background-color: #fff; - color: #777; -} - -.nav-tabs > li > a:focus { - border-color: #8cb0e6; -} - -.nav-tabs > li > a.active, -.nav-tabs > li > a:focus { - border-bottom-color: transparent; -} - -.tab-content { - padding-top: 0.75rem; -} - -.tab-content > .tab-pane { - display: none; -} - -.tab-content > .active { - display: block; -} - -.breadcrumb { - display: -webkit-box; - display: flexbox; - display: flex; - flex-wrap: wrap; - padding-bottom: 0.5rem; - margin-bottom: 1rem; - border-bottom: 1px solid #e1e1e1; -} - -.breadcrumb:empty { - display: none; -} - -.breadcrumb > li { - display: block; - white-space: nowrap; -} - -.breadcrumb > li::before { - content: "/"; - margin: 0 0.5rem; - color: #9e9e9e; -} - -.breadcrumb > li:first-child::before { - display: none; -} - -.breadcrumb > li:first-child { - display: block; -} - -@media only screen and (width >=480px) { - .breadcrumb--first-mobileonly > li:first-child, - .breadcrumb--first-mobileonly > li:first-child + li::before { - display: none; - } -} - -.list-group { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -.list-group-item { - position: relative; - display: block; - padding: 0.5rem 1rem; - margin-bottom: -1px; - background-color: #fff; - border: 1px solid #e1e1e1; -} - -.list-group-item.active { - z-index: 2; - color: #fff; - background-color: #5b8edb; - border-color: #5b8edb; -} - -.list-group-item.disabled, -.list-group-item[disabled] { - cursor: not-allowed; - background-color: #867f7c; - border-color: #7a7371; - color: #d1cdcb; - border-width: 1px; - box-shadow: none; -} - -.list-group-item.disabled:focus, -.list-group-item[disabled]:focus { - outline: none; -} - -.list-group-item:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.list-group--flush .list-group-item { - border-width: 1px 0; - border-radius: 0; -} - -.card { - position: relative; - margin-bottom: 0.5rem; - background-color: #fff; - border: 1px solid #e1e1e1; - border-radius: 3px; -} - -.card--inverse { - border-color: #867f7c; - background-color: #867f7c; -} - -.card--inverse .card-blockquote, -.card--inverse .card-footer, -.card--inverse .card-header, -.card--inverse .card-title { - color: #fff; -} - -.card--inverse .card-blockquote > footer, -.card--inverse .card-link, -.card--inverse .card-text { - color: hsl(0deg 0% 100% / 70%); -} - -.card--primary { - background-color: #5b8edb; - border-color: #5b8edb; -} - -.card--success { - background-color: #5cb85c; - border-color: #5cb85c; -} - -.card--info { - background-color: #5bc0de; - border-color: #5bc0de; -} - -.card--warning { - background-color: #f0ad4e; - border-color: #f0ad4e; -} - -.card--danger { - background-color: #d9534f; - border-color: #d9534f; -} - -.card-block { - padding: 1rem; -} - -.card-title { - margin: 0 0 0.5rem; -} - -.card-subtitle { - margin-top: -0.25rem; -} - -.card-subtitle, -.card-text:last-child { - margin-bottom: 0; -} - -.card-link + .card-link { - margin-left: 1rem; -} - -.card-img, -.card-img-bottom, -.card-img-top { - width: 100%; -} - -.card-img { - border-radius: 3px; -} - -.card-img-overlay { - position: absolute; - inset: 0; - padding: 1rem; -} - -.card-img-top { - border-radius: 3px 3px 0 0; -} - -.card-img-bottom { - border-radius: 0 0 3px 3px; -} - -.card-footer, -.card-header { - padding: 0.5rem 1rem; - background-color: #f5f5f5; -} - -.card-header:first-child { - border-radius: 3px 3px 0 0; -} - -.card-header { - border-bottom: 1px solid #e1e1e1; -} - -.card-footer:last-child { - border-radius: 0 0 3px 3px; -} - -.card-footer { - border-top: 1px solid #e1e1e1; -} - -.modal { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 1.5rem; - opacity: 0; - position: fixed; - content: ""; - inset: 0; - z-index: 1001; - background-color: rgb(0 0 0 / 25%); - pointer-events: none; - transition: opacity 0.5s ease; -} - -.modal--visible { - pointer-events: all; - opacity: 1; -} - -.modal-dialog { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - flex-direction: column; - max-height: 100%; - z-index: 1002; - width: 100%; - margin-top: 100%; - border: thin solid #e1e1e1; - border-radius: 6px; - box-shadow: 0 0 0.5rem 0.3rem rgb(0 0 0 / 25%); - transition: margin-top 0.75s ease; -} - -.modal--visible .modal-dialog { - margin-top: 0; -} - -.modal-body, -.modal-footer, -.modal-header { - background-color: #fff; -} - -.modal-footer, -.modal-header { - padding: 0.7rem; -} - -.modal-header { - border-bottom: thin solid #dedede; - font-size: 1.3rem; - font-weight: 500; -} - -.modal-header h1, -.modal-header h2, -.modal-header h3, -.modal-header h4, -.modal-header h5 { - display: inline-block; - margin: 0; -} - -.modal-body { - padding: 1.4rem 0.7rem; - overflow-y: auto; - -ms-flex-negative: 1; - flex-shrink: 1; -} - -.modal-footer { - display: -webkit-box; - display: flexbox; - display: flex; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - border-top: thin solid #dedede; -} - -@media only screen and (width >=992px) { - .modal-dialog:not( - .modal-dialog--fullscreen, - .modal-dialog--auto, - .modal-dialog--small, - .modal-dialog--large - ) { - width: 600px; - } - - .modal-dialog--small { - width: 400px; - } - - .modal-dialog--large { - width: 1000px; - } - - .modal-dialog--auto { - width: auto; - } -} diff --git a/frontend/app/styles/analysis.scss b/frontend/app/styles/analysis.scss deleted file mode 100644 index 7ab92a27a..000000000 --- a/frontend/app/styles/analysis.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use "sass:color"; - -.table--analysis { - margin-bottom: 0; - table-layout: fixed; -} - -.table--analysis > tbody > tr.pointer { - color: rgb(0 0 0); -} - -.table--analysis > tbody > tr.pointer > td:last-child { - box-shadow: inset -2px 0 0 $color-primary; -} - -.table--analysis > tbody > tr:first-of-type td { - border-top: none; -} - -.table--analysis > colgroup > col { - &:nth-child(1), - &:nth-child(2), - &:nth-child(3) { - width: 7%; - } - - &:nth-child(4), - &:nth-child(5), - &:nth-child(6) { - width: 10%; - } - - &:nth-child(8) { - width: 8%; - } - - &:nth-child(9), - &:nth-child(10), - &:nth-child(11), - &:nth-child(12) { - width: 5%; - } - - &:nth-child(7) { - width: 21%; - } -} - -.export-buttons { - text-align: right; - margin-top: 1rem; -} - -.table--analysis tr.selected { - background-color: lighten($color-primary, 20%) !important; -} - -.table--analysis tr.selected + tr td, -.table--analysis tr.selected td { - border-color: lighten($color-primary, 20%) !important; -} - -.highlight { - color: color.adjust($color-primary, $lightness: -10%); -} diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss deleted file mode 100644 index bd7bc673e..000000000 --- a/frontend/app/styles/app.scss +++ /dev/null @@ -1,457 +0,0 @@ -/* AdCSSy variables */ -@import "adcssy"; /* TODO: Pick only relevant styles and delete duplicate color variables */ -@import "variables"; - -/* Plugin customizations */ -@import "ember-power-calendar"; -@import "ember-basic-dropdown"; -@import "ember-power-select-custom"; - -/* Custom styles */ -@import "activities"; -@import "analysis"; -@import "attendances"; -@import "badge"; -@import "filter-sidebar"; -@import "form-list"; -@import "loader"; -@import "projects"; -@import "reports"; -@import "statistics"; -@import "toolbar"; -@import "tour"; -@import "users-navigation"; -@import "users"; -@import "login"; - -/* Component styles */ -@import "components/attendance-slider"; -@import "components/balance-donut"; -@import "components/date-buttons"; -@import "components/date-navigation"; -@import "components/filter-sidebar--group"; -@import "components/filter-sidebar--label"; -@import "components/loading-icon"; -@import "components/magic-link-btn"; -@import "components/nav-top"; -@import "components/progress-tooltip"; -@import "components/record-button"; -@import "components/scroll-container"; -@import "components/sort-header"; -@import "components/statistic-list-bar"; -@import "components/sy-calendar"; -@import "components/sy-checkbox"; -@import "components/sy-datepicker"; -@import "components/sy-durationpicker-day"; -@import "components/sy-modal"; -@import "components/sy-toggle"; -@import "components/timed-clock"; -@import "components/tracking-bar"; -@import "components/weekly-overview"; -@import "components/weekly-overview-benchmark"; -@import "components/weekly-overview-day"; -@import "components/welcome-modal"; - -html { - hyphens: auto; -} - -hr { - border: none; - width: 100%; - height: 7px; - background: linear-gradient(to bottom, rgb(0 0 0 / 3%), rgb(0 0 0 / 0%)); -} - -strong { - font-weight: bold; -} - -.flex { - display: flex; -} - -.margin-small-left { - margin-left: 0.5rem; -} - -.margin-small-right { - margin-left: 0.5rem; -} - -.margin-small-top { - margin-top: 0.5rem; -} - -.margin-small-bottom { - margin-bottom: 0.5rem; -} - -.margin-medium-left { - margin-left: 1rem; -} - -.margin-medium-right { - margin-left: 1rem; -} - -.margin-medium-top { - margin-top: 1rem; -} - -.margin-medium-bottom { - margin-bottom: 1rem; -} - -.flex-grow { - flex: 1; -} - -.flex-shrink { - flex: 0; -} - -.height-100 { - height: 100%; -} - -.pointer { - cursor: pointer; -} - -.table > tfoot > tr > td > .pagination { - margin-left: -10px; -} - -.pagination > li { - margin-right: 5px; -} - -.pagination > li > a { - border: none !important; - border-radius: 4px; - padding: 0.3rem 0.8rem; -} - -.btn-noclick { - pointer-events: none; -} - -.btn-toolbar--right { - justify-content: flex-end; -} - -.page-main { - position: relative; -} - -.nav-tabs { - position: relative; - - > li > a { - white-space: nowrap; - } -} - -.card-block .table { - margin: 0; -} - -.worktime-balance { - border-bottom: 3px double rgb(0 0 0); - font-weight: bold; -} - -.worktime-balance.color-danger { - border-bottom-color: $color-danger; -} - -.worktime-balance.color-success { - border-bottom-color: $color-success; - - &::before { - display: inline-block; - margin-right: -0.2em; - content: "+"; - } -} - -.error-text, -.invalid-feedback { - font-size: 80%; - margin: 0; - color: $color-danger; -} - -.form-group.has-error { - label { - color: $color-danger; - } - - .form-control { - border-color: lighten($color-danger, 20%); - - &:focus, - &:focus-within { - border-color: lighten($color-danger, 20%); - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, - 0 0 8px opacify($color-danger, 0.6); - } - } -} - -.form-control { - &:focus-within { - border-color: lighten($color-primary, 20%); - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, - 0 0 8px opacify($color-primary, 0.6); - } - - &.duration-day { - text-align: center; - } - - &.extendend-durationpicker-day { - padding-bottom: unset; - padding-top: unset; - } - - input { - border: none; - outline: none; - } -} - -.comment-field { - padding-right: 35px; -} - -.btn-group--auto .btn { - flex-grow: 1; -} - -.no-margin { - margin: 0 !important; -} - -.no-padding { - padding: 0 !important; -} - -.nav-tab--buttons { - position: absolute; - right: 0; - bottom: 0; - - .btn { - margin-left: 0.5rem; - z-index: 0; - border-bottom-width: 1px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } -} - -.calendar { - @include ember-power-calendar($cell-size: 50px); - - .ember-power-calendar-day:not(:disabled) { - cursor: pointer; - transition: background-color 300ms ease; - } - - .ember-power-calendar-day--selected { - background-color: $color-primary; - color: rgb(255 255 255); - - &:not(:disabled):hover { - background-color: lighten($color-primary, 25%); - color: rgb(255 255 255); - } - } - - .ember-power-calendar-day--focused { - box-shadow: inset 0 -2px 0 0 $color-primary; - } -} - -@media #{$sm-viewport} { - .login-form .btn { - width: 125px; - } - - .table--activities tr td:last-child { - display: flex; - } - - .table--activities tr { - height: 45px; - display: flex; - min-width: 0; - - td { - display: flex; - align-items: center; - - &:nth-child(1) { - flex-basis: 10%; - } - - &:nth-child(2) { - flex-basis: 25%; - - // inline-grid property because it doesnt work the right way - display: inline-grid; - - div { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - &:nth-child(3) { - flex-basis: 35%; - display: inline-grid; - - div { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - &:nth-child(4) { - flex-basis: 20%; - justify-content: space-around; - - div.i { - margin-right: 5px; - } - } - - &:nth-child(5) { - flex-basis: 5%; - } - - &:nth-child(6) { - flex-basis: 5%; - justify-content: flex-end; - - .btn { - margin-left: 10px; - } - } - } - } -} - -@media screen and (width <=680px) { - .table--activities tr td { - display: flex; - - &:nth-child(4) { - div { - margin-right: 10px; - } - - div > i { - margin-right: 5px; - } - } - } -} - -.total { - border-bottom: 3px double $body-color; -} - -.table--absence-types > thead > tr > th, -.table--absence-types > tbody > tr > td { - .grid { - margin: 0; - } - - .credit-row { - font-size: 70%; - - &:nth-child(1) { - padding-top: 0.5rem; - } - - .grid-cell:first-child { - padding-left: 1rem; - } - } -} - -.empty { - color: darken($color-border, 25%); - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - - .svg-inline--fa { - margin-bottom: 1rem; - font-size: 10rem; - color: $color-border; - } - - .loading-spinner { - --color: darken($color-border, 25%); - } - - h3 { - color: inherit; - } -} - -.activity-customer-visible-icon { - position: relative; - float: right; - z-index: 1; -} - -.customer-visible-icon { - position: relative; - float: right; - margin-top: -1.7rem; - margin-right: 0.8rem; - z-index: 1; -} - -@media (width <= 680px) { - .activity-customer-visible-icon { - margin-top: 0; - margin-right: 10px; - } - - .customer-visible-icon { - margin-top: -2.5rem; - } -} - -.customer-visible-icon { - margin-top: -1.7rem; -} - -@media #{$sm-viewport} { - .activity-customer-visible-icon { - margin-top: -2rem; - margin-left: 85%; - } -} - -@media #{$md-viewport} { - .activity-customer-visible-icon { - margin-top: -30px; - margin-left: 95%; - } - - .customer-visible-icon { - margin-top: -1.7rem; - } -} diff --git a/frontend/app/styles/attendances.scss b/frontend/app/styles/attendances.scss deleted file mode 100644 index fb2899652..000000000 --- a/frontend/app/styles/attendances.scss +++ /dev/null @@ -1,15 +0,0 @@ -.table--attendances > tbody > tr > td { - &:nth-child(1), - &:nth-child(2) { - width: auto; - } - - &:nth-child(3) { - width: 105px; - text-align: right; - - .btn { - display: inline-flex; - } - } -} diff --git a/frontend/app/styles/badge.scss b/frontend/app/styles/badge.scss deleted file mode 100644 index f7b5862ce..000000000 --- a/frontend/app/styles/badge.scss +++ /dev/null @@ -1,35 +0,0 @@ -.badge { - display: inline-block; - min-width: 10px; - padding: 0.2rem 0.4rem; - margin-left: 0.2rem; - font-size: $font-size-base * 0.8; - line-height: 1; - color: rgb(255 255 255); - text-align: center; - white-space: nowrap; - vertical-align: middle; - background-color: $color-secondary; - border-radius: 10px; -} - -a.active .badge, -.badge--primary { - background-color: $color-primary; -} - -.badge--success { - background-color: $color-success; -} - -.badge--info { - background-color: $color-info; -} - -.badge--warning { - background-color: $color-warning; -} - -.badge--danger { - background-color: $color-danger; -} diff --git a/frontend/app/styles/components/attendance-slider.scss b/frontend/app/styles/components/attendance-slider.scss deleted file mode 100644 index 9fd6a46ed..000000000 --- a/frontend/app/styles/components/attendance-slider.scss +++ /dev/null @@ -1,81 +0,0 @@ -.attendance-slider { - padding-top: 1rem; - position: relative; - - .noUi-handle-lower { - cursor: w-resize; - } - - .noUi-handle-upper { - cursor: e-resize; - } - - .noUi-handle { - right: 0 !important; - width: 8px; - height: 25px; - top: -4px; - border-radius: 0; - - &::after, - &::before { - display: none; - } - } - - .noUi-tooltip { - left: 50%; - transform: translateX(-50%); - background: transparent; - border: none; - font-size: 10px; - font-family: $font-family-mono; - } - - .noUi-handle-lower .noUi-tooltip, - .noUi-handle-upper .noUi-tooltip { - top: -18px; - } - - .noUi-connect { - background: $color-primary; - } - - .noUi-draggable { - cursor: move; - } - - .slider-labels { - position: relative; - height: 3rem; - } - - .slider-label { - display: flex; - font-family: $font-family-mono; - position: absolute; - font-size: 0.6rem; - top: 1rem; - transform: translateX(-75%); - - &--sm { - font-size: 0.5rem; - color: desaturate($body-color, 50%); - } - } - - .slider-label-text { - transform: rotate(-45deg); - } - - .slider-title { - position: absolute; - top: 0; - left: 0; - font-size: 12px; - - .fa-trash-can { - cursor: pointer; - } - } -} diff --git a/frontend/app/styles/components/balance-donut.scss b/frontend/app/styles/components/balance-donut.scss deleted file mode 100644 index 33d47d08d..000000000 --- a/frontend/app/styles/components/balance-donut.scss +++ /dev/null @@ -1,108 +0,0 @@ -.balance-donut { - --max-offset: 0; - - transition: transform 1s ease; - transform: translateY(calc(var(--max-offset) * var(--offset-multiplicator))); - - .donut-title { - color: $body-color; - font-size: 1.5rem; - word-break: break-all; - hyphens: auto; - } - - .donut { - position: relative; - } - - .donut-ring { - stroke: rgb(200 200 200); - } - - .donut-content { - animation: donut-content 1s ease-in-out; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - font-size: 1.2rem; - padding: 1rem; - word-break: break-all; - - div:first-child:not(:last-child) { - font-size: 60%; - color: lighten($body-color, 30%); - } - } - - @keyframes donut-content { - 0% { - opacity: 0; - transform: scale(0); - } - - 80% { - transform: scale(1.06); - } - - 90% { - transform: scale(0.94); - } - - 95% { - transform: scale(1.02); - } - - 100% { - opacity: 1; - transform: scale(1); - } - } - - @mixin donut-segment($color-name, $color) { - stroke: $color; - animation-name: donut-segment-#{$color-name}; - - @keyframes donut-segment-#{$color-name} { - from { - stroke: darken($color, 50%); - stroke-dasharray: 0 100; - } - } - } - - .donut-segment { - @include donut-segment("primary", $color-primary); - - animation-duration: 1s; - animation-timing-function: ease-in-out; - } - - &.success .donut-segment { - @include donut-segment("success", $color-success); - } - - &.info .donut-segment { - @include donut-segment("info", $color-info); - } - - &.warning .donut-segment { - @include donut-segment("warning", $color-warning); - } - - &.danger .donut-segment { - @include donut-segment("danger", $color-danger); - } - - @media #{$lg-viewport} { - & { - --max-offset: -90px; - } - } -} diff --git a/frontend/app/styles/components/date-buttons.scss b/frontend/app/styles/components/date-buttons.scss deleted file mode 100644 index ac4e692ef..000000000 --- a/frontend/app/styles/components/date-buttons.scss +++ /dev/null @@ -1,3 +0,0 @@ -.date-button { - width: 32.5%; -} diff --git a/frontend/app/styles/components/date-navigation.scss b/frontend/app/styles/components/date-navigation.scss deleted file mode 100644 index 945ee85f5..000000000 --- a/frontend/app/styles/components/date-navigation.scss +++ /dev/null @@ -1,22 +0,0 @@ -.date-navigation { - display: flex; - flex-grow: 1; - justify-content: space-between; - padding: 1rem 0; -} - -.btn-group { - margin-right: 10px; -} - -.date-navigation-container { - flex-grow: 1; - display: flex; -} - -@media #{$sm-viewport} { - .date-navigation { - justify-content: flex-end; - padding: 0; - } -} diff --git a/frontend/app/styles/components/filter-sidebar--group.scss b/frontend/app/styles/components/filter-sidebar--group.scss deleted file mode 100644 index 48237e757..000000000 --- a/frontend/app/styles/components/filter-sidebar--group.scss +++ /dev/null @@ -1,47 +0,0 @@ -.filter-sidebar-group { - display: flex; - flex-direction: column; - - &.filter-sidebar-group--expanded .filter-sidebar-group-label .fa { - transform: rotate(90deg); - } - - &.filter-sidebar-group--expanded .filter-sidebar-group-label, - .filter-sidebar-group-label:hover { - color: $body-color; - } - - &.filter-sidebar-group--expanded .filter-sidebar-group-body { - max-height: 450px; - } - - .filter-sidebar-group-label { - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - padding: 1rem; - color: lighten($body-color, 50%); - border-top: 1px solid $color-border; - transition: color 0.3s ease; - - &:focus { - outline: none; - } - } - - .filter-sidebar-group-body { - display: block; - overflow: hidden; - max-height: 0; - transition: max-height 0.3s ease; - } - - .filter-sidebar-group-content { - padding: 0.5rem 1rem; - } - - .filter-sidebar-group-label .fa { - transition: transform 0.3s ease; - } -} diff --git a/frontend/app/styles/components/filter-sidebar--label.scss b/frontend/app/styles/components/filter-sidebar--label.scss deleted file mode 100644 index c6775b30a..000000000 --- a/frontend/app/styles/components/filter-sidebar--label.scss +++ /dev/null @@ -1,11 +0,0 @@ -.filter-sidebar-label { - display: block; - font-size: 0.75rem; - font-weight: 500; - padding: 0.5rem 0; -} - -.filter-sidebar-label > * { - font-weight: 300; - margin-top: 0.3rem; -} diff --git a/frontend/app/styles/components/loading-icon.scss b/frontend/app/styles/components/loading-icon.scss deleted file mode 100644 index eac27cfcd..000000000 --- a/frontend/app/styles/components/loading-icon.scss +++ /dev/null @@ -1,84 +0,0 @@ -.loading-icon { - --size: 140px; - - display: inline-flex; - flex-wrap: wrap; - height: var(--size); - width: var(--size); - animation: loading-pop-up 1s ease forwards; - - .loading-dot { - height: calc(1 / 3 * var(--size)); - width: calc(1 / 3 * var(--size)); - position: relative; - opacity: 0.75; - - &:nth-child(5)::before { - animation-delay: 0ms; - background-color: darken($color-primary, 40%); - height: 80%; - width: 80%; - } - - &:nth-child(1)::before, - &:nth-child(3)::before, - &:nth-child(7)::before, - &:nth-child(9)::before { - animation-delay: -500ms; - background-color: darken($color-primary, 0%); - height: 60%; - width: 60%; - } - - &:nth-child(2)::before, - &:nth-child(4)::before, - &:nth-child(6)::before, - &:nth-child(8)::before { - animation-delay: -1000ms; - background-color: darken($color-primary, 20%); - height: 70%; - width: 70%; - } - - &::before { - content: ""; - display: block; - position: absolute; - top: 50%; - left: 50%; - border-radius: 50%; - transform-origin: center center; - opacity: 1; - transform: translate(-50%, -50%) scale(1); - will-change: opacity, transform; - animation: loading-flash 3000ms ease-in-out infinite; - } - } -} - -@keyframes loading-pop-up { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes loading-flash { - 0% { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } - - 50% { - opacity: 0.4; - transform: translate(-50%, -50%) scale(0.9); - } - - 100% { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } -} diff --git a/frontend/app/styles/components/magic-link-btn.scss b/frontend/app/styles/components/magic-link-btn.scss deleted file mode 100644 index 6efc845d9..000000000 --- a/frontend/app/styles/components/magic-link-btn.scss +++ /dev/null @@ -1,7 +0,0 @@ -.ember-basic-dropdown-content { - z-index: 1002; -} - -.magic-link-modal { - min-width: 500px; -} diff --git a/frontend/app/styles/components/nav-top.scss b/frontend/app/styles/components/nav-top.scss deleted file mode 100644 index cb4a2cef2..000000000 --- a/frontend/app/styles/components/nav-top.scss +++ /dev/null @@ -1,53 +0,0 @@ -nav { - .nav-top-header-title { - display: none; - font-weight: 500; - } - - .timed-clock { - padding: 0.3rem 0; - margin-right: 0.3rem; - } - - .nav-top-toggle { - display: block; - } - - .nav-top-list-item a { - display: grid; - grid-template-columns: 2em 1fr; - align-items: center; - } - - @media #{$nav-top-mobile-width} { - .nav-top-header-title { - display: block; - } - - .nav-top-header-title-version { - color: rgb(150 150 150); - font-size: 0.5rem; - font-family: $font-family-mono; - } - - .nav-top-list-item a.active { - background-color: $color-primary; - color: #fff; - } - - .nav-top-list-item a:hover { - background-color: lighten($color-primary, 20%); - color: #fff; - } - - .nav-top-list-item a { - padding: 0.6rem 0.8rem; - border-radius: 0; - display: revert; - } - - .nav-top-toggle { - display: none; - } - } -} diff --git a/frontend/app/styles/components/progress-tooltip.scss b/frontend/app/styles/components/progress-tooltip.scss deleted file mode 100644 index 162cafc0d..000000000 --- a/frontend/app/styles/components/progress-tooltip.scss +++ /dev/null @@ -1,81 +0,0 @@ -$progress-tooltip-arrow-size: 0.5rem; -$progress-tooltip-color: rgb(87 87 87); - -.progress-tooltip { - z-index: 1000; - background: $progress-tooltip-color; - box-shadow: 0 1px 5px rgb(23 23 23 / 50%); - max-width: initial; - color: rgb(255 255 255); - font-size: 0.9rem; - padding: 0.3rem 0.5rem; - border-radius: 0.3rem; - animation: 200ms ease slide-in; - - .time-info { - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto; - grid-gap: 0.25rem 0.5rem; - margin: 0.25rem; - - :nth-child(1) { - grid-area: 1 / 1 / 2 / 2; - } - - :nth-child(2) { - grid-area: 1 / 2 / 2 / 3; - } - - :nth-child(3) { - grid-area: 2 / 1 / 3 / 2; - } - - :nth-child(4) { - grid-area: 2 / 2 / 3 / 3; - } - - :nth-child(5) { - grid-area: 3 / 1 / 4 / 3; - } - - :nth-child(6) { - grid-area: 4 / 1 / 5 / 2; - } - - :nth-child(7) { - grid-area: 4 / 2 / 5 / 3; - } - - .progress-badge { - display: flex; - justify-content: end; - } - } - - &::after { - content: ""; - display: block; - width: 0; - height: 0; - position: absolute; - right: 0; - top: 50%; - transform: translate(100%, -50%); - border-top: $progress-tooltip-arrow-size solid transparent; - border-bottom: $progress-tooltip-arrow-size solid transparent; - border-left: $progress-tooltip-arrow-size solid $progress-tooltip-color; - } -} - -@keyframes slide-in { - from { - opacity: 0; - left: -15px; - } - - to { - opacity: 1; - left: 0; - } -} diff --git a/frontend/app/styles/components/record-button.scss b/frontend/app/styles/components/record-button.scss deleted file mode 100644 index bc2fa7146..000000000 --- a/frontend/app/styles/components/record-button.scss +++ /dev/null @@ -1,80 +0,0 @@ -.record-button-container { - display: flex; - justify-content: center; - position: relative; - background: rgb(80 80 80); - border-radius: 1.5rem; - height: 3rem; - width: 3rem; - margin: 0 auto; - transition: width 300ms ease; - font-family: $font-family-mono; - font-size: 14px; - - &--recording { - width: 10rem; - } - - .record-button { - position: absolute; - top: 0.4rem; - left: 0.4rem; - width: 2.2rem; - height: 2.2rem; - padding: 0; - border-radius: 50%; - border: none; - cursor: pointer; - background: radial-gradient( - circle at center, - rgb(240 240 240) 50%, - rgb(180 180 180) 80% - ); - z-index: 2; - - svg { - vertical-align: middle; - } - - &--start, - &--stop { - color: $color-danger; - } - } - - .record-button-timer { - position: absolute; - right: 0.8rem; - top: 50%; - transform: translateY(-50%); - color: white; - overflow: hidden; - pointer-events: none; - text-align: right; - } -} - -@media #{$md-viewport} { - .record-button-container--recording { - width: 9rem; - } -} - -@media #{$lg-viewport} { - .record-button-container { - justify-content: flex-start; - height: 2rem; - width: 2rem; - - &--recording { - width: 7.5rem; - } - - .record-button { - height: 1.6rem; - width: 1.6rem; - top: 0.2rem; - left: 0.2rem; - } - } -} diff --git a/frontend/app/styles/components/scroll-container.scss b/frontend/app/styles/components/scroll-container.scss deleted file mode 100644 index 95ceb24e8..000000000 --- a/frontend/app/styles/components/scroll-container.scss +++ /dev/null @@ -1,25 +0,0 @@ -.scroll-container { - max-height: 100%; - min-height: 20px; - overflow-y: auto; - - &::after, - &::before { - content: ""; - position: absolute; - z-index: 1; - left: 0; - right: 0; - height: 7px; - background: linear-gradient(to bottom, rgb(0 0 0 / 3%), rgb(0 0 0 / 0%)); - } - - &::before { - top: 0; - } - - &::after { - bottom: 0; - transform: rotate(180deg); - } -} diff --git a/frontend/app/styles/components/sort-header.scss b/frontend/app/styles/components/sort-header.scss deleted file mode 100644 index 511c04442..000000000 --- a/frontend/app/styles/components/sort-header.scss +++ /dev/null @@ -1,4 +0,0 @@ -.sort-header { - white-space: nowrap; - cursor: pointer; -} diff --git a/frontend/app/styles/components/statistic-list-bar.scss b/frontend/app/styles/components/statistic-list-bar.scss deleted file mode 100644 index 8a0ab71da..000000000 --- a/frontend/app/styles/components/statistic-list-bar.scss +++ /dev/null @@ -1,85 +0,0 @@ -.statistic-list-bar-wrapper { - height: 20px; - - .statistic-list-bar { - width: 100%; - height: 20px; - position: relative; - overflow: hidden; - z-index: 3; - - --value: 0; - - &::before { - content: ""; - display: block; - height: 100%; - width: 100%; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - background-color: $color-primary; - transform: translateX(calc((1 - var(--value)) * -100%)); - transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); - animation: slide-in-statistic-bar 0.5s cubic-bezier(0.86, 0, 0.07, 1); - } - - &.strong-success::before { - background-color: $color-success; - } - - &.strong-danger::before { - background-color: $color-danger; - } - - &.success::before { - background-color: $color-success-lighter; - } - - &.danger::before { - background-color: $color-danger-lighter; - } - - &.remaining { - // align on the same level as progress bar - top: -20px; - z-index: 2; - } - } - - .statistic-list-bar-goal { - position: relative; - height: 30px; - width: 100%; - overflow: hidden; - - --goal: 0; - - &::before { - content: ""; - display: block; - height: 100%; - width: 100%; - background-color: transparent; - border-left: 2px dotted $color-danger-darker; - transform: translateX(calc(var(--goal) * 100%)); - transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); - animation: slide-in-statistic-bar 0.5s cubic-bezier(0.86, 0, 0.07, 1); - } - } - - // case: remaining effort tracking is disabled - :nth-child(2).statistic-list-bar-goal { - top: -25px; - } - - // case: remaining effort tracking is enabled - :nth-child(3).statistic-list-bar-goal { - top: -45px; - } - - @keyframes slide-in-statistic-bar { - 0% { - transform: translateX(-100%); - } - } -} diff --git a/frontend/app/styles/components/sy-calendar.scss b/frontend/app/styles/components/sy-calendar.scss deleted file mode 100644 index 21585cc5a..000000000 --- a/frontend/app/styles/components/sy-calendar.scss +++ /dev/null @@ -1,44 +0,0 @@ -.sy-calendar { - @include ember-power-calendar($cell-size: 35px); - - .ember-power-calendar-nav-control { - color: $color-primary; - cursor: pointer; - } - - .nav-select-month, - .nav-select-year { - position: relative; - - select { - position: absolute; - inset: 0; - opacity: 0; - } - } - - .ember-power-calendar-day { - cursor: pointer; - transition: background-color 300ms ease, color 300ms ease; - - &--focused { - box-shadow: inset 0 -2px 0 0 $color-primary; - } - - &--selected { - color: rgb(255 255 255); - background-color: lighten($color-primary, 20%); - - &:hover { - color: rgb(255 255 255); - background-color: lighten($color-primary, 30%); - } - } - } -} - -.sy-calendar.sy-datepicker { - border: 1px solid $color-border; - padding: 0.5rem; - box-shadow: 2px 2px 10px rgb(0 0 0 / 20%); -} diff --git a/frontend/app/styles/components/sy-checkbox.scss b/frontend/app/styles/components/sy-checkbox.scss deleted file mode 100644 index 8a5b40d22..000000000 --- a/frontend/app/styles/components/sy-checkbox.scss +++ /dev/null @@ -1,6 +0,0 @@ -.sy-checkbox > input[type="checkbox"]:indeterminate + label::after { - content: "\2012"; - opacity: 1; - transform: scale(1); - left: 0.23rem; -} diff --git a/frontend/app/styles/components/sy-datepicker.scss b/frontend/app/styles/components/sy-datepicker.scss deleted file mode 100644 index 779a857c7..000000000 --- a/frontend/app/styles/components/sy-datepicker.scss +++ /dev/null @@ -1,15 +0,0 @@ -.sy-datepicker-trigger.ember-basic-dropdown-trigger { - position: relative; - - span.clear { - cursor: pointer; - color: #555; - line-height: 1.5; - font-size: 0.9rem; - background-color: #fff; - padding: 0 2px; - right: 0.75rem; - top: 50%; - transform: translateY(-50%); - } -} diff --git a/frontend/app/styles/components/sy-durationpicker-day.scss b/frontend/app/styles/components/sy-durationpicker-day.scss deleted file mode 100644 index fd1c1228f..000000000 --- a/frontend/app/styles/components/sy-durationpicker-day.scss +++ /dev/null @@ -1,18 +0,0 @@ -.extendend-durationpicker-day { - display: flex; - justify-content: space-between; - align-items: center; - - * { - flex: 0 0 1.25rem; - } - - input { - width: 100%; - flex: 1 0 70%; - } - - :nth-child(2) { - margin-left: 0.25rem; - } -} diff --git a/frontend/app/styles/components/sy-modal.scss b/frontend/app/styles/components/sy-modal.scss deleted file mode 100644 index f7336e914..000000000 --- a/frontend/app/styles/components/sy-modal.scss +++ /dev/null @@ -1,17 +0,0 @@ -#sy-modals > * { - overflow-x: hidden; - - > .form-group:last-child { - margin-bottom: 0; - } -} - -.modal-footer { - .btn:not(:last-of-type) { - margin-right: 0.7rem; - } -} - -.modal-overlay { - transition: none; -} diff --git a/frontend/app/styles/components/sy-toggle.scss b/frontend/app/styles/components/sy-toggle.scss deleted file mode 100644 index 52fc6921d..000000000 --- a/frontend/app/styles/components/sy-toggle.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "sass:color"; - -.sy-toggle { - display: flex; - align-items: center; - cursor: pointer; - margin: auto; - - &.active { - color: color.adjust($color-primary, $lightness: -10%); - } - - &.inactive { - color: $color-secondary; - } - - &.form-control { - background-color: unset; - border: unset; - box-shadow: unset; - } -} - -.form-list-cell > .margin-small-right { - margin-right: 0.5rem; -} diff --git a/frontend/app/styles/components/timed-clock.scss b/frontend/app/styles/components/timed-clock.scss deleted file mode 100644 index ad36357e9..000000000 --- a/frontend/app/styles/components/timed-clock.scss +++ /dev/null @@ -1,25 +0,0 @@ -.timed-clock { - --clock-size: 50px; - --clock-color: rgb(87 87 87); - --clock-color-secondary: rgb(217 83 79); - - width: var(--clock-size); - height: var(--clock-size); - - .circle { - fill: transparent; - stroke: var(--clock-color); - } - - .hour { - stroke: var(--clock-color); - } - - .minute { - stroke: var(--clock-color); - } - - .second { - stroke: var(--clock-color-secondary); - } -} diff --git a/frontend/app/styles/components/tracking-bar.scss b/frontend/app/styles/components/tracking-bar.scss deleted file mode 100644 index 550836b2c..000000000 --- a/frontend/app/styles/components/tracking-bar.scss +++ /dev/null @@ -1,36 +0,0 @@ -.tracking-bar { - background: white; - border-bottom: 1px solid rgb(220 220 220); - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; - - @media #{$lg-viewport} { - #task-form { - display: flex; - flex-direction: row; - - .form-group { - margin-bottom: 0; - } - - .form-group:not(:last-child) { - margin-right: 0.5rem; - flex-grow: 2; - } - - .form-group:nth-last-child(2) { - flex-grow: 3; - } - } - - .form-control { - width: 100%; - } - } - - @media #{$xs-viewport} { - .form-control { - padding-right: 35px; - } - } -} diff --git a/frontend/app/styles/components/weekly-overview-benchmark.scss b/frontend/app/styles/components/weekly-overview-benchmark.scss deleted file mode 100644 index 4a4058f59..000000000 --- a/frontend/app/styles/components/weekly-overview-benchmark.scss +++ /dev/null @@ -1,39 +0,0 @@ -.weekly-overview-benchmark { - display: flex; - align-items: center; - position: absolute; - inset: 0; - - &.expected { - hr { - background-color: $color-primary; - } - - span { - color: $color-primary; - } - } - - hr { - margin: 0; - border: none; - height: 1px; - width: 100%; - background-color: transparentize($color-primary, 0.7); - position: absolute; - left: 0; - right: 0; - } - - span { - width: 30px; - font-family: $font-family-mono; - font-size: 12px; - text-align: right; - color: transparentize($color-primary, 0.7); - transform: translateY(50%); - position: absolute; - left: -35px; - right: 0; - } -} diff --git a/frontend/app/styles/components/weekly-overview-day.scss b/frontend/app/styles/components/weekly-overview-day.scss deleted file mode 100644 index 2c2b65d8c..000000000 --- a/frontend/app/styles/components/weekly-overview-day.scss +++ /dev/null @@ -1,74 +0,0 @@ -@use "sass:color"; - -.weekly-overview-day { - height: 0%; - width: 15px; - position: relative; - z-index: 1; - cursor: pointer; - transition: height 300ms ease; - - .bar { - background-color: rgb(150 150 150); - height: 100%; - width: 100%; - transition: background-color 300ms ease; - } - - .day { - position: absolute; - font-family: $font-family-mono; - font-size: 12px; - left: 50%; - bottom: -35px; - text-align: center; - transform: translateX(-50%); - color: rgb(150 150 150); - transition: color 300ms ease; - } - - &.weekend, - &.holiday { - .bar { - background-color: rgb(220 220 220); - } - - .day { - color: rgb(220 220 220); - } - } - - &.absence { - .bar { - background-color: $color-warning; - } - - .day { - color: $color-warning; - } - } - - &.active { - .bar { - background-color: $color-primary; - } - - .day { - color: $color-primary; - font-weight: bold; - padding: 0 5px 5px; - margin-bottom: -5px; - border-bottom: 2px solid $color-primary; - } - } - - &:hover { - .bar { - background-color: color.adjust($color-primary, $saturation: -30%); - } - - .day { - color: color.adjust($color-primary, $saturation: -30%); - } - } -} diff --git a/frontend/app/styles/components/weekly-overview.scss b/frontend/app/styles/components/weekly-overview.scss deleted file mode 100644 index ed027b94c..000000000 --- a/frontend/app/styles/components/weekly-overview.scss +++ /dev/null @@ -1,15 +0,0 @@ -.weekly-overview { - width: 100%; - padding: 20px 0 50px 50px; - overflow: hidden; - display: none; - display: flex; - - .weekly-overview-children { - flex-grow: 1; - position: relative; - display: flex; - justify-content: space-around; - align-items: flex-end; - } -} diff --git a/frontend/app/styles/components/welcome-modal.scss b/frontend/app/styles/components/welcome-modal.scss deleted file mode 100644 index 0c5fcd7bf..000000000 --- a/frontend/app/styles/components/welcome-modal.scss +++ /dev/null @@ -1,5 +0,0 @@ -.welcome-modal-body { - .logo { - max-width: 50%; - } -} diff --git a/frontend/app/styles/ember-power-select-custom.scss b/frontend/app/styles/ember-power-select-custom.scss deleted file mode 100644 index 6f8d72b1a..000000000 --- a/frontend/app/styles/ember-power-select-custom.scss +++ /dev/null @@ -1,137 +0,0 @@ -@import "ember-power-select"; - -.ember-power-select-dropdown { - min-width: 250px; -} - -.ember-power-select-options[role="listbox"] { - max-height: 425px; - position: relative; -} - -.ember-power-select-option:not( - .ember-power-select-option--no-matches-message, - .ember-power-select-option--loading-message - ) { - padding: 0; - line-height: 1; - - div { - padding: 0 8px; - line-height: 1.6; - - &.inactive { - background-color: rgb(230 230 230); - } - - .history { - display: inline-flex; - align-items: center; - - .fa { - padding-right: 0.5rem; - } - - .history-text { - display: inline-flex; - flex-direction: column; - - small { - font-size: 0.6rem; - margin: 0.2rem 0 -0.2rem; - } - } - } - } - - &[aria-current="true"] .inactive, - &[aria-selected="true"] .inactive { - background-color: transparent; - } - - &[aria-selected="true"] { - background-color: $color-primary; - color: rgb(255 255 255); - } - - &[aria-current="true"] { - background-color: opacify($color-primary, 0.6); - } -} - -.ember-power-select-placeholder, -.ember-power-select-selected-item, -.ember-power-select-option { - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; -} - -.ember-power-select-placeholder, -.ember-power-select-selected-item { - margin: 0; - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -.ember-power-select-trigger { - display: block; - overflow: hidden; - width: 100%; - min-height: 3rem; - padding: 0.3rem 0.5rem; - font-size: 1.2rem; - line-height: 1.5; - color: rgb(85 85 85); - background-color: rgb(255 255 255); - border: 1px solid rgb(204 204 204); - border-radius: $input-border-radius; - box-shadow: $input-box-shadow; - transition: border-color 0.15s, box-shadow 0.15s; - padding-right: 2rem; - - &:focus { - border-color: lighten($color-primary, 20%); - outline: 0; - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, - 0 0 8px opacify($color-primary, 0.6); - } - - &[aria-disabled="true"] { - .ember-power-select-status-icon { - background-color: rgb(238 238 238); - } - } - - .ember-power-select-clear-btn { - background-color: rgb(255 255 255); - padding: 0 2px; - right: 2rem; - top: 50%; - transform: translateY(-50%); - } - - .ember-power-select-status-icon { - background-color: rgb(255 255 255); - transform: none !important; - width: 2rem; - border: none; - height: calc(100% - 2px); - border-top-right-radius: $input-border-radius; - border-bottom-right-radius: $input-border-radius; - right: 0; - top: 1px; - background-image: url('data:image/svg+xml,'); - background-position: right 0.5rem center; - background-size: 22px; - background-repeat: no-repeat; - } -} - -@media #{$sm-viewport} { - .ember-power-select-trigger { - font-size: 0.9rem; - min-height: 2rem; - } -} diff --git a/frontend/app/styles/filter-sidebar.scss b/frontend/app/styles/filter-sidebar.scss deleted file mode 100644 index cce15776b..000000000 --- a/frontend/app/styles/filter-sidebar.scss +++ /dev/null @@ -1,132 +0,0 @@ -.filter-sidebar { - position: fixed; - top: 50px; - right: 0; - bottom: 0; - z-index: 999; - display: flex; - min-width: 300px; - max-width: 340px; - flex-direction: column; - background: rgb(255 255 255); - transform: translateX(100%); - transition: transform 300ms ease; -} - -.filter-sidebar--visible { - box-shadow: 0 0 10px rgb(0 0 0 / 20%); - transform: translateX(0); -} - -.filter-sidebar-content { - overflow-y: auto; - flex-grow: 1; -} - -.filter-sidebar-content - > .filter-sidebar-group:first-child - > .filter-sidebar-group-label { - border-top: none; -} - -.filter-sidebar-title { - padding: 1rem; - display: flex; - flex-shrink: 0; - justify-content: space-between; - border-bottom: 1px solid $color-border; - font-weight: 700; -} - -.filter-sidebar-toggle { - position: absolute; - left: 0; - top: 1rem; - transform: translateX(-100%); - border: none; - cursor: pointer; - background: transparent; - width: 6.5rem; - height: 4rem; - text-align: right; - color: rgb(255 255 255); - overflow: hidden; - padding: 0.5rem 0; - outline: none; -} - -.filter-sidebar-toggle-background, -.filter-sidebar-toggle-icon, -.filter-sidebar-toggle-text { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - right: 0; - top: 0.5rem; - height: 3rem; -} - -.filter-sidebar-toggle-background { - width: 100%; - background-color: $color-primary; - box-shadow: 0 0 10px rgb(0 0 0 / 20%); - border-top-left-radius: 0.3rem; - border-bottom-left-radius: 0.3rem; - transform: translateX(3.5rem); - transition: transform 300ms ease; -} - -.filter-sidebar-toggle-icon { - width: 3rem; -} - -.filter-sidebar-toggle-icon > .fa { - font-size: 1.3rem; -} - -.filter-sidebar-toggle-icon-badge { - position: absolute; - top: 0.5rem; - right: 0.5rem; - font-size: 0.6rem; - font-weight: bold; - background-color: $color-success; - padding: 0.1rem 0.3rem; - border-radius: 50%; - box-shadow: 0 0 10px rgb(0 0 0 / 20%); -} - -.filter-sidebar-toggle-text { - flex-shrink: 1; - width: 3rem; - left: 0.75rem; - right: auto; - opacity: 0; - transform: translateX(3.5rem); - transition: transform 300ms ease, opacity 300ms ease; -} - -.filter-sidebar-toggle:hover > .filter-sidebar-toggle-background { - transform: translateX(0); -} - -.filter-sidebar-toggle:hover > .filter-sidebar-toggle-text { - transform: translateX(0); - opacity: 1; -} - -.filter-sidebar-overlay { - position: fixed; - inset: 50px 0 0; - background-color: rgb(0 0 0 / 20%); - opacity: 0; - pointer-events: none; - transition: opacity 300ms ease; -} - -.filter-sidebar-overlay--visible { - pointer-events: all; - opacity: 1; - z-index: 1; -} diff --git a/frontend/app/styles/form-list.scss b/frontend/app/styles/form-list.scss deleted file mode 100644 index f2de8342c..000000000 --- a/frontend/app/styles/form-list.scss +++ /dev/null @@ -1,122 +0,0 @@ -.form-list { - width: 100%; - display: flex; - flex-direction: column; - flex: 1 0 auto; - - .form-list-body, - .form-list-row { - display: flex; - } - - .form-list-body { - flex-direction: column; - } - - .form-list-row { - border-top: 1px solid $color-border; - flex: 1 0 100%; - flex-wrap: wrap; - padding: 0.5rem; - } - - .form-list-cell { - flex: 1 0 100%; - } - - .form-list-body > .form-list-row:nth-of-type(2n + 1) { - background-color: darken($body-background-color, 5%); - } - - /* Form list head, foot and caption are not allowed for mobile devices */ - .form-list-head, - .form-list-foot, - .form-list-caption { - display: none; - } -} - -@mixin form-list--inline { - display: table; - - .form-list-head { - display: table-header-group; - - .form-list-row:first-child > .form-list-cell { - border-top: 0; - } - - .form-list-row > .form-list-cell { - font-weight: 500; - text-align: left; - vertical-align: bottom; - border-bottom: 2px solid $color-border; - } - } - - .form-list-body { - display: table-row-group; - - .form-list-row:first-child > .form-list-cell { - border-top: 0; - } - } - - .form-list-foot { - display: table-footer-group; - } - - .form-list-row { - display: table-row; - } - - .form-list-cell { - display: table-cell; - padding: 0.5rem; - vertical-align: top; - border-top: 1px solid $color-border; - } - - .form-list-cell-flex { - display: flex; - } - - .form-list-caption { - display: table-caption; - caption-side: bottom; - } -} - -.form-list--inline { - @include form-list--inline; -} - -@media #{$xs-viewport} { - .form-list-xs--inline { - @include form-list--inline; - } -} - -@media #{$sm-viewport} { - .form-list-sm--inline { - @include form-list--inline; - } -} - -@media #{$md-viewport} { - .form-list-md--inline { - @include form-list--inline; - } -} - -@media #{$lg-viewport} { - .form-list-lg--inline { - @include form-list--inline; - } -} - -@media #{$xl-viewport} { - .form-list-xl--inline { - @include form-list--inline; - } -} diff --git a/frontend/app/styles/loader.scss b/frontend/app/styles/loader.scss deleted file mode 100644 index 08c69dad3..000000000 --- a/frontend/app/styles/loader.scss +++ /dev/null @@ -1,49 +0,0 @@ -.loader { - height: 2px; - width: 100%; - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 9999; - overflow: hidden; - background-color: #ddd; -} - -.loader::before { - display: block; - position: absolute; - content: ""; - left: -200px; - width: 200px; - height: 4px; - background-color: $color-primary; - animation: loading 2s linear infinite; -} - -@keyframes loading { - 0% { - left: -200px; - width: 30%; - } - - 50% { - width: 30%; - } - - 70% { - width: 70%; - } - - 80% { - left: 50%; - } - - 95% { - left: 120%; - } - - 100% { - left: 100%; - } -} diff --git a/frontend/app/styles/login.scss b/frontend/app/styles/login.scss deleted file mode 100644 index 305dacfa1..000000000 --- a/frontend/app/styles/login.scss +++ /dev/null @@ -1,18 +0,0 @@ -.login { - text-align: center; - - h1 { - margin-top: 0.8rem; - } - - .timed-clock { - margin: 0 auto 0.5rem; - } - - @media only screen and (width <= 768px) { - .btn-primary { - margin-left: 0.5rem; - margin-right: 0.5rem; - } - } -} diff --git a/frontend/app/styles/projects.scss b/frontend/app/styles/projects.scss deleted file mode 100644 index 86b399515..000000000 --- a/frontend/app/styles/projects.scss +++ /dev/null @@ -1,100 +0,0 @@ -.header { - display: flex; - border-bottom: 1px solid rgb(220 220 220); - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; -} - -.header-item { - flex: 50%; - margin-right: 0.5rem; -} - -.header-left { - float: left; -} - -.header-right { - float: right; -} - -.task-form-container { - margin-top: 20px; -} - -.task-form-container-row { - display: flex; -} - -.task-form-container-column { - flex: 50%; -} - -.task-form-container-column:first-child { - margin-right: 20px; -} - -.task-table-container { - height: 400px; - margin-bottom: 20px; -} - -.table--projects tr.selected { - background-color: lighten($color-primary, 20%) !important; -} - -.table--projects tr.selected + tr td, -.table--projects tr.selected td { - border-color: lighten($color-primary, 20%) !important; -} - -// Table -.table--projects { - margin-bottom: 0; - table-layout: fixed; -} - -.table--projects > tbody > tr.pointer { - color: rgb(0 0 0); -} - -.table--projects > tbody > tr.pointer > td:last-child { - box-shadow: inset -2px 0 0 $color-primary; -} - -.table--projects > tbody > tr:first-of-type td { - border-top: none; -} - -.table--projects th { - position: sticky; - background-color: white; - top: 0; -} - -.table--projects > colgroup > col { - &.title { - width: 10%; - } - - &.reference { - width: 20%; - } - - &.duration { - width: 8%; - } - - &.archived { - width: 5%; - } -} - -.validation-error-icon { - margin: auto 0.5rem; - color: $color-warning; -} - -.archived-background-color { - background-color: $color-secondary; -} diff --git a/frontend/app/styles/reports.scss b/frontend/app/styles/reports.scss deleted file mode 100644 index 026f3ba1b..000000000 --- a/frontend/app/styles/reports.scss +++ /dev/null @@ -1,78 +0,0 @@ -.form-list--reports { - white-space: nowrap; - - .form-list-body > .form-list-row > .form-list-cell { - &.cell-duration, - &.cell-remaining-effort, - &.cell-review-billable-icons, - &.cell-review, - &.cell-buttons, - &.cell-not-billable { - flex-basis: 25%; - flex-grow: 0; - margin: 0; - } - - &.cell-review, - &.cell-review-billable-icons, - &.cell-remaining-effort { - padding-left: 1rem; - } - - &.cell-review-billable-icons { - display: flex; - justify-content: space-evenly; - - > .sy-toggle { - flex: 0 0 1.5rem; - } - } - - &.cell-buttons { - text-align: right; - flex-grow: 1; - - .btn { - display: inline-flex; - } - } - - &.cell-remaining-effort { - padding-left: 1rem; - } - } -} - -@media #{$lg-viewport} { - .form-list--reports { - @include form-list--inline; - - .form-list-body > .form-list-row > .form-list-cell { - &:nth-child(1), - &:nth-child(2), - &:nth-child(3) { - width: 15%; - } - - &:nth-child(4) { - width: auto; - } - - &.cell-review-billable-icons { - padding-left: 0.5rem; - } - - &.cell-duration { - width: 75px; - } - - &.cell-buttons { - width: 110px; - } - - &.cell-remaining-effort { - width: 100px; - } - } - } -} diff --git a/frontend/app/styles/statistics.scss b/frontend/app/styles/statistics.scss deleted file mode 100644 index 08d2646a0..000000000 --- a/frontend/app/styles/statistics.scss +++ /dev/null @@ -1,4 +0,0 @@ -.table--statistics td:last-child, -.table--statistics th:last-child { - width: 50%; -} diff --git a/frontend/app/styles/toolbar.scss b/frontend/app/styles/toolbar.scss deleted file mode 100644 index e142d20a4..000000000 --- a/frontend/app/styles/toolbar.scss +++ /dev/null @@ -1,15 +0,0 @@ -.toolbar { - display: flex; - flex-direction: row; -} - -.toolbar-content { - display: flex; - flex-grow: 1; - justify-content: flex-start; - margin-bottom: 1rem; -} - -.toolbar-content--right { - justify-content: flex-end; -} diff --git a/frontend/app/styles/tour.scss b/frontend/app/styles/tour.scss deleted file mode 100644 index 2793e802b..000000000 --- a/frontend/app/styles/tour.scss +++ /dev/null @@ -1,85 +0,0 @@ -div.hopscotch-bubble { - z-index: 99; // The dropdowns have 100 and we don't want to hide them - border: 1px solid $color-border; - border-color: lighten($color-primary, 20%); - box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset, - 0 0 8px opacify($color-primary, 0.6); - - .hopscotch-bubble-number { - display: none; - } - - .hopscotch-bubble-content { - margin: 0; - } - - .hopscotch-title, - .hopscotch-content { - color: $body-color; - } - - .hopscotch-title { - margin: 5px 0 0; - } - - .hopscotch-content { - margin: 10px 0; - padding: 0; - } - - .hopscotch-pagination { - display: none; - } - - .hopscotch-bubble-arrow-container { - pointer-events: none; - - &.up { - top: -17px; - - .hopscotch-bubble-arrow { - top: -16px; - } - - .hopscotch-bubble-arrow-border { - border-bottom-color: lighten($color-primary, 20%); - } - } - - &.down { - bottom: -35px; - - .hopscotch-bubble-arrow { - top: -19px; - } - - .hopscotch-bubble-arrow-border { - border-top-color: lighten($color-primary, 20%); - } - } - - &.left { - left: -17px; - - .hopscotch-bubble-arrow { - left: 2px; - } - - .hopscotch-bubble-arrow-border { - border-right-color: lighten($color-primary, 20%); - } - } - - &.right { - right: -35px; - - .hopscotch-bubble-arrow { - left: -2px; - } - - .hopscotch-bubble-arrow-border { - border-left-color: lighten($color-primary, 20%); - } - } - } -} diff --git a/frontend/app/styles/users-navigation.scss b/frontend/app/styles/users-navigation.scss deleted file mode 100644 index 54561435b..000000000 --- a/frontend/app/styles/users-navigation.scss +++ /dev/null @@ -1,49 +0,0 @@ -.user-navigation { - margin: 0 ($page-padding-h * -1); - border-bottom: 1px solid $color-border; - background-color: rgb(255 255 255); - box-shadow: 0 2px 6px rgb(0 0 0 / 10%); -} - -.user-navigation > ul { - list-style: none; - display: flex; - width: 100%; - justify-content: center; -} - -.user-navigation > ul > li { - flex: 1 0 auto; - display: flex; -} - -.user-navigation > ul > li > a { - flex-grow: 1; - text-align: center; - padding: 0.9rem 2rem; - color: rgb(180 180 180); - font-size: 1.1rem; -} - -.user-navigation > ul > li > a.active { - color: $color-primary; - box-shadow: inset 0 -2px 0 $color-primary; -} - -@media #{$md-viewport} { - .user-navigation > ul > li { - flex-grow: 0; - } -} - -@media #{$lg-viewport} { - .user-navigation { - margin: 0 ($page-padding-h * 1.25 * -1); - } -} - -@media #{$xl-viewport} { - .user-navigation { - margin: 0 ($page-padding-h * 1.5 * -1); - } -} diff --git a/frontend/app/styles/users.scss b/frontend/app/styles/users.scss deleted file mode 100644 index 6a861eabd..000000000 --- a/frontend/app/styles/users.scss +++ /dev/null @@ -1,262 +0,0 @@ -$user-header-padding-v: 0.5rem; -$user-header-padding-h: $page-padding-h; -$user-header-margin-top-extra: 0; - -.user-header { - display: flex; - flex-shrink: 0; - flex-direction: column; - position: relative; - margin: calc(#{$page-padding-v} * -1 + #{$user-header-margin-top-extra}) - calc(#{$page-padding-h} * -1) 0; - padding: $user-header-padding-v $user-header-padding-h; - background-color: rgb(240 240 240); - border-bottom: 1px solid $color-border; - - .nav-top--fixed + & { - $user-header-margin-top-extra: 51px !global; - } -} - -.user-content { - display: flex; - flex-grow: 1; - flex-shrink: 0; - flex-direction: column; - padding-top: $page-padding-v; - position: relative; - - .grid { - position: relative; - } - - .year-select { - position: absolute; - top: 0; - right: 0; - - select { - width: 6rem; - } - } - - h4 { - color: $body-color; - font-weight: 300; - line-height: 3rem; - } - - .card { - opacity: 0; - transform: translateY(50px); - animation: card-slide-up 250ms ease-out forwards; - - .empty { - margin: 2rem 0; - } - } - - @for $i from 0 to 10 { - .grid-cell:nth-of-type(#{$i}) .card { - animation-delay: calc(100ms * #{$i}); - } - } -} - -.user-general-info { - width: 100%; - - tr > td { - vertical-align: top; - padding: 0.25rem 0; - } - - tr > td:first-child { - font-weight: 500; - } - - tr > td:last-child { - text-align: right; - } -} - -/* General info */ -.user-header-info { - text-align: center; - - h1 { - display: inline-flex; - color: $body-color; - font-size: 3.5rem; - line-height: 3.5rem; - margin: 0; - position: relative; - flex-direction: column; - margin-top: 1rem; - } -} - -/* Loading */ - -.user-header-loading { - display: flex; - min-height: 370px; - justify-content: center; - align-items: center; -} - -/* Worktime balance */ -.user-header-worktime-balance-container { - display: flex; - justify-content: center; - flex-wrap: wrap; -} - -.user-header-worktime-balance-title { - font-size: 2rem; - flex: 1 1 100%; - font-weight: 300; - margin: 1.5rem 0; - text-transform: uppercase; - text-align: center; - color: darken($color-border, 20%); -} - -.user-header-worktime-balance { - width: 350px; - position: relative; - order: 2; -} - -.user-header-worktime-balance-last-valid-timesheet { - order: 0; -} - -.user-header-worktime-balance-today { - order: 1; -} - -.user-header-worktime-balance-last-valid-timesheet, -.user-header-worktime-balance-today { - text-align: center; - font-size: 2rem; - flex: 0 0 50%; - padding: 0 0 1rem; - - h2 { - font-size: 1.1rem; - font-weight: 300; - margin: 0; - text-transform: uppercase; - color: darken($color-border, 20%); - } -} - -/* Absence balance */ -.user-header-absence-balance-container { - display: flex; - flex-grow: 1; - flex-flow: row wrap; - justify-content: space-around; -} - -.user-header-absence-balance { - display: flex; - flex: 0 1 50%; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; -} - -@media #{$sm-viewport} { - .user-header-absence-balance { - flex-basis: 100px; - } - - .user-header-worktime-balance { - order: 1; - } - - .user-header-worktime-balance-title { - font-size: 1.1rem; - margin: 0.5rem 0; - } - - .user-header-worktime-balance-today { - order: 2; - } - - .user-header-worktime-balance-last-valid-timesheet, - .user-header-worktime-balance-today { - flex-basis: 120px; - padding: 2.5rem 0 0; - - h2 { - font-size: 1.1rem; - } - } -} - -@keyframes card-slide-up { - to { - opacity: 1; - transform: translateY(0); - } -} - -@media #{$md-viewport} { - .user-header-info { - h1 { - font-size: 3rem; - margin-top: 0; - } - } -} - -@media #{$lg-viewport} { - .user-header { - margin: calc( - #{$page-padding-v} * 1.25 * -1 + #{$user-header-margin-top-extra} - ) - calc(#{$page-padding-h} * 1.25 * -1) 0; - padding: calc(#{$user-header-padding-v} * 1.25) - calc(#{$user-header-padding-h} * 1.25); - } - - .user-content { - padding-top: $page-padding-v * 1.25; - - .year-select select { - width: 5rem; - } - - h4 { - line-height: 2rem; - } - } -} - -@media #{$xl-viewport} { - .user-header { - margin: calc( - #{$page-padding-v} * 1.5 * -1 + #{$user-header-margin-top-extra} - ) - calc(#{$page-padding-h} * 1.5 * -1) 0; - padding: calc(#{$user-header-padding-v} * 1.5) - calc(#{$user-header-padding-h} * 1.5); - } - - .user-content { - padding-top: $page-padding-v * 1.5; - } - - .user-header-absence-balance { - flex-basis: 120px; - } - - .user-header-worktime-balance-last-valid-timesheet, - .user-header-worktime-balance-today { - flex-basis: 200px; - } -} diff --git a/frontend/app/styles/variables.scss b/frontend/app/styles/variables.scss deleted file mode 100644 index 0d4615f54..000000000 --- a/frontend/app/styles/variables.scss +++ /dev/null @@ -1,41 +0,0 @@ -$xs-viewport: "only screen and (min-width: 480px)"; -$sm-viewport: "only screen and (min-width: 768px)"; -$md-viewport: "only screen and (min-width: 992px)"; -$lg-viewport: "only screen and (min-width: 1200px)"; -$xl-viewport: "only screen and (min-width: 1440px)"; -$nav-top-mobile-width: "only screen and (min-width: 768px)"; -$color-primary: rgb(91 142 219); -$color-secondary: rgb(162 155 150); -$color-tertiary: rgb(134 127 124); -$color-border: rgb(225 225 225); -$color-menu: rgb(246 246 246); -$color-modal: rgb(255 255 255); -$color-success: rgb(92 184 92); -$color-info: rgb(91 192 222); -$color-warning: rgb(240 173 78); -$color-danger: rgb(217 83 79); -$color-success-lighter: lighten($color-success, 20%); -$color-success-darker: darker($color-success, 5%); -$color-danger-lighter: lighten($color-danger, 20%); -$color-danger-darker: darken($color-danger, 5%); -$font-family-sans-serif: "TheSansLT", "Open Sans", sans-serif; -$font-family-serif: "Merriweather", "Times New Roman", serif; -$font-family-mono: menlo, monaco, consolas, "Courier New", monospace; -$font-family-base: $font-family-sans-serif; -$font-weight-base: 300; -$font-size-base: 16px; -$font-size-large: 1.25rem; -$font-size-small: 0.85rem; -$body-background-color: #fff; -$body-color: rgb(61 61 61); -$body-font-weight: $font-weight-base; -$body-font-family: $font-family-base; -$body-min-font-size: $font-size-base - 3px; -$body-max-font-size: $font-size-base + 2px; -$body-min-font-size-break: 420px; -$body-max-font-size-break: 1440px; -$button-border-radius: 4px; -$input-border-radius: 4px; -$input-box-shadow: 0 1px 1px rgb(0 0 0 / 7.5%) inset; -$page-padding-v: 1em; -$page-padding-h: 1.5em; From 00c538b0c5389abf3e8bd40b0838d20593606bda Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:25:00 +0200 Subject: [PATCH 004/132] chore(frontend): setup styles (structure) and add base styles --- frontend/app/index.html | 4 +- frontend/app/styles/base.css | 38 ++++++++++++++++ frontend/app/styles/base/form.css | 50 +++++++++++++++++++++ frontend/app/styles/base/typography.css | 19 ++++++++ frontend/app/styles/components.css | 1 + frontend/app/styles/utilities.css | 0 frontend/config/tailwind.config.js | 58 +++++++++++++++++++++---- 7 files changed, 159 insertions(+), 11 deletions(-) create mode 100644 frontend/app/styles/base.css create mode 100644 frontend/app/styles/base/form.css create mode 100644 frontend/app/styles/base/typography.css create mode 100644 frontend/app/styles/components.css create mode 100644 frontend/app/styles/utilities.css diff --git a/frontend/app/index.html b/frontend/app/index.html index 8545e0805..91aec4bcd 100644 --- a/frontend/app/index.html +++ b/frontend/app/index.html @@ -1,5 +1,5 @@ - + Timed @@ -16,7 +16,7 @@ {{content-for "head-footer"}} - + {{content-for "body"}} diff --git a/frontend/app/styles/base.css b/frontend/app/styles/base.css new file mode 100644 index 000000000..1f01c4408 --- /dev/null +++ b/frontend/app/styles/base.css @@ -0,0 +1,38 @@ +@import "./base/typography.css"; +@import "./base/form.css"; + +:root { + /* taken from https://adfinis.com/en/about-us/branding/ */ + --dark-blue: 28 46 93; + --dark-moderate-blue: 46 75 152; + --green: 46 152 123; + --black: 15 15 15; + --dark-grey: 139 139 140; + --light-grey: 245 246 245; + + /* not taken from https://adfinis.com/en/about-us/branding/ */ + --white: 255 255 255; + --red: 239 68 68; + --amber: 245 158 11; + + --background: var(--white); + --background-muted: var(--light-grey); + --background-secondary: var(--dark-grey); + --danger: var(--red); + --foreground-muted: var(--dark-grey); + --foreground-primary: var(--white); + --foreground: var(--black); + --primary: var(--dark-moderate-blue); + --secondary: var(--dark-blue); + --success: var(--green); + --warning: var(--amber); +} + +/* experimental dark theme */ +.dark { + --background: var(--black); + --background-muted: var(--dark-blue); + --background-secondary: var(--light-grey); + --foreground-muted: var(--dark-grey); + --foreground: var(--white); +} diff --git a/frontend/app/styles/base/form.css b/frontend/app/styles/base/form.css new file mode 100644 index 000000000..ae54387bd --- /dev/null +++ b/frontend/app/styles/base/form.css @@ -0,0 +1,50 @@ +[type="text"], +[type="email"], +[type="url"], +[type="password"], +[type="number"], +[type="date"], +[type="datetime-local"], +[type="month"], +[type="search"], +[type="tel"], +[type="time"], +[type="week"], +[multiple], +textarea, +select, +.form-input, +.form-textarea, +.form-select, +.form-multiselect { + @apply w-full placeholder-foreground-muted text-sm bg-background !important; +} + +:is( + [type="text"], + [type="email"], + [type="url"], + [type="password"], + [type="number"], + [type="date"], + [type="datetime-local"], + [type="month"], + [type="search"], + [type="tel"], + [type="time"], + [type="week"], + [multiple], + textarea, + select, + .form-input, + .form-textarea, + .form-select, + .form-multiselect + ):is(:disabled, [aria-disabled="true"]) { + @apply text-foreground-muted cursor-not-allowed; + @apply bg-background-muted !important; +} + +[type="checkbox"] { + @apply text-primary; +} diff --git a/frontend/app/styles/base/typography.css b/frontend/app/styles/base/typography.css new file mode 100644 index 000000000..2f50965dd --- /dev/null +++ b/frontend/app/styles/base/typography.css @@ -0,0 +1,19 @@ +h1 { + @apply text-4xl text-primary; +} + +h2 { + @apply text-3xl; +} + +h3 { + @apply text-2xl; +} + +h4 { + @apply text-xl; +} + +h5 { + @apply text-lg; +} diff --git a/frontend/app/styles/components.css b/frontend/app/styles/components.css new file mode 100644 index 000000000..e54b556a6 --- /dev/null +++ b/frontend/app/styles/components.css @@ -0,0 +1 @@ +@import "./components/slider.css"; diff --git a/frontend/app/styles/utilities.css b/frontend/app/styles/utilities.css new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js index 9479c3356..3fb7c8075 100644 --- a/frontend/config/tailwind.config.js +++ b/frontend/config/tailwind.config.js @@ -9,6 +9,9 @@ const appRoot = path.join(__dirname, "../"); const appEntry = path.join(appRoot, "app"); const relevantFilesGlob = "**/*.{html,js,ts,hbs,gjs,gts}"; +const borderColor = + "color-mix(in srgb, rgb(var(--background) / ), rgb(var(--foreground-muted)))"; + module.exports = { content: [path.join(appEntry, relevantFilesGlob)], darkMode: "class", @@ -18,16 +21,53 @@ module.exports = { sans: ["Source Sans Pro", "sans-serif"], mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"], }, + fontSize: { + "2xs": [ + "0.65rem", + { + lineHeight: "0.9rem", + }, + ], + "3xs": [ + "0.6rem", + { + lineHeight: "0.8rem", + }, + ], + "4xs": [ + "0.55rem", + { + lineHeight: "0.7rem", + }, + ], + }, + borderColor: { + DEFAULT: borderColor, + }, colors: { - background: "var(--background)", - border: "var(--border)", - danger: "var(--danger)", - foreground: "var(--foreground)", - "foreground-muted": "var(--foreground-muted)", - primary: "var(--primary)", - secondary: "var(--secondary)", - success: "var(--success)", - warning: "var(--warning)", + background: "rgb(var(--background) / )", + "background-muted": "rgb(var(--background-muted) / )", + "background-secondary": + "rgb(var(--background-secondary) / )", + border: borderColor, + danger: "rgb(var(--danger) / )", + foreground: "rgb(var(--foreground) / )", + "foreground-primary": "rgb(var(--foreground-primary) / )", + "foreground-muted": "rgb(var(--foreground-muted) / )", + primary: "rgb(var(--primary) / )", + secondary: "rgb(var(--secondary) / )", + success: "rgb(var(--success) / )", + warning: "rgb(var(--warning) / )", + white: "rgb(var(--white) / )", + black: "rgb(var(--black) / )", + // hacky, rethink + "foreground-mid": + "color-mix(in oklab, rgb(var(--foreground)), rgb(var(--foreground-muted)))", + + // override border colour used by @tailwindcss/forms + gray: { + 500: borderColor, + }, }, }, }, From bbd65f1ca8aea70af0091cba3f1573e5a894dfc4 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:26:17 +0200 Subject: [PATCH 005/132] fix(frontend): style slider --- .../components/attendance-slider/component.js | 4 +-- .../components/attendance-slider/template.hbs | 10 +++--- frontend/app/styles/components/slider.css | 32 +++++++++++++++++++ 3 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 frontend/app/styles/components/slider.css diff --git a/frontend/app/components/attendance-slider/component.js b/frontend/app/components/attendance-slider/component.js index 9f4017dc0..2e9855fe4 100644 --- a/frontend/app/components/attendance-slider/component.js +++ b/frontend/app/components/attendance-slider/component.js @@ -96,7 +96,7 @@ export default class AttendanceSlider extends Component { /** * The labels for the slider * - * @property {String[]} labels + * @property {string[]} labels * @public */ get labels() { @@ -109,7 +109,7 @@ export default class AttendanceSlider extends Component { labels.push({ value: pad2joincolon(h, m), - size: m === 0 ? "lg" : "sm", + size: m === 0 ? "text-4xs" : "text-3xs", style: htmlSafe(`left: ${offsetH + offsetM}%;`), }); } diff --git a/frontend/app/components/attendance-slider/template.hbs b/frontend/app/components/attendance-slider/template.hbs index 8ac236ee2..bab1a1252 100644 --- a/frontend/app/components/attendance-slider/template.hbs +++ b/frontend/app/components/attendance-slider/template.hbs @@ -1,4 +1,4 @@ -
+
-
+
{{#each this.labels as |label|}}
-
+
{{label.value}}
{{/each}}
-
+
{{this.duration}} Date: Wed, 2 Oct 2024 10:26:34 +0200 Subject: [PATCH 006/132] fix(frontend): style timed-clock --- frontend/app/components/timed-clock/template.hbs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/app/components/timed-clock/template.hbs b/frontend/app/components/timed-clock/template.hbs index f7afa675b..2efb8fd4a 100644 --- a/frontend/app/components/timed-clock/template.hbs +++ b/frontend/app/components/timed-clock/template.hbs @@ -1,11 +1,12 @@ - + Date: Wed, 2 Oct 2024 10:27:06 +0200 Subject: [PATCH 007/132] fix(frontend): style topnav extracted previous classes into components --- .../app/components/sy-topnav/template.hbs | 75 --------------- frontend/app/components/topnav.hbs | 91 +++++++++++++++++++ .../{sy-topnav/component.js => topnav.js} | 0 frontend/app/components/topnav/link-to.hbs | 22 +++++ frontend/app/components/topnav/link-to.js | 11 +++ frontend/app/components/topnav/list-item.hbs | 1 + frontend/app/components/topnav/list.hbs | 3 + frontend/app/protected/template.hbs | 2 +- frontend/config/icons.js | 2 + .../{sy-topnav => topnav}/component-test.js | 4 +- 10 files changed, 133 insertions(+), 78 deletions(-) delete mode 100644 frontend/app/components/sy-topnav/template.hbs create mode 100644 frontend/app/components/topnav.hbs rename frontend/app/components/{sy-topnav/component.js => topnav.js} (100%) create mode 100644 frontend/app/components/topnav/link-to.hbs create mode 100644 frontend/app/components/topnav/link-to.js create mode 100644 frontend/app/components/topnav/list-item.hbs create mode 100644 frontend/app/components/topnav/list.hbs rename frontend/tests/integration/components/{sy-topnav => topnav}/component-test.js (78%) diff --git a/frontend/app/components/sy-topnav/template.hbs b/frontend/app/components/sy-topnav/template.hbs deleted file mode 100644 index 848ce2bc3..000000000 --- a/frontend/app/components/sy-topnav/template.hbs +++ /dev/null @@ -1,75 +0,0 @@ - - - - -
- Timed -
- v{{app-version versionOnly=true showExtended=true}} -
-
- - -
-
    -
  • - - - Tracking - -
    • - {{#unless this.navMobile}} - {{#if (can "access page")}} -
  • - - - Analysis - -
    • -
  • - - - Statistics - -
    • -
  • - - - Projects - -
    • - {{/if}} - {{/unless}} - {{#if this.currentUser.user.isSuperuser}} -
  • - - - Users - -
    • - {{/if}} -
-
    - -
  • - - - {{this.currentUser.user.fullName}} - -
    • -
  • - - - Logout - -
    • -
-
- diff --git a/frontend/app/components/topnav.hbs b/frontend/app/components/topnav.hbs new file mode 100644 index 000000000..80cb099a8 --- /dev/null +++ b/frontend/app/components/topnav.hbs @@ -0,0 +1,91 @@ +
+ +
\ No newline at end of file diff --git a/frontend/app/components/sy-topnav/component.js b/frontend/app/components/topnav.js similarity index 100% rename from frontend/app/components/sy-topnav/component.js rename to frontend/app/components/topnav.js diff --git a/frontend/app/components/topnav/link-to.hbs b/frontend/app/components/topnav/link-to.hbs new file mode 100644 index 000000000..49de974c3 --- /dev/null +++ b/frontend/app/components/topnav/link-to.hbs @@ -0,0 +1,22 @@ +{{#if @route}} + {{#if @model}} + + {{yield}} + + {{else}} + + {{yield}} + + {{/if}} +{{else}} + {{yield}} +{{/if}} \ No newline at end of file diff --git a/frontend/app/components/topnav/link-to.js b/frontend/app/components/topnav/link-to.js new file mode 100644 index 000000000..ccdeddb64 --- /dev/null +++ b/frontend/app/components/topnav/link-to.js @@ -0,0 +1,11 @@ +import Component from "@glimmer/component"; + +export default class TopnavLinkToComponent extends Component { + get class() { + return "md:self-center p-2.5 w-full h-full grid items-center md:place-items-center grid-cols-[auto,minmax(0,1fr)] gap-1 hover:text-foreground-primary hover:[&:not(.active)]:bg-primary/70 [&:not(.active,:hover)]:text-primary dark:[&:not(.active,:hover)]:text-foreground"; + } + + get activeClass() { + return "active text-foreground-primary visited:text-foreground-primary bg-primary hover:bg-opacity-60"; + } +} diff --git a/frontend/app/components/topnav/list-item.hbs b/frontend/app/components/topnav/list-item.hbs new file mode 100644 index 000000000..e1be9d7b9 --- /dev/null +++ b/frontend/app/components/topnav/list-item.hbs @@ -0,0 +1 @@ +
  • {{yield}}
    • diff --git a/frontend/app/components/topnav/list.hbs b/frontend/app/components/topnav/list.hbs new file mode 100644 index 000000000..f7ec228bd --- /dev/null +++ b/frontend/app/components/topnav/list.hbs @@ -0,0 +1,3 @@ +
      + {{yield}} +
    \ No newline at end of file diff --git a/frontend/app/protected/template.hbs b/frontend/app/protected/template.hbs index 14941d8f0..cebf15aca 100644 --- a/frontend/app/protected/template.hbs +++ b/frontend/app/protected/template.hbs @@ -1,7 +1,7 @@
    {{#if this.loading}}{{/if}}
    - + {{outlet}}
    diff --git a/frontend/config/icons.js b/frontend/config/icons.js index 31a6cd23a..c0a3fad17 100644 --- a/frontend/config/icons.js +++ b/frontend/config/icons.js @@ -22,10 +22,12 @@ module.exports = function () { "arrow-left", "arrow-right", "ban", + "bars", "bolt", "briefcase", "chart-line", "chevron-left", + "chevron-up", "dollar-sign", "download", "exclamation-triangle", diff --git a/frontend/tests/integration/components/sy-topnav/component-test.js b/frontend/tests/integration/components/topnav/component-test.js similarity index 78% rename from frontend/tests/integration/components/sy-topnav/component-test.js rename to frontend/tests/integration/components/topnav/component-test.js index d53b19960..79c82d9eb 100644 --- a/frontend/tests/integration/components/sy-topnav/component-test.js +++ b/frontend/tests/integration/components/topnav/component-test.js @@ -4,12 +4,12 @@ import { setupMirage } from "ember-cli-mirage/test-support"; import { setupRenderingTest } from "ember-qunit"; import { module, test } from "qunit"; -module("Integration | Component | sy topnav", function (hooks) { +module("Integration | Component | topnav", function (hooks) { setupRenderingTest(hooks); setupMirage(hooks); test("renders", async function (assert) { - await render(hbs``); + await render(hbs``); assert.ok(this.element); }); }); From 653913bec4926e142b5c177d7907be0d27769507 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Tue, 1 Oct 2024 12:52:25 +0200 Subject: [PATCH 008/132] fix(frontend): style power-select and basic-dropdown --- frontend/app/styles/components.css | 2 + .../app/styles/components/basic-dropdown.css | 7 ++++ .../app/styles/components/power-select.css | 39 +++++++++++++++++++ frontend/config/tailwind.config.js | 2 +- 4 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 frontend/app/styles/components/basic-dropdown.css create mode 100644 frontend/app/styles/components/power-select.css diff --git a/frontend/app/styles/components.css b/frontend/app/styles/components.css index e54b556a6..f9493e8fc 100644 --- a/frontend/app/styles/components.css +++ b/frontend/app/styles/components.css @@ -1 +1,3 @@ +@import "./components/basic-dropdown.css"; +@import "./components/power-select.css"; @import "./components/slider.css"; diff --git a/frontend/app/styles/components/basic-dropdown.css b/frontend/app/styles/components/basic-dropdown.css new file mode 100644 index 000000000..40e757c99 --- /dev/null +++ b/frontend/app/styles/components/basic-dropdown.css @@ -0,0 +1,7 @@ +.ember-basic-dropdown-content { + @apply p-2 border border-border absolute bg-background z-30 w-auto; +} + +.ember-basic-dropdown-content-wormhole-origin { + @apply hidden; +} diff --git a/frontend/app/styles/components/power-select.css b/frontend/app/styles/components/power-select.css new file mode 100644 index 000000000..6e7d65834 --- /dev/null +++ b/frontend/app/styles/components/power-select.css @@ -0,0 +1,39 @@ +.ember-power-select-dropdown { + @apply min-w-64; +} + +.ember-power-select-trigger { + @apply form-select flex overflow-hidden relative; +} + +.ember-power-select-selected-item { + @apply w-full; +} + +.ember-power-select-option { + @apply px-2 cursor-pointer; +} + +.ember-power-select-option[aria-current="true"] { + @apply text-foreground-primary bg-primary/70; +} + +.ember-power-select-option[aria-selected="true"] { + @apply bg-primary hover:bg-primary/70 text-foreground-primary; +} + +.ember-power-select-visually-hidden { + @apply hidden; +} + +.ember-power-select-placeholder { + @apply truncate; +} + +.ember-basic-dropdown-trigger--above { + @apply rounded-t-none; +} + +.ember-basic-dropdown-trigger--below { + @apply rounded-b-none; +} diff --git a/frontend/config/tailwind.config.js b/frontend/config/tailwind.config.js index 3fb7c8075..c684f505a 100644 --- a/frontend/config/tailwind.config.js +++ b/frontend/config/tailwind.config.js @@ -72,5 +72,5 @@ module.exports = { }, }, plugins: [forms()], - safelist: [{ pattern: /noUi-/ }], + safelist: [{ pattern: /noUi-/ }, { pattern: /ember-/ }], }; From 89553a3f64a361103ce5fa818188a6919383fd3d Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Tue, 1 Oct 2024 12:55:31 +0200 Subject: [PATCH 009/132] fix(frontend): style tracking bar --- .../app/components/record-button/template.hbs | 30 +++++++------------ .../app/components/tracking-bar/template.hbs | 18 +++++------ frontend/app/protected/template.hbs | 6 ++-- 3 files changed, 22 insertions(+), 32 deletions(-) diff --git a/frontend/app/components/record-button/template.hbs b/frontend/app/components/record-button/template.hbs index 2b729ad0c..815eede59 100644 --- a/frontend/app/components/record-button/template.hbs +++ b/frontend/app/components/record-button/template.hbs @@ -1,27 +1,17 @@ -
    {{#if this.active}} - +
    {{else}} - + {{/if}} -
    + \ No newline at end of file diff --git a/frontend/app/components/tracking-bar/template.hbs b/frontend/app/components/tracking-bar/template.hbs index b0a3d3f74..75e10b1dc 100644 --- a/frontend/app/components/tracking-bar/template.hbs +++ b/frontend/app/components/tracking-bar/template.hbs @@ -1,4 +1,4 @@ -
    +
    -
    -
    + +
    -
    - +
    +
    -
    +
    -
    +
    {{/if}}
    -
    +
    +
    {{#if this.loading}}{{/if}} -
    +
    - +
    {{outlet}}
    From 0a84346d4c363fce2085ff3b1cb830146167b7b6 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 09:03:56 +0200 Subject: [PATCH 010/132] fix(frontend): style buttons --- frontend/app/styles/components.css | 1 + frontend/app/styles/components/button.css | 56 +++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 frontend/app/styles/components/button.css diff --git a/frontend/app/styles/components.css b/frontend/app/styles/components.css index f9493e8fc..e33892586 100644 --- a/frontend/app/styles/components.css +++ b/frontend/app/styles/components.css @@ -1,3 +1,4 @@ @import "./components/basic-dropdown.css"; +@import "./components/button.css"; @import "./components/power-select.css"; @import "./components/slider.css"; diff --git a/frontend/app/styles/components/button.css b/frontend/app/styles/components/button.css new file mode 100644 index 000000000..c62baa657 --- /dev/null +++ b/frontend/app/styles/components/button.css @@ -0,0 +1,56 @@ +.btn { + @apply py-1.5 px-2.5 border border-border transition-all rounded; +} + +.btn:disabled, +.btn[aria-disabled="true"] { + @apply cursor-not-allowed bg-opacity-40 text-opacity-85 border-opacity-40; + + &.btn-default { + @apply bg-background-muted/70 text-foreground-muted/85; + } +} + +.btn:not(:disabled, [aria-disabled="true"]) { + @apply shadow-sm hover:shadow; + + &.btn-default { + @apply hover:text-primary/85 hover:border-primary shadow-border/20 hover:shadow-primary/30; + } + + &.btn-primary { + @apply shadow-primary/20 hover:border-secondary/85 hover:shadow-secondary/50; + } + + &.btn-danger { + @apply shadow-danger/20 hover:border-danger/85 hover:shadow-danger/50; + } + + &.btn-success { + @apply shadow-success/20 hover:border-success/85 hover:shadow-success/50; + } + + &.btn-warning { + @apply shadow-warning/20 hover:border-warning/85 hover:shadow-warning/50; + } +} + +.btn-default { + @apply bg-background border-border; +} + +.btn-primary { + @apply bg-primary text-foreground-primary border-primary; +} + +.btn-danger { + @apply bg-danger text-foreground-primary border-danger/40; +} + +.btn-success { + @apply bg-success text-foreground-primary border-success/40; +} + +.btn-warning { + @apply bg-warning text-foreground-primary border-warning/40; +} From 27da91d035ae09821d21c502b814c9c8c0e96b40 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 09:06:08 +0200 Subject: [PATCH 011/132] fix(frontend): style optimized-power-select --- .../custom-options/customer-option.hbs | 6 +- .../optimized-power-select/template.hbs | 3 +- .../trigger/template.hbs | 64 +++++++++---------- 3 files changed, 36 insertions(+), 37 deletions(-) diff --git a/frontend/app/components/optimized-power-select/custom-options/customer-option.hbs b/frontend/app/components/optimized-power-select/custom-options/customer-option.hbs index aa36649be..56bed0036 100644 --- a/frontend/app/components/optimized-power-select/custom-options/customer-option.hbs +++ b/frontend/app/components/optimized-power-select/custom-options/customer-option.hbs @@ -1,5 +1,5 @@
    - - {{@option.project.customer.name}} + + {{@option.project.customer.name}} > {{@option.project.name}} {{@option.name}} diff --git a/frontend/app/components/optimized-power-select/template.hbs b/frontend/app/components/optimized-power-select/template.hbs index 7761038a0..c4c1e6a96 100644 --- a/frontend/app/components/optimized-power-select/template.hbs +++ b/frontend/app/components/optimized-power-select/template.hbs @@ -1,4 +1,6 @@ - {{#if @select.selected}} - {{#if @selectedItemComponent}} - {{component - @selectedItemComponent - option=(readonly @select.selected) - select=(readonly @select) - }} - {{else}} - - {{#if @extra.selectedTemplate}} - {{component - (ensure-safe-component @extra.selectedTemplate) - selected=@select.selected - }} - {{else}} - {{yield @select.selected @select}} - {{/if}} - - {{/if}} - {{#if (and @allowClear (not @select.disabled))}} - × - {{/if}} - {{else}} +{{#if @select.selected}} + {{#if @selectedItemComponent}} {{component - (ensure-safe-component @placeholderComponent) - placeholder=@placeholder + @selectedItemComponent + option=(readonly @select.selected) + select=(readonly @select) }} + {{else}} + + {{#if @extra.selectedTemplate}} + {{component + (ensure-safe-component @extra.selectedTemplate) + selected=@select.selected + }} + {{else}} + {{yield @select.selected @select}} + {{/if}} + + {{/if}} + {{#if (and @allowClear (not @select.disabled))}} + × {{/if}} - -
    +{{else}} + {{component + (ensure-safe-component @placeholderComponent) + placeholder=@placeholder + }} +{{/if}} + \ No newline at end of file From b8bd2cc7612b41993ce43a17e91433ee7b2423a6 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:03:36 +0200 Subject: [PATCH 012/132] chore(frontend/styles): add striped utility --- frontend/app/styles/utilities.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/app/styles/utilities.css b/frontend/app/styles/utilities.css index e69de29bb..d9cf34658 100644 --- a/frontend/app/styles/utilities.css +++ b/frontend/app/styles/utilities.css @@ -0,0 +1,3 @@ +.striped { + @apply [&:nth-child(odd)]:bg-background-secondary/5 [&:nth-child(even)]:bg-background-secondary/15; +} From 3507ff2eacb6bf732175e4f6712636e221ddceaa Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:05:39 +0200 Subject: [PATCH 013/132] fix(frontend): added toggle component styled version of sy-toggle, seperate because we want to drop the sy prefix --- frontend/app/components/toggle.hbs | 17 +++++++++++++++++ frontend/app/components/toggle.js | 12 ++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 frontend/app/components/toggle.hbs create mode 100644 frontend/app/components/toggle.js diff --git a/frontend/app/components/toggle.hbs b/frontend/app/components/toggle.hbs new file mode 100644 index 000000000..ca97db31e --- /dev/null +++ b/frontend/app/components/toggle.hbs @@ -0,0 +1,17 @@ +
    + {{#if (has-block)}} + {{yield}} + {{else}} + + {{/if}} +
    \ No newline at end of file diff --git a/frontend/app/components/toggle.js b/frontend/app/components/toggle.js new file mode 100644 index 000000000..e67e8e103 --- /dev/null +++ b/frontend/app/components/toggle.js @@ -0,0 +1,12 @@ +import { action } from "@ember/object"; +import Component from "@glimmer/component"; + +export default class Toggle extends Component { + @action + handleKeyUp(event) { + // only trigger on "Space" key + if (event.keyCode === 32 && !this.args.disabled) { + this.args.onToggle(); + } + } +} From 60615806e8d65a2d1a05fcf044eca39e6da33ac6 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:06:33 +0200 Subject: [PATCH 014/132] fix(frontend): added checkbox component styled version of sy-checkbox, seperate because we want to drop the sy prefix --- frontend/app/components/checkbox.hbs | 22 ++++++++++++++++++++++ frontend/app/components/checkbox.js | 10 ++++++++++ 2 files changed, 32 insertions(+) create mode 100644 frontend/app/components/checkbox.hbs create mode 100644 frontend/app/components/checkbox.js diff --git a/frontend/app/components/checkbox.hbs b/frontend/app/components/checkbox.hbs new file mode 100644 index 000000000..ea3097105 --- /dev/null +++ b/frontend/app/components/checkbox.hbs @@ -0,0 +1,22 @@ +
    + + +
    diff --git a/frontend/app/components/checkbox.js b/frontend/app/components/checkbox.js new file mode 100644 index 000000000..d9100ebfb --- /dev/null +++ b/frontend/app/components/checkbox.js @@ -0,0 +1,10 @@ +import { guidFor } from "@ember/object/internals"; +import Component from "@glimmer/component"; + +export default class Checkbox extends Component { + constructor(...args) { + super(...args); + + this.checkboxElementId = guidFor(this); + } +} From 969cefab389933bc142c86ee476d450fe98d1358 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:07:26 +0200 Subject: [PATCH 015/132] fix(frontend): style weekly-overview --- .../app/components/weekly-overview-benchmark/template.hbs | 6 +++--- frontend/app/components/weekly-overview-day/template.hbs | 6 +++--- frontend/app/components/weekly-overview/template.hbs | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/app/components/weekly-overview-benchmark/template.hbs b/frontend/app/components/weekly-overview-benchmark/template.hbs index ff8c2026e..4ea922c9f 100644 --- a/frontend/app/components/weekly-overview-benchmark/template.hbs +++ b/frontend/app/components/weekly-overview-benchmark/template.hbs @@ -1,6 +1,6 @@ -
    +
    {{#if @showLabel}} - {{@hours}}h + {{@hours}}h {{/if}} -
    +
    \ No newline at end of file diff --git a/frontend/app/components/weekly-overview-day/template.hbs b/frontend/app/components/weekly-overview-day/template.hbs index 9eac3279a..9396270ed 100644 --- a/frontend/app/components/weekly-overview-day/template.hbs +++ b/frontend/app/components/weekly-overview-day/template.hbs @@ -2,7 +2,7 @@ role="button" {{on "click" this.click}} {{style this.style}} - class="weekly-overview-day + class="h-0 w-4 relative cursor-pointer z-10 {{if @active "active"}} {{if @absence "absence"}} {{if @holiday "holiday"}} @@ -10,8 +10,8 @@ " ...attributes > -
    -
    +
    +
    {{moment-format @day 'DD'}} {{moment-format @day 'dd'}}
    diff --git a/frontend/app/components/weekly-overview/template.hbs b/frontend/app/components/weekly-overview/template.hbs index f0977b55d..287f91c18 100644 --- a/frontend/app/components/weekly-overview/template.hbs +++ b/frontend/app/components/weekly-overview/template.hbs @@ -1,5 +1,5 @@ -
    -
    +
    +
    From 4adeb30c6bbdeb985d45b9a09db37072d1e103eb Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:07:37 +0200 Subject: [PATCH 016/132] fix(frontend): style report-row --- .../app/components/report-row/template.hbs | 48 ++++++++++++++----- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/frontend/app/components/report-row/template.hbs b/frontend/app/components/report-row/template.hbs index 9f7e84aa3..d705a8c52 100644 --- a/frontend/app/components/report-row/template.hbs +++ b/frontend/app/components/report-row/template.hbs @@ -1,5 +1,16 @@ {{#let (changeset @report this.ReportValidations) as |cs|}} - + {{t.task}}
    -
    +
    -
    -
    +
    {{#if cs.task.project.remainingEffortTracking}} -
    - + - - + - +
    -
    +
    {{#if this.editable}} {{/if}}
    -{{/let}} +{{/let}} \ No newline at end of file From e5cc6027580c2d064fe19800126bc949a8af0680 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:08:43 +0200 Subject: [PATCH 017/132] fix(frontend): added Empty component does the same as the previous `.empty` class but is a component --- frontend/app/components/empty.hbs | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/app/components/empty.hbs diff --git a/frontend/app/components/empty.hbs b/frontend/app/components/empty.hbs new file mode 100644 index 000000000..16870db7d --- /dev/null +++ b/frontend/app/components/empty.hbs @@ -0,0 +1,6 @@ +
    + {{yield}} +
    \ No newline at end of file From d9dc2b8b8032137ba991a1ecc5ef29a8555e324c Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:09:39 +0200 Subject: [PATCH 018/132] fix(frontend): style date-navigation --- frontend/app/components/date-navigation/template.hbs | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/app/components/date-navigation/template.hbs b/frontend/app/components/date-navigation/template.hbs index c85d36688..2130981bb 100644 --- a/frontend/app/components/date-navigation/template.hbs +++ b/frontend/app/components/date-navigation/template.hbs @@ -1,8 +1,6 @@ -
    -
    - -
    -
    +
    +
    +
    \ No newline at end of file diff --git a/frontend/app/components/nav-tabs/item.hbs b/frontend/app/components/nav-tabs/item.hbs new file mode 100644 index 000000000..6a259b9cd --- /dev/null +++ b/frontend/app/components/nav-tabs/item.hbs @@ -0,0 +1,5 @@ +
  • + {{yield}} +
    • \ No newline at end of file diff --git a/frontend/app/components/nav-tabs/lower-button.hbs b/frontend/app/components/nav-tabs/lower-button.hbs new file mode 100644 index 000000000..f6044b6fe --- /dev/null +++ b/frontend/app/components/nav-tabs/lower-button.hbs @@ -0,0 +1,11 @@ +{{! this should probably in some other place and renamed }} +
    + +
    \ No newline at end of file From 339a8518f267391665db66b3287df7a96da02132 Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Wed, 2 Oct 2024 10:11:59 +0200 Subject: [PATCH 020/132] fix(frontend): style /reports --- frontend/app/index/reports/template.hbs | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/frontend/app/index/reports/template.hbs b/frontend/app/index/reports/template.hbs index 21609c35b..163f89594 100644 --- a/frontend/app/index/reports/template.hbs +++ b/frontend/app/index/reports/template.hbs @@ -1,17 +1,15 @@ -
    - -
    + @onClick={{fn (mut this.showReschedule) true}} + >Reschedule +
    {{#each this.reports as |report|}} Date: Wed, 2 Oct 2024 10:12:06 +0200 Subject: [PATCH 021/132] fix(frontend): style /login --- frontend/app/login/template.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/login/template.hbs b/frontend/app/login/template.hbs index 5ff79e339..41d0c3165 100644 --- a/frontend/app/login/template.hbs +++ b/frontend/app/login/template.hbs @@ -1,4 +1,4 @@ -