├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ ├── feature.yml │ └── other.yml ├── PULL_REQUEST_TEMPLATE │ └── pull_request_template.md └── workflows │ └── labels.yml ├── .gitignore ├── LICENSE ├── README.md ├── docs ├── .gitignore ├── .markdownlint.json ├── README.md ├── babel.config.js ├── blog │ ├── 2021-10-10-first-blog-post.md │ └── authors.yml ├── docs │ ├── Core │ │ ├── Basic-Styling │ │ │ ├── Colors.md │ │ │ └── Shadows.md │ │ ├── Borders │ │ │ └── Borders.md │ │ ├── Spacing │ │ │ ├── Margins.md │ │ │ └── Paddings.md │ │ └── Typography │ │ │ ├── BasicTypographies.md │ │ │ ├── FontStyles.md │ │ │ ├── FontWeights.md │ │ │ ├── TextAlignment.md │ │ │ ├── TextDecorations.md │ │ │ ├── TextOverflow.md │ │ │ └── TextTransformations.md │ ├── Widgets │ │ ├── Buttons.md │ │ ├── Cards.md │ │ └── Inputs.md │ └── intro.md ├── docusaurus.config.js ├── package-lock.json ├── package.json ├── sidebars.js ├── src │ ├── components │ │ ├── HomepageFeatures.css │ │ ├── HomepageFeatures.css.map │ │ ├── HomepageFeatures.js │ │ └── HomepageFeatures.scss │ ├── css │ │ └── custom.css │ └── pages │ │ ├── index.js │ │ ├── index.module.css │ │ ├── markdown-page.md │ │ ├── screencasts │ │ ├── __screencasts-data.json │ │ └── index.js │ │ └── showcase │ │ └── index.js └── static │ ├── .nojekyll │ └── img │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── logoTheDesignSystems.png │ ├── tutorial │ ├── docsVersionDropdown.png │ └── localeDropdown.png │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg ├── gulpfile.js ├── package-lock.json ├── package.json └── source ├── eccentrictouch-core ├── borders │ ├── borders.css │ ├── borders.css.map │ ├── borders.scss │ └── index.css ├── colors │ ├── colors.css │ ├── colors.css.map │ ├── colors.scss │ └── index.css ├── index.css ├── layouts │ ├── display.css │ ├── display.css.map │ ├── display.scss │ ├── grids.css │ ├── grids.css.map │ ├── grids.scss │ ├── index.css │ ├── positions.css │ ├── positions.css.map │ └── positions.scss ├── margins │ ├── index.css │ ├── margins.css │ ├── margins.css.map │ └── margins.scss ├── paddings │ ├── index.css │ ├── paddings.css │ ├── paddings.css.map │ └── paddings.scss ├── shadows │ ├── index.css │ ├── shadows.css │ ├── shadows.css.map │ └── shadows.scss ├── typography │ ├── index.css │ ├── typography.css │ ├── typography.css.map │ └── typography.scss ├── variables.css ├── variables.css.map └── variables.scss ├── eccentrictouch-vendors └── fonts.css ├── eccentrictouch-widgets ├── buttons │ ├── buttons.css │ ├── buttons.css.map │ ├── buttons.scss │ └── index.css ├── cards │ ├── cards.css │ ├── cards.css.map │ ├── cards.scss │ └── index.css ├── index.css └── input │ ├── index.css │ ├── input.css │ ├── input.css.map │ └── input.scss ├── eccentrictouch.css └── index.test.html /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: Create a report to help us improve. Report bugs found while using the project 3 | title: "[BUG] " 4 | labels: ["🛠 goal: fix"] 5 | body: 6 | - type: textarea 7 | id: actualbhv 8 | attributes: 9 | label: "🙁 Actual behavior" 10 | description: What happened, and why it was wrong 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: expectedbhv 15 | attributes: 16 | label: "🙂 Expected behavior" 17 | description: What you expected to happen instead, and why 18 | validations: 19 | required: true 20 | - type: textarea 21 | id: steps 22 | attributes: 23 | label: "🔢 Steps to Reproduce the Problem" 24 | description: If possible, provide steps to reproduce the problem you're experiencing 25 | placeholder: | 26 | 1. First step 27 | 2. Second step 28 | 3. Third step 29 | validations: 30 | required: false 31 | - type: markdown 32 | attributes: 33 | value: | 34 | You can also join the Discord community [here](https://thedesignsystems.com/discord) 35 | Feel free to check out other cool repositories of the The DesignSystems Community [here](https://bit.ly/github-thedesignsystems) -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: Feature request 2 | description: Suggest features, propose improvements, discuss new ideas 3 | title: "[FEATURE] " 4 | labels: ["⭐ goal: addition"] 5 | body: 6 | - type: textarea 7 | id: suggestion 8 | attributes: 9 | label: ⭐ Suggestion 10 | description: A summary of what you'd like to see added or changed 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: usecases 15 | attributes: 16 | label: 💻 Use Cases 17 | description: | 18 | What are possible you cases for your suggested feature? 19 | Are you using any workarounds in the meantime? 20 | validations: 21 | required: false 22 | - type: textarea 23 | id: relatedproblems 24 | attributes: 25 | label: ❌ Related Problems 26 | description: | 27 | Is your Request related to a problem? 28 | Think about linking existing Issues here! 29 | validations: 30 | required: false 31 | - type: markdown 32 | attributes: 33 | value: | 34 | You can also join the Discord community [here](https://thedesignsystems.com/discord) 35 | Feel free to check out other cool repositories of the The DesignSystems Community [here](https://bit.ly/github-thedesignsystems) 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other.yml: -------------------------------------------------------------------------------- 1 | name: Other 2 | description: Use this for any other issues. PLEASE do not create blank issues 3 | title: "[OTHER]" 4 | labels: ["🚦 status: awaiting triage"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: "# Other issue" 9 | - type: textarea 10 | id: issuedescription 11 | attributes: 12 | label: What would you like to share? 13 | description: Provide a clear and concise explanation of your issue. 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: extrainfo 18 | attributes: 19 | label: Additional information 20 | description: Is there anything else we should know about this issue? 21 | validations: 22 | required: false 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | Fixes # (issue) 6 | 7 | ## Type of change 8 | 9 | Please delete options that are not relevant. 10 | 11 | - [ ] Bug fix (non-breaking change which fixes an issue) 12 | - [ ] New feature (non-breaking change which adds functionality) 13 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 14 | - [ ] This change requires a documentation update 15 | 16 | # How Has This Been Tested? 17 | 18 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration 19 | 20 | - [ ] Test A 21 | - [ ] Test B 22 | 23 | **Test Configuration**: 24 | * Firmware version: 25 | * Hardware: 26 | * Toolchain: 27 | * SDK: 28 | 29 | # Checklist: 30 | 31 | - [ ] My code follows the style guidelines of this project 32 | - [ ] I have performed a self-review of my own code 33 | - [ ] I have commented my code, particularly in hard-to-understand areas 34 | - [ ] I have made corresponding changes to the documentation 35 | - [ ] My changes generate no new warnings 36 | - [ ] I have added tests that prove my fix is effective or that my feature works 37 | - [ ] New and existing unit tests pass locally with my changes 38 | - [ ] Any dependent changes have been merged and published in downstream modules -------------------------------------------------------------------------------- /.github/workflows/labels.yml: -------------------------------------------------------------------------------- 1 | name: Import open source standard labels 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | 7 | jobs: 8 | labels: 9 | 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/setup-node@v2 14 | with: 15 | node-version: '14' 16 | - uses: EddieHubCommunity/gh-action-open-source-labels@v0.2.2 17 | with: 18 | github-token: ${{ secrets.GITHUB_TOKEN }} 19 | owner-name: ${{ github.repository_owner }} 20 | repository-name: ${{ github.event.repository.name }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # adding gulpfile for local-development 20 | gulpfile.js 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | lib-cov 24 | 25 | # Coverage directory used by tools like istanbul 26 | coverage 27 | *.lcov 28 | 29 | # nyc test coverage 30 | .nyc_output 31 | 32 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 33 | .grunt 34 | 35 | # Bower dependency directory (https://bower.io/) 36 | bower_components 37 | 38 | # node-waf configuration 39 | .lock-wscript 40 | 41 | # Compiled binary addons (https://nodejs.org/api/addons.html) 42 | build/Release 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # Snowpack dependency directory (https://snowpack.dev/) 49 | web_modules/ 50 | 51 | # TypeScript cache 52 | *.tsbuildinfo 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional eslint cache 58 | .eslintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variables file 76 | .env 77 | .env.test 78 | .env.production 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | .parcel-cache 83 | 84 | # Next.js build output 85 | .next 86 | out 87 | 88 | # Nuxt.js build / generate output 89 | .nuxt 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and not Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | 111 | # Stores VSCode versions used for testing VSCode extensions 112 | .vscode-test 113 | 114 | # yarn v2 115 | .yarn/cache 116 | .yarn/unplugged 117 | .yarn/build-state.yml 118 | .yarn/install-state.gz 119 | .pnp.* 120 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2021-22 Yash Sehgal (Mail: yashsehgal.work@gmail.com), (https://github.com/yashsehgal) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Eccentric Touch - Modern. Scalable design support** 2 | 3 | 4 | ## Table of Contents 5 | 1. [About The Project](#about-the-project) 6 | 2. [Built With](#built-with) 7 | 3. [Getting Started](#getting-started) 8 | 4. [Usage](#usage) 9 | 5. [Contributing](#contributing) 10 | 6. [License](#license) 11 | 12 | 13 | ## About the project 14 | A modern library which will make your code more reliable and easy to go with. The Eccentric touch is a CSS library where you can easily find styles for html elements. It will optimize your time and provide you with a lot of options to choose from. Instead of writing an enormous amount of CSS, you can just pick a design of your choice and use it in your code. And, VOILA!! It sounds super serene. 15 | 16 | ## Built with 17 | 18 | These library is designed with the use of technologies like:- 19 | 20 | * HTML 21 | * CSS/SCSS 22 | 23 | ## Getting started 24 | 25 | To begin with, you need to set up the project locally on your device.Before using our project, one must have a text editor. We recommend you the Visual Code Studio. 26 | Follow the steps given below for Installation of Git:- 27 | 28 | 1. Download Git from the browser. 29 | 2. Setup git on your device. 30 | 3. Once git is ready to go, set the author name and email of the user. 31 | 4. Author name: `git config --global user . name “yourname”`. 32 | 5. Email address: `git config --global user.email “youremail”`. 33 | There you go, Git terminal is all set to be used. 34 | 35 | ## Usage 36 | This CSS library is useful in many ways:- 37 | 1. It provides direct Access to various components such as buttons, typography,links etc. 38 | 2. With the use of the SCSS framework, animations have become more interesting. 39 | 3. It brings a more standardized practice for web development. 40 | 4. It can fast-track your web development effort as it allows you to use predefined web elements. 41 | 42 | 43 | ## Contributing 44 | Contribution is what makes open source amazing place to learn, inspire and insightful. All the Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. 45 | Steps to be followed while contributing:- 46 | 47 | 1. `Fork` the Project. 48 | 2. Create your Feature Branch `git checkout -b branch_name`. 49 | 3. Add the files `git add .` 50 | 3. Commit your Changes `git commit -m ": Add message about your changes (mention-issue-ID)"`. 51 | 4. Push to the Branch `git push origin branch_name`. 52 | 5. Open a Pull Request. 53 | 54 | ## License 55 | This project is Licensed by [MIT]. -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /docs/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD013": { 3 | "line_length": 120 4 | }, 5 | "MD024": { 6 | "siblings_only": true, 7 | "allow_different_nesting": true 8 | } 9 | } -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/blog/2021-10-10-first-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: More blogs to come 3 | title: More blogs to come 4 | authors: 5 | name: Yash Sehgal 6 | title: founder @The DesignSystems 7 | url: https://github.com/yashsehgal 8 | image_url: https://github.com/yashsehgal.png 9 | tags: [The DesignSystems, Eccentric Touch, blogs, docusaurus] 10 | --- 11 | 12 | There's a lot to come, Be in touch! :rocket: -------------------------------------------------------------------------------- /docs/blog/authors.yml: -------------------------------------------------------------------------------- 1 | yash: 2 | name: Yash Sehgal 3 | title: founder @The DesignSystems 4 | url: https://github.com/yashsehgal 5 | image_url: https://github.com/yashsehgal.png 6 | -------------------------------------------------------------------------------- /docs/docs/Core/Basic-Styling/Colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Colors 6 | 7 | There are many basic color and there respective shades provided, the colors are listed below with there class-names and syntax explanation. 8 | 9 | ## Primary colors 10 | 11 | ### Blue 12 | 13 | | Shade | class implementation | color | 14 | |-------|----------------------|-------| 15 | | 900 | color-blue-900 |
| 16 | | 800 | color-blue-800 |
| 17 | | 700 | color-blue-700 |
| 18 | | 600 | color-blue-600 |
| 19 | | 500 | color-blue-500 |
| 20 | | 400 | color-blue-400 |
| 21 | | 300 | color-blue-300 |
| 22 | | 200 | color-blue-200 |
| 23 | | 100 | color-blue-100 |
| 24 | 25 | ### Purple 26 | 27 | | Shade | class implementation | color | 28 | |-------|----------------------|-------| 29 | | 900 | color-purple-900 |
| 30 | | 800 | color-purple-800 |
| 31 | | 700 | color-purple-700 |
| 32 | | 600 | color-purple-600 |
| 33 | | 500 | color-purple-500 |
| 34 | | 400 | color-purple-400 |
| 35 | | 300 | color-purple-300 |
| 36 | | 200 | color-purple-200 |
| 37 | | 100 | color-purple-100 |
| 38 | 39 | ### Green 40 | 41 | | Shade | class implementation | color | 42 | |-------|----------------------|-------| 43 | | 900 | color-green-900 |
| 44 | | 800 | color-green-800 |
| 45 | | 700 | color-green-700 |
| 46 | | 600 | color-green-600 |
| 47 | | 500 | color-green-500 |
| 48 | | 400 | color-green-400 |
| 49 | | 300 | color-green-300 |
| 50 | | 200 | color-green-200 |
| 51 | | 100 | color-green-100 |
| 52 | 53 | ### Red 54 | 55 | | Shade | class implementation | color | 56 | |-------|----------------------|-------| 57 | | 900 | color-red-900 |
| 58 | | 800 | color-red-800 |
| 59 | | 700 | color-red-700 |
| 60 | | 600 | color-red-600 |
| 61 | | 500 | color-red-500 |
| 62 | | 400 | color-red-400 |
| 63 | | 300 | color-red-300 |
| 64 | | 200 | color-red-200 |
| 65 | | 100 | color-red-100 |
| 66 | 67 | ### Yellow 68 | 69 | | Shade | class implementation | color | 70 | |-------|----------------------|-------| 71 | | 900 | color-yellow-900 |
| 72 | | 800 | color-yellow-800 |
| 73 | | 700 | color-yellow-700 |
| 74 | | 600 | color-yellow-600 |
| 75 | | 500 | color-yellow-500 |
| 76 | | 400 | color-yellow-400 |
| 77 | | 300 | color-yellow-300 |
| 78 | | 200 | color-yellow-200 |
| 79 | | 100 | color-yellow-100 |
| 80 | 81 | ## Neutral colors 82 | 83 | ### Gray 84 | 85 | | Shade | class implementation | color | 86 | |-------|----------------------|-------| 87 | | 900 | neutral-gray-900 |
| 88 | | 800 | neutral-gray-800 |
| 89 | | 700 | neutral-gray-700 |
| 90 | | 600 | neutral-gray-600 |
| 91 | | 500 | neutral-gray-500 |
| 92 | | 400 | neutral-gray-400 |
| 93 | | 300 | neutral-gray-300 |
| 94 | | 200 | neutral-gray-200 |
| 95 | | 100 | neutral-gray-100 |
| 96 | 97 | **For using white and black colors, the class methods are given below** 98 | - White `text-color-white`, `bg-color-white`, `border-color-white`, `fill-color-white` 99 | - Black `text-color-black`, `bg-color-black`, `border-color-black`, `fill-color-black` -------------------------------------------------------------------------------- /docs/docs/Core/Basic-Styling/Shadows.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Shadows 6 | 7 | Shadow properties are added as class-methods which can be used in HTML and other document-object using classes. 8 | 9 | To implement shadows to your components, the syntax to implement shadows in given below. 10 | Shadow can be implemented using the prefix `shadow` keyword. 11 | 12 | - The default shadow can be implemented by using the `shadow` keyword. 13 | - Other than the default shadow, there are variations for shadows i.e. 14 | `shadow-light`, `shadow-medium`, `shadow-high`. 15 | 16 | ```html 17 |
This is a demo text
18 |
This is a demo text
19 |
This is a demo text
20 |
This is a demo text
21 | ``` 22 | 23 |
This is a demo text
24 |
This is a demo text
25 |
This is a demo text
26 |
This is a demo text
27 | 28 | - There's a special hover effect as well for the shadow property which can be implemented as `shadow-hoverable`. 29 | 30 | ```html 31 |
This is a demo text
32 | ``` 33 | 34 |
This is a demo text
-------------------------------------------------------------------------------- /docs/docs/Core/Borders/Borders.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Borders 6 | 7 | Border properties are added as class-methods for implementing borders to components and document objects. 8 | 9 | To implement borders to your components, the syntax is given below. 10 | 11 | - Borders can be implemented using the prefix `border` keyword. 12 | - There are other variations for borders as well i.e. `border-light`, `border-medium`, `border-high`. 13 | 14 | - Class method structure for using border properties is `border-{dimension_type}-{border_property}-{value}`, where `{value}` can be both **base** and **decimal** values. 15 | - For an example, `border-right-width-` 16 | 17 | ```html 18 |
This is a demo text
19 |
This is a demo text
20 |
This is a demo text
21 |
This is a demo text
22 | ``` 23 | 24 |
This is a demo text
25 |
This is a demo text
26 |
This is a demo text
27 |
This is a demo text
28 | 29 | - You can also implement borders using `px` and values. 30 | 31 | | Border Type | Class-based Implementation | Output | 32 | |-------------|----------------------------|--------| 33 | | Border (1px) | `
` |
| 34 | | Border Right (12px) | `
` |
| 35 | | Border Top (24.5px) | `
` |
| 36 | | Border Bottom (6.4px) | `
` |
| 37 | 38 | 39 | - Also, can have multiple borders using different class-names 40 | 41 | | Border Type | Class-based Implementation | Output | 42 | |-------------|----------------------------|--------| 43 | | Border Bottom (24px) + Border Top (12px) | `
` |
| 44 | | Border Top (100px) + Border Right (34.4px) | `
` |
| -------------------------------------------------------------------------------- /docs/docs/Core/Spacing/Margins.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Margins 6 | 7 | Margins are created in the form of utility classes for all the dimensions (all-sides, top, bottom, right, left.) 8 | 9 | ## How it's working? 10 | 11 | All the units for margins are generated with {base-value}*{1.618}, where {1.618} is the golden ratio. 12 | The range of values for margins goes from 1 to 100 "eccentric touch" units. 13 | 14 | ### How to implement? 15 | 16 | #### General Margins 17 | 18 | | Margin type | Syntax | Example | 19 | |-------------|--------|---------| 20 | | All sides | `m-value` | `m-3`, `m-12`, `m-56`, `m-auto` | 21 | | Right | `m-right-value` | `m-right-3`, `m-right-12`, `m-right-56`, `m-right-auto` | 22 | | Left | `m-left-value` | `m-left-3`, `m-left-12`, `m-left-56`, `m-left-auto` | 23 | | Top | `m-top-value` | `m-top-3`, `m-top-12`, `m-top-56`, `m-top-auto` | 24 | | Bottom | `m-bottom-value` | `m-bottom-3`, `m-bottom-12`, `m-bottom-56`, `m-bottom-auto` | 25 | 26 | - For Adding horizontal margin-auto to an element, we can use `m-x-auto` (x representing horizontal side) whereas, to add vertical margins 27 | to an element, we can use `m-y-auto` (and of-course, y representing vertical side). 28 | 29 | #### Using decimal values in margins 30 | 31 | Syntax to add decimal based margin values is `m-[type]-{base-value}-point-{decimal-value}`, where `{decimal-value}` should be of length unity. Like, `m-2-point-6`, `m-right-56-point-7`, and `m-top-46-point-8` for **margin(2.6) from all sides**, **margin(56.7) from right side**, and **margin(46.8) from top side**, respectively. 32 | -------------------------------------------------------------------------------- /docs/docs/Core/Spacing/Paddings.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Paddings 6 | 7 | Paddings are created in the form of utility classes for all the dimensions (all-sides, top, bottom, right, left.) 8 | 9 | ## How it's working? 10 | 11 | All the units for paddings are generated with {base-value}*{1.618}, where {1.618} is the golden ratio. 12 | The range of values for margins goes from 1 to 100 "eccentric touch" units. 13 | 14 | ### How to implement? 15 | 16 | #### General Paddings 17 | 18 | | Padding type | Syntax | Example | 19 | |--------------|--------|---------| 20 | | All sides | `p-value` | `p-3`, `p-12`, `p-56`, `p-auto` | 21 | | Right | `p-right-value` | `p-right-3`, `p-right-12`, `p-right-56`, `p-right-auto` | 22 | | Left | `p-left-value` | `p-left-3`, `p-left-12`, `p-left-56`, `p-left-auto` | 23 | | Top | `p-top-value` | `p-top-3`, `p-top-12`, `p-top-56`, `p-top-auto` | 24 | | Bottom | `p-bottom-value` | `p-bottom-3`, `p-bottom-12`, `p-bottom-56`, `p-bottom-auto` | 25 | 26 | - For Adding horizontal padding-auto to an element, we can use `p-x-auto` (x representing horizontal side) whereas, to add vertical paddings to an element, we can use `p-y-auto` (and of-course, y representing vertical side) 27 | 28 | 29 | #### Using decimal values paddings 30 | 31 | Syntax to add decimal based padding values is `p-[type]-{base-value}-point-{decimal-value}`, where `{decimal-value}` should be of length unity. Like, `p-2-point-6`, `p-right-56-point-7`, and `p-top-46-point-8` for **padding(2.6) from all sides**, **padding(56.7) from right side**, and **padding(46.8) from top side**, respectively. -------------------------------------------------------------------------------- /docs/docs/Core/Typography/BasicTypographies.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Basic Typography Principles 6 | 7 | ## Headings 8 | 9 |
10 |

This is a heading - H1

11 |

This is a heading - H2

12 |

This is a heading - H3

13 |

This is a heading - H4

14 |
This is a heading - H5
15 |
This is a heading - H6
16 |
17 | 18 | ```html 19 |

This is a heading - H1

20 |

This is a heading - H2

21 |

This is a heading - H3

22 |

This is a heading - H4

23 |
This is a heading - H5
24 |
This is a heading - H6
25 | ``` 26 | 27 | ## All other properties related to typographies 28 | 29 | ### Font Size 30 |
31 |

This text has 24px of font-size

32 |

This text has 45px of font-size

33 |

This text has 32.6px of font-size

34 |

This text has 56px of font-size

35 |
36 | 37 | ```html 38 |

This text has 24px of font-size

39 |

This text has 45px of font-size

40 |

This text has 32.6px of font-size

41 |

This text has 56px of font-size

42 | ``` 43 | 44 | ### Font Families 45 | 46 | Default font-family in eccentric touch is [Inter](https://fonts.google.com/specimen/Inter?query=inter), which is coming from Google Fonts. 47 | There are 3 variations we have added to font family types, that are `serif`, `sans-serif`, `monospace`. 48 | 49 | | Class Name | CSS Property | Font Family / Name | Use Case / Output | 50 | |------------|--------------|--------------------|-------------------| 51 | | `font-sans-serif` | font-family: 'Inter', sans-serif | [Inter](https://fonts.google.com/specimen/Inter) |

Sans Serif Font

| 52 | | `font-serif` | font-family: 'Lora', serif; | [Lora](https://fonts.google.com/specimen/Lora) |

Serif Font

| 53 | | `font-monospace` | font-family: 'Space Mono', monospace; | [Space Mono](https://fonts.google.com/specimen/Space+Mono) |

Monospace Font

| -------------------------------------------------------------------------------- /docs/docs/Core/Typography/FontStyles.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Font Style 6 | 7 | | Class Name | Value | CSS Property | Use Case / Output | 8 | |------------|-------|--------------|-------------------| 9 | | `font-style-normal` | Normal | font-style: normal; |

Normal font styling

| 10 | | `font-style-italic` | Italic | font-style: italic; |

Italic font styling

| 11 | | `font-style-oblique` | Oblique | font-style: oblique; |

Oblique font styling

| 12 | | `font-style-inherit` | Inherit | font-style: inherit; |

Inherit font styling

| 13 | | `font-style-initial` | Initial | font-style: initial; |

Initial font styling

| 14 | | `font-style-revert` | Revert | font-style: revert; |

Revert font styling

| 15 | | `font-style-unset` | Unset | font-style: unset; |

Unset font styling

| -------------------------------------------------------------------------------- /docs/docs/Core/Typography/FontWeights.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Font Weights 6 | 7 | ## Value based Font Weights 8 | 9 | | Class Name | Font | CSS Property | 10 | |------------|------------|--------------| 11 | | `font-weight-100` | 100 | font-weight: 100; | 12 | | `font-weight-200` | 200 | font-weight: 200; | 13 | | `font-weight-300` | 300 | font-weight: 300; | 14 | | `font-weight-400` | 400 | font-weight: 400; | 15 | | `font-weight-500` | 500 | font-weight: 500; | 16 | | `font-weight-600` | 600 | font-weight: 600; | 17 | | `font-weight-700` | 700 | font-weight: 700; | 18 | | `font-weight-800` | 800 | font-weight: 800; | 19 | | `font-weight-900` | 900 | font-weight: 900; | 20 | 21 | ## CSS Property types for font-weights 22 | 23 | | Class Name | Value | CSS Property | 24 | |------------|-------|--------------| 25 | | `font-weight-normal` | normal | font-weight: normal; | 26 | | `font-weight-bold` | bold | font-weight: bold; | 27 | | `font-weight-bolder` | bolder | font-weight: bolder; | 28 | | `font-weight-lighter` | lighter | font-weight: lighter; | 29 | | `font-weight-inherit` | inherit | font-weight: inherit; | 30 | | `font-weight-initial` | initial | font-weight: initial; | 31 | | `font-weight-revert` | revert | font-weight: revert; | 32 | | `font-weight-unset` | unset | font-weight: unset; | -------------------------------------------------------------------------------- /docs/docs/Core/Typography/TextAlignment.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # Text Alignment -------------------------------------------------------------------------------- /docs/docs/Core/Typography/TextDecorations.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Text Decorations -------------------------------------------------------------------------------- /docs/docs/Core/Typography/TextOverflow.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Text Overflow 6 | 7 | -------------------------------------------------------------------------------- /docs/docs/Core/Typography/TextTransformations.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Text Transformations 6 | 7 | -------------------------------------------------------------------------------- /docs/docs/Widgets/Buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Buttons 6 | 7 | Use Eccentric Touch's buttons in your webpages, forms, alerts and other components. 8 | The variations for different buttons, styles and implementation techniques are given below. 9 | 10 | ### Examples 11 | 12 | Eccentric Touch contains a bunch of variations for button components, some of the basic ones are listed below 13 | 14 |
15 | 16 | 17 | 18 | Link 19 | Base Link 20 | 21 | 22 |
23 | 24 | ```html 25 | 26 | 27 | 28 | 29 | 30 | 31 | ``` 32 | 33 | ### Button Tags 34 | 35 | You can use the button properties with various HTML tags, such as ``, ``, and of course, with the ` 43 | 44 | 45 | 46 | Link 47 | 48 | 49 | ```html 50 | 51 | 52 | 53 | 54 | Link 55 | ``` 56 | 57 | ### Outline Buttons 58 | 59 | The outline button variation can be implemented by using the class method `outline-btn`. Just need to set `class="outline-btn"` and there will be an outline button. 60 | 61 |
62 | 63 | 64 | 65 | 66 |
67 | 68 | ```html 69 | 70 | 71 | 72 | 73 | ``` 74 | 75 | ### Text Buttons 76 | 77 | The text button variation can be implemented by using the class method `text-btn`. Just need to set `class="text-btn"` and there will be a text button. 78 | 79 |
80 | 81 | 82 | 83 | 84 |
85 | 86 | ```html 87 | 88 | 89 | 90 | 91 | ``` 92 | 93 | ### Links 94 | 95 | The link tag i.e. `` has two variations which can implemented by the following ways, 96 | 97 | 1. Default link, which can be used by using `link` in classes. 98 | 2. Base link, which can be used by using `base-link` in classes 99 | 100 |
101 | Default link 102 | Base link 103 |
104 | 105 | ```html 106 | Default link 107 | Base link 108 | ``` 109 | 110 | You can also go with personalization with your button components, 111 | - You can change font and background color of a `primary-btn` 112 | - You can change font and border color of an `outline-btn` 113 | - Also, you can change the font color of a `text-btn` 114 | 115 |
116 | 117 | 118 | 119 | 120 |
121 | 122 | ```html 123 | 124 | 125 | 126 | 127 | ``` 128 | 129 | #### Personalizing link text 130 | 131 | - You can change the link text color properties as well, 132 | 133 |
134 | Link with purple text 135 | Link with red text 136 | Link with neutral gray text 137 | Link with green text 138 |
139 | 140 | ```html 141 | Link with purple text 142 | Link with red text 143 | Link with neutral gray text 144 | Link with green text 145 | ``` -------------------------------------------------------------------------------- /docs/docs/Widgets/Cards.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Cards 6 | 7 | The card component is added as a widget/component. A card can be implemented by using the `card` class-method. 8 | 9 | ```html 10 |
11 | This is a demo test 12 |
13 | ``` 14 | 15 |
16 | This is a demo test 17 |
18 | 19 |
20 | 21 | - Implementing cards with the shadow property 22 | 23 | ```html 24 |
25 | This is a demo test 26 |
27 |
28 | This is a demo test 29 |
30 |
31 | This is a demo test 32 |
33 |
34 | This is a demo test 35 |
36 |
37 | This is a demo test 38 |
39 | ``` 40 | 41 |
42 | This is a demo test 43 |
44 |
45 | This is a demo test 46 |
47 |
48 | This is a demo test 49 |
50 |
51 | This is a demo test 52 |
53 |
54 | This is a demo test 55 |
-------------------------------------------------------------------------------- /docs/docs/Widgets/Inputs.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Inputs 6 | 7 | Input elements are designed with consistency without changing the native-ness of the HTML components. The list of all the components is mentioned below. 8 | 9 | ## Basic form input elements 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | ``` -------------------------------------------------------------------------------- /docs/docs/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Introduction 6 | 7 | Eccentric Touch is a tool which has a set of widgets, css core properties such as margins, paddings, flex and many more in the form of utility classes. We are providing pretty basic to complex properties to make your frontend styling process easier. 8 | 9 | ## Getting Started 10 | 11 | Start using **Eccentric Touch directly on CodeSandbox** 12 | 13 | - Get started with [Vanilla JS, HTML Template](https://codesandbox.io/s/eccentric-touch-vanilla-js-gofxj) 14 | - Get started with [ReactJS Template](https://codesandbox.io/s/eccentric-touch-react-h8rt0) 15 | - Get started with [VueJS Template](https://codesandbox.io/s/eccentric-touch-vue-erip7) 16 | 17 | Importing Eccentric Touch through a CDN. 18 | 19 | - HTML CDN Import 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | - CSS CDN Import 26 | 27 | ```css 28 | @import url('https://cdn.jsdelivr.net/gh/DesignSystemsOSS/eccentrictouch@master/source/eccentrictouch.css'); 29 | ``` 30 | 31 | *Yaayyy!! You're good to go now!* -------------------------------------------------------------------------------- /docs/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 2 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 3 | 4 | // With JSDoc @type annotations, IDEs can provide config autocompletion 5 | /** @type {import('@docusaurus/types').DocusaurusConfig} */ 6 | (module.exports = { 7 | title: 'Eccentric Touch', 8 | tagline: 'Modern. Scalable design support', 9 | url: 'https://eccentrictouch.thedesignsystems.com/', 10 | baseUrl: '/', 11 | onBrokenLinks: 'throw', 12 | onBrokenMarkdownLinks: 'warn', 13 | favicon: 'img/favicon.ico', 14 | organizationName: 'DesignSystemsOSS', // Usually your GitHub org/user name. 15 | projectName: 'eccentrictouch', // Usually your repo name. 16 | 17 | presets: [ 18 | [ 19 | '@docusaurus/preset-classic', 20 | /** @type {import('@docusaurus/preset-classic').Options} */ 21 | ({ 22 | docs: { 23 | sidebarPath: require.resolve('./sidebars.js'), 24 | // Please change this to your repo. 25 | editUrl: 'https://github.com/DesignSystemsOSS/eccentrictouch/tree/docs/docs', 26 | }, 27 | blog: { 28 | showReadingTime: true, 29 | // Please change this to your repo. 30 | editUrl: 31 | 'https://github.com/DesignSystemsOSS/eccentrictouch/tree/docs/docs/', 32 | }, 33 | theme: { 34 | customCss: require.resolve('./src/css/custom.css'), 35 | }, 36 | }), 37 | ], 38 | ], 39 | 40 | themeConfig: 41 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ 42 | ({ 43 | announcementBar: { 44 | id: "product-revamping-banner", 45 | content: 46 | "What's New! We are building new design support/solutions for developers for developing application designs.", 47 | backgroundColor: "var(--color-green-900)", 48 | textColor: "var(--white)", 49 | isCloseable: false, 50 | }, 51 | navbar: { 52 | title: 'Eccentric Touch Documentation', 53 | logo: { 54 | alt: 'thedesignsystems-logo', 55 | src: 'https://ik.imagekit.io/vjy2bxam20u/TheDesignSystems-Assets/logo-blue-purple_EufNYn0ba.svg?updatedAt=1637436258402', 56 | }, 57 | items: [ 58 | { 59 | type: 'doc', 60 | docId: 'intro', 61 | position: 'left', 62 | label: 'Tutorial', 63 | }, 64 | {to: '/blog', label: 'Blog', position: 'right'}, 65 | {to: '/screencasts', label: 'Screencasts', position: 'left'}, 66 | {to: '/showcase', label: 'Projects Showcase', position: 'right'}, 67 | { 68 | href: 'https://bit.ly/eccentrictouch-docs', 69 | label: 'GitHub', 70 | position: 'right', 71 | }, 72 | ], 73 | }, 74 | footer: { 75 | style: 'dark', 76 | links: [ 77 | { 78 | title: 'Docs', 79 | items: [ 80 | { 81 | label: 'Tutorial', 82 | to: '/docs/intro', 83 | }, 84 | ], 85 | }, 86 | { 87 | title: 'Community', 88 | items: [ 89 | { 90 | label: 'Stack Overflow', 91 | href: 'https://stackoverflow.com/questions/tagged/eccentrictouch', 92 | }, 93 | { 94 | label: 'Discord', 95 | href: 'https://bit.ly/discord-thedesignsystems', 96 | }, 97 | { 98 | label: 'Twitter', 99 | href: 'https://bit.ly/twitter-thedesignsystems', 100 | }, 101 | ], 102 | }, 103 | { 104 | title: 'More', 105 | items: [ 106 | { 107 | label: 'Blog', 108 | to: '/blog', 109 | }, 110 | { 111 | label: 'The DesignSystems - GitHub', 112 | href: 'https://github.com/facebook/docusaurus', 113 | }, 114 | ], 115 | }, 116 | ], 117 | copyright: `Copyright © ${new Date().getFullYear()} Eccentric Touch, by The DesignSystems. Built with Docusaurus.`, 118 | }, 119 | prism: { 120 | theme: lightCodeTheme, 121 | darkTheme: darkCodeTheme, 122 | }, 123 | }), 124 | }); 125 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "2.0.0-beta.6", 18 | "@docusaurus/plugin-content-pages": "^2.0.0-beta.9", 19 | "@docusaurus/preset-classic": "2.0.0-beta.6", 20 | "@mdx-js/react": "^1.6.21", 21 | "@svgr/webpack": "^5.5.0", 22 | "clsx": "^1.1.1", 23 | "file-loader": "^6.2.0", 24 | "markdownlint": "^0.24.0", 25 | "prism-react-renderer": "^1.2.1", 26 | "react": "^17.0.1", 27 | "react-dom": "^17.0.1", 28 | "react-modal": "^3.14.4", 29 | "react-router-dom": "^6.0.2", 30 | "url-loader": "^4.1.1" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.5%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /docs/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | module.exports = { 13 | // By default, Docusaurus generates a sidebar from the docs folder structure 14 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 15 | 16 | // But you can create a sidebar manually 17 | /* 18 | tutorialSidebar: [ 19 | { 20 | type: 'category', 21 | label: 'Tutorial', 22 | items: ['hello'], 23 | }, 24 | ], 25 | */ 26 | }; 27 | -------------------------------------------------------------------------------- /docs/src/components/HomepageFeatures.css: -------------------------------------------------------------------------------- 1 | .code-sandbox-embed { 2 | width: 800px; 3 | height: 780px; 4 | } 5 | /*# sourceMappingURL=HomepageFeatures.css.map */ -------------------------------------------------------------------------------- /docs/src/components/HomepageFeatures.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,mBAAmB,CAAC;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd", 4 | "sources": [ 5 | "HomepageFeatures.scss" 6 | ], 7 | "names": [], 8 | "file": "HomepageFeatures.css" 9 | } -------------------------------------------------------------------------------- /docs/src/components/HomepageFeatures.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import './HomepageFeatures.css'; 4 | 5 | export default function HomepageFeatures() { 6 | return ( 7 |
8 | {/* content for the website */} 9 |
10 |
11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /docs/src/components/HomepageFeatures.scss: -------------------------------------------------------------------------------- 1 | .code-sandbox-embed { 2 | width: 800px; 3 | height: 780px; 4 | } -------------------------------------------------------------------------------- /docs/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | 9 | /* using eccentric touch to show the demo */ 10 | @import url('../../../source/eccentrictouch.css'); 11 | 12 | :root { 13 | --ifm-color-primary: var(--color-purple-900); 14 | --ifm-color-primary-dark: rgb(33, 175, 144); 15 | --ifm-color-primary-darker: rgb(31, 165, 136); 16 | --ifm-color-primary-darkest: rgb(26, 136, 112); 17 | --ifm-color-primary-light: rgb(70, 203, 174); 18 | --ifm-color-primary-lighter: rgb(102, 212, 189); 19 | --ifm-color-primary-lightest: rgb(146, 224, 208); 20 | --ifm-code-font-size: 95%; 21 | } 22 | 23 | .docusaurus-highlight-code-line { 24 | background-color: rgba(0, 0, 0, 0.1); 25 | display: block; 26 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 27 | padding: 0 var(--ifm-pre-padding); 28 | } 29 | 30 | html[data-theme='dark'] .docusaurus-highlight-code-line { 31 | background-color: rgba(0, 0, 0, 0.3); 32 | } 33 | 34 | html[data-theme="dark"] .button-list-wrapper { 35 | background: transparent; 36 | } 37 | 38 | html[data-theme="dark"] a { 39 | color: white; 40 | } 41 | 42 | html[data-theme="dark"] * { 43 | color: white; 44 | } 45 | 46 | .button-list-wrapper { 47 | display: flex; 48 | align-items: center; 49 | gap: 1em; 50 | margin-top: 1em; 51 | margin-bottom: 1em; 52 | background-color: #fafafa22; 53 | border: 0.8px solid var(--neutral-gray-300); 54 | padding: 6px 8px; 55 | } 56 | 57 | .color-shade-box { 58 | width: 54px; 59 | height: 32px; 60 | border-radius: 8px; 61 | } 62 | 63 | .input-grid { 64 | display: grid; 65 | grid-template-columns: auto auto; 66 | gap: 12px; 67 | row-gap: 12px; 68 | } 69 | 70 | .video-wrapper-card { 71 | transition: all 0.2s ease-in-out; 72 | } 73 | 74 | .video-wrapper-card:hover { 75 | filter: grayscale(90%); 76 | transform: translateY(-4px); 77 | } 78 | 79 | .border-boxes { 80 | width: 320px; 81 | height: 120px; 82 | } -------------------------------------------------------------------------------- /docs/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from './index.module.css'; 7 | import HomepageFeatures from '../components/HomepageFeatures'; 8 | 9 | function HomepageHeader() { 10 | const {siteConfig} = useDocusaurusContext(); 11 | return ( 12 |
13 |
14 |

Modern. Scalable design support

15 |

16 | We have created Eccentric Touch to give a creative experience 17 | while creating frontend applications, UIs and components. 18 | It has a set of utility classes and designed components to solve 19 | all of your design related issues. Also, the project is being open-sourced 🚀 20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | ); 30 | } 31 | 32 | export default function Home() { 33 | const {siteConfig} = useDocusaurusContext(); 34 | return ( 35 | 38 | 39 |
40 | 41 |
42 | 43 | ); 44 | } 45 | 46 | {/*

{siteConfig.title}

47 |

{siteConfig.tagline}

48 |
49 | 52 | Eccentric Touch Tutorial - Get Started 53 | 54 |
*/} -------------------------------------------------------------------------------- /docs/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | position: relative; 9 | overflow: hidden; 10 | } 11 | 12 | @media screen and (max-width: 966px) { 13 | .heroBanner { 14 | padding: 2rem; 15 | } 16 | } 17 | 18 | .buttons { 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | -------------------------------------------------------------------------------- /docs/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /docs/src/pages/screencasts/__screencasts-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Getting started with Margins and Paddings", 4 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Margins_and_Padding_-_v1_MNk2KxEN_-p_.svg?updatedAt=1637354085204" 5 | }, 6 | { 7 | "title": "How to Buttons? 🔥", 8 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Buttons_-_v1_juj_87HtJKo.svg?updatedAt=1637354084484" 9 | }, 10 | { 11 | "title": "Becoming a magician with Cards and Elevations", 12 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Cards_and_Elevations_-_v1_rhx1hI5a3L-5.svg?updatedAt=1637354084507" 13 | }, 14 | { 15 | "title": "Playing with Colors and Borders", 16 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Colors_and_Borders_-_v1_UQkKAwrxX3Mi.svg?updatedAt=1637354084499" 17 | }, 18 | { 19 | "title": "Getting started with Input Elements", 20 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Input_Elements_-_v1_i-A6A3O8tDSC.svg?updatedAt=1637354084668" 21 | }, 22 | { 23 | "title": "Understanding Typography in Eccentric Touch", 24 | "thumbnail": "https://ik.imagekit.io/vjy2bxam20u/YouTube_Videos_Assets/Screencasts/v1/Typography_-_v1_alT3HD6d2dKa.svg?updatedAt=1637354085374" 25 | } 26 | ] -------------------------------------------------------------------------------- /docs/src/pages/screencasts/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from '../index.module.css'; 7 | import ReactModal from 'react-modal'; 8 | 9 | // videos content data from JSON as an object 10 | import YouTubeVideosData from './__screencasts-data.json'; 11 | 12 | ReactModal.setAppElement('#__docusaurus'); 13 | 14 | export default function Screencasts() { 15 | const [youtubeVideos] = useState(YouTubeVideosData); 16 | return ( 17 | 18 |
19 |
20 |

Screencasts. Understanding Eccentric Touch

21 |
26 | 27 | 28 |
29 |
30 |
31 |
40 | {youtubeVideos.map((video, index) => ( 41 | 45 | ))} 46 |
47 | 48 | ) 49 | } 50 | 51 | function YoutubeVideoCard(__YoutubeVideoDetails) { 52 | const [youtubeVideoModalRef, setYoutubeVideoModal] = useState(false); 53 | return ( 54 |
setYoutubeVideoModal(true)} 56 | key={__YoutubeVideoDetails.index} 57 | > 58 |
69 | {__YoutubeVideoDetails.title} 77 |
78 |

79 | {__YoutubeVideoDetails.title} 80 |

81 | setYoutubeVideoModal(false)} 85 | style={{ 86 | overlay: { 87 | backgroundColor: 'var(--color-purple-700)' 88 | }, 89 | content: { 90 | width: '60%', 91 | height: 'fit-content', 92 | padding: '1.6em', 93 | margin: 'auto', 94 | boxShadow: '0px 6px 20px #00000045' 95 | } 96 | }} 97 | > 98 | 101 | 102 |
103 | ) 104 | } -------------------------------------------------------------------------------- /docs/src/pages/showcase/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from '../index.module.css'; 7 | import ReactModal from 'react-modal'; 8 | 9 | ReactModal.setAppElement('#__docusaurus'); 10 | 11 | export default function Showcase() { 12 | return ( 13 | 14 |
15 |
16 |

Showcasing projects using
Eccentric Touch

17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 | ) 25 | } -------------------------------------------------------------------------------- /docs/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/.nojekyll -------------------------------------------------------------------------------- /docs/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/img/docusaurus.png -------------------------------------------------------------------------------- /docs/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/img/favicon.ico -------------------------------------------------------------------------------- /docs/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/static/img/logoTheDesignSystems.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/img/logoTheDesignSystems.png -------------------------------------------------------------------------------- /docs/static/img/tutorial/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/img/tutorial/docsVersionDropdown.png -------------------------------------------------------------------------------- /docs/static/img/tutorial/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignSystemsOSS/eccentrictouch/c992dd0aed17a7811e769d3f0332dc57c71332ab/docs/static/img/tutorial/localeDropdown.png -------------------------------------------------------------------------------- /docs/static/img/undraw_docusaurus_tree.svg: -------------------------------------------------------------------------------- 1 | docu_tree -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // const gulp = require('gulp'); 2 | // const minifyPipeline = require('pipeline-minify-css'); 3 | 4 | // gulp.task('default', async function() { 5 | // return gulp 6 | // .src('./source/eccentrictouch-core/**/*.css') 7 | // .pipe(minifyPipeline.minifyCSS()) 8 | // }); 9 | 10 | const { src, dest, watch, series } = require('gulp'); 11 | const sass = require('gulp-sass')(require('sass')); 12 | 13 | function sassTaskDev() { 14 | return src(['source/**/*.scss', '!source/**/*.test.scss']) 15 | .pipe(sass().on('error', sass.logError)) 16 | .pipe(dest('./dist')); 17 | } 18 | 19 | function watchTask() { 20 | watch(['source/**/*.scss', '!source/**/*.test.scss'], sassTaskDev()); 21 | } 22 | 23 | exports.default = series( 24 | sassTaskDev, 25 | // watchTask 26 | ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eccentrictouch", 3 | "version": "1.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/DesignSystemsOSS/eccentrictouch.git" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/DesignSystemsOSS/eccentrictouch/issues" 20 | }, 21 | "homepage": "https://github.com/DesignSystems/eccentrictouch#readme", 22 | "devDependencies": { 23 | "gulp": "^4.0.2", 24 | "gulp-sass": "^5.0.0", 25 | "pipeline-minify-css": "^1.0.1", 26 | "sass": "^1.43.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /source/eccentrictouch-core/borders/borders.scss: -------------------------------------------------------------------------------- 1 | 2 | $border-neutral-color-400: #A9A9A9; 3 | 4 | $border-default: 1px solid $border-neutral-color-400; 5 | $border-light: 0.6px solid $border-neutral-color-400; 6 | $border-medium: 1.6px solid $border-neutral-color-400; 7 | $border-high: 2.4px solid $border-neutral-color-400; 8 | 9 | .border { 10 | border: $border-default; 11 | } 12 | 13 | .border-light { 14 | border: $border-light; 15 | } 16 | 17 | .border-medium { 18 | border: $border-medium 19 | } 20 | 21 | .border-high { 22 | border: $border-high; 23 | } 24 | 25 | :root { 26 | --border: #{$border-default}; 27 | --border-light: #{$border-light}; 28 | --border-medium: #{$border-medium}; 29 | --border-high: #{$border-high}; 30 | } 31 | 32 | // border-width properties - ranging from 1 to 100 pixel units 33 | $max-border-width-value: 100; 34 | @for $count from 1 through $max-border-width-value { 35 | .border-width-#{$count} { 36 | border-width: #{$count}px; 37 | } 38 | .border-right-width-#{$count} { 39 | border-right-width: #{$count}px; 40 | } 41 | .border-left-width-#{$count} { 42 | border-left-width: #{$count}px; 43 | } 44 | .border-top-width-#{$count} { 45 | border-top-width: #{$count}px; 46 | } 47 | .border-bottom-width-#{$count} { 48 | border-bottom-width: #{$count}px; 49 | } 50 | } 51 | 52 | $max-border-radius-value: 100; 53 | @for $count from 1 through $max-border-radius-value { 54 | .border-radius-#{$count} { 55 | border-radius: #{$count}px; 56 | } 57 | } 58 | 59 | // border-widths - decimal values (ranging from 0.1 to 100.9) 60 | $max-border-decimal-value: 9; 61 | @for $base-value from 0 through $max-border-width-value { 62 | @for $decimal-value from 1 through $max-border-decimal-value { 63 | .border-width-#{$base-value}pt#{$decimal-value} { 64 | border-width: #{($base-value * 10 + $decimal-value)/10}px; 65 | } 66 | .border-right-width-#{$base-value}pt#{$decimal-value} { 67 | border-right-width: #{($base-value * 10 + $decimal-value)/10}px; 68 | } 69 | .border-left-width-#{$base-value}pt#{$decimal-value} { 70 | border-left-width: #{($base-value * 10 + $decimal-value)/10}px; 71 | } 72 | .border-top-width-#{$base-value}pt#{$decimal-value} { 73 | border-top-width: #{($base-value * 10 + $decimal-value)/10}px; 74 | } 75 | .border-bottom-width-#{$base-value}pt#{$decimal-value} { 76 | border-bottom-width: #{($base-value * 10 + $decimal-value)/10}px; 77 | } 78 | } 79 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/borders/index.css: -------------------------------------------------------------------------------- 1 | @import url('./borders.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/colors/colors.css: -------------------------------------------------------------------------------- 1 | .bg-gradient { 2 | background: linear-gradient(45deg, #ff61d3 10%, #b318ff 40%, #b318ff 60%, #00f0ff 90%); 3 | } 4 | 5 | .gradient-text { 6 | background-color: #000; 7 | background: linear-gradient(45deg, #ff61d3 10%, #b318ff 40%, #b318ff 60%, #00f0ff 90%); 8 | background-size: 100%; 9 | background-repeat: repeat; 10 | -webkit-background-clip: text; 11 | -webkit-text-fill-color: transparent; 12 | -moz-background-clip: text; 13 | -moz-text-fill-color: transparent; 14 | } 15 | 16 | .bg-gradient-blue-to-purple { 17 | background: linear-gradient(45deg, #6A8BFF, #5300BC); 18 | } 19 | 20 | .gradient-text-blue-to-purple { 21 | background-color: #000; 22 | background: linear-gradient(45deg, #6A8BFF, #5300BC); 23 | background-size: 100%; 24 | background-repeat: repeat; 25 | -webkit-background-clip: text; 26 | -webkit-text-fill-color: transparent; 27 | -moz-background-clip: text; 28 | -moz-text-fill-color: transparent; 29 | } 30 | 31 | .bg-gradient-orange-to-red { 32 | background: linear-gradient(45deg, #FF0000, #FFC700); 33 | } 34 | 35 | .gradient-text-orange-to-red { 36 | background-color: #000; 37 | background: linear-gradient(45deg, #FF0000, #FFC700); 38 | background-size: 100%; 39 | background-repeat: repeat; 40 | -webkit-background-clip: text; 41 | -webkit-text-fill-color: transparent; 42 | -moz-background-clip: text; 43 | -moz-text-fill-color: transparent; 44 | } 45 | 46 | .bg-gradient-pink-to-red { 47 | background: linear-gradient(45deg, #FF2727, #FF7B8F); 48 | } 49 | 50 | .gradient-text-pink-to-red { 51 | background-color: #000; 52 | background: linear-gradient(45deg, #FF2727, #FF7B8F); 53 | background-size: 100%; 54 | background-repeat: repeat; 55 | -webkit-background-clip: text; 56 | -webkit-text-fill-color: transparent; 57 | -moz-background-clip: text; 58 | -moz-text-fill-color: transparent; 59 | } 60 | 61 | .text-color-white { 62 | color: white !important; 63 | } 64 | 65 | .bg-color-white { 66 | background-color: white !important; 67 | } 68 | 69 | .border-color-white { 70 | border-color: white !important; 71 | } 72 | 73 | .fill-color-white { 74 | fill: white !important; 75 | } 76 | 77 | .text-color-black { 78 | color: black !important; 79 | } 80 | 81 | .bg-color-black { 82 | background-color: black !important; 83 | } 84 | 85 | .border-color-black { 86 | border-color: black !important; 87 | } 88 | 89 | .fill-color-black { 90 | fill: black !important; 91 | } 92 | 93 | .color-blue-100 { 94 | color: rgba(24, 75, 255, 0.1) !important; 95 | } 96 | 97 | .bg-color-blue-100 { 98 | background-color: rgba(24, 75, 255, 0.1) !important; 99 | } 100 | 101 | .border-color-blue-100 { 102 | border-color: rgba(24, 75, 255, 0.1) !important; 103 | } 104 | 105 | .fill-color-blue-100 { 106 | fill: rgba(24, 75, 255, 0.1) !important; 107 | } 108 | 109 | .color-blue-200 { 110 | color: rgba(24, 75, 255, 0.2) !important; 111 | } 112 | 113 | .bg-color-blue-200 { 114 | background-color: rgba(24, 75, 255, 0.2) !important; 115 | } 116 | 117 | .border-color-blue-200 { 118 | border-color: rgba(24, 75, 255, 0.2) !important; 119 | } 120 | 121 | .fill-color-blue-200 { 122 | fill: rgba(24, 75, 255, 0.2) !important; 123 | } 124 | 125 | .color-blue-300 { 126 | color: rgba(24, 75, 255, 0.3) !important; 127 | } 128 | 129 | .bg-color-blue-300 { 130 | background-color: rgba(24, 75, 255, 0.3) !important; 131 | } 132 | 133 | .border-color-blue-300 { 134 | border-color: rgba(24, 75, 255, 0.3) !important; 135 | } 136 | 137 | .fill-color-blue-300 { 138 | fill: rgba(24, 75, 255, 0.3) !important; 139 | } 140 | 141 | .color-blue-400 { 142 | color: rgba(24, 75, 255, 0.4) !important; 143 | } 144 | 145 | .bg-color-blue-400 { 146 | background-color: rgba(24, 75, 255, 0.4) !important; 147 | } 148 | 149 | .border-color-blue-400 { 150 | border-color: rgba(24, 75, 255, 0.4) !important; 151 | } 152 | 153 | .fill-color-blue-400 { 154 | fill: rgba(24, 75, 255, 0.4) !important; 155 | } 156 | 157 | .color-blue-500 { 158 | color: rgba(24, 75, 255, 0.5) !important; 159 | } 160 | 161 | .bg-color-blue-500 { 162 | background-color: rgba(24, 75, 255, 0.5) !important; 163 | } 164 | 165 | .border-color-blue-500 { 166 | border-color: rgba(24, 75, 255, 0.5) !important; 167 | } 168 | 169 | .fill-color-blue-500 { 170 | fill: rgba(24, 75, 255, 0.5) !important; 171 | } 172 | 173 | .color-blue-600 { 174 | color: rgba(24, 75, 255, 0.6) !important; 175 | } 176 | 177 | .bg-color-blue-600 { 178 | background-color: rgba(24, 75, 255, 0.6) !important; 179 | } 180 | 181 | .border-color-blue-600 { 182 | border-color: rgba(24, 75, 255, 0.6) !important; 183 | } 184 | 185 | .fill-color-blue-600 { 186 | fill: rgba(24, 75, 255, 0.6) !important; 187 | } 188 | 189 | .color-blue-700 { 190 | color: rgba(24, 75, 255, 0.7) !important; 191 | } 192 | 193 | .bg-color-blue-700 { 194 | background-color: rgba(24, 75, 255, 0.7) !important; 195 | } 196 | 197 | .border-color-blue-700 { 198 | border-color: rgba(24, 75, 255, 0.7) !important; 199 | } 200 | 201 | .fill-color-blue-700 { 202 | fill: rgba(24, 75, 255, 0.7) !important; 203 | } 204 | 205 | .color-blue-800 { 206 | color: rgba(24, 75, 255, 0.8) !important; 207 | } 208 | 209 | .bg-color-blue-800 { 210 | background-color: rgba(24, 75, 255, 0.8) !important; 211 | } 212 | 213 | .border-color-blue-800 { 214 | border-color: rgba(24, 75, 255, 0.8) !important; 215 | } 216 | 217 | .fill-color-blue-800 { 218 | fill: rgba(24, 75, 255, 0.8) !important; 219 | } 220 | 221 | .color-blue-900 { 222 | color: rgba(24, 75, 255, 0.9) !important; 223 | } 224 | 225 | .bg-color-blue-900 { 226 | background-color: rgba(24, 75, 255, 0.9) !important; 227 | } 228 | 229 | .border-color-blue-900 { 230 | border-color: rgba(24, 75, 255, 0.9) !important; 231 | } 232 | 233 | .fill-color-blue-900 { 234 | fill: rgba(24, 75, 255, 0.9) !important; 235 | } 236 | 237 | .color-purple-100 { 238 | color: rgba(125, 26, 255, 0.1) !important; 239 | } 240 | 241 | .bg-color-purple-100 { 242 | background-color: rgba(125, 26, 255, 0.1) !important; 243 | } 244 | 245 | .border-color-purple-100 { 246 | border-color: rgba(125, 26, 255, 0.1) !important; 247 | } 248 | 249 | .fill-color-purple-100 { 250 | fill: rgba(125, 26, 255, 0.1) !important; 251 | } 252 | 253 | .color-purple-200 { 254 | color: rgba(125, 26, 255, 0.2) !important; 255 | } 256 | 257 | .bg-color-purple-200 { 258 | background-color: rgba(125, 26, 255, 0.2) !important; 259 | } 260 | 261 | .border-color-purple-200 { 262 | border-color: rgba(125, 26, 255, 0.2) !important; 263 | } 264 | 265 | .fill-color-purple-200 { 266 | fill: rgba(125, 26, 255, 0.2) !important; 267 | } 268 | 269 | .color-purple-300 { 270 | color: rgba(125, 26, 255, 0.3) !important; 271 | } 272 | 273 | .bg-color-purple-300 { 274 | background-color: rgba(125, 26, 255, 0.3) !important; 275 | } 276 | 277 | .border-color-purple-300 { 278 | border-color: rgba(125, 26, 255, 0.3) !important; 279 | } 280 | 281 | .fill-color-purple-300 { 282 | fill: rgba(125, 26, 255, 0.3) !important; 283 | } 284 | 285 | .color-purple-400 { 286 | color: rgba(125, 26, 255, 0.4) !important; 287 | } 288 | 289 | .bg-color-purple-400 { 290 | background-color: rgba(125, 26, 255, 0.4) !important; 291 | } 292 | 293 | .border-color-purple-400 { 294 | border-color: rgba(125, 26, 255, 0.4) !important; 295 | } 296 | 297 | .fill-color-purple-400 { 298 | fill: rgba(125, 26, 255, 0.4) !important; 299 | } 300 | 301 | .color-purple-500 { 302 | color: rgba(125, 26, 255, 0.5) !important; 303 | } 304 | 305 | .bg-color-purple-500 { 306 | background-color: rgba(125, 26, 255, 0.5) !important; 307 | } 308 | 309 | .border-color-purple-500 { 310 | border-color: rgba(125, 26, 255, 0.5) !important; 311 | } 312 | 313 | .fill-color-purple-500 { 314 | fill: rgba(125, 26, 255, 0.5) !important; 315 | } 316 | 317 | .color-purple-600 { 318 | color: rgba(125, 26, 255, 0.6) !important; 319 | } 320 | 321 | .bg-color-purple-600 { 322 | background-color: rgba(125, 26, 255, 0.6) !important; 323 | } 324 | 325 | .border-color-purple-600 { 326 | border-color: rgba(125, 26, 255, 0.6) !important; 327 | } 328 | 329 | .fill-color-purple-600 { 330 | fill: rgba(125, 26, 255, 0.6) !important; 331 | } 332 | 333 | .color-purple-700 { 334 | color: rgba(125, 26, 255, 0.7) !important; 335 | } 336 | 337 | .bg-color-purple-700 { 338 | background-color: rgba(125, 26, 255, 0.7) !important; 339 | } 340 | 341 | .border-color-purple-700 { 342 | border-color: rgba(125, 26, 255, 0.7) !important; 343 | } 344 | 345 | .fill-color-purple-700 { 346 | fill: rgba(125, 26, 255, 0.7) !important; 347 | } 348 | 349 | .color-purple-800 { 350 | color: rgba(125, 26, 255, 0.8) !important; 351 | } 352 | 353 | .bg-color-purple-800 { 354 | background-color: rgba(125, 26, 255, 0.8) !important; 355 | } 356 | 357 | .border-color-purple-800 { 358 | border-color: rgba(125, 26, 255, 0.8) !important; 359 | } 360 | 361 | .fill-color-purple-800 { 362 | fill: rgba(125, 26, 255, 0.8) !important; 363 | } 364 | 365 | .color-purple-900 { 366 | color: rgba(125, 26, 255, 0.9) !important; 367 | } 368 | 369 | .bg-color-purple-900 { 370 | background-color: rgba(125, 26, 255, 0.9) !important; 371 | } 372 | 373 | .border-color-purple-900 { 374 | border-color: rgba(125, 26, 255, 0.9) !important; 375 | } 376 | 377 | .fill-color-purple-900 { 378 | fill: rgba(125, 26, 255, 0.9) !important; 379 | } 380 | 381 | .color-red-100 { 382 | color: rgba(192, 0, 0, 0.1) !important; 383 | } 384 | 385 | .bg-color-red-100 { 386 | background-color: rgba(192, 0, 0, 0.1) !important; 387 | } 388 | 389 | .border-color-red-100 { 390 | border-color: rgba(192, 0, 0, 0.1) !important; 391 | } 392 | 393 | .fill-color-red-100 { 394 | fill: rgba(192, 0, 0, 0.1) !important; 395 | } 396 | 397 | .color-red-200 { 398 | color: rgba(192, 0, 0, 0.2) !important; 399 | } 400 | 401 | .bg-color-red-200 { 402 | background-color: rgba(192, 0, 0, 0.2) !important; 403 | } 404 | 405 | .border-color-red-200 { 406 | border-color: rgba(192, 0, 0, 0.2) !important; 407 | } 408 | 409 | .fill-color-red-200 { 410 | fill: rgba(192, 0, 0, 0.2) !important; 411 | } 412 | 413 | .color-red-300 { 414 | color: rgba(192, 0, 0, 0.3) !important; 415 | } 416 | 417 | .bg-color-red-300 { 418 | background-color: rgba(192, 0, 0, 0.3) !important; 419 | } 420 | 421 | .border-color-red-300 { 422 | border-color: rgba(192, 0, 0, 0.3) !important; 423 | } 424 | 425 | .fill-color-red-300 { 426 | fill: rgba(192, 0, 0, 0.3) !important; 427 | } 428 | 429 | .color-red-400 { 430 | color: rgba(192, 0, 0, 0.4) !important; 431 | } 432 | 433 | .bg-color-red-400 { 434 | background-color: rgba(192, 0, 0, 0.4) !important; 435 | } 436 | 437 | .border-color-red-400 { 438 | border-color: rgba(192, 0, 0, 0.4) !important; 439 | } 440 | 441 | .fill-color-red-400 { 442 | fill: rgba(192, 0, 0, 0.4) !important; 443 | } 444 | 445 | .color-red-500 { 446 | color: rgba(192, 0, 0, 0.5) !important; 447 | } 448 | 449 | .bg-color-red-500 { 450 | background-color: rgba(192, 0, 0, 0.5) !important; 451 | } 452 | 453 | .border-color-red-500 { 454 | border-color: rgba(192, 0, 0, 0.5) !important; 455 | } 456 | 457 | .fill-color-red-500 { 458 | fill: rgba(192, 0, 0, 0.5) !important; 459 | } 460 | 461 | .color-red-600 { 462 | color: rgba(192, 0, 0, 0.6) !important; 463 | } 464 | 465 | .bg-color-red-600 { 466 | background-color: rgba(192, 0, 0, 0.6) !important; 467 | } 468 | 469 | .border-color-red-600 { 470 | border-color: rgba(192, 0, 0, 0.6) !important; 471 | } 472 | 473 | .fill-color-red-600 { 474 | fill: rgba(192, 0, 0, 0.6) !important; 475 | } 476 | 477 | .color-red-700 { 478 | color: rgba(192, 0, 0, 0.7) !important; 479 | } 480 | 481 | .bg-color-red-700 { 482 | background-color: rgba(192, 0, 0, 0.7) !important; 483 | } 484 | 485 | .border-color-red-700 { 486 | border-color: rgba(192, 0, 0, 0.7) !important; 487 | } 488 | 489 | .fill-color-red-700 { 490 | fill: rgba(192, 0, 0, 0.7) !important; 491 | } 492 | 493 | .color-red-800 { 494 | color: rgba(192, 0, 0, 0.8) !important; 495 | } 496 | 497 | .bg-color-red-800 { 498 | background-color: rgba(192, 0, 0, 0.8) !important; 499 | } 500 | 501 | .border-color-red-800 { 502 | border-color: rgba(192, 0, 0, 0.8) !important; 503 | } 504 | 505 | .fill-color-red-800 { 506 | fill: rgba(192, 0, 0, 0.8) !important; 507 | } 508 | 509 | .color-red-900 { 510 | color: rgba(192, 0, 0, 0.9) !important; 511 | } 512 | 513 | .bg-color-red-900 { 514 | background-color: rgba(192, 0, 0, 0.9) !important; 515 | } 516 | 517 | .border-color-red-900 { 518 | border-color: rgba(192, 0, 0, 0.9) !important; 519 | } 520 | 521 | .fill-color-red-900 { 522 | fill: rgba(192, 0, 0, 0.9) !important; 523 | } 524 | 525 | .color-yellow-100 { 526 | color: rgba(255, 220, 34, 0.1) !important; 527 | } 528 | 529 | .bg-color-yellow-100 { 530 | background-color: rgba(255, 220, 34, 0.1) !important; 531 | } 532 | 533 | .border-color-yellow-100 { 534 | border-color: rgba(255, 220, 34, 0.1) !important; 535 | } 536 | 537 | .fill-color-yellow-100 { 538 | fill: rgba(255, 220, 34, 0.1) !important; 539 | } 540 | 541 | .color-yellow-200 { 542 | color: rgba(255, 220, 34, 0.2) !important; 543 | } 544 | 545 | .bg-color-yellow-200 { 546 | background-color: rgba(255, 220, 34, 0.2) !important; 547 | } 548 | 549 | .border-color-yellow-200 { 550 | border-color: rgba(255, 220, 34, 0.2) !important; 551 | } 552 | 553 | .fill-color-yellow-200 { 554 | fill: rgba(255, 220, 34, 0.2) !important; 555 | } 556 | 557 | .color-yellow-300 { 558 | color: rgba(255, 220, 34, 0.3) !important; 559 | } 560 | 561 | .bg-color-yellow-300 { 562 | background-color: rgba(255, 220, 34, 0.3) !important; 563 | } 564 | 565 | .border-color-yellow-300 { 566 | border-color: rgba(255, 220, 34, 0.3) !important; 567 | } 568 | 569 | .fill-color-yellow-300 { 570 | fill: rgba(255, 220, 34, 0.3) !important; 571 | } 572 | 573 | .color-yellow-400 { 574 | color: rgba(255, 220, 34, 0.4) !important; 575 | } 576 | 577 | .bg-color-yellow-400 { 578 | background-color: rgba(255, 220, 34, 0.4) !important; 579 | } 580 | 581 | .border-color-yellow-400 { 582 | border-color: rgba(255, 220, 34, 0.4) !important; 583 | } 584 | 585 | .fill-color-yellow-400 { 586 | fill: rgba(255, 220, 34, 0.4) !important; 587 | } 588 | 589 | .color-yellow-500 { 590 | color: rgba(255, 220, 34, 0.5) !important; 591 | } 592 | 593 | .bg-color-yellow-500 { 594 | background-color: rgba(255, 220, 34, 0.5) !important; 595 | } 596 | 597 | .border-color-yellow-500 { 598 | border-color: rgba(255, 220, 34, 0.5) !important; 599 | } 600 | 601 | .fill-color-yellow-500 { 602 | fill: rgba(255, 220, 34, 0.5) !important; 603 | } 604 | 605 | .color-yellow-600 { 606 | color: rgba(255, 220, 34, 0.6) !important; 607 | } 608 | 609 | .bg-color-yellow-600 { 610 | background-color: rgba(255, 220, 34, 0.6) !important; 611 | } 612 | 613 | .border-color-yellow-600 { 614 | border-color: rgba(255, 220, 34, 0.6) !important; 615 | } 616 | 617 | .fill-color-yellow-600 { 618 | fill: rgba(255, 220, 34, 0.6) !important; 619 | } 620 | 621 | .color-yellow-700 { 622 | color: rgba(255, 220, 34, 0.7) !important; 623 | } 624 | 625 | .bg-color-yellow-700 { 626 | background-color: rgba(255, 220, 34, 0.7) !important; 627 | } 628 | 629 | .border-color-yellow-700 { 630 | border-color: rgba(255, 220, 34, 0.7) !important; 631 | } 632 | 633 | .fill-color-yellow-700 { 634 | fill: rgba(255, 220, 34, 0.7) !important; 635 | } 636 | 637 | .color-yellow-800 { 638 | color: rgba(255, 220, 34, 0.8) !important; 639 | } 640 | 641 | .bg-color-yellow-800 { 642 | background-color: rgba(255, 220, 34, 0.8) !important; 643 | } 644 | 645 | .border-color-yellow-800 { 646 | border-color: rgba(255, 220, 34, 0.8) !important; 647 | } 648 | 649 | .fill-color-yellow-800 { 650 | fill: rgba(255, 220, 34, 0.8) !important; 651 | } 652 | 653 | .color-yellow-900 { 654 | color: rgba(255, 220, 34, 0.9) !important; 655 | } 656 | 657 | .bg-color-yellow-900 { 658 | background-color: rgba(255, 220, 34, 0.9) !important; 659 | } 660 | 661 | .border-color-yellow-900 { 662 | border-color: rgba(255, 220, 34, 0.9) !important; 663 | } 664 | 665 | .fill-color-yellow-900 { 666 | fill: rgba(255, 220, 34, 0.9) !important; 667 | } 668 | 669 | .color-green-100 { 670 | color: rgba(0, 151, 88, 0.1) !important; 671 | } 672 | 673 | .bg-color-green-100 { 674 | background-color: rgba(0, 151, 88, 0.1) !important; 675 | } 676 | 677 | .border-color-green-100 { 678 | border-color: rgba(0, 151, 88, 0.1) !important; 679 | } 680 | 681 | .fill-color-green-100 { 682 | fill: rgba(0, 151, 88, 0.1) !important; 683 | } 684 | 685 | .color-green-200 { 686 | color: rgba(0, 151, 88, 0.2) !important; 687 | } 688 | 689 | .bg-color-green-200 { 690 | background-color: rgba(0, 151, 88, 0.2) !important; 691 | } 692 | 693 | .border-color-green-200 { 694 | border-color: rgba(0, 151, 88, 0.2) !important; 695 | } 696 | 697 | .fill-color-green-200 { 698 | fill: rgba(0, 151, 88, 0.2) !important; 699 | } 700 | 701 | .color-green-300 { 702 | color: rgba(0, 151, 88, 0.3) !important; 703 | } 704 | 705 | .bg-color-green-300 { 706 | background-color: rgba(0, 151, 88, 0.3) !important; 707 | } 708 | 709 | .border-color-green-300 { 710 | border-color: rgba(0, 151, 88, 0.3) !important; 711 | } 712 | 713 | .fill-color-green-300 { 714 | fill: rgba(0, 151, 88, 0.3) !important; 715 | } 716 | 717 | .color-green-400 { 718 | color: rgba(0, 151, 88, 0.4) !important; 719 | } 720 | 721 | .bg-color-green-400 { 722 | background-color: rgba(0, 151, 88, 0.4) !important; 723 | } 724 | 725 | .border-color-green-400 { 726 | border-color: rgba(0, 151, 88, 0.4) !important; 727 | } 728 | 729 | .fill-color-green-400 { 730 | fill: rgba(0, 151, 88, 0.4) !important; 731 | } 732 | 733 | .color-green-500 { 734 | color: rgba(0, 151, 88, 0.5) !important; 735 | } 736 | 737 | .bg-color-green-500 { 738 | background-color: rgba(0, 151, 88, 0.5) !important; 739 | } 740 | 741 | .border-color-green-500 { 742 | border-color: rgba(0, 151, 88, 0.5) !important; 743 | } 744 | 745 | .fill-color-green-500 { 746 | fill: rgba(0, 151, 88, 0.5) !important; 747 | } 748 | 749 | .color-green-600 { 750 | color: rgba(0, 151, 88, 0.6) !important; 751 | } 752 | 753 | .bg-color-green-600 { 754 | background-color: rgba(0, 151, 88, 0.6) !important; 755 | } 756 | 757 | .border-color-green-600 { 758 | border-color: rgba(0, 151, 88, 0.6) !important; 759 | } 760 | 761 | .fill-color-green-600 { 762 | fill: rgba(0, 151, 88, 0.6) !important; 763 | } 764 | 765 | .color-green-700 { 766 | color: rgba(0, 151, 88, 0.7) !important; 767 | } 768 | 769 | .bg-color-green-700 { 770 | background-color: rgba(0, 151, 88, 0.7) !important; 771 | } 772 | 773 | .border-color-green-700 { 774 | border-color: rgba(0, 151, 88, 0.7) !important; 775 | } 776 | 777 | .fill-color-green-700 { 778 | fill: rgba(0, 151, 88, 0.7) !important; 779 | } 780 | 781 | .color-green-800 { 782 | color: rgba(0, 151, 88, 0.8) !important; 783 | } 784 | 785 | .bg-color-green-800 { 786 | background-color: rgba(0, 151, 88, 0.8) !important; 787 | } 788 | 789 | .border-color-green-800 { 790 | border-color: rgba(0, 151, 88, 0.8) !important; 791 | } 792 | 793 | .fill-color-green-800 { 794 | fill: rgba(0, 151, 88, 0.8) !important; 795 | } 796 | 797 | .color-green-900 { 798 | color: rgba(0, 151, 88, 0.9) !important; 799 | } 800 | 801 | .bg-color-green-900 { 802 | background-color: rgba(0, 151, 88, 0.9) !important; 803 | } 804 | 805 | .border-color-green-900 { 806 | border-color: rgba(0, 151, 88, 0.9) !important; 807 | } 808 | 809 | .fill-color-green-900 { 810 | fill: rgba(0, 151, 88, 0.9) !important; 811 | } 812 | 813 | .neutral-gray-100 { 814 | color: rgba(41, 41, 41, 0.1) !important; 815 | } 816 | 817 | .bg-neutral-gray-100 { 818 | background-color: rgba(41, 41, 41, 0.1) !important; 819 | } 820 | 821 | .border-neutral-gray-100 { 822 | border-color: rgba(41, 41, 41, 0.1) !important; 823 | } 824 | 825 | .fill-neutral-gray-100 { 826 | fill: rgba(41, 41, 41, 0.1) !important; 827 | } 828 | 829 | .neutral-gray-200 { 830 | color: rgba(41, 41, 41, 0.2) !important; 831 | } 832 | 833 | .bg-neutral-gray-200 { 834 | background-color: rgba(41, 41, 41, 0.2) !important; 835 | } 836 | 837 | .border-neutral-gray-200 { 838 | border-color: rgba(41, 41, 41, 0.2) !important; 839 | } 840 | 841 | .fill-neutral-gray-200 { 842 | fill: rgba(41, 41, 41, 0.2) !important; 843 | } 844 | 845 | .neutral-gray-300 { 846 | color: rgba(41, 41, 41, 0.3) !important; 847 | } 848 | 849 | .bg-neutral-gray-300 { 850 | background-color: rgba(41, 41, 41, 0.3) !important; 851 | } 852 | 853 | .border-neutral-gray-300 { 854 | border-color: rgba(41, 41, 41, 0.3) !important; 855 | } 856 | 857 | .fill-neutral-gray-300 { 858 | fill: rgba(41, 41, 41, 0.3) !important; 859 | } 860 | 861 | .neutral-gray-400 { 862 | color: rgba(41, 41, 41, 0.4) !important; 863 | } 864 | 865 | .bg-neutral-gray-400 { 866 | background-color: rgba(41, 41, 41, 0.4) !important; 867 | } 868 | 869 | .border-neutral-gray-400 { 870 | border-color: rgba(41, 41, 41, 0.4) !important; 871 | } 872 | 873 | .fill-neutral-gray-400 { 874 | fill: rgba(41, 41, 41, 0.4) !important; 875 | } 876 | 877 | .neutral-gray-500 { 878 | color: rgba(41, 41, 41, 0.5) !important; 879 | } 880 | 881 | .bg-neutral-gray-500 { 882 | background-color: rgba(41, 41, 41, 0.5) !important; 883 | } 884 | 885 | .border-neutral-gray-500 { 886 | border-color: rgba(41, 41, 41, 0.5) !important; 887 | } 888 | 889 | .fill-neutral-gray-500 { 890 | fill: rgba(41, 41, 41, 0.5) !important; 891 | } 892 | 893 | .neutral-gray-600 { 894 | color: rgba(41, 41, 41, 0.6) !important; 895 | } 896 | 897 | .bg-neutral-gray-600 { 898 | background-color: rgba(41, 41, 41, 0.6) !important; 899 | } 900 | 901 | .border-neutral-gray-600 { 902 | border-color: rgba(41, 41, 41, 0.6) !important; 903 | } 904 | 905 | .fill-neutral-gray-600 { 906 | fill: rgba(41, 41, 41, 0.6) !important; 907 | } 908 | 909 | .neutral-gray-700 { 910 | color: rgba(41, 41, 41, 0.7) !important; 911 | } 912 | 913 | .bg-neutral-gray-700 { 914 | background-color: rgba(41, 41, 41, 0.7) !important; 915 | } 916 | 917 | .border-neutral-gray-700 { 918 | border-color: rgba(41, 41, 41, 0.7) !important; 919 | } 920 | 921 | .fill-neutral-gray-700 { 922 | fill: rgba(41, 41, 41, 0.7) !important; 923 | } 924 | 925 | .neutral-gray-800 { 926 | color: rgba(41, 41, 41, 0.8) !important; 927 | } 928 | 929 | .bg-neutral-gray-800 { 930 | background-color: rgba(41, 41, 41, 0.8) !important; 931 | } 932 | 933 | .border-neutral-gray-800 { 934 | border-color: rgba(41, 41, 41, 0.8) !important; 935 | } 936 | 937 | .fill-neutral-gray-800 { 938 | fill: rgba(41, 41, 41, 0.8) !important; 939 | } 940 | 941 | .neutral-gray-900 { 942 | color: rgba(41, 41, 41, 0.9) !important; 943 | } 944 | 945 | .bg-neutral-gray-900 { 946 | background-color: rgba(41, 41, 41, 0.9) !important; 947 | } 948 | 949 | .border-neutral-gray-900 { 950 | border-color: rgba(41, 41, 41, 0.9) !important; 951 | } 952 | 953 | .fill-neutral-gray-900 { 954 | fill: rgba(41, 41, 41, 0.9) !important; 955 | } 956 | 957 | :root { 958 | --white: white; 959 | --gradient: linear-gradient(45deg, #ff61d3 10%, #b318ff 40%, #b318ff 60%, #00f0ff 90%); 960 | --gradient-purple-to-blue: linear-gradient(45deg, #6A8BFF, #5300BC); 961 | --gradient-orange-to-red: linear-gradient(45deg, #FF0000, #FFC700); 962 | --gradient-pink-to-red: linear-gradient(45deg, #FF2727, #FF7B8F); 963 | --color-blue: 24, 75, 255; 964 | --color-purple: 125, 26, 255; 965 | --color-red: 192, 0, 0; 966 | --color-yellow: 255, 220, 34; 967 | --color-green: 0, 151, 88; 968 | --neutral-gray: 41, 41, 41; 969 | --color-blue-100: rgba(var(--color-blue), 10%); 970 | --color-purple-100: rgba(var(--color-purple), 10%); 971 | --color-red-100: rgba(var(--color-red), 10%); 972 | --color-yellow-100: rgba(var(--color-yellow), 10%); 973 | --color-green-100: rgba(var(--color-green), 10%); 974 | --neutral-gray-100: rgba(var(--neutral-gray), 10%); 975 | --color-blue-200: rgba(var(--color-blue), 20%); 976 | --color-purple-200: rgba(var(--color-purple), 20%); 977 | --color-red-200: rgba(var(--color-red), 20%); 978 | --color-yellow-200: rgba(var(--color-yellow), 20%); 979 | --color-green-200: rgba(var(--color-green), 20%); 980 | --neutral-gray-200: rgba(var(--neutral-gray), 20%); 981 | --color-blue-300: rgba(var(--color-blue), 30%); 982 | --color-purple-300: rgba(var(--color-purple), 30%); 983 | --color-red-300: rgba(var(--color-red), 30%); 984 | --color-yellow-300: rgba(var(--color-yellow), 30%); 985 | --color-green-300: rgba(var(--color-green), 30%); 986 | --neutral-gray-300: rgba(var(--neutral-gray), 30%); 987 | --color-blue-400: rgba(var(--color-blue), 40%); 988 | --color-purple-400: rgba(var(--color-purple), 40%); 989 | --color-red-400: rgba(var(--color-red), 40%); 990 | --color-yellow-400: rgba(var(--color-yellow), 40%); 991 | --color-green-400: rgba(var(--color-green), 40%); 992 | --neutral-gray-400: rgba(var(--neutral-gray), 40%); 993 | --color-blue-500: rgba(var(--color-blue), 50%); 994 | --color-purple-500: rgba(var(--color-purple), 50%); 995 | --color-red-500: rgba(var(--color-red), 50%); 996 | --color-yellow-500: rgba(var(--color-yellow), 50%); 997 | --color-green-500: rgba(var(--color-green), 50%); 998 | --neutral-gray-500: rgba(var(--neutral-gray), 50%); 999 | --color-blue-600: rgba(var(--color-blue), 60%); 1000 | --color-purple-600: rgba(var(--color-purple), 60%); 1001 | --color-red-600: rgba(var(--color-red), 60%); 1002 | --color-yellow-600: rgba(var(--color-yellow), 60%); 1003 | --color-green-600: rgba(var(--color-green), 60%); 1004 | --neutral-gray-600: rgba(var(--neutral-gray), 60%); 1005 | --color-blue-700: rgba(var(--color-blue), 70%); 1006 | --color-purple-700: rgba(var(--color-purple), 70%); 1007 | --color-red-700: rgba(var(--color-red), 70%); 1008 | --color-yellow-700: rgba(var(--color-yellow), 70%); 1009 | --color-green-700: rgba(var(--color-green), 70%); 1010 | --neutral-gray-700: rgba(var(--neutral-gray), 70%); 1011 | --color-blue-800: rgba(var(--color-blue), 80%); 1012 | --color-purple-800: rgba(var(--color-purple), 80%); 1013 | --color-red-800: rgba(var(--color-red), 80%); 1014 | --color-yellow-800: rgba(var(--color-yellow), 80%); 1015 | --color-green-800: rgba(var(--color-green), 80%); 1016 | --neutral-gray-800: rgba(var(--neutral-gray), 80%); 1017 | --color-blue-900: rgba(var(--color-blue), 90%); 1018 | --color-purple-900: rgba(var(--color-purple), 90%); 1019 | --color-red-900: rgba(var(--color-red), 90%); 1020 | --color-yellow-900: rgba(var(--color-yellow), 90%); 1021 | --color-green-900: rgba(var(--color-green), 90%); 1022 | --neutral-gray-900: rgba(var(--neutral-gray), 90%); 1023 | } 1024 | /*# sourceMappingURL=colors.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-core/colors/colors.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "colors.scss" 6 | ], 7 | "names": [], 8 | "file": "colors.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/colors/colors.scss: -------------------------------------------------------------------------------- 1 | // $EccentricTouchColors: ( 2 | // "neutral-gray-800": #292929, 3 | // "neutral-gray-700": #494949, 4 | // "neutral-gray-600": #696969, 5 | // "neutral-gray-500": #898989, 6 | // "neutral-gray-400": #A9A9A9, 7 | // "neutral-gray-300": #C9C9C9, 8 | // "neutral-gray-200": #E9E9E9, 9 | // "neutral-gray-100": #F9F9F9, 10 | 11 | // // blue color variants 12 | // "color-blue-900": #184BFF, 13 | // "color-blue-800": #3763FF, 14 | // "color-blue-700": #547AFF, 15 | // "color-blue-600": #7694FF, 16 | // "color-blue-500": #8DA6FF, 17 | // "color-blue-400": #B5C5FF, 18 | // "color-blue-300": #CAD6FF, 19 | // "color-blue-200": #E2E9FF, 20 | // "color-blue-100": #F2F5FF, 21 | 22 | // // purple color variants 23 | // "color-purple-900": #7E18FF, 24 | // "color-purple-800": #8E35FF, 25 | // "color-purple-700": #9D50FF, 26 | // "color-purple-600": #A864FF, 27 | // "color-purple-500": #B77DFF, 28 | // "color-purple-400": #C99DFF, 29 | // "color-purple-300": #D6B5FF, 30 | // "color-purple-200": #E7D3FF, 31 | // "color-purple-100": #EADAFF, 32 | 33 | // // red color variables 34 | // "color-red-900": #C00000, 35 | // "color-red-800": #C82121, 36 | // "color-red-700": #BB3B3B, 37 | // "color-red-600": #D14747, 38 | // "color-red-500": #E85959, 39 | // "color-red-400": #FF6363, 40 | // "color-red-300": #FF7B7B, 41 | // "color-red-200": #FF9292, 42 | // "color-red-100": #FFBFBF, 43 | 44 | // // green color variables 45 | // "color-green-900": #009758, 46 | // "color-green-800": #17A368, 47 | // "color-green-700": #3EA77B, 48 | // "color-green-600": #4D9E7C, 49 | // "color-green-500": #5CBA93, 50 | // "color-green-400": #72D9AE, 51 | // "color-green-300": #87F8C9, 52 | // "color-green-200": #AEFFDD, 53 | // "color-green-100": #D8FFEF, 54 | 55 | // // yellow color variables 56 | // "color-yellow-900": #EBC500, 57 | // "color-yellow-800": #FFD600, 58 | // "color-yellow-700": #FFDC22, 59 | // "color-yellow-600": #FFE03C, 60 | // "color-yellow-500": #FFE34F, 61 | // "color-yellow-400": #FFE972, 62 | // "color-yellow-300": #FFEC8C, 63 | // "color-yellow-200": #FFF1AC, 64 | // "color-yellow-100": #FFF6C8 65 | // ); 66 | 67 | // // for background-colors 68 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 69 | // .bg-#{$EccentricTouchColor} { 70 | // background-color: $baseColor !important; 71 | // } 72 | // } 73 | 74 | // // for text-colors 75 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 76 | // .#{$EccentricTouchColor} { 77 | // color: $baseColor !important; 78 | // } 79 | // } 80 | 81 | // // fill color 82 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 83 | // .fill-#{$EccentricTouchColor} { 84 | // fill: $baseColor !important; 85 | // } 86 | // } 87 | 88 | // // stroke colors 89 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 90 | // .stroke-#{$EccentricTouchColor} { 91 | // stroke: $baseColor !important; 92 | // } 93 | // } 94 | 95 | // // border colors 96 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 97 | // .border-#{$EccentricTouchColor} { 98 | // border-color: $baseColor !important; 99 | // } 100 | // } 101 | 102 | // :root { 103 | // @each $EccentricTouchColor, $baseColor in $EccentricTouchColors { 104 | // --#{$EccentricTouchColor}: #{$baseColor}; 105 | // } 106 | // } 107 | 108 | $base-blue: rgb(24, 75, 255); 109 | $base-purple: rgb(125, 26, 255); 110 | $base-red: rgb(192, 0, 0); 111 | $base-yellow: rgb(255, 220, 34); 112 | $base-green: rgb(0, 151, 88); 113 | $base-dark: rgb(41, 41, 41); 114 | $white: white; 115 | $black: black; 116 | 117 | // gradient colors 118 | $gradient: linear-gradient(45deg,#ff61d3 10%,#b318ff 40%,#b318ff 60%,#00f0ff 90%); 119 | $gradient-blue-to-purple: linear-gradient(45deg, #6A8BFF, #5300BC); 120 | $gradient-orange-to-red: linear-gradient(45deg, #FF0000, #FFC700); 121 | $gradient-pink-to-red: linear-gradient(45deg, #FF2727, #FF7B8F); 122 | 123 | // base-colors opacity value 124 | $opacity-range: 9; 125 | 126 | .bg-gradient { 127 | background: $gradient; 128 | } 129 | 130 | .gradient-text { 131 | background-color: #000; 132 | background: $gradient; 133 | background-size: 100%; 134 | background-repeat: repeat; 135 | -webkit-background-clip: text; 136 | -webkit-text-fill-color: transparent; 137 | -moz-background-clip: text; 138 | -moz-text-fill-color: transparent; 139 | } 140 | 141 | .bg-gradient-blue-to-purple { 142 | background: $gradient-blue-to-purple; 143 | } 144 | 145 | .gradient-text-blue-to-purple { 146 | background-color: #000; 147 | background: $gradient-blue-to-purple; 148 | background-size: 100%; 149 | background-repeat: repeat; 150 | -webkit-background-clip: text; 151 | -webkit-text-fill-color: transparent; 152 | -moz-background-clip: text; 153 | -moz-text-fill-color: transparent; 154 | } 155 | 156 | .bg-gradient-orange-to-red { 157 | background: $gradient-orange-to-red; 158 | } 159 | 160 | .gradient-text-orange-to-red { 161 | background-color: #000; 162 | background: $gradient-orange-to-red; 163 | background-size: 100%; 164 | background-repeat: repeat; 165 | -webkit-background-clip: text; 166 | -webkit-text-fill-color: transparent; 167 | -moz-background-clip: text; 168 | -moz-text-fill-color: transparent; 169 | } 170 | 171 | .bg-gradient-pink-to-red { 172 | background: $gradient-pink-to-red; 173 | } 174 | 175 | .gradient-text-pink-to-red { 176 | background-color: #000; 177 | background: $gradient-pink-to-red; 178 | background-size: 100%; 179 | background-repeat: repeat; 180 | -webkit-background-clip: text; 181 | -webkit-text-fill-color: transparent; 182 | -moz-background-clip: text; 183 | -moz-text-fill-color: transparent; 184 | } 185 | 186 | // white color 187 | 188 | .text-color-white { 189 | color: $white !important; 190 | } 191 | 192 | .bg-color-white { 193 | background-color: $white !important; 194 | } 195 | 196 | .border-color-white { 197 | border-color: $white !important; 198 | } 199 | 200 | .fill-color-white { 201 | fill: $white !important; 202 | } 203 | 204 | // black color 205 | 206 | .text-color-black { 207 | color: $black !important; 208 | } 209 | 210 | .bg-color-black { 211 | background-color: $black !important; 212 | } 213 | 214 | .border-color-black { 215 | border-color: $black !important; 216 | } 217 | 218 | .fill-color-black { 219 | fill: $black !important; 220 | } 221 | 222 | // for base-blue 223 | @for $count from 1 through $opacity-range { 224 | .color-blue-#{$count * 100} { 225 | color: rgba($color: $base-blue, $alpha: $count/10) !important; 226 | } 227 | .bg-color-blue-#{$count * 100} { 228 | background-color: rgba($color: $base-blue, $alpha: $count/10) !important; 229 | } 230 | .border-color-blue-#{$count * 100} { 231 | border-color: rgba($color: $base-blue, $alpha: $count/10) !important; 232 | } 233 | .fill-color-blue-#{$count * 100} { 234 | fill: rgba($color: $base-blue, $alpha: $count/10) !important; 235 | } 236 | } 237 | 238 | // for base-purple 239 | @for $count from 1 through $opacity-range { 240 | .color-purple-#{$count * 100} { 241 | color: rgba($color: $base-purple, $alpha: $count/10) !important; 242 | } 243 | .bg-color-purple-#{$count * 100} { 244 | background-color: rgba($color: $base-purple, $alpha: $count/10) !important; 245 | } 246 | .border-color-purple-#{$count * 100} { 247 | border-color: rgba($color: $base-purple, $alpha: $count/10) !important; 248 | } 249 | .fill-color-purple-#{$count * 100} { 250 | fill: rgba($color: $base-purple, $alpha: $count/10) !important; 251 | } 252 | } 253 | 254 | // for base-red 255 | @for $count from 1 through $opacity-range { 256 | .color-red-#{$count * 100} { 257 | color: rgba($color: $base-red, $alpha: $count/10) !important; 258 | } 259 | .bg-color-red-#{$count * 100} { 260 | background-color: rgba($color: $base-red, $alpha: $count/10) !important; 261 | } 262 | .border-color-red-#{$count * 100} { 263 | border-color: rgba($color: $base-red, $alpha: $count/10) !important; 264 | } 265 | .fill-color-red-#{$count * 100} { 266 | fill: rgba($color: $base-red, $alpha: $count/10) !important; 267 | } 268 | } 269 | 270 | // for base-yellow 271 | @for $count from 1 through $opacity-range { 272 | .color-yellow-#{$count * 100} { 273 | color: rgba($color: $base-yellow, $alpha: $count/10) !important; 274 | } 275 | .bg-color-yellow-#{$count * 100} { 276 | background-color: rgba($color: $base-yellow, $alpha: $count/10) !important; 277 | } 278 | .border-color-yellow-#{$count * 100} { 279 | border-color: rgba($color: $base-yellow, $alpha: $count/10) !important; 280 | } 281 | .fill-color-yellow-#{$count * 100} { 282 | fill: rgba($color: $base-yellow, $alpha: $count/10) !important; 283 | } 284 | } 285 | 286 | // for base-green 287 | @for $count from 1 through $opacity-range { 288 | .color-green-#{$count * 100} { 289 | color: rgba($color: $base-green, $alpha: $count/10) !important; 290 | } 291 | .bg-color-green-#{$count * 100} { 292 | background-color: rgba($color: $base-green, $alpha: $count/10) !important; 293 | } 294 | .border-color-green-#{$count * 100} { 295 | border-color: rgba($color: $base-green, $alpha: $count/10) !important; 296 | } 297 | .fill-color-green-#{$count * 100} { 298 | fill: rgba($color: $base-green, $alpha: $count/10) !important; 299 | } 300 | } 301 | 302 | // for base-dark 303 | @for $count from 1 through $opacity-range { 304 | .neutral-gray-#{$count * 100} { 305 | color: rgba($color: $base-dark, $alpha: $count/10) !important; 306 | } 307 | .bg-neutral-gray-#{$count * 100} { 308 | background-color: rgba($color: $base-dark, $alpha: $count/10) !important; 309 | } 310 | .border-neutral-gray-#{$count * 100} { 311 | border-color: rgba($color: $base-dark, $alpha: $count/10) !important; 312 | } 313 | .fill-neutral-gray-#{$count * 100} { 314 | fill: rgba($color: $base-dark, $alpha: $count/10) !important; 315 | } 316 | } 317 | 318 | :root { 319 | // @for $count from 1 through $opacity-range { 320 | // $color: toRGB($base-blue); 321 | // --color-blue-#{$count * 100}: rgba(#{$color}, #{$count * 10%}); 322 | // } 323 | --white: white; 324 | --gradient: #{$gradient}; 325 | --gradient-purple-to-blue: #{$gradient-blue-to-purple}; 326 | --gradient-orange-to-red: #{$gradient-orange-to-red}; 327 | --gradient-pink-to-red: #{$gradient-pink-to-red}; 328 | --color-blue: 24, 75, 255; 329 | --color-purple: 125, 26, 255; 330 | --color-red: 192, 0, 0; 331 | --color-yellow: 255, 220, 34; 332 | --color-green: 0, 151, 88; 333 | --neutral-gray: 41, 41, 41; 334 | @for $count from 1 through $opacity-range { 335 | --color-blue-#{$count * 100}: rgba(var(--color-blue), #{$count * 10%}); 336 | --color-purple-#{$count * 100}: rgba(var(--color-purple), #{$count * 10%}); 337 | --color-red-#{$count * 100}: rgba(var(--color-red), #{$count * 10%}); 338 | --color-yellow-#{$count * 100}: rgba(var(--color-yellow), #{$count * 10%}); 339 | --color-green-#{$count * 100}: rgba(var(--color-green), #{$count * 10%}); 340 | --neutral-gray-#{$count * 100}: rgba(var(--neutral-gray), #{$count * 10%}); 341 | } 342 | } 343 | 344 | // @function toRGB($base-color) { 345 | // @return "rgb(" + red($base-color) + ", " + green($base-color) + ", " + blue($base-color)+ ")"; 346 | // } -------------------------------------------------------------------------------- /source/eccentrictouch-core/colors/index.css: -------------------------------------------------------------------------------- 1 | @import url('./colors.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/index.css: -------------------------------------------------------------------------------- 1 | @import url('./margins/index.css'); 2 | @import url('./paddings/index.css'); 3 | @import url('./colors/index.css'); 4 | @import url('./typography/index.css'); 5 | @import url('./shadows/index.css'); 6 | @import url('./borders/index.css'); 7 | @import url('./layouts/index.css'); 8 | @import url('./variables.css'); 9 | -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/display.css: -------------------------------------------------------------------------------- 1 | .d-block { 2 | display: block; 3 | } 4 | 5 | .d-inline-block { 6 | display: inline-block; 7 | } 8 | 9 | .d-inline { 10 | display: inline; 11 | } 12 | 13 | .d-flex { 14 | display: -webkit-box; 15 | display: -ms-flexbox; 16 | display: flex; 17 | } 18 | 19 | .d-inline-flex { 20 | display: -webkit-inline-box; 21 | display: -ms-inline-flexbox; 22 | display: inline-flex; 23 | } 24 | 25 | .d-table { 26 | display: table; 27 | } 28 | 29 | .d-inline-table { 30 | display: inline-table; 31 | } 32 | 33 | .d-table-caption { 34 | display: table-caption; 35 | } 36 | 37 | .d-table-cell { 38 | display: table-cell; 39 | } 40 | 41 | .d-table-column { 42 | display: table-column; 43 | } 44 | 45 | .d-table-column-group { 46 | display: table-column-group; 47 | } 48 | 49 | .d-table-footer-group { 50 | display: table-footer-group; 51 | } 52 | 53 | .d-table-header-group { 54 | display: table-header-group; 55 | } 56 | 57 | .d-table-row-group { 58 | display: table-row-group; 59 | } 60 | 61 | .d-table-row { 62 | display: table-row; 63 | } 64 | 65 | .d-flow-root { 66 | display: flow-root; 67 | } 68 | 69 | .d-grid { 70 | display: -ms-grid; 71 | display: grid; 72 | } 73 | 74 | .d-inline-grid { 75 | display: inline-grid; 76 | display: -ms-inline-grid; 77 | display: -moz-inline-grid; 78 | } 79 | 80 | .d-contents { 81 | display: contents; 82 | } 83 | 84 | .d-list-item { 85 | display: list-item; 86 | } 87 | 88 | .d-hidden { 89 | display: none; 90 | } 91 | /*# sourceMappingURL=display.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/display.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AACA,AAAA,QAAQ,CAAC;EACP,OAAO,EAAE,KAAK;CACf;;AAED,AAAA,eAAe,CAAC;EACd,OAAO,EAAE,YAAY;CACtB;;AAED,AAAA,SAAS,CAAC;EACR,OAAO,EAAE,MAAM;CAChB;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;CACd;;AAED,AAAA,cAAc,CAAC;EACb,OAAO,EAAE,WAAW;CACrB;;AAED,AAAA,QAAQ,CAAC;EACP,OAAO,EAAE,KAAK;CACf;;AAED,AAAA,eAAe,CAAC;EACd,OAAO,EAAE,YAAY;CACtB;;AAED,AAAA,gBAAgB,CAAC;EACf,OAAO,EAAE,aAAa;CACvB;;AAED,AAAA,aAAa,CAAC;EACZ,OAAO,EAAE,UAAU;CACpB;;AAED,AAAA,eAAe,CAAC;EACd,OAAO,EAAE,YAAY;CACtB;;AAED,AAAA,qBAAqB,CAAC;EACpB,OAAO,EAAE,kBAAkB;CAC5B;;AAED,AAAA,qBAAqB,CAAC;EACpB,OAAO,EAAE,kBAAkB;CAC5B;;AAED,AAAA,qBAAqB,CAAC;EACpB,OAAO,EAAE,kBAAkB;CAC5B;;AAED,AAAA,kBAAkB,CAAC;EACjB,OAAO,EAAE,eAAe;CACzB;;AAED,AAAA,YAAY,CAAC;EACX,OAAO,EAAE,SAAS;CACnB;;AAED,AAAA,YAAY,CAAC;EACX,OAAO,EAAE,SAAS;CACnB;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;CACd;;AAED,AAAA,cAAc,CAAC;EACb,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,eAAe;EACxB,OAAO,EAAE,gBAAgB;CAC1B;;AAED,AAAA,WAAW,CAAC;EACV,OAAO,EAAE,QAAQ;CAClB;;AAED,AAAA,YAAY,CAAC;EACX,OAAO,EAAE,SAAS;CACnB;;AAED,AAAA,SAAS,CAAC;EACR,OAAO,EAAE,IAAI;CACd", 4 | "sources": [ 5 | "display.scss" 6 | ], 7 | "names": [], 8 | "file": "display.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/display.scss: -------------------------------------------------------------------------------- 1 | 2 | .d-block { 3 | display: block; 4 | } 5 | 6 | .d-inline-block { 7 | display: inline-block; 8 | } 9 | 10 | .d-inline { 11 | display: inline; 12 | } 13 | 14 | .d-flex { 15 | display: flex; 16 | } 17 | 18 | .d-inline-flex { 19 | display: inline-flex; 20 | } 21 | 22 | .d-table { 23 | display: table; 24 | } 25 | 26 | .d-inline-table { 27 | display: inline-table; 28 | } 29 | 30 | .d-table-caption { 31 | display: table-caption; 32 | } 33 | 34 | .d-table-cell { 35 | display: table-cell; 36 | } 37 | 38 | .d-table-column { 39 | display: table-column; 40 | } 41 | 42 | .d-table-column-group { 43 | display: table-column-group; 44 | } 45 | 46 | .d-table-footer-group { 47 | display: table-footer-group; 48 | } 49 | 50 | .d-table-header-group { 51 | display: table-header-group; 52 | } 53 | 54 | .d-table-row-group { 55 | display: table-row-group; 56 | } 57 | 58 | .d-table-row { 59 | display: table-row; 60 | } 61 | 62 | .d-flow-root { 63 | display: flow-root; 64 | } 65 | 66 | .d-grid { 67 | display: grid; 68 | } 69 | 70 | .d-inline-grid { 71 | display: inline-grid; 72 | display: -ms-inline-grid; 73 | display: -moz-inline-grid; 74 | } 75 | 76 | .d-contents { 77 | display: contents; 78 | } 79 | 80 | .d-list-item { 81 | display: list-item; 82 | } 83 | 84 | .d-hidden { 85 | display: none; 86 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/grids.scss: -------------------------------------------------------------------------------- 1 | $max-grid-columns: 20; 2 | $max-grid-rows: 20; 3 | 4 | @for $col-count from 1 through $max-grid-columns { 5 | .grid-cols-#{$col-count} { 6 | -ms-grid-columns: repeat($col-count, minmax(0, 1fr)); 7 | grid-template-columns: repeat($col-count, minmax(0, 1fr)); 8 | } 9 | } 10 | 11 | @for $row-count from 1 through $max-grid-rows { 12 | .grid-rows-#{$row-count} { 13 | -ms-grid-rows: repeat($row-count, minmax(0, 1fr)); 14 | grid-template-rows: repeat($row-count, minmax(0, 1fr)); 15 | } 16 | } 17 | 18 | // implementing column and row gaps 19 | // base-values: ranging from 1 to 100 20 | // decimal values: ranging from 0.1 to 100.9 21 | $max-gap-base-value: 100; 22 | $max-gap-decimal-value: 9; 23 | 24 | @for $gap-count from 1 through $max-gap-base-value { 25 | .gap-#{$gap-count} { 26 | gap: #{$gap-count}px; 27 | } 28 | .gap-col-#{$gap-count} { 29 | column-gap: #{$gap-count}px; 30 | } 31 | .gap-row-#{$gap-count} { 32 | row-gap: #{$gap-count}px; 33 | } 34 | } 35 | 36 | @for $gap-base-count from 0 through $max-gap-base-value { 37 | @for $gap-decimal-count from 1 through $max-gap-decimal-value { 38 | .gap-#{$gap-base-count}pt#{$gap-decimal-count} { 39 | gap: #{($gap-base-count * 10 + $gap-decimal-count)/10}px; 40 | } 41 | .gap-col-#{$gap-base-count}pt#{$gap-decimal-count} { 42 | column-gap: #{($gap-base-count * 10 + $gap-decimal-count)/10}px; 43 | } 44 | .gap-row-#{$gap-base-count}pt#{$gap-decimal-count} { 45 | row-gap: #{($gap-base-count * 10 + $gap-decimal-count)/10}px; 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/index.css: -------------------------------------------------------------------------------- 1 | @import url('./display.css'); 2 | @import url('./grids.css'); 3 | @import url('./positions.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/positions.css: -------------------------------------------------------------------------------- 1 | .position-static { 2 | position: static; 3 | } 4 | 5 | .position-fixed { 6 | position: fixed; 7 | } 8 | 9 | .position-absolute { 10 | position: absolute; 11 | } 12 | 13 | .position-relative { 14 | position: relative; 15 | } 16 | 17 | .position-sticky { 18 | position: -webkit-sticky; 19 | position: sticky; 20 | } 21 | /*# sourceMappingURL=positions.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/positions.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,gBAAgB,CAAC;EACf,QAAQ,EAAE,MAAM;CACjB;;AAED,AAAA,eAAe,CAAC;EACd,QAAQ,EAAE,KAAK;CAChB;;AAED,AAAA,kBAAkB,CAAC;EACjB,QAAQ,EAAE,QAAQ;CACnB;;AAED,AAAA,kBAAkB,CAAC;EACjB,QAAQ,EAAE,QAAQ;CACnB;;AAED,AAAA,gBAAgB,CAAC;EACf,QAAQ,EAAE,MAAM;CACjB", 4 | "sources": [ 5 | "positions.scss" 6 | ], 7 | "names": [], 8 | "file": "positions.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/layouts/positions.scss: -------------------------------------------------------------------------------- 1 | .position-static { 2 | position: static; 3 | } 4 | 5 | .position-fixed { 6 | position: fixed; 7 | } 8 | 9 | .position-absolute { 10 | position: absolute; 11 | } 12 | 13 | .position-relative { 14 | position: relative; 15 | } 16 | 17 | .position-sticky { 18 | position: sticky; 19 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/margins/index.css: -------------------------------------------------------------------------------- 1 | @import url('./margins.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/margins/margins.scss: -------------------------------------------------------------------------------- 1 | 2 | // defining some base units and values for margin value generations 3 | // golden-ratio to setup a proper layouting system 4 | // base-unit: to set a base-unit to generate a eccentrictouch-base unit 5 | $goldenRatio: 1.618; 6 | $baseUnit: 2px; 7 | 8 | // maximum margin value 9 | $maxMarginValue: 100; 10 | 11 | // margin from all sides 12 | @for $count from 1 through $maxMarginValue { 13 | .m-#{$count} { 14 | margin: ($count * $baseUnit * $goldenRatio); 15 | } 16 | } 17 | 18 | // margin-right methods 19 | @for $count from 1 through $maxMarginValue { 20 | .m-right-#{$count} { 21 | margin-right: ($count * $baseUnit * $goldenRatio); 22 | } 23 | } 24 | 25 | // margin-left methods 26 | @for $count from 1 through $maxMarginValue { 27 | .m-left-#{$count} { 28 | margin-left: ($count * $baseUnit * $goldenRatio); 29 | } 30 | } 31 | 32 | // margin-bottom methods 33 | @for $count from 1 through $maxMarginValue { 34 | .m-bottom-#{$count} { 35 | margin-bottom: ($count * $baseUnit * $goldenRatio); 36 | } 37 | } 38 | 39 | // margin-top methods 40 | @for $count from 1 through $maxMarginValue { 41 | .m-top-#{$count} { 42 | margin-top: ($count * $baseUnit * $goldenRatio); 43 | } 44 | } 45 | 46 | // special margins 47 | .m-auto { 48 | margin: auto; 49 | } 50 | 51 | .m-right-auto { 52 | margin-right: auto; 53 | } 54 | 55 | .m-left-auto { 56 | margin-left: auto; 57 | } 58 | 59 | .m-top-auto { 60 | margin-top: auto; 61 | } 62 | 63 | .m-bottom-auto { 64 | margin-bottom: auto; 65 | } 66 | 67 | .m-x-auto { 68 | margin-right: auto; 69 | margin-left: auto; 70 | } 71 | 72 | .m-y-auto { 73 | margin-top: auto; 74 | margin-bottom: auto; 75 | } 76 | 77 | // margins with decimal values - from unit 0.1 to 200.9 78 | @for $margin-base-value from 0 through $maxMarginValue { 79 | @for $margin-decimal-value from 1 through 9 { 80 | // margin-default values: to add margin from all the sides of an HTML element 81 | .m-#{$margin-base-value}pt#{$margin-decimal-value} { 82 | margin: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 83 | } 84 | .m-right-#{$margin-base-value}pt#{$margin-decimal-value} { 85 | margin-right: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 86 | } 87 | .m-left-#{$margin-base-value}pt#{$margin-decimal-value} { 88 | margin-left: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 89 | } 90 | .m-top-#{$margin-base-value}pt#{$margin-decimal-value} { 91 | margin-top: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 92 | } 93 | .m-bottom-#{$margin-base-value}pt#{$margin-decimal-value} { 94 | margin-bottom: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 95 | } 96 | .m-x-#{margin-base-value}pt#{$margin-decimal-value} { 97 | margin-right: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 98 | margin-left: #{($margin-base-value * 10 + $margin-decimal-value)/10}px;; 99 | } 100 | .m-y-#{margin-base-value}pt#{$margin-decimal-value} { 101 | margin-top: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 102 | margin-bottom: #{($margin-base-value * 10 + $margin-decimal-value)/10}px; 103 | } 104 | } 105 | } 106 | 107 | 108 | -------------------------------------------------------------------------------- /source/eccentrictouch-core/paddings/index.css: -------------------------------------------------------------------------------- 1 | @import url('./paddings.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/paddings/paddings.scss: -------------------------------------------------------------------------------- 1 | 2 | $goldenRatio: 1.618; 3 | $baseUnit: 1px; 4 | $maxPaddingValue: 100; 5 | 6 | // padding from all sides 7 | @for $count from 1 through $maxPaddingValue { 8 | .p-#{$count} { 9 | padding: ($count * $baseUnit * $goldenRatio); 10 | } 11 | } 12 | 13 | // padding from right side 14 | @for $count from 1 through $maxPaddingValue { 15 | .p-right-#{$count} { 16 | padding-right: ($count * $baseUnit * $goldenRatio); 17 | } 18 | } 19 | 20 | // padding from left side 21 | @for $count from 1 through $maxPaddingValue { 22 | .p-left-#{$count} { 23 | padding-left: ($count * $baseUnit * $goldenRatio); 24 | } 25 | } 26 | 27 | // padding from top side 28 | @for $count from 1 through $maxPaddingValue { 29 | .p-top-#{$count} { 30 | padding-top: ($count * $baseUnit * $goldenRatio); 31 | } 32 | } 33 | 34 | // padding from bottom side 35 | @for $count from 1 through $maxPaddingValue { 36 | .p-bottom-#{$count} { 37 | padding-bottom: ($count * $baseUnit * $goldenRatio); 38 | } 39 | } 40 | 41 | // padding vertically (from top and bottom) 42 | @for $count from 1 through $maxPaddingValue { 43 | .p-y-#{$count} { 44 | padding-top: ($count * $baseUnit * $goldenRatio); 45 | padding-bottom: ($count * $baseUnit * $goldenRatio); 46 | } 47 | } 48 | 49 | // padding horizontally (from right and left) 50 | @for $count from 1 through $maxPaddingValue { 51 | .p-x-#{$count} { 52 | padding-left: ($count * $baseUnit * $goldenRatio); 53 | padding-right: ($count * $baseUnit * $goldenRatio); 54 | } 55 | } 56 | 57 | // padding-decimal-values: generating decimal values for padding properties 58 | // padding, padding-right, padding-left, padding-top, padding-bottom, padding-horizontally, padding-vertically 59 | @for $padding-base-value from 0 through $maxPaddingValue { 60 | @for $padding-decimal-value from 1 through 9 { 61 | .p-#{$padding-base-value}pt#{$padding-decimal-value} { 62 | padding: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 63 | } 64 | .p-right-#{$padding-base-value}pt#{$padding-decimal-value} { 65 | padding-right: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 66 | } 67 | .p-left-#{$padding-base-value}pt#{$padding-decimal-value} { 68 | padding-left: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 69 | } 70 | .p-top-#{$padding-base-value}pt#{$padding-decimal-value} { 71 | padding-top: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 72 | } 73 | .p-bottom-#{$padding-base-value}pt#{$padding-decimal-value} { 74 | padding-bottom: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 75 | } 76 | .p-x-#{$padding-base-value}pt#{$padding-decimal-value} { 77 | padding-right: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 78 | padding-left: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 79 | } 80 | .p-y-#{$padding-base-value}pt#{$padding-decimal-value} { 81 | padding-top: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 82 | padding-bottom: #{($padding-base-value * 10 + $padding-decimal-value)/10}px; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /source/eccentrictouch-core/shadows/index.css: -------------------------------------------------------------------------------- 1 | @import url('./shadows.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/shadows/shadows.css: -------------------------------------------------------------------------------- 1 | .shadow { 2 | -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 3 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 4 | } 5 | 6 | .shadow-light { 7 | -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 9 | } 10 | 11 | .shadow-medium { 12 | -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 13 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 14 | } 15 | 16 | .shadow-high { 17 | -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 18 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 19 | } 20 | 21 | .shadow-hoverable { 22 | -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 23 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 24 | -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 25 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 26 | } 27 | 28 | .shadow-hoverable:hover { 29 | -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 30 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 31 | } 32 | /*# sourceMappingURL=shadows.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-core/shadows/shadows.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAaE,AAAA,OAAO,CAAY;EACjB,UAAU,EAdG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB;CAepE;;AAFD,AAAA,aAAa,CAAM;EACjB,UAAU,EAbC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB;CAclE;;AAFD,AAAA,cAAc,CAAK;EACjB,UAAU,EAZE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB;CAarE;;AAFD,AAAA,YAAY,CAAO;EACjB,UAAU,EAXA,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAgB;CAYrE;;AAGH,AAAA,iBAAiB,CAAC;EAChB,UAAU,EAnBK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB;EAoBrE,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,gCAA0B;CAIhD;;AAND,AAGE,iBAHe,AAGd,MAAM,CAAC;EACN,UAAU,EArBC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAgB;CAsBlE", 4 | "sources": [ 5 | "shadows.scss" 6 | ], 7 | "names": [], 8 | "file": "shadows.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/shadows/shadows.scss: -------------------------------------------------------------------------------- 1 | $shadow-default: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 2 | $shadow-light: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 3 | $shadow-medium: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 4 | $shadow-high: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 5 | 6 | $shadows: ( 7 | "shadow": $shadow-default, 8 | "shadow-light": $shadow-light, 9 | "shadow-medium": $shadow-medium, 10 | "shadow-high": $shadow-high 11 | ); 12 | 13 | @each $shadow-method, $base-shadow-value in $shadows { 14 | .#{$shadow-method} { 15 | box-shadow: $base-shadow-value; 16 | } 17 | } 18 | 19 | .shadow-hoverable { 20 | box-shadow: $shadow-default; 21 | transition: all 0.3s cubic-bezier(.25,.8,.25,1); 22 | &:hover { 23 | box-shadow: $shadow-light 24 | } 25 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/typography/index.css: -------------------------------------------------------------------------------- 1 | @import url('./typography.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-core/typography/typography.scss: -------------------------------------------------------------------------------- 1 | // Typography for eccentric-touch 2 | 3 | // importing base fonts from fonts.css 4 | // from the vendors package 5 | @import url('../../eccentrictouch-vendors/fonts.css'); 6 | 7 | // setting up variable configurations for font properties 8 | $font-sans-serif: 'Inter', sans-serif; 9 | $font-serif: 'Lora', serif; 10 | $font-monospace: 'Space Mono', monospace; 11 | 12 | :root { 13 | --font-sans-serif: #{$font-sans-serif}; 14 | --font-serif: #{$font-serif}; 15 | --font-monospace: #{$font-monospace}; 16 | } 17 | 18 | .font-sans-serif { 19 | font-family: var(--font-sans-serif); 20 | } 21 | 22 | .font-serif { 23 | font-family: var(--font-serif); 24 | } 25 | 26 | .font-monospace { 27 | font-family: var(--font-monospace); 28 | } 29 | 30 | // generating font-sizes for typographies and texts, ranging from 0 to 100 units 31 | // where (1 unit = 1px) 32 | $font-size-range: 100; 33 | @for $font-size-count from 1 through $font-size-range { 34 | .font-size-#{$font-size-count} { 35 | font-size: #{$font-size-count}px; 36 | } 37 | } 38 | 39 | // setting up default size and weight properties of some commonly used 40 | // HTML elements such as headings, paragraphs, list-items and much more. 41 | 42 | h1, h2, h3, h4, h5, h6, 43 | .h1, .h2, .h3, .h4, .h5, .h6 { 44 | font-family: inherit; 45 | color: inherit; 46 | } 47 | 48 | h1, .h1 { 49 | font-size: 32px; 50 | } 51 | 52 | h2, .h2 { 53 | font-size: 28px; 54 | } 55 | 56 | h3, .h3 { 57 | font-size: 22px; 58 | } 59 | 60 | h4, .h4 { 61 | font-size: 18px; 62 | } 63 | 64 | h5, .h5 { 65 | font-size: 14px; 66 | } 67 | 68 | h6, .h6 { 69 | font-size: 10px; 70 | } 71 | 72 | p, i, u, b, strong, li, ul, sup, sub, label { 73 | font-family: inherit; 74 | color: inherit; 75 | } 76 | 77 | // some specially generated values for managing possible use-cases 78 | // creating a loop-method to generate values with .1 to .9 decimal, 79 | // ranging from 0.1 to 100.9 (Base Number Range - 1 to 100) 80 | $decimal-range: 9; 81 | @for $font-size-count-for-base-values from 0 through $font-size-range { 82 | @for $font-size-count-for-decimal-values from 1 through $decimal-range { 83 | .font-size-#{$font-size-count-for-base-values}pt#{$font-size-count-for-decimal-values} { 84 | font-size: #{($font-size-count-for-base-values * 10 + $font-size-count-for-decimal-values)/10}px; 85 | } 86 | } 87 | } 88 | 89 | // font-weight(value-base): generating fonmt-weights from 100-900 weights and keyword values 90 | // such as normal, bold, initial, revert, and much more... 91 | $font-weight-values-base: 9; // will help us to generate values from 100 to 900 92 | @for $font-weight-value from 1 through $font-weight-values-base { 93 | .font-weight-#{$font-weight-value * 100} { 94 | font-weight: #{$font-weight-value * 100}; 95 | } 96 | } 97 | 98 | // font-weight(keyword-based): this method is to generate class-methods for keyword based font-weights 99 | // such as bold, lighter, normal, inherit and others 100 | $font-weight-keywords-list: ( 101 | "normal": normal, 102 | "bold": bold, 103 | "bolder": bolder, 104 | "lighter": lighter, 105 | "inherit": inherit, 106 | "initial": initial, 107 | "revert": revert, 108 | "unset": unset 109 | ); 110 | @each $font-weight-title, $font-weight-value in $font-weight-keywords-list { 111 | .font-weight-#{$font-weight-title} { 112 | font-weight: #{$font-weight-value}; 113 | } 114 | } 115 | 116 | // font-styles: generating a set of class-methods to apply font-styling to texts, headings 117 | // and other text-based elements. 118 | $font-style-properties-list: ( 119 | "normal": normal, 120 | "italic": italic, 121 | "oblique": oblique, 122 | "inherit": inherit, 123 | "initial": initial, 124 | "revert": revert, 125 | "unset": unset 126 | ); 127 | 128 | @each $font-style-title, $font-style-value in $font-style-properties-list { 129 | .font-style-#{$font-style-title} { 130 | font-style: #{$font-style-title}; 131 | } 132 | } 133 | 134 | 135 | // text-transform: generating text-transformation properties for text-based components 136 | $text-transform-properties-list: ( 137 | // keyword values 138 | "none": none, 139 | "capitalize": capitalize, 140 | "uppercase": uppercase, 141 | "lowercase": lowercase, 142 | "full-width": full-width, 143 | "full-size-kana": full-size-kana, 144 | // global values 145 | "inherit": inherit, 146 | "initial": initial, 147 | "revert": revert, 148 | "unset": unset 149 | ); 150 | 151 | @each $text-transform-title, $text-transform-value in $text-transform-properties-list { 152 | .text-transform-#{$text-transform-title} { 153 | text-transform: #{$text-transform-value}; 154 | } 155 | } 156 | 157 | 158 | // text-overflow: generating class-methods for managing text-overflowing properties 159 | // for all the text based elements in HTML. 160 | $text-overflow-properties-list: ( 161 | "clip": clip, 162 | "ellipsis": ellipsis, 163 | "inherit": inherit, 164 | "initial": initial, 165 | "revert": revert, 166 | "unset": unset 167 | ); 168 | 169 | @each $text-overflow-title, $text-overflow-value in $text-overflow-properties-list { 170 | .text-overflow-#{$text-overflow-title} { 171 | text-overflow: #{$text-overflow-value}; 172 | } 173 | } 174 | 175 | 176 | // text-decoration: generating text-decoration properties for text based elements 177 | // all the types of underlining properties will be generated in this set of class-methods 178 | $text-decoration-properties-list: ( 179 | "underline": underline, 180 | "overline": overline, 181 | "none": none, 182 | "inherit": inherit, 183 | "initial": initial, 184 | "unset": unset 185 | ); 186 | 187 | @each $text-decoration-title, $text-decoration-value in $text-decoration-properties-list { 188 | .text-decoration-#{$text-decoration-title} { 189 | text-decoration: #{$text-decoration-value}; 190 | } 191 | } 192 | 193 | 194 | // text-align: generating class-methods for text alignment properties for HTML elements. 195 | $text-align-properties-list: ( 196 | "start": start, 197 | "end": end, 198 | "left": left, 199 | "right": right, 200 | "center": center, 201 | "justify": justify, 202 | "justify-all": justify-all, 203 | "match-parent": match-parent, 204 | "inherit": inherit, 205 | "initial": initial, 206 | "revert": revert, 207 | "unset": unset 208 | ); 209 | 210 | @each $text-align-title, $text-align-value in $text-align-properties-list { 211 | .text-align-#{$text-align-title} { 212 | text-align: #{$text-align-value}; 213 | } 214 | } 215 | 216 | 217 | -------------------------------------------------------------------------------- /source/eccentrictouch-core/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --focus-shadow: 0px 0px 1px 4px rgba(24, 75, 255, 0.32); 3 | --border-radius: 8px; 4 | --focus-shadow-light: 0 0 0 .25rem rgba(24, 75, 255, 0.32); 5 | } 6 | /*# sourceMappingURL=variables.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-core/variables.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAKA,AAAA,KAAK,CAAC;EACJ,cAAc,CAAA,wCAAC;EACf,eAAe,CAAA,IAAC;EAChB,oBAAoB,CAAA,qCAAC;CACtB", 4 | "sources": [ 5 | "variables.scss" 6 | ], 7 | "names": [], 8 | "file": "variables.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-core/variables.scss: -------------------------------------------------------------------------------- 1 | 2 | $focus-shadow: 0px 0px 1px 4px rgba(24, 75, 255, 0.32) !default; 3 | $border-radius: 8px !default; 4 | $focus-shadow-light: 0 0 0 .25rem rgba(24, 75, 255, 0.32) !default; 5 | 6 | :root { 7 | --focus-shadow: 0px 0px 1px 4px rgba(24, 75, 255, 0.32); 8 | --border-radius: 8px; 9 | --focus-shadow-light: 0 0 0 .25rem rgba(24, 75, 255, 0.32); 10 | } -------------------------------------------------------------------------------- /source/eccentrictouch-vendors/fonts.css: -------------------------------------------------------------------------------- 1 | /* google fonts import */ 2 | 3 | /* inter-font */ 4 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); 5 | 6 | /* Lora font */ 7 | @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); 8 | 9 | /* space mono font */ 10 | @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 11 | 12 | 13 | -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/buttons/buttons.css: -------------------------------------------------------------------------------- 1 | button, input[type=button], input[type=reset], input[type=submit], a[role=button], a { 2 | font-family: inherit; 3 | font-size: inherit; 4 | font-weight: 500; 5 | -webkit-transition: all 0.180s ease-in-out; 6 | transition: all 0.180s ease-in-out; 7 | } 8 | 9 | .btn-default { 10 | padding: 12px 24px !important; 11 | } 12 | 13 | .btn-medium { 14 | padding: 16px 32px !important; 15 | } 16 | 17 | .btn-large { 18 | padding: 20px 40px !important; 19 | } 20 | 21 | :root { 22 | --btn-size-default: 12px 24px; 23 | --btn-size-medium: 16px 32px; 24 | --btn-size-large: 20px 40px; 25 | } 26 | 27 | button.primary-btn, .primary-btn { 28 | background-color: var(--color-blue-900); 29 | padding: var(--btn-size-default); 30 | color: var(--white); 31 | font-family: inherit; 32 | border: var(--border-medium); 33 | border-color: rgba(0, 0, 0, 0); 34 | border-radius: var(--border-radius); 35 | } 36 | 37 | button.primary-btn__danger, .primary-btn__danger { 38 | background-color: var(--color-red-900) !important; 39 | color: white !important; 40 | } 41 | 42 | button.primary-btn__success, .primary-btn__success { 43 | background-color: var(--color-green-900) !important; 44 | color: white !important; 45 | } 46 | 47 | button.primary-btn__warning, .primary-btn__warning { 48 | background-color: var(--color-yellow-900) !important; 49 | color: var(--neutral-gray-800); 50 | } 51 | 52 | button.primary-btn__disabled, .primary-btn__disabled { 53 | -webkit-box-shadow: none; 54 | box-shadow: none; 55 | background-color: var(--neutral-gray-200); 56 | pointer-events: auto !important; 57 | cursor: not-allowed !important; 58 | color: var(--neutral-gray-500); 59 | } 60 | 61 | button.primary-btn__disabled:hover, .primary-btn__disabled:hover { 62 | background-color: var(--neutral-gray-200); 63 | } 64 | 65 | button.primary-btn__disabled:focus, .primary-btn__disabled:focus { 66 | -webkit-box-shadow: none !important; 67 | box-shadow: none !important; 68 | } 69 | 70 | button.outline-btn, .outline-btn { 71 | background: transparent; 72 | padding: var(--btn-size-default); 73 | color: var(--color-blue-900); 74 | font-family: inherit; 75 | border: var(--border-medium); 76 | border-color: var(--color-blue-600); 77 | border-radius: var(--border-radius); 78 | } 79 | 80 | button.outline-btn:hover, .outline-btn:hover { 81 | background-color: var(--color-blue-200); 82 | } 83 | 84 | button.outline-btn__danger, .outline-btn__danger { 85 | border-color: var(--color-red-900) !important; 86 | color: var(--color-red-900) !important; 87 | } 88 | 89 | button.outline-btn__danger:hover, .outline-btn__danger:hover { 90 | background-color: var(--color-red-100); 91 | } 92 | 93 | button.outline-btn__success, .outline-btn__success { 94 | border-color: var(--color-green-900) !important; 95 | color: var(--color-green-900) !important; 96 | } 97 | 98 | button.outline-btn__success:hover, .outline-btn__success:hover { 99 | background-color: var(--color-green-100); 100 | } 101 | 102 | button.outline-btn__disabled, .outline-btn__disabled { 103 | -webkit-box-shadow: none; 104 | box-shadow: none; 105 | border-color: var(--neutral-gray-400); 106 | pointer-events: auto !important; 107 | cursor: not-allowed !important; 108 | color: var(--neutral-gray-400); 109 | } 110 | 111 | button.outline-btn__disabled:hover, .outline-btn__disabled:hover { 112 | background-color: inherit; 113 | } 114 | 115 | button.outline-btn__disabled:focus, .outline-btn__disabled:focus { 116 | -webkit-box-shadow: none !important; 117 | box-shadow: none !important; 118 | } 119 | 120 | button.text-btn, .text-btn { 121 | background: transparent; 122 | padding: var(--btn-size-default); 123 | color: var(--color-blue-900); 124 | font-family: inherit; 125 | border: var(--border-medium) solid rgba(0, 0, 0, 0); 126 | border-radius: var(--border-radius); 127 | } 128 | 129 | button.text-btn:hover, .text-btn:hover { 130 | background-color: var(--color-blue-200); 131 | } 132 | 133 | button.text-btn__danger, .text-btn__danger { 134 | color: var(--color-red-900) !important; 135 | } 136 | 137 | button.text-btn__danger:hover, .text-btn__danger:hover { 138 | background-color: var(--color-red-100); 139 | } 140 | 141 | button.text-btn__success, .text-btn__success { 142 | color: var(--color-green-900) !important; 143 | } 144 | 145 | button.text-btn__success:hover, .text-btn__success:hover { 146 | background-color: var(--color-green-100); 147 | } 148 | 149 | button.text-btn__disabled, .text-btn__disabled { 150 | -webkit-box-shadow: none; 151 | box-shadow: none; 152 | border-color: var(--neutral-gray-400); 153 | pointer-events: auto !important; 154 | cursor: not-allowed !important; 155 | color: var(--neutral-gray-400); 156 | } 157 | 158 | button.text-btn__disabled:hover, .text-btn__disabled:hover { 159 | background-color: inherit; 160 | } 161 | 162 | button.text-btn__disabled:focus, .text-btn__disabled:focus { 163 | -webkit-box-shadow: none !important; 164 | box-shadow: none !important; 165 | } 166 | 167 | .btn-default { 168 | padding: 12px 24px; 169 | } 170 | 171 | .btn-medium { 172 | padding: 16px 32px; 173 | } 174 | 175 | .btn-large { 176 | padding: 20px 40px; 177 | } 178 | 179 | a.link, .link { 180 | text-decoration: none; 181 | padding: 2px; 182 | font-family: inherit; 183 | font-size: inherit; 184 | border-radius: 8px; 185 | color: var(--color-blue-900); 186 | } 187 | 188 | a.link:hover, .link:hover { 189 | -webkit-filter: brightness(80%); 190 | filter: brightness(80%); 191 | } 192 | 193 | a.base-link, .base-link { 194 | font-family: inherit; 195 | padding: 2px; 196 | font-size: inherit; 197 | border-radius: 8px; 198 | color: var(--neutral-gray-800); 199 | } 200 | 201 | a.base-link:hover, .base-link:hover { 202 | -webkit-filter: brightness(80%); 203 | filter: brightness(80%); 204 | } 205 | 206 | a[role=button] { 207 | text-decoration: none; 208 | } 209 | 210 | button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, a[role=button]:hover, a:hover { 211 | cursor: pointer; 212 | } 213 | 214 | button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, a[role=button]:focus, a:focus { 215 | -webkit-box-shadow: var(--focus-shadow); 216 | box-shadow: var(--focus-shadow); 217 | } 218 | /*# sourceMappingURL=buttons.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/buttons/buttons.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAEA,AAAA,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,GAAc,KAAK,CAAA,AAAA,IAAC,CAAD,KAAC,AAAA,GAAa,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,GAAc,CAAC,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,GAAc,CAAC,CAAC;EACnF,WAAW,EAAE,OAAO;EACpB,SAAS,EAAE,OAAO;EAClB,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,sBAAsB;CACnC;;AASC,AAAA,YAAY,CAAS;EACnB,OAAO,EAPE,IAAI,CAAC,IAAI,CAOH,UAAU;CAC1B;;AAFD,AAAA,WAAW,CAAU;EACnB,OAAO,EANC,IAAI,CAAC,IAAI,CAMF,UAAU;CAC1B;;AAFD,AAAA,UAAU,CAAW;EACnB,OAAO,EALA,IAAI,CAAC,IAAI,CAKD,UAAU;CAC1B;;AAGH,AAAA,KAAK,CAAC;EAEF,kBAA0B,CAAW,UAAC;EAAtC,iBAA0B,CAAW,UAAC;EAAtC,gBAA0B,CAAW,UAAC;CAEzC;;AAOD,AAAA,MAAM,AAAA,YAAY,EAAE,YAAY,CAAC;EAC/B,gBAAgB,EAAE,qBAAqB;EACvC,OAAO,EAAE,uBAAuB;EAChC,KAAK,EAAE,YAAY;EACnB,WAAW,EAAE,OAAO;EACpB,MAAM,EAAE,oBAAoB;EAC5B,YAAY,EAAe,gBAAO;EAClC,aAAa,EAAE,oBAAoB;CACpC;;AAED,AACE,MADI,AACH,oBAAQ,EAAR,oBAAQ,CAAC;EACR,gBAAgB,EAAE,oBAAoB,CAAC,UAAU;EACjD,KAAK,EAAE,gBAAgB;CACxB;;AAJH,AAKE,MALI,AAKH,qBAAS,EAAT,qBAAS,CAAC;EACT,gBAAgB,EAAE,sBAAsB,CAAC,UAAU;EACnD,KAAK,EAAE,gBAAgB;CACxB;;AARH,AASE,MATI,AASH,qBAAS,EAAT,qBAAS,CAAC;EACT,gBAAgB,EAAE,uBAAuB,CAAC,UAAU;EACpD,KAAK,EAAE,uBAAuB;CAC/B;;AAZH,AAaE,MAbI,AAaH,sBAAU,EAAV,sBAAU,CAAC;EACV,UAAU,EAAE,IAAI;EAChB,gBAAgB,EAAE,uBAAuB;EACzC,cAAc,EAAE,eAAe;EAC/B,MAAM,EAAE,sBAAsB;EAC9B,KAAK,EAAE,uBAAuB;CAO/B;;AAzBH,AAmBI,MAnBE,AAaH,sBAAU,AAMR,MAAM,EANR,sBAAU,AAMR,MAAM,CAAC;EACN,gBAAgB,EAAE,uBAAuB;CAC1C;;AArBL,AAsBI,MAtBE,AAaH,sBAAU,AASR,MAAM,EATR,sBAAU,AASR,MAAM,CAAC;EACN,UAAU,EAAE,eAAe;CAC5B;;AAKL,AAAA,MAAM,AAAA,YAAY,EAAE,YAAY,CAAC;EAC/B,UAAU,EAAE,WAAW;EACvB,OAAO,EAAE,uBAAuB;EAChC,KAAK,EAAE,qBAAqB;EAC5B,WAAW,EAAE,OAAO;EACpB,MAAM,EAAE,oBAAoB;EAC5B,YAAY,EAAE,qBAAqB;EACnC,aAAa,EAAE,oBAAoB;CAIpC;;AAXD,AAQE,MARI,AAAA,YAAY,AAQf,MAAM,EARW,YAAY,AAQ7B,MAAM,CAAC;EACN,gBAAgB,EAAE,qBAAqB;CACxC;;AAGH,AACE,MADI,AACH,oBAAQ,EAAR,oBAAQ,CAAC;EACR,YAAY,EAAE,oBAAoB,CAAC,UAAU;EAC7C,KAAK,EAAE,oBAAoB,CAAC,UAAU;CAIvC;;AAPH,AAII,MAJE,AACH,oBAAQ,AAGN,MAAM,EAHR,oBAAQ,AAGN,MAAM,CAAC;EACN,gBAAgB,EAAE,oBAAoB;CACvC;;AANL,AAQE,MARI,AAQH,qBAAS,EAAT,qBAAS,CAAC;EACT,YAAY,EAAE,sBAAsB,CAAC,UAAU;EAC/C,KAAK,EAAE,sBAAsB,CAAC,UAAU;CAIzC;;AAdH,AAWI,MAXE,AAQH,qBAAS,AAGP,MAAM,EAHR,qBAAS,AAGP,MAAM,CAAC;EACN,gBAAgB,EAAE,sBAAsB;CACzC;;AAbL,AAeE,MAfI,AAeH,sBAAU,EAAV,sBAAU,CAAC;EACV,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,uBAAuB;EACrC,cAAc,EAAE,eAAe;EAC/B,MAAM,EAAE,sBAAsB;EAC9B,KAAK,EAAE,uBAAuB;CAO/B;;AA3BH,AAqBI,MArBE,AAeH,sBAAU,AAMR,MAAM,EANR,sBAAU,AAMR,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAO;CAC1B;;AAvBL,AAwBI,MAxBE,AAeH,sBAAU,AASR,MAAM,EATR,sBAAU,AASR,MAAM,CAAC;EACN,UAAU,EAAE,eAAe;CAC5B;;AAKL,AAAA,MAAM,AAAA,SAAS,EAAE,SAAS,CAAC;EACzB,UAAU,EAAE,WAAW;EACvB,OAAO,EAAE,uBAAuB;EAChC,KAAK,EAAE,qBAAqB;EAC5B,WAAW,EAAE,OAAO;EACpB,MAAM,EAAE,oBAAoB,CAAC,KAAK,CAAc,gBAAO;EACvD,aAAa,EAAE,oBAAoB;CAIpC;;AAVD,AAOE,MAPI,AAAA,SAAS,AAOZ,MAAM,EAPQ,SAAS,AAOvB,MAAM,CAAC;EACN,gBAAgB,EAAE,qBAAqB;CACxC;;AAGH,AACE,MADI,AACH,iBAAQ,EAAR,iBAAQ,CAAC;EACR,KAAK,EAAE,oBAAoB,CAAC,UAAU;CAIvC;;AANH,AAGI,MAHE,AACH,iBAAQ,AAEN,MAAM,EAFR,iBAAQ,AAEN,MAAM,CAAC;EACN,gBAAgB,EAAE,oBAAoB;CACvC;;AALL,AAOE,MAPI,AAOH,kBAAS,EAAT,kBAAS,CAAC;EACT,KAAK,EAAE,sBAAsB,CAAC,UAAU;CAIzC;;AAZH,AASI,MATE,AAOH,kBAAS,AAEP,MAAM,EAFR,kBAAS,AAEP,MAAM,CAAC;EACN,gBAAgB,EAAE,sBAAsB;CACzC;;AAXL,AAaE,MAbI,AAaH,mBAAU,EAAV,mBAAU,CAAC;EACV,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,uBAAuB;EACrC,cAAc,EAAE,eAAe;EAC/B,MAAM,EAAE,sBAAsB;EAC9B,KAAK,EAAE,uBAAuB;CAO/B;;AAzBH,AAmBI,MAnBE,AAaH,mBAAU,AAMR,MAAM,EANR,mBAAU,AAMR,MAAM,CAAC;EACN,gBAAgB,EAAE,OAAO;CAC1B;;AArBL,AAsBI,MAtBE,AAaH,mBAAU,AASR,MAAM,EATR,mBAAU,AASR,MAAM,CAAC;EACN,UAAU,EAAE,eAAe;CAC5B;;AAOH,AAAA,YAAY,CAAS;EACnB,OAAO,EArJE,IAAI,CAAC,IAAI;CAsJnB;;AAFD,AAAA,WAAW,CAAU;EACnB,OAAO,EApJC,IAAI,CAAC,IAAI;CAqJlB;;AAFD,AAAA,UAAU,CAAW;EACnB,OAAO,EAnJA,IAAI,CAAC,IAAI;CAoJjB;;AAMH,AAAA,CAAC,AAAA,KAAK,EAAE,KAAK,CAAC;EACZ,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,GAAG;EACZ,WAAW,EAAE,OAAO;EACpB,SAAS,EAAE,OAAO;EAClB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,qBAAqB;CAI7B;;AAVD,AAOE,CAPD,AAAA,KAAK,AAOH,MAAM,EAPD,KAAK,AAOV,MAAM,CAAC;EACN,MAAM,EAAE,eAAe;CACxB;;AAGH,AAAA,CAAC,AAAA,UAAU,EAAE,UAAU,CAAC;EACtB,WAAW,EAAE,OAAO;EACpB,OAAO,EAAE,GAAG;EACZ,SAAS,EAAE,OAAO;EAClB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,uBAAuB;CAI/B;;AATD,AAME,CAND,AAAA,UAAU,AAMR,MAAM,EANI,UAAU,AAMpB,MAAM,CAAC;EACN,MAAM,EAAE,eAAe;CACxB;;AAGH,AAAA,CAAC,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,EAAa;EACb,eAAe,EAAE,IAAI;CACtB;;AAGD,AAAA,MAAM,AAAA,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,KAAC,AAAA,CAAW,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,CAAC,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,CAAC,AAAA,MAAM,CAAC;EACvH,MAAM,EAAE,OAAO;CAChB;;AAED,AAAA,MAAM,AAAA,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,KAAC,AAAA,CAAW,MAAM,EAAE,KAAK,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,CAAC,CAAA,AAAA,IAAC,CAAD,MAAC,AAAA,CAAY,MAAM,EAAE,CAAC,AAAA,MAAM,CAAC;EACvH,UAAU,EAAE,mBAAmB;CAChC", 4 | "sources": [ 5 | "buttons.scss" 6 | ], 7 | "names": [], 8 | "file": "buttons.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/buttons/buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | // setting up button defaults 3 | button, input[type=button], input[type=reset], input[type=submit], a[role=button], a { 4 | font-family: inherit; 5 | font-size: inherit; 6 | font-weight: 500; 7 | transition: all 0.180s ease-in-out; 8 | } 9 | 10 | $button-sizes: ( 11 | "default": 12px 24px, 12 | "medium": 16px 32px, 13 | "large": 20px 40px 14 | ); 15 | 16 | @each $button-size, $size in $button-sizes { 17 | .btn-#{$button-size} { 18 | padding: $size !important; 19 | } 20 | } 21 | 22 | :root { 23 | @each $button-size, $size in $button-sizes { 24 | --btn-size-#{$button-size}: #{$size}; 25 | } 26 | } 27 | 28 | // button component styling properties 29 | $button-font-family: inherit; 30 | $button-font-weight: inherit; 31 | 32 | // primary button properties 33 | button.primary-btn, .primary-btn { 34 | background-color: var(--color-blue-900); 35 | padding: var(--btn-size-default); 36 | color: var(--white); 37 | font-family: inherit; 38 | border: var(--border-medium); 39 | border-color: rgba($color: #000000, $alpha: 0); 40 | border-radius: var(--border-radius); 41 | } 42 | 43 | button.primary-btn, .primary-btn { 44 | &__danger { 45 | background-color: var(--color-red-900) !important; 46 | color: white !important; 47 | } 48 | &__success { 49 | background-color: var(--color-green-900) !important; 50 | color: white !important; 51 | } 52 | &__warning { 53 | background-color: var(--color-yellow-900) !important; 54 | color: var(--neutral-gray-800); 55 | } 56 | &__disabled { 57 | box-shadow: none; 58 | background-color: var(--neutral-gray-200); 59 | pointer-events: auto !important; 60 | cursor: not-allowed !important; 61 | color: var(--neutral-gray-500); 62 | &:hover { 63 | background-color: var(--neutral-gray-200); 64 | } 65 | &:focus { 66 | box-shadow: none !important; 67 | } 68 | } 69 | } 70 | 71 | // secondary/outline button properties 72 | button.outline-btn, .outline-btn { 73 | background: transparent; 74 | padding: var(--btn-size-default); 75 | color: var(--color-blue-900); 76 | font-family: inherit; 77 | border: var(--border-medium); 78 | border-color: var(--color-blue-600); 79 | border-radius: var(--border-radius); 80 | &:hover { 81 | background-color: var(--color-blue-200); 82 | } 83 | } 84 | 85 | button.outline-btn, .outline-btn { 86 | &__danger { 87 | border-color: var(--color-red-900) !important; 88 | color: var(--color-red-900) !important; 89 | &:hover { 90 | background-color: var(--color-red-100); 91 | } 92 | } 93 | &__success { 94 | border-color: var(--color-green-900) !important; 95 | color: var(--color-green-900) !important; 96 | &:hover { 97 | background-color: var(--color-green-100); 98 | } 99 | } 100 | &__disabled { 101 | box-shadow: none; 102 | border-color: var(--neutral-gray-400); 103 | pointer-events: auto !important; 104 | cursor: not-allowed !important; 105 | color: var(--neutral-gray-400); 106 | &:hover { 107 | background-color: inherit; 108 | } 109 | &:focus { 110 | box-shadow: none !important; 111 | } 112 | } 113 | } 114 | 115 | // tertiary/text button properties 116 | button.text-btn, .text-btn { 117 | background: transparent; 118 | padding: var(--btn-size-default); 119 | color: var(--color-blue-900); 120 | font-family: inherit; 121 | border: var(--border-medium) solid rgba($color: #000000, $alpha: 0); 122 | border-radius: var(--border-radius); 123 | &:hover { 124 | background-color: var(--color-blue-200); 125 | } 126 | } 127 | 128 | button.text-btn, .text-btn { 129 | &__danger { 130 | color: var(--color-red-900) !important; 131 | &:hover { 132 | background-color: var(--color-red-100); 133 | } 134 | } 135 | &__success { 136 | color: var(--color-green-900) !important; 137 | &:hover { 138 | background-color: var(--color-green-100); 139 | } 140 | } 141 | &__disabled { 142 | box-shadow: none; 143 | border-color: var(--neutral-gray-400); 144 | pointer-events: auto !important; 145 | cursor: not-allowed !important; 146 | color: var(--neutral-gray-400); 147 | &:hover { 148 | background-color: inherit; 149 | } 150 | &:focus { 151 | box-shadow: none !important; 152 | } 153 | } 154 | } 155 | 156 | 157 | // css logic for button sizes 158 | @each $button-size, $size in $button-sizes { 159 | .btn-#{$button-size} { 160 | padding: $size; 161 | } 162 | } 163 | 164 | 165 | // links 166 | 167 | a.link, .link { 168 | text-decoration: none; 169 | padding: 2px; 170 | font-family: inherit; 171 | font-size: inherit; 172 | border-radius: 8px; 173 | color: var(--color-blue-900); 174 | &:hover { 175 | filter: brightness(80%); 176 | } 177 | } 178 | 179 | a.base-link, .base-link { 180 | font-family: inherit; 181 | padding: 2px; 182 | font-size: inherit; 183 | border-radius: 8px; 184 | color: var(--neutral-gray-800); 185 | &:hover { 186 | filter: brightness(80%); 187 | } 188 | } 189 | 190 | a[role=button] { 191 | text-decoration: none; 192 | } 193 | 194 | // pointer event 195 | button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, a[role=button]:hover, a:hover { 196 | cursor: pointer; 197 | } 198 | 199 | button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, a[role=button]:focus, a:focus { 200 | box-shadow: var(--focus-shadow); 201 | } -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/buttons/index.css: -------------------------------------------------------------------------------- 1 | @import url('./buttons.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/cards/cards.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 24px; 3 | border: 1px solid #A9A9A9; 4 | border-radius: 8px; 5 | } 6 | /*# sourceMappingURL=cards.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/cards/cards.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGA,AAAA,KAAK,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,MAAM,EAJS,GAAG,CAAC,KAAK,CADC,OAAO;EAMhC,aAAa,EAAE,GAAG;CACnB", 4 | "sources": [ 5 | "cards.scss" 6 | ], 7 | "names": [], 8 | "file": "cards.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/cards/cards.scss: -------------------------------------------------------------------------------- 1 | $border-neutral-color-400: #A9A9A9; 2 | $border-default: 1px solid $border-neutral-color-400; 3 | 4 | .card { 5 | padding: 24px; 6 | border: $border-default; 7 | border-radius: 8px; 8 | } -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/cards/index.css: -------------------------------------------------------------------------------- 1 | @import url('./cards.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/index.css: -------------------------------------------------------------------------------- 1 | @import url('./cards/index.css'); 2 | @import url('./buttons/index.css'); 3 | @import url('./input/index.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/input/index.css: -------------------------------------------------------------------------------- 1 | @import url('./input.css'); -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/input/input.css: -------------------------------------------------------------------------------- 1 | input { 2 | font-family: inherit; 3 | font-size: inherit; 4 | font-weight: 500; 5 | -webkit-transition: all 0.180s ease-in-out; 6 | transition: all 0.180s ease-in-out; 7 | } 8 | 9 | textarea { 10 | font-family: inherit; 11 | font-size: inherit; 12 | font-weight: 500; 13 | } 14 | 15 | .input-default { 16 | padding: 12px 24px !important; 17 | } 18 | 19 | .input-medium { 20 | padding: 16px 32px !important; 21 | } 22 | 23 | .input-large { 24 | padding: 20px 40px !important; 25 | } 26 | 27 | :root { 28 | --input-size-default: 12px 24px; 29 | --input-size-medium: 16px 32px; 30 | --input-size-large: 20px 40px; 31 | } 32 | 33 | input[type=text], input[type=password], 34 | input[type=date], input[type=datetime-local], 35 | input[type=email], input[type=number], 36 | input[type=image], input[type=month], 37 | input[type=tel], input[type=url], 38 | input[type=week], input[type=file] { 39 | border-radius: var(--border-radius); 40 | padding: var(--input-size-default); 41 | border: var(--border-light); 42 | color: var(--neutral-gray-900); 43 | font-family: inherit; 44 | border-color: var(--neutral-gray-500); 45 | } 46 | 47 | input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, 48 | input[type=date]::-webkit-input-placeholder, input[type=datetime-local]::-webkit-input-placeholder, 49 | input[type=email]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, 50 | input[type=image]::-webkit-input-placeholder, input[type=month]::-webkit-input-placeholder, 51 | input[type=tel]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, 52 | input[type=week]::-webkit-input-placeholder, input[type=file]::-webkit-input-placeholder { 53 | color: var(--neutral-gray-500); 54 | } 55 | 56 | input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, 57 | input[type=date]:-ms-input-placeholder, input[type=datetime-local]:-ms-input-placeholder, 58 | input[type=email]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, 59 | input[type=image]:-ms-input-placeholder, input[type=month]:-ms-input-placeholder, 60 | input[type=tel]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, 61 | input[type=week]:-ms-input-placeholder, input[type=file]:-ms-input-placeholder { 62 | color: var(--neutral-gray-500); 63 | } 64 | 65 | input[type=text]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, 66 | input[type=date]::-ms-input-placeholder, input[type=datetime-local]::-ms-input-placeholder, 67 | input[type=email]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, 68 | input[type=image]::-ms-input-placeholder, input[type=month]::-ms-input-placeholder, 69 | input[type=tel]::-ms-input-placeholder, input[type=url]::-ms-input-placeholder, 70 | input[type=week]::-ms-input-placeholder, input[type=file]::-ms-input-placeholder { 71 | color: var(--neutral-gray-500); 72 | } 73 | 74 | input[type=text]::placeholder, input[type=password]::placeholder, 75 | input[type=date]::placeholder, input[type=datetime-local]::placeholder, 76 | input[type=email]::placeholder, input[type=number]::placeholder, 77 | input[type=image]::placeholder, input[type=month]::placeholder, 78 | input[type=tel]::placeholder, input[type=url]::placeholder, 79 | input[type=week]::placeholder, input[type=file]::placeholder { 80 | color: var(--neutral-gray-500); 81 | } 82 | 83 | input[type=text]:hover, input[type=password]:hover, 84 | input[type=date]:hover, input[type=datetime-local]:hover, 85 | input[type=email]:hover, input[type=number]:hover, 86 | input[type=image]:hover, input[type=month]:hover, 87 | input[type=tel]:hover, input[type=url]:hover, 88 | input[type=week]:hover, input[type=file]:hover { 89 | background-color: var(--color-blue-100); 90 | border-color: var(--color-blue-500); 91 | } 92 | 93 | input[type=text]:focus, input[type=password]:focus, 94 | input[type=date]:focus, input[type=datetime-local]:focus, 95 | input[type=email]:focus, input[type=number]:focus, 96 | input[type=image]:focus, input[type=month]:focus, 97 | input[type=tel]:focus, input[type=url]:focus, 98 | input[type=week]:focus, input[type=file]:focus { 99 | outline: none !important; 100 | -webkit-box-shadow: var(--focus-shadow); 101 | box-shadow: var(--focus-shadow); 102 | border-color: var(--color-blue-500); 103 | } 104 | 105 | input[type=color] { 106 | border-radius: var(--border-radius); 107 | width: 72px; 108 | padding-right: 0.4em; 109 | background: rgba(0, 0, 0, 0); 110 | padding-left: 0.4em; 111 | border: var(--border-light); 112 | border-color: var(--neutral-gray-500); 113 | } 114 | 115 | input[type=color]::-webkit-input-placeholder { 116 | color: var(--neutral-gray-500); 117 | } 118 | 119 | input[type=color]:-ms-input-placeholder { 120 | color: var(--neutral-gray-500); 121 | } 122 | 123 | input[type=color]::-ms-input-placeholder { 124 | color: var(--neutral-gray-500); 125 | } 126 | 127 | input[type=color]::placeholder { 128 | color: var(--neutral-gray-500); 129 | } 130 | 131 | input[type=color]:hover { 132 | background-color: var(--color-blue-100); 133 | border-color: var(--color-blue-500); 134 | } 135 | 136 | input[type=color]:focus { 137 | outline: none !important; 138 | -webkit-box-shadow: var(--focus-shadow); 139 | box-shadow: var(--focus-shadow); 140 | border-color: var(--color-blue-500); 141 | } 142 | 143 | textarea { 144 | border-radius: var(--border-radius); 145 | padding: var(--input-size-default); 146 | border: var(--border-light); 147 | color: var(--neutral-gray-900); 148 | font-family: inherit; 149 | border-color: var(--neutral-gray-500); 150 | } 151 | 152 | textarea::-webkit-input-placeholder { 153 | color: var(--neutral-gray-500); 154 | } 155 | 156 | textarea:-ms-input-placeholder { 157 | color: var(--neutral-gray-500); 158 | } 159 | 160 | textarea::-ms-input-placeholder { 161 | color: var(--neutral-gray-500); 162 | } 163 | 164 | textarea::placeholder { 165 | color: var(--neutral-gray-500); 166 | } 167 | 168 | textarea:hover { 169 | background-color: var(--color-blue-100); 170 | border-color: var(--color-blue-500); 171 | } 172 | 173 | textarea:focus { 174 | outline: none !important; 175 | -webkit-box-shadow: var(--focus-shadow); 176 | box-shadow: var(--focus-shadow); 177 | border-color: var(--color-blue-500); 178 | } 179 | /*# sourceMappingURL=input.css.map */ -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/input/input.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "input.scss" 6 | ], 7 | "names": [], 8 | "file": "input.css" 9 | } -------------------------------------------------------------------------------- /source/eccentrictouch-widgets/input/input.scss: -------------------------------------------------------------------------------- 1 | 2 | // input defaults 3 | input { 4 | font-family: inherit; 5 | font-size: inherit; 6 | font-weight: 500; 7 | transition: all 0.180s ease-in-out; 8 | } 9 | 10 | textarea { 11 | font-family: inherit; 12 | font-size: inherit; 13 | font-weight: 500; 14 | } 15 | 16 | // input sizes 17 | $input-sizes: ( 18 | "default": 12px 24px, 19 | "medium": 16px 32px, 20 | "large": 20px 40px 21 | ); 22 | 23 | @each $input-size, $size in $input-sizes { 24 | .input-#{$input-size} { 25 | padding: $size !important; 26 | } 27 | } 28 | 29 | :root { 30 | @each $input-size, $size in $input-sizes { 31 | --input-size-#{$input-size}: #{$size}; 32 | } 33 | } 34 | 35 | // input variants 36 | input[type=text], input[type=password], 37 | input[type=date], input[type=datetime-local], 38 | input[type=email], input[type=number], 39 | input[type=image], input[type=month], 40 | input[type=tel], input[type=url], 41 | input[type=week], input[type=file] { 42 | border-radius: var(--border-radius); 43 | padding: var(--input-size-default); 44 | border: var(--border-light); 45 | color: var(--neutral-gray-900); 46 | font-family: inherit; 47 | border-color: var(--neutral-gray-500); 48 | &::placeholder { 49 | color: var(--neutral-gray-500); 50 | } 51 | &:hover { 52 | background-color: var(--color-blue-100); 53 | border-color: var(--color-blue-500); 54 | } 55 | &:focus { 56 | outline: none !important; 57 | box-shadow: var(--focus-shadow); 58 | border-color: var(--color-blue-500); 59 | } 60 | } 61 | 62 | input[type=color] { 63 | border-radius: var(--border-radius); 64 | width: 72px; 65 | padding-right: 0.4em; 66 | background: rgba($color: #000000, $alpha: 0.0); 67 | padding-left: 0.4em; 68 | border: var(--border-light); 69 | border-color: var(--neutral-gray-500); 70 | &::placeholder { 71 | color: var(--neutral-gray-500); 72 | } 73 | &:hover { 74 | background-color: var(--color-blue-100); 75 | border-color: var(--color-blue-500); 76 | } 77 | &:focus { 78 | outline: none !important; 79 | box-shadow: var(--focus-shadow); 80 | border-color: var(--color-blue-500); 81 | } 82 | } 83 | 84 | textarea { 85 | border-radius: var(--border-radius); 86 | padding: var(--input-size-default); 87 | border: var(--border-light); 88 | color: var(--neutral-gray-900); 89 | font-family: inherit; 90 | border-color: var(--neutral-gray-500); 91 | &::placeholder { 92 | color: var(--neutral-gray-500); 93 | } 94 | &:hover { 95 | background-color: var(--color-blue-100); 96 | border-color: var(--color-blue-500); 97 | } 98 | &:focus { 99 | outline: none !important; 100 | box-shadow: var(--focus-shadow); 101 | border-color: var(--color-blue-500); 102 | } 103 | } -------------------------------------------------------------------------------- /source/eccentrictouch.css: -------------------------------------------------------------------------------- 1 | @import url('./eccentrictouch-core/index.css'); 2 | /* @import url('./eccentrictouch-vendors/'); */ 3 | @import url('./eccentrictouch-widgets/index.css'); 4 | 5 | /* reseter */ 6 | *, *::before, *::after { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | font-family: var(--base-font-family__not-default); 14 | color: var(--base-text-color__not-default); 15 | } 16 | 17 | body:focus { 18 | outline: none; 19 | } 20 | 21 | :root { 22 | --base-text-color__not-default: rgba(41, 41, 41, 0.9); 23 | --base-font-family__not-default: 'Inter', sans-serif; 24 | } -------------------------------------------------------------------------------- /source/index.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Eccentric Touch Test 9 | 10 | 11 |
12 |

Search results for jobs related to "Frontend Developer"

13 |

Search jobs related to the topic Frontend Developer

14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 | 29 | 30 | 36 |
37 |
38 |
39 |
40 |

Frontend Developer (Intern)

41 |
42 |

43 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio 44 | delectus neque eos, 45 | officiis totam sapiente inventore? 46 |

47 |

Job listed on 21st September, 2021

48 | 49 |
50 |
51 |
52 |

Frontend Developer (Intern)

53 |
54 |

55 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio 56 | delectus neque eos, 57 | officiis totam sapiente inventore? 58 |

59 |

Job listed on 21st September, 2021

60 | 61 |
62 |
63 |
64 |

Frontend Developer (Intern)

65 |
66 |

67 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio 68 | delectus neque eos, 69 | officiis totam sapiente inventore? 70 |

71 |

Job listed on 21st September, 2021

72 | 73 |
74 |
75 |
76 |

Frontend Developer (Intern)

77 |
78 |

79 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio 80 | delectus neque eos, 81 | officiis totam sapiente inventore? 82 |

83 |

Job listed on 21st September, 2021

84 | 85 |
86 |
87 |
88 |

Frontend Developer (Intern)

89 |
90 |

91 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio 92 | delectus neque eos, 93 | officiis totam sapiente inventore? 94 |

95 |

Job listed on 21st September, 2021

96 | 97 |
98 |
99 |
100 |
101 | 102 | 103 | 104 | 105 | Link 106 | Link 107 | Link 108 |
109 |
110 |

111 | Hello this is a default text 112 |

113 |
114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 |
124 | 125 |
126 | 127 | 128 |
129 | 130 | 131 | --------------------------------------------------------------------------------