From 32d11e0b904a73f3ae394f04e047f06d6bf46c12 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 1 Nov 2024 15:46:36 +0000 Subject: [PATCH 1/4] chore(deps-dev): bump sass from 1.76.0 to 1.80.5 Bumps [sass](https://github.com/sass/dart-sass) from 1.76.0 to 1.80.5. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/dart-sass/compare/1.76.0...1.80.5) --- updated-dependencies: - dependency-name: sass dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package-lock.json | 605 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 2 +- 2 files changed, 575 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c886fb87..3ffd2259c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -100,7 +100,7 @@ "react-error-overlay": "6.0.11", "react-test-renderer": "^17.0.2", "redux-mock-store": "^1.5.1", - "sass": "^1.76.0", + "sass": "^1.80.5", "source-map-explorer": "^2.5.3", "stylelint": "^15.11.0", "stylelint-config-idiomatic-order": "^10.0.0", @@ -5428,6 +5428,337 @@ "node": ">= 8" } }, + "node_modules/@parcel/watcher": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", + "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "devOptional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.4.1", + "@parcel/watcher-darwin-arm64": "2.4.1", + "@parcel/watcher-darwin-x64": "2.4.1", + "@parcel/watcher-freebsd-x64": "2.4.1", + "@parcel/watcher-linux-arm-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-musl": "2.4.1", + "@parcel/watcher-linux-x64-glibc": "2.4.1", + "@parcel/watcher-linux-x64-musl": "2.4.1", + "@parcel/watcher-win32-arm64": "2.4.1", + "@parcel/watcher-win32-ia32": "2.4.1", + "@parcel/watcher-win32-x64": "2.4.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", + "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", + "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", + "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", + "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", + "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", + "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", + "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", + "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", + "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", + "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", + "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", + "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "devOptional": true, + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@parcel/watcher/node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "devOptional": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@parcel/watcher/node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "devOptional": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/@parcel/watcher/node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "devOptional": true, + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/@parcel/watcher/node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "devOptional": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/@paystring/utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@paystring/utils/-/utils-2.0.0.tgz", @@ -8539,7 +8870,7 @@ }, "node_modules/binary-extensions": { "version": "2.2.0", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -8995,7 +9326,7 @@ }, "node_modules/chokidar": { "version": "3.5.2", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "anymatch": "~3.1.2", @@ -9015,7 +9346,7 @@ }, "node_modules/chokidar/node_modules/anymatch": { "version": "3.1.2", - "devOptional": true, + "dev": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -9027,7 +9358,7 @@ }, "node_modules/chokidar/node_modules/braces": { "version": "3.0.2", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "fill-range": "^7.0.1" @@ -9038,7 +9369,7 @@ }, "node_modules/chokidar/node_modules/fill-range": { "version": "7.0.1", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -9061,7 +9392,7 @@ }, "node_modules/chokidar/node_modules/is-number": { "version": "7.0.0", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -9069,7 +9400,7 @@ }, "node_modules/chokidar/node_modules/normalize-path": { "version": "3.0.0", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -9077,7 +9408,7 @@ }, "node_modules/chokidar/node_modules/to-regex-range": { "version": "5.0.1", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -10350,7 +10681,7 @@ }, "node_modules/detect-libc": { "version": "1.0.3", - "dev": true, + "devOptional": true, "license": "Apache-2.0", "bin": { "detect-libc": "bin/detect-libc.js" @@ -14116,7 +14447,7 @@ }, "node_modules/is-binary-path": { "version": "2.1.0", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -22388,6 +22719,12 @@ "tslib": "^2.0.3" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "devOptional": true + }, "node_modules/node-fetch": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", @@ -23864,7 +24201,7 @@ }, "node_modules/readdirp": { "version": "3.6.0", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -24578,12 +24915,13 @@ } }, "node_modules/sass": { - "version": "1.76.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.76.0.tgz", - "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==", + "version": "1.80.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.5.tgz", + "integrity": "sha512-TQd2aoQl/+zsxRMEDSxVdpPIqeq9UFc6pr7PzkugiTx3VYCFPUaa3P4RrBQsqok4PO200Vkz0vXQBNlg7W907g==", "devOptional": true, "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", + "@parcel/watcher": "^2.4.1", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, @@ -24594,6 +24932,34 @@ "node": ">=14.0.0" } }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "devOptional": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "devOptional": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { "version": "1.2.4", "dev": true, @@ -32163,6 +32529,159 @@ "fastq": "^1.6.0" } }, + "@parcel/watcher": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", + "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "devOptional": true, + "requires": { + "@parcel/watcher-android-arm64": "2.4.1", + "@parcel/watcher-darwin-arm64": "2.4.1", + "@parcel/watcher-darwin-x64": "2.4.1", + "@parcel/watcher-freebsd-x64": "2.4.1", + "@parcel/watcher-linux-arm-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-musl": "2.4.1", + "@parcel/watcher-linux-x64-glibc": "2.4.1", + "@parcel/watcher-linux-x64-musl": "2.4.1", + "@parcel/watcher-win32-arm64": "2.4.1", + "@parcel/watcher-win32-ia32": "2.4.1", + "@parcel/watcher-win32-x64": "2.4.1", + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "dependencies": { + "braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "devOptional": true, + "requires": { + "fill-range": "^7.1.1" + } + }, + "fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "devOptional": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "devOptional": true + }, + "micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "devOptional": true, + "requires": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "devOptional": true, + "requires": { + "is-number": "^7.0.0" + } + } + } + }, + "@parcel/watcher-android-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", + "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-darwin-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", + "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-darwin-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", + "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-freebsd-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", + "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", + "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", + "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-arm64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", + "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-x64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", + "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-linux-x64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", + "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", + "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-ia32": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", + "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "dev": true, + "optional": true + }, + "@parcel/watcher-win32-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", + "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "dev": true, + "optional": true + }, "@paystring/utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@paystring/utils/-/utils-2.0.0.tgz", @@ -34290,7 +34809,7 @@ }, "binary-extensions": { "version": "2.2.0", - "devOptional": true + "dev": true }, "bindings": { "version": "1.5.0", @@ -34591,7 +35110,7 @@ }, "chokidar": { "version": "3.5.2", - "devOptional": true, + "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -34605,7 +35124,7 @@ "dependencies": { "anymatch": { "version": "3.1.2", - "devOptional": true, + "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -34613,14 +35132,14 @@ }, "braces": { "version": "3.0.2", - "devOptional": true, + "dev": true, "requires": { "fill-range": "^7.0.1" } }, "fill-range": { "version": "7.0.1", - "devOptional": true, + "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -34632,15 +35151,15 @@ }, "is-number": { "version": "7.0.0", - "devOptional": true + "dev": true }, "normalize-path": { "version": "3.0.0", - "devOptional": true + "dev": true }, "to-regex-range": { "version": "5.0.1", - "devOptional": true, + "dev": true, "requires": { "is-number": "^7.0.0" } @@ -35545,7 +36064,7 @@ }, "detect-libc": { "version": "1.0.3", - "dev": true + "devOptional": true }, "detect-newline": { "version": "3.1.0", @@ -38117,7 +38636,7 @@ }, "is-binary-path": { "version": "2.1.0", - "devOptional": true, + "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -43834,6 +44353,12 @@ "tslib": "^2.0.3" } }, + "node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "devOptional": true + }, "node-fetch": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", @@ -44770,7 +45295,7 @@ }, "readdirp": { "version": "3.6.0", - "devOptional": true, + "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -45260,14 +45785,32 @@ } }, "sass": { - "version": "1.76.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.76.0.tgz", - "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==", + "version": "1.80.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.5.tgz", + "integrity": "sha512-TQd2aoQl/+zsxRMEDSxVdpPIqeq9UFc6pr7PzkugiTx3VYCFPUaa3P4RrBQsqok4PO200Vkz0vXQBNlg7W907g==", "devOptional": true, "requires": { - "chokidar": ">=3.0.0 <4.0.0", + "@parcel/watcher": "^2.4.1", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" + }, + "dependencies": { + "chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "devOptional": true, + "requires": { + "readdirp": "^4.0.1" + } + }, + "readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "devOptional": true + } } }, "sax": { diff --git a/package.json b/package.json index f04822efe..cdea012a1 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "react-error-overlay": "6.0.11", "react-test-renderer": "^17.0.2", "redux-mock-store": "^1.5.1", - "sass": "^1.76.0", + "sass": "^1.80.5", "source-map-explorer": "^2.5.3", "stylelint": "^15.11.0", "stylelint-config-idiomatic-order": "^10.0.0", From 01da922e098578fc2edce392a8d80f99be91d854 Mon Sep 17 00:00:00 2001 From: Justin Reynolds Date: Fri, 1 Nov 2024 10:59:05 -0500 Subject: [PATCH 2/4] fix: remove deprecated @import --- .../BalanceSelector/balance-selector.scss | 6 +- .../Accounts/AccountHeader/styles.scss | 84 +++++++++---------- src/containers/Accounts/styles.scss | 2 +- src/containers/Amendment/amendment.scss | 32 +++---- .../Amendments/amendmentsTable.scss | 42 +++++----- src/containers/App/app.scss | 8 +- src/containers/CustomNetworkHome/index.scss | 36 ++++---- src/containers/Footer/footer.scss | 20 ++--- .../Header/LanguagePicker/LanguagePicker.scss | 4 +- .../Header/NavigationMenu/NavigationMenu.scss | 14 ++-- .../Header/NetworkPicker/NetworkPicker.scss | 16 ++-- src/containers/Header/header.scss | 4 +- src/containers/Header/search.scss | 12 +-- src/containers/Ledger/ledger.scss | 62 +++++++------- src/containers/Ledgers/css/ledgerMetrics.scss | 30 +++---- src/containers/Ledgers/css/ledgers.scss | 58 ++++++------- src/containers/Ledgers/css/legend.scss | 4 +- src/containers/MPT/MPTHeader/styles.scss | 36 ++++---- src/containers/MPT/styles.scss | 2 +- src/containers/NFT/NFTHeader/styles.scss | 36 ++++---- src/containers/NFT/NFTTabs/styles.scss | 20 ++--- src/containers/NFT/styles.scss | 2 +- src/containers/Network/css/barchart.scss | 24 +++--- src/containers/Network/css/hexagons.scss | 10 +-- src/containers/Network/css/map.scss | 8 +- src/containers/Network/css/nodesTable.scss | 36 ++++---- src/containers/Network/css/style.scss | 6 +- .../Network/css/validatorsTable.scss | 24 +++--- src/containers/NoMatch/nomatch.scss | 16 ++-- .../PayStrings/PayStringHeader/styles.scss | 8 +- .../PayStringMappingsTable/styles.scss | 14 ++-- src/containers/PayStrings/styles.scss | 6 +- src/containers/Token/DEXPairs/styles.scss | 28 +++---- src/containers/Token/TokenHeader/styles.scss | 58 ++++++------- src/containers/Token/styles.scss | 2 +- .../Transactions/DetailTab/detailTab.scss | 40 ++++----- src/containers/Transactions/simpleTab.scss | 30 +++---- src/containers/Transactions/transaction.scss | 18 ++-- src/containers/Validators/historyTab.scss | 38 ++++----- src/containers/Validators/simpleTab.scss | 2 +- src/containers/Validators/validator.scss | 38 ++++----- src/containers/Validators/votingTab.scss | 14 ++-- .../shared/components/Dropdown/dropdown.scss | 20 ++--- .../shared/components/JsonView/json-view.scss | 22 ++--- .../components/Notification/styles.scss | 40 ++++----- .../components/TransactionTable/styles.scss | 60 ++++++------- src/containers/shared/css/box.scss | 8 +- src/containers/shared/css/form.scss | 14 ++-- src/containers/shared/css/global.scss | 72 ++++++++-------- src/containers/shared/css/simpleTab.scss | 30 +++---- src/containers/shared/css/table.scss | 20 ++--- src/containers/shared/css/tabs.scss | 16 ++-- src/containers/shared/css/tooltip.scss | 12 +-- src/containers/shared/css/txlabel.scss | 6 +- src/containers/shared/css/txstatus.scss | 2 +- 55 files changed, 636 insertions(+), 636 deletions(-) diff --git a/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss b/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss index dc6c77018..e01cf8a7d 100644 --- a/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss +++ b/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss @@ -1,11 +1,11 @@ -@import 'src/containers/shared/css/variables'; +@use 'src/containers/shared/css/variables'; .balance-selector { position: relative; display: block; width: 100%; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 280px; } @@ -27,6 +27,6 @@ .total-balance { margin-left: auto; - color: $black-40; + color: variables.$black-40; } } diff --git a/src/containers/Accounts/AccountHeader/styles.scss b/src/containers/Accounts/AccountHeader/styles.scss index fc35853f0..a63b849dc 100644 --- a/src/containers/Accounts/AccountHeader/styles.scss +++ b/src/containers/Accounts/AccountHeader/styles.scss @@ -1,14 +1,14 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .account-header { margin-bottom: 16px; .title { padding-bottom: 4px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .box-header { @@ -27,23 +27,23 @@ } .badge { - border: 1px solid $yellow-50; - background: $yellow-50; - box-shadow: 0 1px 1px $yellow-80; - color: $black; + border: 1px solid variables.$yellow-50; + background: variables.$yellow-50; + box-shadow: 0 1px 1px variables.$yellow-80; + color: variables.$black; } .classic { margin: 0; - color: $white; + color: variables.$white; font-size: 20px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 24px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 36px; } } @@ -53,19 +53,19 @@ padding: 5px; border-width: thin; border-style: solid; - border-color: $black-70; + border-color: variables.$black-70; margin: 0; margin-left: 12px; - color: $white; + color: variables.$white; font-size: 16px; text-transform: none; - @include semibold; + @include variables.semibold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 10px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 20px; } } @@ -75,15 +75,15 @@ padding-right: 10px; border-bottom: none; margin: 0; - color: $white; + color: variables.$white; font-size: 18px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 10px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 23px; } } @@ -91,15 +91,15 @@ .x-address { margin: 0; - color: $white; + color: variables.$white; font-size: 14px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 18px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 36px; } } @@ -115,7 +115,7 @@ justify-content: space-between; margin-top: 68px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -125,19 +125,19 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: $white; + color: variables.$white; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } .value { - color: $white; + color: variables.$white; font-size: 18px; line-height: 22.5px; text-decoration: none; - @include bold; + @include variables.bold; } } } @@ -147,7 +147,7 @@ flex-direction: column; gap: 16px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; } } @@ -157,7 +157,7 @@ width: 100%; vertical-align: top; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 50%; &.first { @@ -174,17 +174,17 @@ padding: 0; margin-bottom: 20px; font-size: 12px; - @include bold; + @include variables.bold; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { border: none; } .label { - color: $black-40; + color: variables.$black-40; text-align: left; text-transform: uppercase; - @include medium; + @include variables.medium; } ul { @@ -201,18 +201,18 @@ display: inline-block; text-transform: none; vertical-align: middle; - @include medium; + @include variables.medium; @extend %truncate; } b { - color: $white; + color: variables.$white; word-break: break-all; - @include bold; + @include variables.bold; } &.flags { - color: $blue-purple-30; + color: variables.$blue-purple-30; font-style: italic; } } @@ -247,11 +247,11 @@ &.balance { .value { margin: -4px 0 5px -0.1em; - color: $white; + color: variables.$white; font-size: 26px; line-height: 30px; - @include regular; - @include for-size(desktop-up) { + @include variables.regular; + @include variables.for-size(desktop-up) { font-size: 30px; line-height: 34px; } diff --git a/src/containers/Accounts/styles.scss b/src/containers/Accounts/styles.scss index 3296b7a74..1b68962d2 100644 --- a/src/containers/Accounts/styles.scss +++ b/src/containers/Accounts/styles.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .accounts-page { .loader { diff --git a/src/containers/Amendment/amendment.scss b/src/containers/Amendment/amendment.scss index 987963d30..0e7f78815 100644 --- a/src/containers/Amendment/amendment.scss +++ b/src/containers/Amendment/amendment.scss @@ -1,5 +1,5 @@ -@import '../shared/css/variables'; -@import '../shared/css/table'; +@use '../shared/css/variables'; +@use '../shared/css/table'; .amendment-summary { width: 80%; @@ -14,16 +14,16 @@ display: inline-block; margin-top: 80px; margin-bottom: 32px; - color: $white; + color: variables.$white; font-size: 32px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { margin-top: 120px; margin-bottom: 64px; font-size: 42px; } - @include bold; + @include variables.bold; } .rows { @@ -42,20 +42,20 @@ .badge { max-width: fit-content; margin: 0; - color: $black-100 !important; + color: variables.$black-100 !important; text-transform: capitalize; &.voting { - background-color: $black-30; + background-color: variables.$black-30; } &.enabled { - background-color: $green-60; + background-color: variables.$green-60; } &.consensus { margin-top: 6px; - background-color: $yellow-50; + background-color: variables.$yellow-50; font-weight: 700 !important; } } @@ -63,7 +63,7 @@ .value { &.eta { &.no{ - color: $yellow-50 !important; + color: variables.$yellow-50 !important; } } } @@ -72,7 +72,7 @@ .unl { display: inline-block; margin: 0 10px; - color: $green-40; + color: variables.$green-40; vertical-align: middle; } } @@ -84,14 +84,14 @@ .votes-columns { margin: 48px 0; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { display: grid; gap: 48px; grid-template-columns: repeat(2, 1fr); } .label { - @include bold; + @include variables.bold; margin-bottom: 24px; font-size: 24px; @@ -105,13 +105,13 @@ margin-top: 24px; .vals { - background: $black-80; + background: variables.$black-80; .row { display: flex; overflow: hidden; padding: 16px; - border-bottom: 1px solid $black-70; + border-bottom: 1px solid variables.$black-70; white-space: nowrap; .val { @@ -124,7 +124,7 @@ .unl { margin-left: 8px; - color: $green-40; + color: variables.$green-40; } .index { diff --git a/src/containers/Amendments/amendmentsTable.scss b/src/containers/Amendments/amendmentsTable.scss index ee533cffb..6fb049f6e 100644 --- a/src/containers/Amendments/amendmentsTable.scss +++ b/src/containers/Amendments/amendmentsTable.scss @@ -1,26 +1,26 @@ -@import '../shared/css/variables'; -@import '../shared/css/table'; +@use '../shared/css/variables'; +@use '../shared/css/table'; .amendments-page{ .summary { padding: 0 16px; margin-top: 100px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { padding: 0; } .type { display: inline-block; padding-bottom: 24px; - color: $white; + color: variables.$white; font-size: 32px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { font-size: 42px; } - @include bold; + @include variables.bold; } } @@ -38,7 +38,7 @@ table { .incoming { - background: rgba($green-90, 0.7); + background: rgba(variables.$green-90, 0.7); } .eta-label { @@ -49,11 +49,11 @@ .name { max-width: 120px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 180px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { max-width: 280px; } } @@ -62,7 +62,7 @@ display: none; max-width: 120px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { display: table-cell; padding-right: 3%; } @@ -74,7 +74,7 @@ align-items: center; gap: 6px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { gap: 12px; } @@ -93,9 +93,9 @@ text-transform: uppercase; &.badge { - border: 1px solid $black-30; - background-color: $black-80; - color: $black-30; + border: 1px solid variables.$black-30; + background-color: variables.$black-80; + color: variables.$black-30; } } } @@ -103,7 +103,7 @@ .version, .enabled, .consensus { max-width: 70px; overflow-wrap: break-word; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 100px; } } @@ -111,21 +111,21 @@ .badge { margin: 0; - color: $black-100; + color: variables.$black-100; text-transform: uppercase; &.yes { - background-color: $green-60; + background-color: variables.$green-60; } &.no { - background-color: $black-30; + background-color: variables.$black-30; } } .voting { margin-left: 0; - color: $yellow-50; + color: variables.$yellow-50; } .voters, @@ -133,7 +133,7 @@ display: none; max-width: 70px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { display: table-cell; } } @@ -141,7 +141,7 @@ .count { display: none; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { display: table-cell; } } diff --git a/src/containers/App/app.scss b/src/containers/App/app.scss index 38316f6ed..6d8f8127d 100644 --- a/src/containers/App/app.scss +++ b/src/containers/App/app.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .app { flex-grow: 1; @@ -12,13 +12,13 @@ justify-content: center; margin-bottom: 50px; - @include for-size(desktop-up) { - min-height: $min-height; + @include variables.for-size(desktop-up) { + min-height: variables.$min-height; } } .content, .footer { - min-width: $min-width; + min-width: variables.$min-width; } } diff --git a/src/containers/CustomNetworkHome/index.scss b/src/containers/CustomNetworkHome/index.scss index 00a97ca2d..3ec070ada 100644 --- a/src/containers/CustomNetworkHome/index.scss +++ b/src/containers/CustomNetworkHome/index.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .app { position: relative; @@ -6,7 +6,7 @@ .custom-network-main-page { position: relative; min-height: 600px; - color: $white; + color: variables.$white; .logo-content { display: flex; @@ -19,12 +19,12 @@ .custom-network-logo { display: none; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: inherit; height: auto; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 280px; } @@ -36,13 +36,13 @@ .page-header { margin-top: -20px; font-size: 20px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 24px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 42px; } } @@ -60,31 +60,31 @@ border: none; border-radius: 100px; margin: 10px 16px; - background-color: $black-80; - color: $white; + background-color: variables.$black-80; + color: variables.$white; font-size: 16px; letter-spacing: 0.01em; line-height: 24px; &::placeholder { overflow: visible; - color: $black-40; + color: variables.$black-40; } } .custom-network-input-button { box-sizing: border-box; padding: 8px 16px; - border: 1px solid $custom; + border: 1px solid variables.$custom; border-radius: 100px; margin: 16px; - color: $custom; + color: variables.$custom; font-size: 14px; &:hover, &:focus { - border: 1px solid $white; - color: $white; + border: 1px solid variables.$white; + color: variables.$white; cursor: pointer; } } @@ -102,9 +102,9 @@ .custom-network-header { padding-bottom: 24px; - border-bottom: 1px solid $black-80; + border-bottom: 1px solid variables.$black-80; font-size: 20px; - @include bold; + @include variables.bold; } .custom-network-item { @@ -112,14 +112,14 @@ flex-direction: row; justify-content: space-between; padding: 24px 0; - border-bottom: 1px solid $black-80; + border-bottom: 1px solid variables.$black-80; color: inherit; font-size: 16px; text-decoration: none; &:hover, &:focus { - color: $custom; + color: variables.$custom; cursor: pointer; } diff --git a/src/containers/Footer/footer.scss b/src/containers/Footer/footer.scss index 7af646bb7..35ac6b6e3 100644 --- a/src/containers/Footer/footer.scss +++ b/src/containers/Footer/footer.scss @@ -1,11 +1,11 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .footer { position: relative; display: flex; flex-direction: column; justify-content: space-around; - border-top: 1px solid $black-80; + border-top: 1px solid variables.$black-80; margin: 0 10%; .footer-links { @@ -13,7 +13,7 @@ flex-direction: column; justify-content: space-around; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { flex-direction: row; } } @@ -24,7 +24,7 @@ .footer-section-header { margin-bottom: 24px; - color: $white; + color: variables.$white; font-size: 16px; font-style: normal; font-weight: 700; @@ -55,11 +55,11 @@ .logo { margin-bottom: 11px; - color: $white; + color: variables.$white; font-size: 14px; - @include regular; + @include variables.regular; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { display: inline-block; } @@ -77,11 +77,11 @@ .copyright { margin-top: 20px; - color: $black-40; + color: variables.$black-40; font-size: 12px; - @include medium; + @include variables.medium; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 320px; margin-top: 8px; clear: right; diff --git a/src/containers/Header/LanguagePicker/LanguagePicker.scss b/src/containers/Header/LanguagePicker/LanguagePicker.scss index b3513de99..2b948d309 100644 --- a/src/containers/Header/LanguagePicker/LanguagePicker.scss +++ b/src/containers/Header/LanguagePicker/LanguagePicker.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .language-picker { margin-left: auto; @@ -8,6 +8,6 @@ } .arrow { - color: $blue-purple-40; + color: variables.$blue-purple-40; } } diff --git a/src/containers/Header/NavigationMenu/NavigationMenu.scss b/src/containers/Header/NavigationMenu/NavigationMenu.scss index 2272b0668..005e6333f 100644 --- a/src/containers/Header/NavigationMenu/NavigationMenu.scss +++ b/src/containers/Header/NavigationMenu/NavigationMenu.scss @@ -1,6 +1,6 @@ @use 'sass:math'; -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; $menu-toggle-size: 25px; $menu-toggle-line-spacing: math.div($menu-toggle-size, 4); @@ -46,7 +46,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } .nav-link { - color: $white; + color: variables.$white; font-size: 14px; } @@ -129,7 +129,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } // Prevents navigation from keeping styles when menu is opened on mobile sizes and then resized larger -@media (max-width: $tablet-landscape-upper-boundary) { +@media (max-width: variables.$tablet-landscape-upper-boundary) { .navbar-collapse { max-height: 100%; margin-top: 24px; @@ -176,7 +176,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } /* Responsiveness */ -@media (min-width: $tablet-landscape-upper-boundary) { +@media (min-width: variables.$tablet-landscape-upper-boundary) { .navbar { flex-wrap: nowrap; margin: 0 auto; @@ -214,14 +214,14 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; height: 6px; border-radius: 100%; margin-left: 50%; - background-color: $green; + background-color: variables.$green; } :hover { - color: $white; + color: variables.$white; } :focus { - color: $white; + color: variables.$white; } } diff --git a/src/containers/Header/NetworkPicker/NetworkPicker.scss b/src/containers/Header/NetworkPicker/NetworkPicker.scss index 9a60d0100..cd025e965 100644 --- a/src/containers/Header/NetworkPicker/NetworkPicker.scss +++ b/src/containers/Header/NetworkPicker/NetworkPicker.scss @@ -1,10 +1,10 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; @mixin dropdown-network-item( $background, $background-hover: $background, $border: $background, - $color: $black + $color: variables.$black ) { .dropdown-toggle { border-color: $border; @@ -39,28 +39,28 @@ } &.network-mainnet { - @include dropdown-network-item($white, $black-20); + @include dropdown-network-item(variables.$white, variables.$black-20); } &.network-testnet { - @include dropdown-network-item($testnet, $orange-60); + @include dropdown-network-item(variables.$testnet, variables.$orange-60); } &.network-devnet { - @include dropdown-network-item($devnet, $blue-purple-40); + @include dropdown-network-item(variables.$devnet, variables.$blue-purple-40); } /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */ &.network-xahau_mainnet { - @include dropdown-network-item($xahau-mainnet, $green-50); + @include dropdown-network-item(variables.$xahau-mainnet, variables.$green-50); } /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */ &.network-xahau_testnet { - @include dropdown-network-item($xahau-testnet, $magenta-40); + @include dropdown-network-item(variables.$xahau-testnet, variables.$magenta-40); } &.network-custom { - @include dropdown-network-item($custom, $yellow-60); + @include dropdown-network-item(variables.$custom, variables.$yellow-60); } } diff --git a/src/containers/Header/header.scss b/src/containers/Header/header.scss index 140c659ba..47dfe0734 100644 --- a/src/containers/Header/header.scss +++ b/src/containers/Header/header.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; /* Header */ .header { @@ -9,7 +9,7 @@ width: 100%; flex-direction: column; padding: 16px; - background: $black; + background: variables.$black; gap: 8px; .topbar { diff --git a/src/containers/Header/search.scss b/src/containers/Header/search.scss index 56fa80425..afa3df34a 100644 --- a/src/containers/Header/search.scss +++ b/src/containers/Header/search.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .search { display: inline-block; @@ -7,18 +7,18 @@ input { width: 100%; padding: 8px 16px 8px 42px; - border: 1px solid $black-50; - background: $black url('../shared/images/search.svg') no-repeat 16px center; + border: 1px solid variables.$black-50; + background: variables.$black url('../shared/images/search.svg') no-repeat 16px center; background-size: 12px; - color: $white; + color: variables.$white; font-size: 14px; line-height: 24px; text-align: left; text-overflow: ellipsis; - @include regular; + @include variables.regular; &::placeholder { - color: $white; + color: variables.$white; } } } diff --git a/src/containers/Ledger/ledger.scss b/src/containers/Ledger/ledger.scss index f086ff41d..65b8f340e 100644 --- a/src/containers/Ledger/ledger.scss +++ b/src/containers/Ledger/ledger.scss @@ -1,15 +1,15 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .ledger-page { margin: 0 auto; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 600px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 772px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 864px; } @@ -21,7 +21,7 @@ padding: 8px 4px; margin-top: 40px; margin-bottom: 60px; - color: $black-40; + color: variables.$black-40; font-size: 12px; letter-spacing: 0px; line-height: 15px; @@ -29,12 +29,12 @@ svg { position: relative; height: 8px; - color: $black-40; + color: variables.$black-40; } .previous { padding: 6px 16px; - border: 1px solid $black-40; + border: 1px solid variables.$black-40; border-radius: 100px; float: left; @@ -44,13 +44,13 @@ &:focus, &:hover { - background-color: $black-70; + background-color: variables.$black-70; } } .next { padding: 6px 16px; - border: 1px solid $black-40; + border: 1px solid variables.$black-40; border-radius: 100px; float: right; @@ -60,7 +60,7 @@ &:focus, &:hover { - background-color: $black-70; + background-color: variables.$black-70; } } } @@ -72,7 +72,7 @@ overflow: hidden; padding: 10px 8px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { padding: 10px 0px; } @@ -81,7 +81,7 @@ overflow: hidden; padding-top: 48px; margin: auto; - color: $black-30; + color: variables.$black-30; font-size: 12px; line-height: 18px; text-align: center; @@ -90,20 +90,20 @@ } .closed-date { - color: $black-30; + color: variables.$black-30; font-size: 10px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { float: right; } } .ledger-hash { - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { float: left; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { font-size: 12px; } } @@ -113,22 +113,22 @@ overflow: hidden; .title { - color: $black-40; + color: variables.$black-40; font-size: 10px; letter-spacing: 0px; line-height: 18px; text-transform: uppercase; - @include medium; + @include variables.medium; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 10px; line-height: 20px; } } .value { - color: $white; - @include bold; + color: variables.$white; + @include variables.bold; } .ledger-cols { @@ -144,12 +144,12 @@ text-align: left; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: auto; margin-right: 0px; margin-left: 40px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { margin-right: 0px; margin-left: 40px; } @@ -159,7 +159,7 @@ font-size: 18px; line-height: 28px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { margin-top: -8px; font-size: 18px; line-height: 36px; @@ -188,7 +188,7 @@ .col-type { width: 175px; - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 210px; } } @@ -197,7 +197,7 @@ display: block; text-align: right; // on mobile it is the last column - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { text-align: left; } } @@ -205,12 +205,12 @@ .col-sequence { display: none; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: inline-block; width: 85px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 100px; } } @@ -219,7 +219,7 @@ display: none; text-align: right; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { display: inline-block; width: 100px; } @@ -229,14 +229,14 @@ .col-account { font-size: 10px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { font-size: 12px; } } .col-sequence, .col-fee { - color: $black-40; + color: variables.$black-40; } } } diff --git a/src/containers/Ledgers/css/ledgerMetrics.scss b/src/containers/Ledgers/css/ledgerMetrics.scss index 1e12bb03b..26ca41acc 100644 --- a/src/containers/Ledgers/css/ledgerMetrics.scss +++ b/src/containers/Ledgers/css/ledgerMetrics.scss @@ -1,11 +1,11 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .metrics { overflow: hidden; padding: 10px 20px; text-align: center; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: calc(100% - 124px); justify-content: space-between; padding: 0px 12px; @@ -15,17 +15,17 @@ .cell { display: inline-block; width: 100%; - color: $white; + color: variables.$white; font-size: 16px; text-align: center; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: auto; min-width: 100px; margin: 15px 5px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { min-width: 160px; margin: 15px 5px; font-size: 18px; @@ -33,23 +33,23 @@ text-align: right; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { margin: 20px 30px; } .label { display: inline-block; overflow: hidden; - color: $black-40; + color: variables.$black-40; float: left; font-size: 12px; line-height: 25px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; - @include semibold; + @include variables.semibold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: block; float: none; font-size: 10px; @@ -65,9 +65,9 @@ display: inline-block; float: right; letter-spacing: 0px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: block; float: none; } @@ -88,13 +88,13 @@ height: 40px; flex-direction: row; align-items: center; - color: $white; + color: variables.$white; cursor: pointer; float: left; font-size: 10px; text-align: left; text-transform: uppercase; - @include medium; + @include variables.medium; .icon { width: 40px; @@ -104,7 +104,7 @@ } &:hover { - color: $black-30; + color: variables.$black-30; } } } @@ -113,7 +113,7 @@ display: flex; flex-direction: column; align-content: center; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { flex-direction: row; } } diff --git a/src/containers/Ledgers/css/ledgers.scss b/src/containers/Ledgers/css/ledgers.scss index 1af05ce8f..65233bbb1 100644 --- a/src/containers/Ledgers/css/ledgers.scss +++ b/src/containers/Ledgers/css/ledgers.scss @@ -1,7 +1,7 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; $ledgers-margin-large: 32px; -$ledgers-border: 1px solid $black-70; +$ledgers-border: 1px solid variables.$black-70; $ledger-width: 196px; .ledgers-page { @@ -28,7 +28,7 @@ $ledger-width: 196px; line-height: 14px; text-align: right; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: calc(100% - 80px); padding: 4px 40px; } @@ -49,7 +49,7 @@ $ledger-width: 196px; &.domain { max-width: calc(70% - 5px); font-size: 14px; - @include medium; + @include variables.medium; } &.pubkey { @@ -59,7 +59,7 @@ $ledger-width: 196px; letter-spacing: 0; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { &.domain { max-width: calc(50% - 5px); } @@ -126,16 +126,16 @@ $ledger-width: 196px; padding: $ledgers-margin-large; border: $ledgers-border; border-bottom: 0; - color: $black-40; + color: variables.$black-40; font-size: 10px; line-height: 12px; text-align: center; text-transform: uppercase; - @include bold; + @include variables.bold; .close-time { padding-bottom: 24px; - color: $black-40; + color: variables.$black-40; font-size: 10px; } @@ -150,15 +150,15 @@ $ledger-width: 196px; } b { - color: $white; + color: variables.$white; font-size: 10px; text-align: end; - @include medium; + @include variables.medium; } .ledger-index { padding-bottom: 3px; - color: $white; + color: variables.$white; font-size: 14px; font-weight: 700; line-height: 16px; @@ -171,12 +171,12 @@ $ledger-width: 196px; } a:hover { - background: $black-70; + background: variables.$black-70; } &.flag-ledger a { - background: $black-70; - color: $white; + background: variables.$black-70; + color: variables.$white; } } @@ -226,10 +226,10 @@ $ledger-width: 196px; .hash { overflow: hidden; padding: 0 32px 32px; - border: 1px solid $black-60; + border: 1px solid variables.$black-60; border-top: 0; - background: rgba($black-80, 0.7); - color: $white; + background: rgba(variables.$black-80, 0.7); + color: variables.$white; font-size: 15px; text-align: left; @@ -242,7 +242,7 @@ $ledger-width: 196px; opacity: 0.5; .bar { - background: $black-20 !important; + background: variables.$black-20 !important; } } @@ -252,9 +252,9 @@ $ledger-width: 196px; .hash-concat { padding-top: 32px; - color: $white; + color: variables.$white; font-size: 14px; - @include bold; + @include variables.bold; } .subtitle { @@ -263,11 +263,11 @@ $ledger-width: 196px; flex-direction: column; padding-top: 24px; padding-bottom: 32px; - color: $black-40; + color: variables.$black-40; font-size: 10px; line-height: 14px; text-transform: uppercase; - @include bold; + @include variables.bold; } .validation-total { @@ -276,7 +276,7 @@ $ledger-width: 196px; } .subtitle b { - color: $white; + color: variables.$white; font-size: 11px; } @@ -293,14 +293,14 @@ $ledger-width: 196px; .subtitle span.missed b { border-radius: 2px; - background: $orange-50; + background: variables.$orange-50; color: white; } .validated { display: inline-block; height: 26px; - color: $green; + color: variables.$green; text-align: center; vertical-align: middle; } @@ -324,7 +324,7 @@ $ledger-width: 196px; .validation { height: 4px; border-radius: 4px; - background: $black-50; + background: variables.$black-50; cursor: pointer; opacity: 0.85; } @@ -334,11 +334,11 @@ $ledger-width: 196px; } .validation.trusted { - background: $white; + background: variables.$white; } .validation.selected { - background: $green; + background: variables.$green; opacity: 1; } @@ -349,7 +349,7 @@ $ledger-width: 196px; .partial { width: 50%; height: 100%; - background: $red; + background: variables.$red; } } } diff --git a/src/containers/Ledgers/css/legend.scss b/src/containers/Ledgers/css/legend.scss index c59f5d21f..b89bca499 100644 --- a/src/containers/Ledgers/css/legend.scss +++ b/src/containers/Ledgers/css/legend.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .legend { display: flex; @@ -33,7 +33,7 @@ flex-flow: column wrap; gap: 16px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; } } diff --git a/src/containers/MPT/MPTHeader/styles.scss b/src/containers/MPT/MPTHeader/styles.scss index 682ea36e4..074ceb533 100644 --- a/src/containers/MPT/MPTHeader/styles.scss +++ b/src/containers/MPT/MPTHeader/styles.scss @@ -1,5 +1,5 @@ -@import '../../shared/css/variables'; -@import '../../shared/css/table'; +@use '../../shared/css/variables'; +@use '../../shared/css/table'; .mpt-header-container { .mpt-bottom-container { @@ -7,14 +7,14 @@ flex-direction: column; padding-top: 64px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 490px; } @@ -25,7 +25,7 @@ .settings { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 650px; } } @@ -37,7 +37,7 @@ justify-content: space-between; margin-top: 68px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -47,9 +47,9 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: $white; + color: variables.$white; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } @@ -57,10 +57,10 @@ .title { padding-bottom: 4px; margin-bottom: 4.5px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .value { @@ -68,13 +68,13 @@ .mpt-issuer { margin: auto; - color: $white; + color: variables.$white; font-size: 18px; font-style: normal; line-height: 125%; text-align: right; text-decoration: none; - @include bold; + @include variables.bold; } .copy { @@ -109,11 +109,11 @@ padding-top: 0; margin-top: 0; margin-bottom: 0; - color: $white; + color: variables.$white; font-size: 24px; text-overflow: ellipsis; white-space: nowrap; - @include bold; + @include variables.bold; } .token-title { @@ -121,15 +121,15 @@ flex-direction: row; align-items: center; padding-bottom: 4px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; .badge { - background: $mpt; - color: $white; + background: variables.$mpt; + color: variables.$white; } } diff --git a/src/containers/MPT/styles.scss b/src/containers/MPT/styles.scss index 51c0c4fc3..f4b0d3245 100644 --- a/src/containers/MPT/styles.scss +++ b/src/containers/MPT/styles.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .mpt-page { width: 100%; diff --git a/src/containers/NFT/NFTHeader/styles.scss b/src/containers/NFT/NFTHeader/styles.scss index 656931f8f..46145fc7e 100644 --- a/src/containers/NFT/NFTHeader/styles.scss +++ b/src/containers/NFT/NFTHeader/styles.scss @@ -1,5 +1,5 @@ -@import '../../shared/css/variables'; -@import '../../shared/css/table'; +@use '../../shared/css/variables'; +@use '../../shared/css/table'; .nft-header-container { .nft-bottom-container { @@ -7,21 +7,21 @@ flex-direction: column; padding-top: 64px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 490px; } } .settings { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 650px; } } @@ -33,7 +33,7 @@ justify-content: space-between; margin-top: 68px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -43,9 +43,9 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: $white; + color: variables.$white; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } @@ -53,10 +53,10 @@ .title { padding-bottom: 4px; margin-bottom: 4.5px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .value { @@ -64,13 +64,13 @@ .nft-issuer { margin: auto; - color: $white; + color: variables.$white; font-size: 18px; font-style: normal; line-height: 125%; text-align: right; text-decoration: none; - @include bold; + @include variables.bold; } .copy { @@ -105,11 +105,11 @@ padding-top: 0; margin-top: 0; margin-bottom: 0; - color: $white; + color: variables.$white; font-size: 24px; text-overflow: ellipsis; white-space: nowrap; - @include bold; + @include variables.bold; } .token-title { @@ -117,15 +117,15 @@ flex-direction: row; align-items: center; padding-bottom: 4px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; .badge { - background: $nft; - color: $white; + background: variables.$nft; + color: variables.$white; } } diff --git a/src/containers/NFT/NFTTabs/styles.scss b/src/containers/NFT/NFTTabs/styles.scss index b831aa028..efca4a46c 100644 --- a/src/containers/NFT/NFTTabs/styles.scss +++ b/src/containers/NFT/NFTTabs/styles.scss @@ -1,5 +1,5 @@ -@import '../../shared/css/variables'; -@import '../../shared/css/table'; +@use '../../shared/css/variables'; +@use '../../shared/css/table'; .nft-tabs { margin-top: 60px; @@ -11,7 +11,7 @@ table { .no-info-panel { - color: $black-40; + color: variables.$black-40; font-size: 14px; font-weight: 400; line-height: 150%; @@ -33,11 +33,11 @@ width: 55%; padding-left: 32px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 140px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { max-width: 180px; } } @@ -46,7 +46,7 @@ display: table-cell; width: 15%; padding-right: 32px; - @include medium; + @include variables.medium; span.amount { padding: 0; @@ -57,16 +57,16 @@ display: table-cell; width: 30%; min-width: 0; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 80px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { max-width: 120px; } - @include medium; + @include variables.medium; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { .offer-id { display: table-cell; } diff --git a/src/containers/NFT/styles.scss b/src/containers/NFT/styles.scss index 59c9e6f90..4e3cd0998 100644 --- a/src/containers/NFT/styles.scss +++ b/src/containers/NFT/styles.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .nft-page { width: 100%; diff --git a/src/containers/Network/css/barchart.scss b/src/containers/Network/css/barchart.scss index dacce66c6..d17166692 100644 --- a/src/containers/Network/css/barchart.scss +++ b/src/containers/Network/css/barchart.scss @@ -1,7 +1,7 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .y-label { - fill: $black-40; + fill: variables.$black-40; } .barchart { @@ -12,7 +12,7 @@ p, span { - color: $black-40; + color: variables.$black-40; line-height: 70%; } } @@ -21,7 +21,7 @@ margin: 10px; p { - color: $white; + color: variables.$white; } } @@ -41,19 +41,19 @@ .icon { &.vals { - background-color: $green-50; + background-color: variables.$green-50; } &.nodes { - background-color: $blue-purple-50; + background-color: variables.$blue-purple-50; } &.yea { - background-color: $green-50; + background-color: variables.$green-50; } &.nay { - background-color: $magenta-70; + background-color: variables.$magenta-70; } width: 16px; @@ -62,7 +62,7 @@ } .text { - color: $white; + color: variables.$white; text-transform: capitalize; } } @@ -70,12 +70,12 @@ .legend-stable { padding: 16px; - border-radius: $border-radius; + border-radius: variables.$border-radius; margin-left: auto; - background-color: $black-70; + background-color: variables.$black-70; .stable { - color: $black-0; + color: variables.$black-0; font-weight: 700; } } diff --git a/src/containers/Network/css/hexagons.scss b/src/containers/Network/css/hexagons.scss index 5bd70e421..f005f6fbe 100644 --- a/src/containers/Network/css/hexagons.scss +++ b/src/containers/Network/css/hexagons.scss @@ -1,18 +1,18 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .validators-container { .validators { position: relative; - background: $black-80; + background: variables.$black-80; svg { display: block; - filter: drop-shadow(0px 0px 2px $black-70); + filter: drop-shadow(0px 0px 2px variables.$black-70); } .mesh path { fill: none; - stroke: $black; + stroke: variables.$black; } .hexagons { @@ -24,7 +24,7 @@ fill-opacity: 0.8; stroke-opacity: 1; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { cursor: auto; } } diff --git a/src/containers/Network/css/map.scss b/src/containers/Network/css/map.scss index f5aefe624..eda0803e7 100644 --- a/src/containers/Network/css/map.scss +++ b/src/containers/Network/css/map.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .nodes-map { position: relative; @@ -8,7 +8,7 @@ margin: auto; .country { - fill: $black-40; + fill: variables.$black-40; opacity: 0.2; } @@ -23,9 +23,9 @@ .legend { text { - fill: $black-40; + fill: variables.$black-40; font-size: 10px; - @include regular; + @include variables.regular; } } } diff --git a/src/containers/Network/css/nodesTable.scss b/src/containers/Network/css/nodesTable.scss index 7d8757b25..2f33b697b 100644 --- a/src/containers/Network/css/nodesTable.scss +++ b/src/containers/Network/css/nodesTable.scss @@ -1,5 +1,5 @@ -@import '../../shared/css/variables'; -@import '../../shared/css/table'; +@use '../../shared/css/variables'; +@use '../../shared/css/table'; .nodes-table { position: relative; @@ -9,11 +9,11 @@ .pubkey { max-width: 70px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { max-width: 180px; } @@ -29,7 +29,7 @@ .state { min-width: 60px; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .state span { @@ -40,18 +40,18 @@ } .state .full { - background-color: $green; + background-color: variables.$green; color: black; } .state .proposing { - background-color: $orange; + background-color: variables.$orange; color: white; } .state .connected { - background-color: $yellow; - color: $black-60; + background-color: variables.$yellow; + color: variables.$black-60; } .version { @@ -61,26 +61,26 @@ .uptime { text-align: right; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { text-align: left; } } .last-ledger { i { - color: $black-30; + color: variables.$black-30; } } .in-out small { - color: $black-50; + color: variables.$black-50; font-weight: bold; } .ledgers { text-align: right; - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { text-align: left; } } @@ -92,7 +92,7 @@ margin: 3px 5px; vertical-align: middle; - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { display: inline-block; } } @@ -101,11 +101,11 @@ position: absolute; height: 100%; border-radius: 2px; - background: $black-50; + background: variables.$black-50; } .ledgers span { - color: $black-50; + color: variables.$black-50; font-weight: bold; vertical-align: middle; } @@ -115,7 +115,7 @@ .latency { display: none; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { display: table-cell; } } @@ -134,7 +134,7 @@ .in-out { display: none; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: table-cell; } } diff --git a/src/containers/Network/css/style.scss b/src/containers/Network/css/style.scss index 091fa0268..debfa3e77 100644 --- a/src/containers/Network/css/style.scss +++ b/src/containers/Network/css/style.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .network-page { // Needs additional bottom margin to break up table from the horizontal @@ -14,7 +14,7 @@ .stat { min-height: 15px; padding: 2px; - color: $black-40; + color: variables.$black-40; font-size: 11px; text-align: center; text-transform: uppercase; @@ -23,7 +23,7 @@ font-size: 10px; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { padding: 4px 10px; font-size: 12px; diff --git a/src/containers/Network/css/validatorsTable.scss b/src/containers/Network/css/validatorsTable.scss index ed5958bce..794fa5722 100644 --- a/src/containers/Network/css/validatorsTable.scss +++ b/src/containers/Network/css/validatorsTable.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .validators-table { position: relative; @@ -14,11 +14,11 @@ .pubkey { max-width: 70px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { max-width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { max-width: 180px; } @@ -33,21 +33,21 @@ .fee { min-width: 90px; - color: $orange-50; + color: variables.$orange-50; } .missed { - color: $orange-50; + color: variables.$orange-50; } .domain { max-width: 140px; - @include medium; + @include variables.medium; } .last-ledger { min-width: 55px; - @include bold; + @include variables.bold; // When a validation comes in we update the color to use the ledgers hash. Until that occurs the table's default // text color is used. @@ -66,7 +66,7 @@ } .unl.yes { - color: $green; + color: variables.$green; } .n-unl { @@ -80,22 +80,22 @@ } .n-unl.yes { - color: $orange-40; + color: variables.$orange-40; } - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { .score.d30 { display: table-cell; } } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { .pubkey { display: table-cell; } } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { .score.h1, .fee { display: table-cell; diff --git a/src/containers/NoMatch/nomatch.scss b/src/containers/NoMatch/nomatch.scss index 899425ef9..9855be8ff 100644 --- a/src/containers/NoMatch/nomatch.scss +++ b/src/containers/NoMatch/nomatch.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .no-match { margin: 10% auto; @@ -7,29 +7,29 @@ .uh-oh { display: inline-block; padding: 2px 8px; - border: 1px solid $black-80; + border: 1px solid variables.$black-80; border-radius: 4px; margin-bottom: 24px; - color: $black-20; + color: variables.$black-20; font-size: 12px; line-height: 20px; - @include bold; + @include variables.bold; } .title { margin-bottom: 16px; - color: $black-20; + color: variables.$black-20; font-size: 40px; line-height: 48px; - @include bold; + @include variables.bold; } .hint { margin-bottom: 16px; - color: $black-50; + color: variables.$black-50; font-size: 16px; line-height: 24px; - @include bold; + @include variables.bold; } .warning { diff --git a/src/containers/PayStrings/PayStringHeader/styles.scss b/src/containers/PayStrings/PayStringHeader/styles.scss index 73d59bdc2..85cbcd234 100644 --- a/src/containers/PayStrings/PayStringHeader/styles.scss +++ b/src/containers/PayStrings/PayStringHeader/styles.scss @@ -1,12 +1,12 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .paystring-header { margin-bottom: 16px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 552px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 1140px; } @@ -25,7 +25,7 @@ .paystring-id { font-size: 42px; - @include bold; + @include variables.bold; } } } diff --git a/src/containers/PayStrings/PayStringMappingsTable/styles.scss b/src/containers/PayStrings/PayStringMappingsTable/styles.scss index 867362f17..0d35159b8 100644 --- a/src/containers/PayStrings/PayStringMappingsTable/styles.scss +++ b/src/containers/PayStrings/PayStringMappingsTable/styles.scss @@ -1,4 +1,4 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .paystring-table { .col-network, @@ -11,33 +11,33 @@ } .col-network { - @include bold; + @include variables.bold; width: 80px; &.paystring-type { - color: $black-40; + color: variables.$black-40; } } .col-environment { width: 80px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 135px; //calc(100% - 440px); } } .col-address { - @include medium; + @include variables.medium; } .col-tag { width: 40px; text-align: right; - @include medium; + @include variables.medium; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 135px; } } diff --git a/src/containers/PayStrings/styles.scss b/src/containers/PayStrings/styles.scss index 7c7201294..3d92e5c7a 100644 --- a/src/containers/PayStrings/styles.scss +++ b/src/containers/PayStrings/styles.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .paystring-page { width: 100%; @@ -8,12 +8,12 @@ min-height: 100px; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 552px; margin: 0px auto; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 1140px; } } diff --git a/src/containers/Token/DEXPairs/styles.scss b/src/containers/Token/DEXPairs/styles.scss index 11b19add9..63c5a45b8 100644 --- a/src/containers/Token/DEXPairs/styles.scss +++ b/src/containers/Token/DEXPairs/styles.scss @@ -1,9 +1,9 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .dex-pairs-container { padding: 64px 0 100px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { padding-top: 80px; } @@ -17,10 +17,10 @@ font-size: 14px; th { - @include bold; + @include variables.bold; border-bottom: 1px black solid; - color: $white; + color: variables.$white; font-size: 18px; text-align: center; } @@ -28,19 +28,19 @@ td { width: 200px; padding: 2px 5px; - border-top: 1px solid $black-70; - border-bottom: 1px solid $black-70; - color: $black-40; + border-top: 1px solid variables.$black-70; + border-bottom: 1px solid variables.$black-70; + color: variables.$black-40; .loader { - border-bottom: 1px solid $black; + border-bottom: 1px solid variables.$black; } } .pair { - @include bold; + @include variables.bold; - color: $white; + color: variables.$white; font-size: 18px; text-align: left; } @@ -50,7 +50,7 @@ a { font-size: 14px; - @include bold; + @include variables.bold; } } @@ -68,11 +68,11 @@ } .low-num { - color: $green-50; + color: variables.$green-50; } .high-num { - color: $orange-50; + color: variables.$orange-50; } .high { @@ -83,7 +83,7 @@ .no-pairs-message { padding: 16px; - color: $black-50; + color: variables.$black-50; font-size: 16px; text-align: center; } diff --git a/src/containers/Token/TokenHeader/styles.scss b/src/containers/Token/TokenHeader/styles.scss index 6ea3030d5..53e578fc8 100644 --- a/src/containers/Token/TokenHeader/styles.scss +++ b/src/containers/Token/TokenHeader/styles.scss @@ -1,5 +1,5 @@ -@import '../../shared/css/variables'; -@import '../../shared/css/table'; +@use '../../shared/css/variables'; +@use '../../shared/css/table'; .header-container { .bottom-container { @@ -7,21 +7,21 @@ flex-direction: column; padding-top: 64px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 490px; } } .settings { width: 100%; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 650px; } } @@ -33,7 +33,7 @@ justify-content: space-between; margin-top: 68px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -43,27 +43,27 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: $white; + color: variables.$white; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { flex-direction: column; margin-bottom: 0px; } .title { padding-bottom: 4px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .value { - color: $white; + color: variables.$white; font-size: 18px; line-height: 22.5px; text-decoration: none; - @include bold; + @include variables.bold; } } } @@ -81,11 +81,11 @@ span { margin: 0px; - color: $white; + color: variables.$white; font-size: 32px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 42px; } } @@ -108,7 +108,7 @@ width: 100%; vertical-align: top; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 450px; &.second { @@ -119,27 +119,27 @@ .secondary { padding: 0px 8px; - border-bottom: 1px solid $black-20; + border-bottom: 1px solid variables.$black-20; margin-bottom: 20px; - color: $black-90; + color: variables.$black-90; font-size: 12px; - @include bold; + @include variables.bold; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { border: none; } .title { - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include medium; + @include variables.medium; } .label { - color: $black-40; + color: variables.$black-40; text-transform: uppercase; - @include medium; + @include variables.medium; } ul { @@ -159,17 +159,17 @@ text-transform: none; vertical-align: middle; white-space: nowrap; - @include medium; + @include variables.medium; } b { - color: $white; + color: variables.$white; word-break: break-all; - @include bold; + @include variables.bold; } &.flags { - color: $blue-purple-30; + color: variables.$blue-purple-30; font-style: italic; } } @@ -216,7 +216,7 @@ overflow: hidden; width: 285px; padding-right: 10px; - color: $white; + color: variables.$white; text-overflow: ellipsis; white-space: nowrap; } diff --git a/src/containers/Token/styles.scss b/src/containers/Token/styles.scss index 823aeba8d..bf32172e2 100644 --- a/src/containers/Token/styles.scss +++ b/src/containers/Token/styles.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .token-page { width: 100%; diff --git a/src/containers/Transactions/DetailTab/detailTab.scss b/src/containers/Transactions/DetailTab/detailTab.scss index 569b8f1a2..ab2ad955d 100644 --- a/src/containers/Transactions/DetailTab/detailTab.scss +++ b/src/containers/Transactions/DetailTab/detailTab.scss @@ -1,14 +1,14 @@ -@import '../../shared/css/variables'; +@use '../../shared/css/variables'; .detail-body { margin-top: 20px; - color: $black-40; + color: variables.$black-40; font-size: 12px; letter-spacing: 0px; .detail-section { padding: 5px 15px; - border-bottom: 1px solid $black-70; + border-bottom: 1px solid variables.$black-70; margin: 0px 0px 30px; &:last-child { @@ -19,19 +19,19 @@ word-wrap: break-word; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 552px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 772px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 882px; } b { - color: $black-30; - @include medium; + color: variables.$black-30; + @include variables.medium; small { margin-left: 5px; @@ -60,10 +60,10 @@ .title { margin-bottom: 4px; - color: $white; + color: variables.$white; font-size: 16px; text-transform: capitalize; - @include bold; + @include variables.bold; span { margin-left: 8px; @@ -75,26 +75,26 @@ .detail-subtitle { margin-top: 16px; margin-bottom: 2px; - color: $black-40; + color: variables.$black-40; font-size: 14px; text-transform: uppercase; - @include medium; + @include variables.medium; } .ledger { - @include medium; + @include variables.medium; } .tx-result.fail { - color: $orange-40; + color: variables.$orange-40; } .time { - color: $blue-purple-30; + color: variables.$blue-purple-30; } .hash { - @include medium; + @include variables.medium; } .condition, @@ -103,23 +103,23 @@ .regular-key, .email, .message-key { - color: $blue-purple-30; + color: variables.$blue-purple-30; font-size: 13px; word-break: break-all; } .domain { - color: $blue-purple-30; + color: variables.$blue-purple-30; } .flag { - color: $blue-purple-30; + color: variables.$blue-purple-30; font-style: italic; } .account { font-size: 11px; - @include bold; + @include variables.bold; } .signers { diff --git a/src/containers/Transactions/simpleTab.scss b/src/containers/Transactions/simpleTab.scss index ca374a592..7d7836f18 100644 --- a/src/containers/Transactions/simpleTab.scss +++ b/src/containers/Transactions/simpleTab.scss @@ -1,6 +1,6 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; -$subdued-color: $black-40; +$subdued-color: variables.$black-40; .simple-body-tx { .rows { @@ -13,13 +13,13 @@ $subdued-color: $black-40; flex-wrap: wrap; padding-top: 20px; padding-left: 5px; - color: $red-dark; + color: variables.$red-dark; float: right; font-size: 14px; font-style: italic; text-align: right; vertical-align: middle; - @include regular; + @include variables.regular; } .row { @@ -31,7 +31,7 @@ $subdued-color: $black-40; padding-bottom: 8px; font-size: 11px; text-align: right; - @include medium; + @include variables.medium; } } @@ -56,7 +56,7 @@ $subdued-color: $black-40; color: $subdued-color; font-size: 11px; text-align: right; - @include medium; + @include variables.medium; .account { font-size: inherit; @@ -84,17 +84,17 @@ $subdued-color: $black-40; &.partial, &.closed, &.unset { - color: $red-dark; + color: variables.$red-dark; font-size: 14px; font-style: italic; - @include regular; + @include variables.regular; } &.flag { - color: $blue-purple-30; + color: variables.$blue-purple-30; font-size: 14px; font-style: italic; - @include regular; + @include variables.regular; } &.condition, @@ -106,7 +106,7 @@ $subdued-color: $black-40; font-size: 14px; white-space: normal; word-break: break-all; - @include regular; + @include variables.regular; } } @@ -117,19 +117,19 @@ $subdued-color: $black-40; .error { padding: 50px; - color: $orange-40; + color: variables.$orange-40; font-size: 14px; text-align: center; .type { margin: 0 5px; - @include bold; + @include variables.bold; } } .group { margin: 16px 0 16px -16px; - background: rgba($black-80, 0.7); + background: rgba(variables.$black-80, 0.7); gap: 15px; &:first-child { @@ -144,7 +144,7 @@ $subdued-color: $black-40; display: block; flex-direction: row; padding: 16px 0 0 16px; - color: $black-40; + color: variables.$black-40; font-size: 14px; font-weight: 600; text-transform: uppercase; diff --git a/src/containers/Transactions/transaction.scss b/src/containers/Transactions/transaction.scss index 7c80014fc..55f6a5b6e 100644 --- a/src/containers/Transactions/transaction.scss +++ b/src/containers/Transactions/transaction.scss @@ -1,20 +1,20 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .transaction { position: relative; max-width: 912px; min-height: 600px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 584px; margin: 0 auto; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 820px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 912px; } @@ -30,27 +30,27 @@ .type { display: inline-block; margin-bottom: 24px; - color: $white; + color: variables.$white; font-size: 42px; - @include bold; + @include variables.bold; } .txid { .title { - @include semibold; + @include variables.semibold; } display: flex; overflow: hidden; margin-top: 8px; - color: $black-40; + color: variables.$black-40; font-size: 12px; letter-spacing: 0px; line-height: 20px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; - @include medium; + @include variables.medium; } .tx-status { diff --git a/src/containers/Validators/historyTab.scss b/src/containers/Validators/historyTab.scss index 4112abe75..6db18ad0e 100644 --- a/src/containers/Validators/historyTab.scss +++ b/src/containers/Validators/historyTab.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .history-table { // Col overall styling @@ -12,25 +12,25 @@ .col-date { width: 90px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 200px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 300px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 390px; } .abbrev-date { - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: none; } } .full-date { display: none; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: table-cell; } } @@ -38,57 +38,57 @@ .col-chain { width: 55px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 70px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 200px; } } .col-score { width: 55px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 70px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 150px; } } .col-total { width: 55px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 70px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 165px; } } .col-missed { width: 55px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 70px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 100px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 165px; } } .td-missed { - color: $orange-50; + color: variables.$orange-50; } } diff --git a/src/containers/Validators/simpleTab.scss b/src/containers/Validators/simpleTab.scss index 224a55cc7..c6de540bf 100644 --- a/src/containers/Validators/simpleTab.scss +++ b/src/containers/Validators/simpleTab.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .simple-body-validator { .row { diff --git a/src/containers/Validators/validator.scss b/src/containers/Validators/validator.scss index 58a5bfe75..a7bb7c475 100644 --- a/src/containers/Validators/validator.scss +++ b/src/containers/Validators/validator.scss @@ -1,17 +1,17 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .validator { position: relative; min-height: 600px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: 552px; margin: auto; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 772px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { width: 1140px; } @@ -28,28 +28,28 @@ .type { display: inline-block; margin-bottom: 24px; - color: $white; + color: variables.$white; font-size: 32px; - @include bold; + @include variables.bold; } .label { margin-top: 16px; margin-bottom: 4px; - color: $black-80; + color: variables.$black-80; font-size: 24px; line-height: 32px; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 32px; line-height: 40px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 40px; line-height: 48px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { font-size: 40px; line-height: 48px; } @@ -58,13 +58,13 @@ .hash { overflow: hidden; padding-bottom: 87px; - color: $black-40; + color: variables.$black-40; font-size: 12px; letter-spacing: 0px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; - @include medium; + @include variables.medium; } .status { @@ -74,27 +74,27 @@ line-height: 18px; text-transform: uppercase; vertical-align: middle; - @include bold; + @include variables.bold; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 12px; line-height: 20px; } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 12px; line-height: 20px; } - @include for-size(big-desktop-up) { + @include variables.for-size(big-desktop-up) { font-size: 12px; line-height: 20px; } &.success { - color: $green; + color: variables.$green; } &.fail { - color: $orange-40; + color: variables.$orange-40; span { text-transform: none; diff --git a/src/containers/Validators/votingTab.scss b/src/containers/Validators/votingTab.scss index 71b6cd95b..f630aad7a 100644 --- a/src/containers/Validators/votingTab.scss +++ b/src/containers/Validators/votingTab.scss @@ -1,4 +1,4 @@ -@import '../shared/css/variables'; +@use '../shared/css/variables'; .voting { margin-left: 24px; @@ -15,7 +15,7 @@ margin: 0 !important; text-align: left; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: inline-block; } } @@ -33,7 +33,7 @@ .rows { margin-top: 32px; - background-color: $black-80; + background-color: variables.$black-80; } .row { @@ -41,7 +41,7 @@ flex-flow: row wrap; justify-content: space-between; padding: 16px; - border-bottom: 1px solid $black-70; + border-bottom: 1px solid variables.$black-70; } .label { @@ -56,15 +56,15 @@ } .badge { - color: $black-100; + color: variables.$black-100; text-transform: uppercase; &.yea { - background-color: $green-60; + background-color: variables.$green-60; } &.nay { - background-color: $black-30; + background-color: variables.$black-30; } } diff --git a/src/containers/shared/components/Dropdown/dropdown.scss b/src/containers/shared/components/Dropdown/dropdown.scss index 5d23922e5..b850ba49a 100644 --- a/src/containers/shared/components/Dropdown/dropdown.scss +++ b/src/containers/shared/components/Dropdown/dropdown.scss @@ -1,4 +1,4 @@ -@import '../../css/variables'; +@use '../../css/variables'; .dropdown { position: relative; @@ -26,22 +26,22 @@ overflow: hidden; min-width: max(100%, 160px); padding: 8px; - border: 1px solid $black-80; - border-radius: $border-radius; + border: 1px solid variables.$black-80; + border-radius: variables.$border-radius; margin-top: 5px; - background: rgba($black, 0.96); + background: rgba(variables.$black, 0.96); } .dropdown-item { padding: 12px 8px; - border-radius: calc($border-radius / 2); + border-radius: calc(variables.$border-radius / 2); font-weight: normal; @at-root { a#{&} { display: flex; align-items: center; - color: $white; + color: variables.$white; gap: 0 12px; &::after { @@ -49,7 +49,7 @@ } &:hover { - background: $black-80; + background: variables.$black-80; cursor: pointer; } } @@ -59,12 +59,12 @@ width: 100%; padding: 8px; border: none; - background: $black-80; - color: $white; + background: variables.$black-80; + color: variables.$white; font-size: inherit; &::placeholder { - color: $black-40; + color: variables.$black-40; } } diff --git a/src/containers/shared/components/JsonView/json-view.scss b/src/containers/shared/components/JsonView/json-view.scss index ff09d9907..dadfd7448 100644 --- a/src/containers/shared/components/JsonView/json-view.scss +++ b/src/containers/shared/components/JsonView/json-view.scss @@ -1,32 +1,32 @@ -@import '../../css/variables'; +@use '../../css/variables'; @import 'react18-json-view/src/style.css'; .json-view { overflow: hidden; margin-bottom: 40px; - color: $black-10 !important; + color: variables.$black-10 !important; font-size: 12px; letter-spacing: 0; svg { height: 11px !important; - color: $black-10; + color: variables.$black-10; } } .jv-button { - color: $orange-50 !important; + color: variables.$orange-50 !important; font-size: 14px; } .jv-indent { - border-left: 1px solid $black-60; + border-left: 1px solid variables.$black-60; margin: 4px; } /* stylelint-disable selector-class-pattern -- react18-json-view uses these */ .json-view--boolean { - color: $magenta-60 !important; + color: variables.$magenta-60 !important; } .json-view--pair { @@ -34,7 +34,7 @@ } .json-view--property { - color: $black-10 !important; + color: variables.$black-10 !important; } .json-view--null, @@ -42,17 +42,17 @@ display: inline-block; padding: 1px 2px; border-radius: 3px; - background-color: $black-60; - color: $black-10 !important; + background-color: variables.$black-60; + color: variables.$black-10 !important; font-size: 11px; } .json-view--number { - color: $green-30 !important; + color: variables.$green-30 !important; } .json-view--string { - color: $orange-50 !important; + color: variables.$orange-50 !important; } /* stylelint-enable selector-class-pattern */ diff --git a/src/containers/shared/components/Notification/styles.scss b/src/containers/shared/components/Notification/styles.scss index 9844d2327..ab15372e4 100644 --- a/src/containers/shared/components/Notification/styles.scss +++ b/src/containers/shared/components/Notification/styles.scss @@ -1,57 +1,57 @@ -@import '../../css/variables'; +@use '../../css/variables'; .notification { border: 1px solid; border-radius: 4px; margin: 12px 0; - background: $blue; - color: $white; + background: variables.$blue; + color: variables.$white; font-size: 14px; line-height: 22px; text-align: center; - @include bold; + @include variables.bold; span { padding: 0 22px; } &.primary-theme { - color: $white; + color: variables.$white; &.default { - border-color: $blue; - background: $blue; + border-color: variables.$blue; + background: variables.$blue; } &.success { - border-color: $green; - background: $green; + border-color: variables.$green; + background: variables.$green; } &.warning { - border-color: $orange; - background: $orange; + border-color: variables.$orange; + background: variables.$orange; } &.danger { - border-color: $red; - background: $red-dark; + border-color: variables.$red; + background: variables.$red-dark; } &.dark { - border-color: $black-100; - background: $black-100; + border-color: variables.$black-100; + background: variables.$black-100; } &.dark50 { - border-color: $black-50; - background: $black-50; + border-color: variables.$black-50; + background: variables.$black-50; } &.light { - border-color: $white; - background: $white; - color: $black-100; + border-color: variables.$white; + background: variables.$white; + color: variables.$black-100; } } } diff --git a/src/containers/shared/components/TransactionTable/styles.scss b/src/containers/shared/components/TransactionTable/styles.scss index ad29c981f..78ce97150 100644 --- a/src/containers/shared/components/TransactionTable/styles.scss +++ b/src/containers/shared/components/TransactionTable/styles.scss @@ -1,5 +1,5 @@ @use 'sass:color'; -@import '../../../shared/css/variables'; +@use '../../../shared/css/variables'; .transaction-table { width: 100%; @@ -10,7 +10,7 @@ list-style: none; table-layout: fixed; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 14px; } @@ -18,11 +18,11 @@ display: flex; align-items: stretch; padding: 12px 16px; - color: $white; + color: variables.$white; font-size: 14px; gap: 0 12px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { padding: 12px 32px; } } @@ -38,8 +38,8 @@ .col-type { flex: 2; - @include semibold; - @include for-size(desktop-up) { + @include variables.semibold; + @include variables.for-size(desktop-up) { width: 230px; } } @@ -50,19 +50,19 @@ .col-status { width: 50px; - @include regular; + @include variables.regular; .status { display: none; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { .status { display: initial; } } - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: auto; flex: 2 2; } @@ -73,11 +73,11 @@ flex: 3; .upper & { - color: $black-70; - @include medium; + color: variables.$black-70; + @include variables.medium; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { display: inline-block; } } @@ -85,9 +85,9 @@ .col-date { flex: 3; justify-content: right; - @include medium; + @include variables.medium; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: 185px; // We know the width because dates can only be so big flex: none; } @@ -96,14 +96,14 @@ .details { min-height: 30px; padding: 32px; - background: rgba($black-70, 0.5); - color: $black-40; + background: rgba(variables.$black-70, 0.5); + color: variables.$black-40; font-size: 10px; line-height: 12px; text-transform: uppercase; - @include regular; + @include variables.regular; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { font-size: 12px; } @@ -137,7 +137,7 @@ } .label { - @include bold; + @include variables.bold; } small { @@ -162,11 +162,11 @@ .partial-payment, .closed { - color: $red-dark; + color: variables.$red-dark; } .flag { - color: $blue-purple-30; + color: variables.$blue-purple-30; } .condition, @@ -178,16 +178,16 @@ .transaction-li { position: relative; display: block; - border-bottom: solid 1px $black-70; + border-bottom: solid 1px variables.$black-70; line-height: 20px; .transaction-address { overflow: hidden; - color: $white; + color: variables.$white; text-overflow: ellipsis; } - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { flex-direction: row; padding: 0; } @@ -198,7 +198,7 @@ &:hover { .upper { - background-color: rgba($black-70, 0.7); + background-color: rgba(variables.$black-70, 0.7); } } } @@ -210,7 +210,7 @@ gap: 0 12px; text-transform: uppercase; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { padding: 12px 32px; } @@ -219,15 +219,15 @@ } .col { - color: $black-50; - @include bold; + color: variables.$black-50; + @include variables.bold; } } } .empty-transactions-message { padding: 16px; - color: $black-40; + color: variables.$black-40; font-size: 16px; text-align: center; } @@ -236,5 +236,5 @@ display: block; margin: 10px auto; outline: inherit; - @include bold; + @include variables.bold; } diff --git a/src/containers/shared/css/box.scss b/src/containers/shared/css/box.scss index bbd7ea06b..1090a984f 100644 --- a/src/containers/shared/css/box.scss +++ b/src/containers/shared/css/box.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; .box { border-radius: 4px; @@ -9,13 +9,13 @@ .box-content { padding: 16px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { padding: 24px; } } .box-header { - border-bottom: 1px solid $black-20; + border-bottom: 1px solid variables.$black-20; } .box-header > .icon { @@ -31,7 +31,7 @@ font-size: 12px; line-height: 22px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { font-size: 20px; } } diff --git a/src/containers/shared/css/form.scss b/src/containers/shared/css/form.scss index ee462e9a2..61fe28410 100644 --- a/src/containers/shared/css/form.scss +++ b/src/containers/shared/css/form.scss @@ -1,10 +1,10 @@ -@import './variables'; +@use 'variables'; label { - color: $black-40; + color: variables.$black-40; &.selected { - color: $white; + color: variables.$white; font-weight: bold; } } @@ -16,21 +16,21 @@ label { } input { - border-radius: $border-radius; + border-radius: variables.$border-radius; &[type='text'] { &:hover, &:focus { - background-color: $black-80; + background-color: variables.$black-80; } &:focus { - outline: solid 1px $blue-purple-40 !important; + outline: solid 1px variables.$blue-purple-40 !important; } } &[type='radio'] { height: 16px; - accent-color: $green; + accent-color: variables.$green; } } diff --git a/src/containers/shared/css/global.scss b/src/containers/shared/css/global.scss index 8d7bf9b0d..83a187259 100644 --- a/src/containers/shared/css/global.scss +++ b/src/containers/shared/css/global.scss @@ -1,7 +1,7 @@ // ONLY GLOBAL CSS, KEEP IT TO MINIMAL // CSS SHOULD BE SCOPPED TO COMPONENT -@import './variables'; -@import './form'; +@use 'variables'; +@use 'form'; /** * `current_symbols` is used for currency codes missing from other fonts, currently `u+e900` (XRP) and `u+e901` (BTC). @@ -26,7 +26,7 @@ html { body { height: 100%; - color: $white; + color: variables.$white; } .xrpl-explorer { @@ -43,7 +43,7 @@ body, input { padding: 0px; margin: 0px; - background-color: $black-100; + background-color: variables.$black-100; font-size: 16px; -webkit-font-smoothing: antialiased; font-style: normal; @@ -68,12 +68,12 @@ button { h2 { padding-bottom: 18px; - border-bottom: 1px $black-70 solid; + border-bottom: 1px variables.$black-70 solid; margin-top: 0; - color: $white; + color: variables.$white; font-size: 24px; - @include bold; + @include variables.bold; } svg.react-stockchart { @@ -87,11 +87,11 @@ div.react-stockchart div { .async-component-error { margin: 0px auto; - color: $black-40; + color: variables.$black-40; font-size: 16px; line-height: 24px; text-align: center; - @include bold; + @include variables.bold; } @mixin transaction-category($category, $color, $hover, $background) { @@ -109,27 +109,27 @@ div.react-stockchart div { } } -@include transaction-category(ACCOUNT, $magenta, $magenta-30, $magenta-90); -@include transaction-category(DEX, $blue, $blue-30, $blue-90); -@include transaction-category(PAYMENT, $green, $green-30, $green-90); +@include transaction-category(ACCOUNT, variables.$magenta, variables.$magenta-30, variables.$magenta-90); +@include transaction-category(DEX, variables.$blue, variables.$blue-30, variables.$blue-90); +@include transaction-category(PAYMENT, variables.$green, variables.$green-30, variables.$green-90); @include transaction-category( NFT, - $blue-purple, - $blue-purple-30, - $blue-purple-90 + variables.$blue-purple, + variables.$blue-purple-30, + variables.$blue-purple-90 ); -@include transaction-category(XCHAIN, $yellow, $yellow-30, $yellow-90); -@include transaction-category(PSEUDO, $white, $white, $black-80); -@include transaction-category(UNKNOWN, $black-50, $black-30, $black-90); -@include transaction-category(MPT, $blue, $blue-30, $blue-90); +@include transaction-category(XCHAIN, variables.$yellow, variables.$yellow-30, variables.$yellow-90); +@include transaction-category(PSEUDO, variables.$white, variables.$white, variables.$black-80); +@include transaction-category(UNKNOWN, variables.$black-50, variables.$black-30, variables.$black-90); +@include transaction-category(MPT, variables.$blue, variables.$blue-30, variables.$blue-90); .tx-result { &.success { - color: $green; + color: variables.$green; } &.fail { - color: $orange-40; + color: variables.$orange-40; } } @@ -162,16 +162,16 @@ div.react-stockchart div { .btn { padding: 12px 16px; - border: solid 1px $white; - border-radius: $border-radius; - background: $black; - color: $white; + border: solid 1px variables.$white; + border-radius: variables.$border-radius; + background: variables.$black; + color: variables.$white; cursor: pointer; font-size: 14px; line-height: 21px; &:hover { - background: $black-80; + background: variables.$black-80; } } @@ -179,12 +179,12 @@ a, .btn-link { border: none; background: transparent; - color: $green-30; + color: variables.$green-30; text-decoration: none; &:hover { background: transparent; - color: $green-50; + color: variables.$green-50; } &.external, // Force the external icon. Useful for when the protocol is unknown like with NFTs. @@ -253,30 +253,30 @@ This makes the `mask-overlay` sit on top of the `anchor-mask` and then places an border-radius: 30px; margin-left: 12px; font-size: 14px; - @include bold; + @include variables.bold; } .section { margin: 0 8px; - @include for-size(tablet-landscape-up) { + @include variables.for-size(tablet-landscape-up) { width: calc(100% - 15px); margin: 0 auto; } - @include for-size(big-desktop-up) { - max-width: $desktop-upper-boundary; + @include variables.for-size(big-desktop-up) { + max-width: variables.$desktop-upper-boundary; } } .warning { display: flex; align-items: center; - color: $orange; + color: variables.$orange; font-size: 12px; line-height: 20px; text-transform: uppercase; - @include bold; + @include variables.bold; img { transform: scale(0.5); @@ -285,8 +285,8 @@ This makes the `mask-overlay` sit on top of the `anchor-mask` and then places an // A transactions destination tag. Used like rafdasdfas:424242 .dt { - @include medium; + @include variables.medium; - color: $black-40; + color: variables.$black-40; font-size: 0.9em; } diff --git a/src/containers/shared/css/simpleTab.scss b/src/containers/shared/css/simpleTab.scss index 574f4adda..497247d70 100644 --- a/src/containers/shared/css/simpleTab.scss +++ b/src/containers/shared/css/simpleTab.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; $index-width: 324px; @@ -8,7 +8,7 @@ $index-width: 324px; .index { width: $index-width; padding: 16px; - border-left: 1px solid $black-70; + border-left: 1px solid variables.$black-70; margin-bottom: 60px; margin-left: -1px; @@ -21,7 +21,7 @@ $index-width: 324px; .label { margin-bottom: 0; - color: $black-40; + color: variables.$black-40; font-size: 10px; line-height: 14px; text-transform: uppercase; @@ -29,12 +29,12 @@ $index-width: 324px; .value { overflow: hidden; - color: $white; + color: variables.$white; font-size: 14px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; - @include medium; + @include variables.medium; &.account { font-size: 12px; @@ -49,10 +49,10 @@ $index-width: 324px; font-size: 14px; line-height: 21px; - @include for-size(desktop-up) { + @include variables.for-size(desktop-up) { width: calc(100% - $index-width); padding-right: 0; - border-right: 1px solid $black-70; + border-right: 1px solid variables.$black-70; margin-bottom: 60px; } @@ -71,19 +71,19 @@ $index-width: 324px; flex-wrap: wrap; justify-content: space-between; padding: 15px 0; - border-bottom: 1px solid $black-70; + border-bottom: 1px solid variables.$black-70; gap: 0 5px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { padding: 15px 15px 15px 0; } .label { - color: $white; + color: variables.$white; text-transform: capitalize; &.unauthorize { - color: $red-dark; + color: variables.$red-dark; } } @@ -96,15 +96,15 @@ $index-width: 324px; } .value { - @include medium; + @include variables.medium; - color: $white; + color: variables.$white; vertical-align: middle; word-break: break-word; &.date { - color: $black-60; - @include regular; + color: variables.$black-60; + @include variables.regular; } } } diff --git a/src/containers/shared/css/table.scss b/src/containers/shared/css/table.scss index 53dc1e2df..3c3f66d2c 100644 --- a/src/containers/shared/css/table.scss +++ b/src/containers/shared/css/table.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; table.basic { overflow: hidden; @@ -6,13 +6,13 @@ table.basic { border-top: none; margin: auto; border-collapse: collapse; - color: $white; + color: variables.$white; font-size: 12px; letter-spacing: 0px; text-align: left; tr { - border-bottom: 1px solid $black-70; + border-bottom: 1px solid variables.$black-70; } td, @@ -32,7 +32,7 @@ table.basic { th { padding: 22px 5px; - color: $black-40; + color: variables.$black-40; text-align: left; text-transform: uppercase; } @@ -40,17 +40,17 @@ table.basic { td { padding: 15px 5px; - @include for-size(tablet-portrait-up) { + @include variables.for-size(tablet-portrait-up) { td { padding: 15px 10px; - color: $black-40; + color: variables.$black-40; } } } .empty-message { padding: 16px; - color: $black-40; + color: variables.$black-40; font-size: 16px; text-align: center; } @@ -63,16 +63,16 @@ table.token-table { .col1 { width: 180px; padding-bottom: 8px; - color: $black-40; + color: variables.$black-40; text-transform: uppercase; - @include semibold; + @include variables.semibold; } .col2 { display: inline-block; width: 230px; padding-bottom: 8px; - color: $white; + color: variables.$white; overflow-wrap: break-word; } } diff --git a/src/containers/shared/css/tabs.scss b/src/containers/shared/css/tabs.scss index 379fd220c..0bf207f4d 100644 --- a/src/containers/shared/css/tabs.scss +++ b/src/containers/shared/css/tabs.scss @@ -1,7 +1,7 @@ -@import './variables'; +@use 'variables'; .tabs { - border-top: 1px solid $black-70; + border-top: 1px solid variables.$black-70; margin: 8px auto 40px; font-size: 14px; @@ -13,20 +13,20 @@ display: inline-block; padding: 24px 24px 0; border-top: 2px solid transparent; - color: $black-40; + color: variables.$black-40; cursor: pointer; text-align: center; &:hover, &:focus { - color: $white; - @include bold; + color: variables.$white; + @include variables.bold; } &.selected { - border-top: 2px solid $white; - color: $white; - @include bold; + border-top: 2px solid variables.$white; + color: variables.$white; + @include variables.bold; } } } diff --git a/src/containers/shared/css/tooltip.scss b/src/containers/shared/css/tooltip.scss index a1c6d5e4b..e178289e0 100644 --- a/src/containers/shared/css/tooltip.scss +++ b/src/containers/shared/css/tooltip.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; .tooltip { position: absolute; @@ -9,7 +9,7 @@ color: white; font-size: 13px; line-height: 16px; - @include medium; + @include variables.medium; img { height: 16px; @@ -24,7 +24,7 @@ .pubkey { overflow: hidden; max-width: 100px; - color: $black-10; + color: variables.$black-10; font-size: 10px; letter-spacing: 0; text-overflow: ellipsis; @@ -32,12 +32,12 @@ } .time { - color: $black-40; + color: variables.$black-40; letter-spacing: 0; } .unl { - color: $green; + color: variables.$green; } .tx-status::before { @@ -45,7 +45,7 @@ } .account { - color: $black-50; + color: variables.$black-50; font-size: 10px; } diff --git a/src/containers/shared/css/txlabel.scss b/src/containers/shared/css/txlabel.scss index 093f8300c..f068ab313 100644 --- a/src/containers/shared/css/txlabel.scss +++ b/src/containers/shared/css/txlabel.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; .tx-label { display: inline-flex; @@ -9,10 +9,10 @@ border-radius: 100px; font-size: 14px; line-height: 1; - @include semibold; + @include variables.semibold; .tx-type-name { - color: $white; + color: variables.$white; letter-spacing: 0; text-transform: uppercase; @extend %truncate; diff --git a/src/containers/shared/css/txstatus.scss b/src/containers/shared/css/txstatus.scss index 0a447f246..263ad438c 100644 --- a/src/containers/shared/css/txstatus.scss +++ b/src/containers/shared/css/txstatus.scss @@ -1,4 +1,4 @@ -@import './variables'; +@use 'variables'; .tx-status { display: inline-flex; From a7cf113622333be4e205dd6493bca5a5cdd2e363 Mon Sep 17 00:00:00 2001 From: Ashray Chowdhry Date: Tue, 12 Nov 2024 12:13:35 -0500 Subject: [PATCH 3/4] remove variable object import for simplicity --- .../BalanceSelector/balance-selector.scss | 6 +- .../Accounts/AccountHeader/styles.scss | 84 +++++++++---------- src/containers/Amendment/amendment.scss | 30 +++---- .../Amendments/amendmentsTable.scss | 40 ++++----- src/containers/App/app.scss | 8 +- src/containers/CustomNetworkHome/index.scss | 36 ++++---- src/containers/Footer/footer.scss | 20 ++--- .../Header/LanguagePicker/LanguagePicker.scss | 4 +- .../Header/NavigationMenu/NavigationMenu.scss | 14 ++-- .../Header/NetworkPicker/NetworkPicker.scss | 16 ++-- src/containers/Header/header.scss | 4 +- src/containers/Header/search.scss | 12 +-- src/containers/Ledger/ledger.scss | 62 +++++++------- src/containers/Ledgers/css/ledgerMetrics.scss | 30 +++---- src/containers/Ledgers/css/ledgers.scss | 58 ++++++------- src/containers/Ledgers/css/legend.scss | 4 +- src/containers/MPT/MPTHeader/styles.scss | 34 ++++---- src/containers/NFT/NFTHeader/styles.scss | 34 ++++---- src/containers/NFT/NFTTabs/styles.scss | 18 ++-- src/containers/Network/css/barchart.scss | 24 +++--- src/containers/Network/css/hexagons.scss | 10 +-- src/containers/Network/css/map.scss | 8 +- src/containers/Network/css/nodesTable.scss | 34 ++++---- src/containers/Network/css/style.scss | 6 +- .../Network/css/validatorsTable.scss | 24 +++--- src/containers/NoMatch/nomatch.scss | 16 ++-- .../PayStrings/PayStringHeader/styles.scss | 8 +- .../PayStringMappingsTable/styles.scss | 14 ++-- src/containers/PayStrings/styles.scss | 6 +- src/containers/Token/DEXPairs/styles.scss | 28 +++---- src/containers/Token/TokenHeader/styles.scss | 56 ++++++------- .../Transactions/DetailTab/detailTab.scss | 40 ++++----- src/containers/Transactions/simpleTab.scss | 30 +++---- src/containers/Transactions/transaction.scss | 18 ++-- src/containers/Validators/historyTab.scss | 38 ++++----- src/containers/Validators/validator.scss | 38 ++++----- src/containers/Validators/votingTab.scss | 14 ++-- .../shared/components/Dropdown/dropdown.scss | 20 ++--- .../shared/components/JsonView/json-view.scss | 22 ++--- .../components/Notification/styles.scss | 40 ++++----- .../components/TransactionTable/styles.scss | 60 ++++++------- src/containers/shared/css/box.scss | 8 +- src/containers/shared/css/form.scss | 14 ++-- src/containers/shared/css/global.scss | 70 ++++++++-------- src/containers/shared/css/simpleTab.scss | 30 +++---- src/containers/shared/css/table.scss | 20 ++--- src/containers/shared/css/tabs.scss | 16 ++-- src/containers/shared/css/tooltip.scss | 12 +-- src/containers/shared/css/txlabel.scss | 6 +- 49 files changed, 622 insertions(+), 622 deletions(-) diff --git a/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss b/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss index e01cf8a7d..30860340e 100644 --- a/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss +++ b/src/containers/Accounts/AccountHeader/BalanceSelector/balance-selector.scss @@ -1,11 +1,11 @@ -@use 'src/containers/shared/css/variables'; +@use 'src/containers/shared/css/variables' as *; .balance-selector { position: relative; display: block; width: 100%; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 280px; } @@ -27,6 +27,6 @@ .total-balance { margin-left: auto; - color: variables.$black-40; + color: $black-40; } } diff --git a/src/containers/Accounts/AccountHeader/styles.scss b/src/containers/Accounts/AccountHeader/styles.scss index a63b849dc..d76a9033d 100644 --- a/src/containers/Accounts/AccountHeader/styles.scss +++ b/src/containers/Accounts/AccountHeader/styles.scss @@ -1,14 +1,14 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .account-header { margin-bottom: 16px; .title { padding-bottom: 4px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .box-header { @@ -27,23 +27,23 @@ } .badge { - border: 1px solid variables.$yellow-50; - background: variables.$yellow-50; - box-shadow: 0 1px 1px variables.$yellow-80; - color: variables.$black; + border: 1px solid $yellow-50; + background: $yellow-50; + box-shadow: 0 1px 1px $yellow-80; + color: $black; } .classic { margin: 0; - color: variables.$white; + color: $white; font-size: 20px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 24px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 36px; } } @@ -53,19 +53,19 @@ padding: 5px; border-width: thin; border-style: solid; - border-color: variables.$black-70; + border-color: $black-70; margin: 0; margin-left: 12px; - color: variables.$white; + color: $white; font-size: 16px; text-transform: none; - @include variables.semibold; + @include semibold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 10px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 20px; } } @@ -75,15 +75,15 @@ padding-right: 10px; border-bottom: none; margin: 0; - color: variables.$white; + color: $white; font-size: 18px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 10px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 23px; } } @@ -91,15 +91,15 @@ .x-address { margin: 0; - color: variables.$white; + color: $white; font-size: 14px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 18px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 36px; } } @@ -115,7 +115,7 @@ justify-content: space-between; margin-top: 68px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -125,19 +125,19 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: variables.$white; + color: $white; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } .value { - color: variables.$white; + color: $white; font-size: 18px; line-height: 22.5px; text-decoration: none; - @include variables.bold; + @include bold; } } } @@ -147,7 +147,7 @@ flex-direction: column; gap: 16px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; } } @@ -157,7 +157,7 @@ width: 100%; vertical-align: top; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 50%; &.first { @@ -174,17 +174,17 @@ padding: 0; margin-bottom: 20px; font-size: 12px; - @include variables.bold; + @include bold; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { border: none; } .label { - color: variables.$black-40; + color: $black-40; text-align: left; text-transform: uppercase; - @include variables.medium; + @include medium; } ul { @@ -201,18 +201,18 @@ display: inline-block; text-transform: none; vertical-align: middle; - @include variables.medium; + @include medium; @extend %truncate; } b { - color: variables.$white; + color: $white; word-break: break-all; - @include variables.bold; + @include bold; } &.flags { - color: variables.$blue-purple-30; + color: $blue-purple-30; font-style: italic; } } @@ -247,11 +247,11 @@ &.balance { .value { margin: -4px 0 5px -0.1em; - color: variables.$white; + color: $white; font-size: 26px; line-height: 30px; - @include variables.regular; - @include variables.for-size(desktop-up) { + @include regular; + @include for-size(desktop-up) { font-size: 30px; line-height: 34px; } diff --git a/src/containers/Amendment/amendment.scss b/src/containers/Amendment/amendment.scss index 0e7f78815..2dd439d43 100644 --- a/src/containers/Amendment/amendment.scss +++ b/src/containers/Amendment/amendment.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; @use '../shared/css/table'; .amendment-summary { @@ -14,16 +14,16 @@ display: inline-block; margin-top: 80px; margin-bottom: 32px; - color: variables.$white; + color: $white; font-size: 32px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { margin-top: 120px; margin-bottom: 64px; font-size: 42px; } - @include variables.bold; + @include bold; } .rows { @@ -42,20 +42,20 @@ .badge { max-width: fit-content; margin: 0; - color: variables.$black-100 !important; + color: $black-100 !important; text-transform: capitalize; &.voting { - background-color: variables.$black-30; + background-color: $black-30; } &.enabled { - background-color: variables.$green-60; + background-color: $green-60; } &.consensus { margin-top: 6px; - background-color: variables.$yellow-50; + background-color: $yellow-50; font-weight: 700 !important; } } @@ -63,7 +63,7 @@ .value { &.eta { &.no{ - color: variables.$yellow-50 !important; + color: $yellow-50 !important; } } } @@ -72,7 +72,7 @@ .unl { display: inline-block; margin: 0 10px; - color: variables.$green-40; + color: $green-40; vertical-align: middle; } } @@ -84,14 +84,14 @@ .votes-columns { margin: 48px 0; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { display: grid; gap: 48px; grid-template-columns: repeat(2, 1fr); } .label { - @include variables.bold; + @include bold; margin-bottom: 24px; font-size: 24px; @@ -105,13 +105,13 @@ margin-top: 24px; .vals { - background: variables.$black-80; + background: $black-80; .row { display: flex; overflow: hidden; padding: 16px; - border-bottom: 1px solid variables.$black-70; + border-bottom: 1px solid $black-70; white-space: nowrap; .val { @@ -124,7 +124,7 @@ .unl { margin-left: 8px; - color: variables.$green-40; + color: $green-40; } .index { diff --git a/src/containers/Amendments/amendmentsTable.scss b/src/containers/Amendments/amendmentsTable.scss index 6fb049f6e..15805be26 100644 --- a/src/containers/Amendments/amendmentsTable.scss +++ b/src/containers/Amendments/amendmentsTable.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; @use '../shared/css/table'; .amendments-page{ @@ -6,21 +6,21 @@ padding: 0 16px; margin-top: 100px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { padding: 0; } .type { display: inline-block; padding-bottom: 24px; - color: variables.$white; + color: $white; font-size: 32px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { font-size: 42px; } - @include variables.bold; + @include bold; } } @@ -38,7 +38,7 @@ table { .incoming { - background: rgba(variables.$green-90, 0.7); + background: rgba($green-90, 0.7); } .eta-label { @@ -49,11 +49,11 @@ .name { max-width: 120px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 180px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { max-width: 280px; } } @@ -62,7 +62,7 @@ display: none; max-width: 120px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { display: table-cell; padding-right: 3%; } @@ -74,7 +74,7 @@ align-items: center; gap: 6px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { gap: 12px; } @@ -93,9 +93,9 @@ text-transform: uppercase; &.badge { - border: 1px solid variables.$black-30; - background-color: variables.$black-80; - color: variables.$black-30; + border: 1px solid $black-30; + background-color: $black-80; + color: $black-30; } } } @@ -103,7 +103,7 @@ .version, .enabled, .consensus { max-width: 70px; overflow-wrap: break-word; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 100px; } } @@ -111,21 +111,21 @@ .badge { margin: 0; - color: variables.$black-100; + color: $black-100; text-transform: uppercase; &.yes { - background-color: variables.$green-60; + background-color: $green-60; } &.no { - background-color: variables.$black-30; + background-color: $black-30; } } .voting { margin-left: 0; - color: variables.$yellow-50; + color: $yellow-50; } .voters, @@ -133,7 +133,7 @@ display: none; max-width: 70px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { display: table-cell; } } @@ -141,7 +141,7 @@ .count { display: none; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { display: table-cell; } } diff --git a/src/containers/App/app.scss b/src/containers/App/app.scss index 6d8f8127d..aa0fe1b4d 100644 --- a/src/containers/App/app.scss +++ b/src/containers/App/app.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .app { flex-grow: 1; @@ -12,13 +12,13 @@ justify-content: center; margin-bottom: 50px; - @include variables.for-size(desktop-up) { - min-height: variables.$min-height; + @include for-size(desktop-up) { + min-height: $min-height; } } .content, .footer { - min-width: variables.$min-width; + min-width: $min-width; } } diff --git a/src/containers/CustomNetworkHome/index.scss b/src/containers/CustomNetworkHome/index.scss index 3ec070ada..180e748a3 100644 --- a/src/containers/CustomNetworkHome/index.scss +++ b/src/containers/CustomNetworkHome/index.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .app { position: relative; @@ -6,7 +6,7 @@ .custom-network-main-page { position: relative; min-height: 600px; - color: variables.$white; + color: $white; .logo-content { display: flex; @@ -19,12 +19,12 @@ .custom-network-logo { display: none; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: inherit; height: auto; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 280px; } @@ -36,13 +36,13 @@ .page-header { margin-top: -20px; font-size: 20px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 24px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 42px; } } @@ -60,31 +60,31 @@ border: none; border-radius: 100px; margin: 10px 16px; - background-color: variables.$black-80; - color: variables.$white; + background-color: $black-80; + color: $white; font-size: 16px; letter-spacing: 0.01em; line-height: 24px; &::placeholder { overflow: visible; - color: variables.$black-40; + color: $black-40; } } .custom-network-input-button { box-sizing: border-box; padding: 8px 16px; - border: 1px solid variables.$custom; + border: 1px solid $custom; border-radius: 100px; margin: 16px; - color: variables.$custom; + color: $custom; font-size: 14px; &:hover, &:focus { - border: 1px solid variables.$white; - color: variables.$white; + border: 1px solid $white; + color: $white; cursor: pointer; } } @@ -102,9 +102,9 @@ .custom-network-header { padding-bottom: 24px; - border-bottom: 1px solid variables.$black-80; + border-bottom: 1px solid $black-80; font-size: 20px; - @include variables.bold; + @include bold; } .custom-network-item { @@ -112,14 +112,14 @@ flex-direction: row; justify-content: space-between; padding: 24px 0; - border-bottom: 1px solid variables.$black-80; + border-bottom: 1px solid $black-80; color: inherit; font-size: 16px; text-decoration: none; &:hover, &:focus { - color: variables.$custom; + color: $custom; cursor: pointer; } diff --git a/src/containers/Footer/footer.scss b/src/containers/Footer/footer.scss index 35ac6b6e3..fdee0125e 100644 --- a/src/containers/Footer/footer.scss +++ b/src/containers/Footer/footer.scss @@ -1,11 +1,11 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .footer { position: relative; display: flex; flex-direction: column; justify-content: space-around; - border-top: 1px solid variables.$black-80; + border-top: 1px solid $black-80; margin: 0 10%; .footer-links { @@ -13,7 +13,7 @@ flex-direction: column; justify-content: space-around; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { flex-direction: row; } } @@ -24,7 +24,7 @@ .footer-section-header { margin-bottom: 24px; - color: variables.$white; + color: $white; font-size: 16px; font-style: normal; font-weight: 700; @@ -55,11 +55,11 @@ .logo { margin-bottom: 11px; - color: variables.$white; + color: $white; font-size: 14px; - @include variables.regular; + @include regular; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { display: inline-block; } @@ -77,11 +77,11 @@ .copyright { margin-top: 20px; - color: variables.$black-40; + color: $black-40; font-size: 12px; - @include variables.medium; + @include medium; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 320px; margin-top: 8px; clear: right; diff --git a/src/containers/Header/LanguagePicker/LanguagePicker.scss b/src/containers/Header/LanguagePicker/LanguagePicker.scss index 2b948d309..5cc3a89fe 100644 --- a/src/containers/Header/LanguagePicker/LanguagePicker.scss +++ b/src/containers/Header/LanguagePicker/LanguagePicker.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .language-picker { margin-left: auto; @@ -8,6 +8,6 @@ } .arrow { - color: variables.$blue-purple-40; + color: $blue-purple-40; } } diff --git a/src/containers/Header/NavigationMenu/NavigationMenu.scss b/src/containers/Header/NavigationMenu/NavigationMenu.scss index 005e6333f..f94c69c6d 100644 --- a/src/containers/Header/NavigationMenu/NavigationMenu.scss +++ b/src/containers/Header/NavigationMenu/NavigationMenu.scss @@ -1,6 +1,6 @@ @use 'sass:math'; -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; $menu-toggle-size: 25px; $menu-toggle-line-spacing: math.div($menu-toggle-size, 4); @@ -46,7 +46,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } .nav-link { - color: variables.$white; + color: $white; font-size: 14px; } @@ -129,7 +129,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } // Prevents navigation from keeping styles when menu is opened on mobile sizes and then resized larger -@media (max-width: variables.$tablet-landscape-upper-boundary) { +@media (max-width: $tablet-landscape-upper-boundary) { .navbar-collapse { max-height: 100%; margin-top: 24px; @@ -176,7 +176,7 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; } /* Responsiveness */ -@media (min-width: variables.$tablet-landscape-upper-boundary) { +@media (min-width: $tablet-landscape-upper-boundary) { .navbar { flex-wrap: nowrap; margin: 0 auto; @@ -214,14 +214,14 @@ $menu-toggle-line-length: $menu-toggle-size - $menu-toggle-line-spacing; height: 6px; border-radius: 100%; margin-left: 50%; - background-color: variables.$green; + background-color: $green; } :hover { - color: variables.$white; + color: $white; } :focus { - color: variables.$white; + color: $white; } } diff --git a/src/containers/Header/NetworkPicker/NetworkPicker.scss b/src/containers/Header/NetworkPicker/NetworkPicker.scss index cd025e965..d905c3361 100644 --- a/src/containers/Header/NetworkPicker/NetworkPicker.scss +++ b/src/containers/Header/NetworkPicker/NetworkPicker.scss @@ -1,10 +1,10 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @mixin dropdown-network-item( $background, $background-hover: $background, $border: $background, - $color: variables.$black + $color: $black ) { .dropdown-toggle { border-color: $border; @@ -39,28 +39,28 @@ } &.network-mainnet { - @include dropdown-network-item(variables.$white, variables.$black-20); + @include dropdown-network-item($white, $black-20); } &.network-testnet { - @include dropdown-network-item(variables.$testnet, variables.$orange-60); + @include dropdown-network-item($testnet, $orange-60); } &.network-devnet { - @include dropdown-network-item(variables.$devnet, variables.$blue-purple-40); + @include dropdown-network-item($devnet, $blue-purple-40); } /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */ &.network-xahau_mainnet { - @include dropdown-network-item(variables.$xahau-mainnet, variables.$green-50); + @include dropdown-network-item($xahau-mainnet, $green-50); } /* stylelint-disable-next-line selector-class-pattern -- needed here for variables */ &.network-xahau_testnet { - @include dropdown-network-item(variables.$xahau-testnet, variables.$magenta-40); + @include dropdown-network-item($xahau-testnet, $magenta-40); } &.network-custom { - @include dropdown-network-item(variables.$custom, variables.$yellow-60); + @include dropdown-network-item($custom, $yellow-60); } } diff --git a/src/containers/Header/header.scss b/src/containers/Header/header.scss index 47dfe0734..06704d86e 100644 --- a/src/containers/Header/header.scss +++ b/src/containers/Header/header.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; /* Header */ .header { @@ -9,7 +9,7 @@ width: 100%; flex-direction: column; padding: 16px; - background: variables.$black; + background: $black; gap: 8px; .topbar { diff --git a/src/containers/Header/search.scss b/src/containers/Header/search.scss index f16689b2f..b599fd295 100644 --- a/src/containers/Header/search.scss +++ b/src/containers/Header/search.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .search-container { position: relative; @@ -11,18 +11,18 @@ input { width: 100%; padding: 8px 16px 8px 42px; - border: 1px solid variables.$black-50; - background: variables.$black url('../shared/images/search.svg') no-repeat 16px center; + border: 1px solid $black-50; + background: $black url('../shared/images/search.svg') no-repeat 16px center; background-size: 12px; - color: variables.$white; + color: $white; font-size: 14px; line-height: 24px; text-align: left; text-overflow: ellipsis; - @include variables.regular; + @include regular; &::placeholder { - color: variables.$white; + color: $white; } } } diff --git a/src/containers/Ledger/ledger.scss b/src/containers/Ledger/ledger.scss index 65b8f340e..990f1e4e3 100644 --- a/src/containers/Ledger/ledger.scss +++ b/src/containers/Ledger/ledger.scss @@ -1,15 +1,15 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .ledger-page { margin: 0 auto; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 600px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 772px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 864px; } @@ -21,7 +21,7 @@ padding: 8px 4px; margin-top: 40px; margin-bottom: 60px; - color: variables.$black-40; + color: $black-40; font-size: 12px; letter-spacing: 0px; line-height: 15px; @@ -29,12 +29,12 @@ svg { position: relative; height: 8px; - color: variables.$black-40; + color: $black-40; } .previous { padding: 6px 16px; - border: 1px solid variables.$black-40; + border: 1px solid $black-40; border-radius: 100px; float: left; @@ -44,13 +44,13 @@ &:focus, &:hover { - background-color: variables.$black-70; + background-color: $black-70; } } .next { padding: 6px 16px; - border: 1px solid variables.$black-40; + border: 1px solid $black-40; border-radius: 100px; float: right; @@ -60,7 +60,7 @@ &:focus, &:hover { - background-color: variables.$black-70; + background-color: $black-70; } } } @@ -72,7 +72,7 @@ overflow: hidden; padding: 10px 8px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { padding: 10px 0px; } @@ -81,7 +81,7 @@ overflow: hidden; padding-top: 48px; margin: auto; - color: variables.$black-30; + color: $black-30; font-size: 12px; line-height: 18px; text-align: center; @@ -90,20 +90,20 @@ } .closed-date { - color: variables.$black-30; + color: $black-30; font-size: 10px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { float: right; } } .ledger-hash { - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { float: left; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { font-size: 12px; } } @@ -113,22 +113,22 @@ overflow: hidden; .title { - color: variables.$black-40; + color: $black-40; font-size: 10px; letter-spacing: 0px; line-height: 18px; text-transform: uppercase; - @include variables.medium; + @include medium; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 10px; line-height: 20px; } } .value { - color: variables.$white; - @include variables.bold; + color: $white; + @include bold; } .ledger-cols { @@ -144,12 +144,12 @@ text-align: left; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: auto; margin-right: 0px; margin-left: 40px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { margin-right: 0px; margin-left: 40px; } @@ -159,7 +159,7 @@ font-size: 18px; line-height: 28px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { margin-top: -8px; font-size: 18px; line-height: 36px; @@ -188,7 +188,7 @@ .col-type { width: 175px; - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 210px; } } @@ -197,7 +197,7 @@ display: block; text-align: right; // on mobile it is the last column - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { text-align: left; } } @@ -205,12 +205,12 @@ .col-sequence { display: none; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: inline-block; width: 85px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 100px; } } @@ -219,7 +219,7 @@ display: none; text-align: right; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { display: inline-block; width: 100px; } @@ -229,14 +229,14 @@ .col-account { font-size: 10px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { font-size: 12px; } } .col-sequence, .col-fee { - color: variables.$black-40; + color: $black-40; } } } diff --git a/src/containers/Ledgers/css/ledgerMetrics.scss b/src/containers/Ledgers/css/ledgerMetrics.scss index 26ca41acc..23938904b 100644 --- a/src/containers/Ledgers/css/ledgerMetrics.scss +++ b/src/containers/Ledgers/css/ledgerMetrics.scss @@ -1,11 +1,11 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .metrics { overflow: hidden; padding: 10px 20px; text-align: center; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: calc(100% - 124px); justify-content: space-between; padding: 0px 12px; @@ -15,17 +15,17 @@ .cell { display: inline-block; width: 100%; - color: variables.$white; + color: $white; font-size: 16px; text-align: center; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: auto; min-width: 100px; margin: 15px 5px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { min-width: 160px; margin: 15px 5px; font-size: 18px; @@ -33,23 +33,23 @@ text-align: right; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { margin: 20px 30px; } .label { display: inline-block; overflow: hidden; - color: variables.$black-40; + color: $black-40; float: left; font-size: 12px; line-height: 25px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; - @include variables.semibold; + @include semibold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: block; float: none; font-size: 10px; @@ -65,9 +65,9 @@ display: inline-block; float: right; letter-spacing: 0px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: block; float: none; } @@ -88,13 +88,13 @@ height: 40px; flex-direction: row; align-items: center; - color: variables.$white; + color: $white; cursor: pointer; float: left; font-size: 10px; text-align: left; text-transform: uppercase; - @include variables.medium; + @include medium; .icon { width: 40px; @@ -104,7 +104,7 @@ } &:hover { - color: variables.$black-30; + color: $black-30; } } } @@ -113,7 +113,7 @@ display: flex; flex-direction: column; align-content: center; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { flex-direction: row; } } diff --git a/src/containers/Ledgers/css/ledgers.scss b/src/containers/Ledgers/css/ledgers.scss index 65233bbb1..0ae1812cc 100644 --- a/src/containers/Ledgers/css/ledgers.scss +++ b/src/containers/Ledgers/css/ledgers.scss @@ -1,7 +1,7 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; $ledgers-margin-large: 32px; -$ledgers-border: 1px solid variables.$black-70; +$ledgers-border: 1px solid $black-70; $ledger-width: 196px; .ledgers-page { @@ -28,7 +28,7 @@ $ledger-width: 196px; line-height: 14px; text-align: right; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: calc(100% - 80px); padding: 4px 40px; } @@ -49,7 +49,7 @@ $ledger-width: 196px; &.domain { max-width: calc(70% - 5px); font-size: 14px; - @include variables.medium; + @include medium; } &.pubkey { @@ -59,7 +59,7 @@ $ledger-width: 196px; letter-spacing: 0; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { &.domain { max-width: calc(50% - 5px); } @@ -126,16 +126,16 @@ $ledger-width: 196px; padding: $ledgers-margin-large; border: $ledgers-border; border-bottom: 0; - color: variables.$black-40; + color: $black-40; font-size: 10px; line-height: 12px; text-align: center; text-transform: uppercase; - @include variables.bold; + @include bold; .close-time { padding-bottom: 24px; - color: variables.$black-40; + color: $black-40; font-size: 10px; } @@ -150,15 +150,15 @@ $ledger-width: 196px; } b { - color: variables.$white; + color: $white; font-size: 10px; text-align: end; - @include variables.medium; + @include medium; } .ledger-index { padding-bottom: 3px; - color: variables.$white; + color: $white; font-size: 14px; font-weight: 700; line-height: 16px; @@ -171,12 +171,12 @@ $ledger-width: 196px; } a:hover { - background: variables.$black-70; + background: $black-70; } &.flag-ledger a { - background: variables.$black-70; - color: variables.$white; + background: $black-70; + color: $white; } } @@ -226,10 +226,10 @@ $ledger-width: 196px; .hash { overflow: hidden; padding: 0 32px 32px; - border: 1px solid variables.$black-60; + border: 1px solid $black-60; border-top: 0; - background: rgba(variables.$black-80, 0.7); - color: variables.$white; + background: rgba($black-80, 0.7); + color: $white; font-size: 15px; text-align: left; @@ -242,7 +242,7 @@ $ledger-width: 196px; opacity: 0.5; .bar { - background: variables.$black-20 !important; + background: $black-20 !important; } } @@ -252,9 +252,9 @@ $ledger-width: 196px; .hash-concat { padding-top: 32px; - color: variables.$white; + color: $white; font-size: 14px; - @include variables.bold; + @include bold; } .subtitle { @@ -263,11 +263,11 @@ $ledger-width: 196px; flex-direction: column; padding-top: 24px; padding-bottom: 32px; - color: variables.$black-40; + color: $black-40; font-size: 10px; line-height: 14px; text-transform: uppercase; - @include variables.bold; + @include bold; } .validation-total { @@ -276,7 +276,7 @@ $ledger-width: 196px; } .subtitle b { - color: variables.$white; + color: $white; font-size: 11px; } @@ -293,14 +293,14 @@ $ledger-width: 196px; .subtitle span.missed b { border-radius: 2px; - background: variables.$orange-50; + background: $orange-50; color: white; } .validated { display: inline-block; height: 26px; - color: variables.$green; + color: $green; text-align: center; vertical-align: middle; } @@ -324,7 +324,7 @@ $ledger-width: 196px; .validation { height: 4px; border-radius: 4px; - background: variables.$black-50; + background: $black-50; cursor: pointer; opacity: 0.85; } @@ -334,11 +334,11 @@ $ledger-width: 196px; } .validation.trusted { - background: variables.$white; + background: $white; } .validation.selected { - background: variables.$green; + background: $green; opacity: 1; } @@ -349,7 +349,7 @@ $ledger-width: 196px; .partial { width: 50%; height: 100%; - background: variables.$red; + background: $red; } } } diff --git a/src/containers/Ledgers/css/legend.scss b/src/containers/Ledgers/css/legend.scss index b89bca499..20db2f293 100644 --- a/src/containers/Ledgers/css/legend.scss +++ b/src/containers/Ledgers/css/legend.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .legend { display: flex; @@ -33,7 +33,7 @@ flex-flow: column wrap; gap: 16px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; } } diff --git a/src/containers/MPT/MPTHeader/styles.scss b/src/containers/MPT/MPTHeader/styles.scss index 074ceb533..8a7715c88 100644 --- a/src/containers/MPT/MPTHeader/styles.scss +++ b/src/containers/MPT/MPTHeader/styles.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @use '../../shared/css/table'; .mpt-header-container { @@ -7,14 +7,14 @@ flex-direction: column; padding-top: 64px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 490px; } @@ -25,7 +25,7 @@ .settings { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 650px; } } @@ -37,7 +37,7 @@ justify-content: space-between; margin-top: 68px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -47,9 +47,9 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: variables.$white; + color: $white; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } @@ -57,10 +57,10 @@ .title { padding-bottom: 4px; margin-bottom: 4.5px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .value { @@ -68,13 +68,13 @@ .mpt-issuer { margin: auto; - color: variables.$white; + color: $white; font-size: 18px; font-style: normal; line-height: 125%; text-align: right; text-decoration: none; - @include variables.bold; + @include bold; } .copy { @@ -109,11 +109,11 @@ padding-top: 0; margin-top: 0; margin-bottom: 0; - color: variables.$white; + color: $white; font-size: 24px; text-overflow: ellipsis; white-space: nowrap; - @include variables.bold; + @include bold; } .token-title { @@ -121,15 +121,15 @@ flex-direction: row; align-items: center; padding-bottom: 4px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; .badge { - background: variables.$mpt; - color: variables.$white; + background: $mpt; + color: $white; } } diff --git a/src/containers/NFT/NFTHeader/styles.scss b/src/containers/NFT/NFTHeader/styles.scss index 46145fc7e..30c3519ee 100644 --- a/src/containers/NFT/NFTHeader/styles.scss +++ b/src/containers/NFT/NFTHeader/styles.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @use '../../shared/css/table'; .nft-header-container { @@ -7,21 +7,21 @@ flex-direction: column; padding-top: 64px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 490px; } } .settings { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 650px; } } @@ -33,7 +33,7 @@ justify-content: space-between; margin-top: 68px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -43,9 +43,9 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: variables.$white; + color: $white; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: column; margin-bottom: 0; } @@ -53,10 +53,10 @@ .title { padding-bottom: 4px; margin-bottom: 4.5px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .value { @@ -64,13 +64,13 @@ .nft-issuer { margin: auto; - color: variables.$white; + color: $white; font-size: 18px; font-style: normal; line-height: 125%; text-align: right; text-decoration: none; - @include variables.bold; + @include bold; } .copy { @@ -105,11 +105,11 @@ padding-top: 0; margin-top: 0; margin-bottom: 0; - color: variables.$white; + color: $white; font-size: 24px; text-overflow: ellipsis; white-space: nowrap; - @include variables.bold; + @include bold; } .token-title { @@ -117,15 +117,15 @@ flex-direction: row; align-items: center; padding-bottom: 4px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; .badge { - background: variables.$nft; - color: variables.$white; + background: $nft; + color: $white; } } diff --git a/src/containers/NFT/NFTTabs/styles.scss b/src/containers/NFT/NFTTabs/styles.scss index efca4a46c..6c68075a4 100644 --- a/src/containers/NFT/NFTTabs/styles.scss +++ b/src/containers/NFT/NFTTabs/styles.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @use '../../shared/css/table'; .nft-tabs { @@ -11,7 +11,7 @@ table { .no-info-panel { - color: variables.$black-40; + color: $black-40; font-size: 14px; font-weight: 400; line-height: 150%; @@ -33,11 +33,11 @@ width: 55%; padding-left: 32px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 140px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { max-width: 180px; } } @@ -46,7 +46,7 @@ display: table-cell; width: 15%; padding-right: 32px; - @include variables.medium; + @include medium; span.amount { padding: 0; @@ -57,16 +57,16 @@ display: table-cell; width: 30%; min-width: 0; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 80px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { max-width: 120px; } - @include variables.medium; + @include medium; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { .offer-id { display: table-cell; } diff --git a/src/containers/Network/css/barchart.scss b/src/containers/Network/css/barchart.scss index d17166692..48a3fddb2 100644 --- a/src/containers/Network/css/barchart.scss +++ b/src/containers/Network/css/barchart.scss @@ -1,7 +1,7 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .y-label { - fill: variables.$black-40; + fill: $black-40; } .barchart { @@ -12,7 +12,7 @@ p, span { - color: variables.$black-40; + color: $black-40; line-height: 70%; } } @@ -21,7 +21,7 @@ margin: 10px; p { - color: variables.$white; + color: $white; } } @@ -41,19 +41,19 @@ .icon { &.vals { - background-color: variables.$green-50; + background-color: $green-50; } &.nodes { - background-color: variables.$blue-purple-50; + background-color: $blue-purple-50; } &.yea { - background-color: variables.$green-50; + background-color: $green-50; } &.nay { - background-color: variables.$magenta-70; + background-color: $magenta-70; } width: 16px; @@ -62,7 +62,7 @@ } .text { - color: variables.$white; + color: $white; text-transform: capitalize; } } @@ -70,12 +70,12 @@ .legend-stable { padding: 16px; - border-radius: variables.$border-radius; + border-radius: $border-radius; margin-left: auto; - background-color: variables.$black-70; + background-color: $black-70; .stable { - color: variables.$black-0; + color: $black-0; font-weight: 700; } } diff --git a/src/containers/Network/css/hexagons.scss b/src/containers/Network/css/hexagons.scss index f005f6fbe..08413b393 100644 --- a/src/containers/Network/css/hexagons.scss +++ b/src/containers/Network/css/hexagons.scss @@ -1,18 +1,18 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .validators-container { .validators { position: relative; - background: variables.$black-80; + background: $black-80; svg { display: block; - filter: drop-shadow(0px 0px 2px variables.$black-70); + filter: drop-shadow(0px 0px 2px $black-70); } .mesh path { fill: none; - stroke: variables.$black; + stroke: $black; } .hexagons { @@ -24,7 +24,7 @@ fill-opacity: 0.8; stroke-opacity: 1; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { cursor: auto; } } diff --git a/src/containers/Network/css/map.scss b/src/containers/Network/css/map.scss index eda0803e7..ff58dd19e 100644 --- a/src/containers/Network/css/map.scss +++ b/src/containers/Network/css/map.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .nodes-map { position: relative; @@ -8,7 +8,7 @@ margin: auto; .country { - fill: variables.$black-40; + fill: $black-40; opacity: 0.2; } @@ -23,9 +23,9 @@ .legend { text { - fill: variables.$black-40; + fill: $black-40; font-size: 10px; - @include variables.regular; + @include regular; } } } diff --git a/src/containers/Network/css/nodesTable.scss b/src/containers/Network/css/nodesTable.scss index 2f33b697b..147fbc66b 100644 --- a/src/containers/Network/css/nodesTable.scss +++ b/src/containers/Network/css/nodesTable.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @use '../../shared/css/table'; .nodes-table { @@ -9,11 +9,11 @@ .pubkey { max-width: 70px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { max-width: 180px; } @@ -29,7 +29,7 @@ .state { min-width: 60px; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .state span { @@ -40,18 +40,18 @@ } .state .full { - background-color: variables.$green; + background-color: $green; color: black; } .state .proposing { - background-color: variables.$orange; + background-color: $orange; color: white; } .state .connected { - background-color: variables.$yellow; - color: variables.$black-60; + background-color: $yellow; + color: $black-60; } .version { @@ -61,26 +61,26 @@ .uptime { text-align: right; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { text-align: left; } } .last-ledger { i { - color: variables.$black-30; + color: $black-30; } } .in-out small { - color: variables.$black-50; + color: $black-50; font-weight: bold; } .ledgers { text-align: right; - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { text-align: left; } } @@ -92,7 +92,7 @@ margin: 3px 5px; vertical-align: middle; - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { display: inline-block; } } @@ -101,11 +101,11 @@ position: absolute; height: 100%; border-radius: 2px; - background: variables.$black-50; + background: $black-50; } .ledgers span { - color: variables.$black-50; + color: $black-50; font-weight: bold; vertical-align: middle; } @@ -115,7 +115,7 @@ .latency { display: none; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { display: table-cell; } } @@ -134,7 +134,7 @@ .in-out { display: none; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: table-cell; } } diff --git a/src/containers/Network/css/style.scss b/src/containers/Network/css/style.scss index debfa3e77..c2f1f30e0 100644 --- a/src/containers/Network/css/style.scss +++ b/src/containers/Network/css/style.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .network-page { // Needs additional bottom margin to break up table from the horizontal @@ -14,7 +14,7 @@ .stat { min-height: 15px; padding: 2px; - color: variables.$black-40; + color: $black-40; font-size: 11px; text-align: center; text-transform: uppercase; @@ -23,7 +23,7 @@ font-size: 10px; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { padding: 4px 10px; font-size: 12px; diff --git a/src/containers/Network/css/validatorsTable.scss b/src/containers/Network/css/validatorsTable.scss index 794fa5722..0b2aab55d 100644 --- a/src/containers/Network/css/validatorsTable.scss +++ b/src/containers/Network/css/validatorsTable.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .validators-table { position: relative; @@ -14,11 +14,11 @@ .pubkey { max-width: 70px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { max-width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { max-width: 180px; } @@ -33,21 +33,21 @@ .fee { min-width: 90px; - color: variables.$orange-50; + color: $orange-50; } .missed { - color: variables.$orange-50; + color: $orange-50; } .domain { max-width: 140px; - @include variables.medium; + @include medium; } .last-ledger { min-width: 55px; - @include variables.bold; + @include bold; // When a validation comes in we update the color to use the ledgers hash. Until that occurs the table's default // text color is used. @@ -66,7 +66,7 @@ } .unl.yes { - color: variables.$green; + color: $green; } .n-unl { @@ -80,22 +80,22 @@ } .n-unl.yes { - color: variables.$orange-40; + color: $orange-40; } - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { .score.d30 { display: table-cell; } } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { .pubkey { display: table-cell; } } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { .score.h1, .fee { display: table-cell; diff --git a/src/containers/NoMatch/nomatch.scss b/src/containers/NoMatch/nomatch.scss index 9855be8ff..7459af506 100644 --- a/src/containers/NoMatch/nomatch.scss +++ b/src/containers/NoMatch/nomatch.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .no-match { margin: 10% auto; @@ -7,29 +7,29 @@ .uh-oh { display: inline-block; padding: 2px 8px; - border: 1px solid variables.$black-80; + border: 1px solid $black-80; border-radius: 4px; margin-bottom: 24px; - color: variables.$black-20; + color: $black-20; font-size: 12px; line-height: 20px; - @include variables.bold; + @include bold; } .title { margin-bottom: 16px; - color: variables.$black-20; + color: $black-20; font-size: 40px; line-height: 48px; - @include variables.bold; + @include bold; } .hint { margin-bottom: 16px; - color: variables.$black-50; + color: $black-50; font-size: 16px; line-height: 24px; - @include variables.bold; + @include bold; } .warning { diff --git a/src/containers/PayStrings/PayStringHeader/styles.scss b/src/containers/PayStrings/PayStringHeader/styles.scss index 85cbcd234..8eb0170ae 100644 --- a/src/containers/PayStrings/PayStringHeader/styles.scss +++ b/src/containers/PayStrings/PayStringHeader/styles.scss @@ -1,12 +1,12 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .paystring-header { margin-bottom: 16px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 552px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 1140px; } @@ -25,7 +25,7 @@ .paystring-id { font-size: 42px; - @include variables.bold; + @include bold; } } } diff --git a/src/containers/PayStrings/PayStringMappingsTable/styles.scss b/src/containers/PayStrings/PayStringMappingsTable/styles.scss index 0d35159b8..b40727079 100644 --- a/src/containers/PayStrings/PayStringMappingsTable/styles.scss +++ b/src/containers/PayStrings/PayStringMappingsTable/styles.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .paystring-table { .col-network, @@ -11,33 +11,33 @@ } .col-network { - @include variables.bold; + @include bold; width: 80px; &.paystring-type { - color: variables.$black-40; + color: $black-40; } } .col-environment { width: 80px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 135px; //calc(100% - 440px); } } .col-address { - @include variables.medium; + @include medium; } .col-tag { width: 40px; text-align: right; - @include variables.medium; + @include medium; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 135px; } } diff --git a/src/containers/PayStrings/styles.scss b/src/containers/PayStrings/styles.scss index 3d92e5c7a..8912ed2c1 100644 --- a/src/containers/PayStrings/styles.scss +++ b/src/containers/PayStrings/styles.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .paystring-page { width: 100%; @@ -8,12 +8,12 @@ min-height: 100px; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 552px; margin: 0px auto; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 1140px; } } diff --git a/src/containers/Token/DEXPairs/styles.scss b/src/containers/Token/DEXPairs/styles.scss index 63c5a45b8..20c52eab4 100644 --- a/src/containers/Token/DEXPairs/styles.scss +++ b/src/containers/Token/DEXPairs/styles.scss @@ -1,9 +1,9 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .dex-pairs-container { padding: 64px 0 100px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { padding-top: 80px; } @@ -17,10 +17,10 @@ font-size: 14px; th { - @include variables.bold; + @include bold; border-bottom: 1px black solid; - color: variables.$white; + color: $white; font-size: 18px; text-align: center; } @@ -28,19 +28,19 @@ td { width: 200px; padding: 2px 5px; - border-top: 1px solid variables.$black-70; - border-bottom: 1px solid variables.$black-70; - color: variables.$black-40; + border-top: 1px solid $black-70; + border-bottom: 1px solid $black-70; + color: $black-40; .loader { - border-bottom: 1px solid variables.$black; + border-bottom: 1px solid $black; } } .pair { - @include variables.bold; + @include bold; - color: variables.$white; + color: $white; font-size: 18px; text-align: left; } @@ -50,7 +50,7 @@ a { font-size: 14px; - @include variables.bold; + @include bold; } } @@ -68,11 +68,11 @@ } .low-num { - color: variables.$green-50; + color: $green-50; } .high-num { - color: variables.$orange-50; + color: $orange-50; } .high { @@ -83,7 +83,7 @@ .no-pairs-message { padding: 16px; - color: variables.$black-50; + color: $black-50; font-size: 16px; text-align: center; } diff --git a/src/containers/Token/TokenHeader/styles.scss b/src/containers/Token/TokenHeader/styles.scss index 53e578fc8..050a892e7 100644 --- a/src/containers/Token/TokenHeader/styles.scss +++ b/src/containers/Token/TokenHeader/styles.scss @@ -1,4 +1,4 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; @use '../../shared/css/table'; .header-container { @@ -7,21 +7,21 @@ flex-direction: column; padding-top: 64px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; padding-top: 80px; } .details { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 490px; } } .settings { width: 100%; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 650px; } } @@ -33,7 +33,7 @@ justify-content: space-between; margin-top: 68px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: row; margin-top: 80px; } @@ -43,27 +43,27 @@ flex-direction: row; justify-content: space-between; margin-bottom: 18px; - color: variables.$white; + color: $white; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { flex-direction: column; margin-bottom: 0px; } .title { padding-bottom: 4px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .value { - color: variables.$white; + color: $white; font-size: 18px; line-height: 22.5px; text-decoration: none; - @include variables.bold; + @include bold; } } } @@ -81,11 +81,11 @@ span { margin: 0px; - color: variables.$white; + color: $white; font-size: 32px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 42px; } } @@ -108,7 +108,7 @@ width: 100%; vertical-align: top; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 450px; &.second { @@ -119,27 +119,27 @@ .secondary { padding: 0px 8px; - border-bottom: 1px solid variables.$black-20; + border-bottom: 1px solid $black-20; margin-bottom: 20px; - color: variables.$black-90; + color: $black-90; font-size: 12px; - @include variables.bold; + @include bold; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { border: none; } .title { - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.medium; + @include medium; } .label { - color: variables.$black-40; + color: $black-40; text-transform: uppercase; - @include variables.medium; + @include medium; } ul { @@ -159,17 +159,17 @@ text-transform: none; vertical-align: middle; white-space: nowrap; - @include variables.medium; + @include medium; } b { - color: variables.$white; + color: $white; word-break: break-all; - @include variables.bold; + @include bold; } &.flags { - color: variables.$blue-purple-30; + color: $blue-purple-30; font-style: italic; } } @@ -216,7 +216,7 @@ overflow: hidden; width: 285px; padding-right: 10px; - color: variables.$white; + color: $white; text-overflow: ellipsis; white-space: nowrap; } diff --git a/src/containers/Transactions/DetailTab/detailTab.scss b/src/containers/Transactions/DetailTab/detailTab.scss index ab2ad955d..6cca63254 100644 --- a/src/containers/Transactions/DetailTab/detailTab.scss +++ b/src/containers/Transactions/DetailTab/detailTab.scss @@ -1,14 +1,14 @@ -@use '../../shared/css/variables'; +@use '../../shared/css/variables' as *; .detail-body { margin-top: 20px; - color: variables.$black-40; + color: $black-40; font-size: 12px; letter-spacing: 0px; .detail-section { padding: 5px 15px; - border-bottom: 1px solid variables.$black-70; + border-bottom: 1px solid $black-70; margin: 0px 0px 30px; &:last-child { @@ -19,19 +19,19 @@ word-wrap: break-word; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 552px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 772px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 882px; } b { - color: variables.$black-30; - @include variables.medium; + color: $black-30; + @include medium; small { margin-left: 5px; @@ -60,10 +60,10 @@ .title { margin-bottom: 4px; - color: variables.$white; + color: $white; font-size: 16px; text-transform: capitalize; - @include variables.bold; + @include bold; span { margin-left: 8px; @@ -75,26 +75,26 @@ .detail-subtitle { margin-top: 16px; margin-bottom: 2px; - color: variables.$black-40; + color: $black-40; font-size: 14px; text-transform: uppercase; - @include variables.medium; + @include medium; } .ledger { - @include variables.medium; + @include medium; } .tx-result.fail { - color: variables.$orange-40; + color: $orange-40; } .time { - color: variables.$blue-purple-30; + color: $blue-purple-30; } .hash { - @include variables.medium; + @include medium; } .condition, @@ -103,23 +103,23 @@ .regular-key, .email, .message-key { - color: variables.$blue-purple-30; + color: $blue-purple-30; font-size: 13px; word-break: break-all; } .domain { - color: variables.$blue-purple-30; + color: $blue-purple-30; } .flag { - color: variables.$blue-purple-30; + color: $blue-purple-30; font-style: italic; } .account { font-size: 11px; - @include variables.bold; + @include bold; } .signers { diff --git a/src/containers/Transactions/simpleTab.scss b/src/containers/Transactions/simpleTab.scss index 7d7836f18..978ef28f3 100644 --- a/src/containers/Transactions/simpleTab.scss +++ b/src/containers/Transactions/simpleTab.scss @@ -1,6 +1,6 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; -$subdued-color: variables.$black-40; +$subdued-color: $black-40; .simple-body-tx { .rows { @@ -13,13 +13,13 @@ $subdued-color: variables.$black-40; flex-wrap: wrap; padding-top: 20px; padding-left: 5px; - color: variables.$red-dark; + color: $red-dark; float: right; font-size: 14px; font-style: italic; text-align: right; vertical-align: middle; - @include variables.regular; + @include regular; } .row { @@ -31,7 +31,7 @@ $subdued-color: variables.$black-40; padding-bottom: 8px; font-size: 11px; text-align: right; - @include variables.medium; + @include medium; } } @@ -56,7 +56,7 @@ $subdued-color: variables.$black-40; color: $subdued-color; font-size: 11px; text-align: right; - @include variables.medium; + @include medium; .account { font-size: inherit; @@ -84,17 +84,17 @@ $subdued-color: variables.$black-40; &.partial, &.closed, &.unset { - color: variables.$red-dark; + color: $red-dark; font-size: 14px; font-style: italic; - @include variables.regular; + @include regular; } &.flag { - color: variables.$blue-purple-30; + color: $blue-purple-30; font-size: 14px; font-style: italic; - @include variables.regular; + @include regular; } &.condition, @@ -106,7 +106,7 @@ $subdued-color: variables.$black-40; font-size: 14px; white-space: normal; word-break: break-all; - @include variables.regular; + @include regular; } } @@ -117,19 +117,19 @@ $subdued-color: variables.$black-40; .error { padding: 50px; - color: variables.$orange-40; + color: $orange-40; font-size: 14px; text-align: center; .type { margin: 0 5px; - @include variables.bold; + @include bold; } } .group { margin: 16px 0 16px -16px; - background: rgba(variables.$black-80, 0.7); + background: rgba($black-80, 0.7); gap: 15px; &:first-child { @@ -144,7 +144,7 @@ $subdued-color: variables.$black-40; display: block; flex-direction: row; padding: 16px 0 0 16px; - color: variables.$black-40; + color: $black-40; font-size: 14px; font-weight: 600; text-transform: uppercase; diff --git a/src/containers/Transactions/transaction.scss b/src/containers/Transactions/transaction.scss index 55f6a5b6e..45997a886 100644 --- a/src/containers/Transactions/transaction.scss +++ b/src/containers/Transactions/transaction.scss @@ -1,20 +1,20 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .transaction { position: relative; max-width: 912px; min-height: 600px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 584px; margin: 0 auto; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 820px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 912px; } @@ -30,27 +30,27 @@ .type { display: inline-block; margin-bottom: 24px; - color: variables.$white; + color: $white; font-size: 42px; - @include variables.bold; + @include bold; } .txid { .title { - @include variables.semibold; + @include semibold; } display: flex; overflow: hidden; margin-top: 8px; - color: variables.$black-40; + color: $black-40; font-size: 12px; letter-spacing: 0px; line-height: 20px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; - @include variables.medium; + @include medium; } .tx-status { diff --git a/src/containers/Validators/historyTab.scss b/src/containers/Validators/historyTab.scss index 6db18ad0e..69127e96f 100644 --- a/src/containers/Validators/historyTab.scss +++ b/src/containers/Validators/historyTab.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .history-table { // Col overall styling @@ -12,25 +12,25 @@ .col-date { width: 90px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 200px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 300px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 390px; } .abbrev-date { - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: none; } } .full-date { display: none; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: table-cell; } } @@ -38,57 +38,57 @@ .col-chain { width: 55px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 70px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 200px; } } .col-score { width: 55px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 70px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 150px; } } .col-total { width: 55px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 70px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 165px; } } .col-missed { width: 55px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 70px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 100px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 165px; } } .td-missed { - color: variables.$orange-50; + color: $orange-50; } } diff --git a/src/containers/Validators/validator.scss b/src/containers/Validators/validator.scss index a7bb7c475..7cda86f67 100644 --- a/src/containers/Validators/validator.scss +++ b/src/containers/Validators/validator.scss @@ -1,17 +1,17 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .validator { position: relative; min-height: 600px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: 552px; margin: auto; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 772px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { width: 1140px; } @@ -28,28 +28,28 @@ .type { display: inline-block; margin-bottom: 24px; - color: variables.$white; + color: $white; font-size: 32px; - @include variables.bold; + @include bold; } .label { margin-top: 16px; margin-bottom: 4px; - color: variables.$black-80; + color: $black-80; font-size: 24px; line-height: 32px; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 32px; line-height: 40px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 40px; line-height: 48px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { font-size: 40px; line-height: 48px; } @@ -58,13 +58,13 @@ .hash { overflow: hidden; padding-bottom: 87px; - color: variables.$black-40; + color: $black-40; font-size: 12px; letter-spacing: 0px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; - @include variables.medium; + @include medium; } .status { @@ -74,27 +74,27 @@ line-height: 18px; text-transform: uppercase; vertical-align: middle; - @include variables.bold; + @include bold; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 12px; line-height: 20px; } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 12px; line-height: 20px; } - @include variables.for-size(big-desktop-up) { + @include for-size(big-desktop-up) { font-size: 12px; line-height: 20px; } &.success { - color: variables.$green; + color: $green; } &.fail { - color: variables.$orange-40; + color: $orange-40; span { text-transform: none; diff --git a/src/containers/Validators/votingTab.scss b/src/containers/Validators/votingTab.scss index f630aad7a..eb6c7a489 100644 --- a/src/containers/Validators/votingTab.scss +++ b/src/containers/Validators/votingTab.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .voting { margin-left: 24px; @@ -15,7 +15,7 @@ margin: 0 !important; text-align: left; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: inline-block; } } @@ -33,7 +33,7 @@ .rows { margin-top: 32px; - background-color: variables.$black-80; + background-color: $black-80; } .row { @@ -41,7 +41,7 @@ flex-flow: row wrap; justify-content: space-between; padding: 16px; - border-bottom: 1px solid variables.$black-70; + border-bottom: 1px solid $black-70; } .label { @@ -56,15 +56,15 @@ } .badge { - color: variables.$black-100; + color: $black-100; text-transform: uppercase; &.yea { - background-color: variables.$green-60; + background-color: $green-60; } &.nay { - background-color: variables.$black-30; + background-color: $black-30; } } diff --git a/src/containers/shared/components/Dropdown/dropdown.scss b/src/containers/shared/components/Dropdown/dropdown.scss index b850ba49a..b49e23cb4 100644 --- a/src/containers/shared/components/Dropdown/dropdown.scss +++ b/src/containers/shared/components/Dropdown/dropdown.scss @@ -1,4 +1,4 @@ -@use '../../css/variables'; +@use '../../css/variables' as *; .dropdown { position: relative; @@ -26,22 +26,22 @@ overflow: hidden; min-width: max(100%, 160px); padding: 8px; - border: 1px solid variables.$black-80; - border-radius: variables.$border-radius; + border: 1px solid $black-80; + border-radius: $border-radius; margin-top: 5px; - background: rgba(variables.$black, 0.96); + background: rgba($black, 0.96); } .dropdown-item { padding: 12px 8px; - border-radius: calc(variables.$border-radius / 2); + border-radius: calc($border-radius / 2); font-weight: normal; @at-root { a#{&} { display: flex; align-items: center; - color: variables.$white; + color: $white; gap: 0 12px; &::after { @@ -49,7 +49,7 @@ } &:hover { - background: variables.$black-80; + background: $black-80; cursor: pointer; } } @@ -59,12 +59,12 @@ width: 100%; padding: 8px; border: none; - background: variables.$black-80; - color: variables.$white; + background: $black-80; + color: $white; font-size: inherit; &::placeholder { - color: variables.$black-40; + color: $black-40; } } diff --git a/src/containers/shared/components/JsonView/json-view.scss b/src/containers/shared/components/JsonView/json-view.scss index dadfd7448..0ca1c7de1 100644 --- a/src/containers/shared/components/JsonView/json-view.scss +++ b/src/containers/shared/components/JsonView/json-view.scss @@ -1,32 +1,32 @@ -@use '../../css/variables'; +@use '../../css/variables' as *; @import 'react18-json-view/src/style.css'; .json-view { overflow: hidden; margin-bottom: 40px; - color: variables.$black-10 !important; + color: $black-10 !important; font-size: 12px; letter-spacing: 0; svg { height: 11px !important; - color: variables.$black-10; + color: $black-10; } } .jv-button { - color: variables.$orange-50 !important; + color: $orange-50 !important; font-size: 14px; } .jv-indent { - border-left: 1px solid variables.$black-60; + border-left: 1px solid $black-60; margin: 4px; } /* stylelint-disable selector-class-pattern -- react18-json-view uses these */ .json-view--boolean { - color: variables.$magenta-60 !important; + color: $magenta-60 !important; } .json-view--pair { @@ -34,7 +34,7 @@ } .json-view--property { - color: variables.$black-10 !important; + color: $black-10 !important; } .json-view--null, @@ -42,17 +42,17 @@ display: inline-block; padding: 1px 2px; border-radius: 3px; - background-color: variables.$black-60; - color: variables.$black-10 !important; + background-color: $black-60; + color: $black-10 !important; font-size: 11px; } .json-view--number { - color: variables.$green-30 !important; + color: $green-30 !important; } .json-view--string { - color: variables.$orange-50 !important; + color: $orange-50 !important; } /* stylelint-enable selector-class-pattern */ diff --git a/src/containers/shared/components/Notification/styles.scss b/src/containers/shared/components/Notification/styles.scss index ab15372e4..a2dd6dad3 100644 --- a/src/containers/shared/components/Notification/styles.scss +++ b/src/containers/shared/components/Notification/styles.scss @@ -1,57 +1,57 @@ -@use '../../css/variables'; +@use '../../css/variables' as *; .notification { border: 1px solid; border-radius: 4px; margin: 12px 0; - background: variables.$blue; - color: variables.$white; + background: $blue; + color: $white; font-size: 14px; line-height: 22px; text-align: center; - @include variables.bold; + @include bold; span { padding: 0 22px; } &.primary-theme { - color: variables.$white; + color: $white; &.default { - border-color: variables.$blue; - background: variables.$blue; + border-color: $blue; + background: $blue; } &.success { - border-color: variables.$green; - background: variables.$green; + border-color: $green; + background: $green; } &.warning { - border-color: variables.$orange; - background: variables.$orange; + border-color: $orange; + background: $orange; } &.danger { - border-color: variables.$red; - background: variables.$red-dark; + border-color: $red; + background: $red-dark; } &.dark { - border-color: variables.$black-100; - background: variables.$black-100; + border-color: $black-100; + background: $black-100; } &.dark50 { - border-color: variables.$black-50; - background: variables.$black-50; + border-color: $black-50; + background: $black-50; } &.light { - border-color: variables.$white; - background: variables.$white; - color: variables.$black-100; + border-color: $white; + background: $white; + color: $black-100; } } } diff --git a/src/containers/shared/components/TransactionTable/styles.scss b/src/containers/shared/components/TransactionTable/styles.scss index 78ce97150..fa235d2d4 100644 --- a/src/containers/shared/components/TransactionTable/styles.scss +++ b/src/containers/shared/components/TransactionTable/styles.scss @@ -1,5 +1,5 @@ @use 'sass:color'; -@use '../../../shared/css/variables'; +@use '../../../shared/css/variables' as *; .transaction-table { width: 100%; @@ -10,7 +10,7 @@ list-style: none; table-layout: fixed; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 14px; } @@ -18,11 +18,11 @@ display: flex; align-items: stretch; padding: 12px 16px; - color: variables.$white; + color: $white; font-size: 14px; gap: 0 12px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { padding: 12px 32px; } } @@ -38,8 +38,8 @@ .col-type { flex: 2; - @include variables.semibold; - @include variables.for-size(desktop-up) { + @include semibold; + @include for-size(desktop-up) { width: 230px; } } @@ -50,19 +50,19 @@ .col-status { width: 50px; - @include variables.regular; + @include regular; .status { display: none; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { .status { display: initial; } } - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: auto; flex: 2 2; } @@ -73,11 +73,11 @@ flex: 3; .upper & { - color: variables.$black-70; - @include variables.medium; + color: $black-70; + @include medium; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { display: inline-block; } } @@ -85,9 +85,9 @@ .col-date { flex: 3; justify-content: right; - @include variables.medium; + @include medium; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: 185px; // We know the width because dates can only be so big flex: none; } @@ -96,14 +96,14 @@ .details { min-height: 30px; padding: 32px; - background: rgba(variables.$black-70, 0.5); - color: variables.$black-40; + background: rgba($black-70, 0.5); + color: $black-40; font-size: 10px; line-height: 12px; text-transform: uppercase; - @include variables.regular; + @include regular; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { font-size: 12px; } @@ -137,7 +137,7 @@ } .label { - @include variables.bold; + @include bold; } small { @@ -162,11 +162,11 @@ .partial-payment, .closed { - color: variables.$red-dark; + color: $red-dark; } .flag { - color: variables.$blue-purple-30; + color: $blue-purple-30; } .condition, @@ -178,16 +178,16 @@ .transaction-li { position: relative; display: block; - border-bottom: solid 1px variables.$black-70; + border-bottom: solid 1px $black-70; line-height: 20px; .transaction-address { overflow: hidden; - color: variables.$white; + color: $white; text-overflow: ellipsis; } - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { flex-direction: row; padding: 0; } @@ -198,7 +198,7 @@ &:hover { .upper { - background-color: rgba(variables.$black-70, 0.7); + background-color: rgba($black-70, 0.7); } } } @@ -210,7 +210,7 @@ gap: 0 12px; text-transform: uppercase; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { padding: 12px 32px; } @@ -219,15 +219,15 @@ } .col { - color: variables.$black-50; - @include variables.bold; + color: $black-50; + @include bold; } } } .empty-transactions-message { padding: 16px; - color: variables.$black-40; + color: $black-40; font-size: 16px; text-align: center; } @@ -236,5 +236,5 @@ display: block; margin: 10px auto; outline: inherit; - @include variables.bold; + @include bold; } diff --git a/src/containers/shared/css/box.scss b/src/containers/shared/css/box.scss index 1090a984f..839b8e264 100644 --- a/src/containers/shared/css/box.scss +++ b/src/containers/shared/css/box.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; .box { border-radius: 4px; @@ -9,13 +9,13 @@ .box-content { padding: 16px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { padding: 24px; } } .box-header { - border-bottom: 1px solid variables.$black-20; + border-bottom: 1px solid $black-20; } .box-header > .icon { @@ -31,7 +31,7 @@ font-size: 12px; line-height: 22px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { font-size: 20px; } } diff --git a/src/containers/shared/css/form.scss b/src/containers/shared/css/form.scss index 61fe28410..e4fefc169 100644 --- a/src/containers/shared/css/form.scss +++ b/src/containers/shared/css/form.scss @@ -1,10 +1,10 @@ -@use 'variables'; +@use 'variables' as *; label { - color: variables.$black-40; + color: $black-40; &.selected { - color: variables.$white; + color: $white; font-weight: bold; } } @@ -16,21 +16,21 @@ label { } input { - border-radius: variables.$border-radius; + border-radius: $border-radius; &[type='text'] { &:hover, &:focus { - background-color: variables.$black-80; + background-color: $black-80; } &:focus { - outline: solid 1px variables.$blue-purple-40 !important; + outline: solid 1px $blue-purple-40 !important; } } &[type='radio'] { height: 16px; - accent-color: variables.$green; + accent-color: $green; } } diff --git a/src/containers/shared/css/global.scss b/src/containers/shared/css/global.scss index 83a187259..e10fd11d1 100644 --- a/src/containers/shared/css/global.scss +++ b/src/containers/shared/css/global.scss @@ -1,6 +1,6 @@ // ONLY GLOBAL CSS, KEEP IT TO MINIMAL // CSS SHOULD BE SCOPPED TO COMPONENT -@use 'variables'; +@use 'variables' as *; @use 'form'; /** @@ -26,7 +26,7 @@ html { body { height: 100%; - color: variables.$white; + color: $white; } .xrpl-explorer { @@ -43,7 +43,7 @@ body, input { padding: 0px; margin: 0px; - background-color: variables.$black-100; + background-color: $black-100; font-size: 16px; -webkit-font-smoothing: antialiased; font-style: normal; @@ -68,12 +68,12 @@ button { h2 { padding-bottom: 18px; - border-bottom: 1px variables.$black-70 solid; + border-bottom: 1px $black-70 solid; margin-top: 0; - color: variables.$white; + color: $white; font-size: 24px; - @include variables.bold; + @include bold; } svg.react-stockchart { @@ -87,11 +87,11 @@ div.react-stockchart div { .async-component-error { margin: 0px auto; - color: variables.$black-40; + color: $black-40; font-size: 16px; line-height: 24px; text-align: center; - @include variables.bold; + @include bold; } @mixin transaction-category($category, $color, $hover, $background) { @@ -109,27 +109,27 @@ div.react-stockchart div { } } -@include transaction-category(ACCOUNT, variables.$magenta, variables.$magenta-30, variables.$magenta-90); -@include transaction-category(DEX, variables.$blue, variables.$blue-30, variables.$blue-90); -@include transaction-category(PAYMENT, variables.$green, variables.$green-30, variables.$green-90); +@include transaction-category(ACCOUNT, $magenta, $magenta-30, $magenta-90); +@include transaction-category(DEX, $blue, $blue-30, $blue-90); +@include transaction-category(PAYMENT, $green, $green-30, $green-90); @include transaction-category( NFT, - variables.$blue-purple, - variables.$blue-purple-30, - variables.$blue-purple-90 + $blue-purple, + $blue-purple-30, + $blue-purple-90 ); -@include transaction-category(XCHAIN, variables.$yellow, variables.$yellow-30, variables.$yellow-90); -@include transaction-category(PSEUDO, variables.$white, variables.$white, variables.$black-80); -@include transaction-category(UNKNOWN, variables.$black-50, variables.$black-30, variables.$black-90); -@include transaction-category(MPT, variables.$blue, variables.$blue-30, variables.$blue-90); +@include transaction-category(XCHAIN, $yellow, $yellow-30, $yellow-90); +@include transaction-category(PSEUDO, $white, $white, $black-80); +@include transaction-category(UNKNOWN, $black-50, $black-30, $black-90); +@include transaction-category(MPT, $blue, $blue-30, $blue-90); .tx-result { &.success { - color: variables.$green; + color: $green; } &.fail { - color: variables.$orange-40; + color: $orange-40; } } @@ -162,16 +162,16 @@ div.react-stockchart div { .btn { padding: 12px 16px; - border: solid 1px variables.$white; - border-radius: variables.$border-radius; - background: variables.$black; - color: variables.$white; + border: solid 1px $white; + border-radius: $border-radius; + background: $black; + color: $white; cursor: pointer; font-size: 14px; line-height: 21px; &:hover { - background: variables.$black-80; + background: $black-80; } } @@ -179,12 +179,12 @@ a, .btn-link { border: none; background: transparent; - color: variables.$green-30; + color: $green-30; text-decoration: none; &:hover { background: transparent; - color: variables.$green-50; + color: $green-50; } &.external, // Force the external icon. Useful for when the protocol is unknown like with NFTs. @@ -253,30 +253,30 @@ This makes the `mask-overlay` sit on top of the `anchor-mask` and then places an border-radius: 30px; margin-left: 12px; font-size: 14px; - @include variables.bold; + @include bold; } .section { margin: 0 8px; - @include variables.for-size(tablet-landscape-up) { + @include for-size(tablet-landscape-up) { width: calc(100% - 15px); margin: 0 auto; } - @include variables.for-size(big-desktop-up) { - max-width: variables.$desktop-upper-boundary; + @include for-size(big-desktop-up) { + max-width: $desktop-upper-boundary; } } .warning { display: flex; align-items: center; - color: variables.$orange; + color: $orange; font-size: 12px; line-height: 20px; text-transform: uppercase; - @include variables.bold; + @include bold; img { transform: scale(0.5); @@ -285,8 +285,8 @@ This makes the `mask-overlay` sit on top of the `anchor-mask` and then places an // A transactions destination tag. Used like rafdasdfas:424242 .dt { - @include variables.medium; + @include medium; - color: variables.$black-40; + color: $black-40; font-size: 0.9em; } diff --git a/src/containers/shared/css/simpleTab.scss b/src/containers/shared/css/simpleTab.scss index 497247d70..087d3005c 100644 --- a/src/containers/shared/css/simpleTab.scss +++ b/src/containers/shared/css/simpleTab.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; $index-width: 324px; @@ -8,7 +8,7 @@ $index-width: 324px; .index { width: $index-width; padding: 16px; - border-left: 1px solid variables.$black-70; + border-left: 1px solid $black-70; margin-bottom: 60px; margin-left: -1px; @@ -21,7 +21,7 @@ $index-width: 324px; .label { margin-bottom: 0; - color: variables.$black-40; + color: $black-40; font-size: 10px; line-height: 14px; text-transform: uppercase; @@ -29,12 +29,12 @@ $index-width: 324px; .value { overflow: hidden; - color: variables.$white; + color: $white; font-size: 14px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; - @include variables.medium; + @include medium; &.account { font-size: 12px; @@ -49,10 +49,10 @@ $index-width: 324px; font-size: 14px; line-height: 21px; - @include variables.for-size(desktop-up) { + @include for-size(desktop-up) { width: calc(100% - $index-width); padding-right: 0; - border-right: 1px solid variables.$black-70; + border-right: 1px solid $black-70; margin-bottom: 60px; } @@ -71,19 +71,19 @@ $index-width: 324px; flex-wrap: wrap; justify-content: space-between; padding: 15px 0; - border-bottom: 1px solid variables.$black-70; + border-bottom: 1px solid $black-70; gap: 0 5px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { padding: 15px 15px 15px 0; } .label { - color: variables.$white; + color: $white; text-transform: capitalize; &.unauthorize { - color: variables.$red-dark; + color: $red-dark; } } @@ -96,15 +96,15 @@ $index-width: 324px; } .value { - @include variables.medium; + @include medium; - color: variables.$white; + color: $white; vertical-align: middle; word-break: break-word; &.date { - color: variables.$black-60; - @include variables.regular; + color: $black-60; + @include regular; } } } diff --git a/src/containers/shared/css/table.scss b/src/containers/shared/css/table.scss index 3c3f66d2c..4f53bac7c 100644 --- a/src/containers/shared/css/table.scss +++ b/src/containers/shared/css/table.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; table.basic { overflow: hidden; @@ -6,13 +6,13 @@ table.basic { border-top: none; margin: auto; border-collapse: collapse; - color: variables.$white; + color: $white; font-size: 12px; letter-spacing: 0px; text-align: left; tr { - border-bottom: 1px solid variables.$black-70; + border-bottom: 1px solid $black-70; } td, @@ -32,7 +32,7 @@ table.basic { th { padding: 22px 5px; - color: variables.$black-40; + color: $black-40; text-align: left; text-transform: uppercase; } @@ -40,17 +40,17 @@ table.basic { td { padding: 15px 5px; - @include variables.for-size(tablet-portrait-up) { + @include for-size(tablet-portrait-up) { td { padding: 15px 10px; - color: variables.$black-40; + color: $black-40; } } } .empty-message { padding: 16px; - color: variables.$black-40; + color: $black-40; font-size: 16px; text-align: center; } @@ -63,16 +63,16 @@ table.token-table { .col1 { width: 180px; padding-bottom: 8px; - color: variables.$black-40; + color: $black-40; text-transform: uppercase; - @include variables.semibold; + @include semibold; } .col2 { display: inline-block; width: 230px; padding-bottom: 8px; - color: variables.$white; + color: $white; overflow-wrap: break-word; } } diff --git a/src/containers/shared/css/tabs.scss b/src/containers/shared/css/tabs.scss index 0bf207f4d..3ffa955ec 100644 --- a/src/containers/shared/css/tabs.scss +++ b/src/containers/shared/css/tabs.scss @@ -1,7 +1,7 @@ -@use 'variables'; +@use 'variables' as *; .tabs { - border-top: 1px solid variables.$black-70; + border-top: 1px solid $black-70; margin: 8px auto 40px; font-size: 14px; @@ -13,20 +13,20 @@ display: inline-block; padding: 24px 24px 0; border-top: 2px solid transparent; - color: variables.$black-40; + color: $black-40; cursor: pointer; text-align: center; &:hover, &:focus { - color: variables.$white; - @include variables.bold; + color: $white; + @include bold; } &.selected { - border-top: 2px solid variables.$white; - color: variables.$white; - @include variables.bold; + border-top: 2px solid $white; + color: $white; + @include bold; } } } diff --git a/src/containers/shared/css/tooltip.scss b/src/containers/shared/css/tooltip.scss index e178289e0..eaada0ce5 100644 --- a/src/containers/shared/css/tooltip.scss +++ b/src/containers/shared/css/tooltip.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; .tooltip { position: absolute; @@ -9,7 +9,7 @@ color: white; font-size: 13px; line-height: 16px; - @include variables.medium; + @include medium; img { height: 16px; @@ -24,7 +24,7 @@ .pubkey { overflow: hidden; max-width: 100px; - color: variables.$black-10; + color: $black-10; font-size: 10px; letter-spacing: 0; text-overflow: ellipsis; @@ -32,12 +32,12 @@ } .time { - color: variables.$black-40; + color: $black-40; letter-spacing: 0; } .unl { - color: variables.$green; + color: $green; } .tx-status::before { @@ -45,7 +45,7 @@ } .account { - color: variables.$black-50; + color: $black-50; font-size: 10px; } diff --git a/src/containers/shared/css/txlabel.scss b/src/containers/shared/css/txlabel.scss index f068ab313..dd2b520a6 100644 --- a/src/containers/shared/css/txlabel.scss +++ b/src/containers/shared/css/txlabel.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; .tx-label { display: inline-flex; @@ -9,10 +9,10 @@ border-radius: 100px; font-size: 14px; line-height: 1; - @include variables.semibold; + @include semibold; .tx-type-name { - color: variables.$white; + color: $white; letter-spacing: 0; text-transform: uppercase; @extend %truncate; From ee4abd944019ffbe055a5f66f4705b51ea17ad20 Mon Sep 17 00:00:00 2001 From: Ashray Chowdhry Date: Tue, 12 Nov 2024 12:15:55 -0500 Subject: [PATCH 4/4] add star import for missing files --- src/containers/NFT/styles.scss | 2 +- src/containers/Validators/simpleTab.scss | 2 +- src/containers/shared/css/txstatus.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/NFT/styles.scss b/src/containers/NFT/styles.scss index 4e3cd0998..d03f6e9f0 100644 --- a/src/containers/NFT/styles.scss +++ b/src/containers/NFT/styles.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .nft-page { width: 100%; diff --git a/src/containers/Validators/simpleTab.scss b/src/containers/Validators/simpleTab.scss index c6de540bf..f95bbde77 100644 --- a/src/containers/Validators/simpleTab.scss +++ b/src/containers/Validators/simpleTab.scss @@ -1,4 +1,4 @@ -@use '../shared/css/variables'; +@use '../shared/css/variables' as *; .simple-body-validator { .row { diff --git a/src/containers/shared/css/txstatus.scss b/src/containers/shared/css/txstatus.scss index 263ad438c..66933e784 100644 --- a/src/containers/shared/css/txstatus.scss +++ b/src/containers/shared/css/txstatus.scss @@ -1,4 +1,4 @@ -@use 'variables'; +@use 'variables' as *; .tx-status { display: inline-flex;