├── .all-contributorsrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── button_idea.md │ └── feature_request.md ├── pull_request_template.md └── workflows │ ├── codeql-analysis.yml │ ├── greet_messege.yml │ ├── main.yml │ ├── minify_css.yml │ └── stale.yml ├── .gitignore ├── .vs ├── ProjectSettings.json ├── VSWorkspaceState.json ├── sbuttons │ └── v15 │ │ └── .suo └── slnx.sqlite ├── CONTRIBUTING.md ├── CONTRIBUTORS.md ├── LICENSE ├── README.md ├── SECURITY.md ├── debug.log ├── dist ├── sbuttons.css └── sbuttons.min.css ├── netlify.toml ├── package-lock.json ├── package.json ├── src ├── _variables.less ├── components │ ├── _animated.less │ ├── _basic.less │ ├── _home.less │ ├── _hover.less │ ├── _icon.less │ ├── _payment.less │ ├── _social.less │ ├── _special.less │ ├── _styles.less │ ├── animated │ │ ├── _arrow.less │ │ ├── _atom.less │ │ ├── _aurapulse.less │ │ ├── _bounce.less │ │ ├── _colored-on-hover.less │ │ ├── _diagonal.less │ │ ├── _expanding.less │ │ ├── _fill.less │ │ ├── _flash.less │ │ ├── _gradient-border.less │ │ ├── _hinge.less │ │ ├── _invert.less │ │ ├── _layered.less │ │ ├── _liquid.less │ │ ├── _loading-btn.less │ │ ├── _neon.less │ │ ├── _nudge.less │ │ ├── _papercurl.less │ │ ├── _pudding.less │ │ ├── _pulse.less │ │ ├── _rainbow.less │ │ ├── _ripple.less │ │ ├── _scale.less │ │ ├── _shake.less │ │ ├── _shine.less │ │ ├── _skew.less │ │ ├── _snake.less │ │ ├── _splash.less │ │ ├── _spotlight.less │ │ ├── _spring.less │ │ ├── _striped-animated.less │ │ ├── _transparent.less │ │ └── _vibrate.less │ ├── hover │ │ └── _shadow-on-hover.less │ ├── icon │ │ ├── _grow.less │ │ ├── _hatch.less │ │ ├── _icon-btn.less │ │ ├── _like.less │ │ ├── _slide.less │ │ └── _star.less │ ├── payment │ │ ├── _alipay.less │ │ ├── _amazon-pay.less │ │ ├── _apple-pay.less │ │ ├── _bitcoin.less │ │ ├── _ethereum-pay.less │ │ ├── _gpay.less │ │ ├── _mastercard.less │ │ ├── _paypal.less │ │ ├── _paytm.less │ │ ├── _phonepe.less │ │ ├── _stripe.less │ │ ├── _visa.less │ │ └── _wechat-pay.less │ ├── social │ │ ├── _amazon.less │ │ ├── _apple.less │ │ ├── _bitbucket.less │ │ ├── _discord.less │ │ ├── _dropbox.less │ │ ├── _facebook.less │ │ ├── _flickr.less │ │ ├── _github.less │ │ ├── _gitlab.less │ │ ├── _google.less │ │ ├── _instagram.less │ │ ├── _linkedin.less │ │ ├── _microsoft.less │ │ ├── _pinterest.less │ │ ├── _qq.less │ │ ├── _reddit.less │ │ ├── _slack.less │ │ ├── _snapchat.less │ │ ├── _spotify.less │ │ ├── _steam.less │ │ ├── _telegram.less │ │ ├── _tumblr.less │ │ ├── _twitter.less │ │ ├── _vk.less │ │ ├── _wechat.less │ │ ├── _weibo.less │ │ └── _whatsapp.less │ ├── special │ │ ├── _code-btn.less │ │ ├── _disco.less │ │ ├── _handwritten-btn.less │ │ ├── _neumorphic.less │ │ ├── _play-game.less │ │ ├── _rainbow-border.less │ │ ├── _retro.less │ │ ├── _toggle.less │ │ └── _win95.less │ └── styles │ │ ├── _click.less │ │ ├── _dashed.less │ │ ├── _disabled.less │ │ ├── _glossy-btn.less │ │ ├── _glow.less │ │ ├── _gradient.less │ │ ├── _key.less │ │ ├── _neon-border.less │ │ ├── _outline.less │ │ ├── _rounded-bottom.less │ │ ├── _rounded-diagonal-tl.less │ │ ├── _rounded-diagonal-tr.less │ │ ├── _rounded-top.less │ │ ├── _shadow-3d.less │ │ ├── _shadow.less │ │ ├── _smooth-shadow.less │ │ ├── _stack.less │ │ ├── _striped.less │ │ ├── _xlarge.less │ │ └── _xsmall.less └── sbuttons.less └── website ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon.png ├── images │ ├── 404.svg │ ├── logo-colored.png │ ├── logo.png │ └── projects │ │ ├── grammarly-ghost.jpg │ │ └── uuid.png ├── index.html ├── manifest.json └── robots.txt ├── src ├── app.js ├── components │ ├── Button.js │ ├── ButtonExample.js │ ├── ButtonSection.js │ ├── Code.js │ ├── Footer.js │ ├── Header.js │ ├── Hero.js │ ├── MenuToggler.js │ ├── Meta.js │ ├── ProjectCard.js │ ├── SectionHeader.js │ ├── SectionLink.js │ ├── Sidebar.js │ ├── SidebarLink.js │ └── SubsectionHeader.js ├── data │ ├── button-colors.json │ ├── buttons.json │ └── projects.json ├── index.css ├── index.js ├── pages │ ├── 404 │ │ └── index.js │ ├── Common.js │ ├── Documentation │ │ └── index.js │ ├── Examples │ │ └── index.js │ ├── Home │ │ └── index.js │ └── Projects │ │ └── index.js ├── reportWebVitals.js ├── sbuttons.min.css ├── setupTests.js └── vars.js └── tailwind.config.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://www.buymeacoffee.com/shahednasser'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **1 - Describe the bug** 11 | 12 | **2 - Expected behavior of what should have happened (if applicable)** 13 | 14 | **3 - Screenshots (if applicable)** 15 | 16 | **4 - Additional notes** 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/button_idea.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Button Idea 3 | about: Suggest a new button idea 4 | title: "[BUTTON IDEA]:" 5 | labels: 'Priority: Low, button-idea' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **1. Name of button**: 11 | 12 | **2. Description**: 13 | 14 | **3. Button Type (Animated, Special, etc...)**: 15 | 16 | **4. Will you work on it?**: 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | 12 | **Describe the solution you'd like** 13 | 14 | **Additional notes** 15 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Issue: 6 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '22 16 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | 28 | strategy: 29 | fail-fast: false 30 | matrix: 31 | language: [ 'javascript' ] 32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 33 | # Learn more: 34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 35 | 36 | steps: 37 | - name: Checkout repository 38 | uses: actions/checkout@v2 39 | 40 | # Initializes the CodeQL tools for scanning. 41 | - name: Initialize CodeQL 42 | uses: github/codeql-action/init@v1 43 | with: 44 | languages: ${{ matrix.language }} 45 | # If you wish to specify custom queries, you can do so here or in a config file. 46 | # By default, queries listed here will override any specified in a config file. 47 | # Prefix the list here with "+" to use these queries and those in the config file. 48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 49 | 50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 51 | # If this step fails, then you should remove it and run the build manually (see below) 52 | - name: Autobuild 53 | uses: github/codeql-action/autobuild@v1 54 | 55 | # ℹ️ Command-line programs to run using the OS shell. 56 | # 📚 https://git.io/JvXDl 57 | 58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 59 | # and modify them (or add more) to build your code if your project 60 | # uses a compiled language 61 | 62 | #- run: | 63 | # make bootstrap 64 | # make release 65 | 66 | - name: Perform CodeQL Analysis 67 | uses: github/codeql-action/analyze@v1 68 | -------------------------------------------------------------------------------- /.github/workflows/greet_messege.yml: -------------------------------------------------------------------------------- 1 | name: "Greet With A Random Joke" 2 | on: 3 | issues: 4 | types: [opened, reopened] 5 | jobs: 6 | test: 7 | name: setup environment 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: mast joke mara 11 | uses: deep5050/MastJokeMara@main 12 | with: 13 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 14 | issue_msg: | 15 | Hi, {{author}}, 16 | Thanks for opening an issue :blue_heart: your issue will be seen by maintainers soon. 17 | Contributors :people_holding_hands: like you make the open source community :earth_africa: such an amazing place to learn :book: , inspire :angel:, and create :art: . 18 | We will investigate :eyes: and get back to you as soon as possible :+1: . 19 | Just make sure you have given us sufficient information :information_source:. 20 | By that time enjoy this joke :point_down: , hope you like it :smile: 21 | 22 | {{joke}} 23 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Format (prettier) & Minify 2 | 3 | on: 4 | push: 5 | branches: 6 | - 'master' 7 | 8 | jobs: 9 | prettier: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | with: 14 | ref: ${{ github.head_ref }} 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: "12.x" 18 | - name: Install 19 | run: npm install 20 | env: 21 | CI: true 22 | 23 | - name: Run prettier 24 | run: npm run prettier 25 | 26 | - uses: stefanzweifel/git-auto-commit-action@v4 27 | with: 28 | commit_message: Apply prettier changes 29 | -------------------------------------------------------------------------------- /.github/workflows/minify_css.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: Minify CSS 4 | 5 | # Controls when the action will run. Triggers the workflow on pull request 6 | on: 7 | push: 8 | branches: 9 | - master 10 | paths: 11 | - 'dist/sbuttons.css' 12 | 13 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 14 | jobs: 15 | minify: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | ref: ${{ github.head_ref }} 21 | - uses: actions/setup-node@v1 22 | with: 23 | node-version: "12.x" 24 | - name: Install 25 | run: npm install 26 | env: 27 | CI: true 28 | 29 | - name: Build CSS 30 | run: npm run build 31 | 32 | - uses: stefanzweifel/git-auto-commit-action@v4 33 | with: 34 | commit_message: Apply minification 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | name: Mark stale issues and pull requests 2 | 3 | on: 4 | schedule: 5 | - cron: "0 0 * * *" 6 | 7 | jobs: 8 | stale: 9 | 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/stale@v4 14 | with: 15 | repo-token: ${{ secrets.GITHUB_TOKEN }} 16 | stale-issue-message: '@shahednasser reporting a stale issue.' 17 | stale-issue-label: 'stale-issue' 18 | exempt-issue-label: 'Always Open,Cannot Reproduce' 19 | stale-pr-message: '@shahednasser reporting a stale pull request' 20 | days-before-stale: 7 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .cache 3 | .idea 4 | .vs 5 | .vscode 6 | .DS_STORE -------------------------------------------------------------------------------- /.vs/ProjectSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "CurrentProjectSetting": null 3 | } -------------------------------------------------------------------------------- /.vs/VSWorkspaceState.json: -------------------------------------------------------------------------------- 1 | { 2 | "ExpandedNodes": [ 3 | "" 4 | ], 5 | "PreviewInSolutionExplorer": false 6 | } -------------------------------------------------------------------------------- /.vs/sbuttons/v15/.suo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/.vs/sbuttons/v15/.suo -------------------------------------------------------------------------------- /.vs/slnx.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/.vs/slnx.sqlite -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | If you have a new button style you would like to add or any fixes you want to contribute, be sure to follow this guideline. 4 | 5 | You can also join or start [discussions](https://github.com/sButtons/sbuttons/discussions) with the community members if you have any ideas or questions! 6 | 7 | Please note we have a code of conduct, please follow it in all your interactions with the project. 8 | 9 | ## Important Notes 10 | 11 | 1. Issues that have the label `first-timers-only` is made for beginners who have contributed to less than 5 repositories. This is a way to help people who are new to open source and contributing. 12 | 2. Before contributing to an issue, make sure that no one is assigned or has taken that issue. If no one is and you would like to work on the issue, please comment on the issue to let others know that someone is working on the issue. 13 | 3. Before creating a pull request, it is **important** that you make sure your branch and repository are up to date with this one. Some conflicts can be resolved, but many are hard to resolve. **Add the upstream** branch and always keep your branch up to date. 14 | 15 | # Contents 16 | 17 | - [Instructions](#instructions) 18 | - [Notes on Creating New Buttons](#notes-on-creating-new-buttons) 19 | - [Button Ideas](#button-ideas) 20 | - [Create Pull Request](#create-pull-request) 21 | - [Note on abandoned pull requests](#note-on-abandoned-pull-requests) 22 | - [Code of Conduct](#code-of-conduct) 23 | - [Our Pledge](#our-pledge) 24 | - [Our Standards](#our-standards) 25 | - [Our Responsibilities](#our-responsibilities) 26 | - [Scope](#scope) 27 | - [Enforcement](#enforcement) 28 | 29 | # Instructions 30 | 31 | 1. Fork the repository. 32 | 33 | 2. To make changes to the existing buttons, or add new ones, all changes should be made in `src/sbuttons.less`. 34 | 35 | 1. If you're adding a new button type similar to basic, hover, etc..., create a file in `src/components` with the name preceded by `_`. For example: `_basic.less`. Remember to include the file when you're done in `src/sbuttons.less`. 36 | 2. If you're adding a new button to an existing type (for example: animated), create a file in `src/components/` with the name preceded by `_`. For example: `_arrow.less`. Remember to include the file when you're done in `src/components/`. 37 | 38 | **Please follow the convention in naming button classes: `new-class-btn` where new-class is the button name. For example, for hover button it's `hover-btn`.** 39 | 40 | There are Two ways to monitor and implement your changes as a developer. 41 | 42 | - Let the scripts do it all for you - 43 | 44 | ``` 45 | npm run build 46 | ``` 47 | 48 | It does two tasks simultaneously. 49 | 50 | 51 | a) watch changes in all .less file ,compile the changed files and reflect the necessary changes in dist/sbuttons.css. 52 | 53 | b) watch changes in dist/sbuttons.css and minify it into dist/sbuttons.min.css 54 | 55 | So you just need to run "npm run build" and rest would be handled by scripts 56 | 57 | 58 | - Do everything manually - 59 | 60 | 61 | Here all the control is in your hands 62 | 63 | After making any changes, you need to compile the LESS file into CSS. To do that there you can use the following: 64 | 65 | 1. Start command: 66 | ``` 67 | npm start 68 | ``` 69 | This will watch the updates and changes you make for any of the `.less` files inside `src`, then compile them into `dist/sbuttons.css`. 70 | 2. Compile command: 71 | ``` 72 | npm run compile 73 | ``` 74 | 3. Minify command: 75 | 76 | ``` 77 | npm run clean-css 78 | ``` 79 | 80 | Make sure to run `npm install` before any of these commands. 81 | 82 | To see how the button looks like after making changes, you'll need to run the website (follow the next steps). 83 | 84 | 3. To make changes to the website: 85 | 86 | The website uses React and TailwindCSS. All website related files are under the `website` directory. The components and pages that are written under React are in `website/src`. 87 | 88 | You should not make any changes to files in `website/build` directly. Make all changes in files under `website/src`. 89 | 90 | To start the dev server: 91 | 92 | ``` 93 | npm start 94 | ``` 95 | 96 | 1. To add new examples, make changes in `website/src/data` 97 | 98 | 1. To add new button colors, add them to `button-colors.json` in `data` 99 | 2. To add new button types, add them to `buttons.json` in `data`. It should follow the following format: 100 | 101 | ``` 102 | { 103 | type, //type of button. Will be used for grouping buttons 104 | 105 | label, //the title of the button section, which will also be shown in the sidebar menu 106 | 107 | classes, //the default classes of this section. For example, for basic buttons it's "basic-btn" 108 | 109 | text, //the text to show on the button. If this is omitted, the default text will be the name of the button 110 | 111 | shouldHaveRoundedType, //indicates if rounded button type should hidden or not, defaults to true 112 | 113 | shouldHaveBlockType, //indicates if block button type should hidden or not, defaults to true 114 | 115 | usesColors, //indicates if the button will be using the default sButton colors for the example, defaults to true 116 | 117 | usesText, //indicates if the button should have a text inside of it. This is useful for icon buttons for example. 118 | //defaults to true 119 | 120 | variations, //this is for button types that don't use buttonColors or don't have normal and rounded 121 | // button styling. 122 | 123 | children, //If the type has subtypes, add them here in an array. The subtypes should 124 | //also follow this same type format 125 | } 126 | ``` 127 | 128 | `children` can be of the same format above, except it can't have its own children at the moment. 129 | 130 | `variations` can have the following format: 131 | 132 | ``` 133 | { 134 | label, //the title of the variation section in the button example 135 | classes, //the classes the button should have in the variation, can be empty string 136 | text, //the text to show on the button. If this is omitted, the default text will be the name of the button 137 | html, //if the button needs HTML to be placed inside instead of text 138 | } 139 | ``` 140 | 141 | It should be noted that if the parent type has `shouldHaveRoundedType`, `shouldHaveBlockType`, `usesColors` or `usesText`, it will affect the buttons in `children` and `variations`. Buttons in `children` can have those attributes as well. 142 | 143 | 2. To submit new projects using sButtons, all projects should be added in `website/src/data/projects.json`. The project object should be of the following format: 144 | 145 | ``` 146 | { 147 | name, //name of the project 148 | about, //short description of the project 149 | url, //URL of the project 150 | image //Image of the project. When adding a project, take a screenshot of it or add any 151 | //image of it under website/public/images/projects and include the path relative to 152 | //public here 153 | } 154 | ``` 155 | 156 | 3. **CSS**: The website uses TailwindCSS, so not a lot of changes is required in the CSS. However, any changes should be added in `website/src/index.css` 157 | 158 | ## Notes on Creating New Buttons 159 | 160 | ### Animated Buttons 161 | 162 | When adding a new animated button, you need to place the animation or transition that happens on hover in a mixin. Then, you need to call that mixin in the hover state and in an `animated` class nested inside that button, so that when the `animated` class is added to the button the animation runs without needing to hover the button. Depending on your button, the animation should either be continuous (run infinitly) or just once. 163 | 164 | ### Dark Mode 165 | 166 | All buttons need to support dark mode when needed. If your button on dark mode does not look so good (problem with the color, animation, etc...), you need to do the following: 167 | 168 | 1. add a `dark-mode` class to the button. 169 | 2. add support for having a parent with `[data-theme="dark"]`. 170 | 171 | ## Button Ideas 172 | 173 | If you would like to suggest a new button idea, please create a [new discussion](https://github.com/sButtons/sbuttons/discussions/new) with the category "idea". 174 | 175 | ## Create Pull Request 176 | 177 | 1. Create a new branch: 178 | ``` 179 | git branch new-branch 180 | ``` 181 | 2. Checkout new branch: 182 | ``` 183 | git checkout new-branch 184 | ``` 185 | 3. Add, commit and push your changes to the new branch 186 | ``` 187 | git add . 188 | git commit -m "changes" 189 | git push origin new-branch 190 | ``` 191 | 4. To make sure your forked repository is up to date with this repository. Add this repository as the upstream repository by doing the following: 192 | 193 | ``` 194 | git remote add upstream https://github.com/sButtons/sbuttons.git 195 | 196 | ``` 197 | 198 | Then, to fetch from this repository: 199 | 200 | ``` 201 | git fetch upstream 202 | git merge upstream/master master 203 | ``` 204 | 205 | 5. Go to your forked repository and press the “New pull request” button. 206 | 6. Once the pull request is reviewed and approved, it will be merged. 207 | 208 | ### Note on abandoned pull requests 209 | 210 | If a pull request is left unchanged for a week after changes are requested and the issue was assigned to the person that sent the new pull request, they will be unassigned and someone else will be given the chance to work on it. 211 | 212 | ## Code of Conduct 213 | 214 | ### Our Pledge 215 | 216 | In the interest of fostering an open and welcoming environment, we as 217 | contributors and maintainers pledge to make participation in our project and 218 | our community a harassment-free experience for everyone, regardless of age, body 219 | size, disability, ethnicity, gender identity and expression, level of experience, 220 | nationality, personal appearance, race, religion, or sexual identity and 221 | orientation. 222 | 223 | ### Our Standards 224 | 225 | Examples of behavior that contributes to creating a positive environment 226 | include: 227 | 228 | - Using welcoming and inclusive language 229 | - Being respectful of differing viewpoints and experiences 230 | - Gracefully accepting constructive criticism 231 | - Focusing on what is best for the community 232 | - Showing empathy towards other community members 233 | 234 | Examples of unacceptable behavior by participants include: 235 | 236 | - The use of sexualized language or imagery and unwelcome sexual attention or 237 | advances 238 | - Trolling, insulting/derogatory comments, and personal or political attacks 239 | - Public or private harassment 240 | - Publishing others' private information, such as a physical or electronic 241 | address, without explicit permission 242 | - Other conduct which could reasonably be considered inappropriate in a 243 | professional setting 244 | 245 | ### Our Responsibilities 246 | 247 | Project maintainers are responsible for clarifying the standards of acceptable 248 | behavior and are expected to take appropriate and fair corrective action in 249 | response to any instances of unacceptable behavior. 250 | 251 | Project maintainers have the right and responsibility to remove, edit, or 252 | reject comments, commits, code, wiki edits, issues, and other contributions 253 | that are not aligned to this Code of Conduct, or to ban temporarily or 254 | permanently any contributor for other behaviors that they deem inappropriate, 255 | threatening, offensive, or harmful. 256 | 257 | ### Scope 258 | 259 | This Code of Conduct applies both within project spaces and in public spaces 260 | when an individual is representing the project or its community. Examples of 261 | representing a project or community include using an official project e-mail 262 | address, posting via an official social media account, or acting as an appointed 263 | representative at an online or offline event. Representation of a project may be 264 | further defined and clarified by project maintainers. 265 | 266 | ### Enforcement 267 | 268 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 269 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 270 | complaints will be reviewed and investigated and will result in a response that 271 | is deemed necessary and appropriate to the circumstances. The project team is 272 | obligated to maintain confidentiality with regard to the reporter of an incident. 273 | Further details of specific enforcement policies may be posted separately. 274 | 275 | Project maintainers who do not follow or enforce the Code of Conduct in good 276 | faith may face temporary or permanent repercussions as determined by other 277 | members of the project's leadership. 278 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 sButtons 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > :warning: This repository is now archived as I'm unable to maintain it moving forward. Thank you for everyone that contributed to this project! 2 | 3 | ![sButtons](./website/public/images/logo-colored.png) 4 | 5 | Logo made by [Harshit Sharma](https://www.github.com/icoderharshit) 6 | 7 | 8 | 9 | [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](./LICENSE) 10 | [![CodeQL](https://github.com/sButtons/sbuttons/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/sButtons/sbuttons/actions/workflows/codeql-analysis.yml) [![npm version](https://badge.fury.io/js/sbuttons.svg)](https://badge.fury.io/js/sbuttons) [![](https://data.jsdelivr.com/v1/package/npm/sbuttons/badge)](https://www.jsdelivr.com/package/npm/sbuttons) 11 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](./CONTRIBUTING.md) [![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](./CONTRIBUTING.md) 12 | [![All Contributors](https://img.shields.io/badge/all_contributors-259-orange.svg?style=flat-square)](./CONTRIBUTORS.md) 13 | 14 | 15 | :bulb: Simple buttons you can use easily for your next project. 16 | 17 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/shahednasser) 18 | 19 | # Contents 20 | 21 | - [Get started with sButtons](#get-started-with-sbuttons) 22 | - [Download CSS File](#download-css-file) 23 | - [CDN](#cdn) 24 | - [NPM](#npm) 25 | - [Using in CSS](#using-in-css) 26 | - [Using in LESS](#using-in-less) 27 | - [Modify Colors](#modifying-button-colors) 28 | - [Usage](#usage) 29 | - [Basic Button](#basic-button) 30 | - [Block Buttons](#block-buttons) 31 | - [Disabled Buttons](#disabled-buttons) 32 | - [Only Icon](#only-icon) 33 | - [Icon Positioned to The Left](#icon-positioned-to-the-left) 34 | - [Icon Positioned to The Right](#icon-positioned-to-the-right) 35 | - [Toggle Button](#toggle-button) 36 | - [Toggle Button as Checkboxes](#toggle-button-as-checkboxes) 37 | - [Toggle Button as Radio Button](#toggle-button-as-radio-button) 38 | - [Rounded Buttons](#rounded-buttons) 39 | - [Animated Buttons](#animated-buttons) 40 | - [Dark Mode](#dark-mode) 41 | - [Using dark-mode Class](#using-dark-mode-class) 42 | - [Using data-theme attribute](#using-data-theme-attribute) 43 | - [Contribution](#contribution) 44 | - [Button ideas](#button-ideas) 45 | - [Projects Using sButtons](#projects-using-sbuttons) 46 | - [Contributors](#contributors) 47 | - [LICENSE](#license) 48 | 49 | # Get Started with sButtons 50 | 51 | ## Download CSS File 52 | 53 | You can download the (CSS file)(https://raw.githubusercontent.com/sButtons/sbuttons/master/dist/sbuttons.min.css) and then add it to your HTML file in between the tags. 54 | Download the file and link it as a stylesheet in between your `` tags, as shown below. 55 | 56 | ```html 57 | 58 | ``` 59 | 60 | Make sure to replace `"/path/to/sbuttons.min.css"` with the path you stored it in. 61 | 62 | ## CDN 63 | 64 | Or instead of downloading the file, you can use the CDN. 65 | 66 | ```html 67 | 71 | ``` 72 | 73 | In case of using buttons that have icons in them, make sure to include font awesome's CDN in the `` tag. 74 | 75 | ```html 76 | 82 | ``` 83 | 84 | ## NPM 85 | 86 | You can install sButtons using NPM: 87 | 88 | ```shell 89 | npm i sbuttons 90 | ``` 91 | 92 | ## Using in CSS 93 | 94 | You can import the CSS file found in `dist/sbuttons.css` or `dist/sbuttons.min.css`: 95 | 96 | ```css 97 | @import url("~sbuttons/dist/sbuttons.min.css"); 98 | ``` 99 | 100 | ## Using in LESS 101 | 102 | You can also import the less file found in `src/sbuttons.less`: 103 | 104 | ```css 105 | @import "~sbuttons/src/sbuttons.less"; 106 | ``` 107 | 108 | ## Modify Colors 109 | 110 | To modify button colors, `import src/_variables.less` in your less file, then make changes to the variables after the import. 111 | For example, to change the blue color to a different shade: 112 | 113 | ```css 114 | @import "/path/to/_variables.less"; 115 | @blue: #54a2bd; /* Make it darker */ 116 | ``` 117 | 118 | Check out [_variables.less](https://github.com/sButtons/sbuttons/blob/master/src/_variables.less) for the full list of variables. 119 | 120 | # Usage 121 | 122 | ## Basic Button 123 | 124 | To use sButtons in your project, just add the classes of sButton you want to either ` 128 | ``` 129 | 130 | You can find all classes mentioned in our [Examples](https://sbuttons.netlify.app/examples) page. 131 | 132 | ## Block Buttons 133 | 134 | To use sButtons with block display, add the class to either ` 138 | ``` 139 | 140 | ## Disabled Buttons 141 | 142 | To make a ` 146 | ``` 147 | 148 | ## Icon Buttons 149 | 150 | The `base-icon-btn` class enables you to have a normal, customizable icon button. Using it, you decide to add any fontawesome icon in it. You can choose to either place it on the left or right side of the button with the available classes. 151 | 152 | ## Only Icon 153 | 154 | The `icon-btn` class alone gives you a default button with no background color and border. 155 | 156 | ```html 157 | 158 | ``` 159 | 160 | ## Icon Positioned to The Left 161 | 162 | Adding the icon-left class to a button makes the icon positioned to the left. 163 | 164 | ```html 165 | 168 | ``` 169 | 170 | ## Icon Positioned to The Right 171 | 172 | Adding the `icon-right` class to a button makes the icon 173 | positioned to the right. 174 | 175 | ```html 176 | 179 | ``` 180 | 181 | ## Toggle Button 182 | 183 | The `toggle-btn` class, along with the `toggle-off-btn` / `toggle-on-btn` state class enables you to have a toggle button. Apart from the basic use, it can also be used for checkboxes and radio buttons. While not necessary, you can use the available state classes to choose whether your checkboxes and radio buttons are checked or not. 184 | 185 | ## Toggle Button as Checkboxes 186 | 187 | Adding the `toggle-btn` class to your checkbox inputs converts them to toggle buttons. 188 | For example: 189 | 190 | ```html 191 | 192 | ``` 193 | 194 | ## Toggle Button as Radio Buttons 195 | 196 | Adding the `toggle-btn` class to your radio inputs converts them to toggle buttons. 197 | 198 | ```html 199 | 200 | ``` 201 | 202 | ## Rounded buttons 203 | To add the rounded buttons with a particular radius, you can use various classes like `rounded-x-btn` where x is the radius in pixels which you want. Here x ranges from `5`(border-radius = 5px) to `fully rounded`(border-radius = 50%). 204 | 205 | ```html 206 | 207 | ``` 208 | 209 | ## Animated Buttons 210 | 211 | To use Animated sButtons in your project, add the classes of the animated sButton you want to either ` 215 | ``` 216 | Note: Depending on your button, the animation should either run infinitely or just once. 217 | 218 | ## Dark Mode 219 | 220 | sButtons is compatible with dark mode. It either works by adding dark-mode class to buttons, or by adding data-theme="dark" to a container element. 221 | 222 | ## Using dark-mode Class 223 | 224 | ```html 225 | 226 | ``` 227 | 228 | ## Using data-theme attribute 229 | 230 | By adding `data-theme="dark"` to a parent element like the body or a div element, the button will automatically be in dark mode. 231 | 232 | ```html 233 |
234 | 235 |
236 | ``` 237 | 238 | Note: `data-theme="dark"` attribute does not give dark mode styling to the container element, you have to do that yourself. It only toggles sButtons to be in dark mode. 239 | 240 | # Contribution 241 | 242 | Please see the [contributing guidelines](./CONTRIBUTING.md) for details. 243 | 244 | You can also join or start [discussions](https://github.com/sButtons/sbuttons/discussions) with the community members if you have any ideas or questions! 245 | 246 | ### Button ideas 247 | 248 | If you would like to suggest a new button idea, please create a [new discussion](https://github.com/sButtons/sbuttons/discussions/new) with the category "idea". 249 | 250 | ### Projects Using sButtons 251 | 252 | If your project uses sButtons, please submit it [here](https://github.com/sButtons/sbuttons/issues/1255) to be added to the list of the websites using it! 253 | 254 | # Contributors 255 | 256 | Check out our awesome contributors [here](./CONTRIBUTORS.md)! 257 | 258 | 261 | 262 | # LICENSE 263 | 264 | [MIT](./LICENSE) 265 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | All versions are supported for security updates. 6 | 7 | ## Reporting a Vulnerability 8 | 9 | Please create an issue when you find any security vulnerability. 10 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [1021/231038.681:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [1022/165236.117:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | [0128/144617.514:ERROR:crash_report_database_win.cc(455)] unexpected header 4 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/" 4 | status = 200 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sbuttons", 3 | "version": "1.9.6", 4 | "description": "Simple and creative buttons", 5 | "main": "dist/sbuttons.min.css", 6 | "author": "Shahed Nasser", 7 | "license": "MIT", 8 | "homepage": "https://sbuttons.netlify.app/", 9 | "keywords": [ 10 | "less", 11 | "buttons", 12 | "css" 13 | ], 14 | "files": [ 15 | "src/", 16 | "dist/" 17 | ], 18 | "scripts": { 19 | "start": "npm run watch:less", 20 | "build": "npm run compile && npm run clean-css && npm run copy-website", 21 | "compile": "lessc src/sbuttons.less dist/sbuttons.css && npm run prettier", 22 | "prettier": "prettier --write \"src/**/*.less\" \"dist/sbuttons.css\" ", 23 | "watch:less": "onchange -v src/**/*.less -- npm run compile", 24 | "clean-css": "cleancss -o dist/sbuttons.min.css dist/sbuttons.css", 25 | "copy-website": "copyfiles -u 1 dist/sbuttons.min.css website/src" 26 | }, 27 | "devDependencies": { 28 | "axios": ">=0.21.1", 29 | "clean-css-cli": "^4.3.0", 30 | "concurrently": "^5.3.0", 31 | "copyfiles": "^2.4.1", 32 | "less": "^3.13.1", 33 | "less-watch-compiler": "^1.15.1", 34 | "lessc": "^1.0.2", 35 | "minimist": "^1.2.3", 36 | "node-less": "^1.0.0", 37 | "object-path": ">=0.11.5", 38 | "onchange": "^7.1.0", 39 | "prettier": "^2.3.0" 40 | }, 41 | "bugs": { 42 | "url": "https://github.com/sButtons/sbuttons/issues", 43 | "email": "shahednasser@gmail.com" 44 | }, 45 | "repository": { 46 | "type": "git", 47 | "url": "https://github.com/sButtons/sbuttons" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/_variables.less: -------------------------------------------------------------------------------- 1 | @cola: #2b1800; 2 | @blue: #50bfe6; 3 | @darkBlue: #1fa5d6; 4 | @pink: #d53caf; 5 | @darkPink: #c10c94; 6 | @blueComplementary: #ff8301; 7 | @darkerBlue: #3193b5; 8 | @lighterBlue: #19c3ff; 9 | @red: #ed0a3f; 10 | @darkRed: #cf0837; 11 | @green: #3aa655; 12 | @darkGreen: #328f4a; 13 | @yellow: #fbe870; 14 | @darkYellow: #f7da22; 15 | @orange: #ff8833; 16 | @darkOrange: #f06400; 17 | @purple: #652dc1; 18 | @darkPurple: #4c2291; 19 | @darkText: #333; 20 | @lightText: #fff; 21 | @buttonPadding: 10px; 22 | @lightGray: #ccc; 23 | @black: #000; 24 | @blackShadow: #7d7d7d; 25 | @lightBlack: #262626; 26 | @white: #fff; 27 | @darkWhite: #ebebeb; 28 | @whiteBorder: #e9e9e9; 29 | @whiteBorderText: #e9e9e9; 30 | 31 | /* BEGIN VARIABLES IN styles/_neon.less */ 32 | @neonGreen: #39ff14; 33 | @neonBlue: #1fffec; 34 | @neonOrange: #ff9b18; 35 | @neonPink: #ff2aca; 36 | @neonRed: #ff013c; 37 | @neonYellow: #ffe53d; 38 | @neonPurple: #8d47ff; 39 | @neonBlack: #414141; 40 | @neonWhite: #e2e2e2; 41 | /* END VARIABLES IN styles/_neon.less */ 42 | 43 | /* BEGIN VARIABLES IN styles/_glow.less */ 44 | @glowGreen: #39ff14; 45 | @glowBlue: #1fffec; 46 | @glowOrange: #ff9b18; 47 | @glowPink: #ff2aca; 48 | @glowRed: #ff013c; 49 | @glowYellow: #ffe53d; 50 | @glowPurple: #8d47ff; 51 | @glowBlack: #414141; 52 | @glowWhite: #e2e2e2; 53 | /* END VARIABLES IN styles/_glow.less */ 54 | 55 | /* BEGIN VARIABLES IN _basic.less */ 56 | @buttonFontSize: 1.5rem; 57 | /* END VARIABLES IN _basic.less */ 58 | 59 | /* BEGIN VARIABLES IN styles/_key.less */ 60 | @keyHoverPink: rgb(179, 74, 152); 61 | @keyHoverBlue: rgb(48, 161, 202); 62 | @keyHoverGreen: #258d3f; 63 | @keyHoverPurple: #521ca8; 64 | @keyHoverBlack: #474545; 65 | @keyHoverYellow: #f0d14a; 66 | @keyHoverOrange: #e7792a; 67 | @keyHoverRed: #bd1139; 68 | @keyHoverWhite: #e4e0e0; 69 | @keyBoxPink: rgb(124, 31, 101); 70 | @keyBoxBlue: #387d96; 71 | @keyBoxGreen: #1d5c2d; 72 | @keyBoxPurple: #341368; 73 | @keyBoxBlack: #2c2828; 74 | @keyBoxYellow: #dbb81d; 75 | @keyBoxOrange: #a75215; 76 | @keyBoxRed: #80122b; 77 | @keyBoxWhite: #bdb6b6; 78 | @diffblack: #686363; 79 | @diffwhite: #fdf4f4; 80 | 81 | /* END VARIABLES IN styles/_key.less */ 82 | 83 | /* BEGIN VARIABLES IN styles/_stack.less */ 84 | @stackHeight: 50px; 85 | @stackWidth: @stackHeight; 86 | @stackRotate: -30deg; 87 | @stackSkew: 25deg; 88 | @stackBgColor: red; 89 | /* END VARIABLES IN styles/_stack.less */ 90 | 91 | /* BEGIN VARIABLES IN special/_code-btn.less */ 92 | @codeButtonBackground: #000; 93 | @codeButtonColor: #1fff00; 94 | /* END VARIABLES IN special/_code-btn.less */ 95 | 96 | /* BEGIN VARIABLES IN special/_handwritten-btn.less */ 97 | @handwrittenPencilColor: #111111; 98 | @handwrittenPaperColor: #fafafa; 99 | /* END VARIABLES IN special/_handwritten-btn.less */ 100 | 101 | /* BEGIN VARIABLES IN special/_retro.less */ 102 | @retroOutlineWidth: 6px; 103 | @retroShadowWidth: 4px; 104 | 105 | @retroButtonBackground: #92cd41; 106 | @retroSecButtonBackground: #76c442; 107 | @retroShadowColor: #4aa52e; 108 | 109 | @retroAltButtonBackground: #f7d51d; 110 | @retroSecAltButtonBackground: #f2c409; 111 | @retroAltShadowColor: #e59400; 112 | 113 | @retroResetButtonBackground: #e76e55; 114 | @retroResetSecButtonBackground: #ce372b; 115 | @retroResetShadowColor: #8c2022; 116 | /* END VARIABLES IN special/_retro.less */ 117 | 118 | /* BEGIN VARIABLES IN special/_toggle.less */ 119 | @toggleWidth: 90px; 120 | @toggleHeight: 50px; 121 | @toggleBorderRadius: 50px; 122 | @toggleOffBgColor: #e5e5ea; 123 | @toggleOnBgColor: #30d158; 124 | @toggleSwitchColor: #fff; 125 | @toggleSwitchOffPosition: translateX(calc(@toggleWidth * -0.07)); 126 | @toggleSwitchOnPosition: translateX(calc(@toggleWidth * 0.4)); 127 | 128 | @toggleSwitchOffPositionSmall: translateX(calc(@toggleWidthSmall * -0.05)); 129 | @toggleSwitchOnPositionSmall: translateX(calc(@toggleWidthSmall * 0.39)); 130 | @toggleWidthSmall: 45px; 131 | @toggleHeightSmall: 25px; 132 | @toggleBorderRadiusSmall: 25px; 133 | /* END VARIABLES IN special/_toggle.less */ 134 | 135 | /* BEGIN VARIABLES IN special/_gradient.less */ 136 | @gradientPink: #e60550; 137 | @gradientBlue: #085c7a; 138 | @gradientRed: #810824; 139 | @gradientGreen: #165f29; 140 | @gradientOrange: #a74601; 141 | @gradientYellow: #eece00; 142 | @gradientPurple: #28075e; 143 | @gradientwhite: #a19e9e; 144 | @boxShadowWhite: #aca6a6; 145 | @boxShadowYellow: #e2e22e; 146 | /* END VARIABLES IN special/_gradient.less */ 147 | 148 | /* BEGIN VARIABLES IN special/_arrow.less */ 149 | @arrowExpansion: 1.5em; 150 | @arrowPadding: 0.5em; 151 | /* END VARIABLES IN special/_arrow.less */ 152 | 153 | /* BEGIN VARIABLES IN special/_disco.less */ 154 | @discosecondary: #192824; 155 | @discobackground: black; 156 | @discoyellow: #f3ca8c; 157 | @discodark-peach: #ff9f68; 158 | @discored: #f85959; 159 | @discolight-text: #fffafa; 160 | /* END VARIABLES IN special/_disco.less */ 161 | -------------------------------------------------------------------------------- /src/components/_animated.less: -------------------------------------------------------------------------------- 1 | @import "animated/_arrow.less"; 2 | @import "animated/_aurapulse.less"; 3 | @import "animated/_bounce.less"; 4 | @import "animated/_diagonal.less"; 5 | @import "animated/_fill.less"; 6 | @import "animated/_hinge.less"; 7 | @import "animated/_invert.less"; 8 | @import "animated/_layered.less"; 9 | @import "animated/_liquid.less"; 10 | @import "animated/_neon.less"; 11 | @import "animated/_nudge.less"; 12 | @import "animated/_pudding.less"; 13 | @import "animated/_pulse.less"; 14 | @import "animated/_ripple.less"; 15 | @import "animated/_scale.less"; 16 | @import "animated/_shake.less"; 17 | @import "animated/_shine.less"; 18 | @import "animated/_skew.less"; 19 | @import "animated/_snake.less"; 20 | @import "animated/_splash.less"; 21 | @import "animated/_transparent.less"; 22 | @import "animated/_pudding.less"; 23 | @import "animated/_expanding.less"; 24 | @import "animated/_flash.less"; 25 | @import "animated/_loading-btn"; 26 | @import "animated/_spring.less"; 27 | @import "animated/_papercurl.less"; 28 | @import "animated/_colored-on-hover.less"; 29 | @import "animated/_atom.less"; 30 | @import "animated/_rainbow.less"; 31 | @import "animated/_vibrate.less"; 32 | @import "animated/_gradient-border.less"; 33 | @import "animated/_spotlight.less"; 34 | @import "animated/_striped-animated.less"; 35 | -------------------------------------------------------------------------------- /src/components/_basic.less: -------------------------------------------------------------------------------- 1 | .bc(@color) { 2 | background-color: @color; 3 | } 4 | 5 | .colorRule(@color) { 6 | .bc(@color); 7 | 8 | &:focus, 9 | &:active { 10 | box-shadow: 0px 0px 0 0.2rem fade(@color, 30%); 11 | outline: 0; 12 | } 13 | } 14 | 15 | .rounded(@amount) { 16 | border-radius: @amount; 17 | } 18 | 19 | .whiteBtnDarkMode() { 20 | &.white-btn { 21 | [data-theme="dark"] &, 22 | &.dark-mode { 23 | color: white !important; 24 | } 25 | 26 | &:hover { 27 | color: @darkText !important; 28 | } 29 | } 30 | } 31 | 32 | .blackBtnDarkMode() { 33 | &.black-btn { 34 | [data-theme="dark"] &, 35 | &.dark-mode { 36 | color: white !important; 37 | } 38 | } 39 | } 40 | 41 | .sbtn { 42 | padding: @buttonPadding; 43 | text-align: center; 44 | -webkit-appearance: none; 45 | .bc(transparent); 46 | border: 1px solid; 47 | cursor: pointer; 48 | border-color: transparent; 49 | color: @lightText; 50 | font-family: inherit; 51 | overflow: hidden; 52 | font-size: @buttonFontSize; 53 | 54 | &:hover, 55 | &:active, 56 | &:focus { 57 | outline: none; 58 | } 59 | } 60 | 61 | a.sbtn { 62 | &, 63 | &:hover, 64 | &:active { 65 | text-decoration: none; 66 | display: inline-block; 67 | } 68 | } 69 | 70 | .rounded-btn { 71 | .rounded(25px); 72 | } 73 | 74 | .rounded-5-btn { 75 | .rounded(5px); 76 | } 77 | 78 | .rounded-10-btn { 79 | .rounded(10px); 80 | } 81 | 82 | .rounded-15-btn { 83 | .rounded(15px); 84 | } 85 | 86 | .rounded-20-btn { 87 | .rounded(20px); 88 | } 89 | 90 | .rounded-25-btn { 91 | .rounded(25px); 92 | } 93 | 94 | .rounded-30-btn { 95 | .rounded(30px); 96 | } 97 | 98 | .rounded-full-btn { 99 | .rounded(50%); 100 | } 101 | 102 | .block-btn { 103 | display: block; 104 | width: 100%; 105 | } 106 | 107 | .blue-btn { 108 | .colorRule(@blue); 109 | } 110 | 111 | .pink-btn { 112 | .colorRule(@pink); 113 | } 114 | 115 | .red-btn { 116 | .colorRule(@red); 117 | } 118 | 119 | .green-btn { 120 | .colorRule(@green); 121 | } 122 | 123 | .yellow-btn { 124 | .colorRule(@yellow); 125 | color: @darkText; 126 | } 127 | 128 | .orange-btn { 129 | .colorRule(@orange); 130 | } 131 | 132 | .purple-btn { 133 | .colorRule(@purple); 134 | } 135 | 136 | .black-btn { 137 | .colorRule(@black); 138 | } 139 | 140 | .white-btn { 141 | .colorRule(@white); 142 | border-color: @whiteBorder; 143 | &:focus, 144 | &:active { 145 | box-shadow: 0px 0px 0 0.2rem fade(@whiteBorder, 67%); 146 | } 147 | 148 | &:not(.fill-color-btn):not(.neon-border-btn) { 149 | color: @darkText !important; 150 | } 151 | } 152 | 153 | a.purple-btn, 154 | a.orange-btn, 155 | a.green-btn, 156 | a.red-btn, 157 | a.pink-btn, 158 | a.blue-btn { 159 | &:hover, 160 | &:active { 161 | color: @lightText; 162 | } 163 | } 164 | 165 | a.yellow-btn { 166 | &:hover, 167 | &:active { 168 | &:not(.fill-color-btn) { 169 | color: @darkText !important; 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/components/_home.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/src/components/_home.less -------------------------------------------------------------------------------- /src/components/_hover.less: -------------------------------------------------------------------------------- 1 | .hover-btn { 2 | transition: all 0.2s; 3 | 4 | &.blue-btn:hover, 5 | &.blue-btn:active, 6 | &.blue-btn:focus { 7 | .bc(@darkBlue); 8 | } 9 | 10 | &.pink-btn:hover, 11 | &.pink-btn:active, 12 | &.pink-btn:focus { 13 | .bc(@darkPink); 14 | } 15 | 16 | &.green-btn:hover, 17 | &.green-btn:active, 18 | &.green-btn:focus { 19 | .bc(@darkGreen); 20 | } 21 | 22 | &.yellow-btn:hover, 23 | &.yellow-btn:active, 24 | &.yellow-btn:focus { 25 | .bc(@darkYellow); 26 | } 27 | 28 | &.red-btn:hover, 29 | &.red-btn:active, 30 | &.red-btn:focus { 31 | .bc(@darkRed); 32 | } 33 | 34 | &.purple-btn:hover, 35 | &.purple-btn:active, 36 | &.purple-btn:focus { 37 | .bc(@darkPurple); 38 | } 39 | 40 | &.orange-btn:hover, 41 | &.orange-btn:active, 42 | &.orange-btn:focus { 43 | .bc(@darkOrange); 44 | } 45 | 46 | &.black-btn:hover, 47 | &.black-btn:active, 48 | &.black-btn:focus { 49 | .bc(@lightBlack); 50 | } 51 | 52 | &.white-btn:hover, 53 | &.white-btn:active, 54 | &.white-btn:focus { 55 | .bc(@darkWhite); 56 | } 57 | } 58 | @import "hover/_shadow-on-hover.less"; 59 | -------------------------------------------------------------------------------- /src/components/_icon.less: -------------------------------------------------------------------------------- 1 | @import "icon/_star.less"; 2 | @import "icon/_icon-btn.less"; 3 | @import "icon/_grow.less"; 4 | @import "icon/_hatch.less"; 5 | @import "icon/_like.less"; 6 | @import "icon/_slide.less"; 7 | -------------------------------------------------------------------------------- /src/components/_payment.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | box-shadow: 0px 1px 4px #4d4d4d; 3 | transition: all 0.2s; 4 | position: relative; 5 | padding-right: 55px; 6 | font-size: 1.2rem !important; 7 | 8 | &:after { 9 | font-family: "Font Awesome 5 Brands"; 10 | font-size: 35px; 11 | position: absolute; 12 | padding: 0px 5px; 13 | top: 0%; 14 | } 15 | 16 | &:hover { 17 | box-shadow: 0px 1px 7px #4d4d4d; 18 | transform: translateY(-3px); 19 | } 20 | } 21 | .payment-btn.block-btn { 22 | &:after { 23 | margin-right: 1rem; 24 | } 25 | } 26 | 27 | @import "payment/_apple-pay.less"; 28 | @import "payment/_amazon-pay.less"; 29 | @import "payment/_bitcoin.less"; 30 | @import "payment/_ethereum-pay.less"; 31 | @import "payment/_gpay.less"; 32 | @import "payment/_paypal.less"; 33 | @import "payment/_paytm.less"; 34 | @import "payment/_phonepe.less"; 35 | @import "payment/_visa.less"; 36 | @import "payment/_mastercard.less"; 37 | @import "payment/_stripe.less"; 38 | @import "payment/_alipay.less"; 39 | @import "payment/_wechat-pay.less"; 40 | -------------------------------------------------------------------------------- /src/components/_social.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | box-shadow: 0px 1px 4px #4d4d4d; 3 | transition: all 0.2s; 4 | position: relative; 5 | padding-right: 35px; 6 | font-size: 1.2rem !important; 7 | 8 | &:after { 9 | font-family: "Font Awesome 5 Brands"; 10 | position: absolute; 11 | right: 10px; 12 | top: 20%; 13 | } 14 | 15 | &:hover { 16 | box-shadow: 0px 1px 7px #4d4d4d; 17 | transform: translateY(-3px); 18 | } 19 | } 20 | .social-btn.block-btn { 21 | &:after { 22 | margin-right: 1rem; 23 | } 24 | } 25 | @import "social/_google.less"; 26 | @import "social/_apple.less"; 27 | @import "social/_facebook.less"; 28 | @import "social/_instagram.less"; 29 | @import "social/_twitter.less"; 30 | @import "social/_linkedin.less"; 31 | @import "social/_weibo.less"; 32 | @import "social/_github.less"; 33 | @import "social/_tumblr.less"; 34 | @import "social/_flickr.less"; 35 | @import "social/_snapchat.less"; 36 | @import "social/_microsoft.less"; 37 | @import "social/_reddit.less"; 38 | @import "social/_discord.less"; 39 | @import "social/_whatsapp.less"; 40 | @import "social/_gitlab.less"; 41 | @import "social/_bitbucket.less"; 42 | @import "social/_steam.less"; 43 | @import "social/_slack.less"; 44 | @import "social/_telegram.less"; 45 | @import "social/_pinterest.less"; 46 | @import "social/_dropbox.less"; 47 | @import "social/_amazon.less"; 48 | @import "social/_spotify.less"; 49 | @import "social/_vk.less"; 50 | @import "social/_wechat.less"; 51 | @import "social/_qq.less"; 52 | -------------------------------------------------------------------------------- /src/components/_special.less: -------------------------------------------------------------------------------- 1 | @import "special/_retro.less"; 2 | @import "special/_play-game.less"; 3 | @import "special/_win95.less"; 4 | @import "special/_toggle.less"; 5 | @import "special/_handwritten-btn.less"; 6 | @import "special/_neumorphic.less"; 7 | @import "special/_code-btn.less"; 8 | @import "special/_rainbow-border.less"; 9 | @import "special/_disco.less"; 10 | -------------------------------------------------------------------------------- /src/components/_styles.less: -------------------------------------------------------------------------------- 1 | @import "styles/_click.less"; 2 | @import "styles/_dashed.less"; 3 | @import "styles/_disabled.less"; 4 | @import "styles/_glossy-btn.less"; 5 | @import "styles/_glow.less"; 6 | @import "styles/_key.less"; 7 | @import "styles/_outline.less"; 8 | @import "styles/_rounded-bottom.less"; 9 | @import "styles/_rounded-top.less"; 10 | @import "styles/_rounded-diagonal-tl.less"; 11 | @import "styles/_rounded-diagonal-tr.less"; 12 | @import "styles/_xlarge.less"; 13 | @import "styles/_xsmall.less"; 14 | @import "styles/_stack.less"; 15 | @import "styles/_gradient.less"; 16 | @import "styles/_neon-border.less"; 17 | @import "styles/_striped.less"; 18 | @import "styles/_shadow.less"; 19 | @import "styles/_smooth-shadow.less"; 20 | @import "styles/_shadow-3d.less"; 21 | -------------------------------------------------------------------------------- /src/components/animated/_arrow.less: -------------------------------------------------------------------------------- 1 | .arrowRules() { 2 | align-items: center; 3 | color: inherit; 4 | display: flex; 5 | font-size: 1.5rem; 6 | height: 100%; 7 | position: absolute; 8 | top: -1px; 9 | transition: inherit; 10 | } 11 | 12 | .next-arrow-btn { 13 | position: relative; 14 | transition: all 0.1s; 15 | 16 | &:after { 17 | content: "\203A"; 18 | padding-right: @arrowPadding; 19 | right: -@arrowExpansion; 20 | .arrowRules(); 21 | } 22 | 23 | &:hover, 24 | &.animated { 25 | padding-right: @arrowExpansion; 26 | &:after { 27 | opacity: 1; 28 | right: 0; 29 | } 30 | } 31 | } 32 | 33 | .previous-arrow-btn { 34 | position: relative; 35 | transition: all 0.1s; 36 | 37 | &:before { 38 | content: "\2039"; 39 | left: -@arrowExpansion; 40 | padding-left: @arrowPadding; 41 | .arrowRules(); 42 | } 43 | 44 | &:hover, 45 | &.animated { 46 | padding-left: @arrowExpansion; 47 | &:before { 48 | left: 0; 49 | opacity: 1; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/animated/_atom.less: -------------------------------------------------------------------------------- 1 | .outlineRule(@color) { 2 | border-color: @color; 3 | color: @color !important; 4 | &::after { 5 | border-color: @color; 6 | } 7 | } 8 | 9 | .animationObjectRule() { 10 | background: white; 11 | content: ""; 12 | position: absolute; 13 | height: 14px; 14 | width: 14px; 15 | border-radius: 50%; 16 | transform: translate(-50%, -50%); 17 | border-width: 4px; 18 | border-style: solid; 19 | display: none; 20 | } 21 | 22 | .animationRule() { 23 | display: inline-block; 24 | animation: atom 2s infinite linear; 25 | } 26 | 27 | .atomDarkMode() { 28 | color: @white !important; 29 | } 30 | 31 | .atom-btn { 32 | border: 4px solid; 33 | background-color: transparent; 34 | overflow: initial; 35 | position: relative; 36 | text-align: center; 37 | 38 | &.blue-btn { 39 | .outlineRule(@blue); 40 | } 41 | 42 | &.pink-btn { 43 | .outlineRule(@pink); 44 | } 45 | 46 | &.red-btn { 47 | .outlineRule(@red); 48 | } 49 | 50 | &.green-btn { 51 | .outlineRule(@green); 52 | } 53 | 54 | &.yellow-btn { 55 | .outlineRule(@yellow); 56 | } 57 | 58 | &.orange-btn { 59 | .outlineRule(@orange); 60 | } 61 | 62 | &.purple-btn { 63 | .outlineRule(@purple); 64 | } 65 | 66 | &.black-btn { 67 | .outlineRule(@black); 68 | } 69 | 70 | &.white-btn { 71 | .outlineRule(@whiteBorder); 72 | color: @darkText !important; 73 | } 74 | 75 | &.animated { 76 | &::after { 77 | .animationObjectRule(); 78 | .animationRule(); 79 | } 80 | } 81 | 82 | &::after { 83 | .animationObjectRule(); 84 | } 85 | 86 | &:hover::after { 87 | .animationRule(); 88 | } 89 | 90 | @keyframes atom { 91 | 0% { 92 | left: -2px; 93 | top: -2px; 94 | } 95 | 30% { 96 | left: calc(100% + 2px); 97 | top: -2px; 98 | } 99 | 50% { 100 | left: calc(100% + 2px); 101 | top: 100%; 102 | } 103 | 80% { 104 | left: -2px; 105 | top: calc(100% + 2px); 106 | } 107 | 100% { 108 | left: -2px; 109 | top: -2px; 110 | } 111 | } 112 | 113 | //dark mode support 114 | &.white-btn, 115 | &.black-btn { 116 | [data-theme="dark"] &, 117 | &.dark-mode { 118 | .atomDarkMode(); 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/components/animated/_aurapulse.less: -------------------------------------------------------------------------------- 1 | .auraAnimation() { 2 | animation: aurapulse 0.5s infinite; 3 | } 4 | 5 | .auraRule() { 6 | content: " "; 7 | position: absolute; 8 | transition: all 0.2s cubic-bezier(0.39, 0.58, 0.57, 1); 9 | z-index: -1; 10 | width: 100%; 11 | height: 100%; 12 | top: 0; 13 | left: 0; 14 | } 15 | 16 | .aurapulse-btn { 17 | position: relative; 18 | 19 | z-index: auto; 20 | overflow: inherit; 21 | 22 | &:before { 23 | .auraRule(); 24 | } 25 | 26 | .colorBefore(@color) { 27 | &:before { 28 | .bc(@color); 29 | } 30 | } 31 | 32 | &.blue-btn { 33 | .colorBefore(@blue); 34 | } 35 | &.pink-btn { 36 | .colorBefore(@pink); 37 | } 38 | 39 | &.green-btn { 40 | .colorBefore(@green); 41 | } 42 | 43 | &.yellow-btn { 44 | .colorBefore(@yellow); 45 | } 46 | 47 | &.orange-btn { 48 | .colorBefore(@orange); 49 | } 50 | 51 | &.red-btn { 52 | .colorBefore(@red); 53 | } 54 | 55 | &.purple-btn { 56 | .colorBefore(@purple); 57 | } 58 | 59 | &.black-btn { 60 | .colorBefore(@black); 61 | } 62 | 63 | &.white-btn { 64 | //needs to be darkWhite 65 | .colorBefore(@darkWhite); 66 | } 67 | 68 | &.rounded-btn { 69 | &:before { 70 | border-radius: 25px; 71 | } 72 | } 73 | 74 | &.animated { 75 | &:before { 76 | .auraRule(); 77 | .auraAnimation(); 78 | } 79 | } 80 | 81 | &:hover { 82 | &:before { 83 | .auraAnimation(); 84 | } 85 | } 86 | 87 | @keyframes aurapulse { 88 | 0% { 89 | transform: scale(1); 90 | opacity: 1; 91 | } 92 | 100% { 93 | transform: scale(1.2); 94 | opacity: 0.2; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/components/animated/_bounce.less: -------------------------------------------------------------------------------- 1 | .bounceAnimation() { 2 | animation-name: bouncy; 3 | animation-duration: 2s; 4 | animation-iteration-count: infinite; 5 | } 6 | 7 | .bouncy-btn { 8 | position: relative; 9 | 10 | &:hover { 11 | .bounceAnimation(); 12 | } 13 | 14 | &.animated { 15 | .bounceAnimation(); 16 | } 17 | 18 | @keyframes bouncy { 19 | 10%, 20 | 70%, 21 | 40%, 22 | 0%, 23 | 100% { 24 | // -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 25 | // -webkit-transform: translate3d(0, 0, 0); 26 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 27 | transform: translate3d(0, 0, 0); 28 | } 29 | 30% { 30 | // -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 31 | // -webkit-transform: translate3d(0, -60px, 0); 32 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 33 | transform: translate3d(0, -60px, 0); 34 | } 35 | 60% { 36 | // -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 37 | // -webkit-transform: translate3d(0, -30px, 0); 38 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 39 | transform: translate3d(0, -30px, 0); 40 | } 41 | 90% { 42 | // -webkit-transform: translate3d(0, -15px, 0); 43 | transform: translate3d(0, -15px, 0); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/animated/_colored-on-hover.less: -------------------------------------------------------------------------------- 1 | @colors: @blue, @pink, @red, @green, @yellow, @orange, @purple, @black, @white; 2 | @colorbtns: blue-btn, pink-btn, red-btn, green-btn, yellow-btn, orange-btn, 3 | purple-btn; 4 | 5 | .colored-on-hover-colorspecific-mixin(@param) when (@param ="hover") { 6 | each(@colorbtns, { 7 | &.@{value} { 8 | @colortoget : extract(@colors, @key); 9 | background-color: @colortoget; 10 | color: if(@colortoget = @yellow or @colortoget = @white, @darkText, #fff); 11 | 12 | } 13 | } 14 | 15 | ); 16 | 17 | /* set black-btn and white-btn apart to add dark mode */ 18 | &.black-btn { 19 | [data-theme="dark"] &, 20 | &.dark-mode { 21 | color: @white !important; 22 | } 23 | background-color: @black; 24 | color: @white; 25 | } 26 | 27 | &.white-btn { 28 | [data-theme="dark"] &, 29 | &.dark-mode { 30 | color: @black !important; 31 | } 32 | background-color: @white; 33 | color: @black; 34 | } 35 | } 36 | 37 | .colored-on-hover-colorspecific-mixin(@param) when (@param ="hoverless") { 38 | each(@colorbtns, { 39 | &.@{value} { 40 | @colortoget : extract(@colors, @key); 41 | border-color: @colortoget; 42 | color: @colortoget; 43 | } 44 | } 45 | 46 | ); 47 | 48 | /* set black-btn and white-btn apart to add dark mode */ 49 | &.black-btn { 50 | border-color: @black; 51 | color: @black; 52 | 53 | [data-theme="dark"] &, 54 | &.dark-mode { 55 | color: @white !important; 56 | } 57 | } 58 | 59 | &.white-btn { 60 | border-color: @white; 61 | color: @black; 62 | 63 | [data-theme="dark"] &, 64 | &.dark-mode { 65 | color: @white !important; 66 | } 67 | } 68 | } 69 | 70 | .sbtn.colored-on-hover-btn { 71 | background-color: transparent; 72 | transition: all 0.25s; 73 | 74 | .colored-on-hover-colorspecific-mixin("hoverless"); 75 | 76 | &:hover { 77 | .colored-on-hover-colorspecific-mixin("hover"); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/animated/_diagonal.less: -------------------------------------------------------------------------------- 1 | .diagonalAnimation() { 2 | background-position: 100%; 3 | color: @white !important; 4 | transform: translateX(16px); 5 | } 6 | 7 | .diagonalYellowAnimation() { 8 | background-position: 100%; 9 | transform: translateX(16px); 10 | color: @darkText !important; 11 | } 12 | 13 | .diagonalWhiteAnimation() { 14 | background-position: 100%; 15 | transform: translateX(16px); 16 | } 17 | 18 | .diag-btn { 19 | text-decoration: none; 20 | display: inline-block; 21 | padding: 16px 32px; 22 | background-size: 250%; 23 | transition: all 0.4s; 24 | background-color: transparent; 25 | outline: none; 26 | border: none; 27 | 28 | &.purple-btn { 29 | .diagonalBackground(@purple, @purple); 30 | } 31 | 32 | &.blue-btn { 33 | .diagonalBackground(@blue, @blue); 34 | } 35 | 36 | &.pink-btn { 37 | .diagonalBackground(@pink, @pink); 38 | } 39 | 40 | &.red-btn { 41 | .diagonalBackground(@red, @red); 42 | } 43 | 44 | &.green-btn { 45 | .diagonalBackground(@green, @green); 46 | } 47 | 48 | &.yellow-btn { 49 | .diagonalBackground(@yellow, @yellow); 50 | 51 | &:hover { 52 | .diagonalYellowAnimation(); 53 | } 54 | } 55 | 56 | &.orange-btn { 57 | .diagonalBackground(@orange, @orange); 58 | } 59 | 60 | &.black-btn { 61 | .blackBtnDarkMode(); 62 | .diagonalBackground(@darkText, @black); 63 | } 64 | 65 | &.white-btn { 66 | .whiteBtnDarkMode(); 67 | .diagonalBackground(@darkText, @white); 68 | 69 | &:hover { 70 | .diagonalWhiteAnimation(); 71 | } 72 | } 73 | 74 | &:hover:not(.white-btn):not(.yellow-btn) { 75 | .diagonalAnimation(); 76 | } 77 | 78 | &.animated:not(.white-btn):not(.yellow-btn) { 79 | .diagonalAnimation(); 80 | } 81 | 82 | &.animated.white-btn { 83 | .diagonalWhiteAnimation(); 84 | } 85 | 86 | &.animated.yellow-btn { 87 | .diagonalYellowAnimation(); 88 | } 89 | 90 | .diagonalBackground(@color, @bgColor) { 91 | background-image: linear-gradient( 92 | 120deg, 93 | transparent 50%, 94 | @bgColor 50% 95 | ) !important; 96 | color: @color !important; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/components/animated/_expanding.less: -------------------------------------------------------------------------------- 1 | .expandingAnimation() { 2 | &:before { 3 | width: 150%; 4 | height: 150%; 5 | opacity: 1; 6 | border: 0.2rem solid #333; 7 | transition: width 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3), 8 | height 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3), 9 | opacity 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3); 10 | } 11 | 12 | opacity: 1; 13 | border: 0.2rem solid #333; 14 | 15 | [data-theme="dark"] &, 16 | &.dark-mode { 17 | &, 18 | &:before { 19 | border: 0.2rem solid #fff; 20 | } 21 | } 22 | } 23 | 24 | .expanding-btn { 25 | position: relative; 26 | border: 0.2rem solid transparent; 27 | transition: border 300ms 300ms cubic-bezier(0.07, 0.62, 0.61, 0.3); 28 | 29 | &:before { 30 | display: block; 31 | content: " "; 32 | border: none; 33 | position: absolute; 34 | width: 0; 35 | height: 0; 36 | opacity: 0; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | } 41 | 42 | &:hover, 43 | &.animated { 44 | .expandingAnimation(); 45 | } 46 | 47 | &:focus { 48 | box-shadow: none; 49 | } 50 | } 51 | 52 | .expanding-btn.rounded-btn { 53 | &:hover { 54 | &:before { 55 | border-radius: 25px; 56 | } 57 | &:after { 58 | border-radius: 25px; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/animated/_fill.less: -------------------------------------------------------------------------------- 1 | @keyframes upDownFill { 2 | from { 3 | height: 0%; 4 | } 5 | 6 | to { 7 | height: 100%; 8 | } 9 | } 10 | 11 | @keyframes leftRightFill { 12 | from { 13 | width: 0%; 14 | } 15 | 16 | to { 17 | width: 100%; 18 | } 19 | } 20 | 21 | @keyframes sidewayFill { 22 | from { 23 | left: 50%; 24 | } 25 | 26 | to { 27 | left: 0; 28 | } 29 | } 30 | 31 | .fill-color-btn { 32 | .bc(transparent); 33 | position: relative; 34 | 35 | &:before { 36 | content: " "; 37 | position: absolute; 38 | transition: all 0.2s cubic-bezier(0.39, 0.58, 0.57, 1); 39 | z-index: -1; 40 | } 41 | 42 | &:not(.right-fill):before { 43 | left: 0; 44 | } 45 | 46 | &.right-fill:before { 47 | right: 0; 48 | } 49 | 50 | &.up-fill, 51 | &.down-fill { 52 | &:before { 53 | width: 100%; 54 | left: 0; 55 | } 56 | 57 | &.up-fill:before { 58 | top: 0; 59 | } 60 | 61 | &.down-fill:before { 62 | bottom: 0; 63 | } 64 | 65 | &:not(:hover):not(.animated):before { 66 | height: 0%; 67 | } 68 | 69 | &:hover:not(.animated):before { 70 | height: 100%; 71 | } 72 | 73 | &.animated:before { 74 | animation-name: upDownFill; 75 | animation-duration: 0.3s; 76 | animation-fill-mode: forwards; 77 | } 78 | } 79 | 80 | &:not(.up-fill):not(.down-fill) { 81 | &:before { 82 | height: 100%; 83 | top: 0; 84 | } 85 | 86 | &:not(:hover):not(.animated):before { 87 | width: 0%; 88 | } 89 | 90 | &:hover:not(.animated):before { 91 | width: 100%; 92 | } 93 | 94 | &.animated:before { 95 | animation-name: leftRightFill; 96 | animation-duration: 0.3s; 97 | animation-fill-mode: forwards; 98 | } 99 | } 100 | 101 | &:hover, 102 | &.animated { 103 | color: #fff !important; 104 | } 105 | 106 | &.sideways-fill { 107 | &:before { 108 | width: 100%; 109 | left: 0; 110 | } 111 | &:not(:hover):not(.animated):before { 112 | left: 50%; 113 | } 114 | &:hover:not(.animated):before { 115 | left: 0; 116 | } 117 | 118 | &.animated:before { 119 | animation-name: sidewayFill; 120 | animation-duration: 0.3s; 121 | animation-fill-mode: forwards; 122 | } 123 | } 124 | 125 | .colorBtn(@color) { 126 | border-color: @color !important; 127 | color: @color; 128 | 129 | &:before { 130 | .bc(@color); 131 | } 132 | 133 | &.rounded-btn { 134 | &:hover, 135 | &.animated { 136 | .bc(@color); 137 | } 138 | } 139 | } 140 | 141 | &.rounded-btn { 142 | transition: background 0s cubic-bezier(0.39, 0.58, 0.57, 1) 0s; 143 | 144 | &:hover, 145 | &.animated { 146 | transition: background 0.03s cubic-bezier(0.39, 0.58, 0.57, 1) 0.15s; 147 | } 148 | } 149 | 150 | &.blue-btn { 151 | .colorBtn(@blue); 152 | } 153 | &.pink-btn { 154 | .colorBtn(@pink); 155 | } 156 | 157 | &.green-btn { 158 | .colorBtn(@green); 159 | } 160 | 161 | &.yellow-btn { 162 | .colorBtn(@yellow); 163 | 164 | &:hover, 165 | &.animated { 166 | color: @darkText !important; 167 | } 168 | } 169 | 170 | &.orange-btn { 171 | .colorBtn(@orange); 172 | } 173 | 174 | &.red-btn { 175 | .colorBtn(@red); 176 | } 177 | 178 | &.purple-btn { 179 | .colorBtn(@purple); 180 | } 181 | 182 | &.black-btn { 183 | .blackBtnDarkMode(); 184 | .colorBtn(@black); 185 | } 186 | 187 | &.white-btn { 188 | .whiteBtnDarkMode(); 189 | .colorBtn(@white); 190 | border-color: @whiteBorder !important; 191 | color: @darkText; 192 | &:hover, 193 | &.animated { 194 | color: @darkText !important; 195 | } 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/components/animated/_flash.less: -------------------------------------------------------------------------------- 1 | .flash-btn { 2 | opacity: 1; 3 | 4 | &:hover, 5 | &.animated { 6 | animation-name: flash; 7 | animation-duration: 0.6s; 8 | animation-timing-function: ease-in-out; 9 | animation-direction: alternate; 10 | animation-iteration-count: infinite; 11 | animation-play-state: running; 12 | } 13 | } 14 | 15 | @keyframes flash { 16 | 0% { 17 | opacity: 1; 18 | } 19 | 20 | 100% { 21 | opacity: 0; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/animated/_gradient-border.less: -------------------------------------------------------------------------------- 1 | @keyframes animatedgradient { 2 | 0% { 3 | background-position: 0% 50%; 4 | } 5 | 50% { 6 | background-position: 100% 50%; 7 | } 8 | 100% { 9 | background-position: 0% 50%; 10 | } 11 | } 12 | .gradient-border { 13 | background: #fff; 14 | position: relative; 15 | border-radius: 3px; 16 | align-items: center; 17 | align-self: center; 18 | margin-right: 0; 19 | justify-content: center; 20 | height: 50px; 21 | min-width: 120px; 22 | color: #1d1f20; 23 | font-size: 1.7rem; 24 | box-sizing: content-box; 25 | padding: 0; 26 | border: none; 27 | overflow: visible; 28 | margin-top: 1em; 29 | &::after { 30 | content: ""; 31 | position: absolute; 32 | top: -3px; 33 | left: -3px; 34 | height: calc(100% + 6px); 35 | width: calc(100% + 6px); 36 | background: linear-gradient( 37 | 60deg, 38 | #f79533, 39 | #f37055, 40 | #ef4e7b, 41 | #a166ab, 42 | #5073b8, 43 | #1098ad, 44 | #07b39b, 45 | #6fba82 46 | ); 47 | border-radius: 6px; 48 | z-index: -1; 49 | animation: animatedgradient 3s ease alternate infinite; 50 | background-size: 300% 300%; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/animated/_hinge.less: -------------------------------------------------------------------------------- 1 | .hinge-btn { 2 | transition: transform 0.2s; 3 | transform-origin: top left; 4 | 5 | &:hover, 6 | &.animated { 7 | transform: rotateZ(15deg); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/animated/_invert.less: -------------------------------------------------------------------------------- 1 | .invert-btn { 2 | &:hover, 3 | &.animated { 4 | animation: colorTransformation 0.5s; 5 | animation-fill-mode: forwards; 6 | } 7 | 8 | @keyframes colorTransformation { 9 | 0% { 10 | filter: invert(0); 11 | } 12 | 100% { 13 | filter: invert(1); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/animated/_layered.less: -------------------------------------------------------------------------------- 1 | .layered-btn { 2 | border: 1px solid @black !important; 3 | background-color: transparent !important; 4 | position: relative; 5 | overflow: visible; 6 | 7 | &::after { 8 | content: ""; 9 | z-index: -1; 10 | position: absolute; 11 | height: 100%; 12 | width: 100%; 13 | top: 7px; 14 | left: 7px; 15 | transition: 0.25s; 16 | } 17 | &.blue-btn::after { 18 | background-color: @blue; 19 | } 20 | 21 | &.pink-btn::after { 22 | background-color: @pink; 23 | } 24 | 25 | &.red-btn::after { 26 | background-color: @red; 27 | } 28 | 29 | &.green-btn::after { 30 | background-color: @green; 31 | } 32 | 33 | &.yellow-btn::after { 34 | background-color: @yellow; 35 | } 36 | 37 | &.orange-btn::after { 38 | background-color: @orange; 39 | } 40 | 41 | &.purple-btn::after { 42 | background-color: @purple; 43 | } 44 | 45 | &.black-btn::after { 46 | background-color: @black; 47 | } 48 | 49 | &.white-btn::after { 50 | background-color: @white; 51 | } 52 | 53 | &:hover::after { 54 | top: 0px; 55 | left: 0px; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/animated/_liquid.less: -------------------------------------------------------------------------------- 1 | .liquid-btn { 2 | position: relative; 3 | z-index: 0; 4 | 5 | &::before { 6 | animation: waterEffect 5s linear infinite; 7 | background: rgba(255, 255, 255, 0.5); 8 | border-radius: 45%; 9 | content: ""; 10 | height: 400px; 11 | left: 50%; 12 | position: absolute; 13 | top: -80px; 14 | transform: translate(-50%, -75%); 15 | transition: 0.5s linear; 16 | width: 400px; 17 | z-index: -1; 18 | } 19 | 20 | &::after { 21 | animation: waterEffect 10s linear infinite; 22 | background: rgba(255, 255, 255, 0.2); 23 | border-radius: 40%; 24 | content: ""; 25 | height: 400px; 26 | left: 50%; 27 | position: absolute; 28 | top: -80px; 29 | transform: translate(-50%, -75%); 30 | transition: 0.5s linear; 31 | width: 400px; 32 | z-index: -1; 33 | } 34 | 35 | &:hover::before, 36 | &.animated::before { 37 | top: -120px; 38 | } 39 | 40 | &:hover::after, 41 | &.animated::after { 42 | top: -120px; 43 | } 44 | 45 | .liquidBtn(@color) { 46 | border-color: @color; 47 | color: #000 !important; 48 | .bc(@color); 49 | } 50 | 51 | &.blue-btn { 52 | .liquidBtn(@blue); 53 | } 54 | 55 | &.pink-btn { 56 | .liquidBtn(@pink); 57 | } 58 | 59 | &.green-btn { 60 | .liquidBtn(@green); 61 | } 62 | 63 | &.yellow-btn { 64 | .liquidBtn(@yellow); 65 | color: #fff; 66 | } 67 | 68 | &.orange-btn { 69 | .liquidBtn(@orange); 70 | } 71 | 72 | &.red-btn { 73 | .liquidBtn(@red); 74 | } 75 | 76 | &.purple-btn { 77 | .liquidBtn(@purple); 78 | } 79 | 80 | &.black-btn { 81 | .liquidBtn(@black); 82 | color: #fff !important; 83 | } 84 | 85 | &.white-btn { 86 | .liquidBtn(@white); 87 | border-color: rgba(0, 0, 0, 0.2); 88 | &::before { 89 | background-color: rgba(0, 0, 0, 0.5); 90 | } 91 | &::after { 92 | background-color: rgba(0, 0, 0, 0.2); 93 | } 94 | } 95 | } 96 | 97 | @keyframes waterEffect { 98 | 0% { 99 | transform: translate(-50%, -75%) rotate(0deg); 100 | } 101 | 102 | 100% { 103 | transform: translate(-50%, -75%) rotate(360deg); 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/components/animated/_loading-btn.less: -------------------------------------------------------------------------------- 1 | .loading-btn { 2 | &.spin { 3 | &.left { 4 | &:before { 5 | content: ""; 6 | display: inline-block; 7 | height: 18px; 8 | width: 18px; 9 | margin-top: 10px; 10 | margin-right: 15px; 11 | border-top: 4px solid @white; 12 | animation: 1.5s spin linear infinite; 13 | border-radius: 50%; 14 | } 15 | } 16 | 17 | &.right { 18 | &:after { 19 | content: ""; 20 | display: inline-block; 21 | height: 18px; 22 | width: 18px; 23 | margin-top: 10px; 24 | margin-left: 15px; 25 | border-top: 4px solid @white; 26 | animation: spin 1.5s linear infinite; 27 | border-radius: 50%; 28 | } 29 | } 30 | 31 | @keyframes spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(359deg); 37 | } 38 | } 39 | } 40 | 41 | // bounce loader 42 | &.bounce { 43 | &.left { 44 | &:before { 45 | content: ""; 46 | display: inline-block; 47 | height: 18px; 48 | width: 18px; 49 | margin-top: 10px; 50 | margin-right: 15px; 51 | background: @white; 52 | animation: 0.7s bounce linear infinite alternate; 53 | border-radius: 50%; 54 | } 55 | } 56 | 57 | &.right { 58 | &:after { 59 | content: ""; 60 | display: inline-block; 61 | height: 18px; 62 | width: 18px; 63 | margin-top: 10px; 64 | margin-left: 15px; 65 | background: @white; 66 | animation: bounce 0.7s linear infinite alternate; 67 | border-radius: 50%; 68 | } 69 | } 70 | 71 | @keyframes bounce { 72 | 0% { 73 | transform: translateY(5px); 74 | } 75 | 50% { 76 | transform: translateY(-2px); 77 | } 78 | 100% { 79 | transform: translateY(-5px); 80 | } 81 | } 82 | } 83 | // bounce loader ends here 84 | 85 | // heart-beat loader starts here 86 | &.heart-beat { 87 | &.left { 88 | &:before { 89 | content: ""; 90 | display: inline-block; 91 | height: 18px; 92 | width: 18px; 93 | margin-top: 10px; 94 | margin-right: 15px; 95 | background: @white; 96 | animation: 1.5s bloop linear infinite; 97 | border-radius: 50%; 98 | } 99 | } 100 | 101 | &.right { 102 | &:after { 103 | content: ""; 104 | display: inline-block; 105 | height: 18px; 106 | width: 18px; 107 | margin-top: 10px; 108 | margin-left: 15px; 109 | background: @white; 110 | animation: bloop 1.5s linear infinite; 111 | border-radius: 50%; 112 | } 113 | } 114 | 115 | @keyframes bloop { 116 | 0% { 117 | transform: scale(0.5); 118 | } 119 | 25% { 120 | transform: scale(0.88); 121 | } 122 | 50% { 123 | transform: scale(0.6); 124 | } 125 | 75% { 126 | transform: scale(0.99); 127 | } 128 | 100% { 129 | transform: scale(0.5); 130 | } 131 | } 132 | } 133 | // heart beat loader ends here 134 | 135 | // slide loader starts here 136 | &.slide { 137 | &.left { 138 | &:before { 139 | content: ""; 140 | display: inline-block; 141 | height: 18px; 142 | width: 18px; 143 | margin-top: 10px; 144 | margin-right: 15px; 145 | background: @white; 146 | animation: 1.5s slide linear infinite reverse; 147 | border-radius: 50%; 148 | } 149 | } 150 | 151 | &.right { 152 | &:after { 153 | content: ""; 154 | display: inline-block; 155 | height: 18px; 156 | width: 18px; 157 | margin-top: 10px; 158 | margin-left: 15px; 159 | background: @white; 160 | animation: slide 1.5s linear infinite; 161 | border-radius: 50%; 162 | } 163 | } 164 | 165 | @keyframes slide { 166 | 0% { 167 | transform: translateX(0px); 168 | } 169 | 25% { 170 | transform: translateX(4px); 171 | } 172 | 50% { 173 | transform: translateX(7px); 174 | } 175 | 75% { 176 | transform: translate(10px); 177 | } 178 | 100% { 179 | transform: translate(0px); 180 | } 181 | } 182 | } 183 | // flip loader ends here 184 | } 185 | -------------------------------------------------------------------------------- /src/components/animated/_neon.less: -------------------------------------------------------------------------------- 1 | .neon-btn { 2 | transition: all 0.5s ease; 3 | 4 | .neon(@col) { 5 | color: @black; 6 | background-color: @col; 7 | box-shadow: 0px 0px 52px 10px @col; 8 | } 9 | 10 | &.green-btn { 11 | &:hover, 12 | &.animated { 13 | .neon(@neonGreen); 14 | } 15 | } 16 | 17 | &.blue-btn { 18 | &:hover, 19 | &.animated { 20 | .neon(@neonBlue); 21 | } 22 | } 23 | 24 | &.red-btn { 25 | &:hover, 26 | &.animated { 27 | .neon(@neonRed); 28 | } 29 | } 30 | 31 | &.purple-btn { 32 | &:hover, 33 | &.animated { 34 | .neon(@neonPurple); 35 | } 36 | } 37 | 38 | &.orange-btn { 39 | &:hover, 40 | &.animated { 41 | .neon(@neonOrange); 42 | } 43 | } 44 | 45 | &.yellow-btn { 46 | &:hover, 47 | &.animated { 48 | .neon(@neonYellow); 49 | } 50 | } 51 | 52 | &.pink-btn { 53 | &:hover, 54 | &.animated { 55 | .neon(@neonPink); 56 | } 57 | } 58 | 59 | &.black-btn { 60 | &:hover, 61 | &.animated { 62 | .neon(@neonBlack); 63 | color: @lightText !important; 64 | } 65 | } 66 | 67 | &.white-btn { 68 | &:hover, 69 | &.animated { 70 | .neon(@neonWhite); 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/animated/_nudge.less: -------------------------------------------------------------------------------- 1 | .nudgeAnimation() { 2 | animation: nudge 0.75s; 3 | } 4 | .nudge-btn { 5 | &:hover, 6 | &.animated { 7 | .nudgeAnimation(); 8 | } 9 | &.animated { 10 | animation-iteration-count: infinite; 11 | } 12 | 13 | @keyframes nudge { 14 | 0%, 15 | 11.1%, 16 | 100% { 17 | transform: none; 18 | } 19 | 20 | 22.2% { 21 | transform: skewX(-12.5deg) skewY(-12.5deg); 22 | } 23 | 33.3% { 24 | transform: skewX(6.25deg) skewY(6.25deg); 25 | } 26 | 44.4% { 27 | transform: skewX(-3.125deg) skewY(-3.125deg); 28 | } 29 | 55.5% { 30 | transform: skewX(1.5625deg) skewY(1.5625deg); 31 | } 32 | 66.6% { 33 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 34 | } 35 | 77.7% { 36 | transform: skewX(0.390625deg) skewY(0.390625deg); 37 | } 38 | 88.8% { 39 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/animated/_papercurl.less: -------------------------------------------------------------------------------- 1 | .papercurl-btn { 2 | backface-visibility: hidden; 3 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 4 | display: inline-block; 5 | position: relative; 6 | transform: translateZ(0px); 7 | vertical-align: middle; 8 | clip-path: polygon( 9 | 0 0, 10 | 100% 0, 11 | 100% 0, 12 | 100% 100%, 13 | 100% 100%, 14 | 0 100%, 15 | 0 100%, 16 | 0 0 17 | ); 18 | transition-duration: 0.3s; 19 | transition-property: clip-path; 20 | 21 | &:before { 22 | background: rgba(0, 0, 0, 0) 23 | linear-gradient( 24 | 315deg, 25 | transparent 45%, 26 | #aaaaaa 50%, 27 | #cccccc 56%, 28 | white 80% 29 | ) 30 | repeat scroll 0 0; /*display smooth transitions between two or more specified colors */ 31 | bottom: 0; 32 | box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); 33 | content: ""; 34 | height: 0; 35 | pointer-events: none; 36 | position: absolute; 37 | right: 0; 38 | transition-duration: 0.3s; 39 | transition-property: width, height; 40 | width: 0; 41 | border-color: white; 42 | } 43 | &:hover, 44 | &:focus, 45 | &:active, 46 | &.animated { 47 | clip-path: polygon( 48 | 25px 0%, 49 | 100% 0, 50 | 100% 25px, 51 | 100% calc(100% - 25px), 52 | calc(100% - 25px) 100%, 53 | 25px 100%, 54 | 0 100%, 55 | 0 0 56 | ); 57 | &:before { 58 | height: 25px; 59 | width: 25px; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/components/animated/_pudding.less: -------------------------------------------------------------------------------- 1 | .pudding-btn { 2 | transform-origin: 0 100%; 3 | 4 | &:hover, 5 | &:focus, 6 | &:active, 7 | &.animated { 8 | animation: jiggle 1s ease-in-out 1; 9 | } 10 | } 11 | 12 | @keyframes jiggle { 13 | 16.65% { 14 | transform: skew(-12deg); 15 | } 16 | 17 | 33.3% { 18 | transform: skew(10deg); 19 | } 20 | 21 | 49.95% { 22 | transform: skew(-6deg); 23 | } 24 | 25 | 66.6% { 26 | transform: skew(4deg); 27 | } 28 | 29 | 83.25% { 30 | transform: skew(-2deg); 31 | } 32 | 33 | 100% { 34 | transform: skew(0); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/animated/_pulse.less: -------------------------------------------------------------------------------- 1 | .pulse-btn { 2 | box-shadow: 0px 1px 4px #6c6c6c; 3 | 4 | &:hover, 5 | &.animated { 6 | animation: pulse 1s infinite; 7 | } 8 | 9 | @keyframes pulse { 10 | 0% { 11 | transform: scale(1); 12 | } 13 | 50% { 14 | transform: scale(1.2); 15 | } 16 | 100% { 17 | transform: scale(1); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/animated/_rainbow.less: -------------------------------------------------------------------------------- 1 | .rainbow-btn { 2 | &:hover, 3 | &.animated { 4 | transition: 0.3s; 5 | animation: rainbow 5s infinite ease-in-out; 6 | } 7 | } 8 | @keyframes rainbow { 9 | 0% { 10 | background-color: red; 11 | box-shadow: 1px 4px 5px rgb(212, 84, 84); 12 | } 13 | 14.28% { 14 | background-color: orange; 15 | box-shadow: 1px 4px 5px rgb(219, 179, 91); 16 | } 17 | 28.56% { 18 | background-color: yellow; 19 | box-shadow: 1px 4px 5px rgb(212, 223, 112); 20 | } 21 | 42.84% { 22 | background-color: rgb(46, 247, 46); 23 | box-shadow: 1px 4px 5px rgb(124, 196, 91); 24 | } 25 | 57.12% { 26 | background-color: rgb(95, 220, 236); 27 | box-shadow: 1px 4px 5px rgb(96, 183, 199); 28 | } 29 | 71.4% { 30 | background-color: rgb(174, 88, 235); 31 | box-shadow: 1px 4px 5px rgb(75, 77, 165); 32 | } 33 | 85.68% { 34 | background-color: violet; 35 | box-shadow: 1px 4px 5px rgb(175, 59, 150); 36 | } 37 | 100% { 38 | background-color: red; 39 | box-shadow: 1px 4px 5px rgb(209, 54, 54); 40 | } 41 | } // Red, Orange, Yellow, Green, Blue, Indigo Violet. 42 | -------------------------------------------------------------------------------- /src/components/animated/_ripple.less: -------------------------------------------------------------------------------- 1 | .ripple-btn { 2 | .bc(transparent); 3 | position: relative; 4 | 5 | &::before { 6 | content: " "; 7 | z-index: -1; 8 | position: absolute; 9 | height: 0; 10 | width: 0; 11 | top: 50%; 12 | left: 50%; 13 | border-radius: 50%; 14 | transform: translate(-50%, -50%); 15 | } 16 | 17 | &:hover, 18 | &.animated { 19 | color: white !important; 20 | transition: 0.5s; 21 | 22 | &::before { 23 | animation: a-ripple 1s cubic-bezier(0.39, 0.58, 0.57, 1) forwards; 24 | } 25 | } 26 | 27 | .rippleBtn(@color) { 28 | border-color: @color; 29 | color: @color; 30 | 31 | &::before { 32 | .bc(@color); 33 | } 34 | } 35 | 36 | &.blue-btn { 37 | .rippleBtn(@blue); 38 | } 39 | 40 | &.pink-btn { 41 | .rippleBtn(@pink); 42 | } 43 | 44 | &.green-btn { 45 | .rippleBtn(@green); 46 | } 47 | 48 | &.yellow-btn { 49 | .rippleBtn(@yellow); 50 | &:not(:hover) { 51 | color: @yellow !important; 52 | } 53 | &:hover { 54 | color: @darkText !important; 55 | } 56 | } 57 | 58 | &.orange-btn { 59 | .rippleBtn(@orange); 60 | } 61 | 62 | &.red-btn { 63 | .rippleBtn(@red); 64 | } 65 | 66 | &.purple-btn { 67 | .rippleBtn(@purple); 68 | } 69 | 70 | &.black-btn { 71 | .blackBtnDarkMode(); 72 | 73 | .rippleBtn(@black); 74 | } 75 | 76 | &.white-btn { 77 | .whiteBtnDarkMode(); 78 | 79 | .rippleBtn(@white); 80 | border-color: @whiteBorder; 81 | &:hover { 82 | color: @darkText !important; 83 | } 84 | } 85 | } 86 | 87 | @keyframes a-ripple { 88 | 0% { 89 | opacity: 0; 90 | } 91 | 25% { 92 | opacity: 1; 93 | } 94 | 100% { 95 | width: 200%; 96 | padding-bottom: 200%; 97 | opacity: 1; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/components/animated/_scale.less: -------------------------------------------------------------------------------- 1 | .scale-btn { 2 | transition: all 0.1s; 3 | &:hover, 4 | &.animated { 5 | transform: scale(1.2); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/animated/_shake.less: -------------------------------------------------------------------------------- 1 | .shake-btn { 2 | &:hover, 3 | &.animated { 4 | animation: shake 0.75s; 5 | } 6 | 7 | &.animated { 8 | animation-iteration-count: infinite; 9 | } 10 | 11 | @keyframes shake { 12 | 0% { 13 | transform: rotate(0deg); 14 | } 15 | 16.6% { 16 | transform: rotate(-25deg); 17 | } 18 | 33.2% { 19 | transform: rotate(25deg); 20 | } 21 | 49.4% { 22 | transform: rotate(-25deg); 23 | } 24 | 66% { 25 | transform: rotate(25deg); 26 | } 27 | 82.6% { 28 | transform: rotate(-25deg); 29 | } 30 | 100% { 31 | transform: rotate(0deg); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/animated/_shine.less: -------------------------------------------------------------------------------- 1 | @keyframes shine { 2 | 10% { 3 | opacity: 1; 4 | top: -30%; 5 | left: -30%; 6 | transition-property: left, top, opacity; 7 | transition-duration: 0.75s, 0.75s, 0.35s; 8 | transition-timing-function: ease; 9 | } 10 | 100% { 11 | opacity: 0; 12 | top: -30%; 13 | left: -30%; 14 | transition-property: left, top, opacity; 15 | } 16 | } 17 | .shine-btn { 18 | position: relative; 19 | box-shadow: 1px 2px 8px #ccc; 20 | &:hover, 21 | &.animated { 22 | &:after { 23 | animation: shine 7s ease-in-out infinite; 24 | animation-fill-mode: forwards; 25 | content: ""; 26 | position: absolute; 27 | top: -150%; 28 | left: -210%; 29 | width: 200%; 30 | height: 200%; 31 | opacity: 0; 32 | transform: rotate(30deg); 33 | background: rgba(255, 255, 255, 0.13); 34 | background: linear-gradient( 35 | to right, 36 | rgba(255, 255, 255, 0.13) 0%, 37 | rgba(255, 255, 255, 0.13) 77%, 38 | rgba(255, 255, 255, 0.5) 92%, 39 | rgba(255, 255, 255, 0) 100% 40 | ); 41 | } 42 | } 43 | &.blue-btn:active { 44 | .bc(@darkBlue); 45 | } 46 | &.pink-btn:active { 47 | .bc(@darkPink); 48 | } 49 | &.green-btn:active { 50 | .bc(@darkGreen); 51 | } 52 | 53 | &.yellow-btn:active { 54 | .bc(@darkYellow); 55 | } 56 | 57 | &.red-btn:active { 58 | .bc(@darkRed); 59 | } 60 | 61 | &.purple-btn:active { 62 | .bc(@darkPurple); 63 | } 64 | 65 | &.orange-btn:active { 66 | .bc(@darkOrange); 67 | } 68 | &:active { 69 | &:after { 70 | opacity: 0; 71 | } 72 | } 73 | .shine-btn { 74 | &:hover { 75 | &:before { 76 | top: -110%; 77 | visibility: visible; 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/animated/_skew.less: -------------------------------------------------------------------------------- 1 | .transform () { 2 | transform: skew(10deg); 3 | } 4 | 5 | .skew-btn { 6 | transition: transform 0.2s; 7 | &:hover, 8 | &.animated { 9 | .transform (); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/animated/_snake.less: -------------------------------------------------------------------------------- 1 | .snake-btn { 2 | position: relative; 3 | border: none; 4 | 5 | &:before { 6 | display: block; 7 | content: " "; 8 | border: none; 9 | position: absolute; 10 | width: 0; 11 | height: 0; 12 | opacity: 0; 13 | transition: opacity 0.2s ease-in-out; 14 | top: 0; 15 | left: 0; 16 | } 17 | 18 | &:after { 19 | display: block; 20 | content: " "; 21 | border: none; 22 | position: absolute; 23 | width: 0; 24 | height: 0; 25 | opacity: 0; 26 | transition: opacity 0.2s ease-in-out; 27 | bottom: 0; 28 | right: 0; 29 | } 30 | 31 | &:hover, 32 | &.animated { 33 | &:before { 34 | width: 100%; 35 | height: 100%; 36 | opacity: 1; 37 | border-top: 0.2rem solid yellow; 38 | border-right: 0.2rem solid yellow; 39 | transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), 40 | height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1); 41 | border-color: #333; 42 | } 43 | 44 | &:after { 45 | width: 100%; 46 | height: 100%; 47 | opacity: 1; 48 | border-bottom: 0.2rem solid; 49 | border-left: 0.2rem solid; 50 | transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), 51 | height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1); 52 | border-color: #333; 53 | } 54 | 55 | [data-theme="dark"] &, 56 | &.dark-mode { 57 | &:before, 58 | &:after { 59 | border-color: #fff; 60 | } 61 | } 62 | } 63 | 64 | &:focus { 65 | box-shadow: none; 66 | } 67 | 68 | &.rounded-btn { 69 | &:hover, 70 | &.animated { 71 | &:before { 72 | border-radius: 25px; 73 | } 74 | &:after { 75 | border-radius: 25px; 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/animated/_splash.less: -------------------------------------------------------------------------------- 1 | .splashAnimation() { 2 | color: @black; 3 | 4 | &:after { 5 | background: transparent; 6 | } 7 | 8 | &:before { 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .splash-btn { 14 | outline: none; 15 | border: none; 16 | cursor: pointer; 17 | position: relative; 18 | z-index: 0; 19 | 20 | &:not(.yellow-btn):not(.white-btn) { 21 | color: @lightText; 22 | } 23 | 24 | &.yellow-btn, 25 | &.white-btn { 26 | color: @darkText; 27 | } 28 | 29 | &:before { 30 | content: ""; 31 | background: linear-gradient( 32 | 45deg, 33 | #ff0000, 34 | #ff7300, 35 | #fffb00, 36 | #48ff00, 37 | #00ffd5, 38 | #002bff, 39 | #7a00ff, 40 | #ff00c8, 41 | #ff0000 42 | ); 43 | position: absolute; 44 | top: -2px; 45 | left: -2px; 46 | background-size: 400%; 47 | z-index: -1; 48 | filter: blur(5px); 49 | width: calc(100% + 4px); 50 | height: calc(100% + 4px); 51 | animation: glowing 20s linear infinite; 52 | opacity: 0; 53 | transition: opacity 0.3s ease-in-out; 54 | } 55 | 56 | &:after { 57 | z-index: -1; 58 | content: ""; 59 | position: absolute; 60 | width: 100%; 61 | height: 100%; 62 | left: 0; 63 | top: 0; 64 | } 65 | 66 | &:hover { 67 | .splashAnimation(); 68 | } 69 | 70 | &.animated { 71 | .splashAnimation(); 72 | } 73 | } 74 | 75 | @keyframes glowing { 76 | 0% { 77 | background-position: 0 0; 78 | } 79 | 50% { 80 | background-position: 400% 0; 81 | } 82 | 100% { 83 | background-position: 0 0; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/animated/_spotlight.less: -------------------------------------------------------------------------------- 1 | @colors: @blue, @pink, @red, @green, @yellow, @orange, @purple, @black; 2 | @colorbtns: blue-btn, pink-btn, red-btn, green-btn, yellow-btn, orange-btn, 3 | purple-btn, black-btn; 4 | .spotlight-colorspecific-mixin(@param) when (@param = "main") { 5 | each(@colorbtns,{ 6 | &.@{value}{ 7 | @currentcolor:extract(@colors,@key); 8 | border-color:@currentcolor; 9 | box-shadow:inset 0px 0px 10px @currentcolor; 10 | } 11 | }); 12 | } 13 | .spotlight-colorspecific-mixin(@param) when (@param = "after/before") { 14 | each(@colorbtns,{ 15 | &.@{value}{ 16 | @currentcolor:extract(@colors,@key); 17 | &:after{ 18 | border-color:@currentcolor; 19 | box-shadow:inset 0px 0px 10px @currentcolor; 20 | } 21 | &:before{ 22 | background-color: extract(@colors,@key); 23 | border-color:white ; 24 | } 25 | } 26 | }); 27 | } 28 | .sbtn.spotlight-btn { 29 | position: relative; 30 | color: @darkText; 31 | background-color: transparent; 32 | overflow: visible !important; 33 | outline: none; 34 | z-index: 0; 35 | .spotlight-colorspecific-mixin("main"); 36 | &.block-btn { 37 | height: 50px; 38 | width: 200px; 39 | } 40 | &.white-btn { 41 | border-color: #9c9a9a; 42 | box-shadow: inset 0px 0px 10px #b1afaf; 43 | &:after { 44 | border-color: #9c9a9a; 45 | box-shadow: inset 0px 0px 10px #b1afaf; 46 | } 47 | &:before { 48 | background-color: white; 49 | border: 1px solid #9c9a9a; 50 | } 51 | } 52 | .spotlight-colorspecific-mixin("after/before"); 53 | &:after { 54 | content: ""; 55 | pointer-events: none; 56 | height: 100%; 57 | width: 100%; 58 | top: 6px; 59 | left: 6px; 60 | opacity: 1; 61 | position: absolute; 62 | z-index: -10; 63 | background-color: transparent; 64 | overflow: visible; 65 | box-sizing: content-box; 66 | border-radius: inherit; 67 | } 68 | &:hover { 69 | animation: font_color_change 0.5s ease-in 0.25s forwards !important; 70 | &:before { 71 | animation: spotappear 0.5s ease-in forwards, 72 | spotexpand 0.25s ease-in 0.5s forwards; 73 | } 74 | &:after { 75 | animation: after_returns_to_main 0.5s ease-in forwards; 76 | } 77 | } 78 | &:before { 79 | content: ""; 80 | pointer-events: none; 81 | padding: 20px; 82 | position: absolute; 83 | height: 100%; 84 | width: 50px; 85 | top: 100px; 86 | opacity: 0; 87 | z-index: -1; 88 | left: 50%; 89 | transform: translateX(-50%); 90 | border-width: 1px; 91 | } 92 | } 93 | @keyframes spotappear { 94 | 0% { 95 | top: 100px; 96 | opacity: 0; 97 | border-radius: 50%; 98 | } 99 | 100% { 100 | top: 0px; 101 | opacity: 1; 102 | border-radius: 50%; 103 | } 104 | } 105 | @keyframes spotexpand { 106 | 0% { 107 | border-radius: 50%; 108 | width: 50px; 109 | } 110 | 100% { 111 | border-radius: inherit; 112 | width: 100%; 113 | } 114 | } 115 | @keyframes after_returns_to_main { 116 | 0% { 117 | transform: translate(0px, 0px); 118 | opacity: 1; 119 | } 120 | 100% { 121 | transform: translate(-10px, -10px); 122 | opacity: 0; 123 | } 124 | } 125 | @keyframes font_color_change { 126 | 0% { 127 | color: @darkText; 128 | } 129 | 100% { 130 | color: cornsilk; 131 | text-shadow: 0px 0px 20px white; 132 | box-shadow: inset 0px 0px 5px cornsilk; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/components/animated/_spring.less: -------------------------------------------------------------------------------- 1 | .springAnimation() { 2 | animation-name: spring; 3 | animation-duration: 1.5s; 4 | //animation-direction: alternate; 5 | animation-iteration-count: infinite; 6 | animation-timing-function: ease-out; 7 | } 8 | 9 | .spring-btn { 10 | &:hover { 11 | .springAnimation(); 12 | } 13 | 14 | &.animated { 15 | .springAnimation(); 16 | } 17 | 18 | @keyframes spring { 19 | 0% { 20 | transform: scaleY(1); 21 | } 22 | 10% { 23 | transform: scaleY(0.7); 24 | } 25 | 50% { 26 | transform: scaleY(1.8); 27 | } 28 | 70% { 29 | transform: scaleY(0.8); 30 | } 31 | 85% { 32 | transform: scaleY(1.3); 33 | } 34 | 100% { 35 | transform: scaleY(1); 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/animated/_striped-animated.less: -------------------------------------------------------------------------------- 1 | .stripeRule(@color) { 2 | border: solid 2px @color; 3 | color: black !important; 4 | background-image: repeating-linear-gradient( 5 | 45deg, 6 | @color, 7 | @color 10px, 8 | rgba(0, 0, 0, 0.15) 10px, 9 | rgba(0, 0, 0, 0.15) 20px 10 | ); 11 | background-size: 250% 250%; 12 | } 13 | 14 | .striped-animated-btn { 15 | &.blue-btn { 16 | .stripeRule(@blue); 17 | } 18 | 19 | &.pink-btn { 20 | .stripeRule(@pink); 21 | } 22 | 23 | &.red-btn { 24 | .stripeRule(@red); 25 | } 26 | 27 | &.green-btn { 28 | .stripeRule(@green); 29 | } 30 | 31 | &.yellow-btn { 32 | .stripeRule(@yellow); 33 | } 34 | 35 | &.orange-btn { 36 | .stripeRule(@orange); 37 | } 38 | 39 | &.purple-btn { 40 | .stripeRule(@purple); 41 | } 42 | 43 | &.white-btn { 44 | .stripeRule(@white); 45 | } 46 | 47 | &.black-btn { 48 | border: solid 2px black; 49 | color: white !important; 50 | background-image: repeating-linear-gradient( 51 | 45deg, 52 | black, 53 | black 10px, 54 | rgba(255, 255, 255, 0.15) 10px, 55 | rgba(255, 255, 255, 0.15) 20px 56 | ); 57 | background-size: 400% 400%; 58 | } 59 | 60 | &:hover, 61 | &.animated { 62 | animation: stripes 1s linear forwards infinite; 63 | } 64 | 65 | @keyframes stripes { 66 | 0% { 67 | background-position: 0% 100%; 68 | } 69 | 70 | 100% { 71 | background-position: 100% 100%; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/components/animated/_transparent.less: -------------------------------------------------------------------------------- 1 | .transparentAnimation(@color; @borderColor) { 2 | border-color: @borderColor; 3 | &::before { 4 | .bc(@color); 5 | } 6 | color: @color !important; 7 | } 8 | 9 | .transparent-btn { 10 | position: relative; 11 | transition: 0.3s ease-in-out; 12 | 13 | &:hover, 14 | &.animated { 15 | .bc(transparent); 16 | 17 | &.blue-btn { 18 | .transparentAnimation(@blue, @blue); 19 | } 20 | &.pink-btn { 21 | .transparentAnimation(@pink, @pink); 22 | } 23 | 24 | &.green-btn { 25 | .transparentAnimation(@green, @green); 26 | } 27 | 28 | &.yellow-btn { 29 | .transparentAnimation(@yellow, @yellow); 30 | } 31 | &.orange-btn { 32 | .transparentAnimation(@orange, @orange); 33 | } 34 | 35 | &.red-btn { 36 | .transparentAnimation(@red, @red); 37 | } 38 | 39 | &.purple-btn { 40 | .transparentAnimation(@purple, @purple); 41 | } 42 | 43 | &.black-btn { 44 | .transparentAnimation(@black, @black); 45 | 46 | [data-theme="dark"] &, 47 | &.dark-mode { 48 | .transparentAnimation(@white, @white); 49 | } 50 | } 51 | 52 | &.white-btn { 53 | .transparentAnimation(@white, @whiteBorder); 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/animated/_vibrate.less: -------------------------------------------------------------------------------- 1 | .vibrateAnimation() { 2 | animation: vibrate 0.3s linear infinite both; 3 | } 4 | .vibrate-btn { 5 | &:hover, 6 | &.animated { 7 | .vibrateAnimation(); 8 | } 9 | 10 | @keyframes vibrate { 11 | 0% { 12 | transform: translate(0); 13 | } 14 | 20% { 15 | transform: translate(-2px, 2px); 16 | } 17 | 40% { 18 | transform: translate(-2px, -2px); 19 | } 20 | 60% { 21 | transform: translate(2px, 2px); 22 | } 23 | 80% { 24 | transform: translate(2px, -2px); 25 | } 26 | 100% { 27 | transform: translate(0); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/hover/_shadow-on-hover.less: -------------------------------------------------------------------------------- 1 | .shadow-on-hover-btn { 2 | transition: all 0.2s; 3 | .shadow-on-hover(@color) { 4 | box-shadow: 0 8px 25px -8px @color; 5 | } 6 | 7 | .blue-btn&:hover { 8 | .shadow-on-hover(@blue); 9 | } 10 | .pink-btn&:hover { 11 | .shadow-on-hover(@pink); 12 | } 13 | .red-btn&:hover { 14 | .shadow-on-hover(@red); 15 | } 16 | .green-btn&:hover { 17 | .shadow-on-hover(@green); 18 | } 19 | .yellow-btn&:hover { 20 | .shadow-on-hover(@yellow); 21 | } 22 | .orange-btn&:hover { 23 | .shadow-on-hover(@orange); 24 | } 25 | .purple-btn&:hover { 26 | .shadow-on-hover(@purple); 27 | } 28 | .black-btn&:hover { 29 | .shadow-on-hover(@black); 30 | } 31 | .white-btn&:hover { 32 | .shadow-on-hover(@white); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/icon/_grow.less: -------------------------------------------------------------------------------- 1 | .grow-btn { 2 | display: inline-block; 3 | height: 60px; 4 | width: 60px; 5 | margin: 0 70px; 6 | white-space: nowrap; 7 | overflow: hidden; 8 | 9 | border-radius: 50px; 10 | cursor: pointer; 11 | box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); 12 | transition: all 0.3s; 13 | &:hover { 14 | &:after { 15 | content: " Favourite"; 16 | font-style: normal; 17 | font-variant: normal; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | transition: all 0.3s; 21 | } 22 | width: 200px; 23 | margin: 0 0 1em 0; 24 | transition: all 0.3s; 25 | } 26 | &::before { 27 | content: "\f004"; 28 | font-family: "Font Awesome 5 Free"; 29 | font-style: normal; 30 | font-variant: normal; 31 | text-rendering: auto; 32 | -webkit-font-smoothing: antialiased; 33 | transition: all 0.3s; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/icon/_hatch.less: -------------------------------------------------------------------------------- 1 | .hatch-btn { 2 | color: @black; 3 | border-color: @black; 4 | [data-theme="dark"] &, 5 | &.dark-mode { 6 | .hatch-dark(); 7 | } 8 | 9 | height: 50px; 10 | width: 50px; 11 | 12 | border-radius: 100%; 13 | border: solid 0px; 14 | 15 | background: transparent; 16 | transition: 0.25s ease-in; 17 | 18 | &:hover { 19 | border-right: solid 15px; 20 | transition: 0.5s ease-out; 21 | } 22 | 23 | i { 24 | width: 100%; 25 | height: 100%; 26 | margin-top: 2px; 27 | text-shadow: -2px -2px 5px rgba(255, 255, 255, 0.15), 28 | 2px 2px 10px rgba(0, 0, 0, 0.25); 29 | transition: 0.25s ease-in; 30 | } 31 | } 32 | 33 | .hatch-btn:hover, 34 | .hatch-btn:active { 35 | i { 36 | text-shadow: -2px -2px 5px rgba(255, 255, 255, 0.15), 37 | 7px 2px 8px rgba(0, 0, 0, 0.25); 38 | transform: translateX(-5px) rotateY(-45deg); 39 | transition: 0.5s ease-out; 40 | } 41 | } 42 | .hatch-dark() { 43 | & { 44 | color: @white; 45 | border-color: @white; 46 | } 47 | &:hover { 48 | box-shadow: 6px 0 5px rgba(255, 255, 255, 0.25); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/icon/_icon-btn.less: -------------------------------------------------------------------------------- 1 | .icon-btn { 2 | color: @black; 3 | 4 | [data-theme="dark"] &, 5 | &.dark-mode { 6 | color: @white; 7 | } 8 | 9 | & i { 10 | text-align: center; 11 | } 12 | 13 | &:not(.rounded-btn) { 14 | &.blue-btn, 15 | &.pink-btn, 16 | &.red-btn, 17 | &.green-btn, 18 | &.yellow-btn, 19 | &.orange-btn, 20 | &.purple-btn, 21 | &.black-btn { 22 | color: @white; 23 | } 24 | } 25 | 26 | &.blue-btn, 27 | &.pink-btn, 28 | &.red-btn, 29 | &.green-btn, 30 | &.yellow-btn, 31 | &.orange-btn, 32 | &.purple-btn, 33 | &.black-btn { 34 | color: @white; 35 | } 36 | } 37 | 38 | &.icon-left { 39 | border: none; 40 | 41 | & i { 42 | transform: translateX(-30%); 43 | padding-left: 10px; 44 | } 45 | 46 | &:not(.rounded-btn) { 47 | i { 48 | transform: translateX(-26%); 49 | } 50 | } 51 | } 52 | 53 | &.icon-right { 54 | border: none; 55 | 56 | i { 57 | transform: translateX(36%); 58 | padding-right: 15px; 59 | } 60 | 61 | &:not(.rounded-btn) { 62 | i { 63 | transform: translateX(15%); 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/icon/_like.less: -------------------------------------------------------------------------------- 1 | .like-btn-animate() { 2 | font-weight: 900; 3 | animation: heartbeat 1s linear forwards infinite; 4 | color: #dc143c; 5 | } 6 | 7 | .like-btn { 8 | &:before { 9 | color: #dc143c; 10 | content: "\f004"; 11 | font-family: "Font Awesome 5 Free"; 12 | display: inline-block; 13 | font-style: normal; 14 | font-variant: normal; 15 | text-rendering: auto; 16 | -webkit-font-smoothing: antialiased; 17 | } 18 | &:hover, 19 | &.hovered { 20 | .like-btn-animate(); 21 | } 22 | 23 | &.animated { 24 | .like-btn-animate(); 25 | } 26 | } 27 | 28 | @keyframes heartbeat { 29 | 0% { 30 | transform: scale(1); 31 | } 32 | 50% { 33 | transform: scale(0.5); 34 | text-shadow: 0 0 0 #dc143cf0; 35 | } 36 | 80% { 37 | transform: scale(1.1); 38 | text-shadow: 0 0 0.5rem #dc143cf0; 39 | } 40 | 100% { 41 | transform: scale(1); 42 | text-shadow: 0 0 0.5rem #dc143c00; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/icon/_slide.less: -------------------------------------------------------------------------------- 1 | .icon-slide-btn { 2 | transition: all 0.3s; 3 | position: relative; 4 | i { 5 | position: absolute; 6 | } 7 | .btn-label, 8 | i { 9 | transition: all 0.3s; 10 | display: inline-block; 11 | } 12 | &.icon-up { 13 | i { 14 | top: 100%; 15 | left: 50%; 16 | -webkit-transform: translate3d(-50%, 0, 0); 17 | transform: translate3d(-50%, 0, 0); 18 | } 19 | &:hover, 20 | &:active { 21 | i { 22 | top: 50%; 23 | -webkit-transform: translate3d(-50%, -50%, 0); 24 | transform: translate3d(-50%, -50%, 0); 25 | } 26 | .btn-label { 27 | -webkit-transform: translate3d(0, -200%, 0); 28 | transform: translate3d(0, -200%, 0); 29 | } 30 | } 31 | } 32 | &.icon-down { 33 | i { 34 | top: -100%; 35 | left: 50%; 36 | -webkit-transform: translate3d(-50%, 0, 0); 37 | transform: translate3d(-50%, 0, 0); 38 | } 39 | &:hover, 40 | &:active { 41 | i { 42 | top: 50%; 43 | -webkit-transform: translate3d(-50%, -50%, 0); 44 | transform: translate3d(-50%, -50%, 0); 45 | } 46 | .btn-label { 47 | -webkit-transform: translate3d(0, 200%, 0); 48 | transform: translate3d(0, 200%, 0); 49 | } 50 | } 51 | } 52 | &.icon-left { 53 | padding: 10px 30px; 54 | i { 55 | top: 50%; 56 | left: -50%; 57 | -webkit-transform: translate3d(0, -50%, 0); 58 | transform: translate3d(0, -50%, 0); 59 | } 60 | &:hover, 61 | &:active { 62 | i { 63 | left: 0; 64 | } 65 | .btn-label { 66 | -webkit-transform: translate3d(10px, 0, 0); 67 | transform: translate3d(10px, 0, 0); 68 | } 69 | } 70 | } 71 | &.icon-right { 72 | padding: 10px 30px; 73 | i { 74 | top: 50%; 75 | right: -50%; 76 | -webkit-transform: translate3d(0, -50%, 0); 77 | transform: translate3d(0, -50%, 0); 78 | } 79 | &:hover, 80 | &:active { 81 | i { 82 | right: 0; 83 | } 84 | .btn-label { 85 | -webkit-transform: translate3d(-10px, 0, 0); 86 | transform: translate3d(-10px, 0, 0); 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/components/icon/_star.less: -------------------------------------------------------------------------------- 1 | .star-btn-active() { 2 | font-weight: 900; 3 | color: @yellow; 4 | } 5 | 6 | .star-btn { 7 | color: @black; 8 | 9 | &:before { 10 | content: "\f005"; 11 | font-family: "Font Awesome 5 Free"; 12 | display: inline-block; 13 | font-style: normal; 14 | font-variant: normal; 15 | text-rendering: auto; 16 | -webkit-font-smoothing: antialiased; 17 | } 18 | 19 | &:active, 20 | &.active { 21 | .star-btn-active(); 22 | } 23 | 24 | [data-theme="dark"] &, 25 | &.dark-mode { 26 | &:not(.active) { 27 | color: @white; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/payment/_alipay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.alipay { 3 | background-color: #1678ff; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f642"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_amazon-pay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.amazon-pay { 3 | background-color: #333e48; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f42c"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_apple-pay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.apple-pay { 3 | background-color: #000; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f415"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_bitcoin.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.bitcoin { 3 | background-color: #f7931a; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f379"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_ethereum-pay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.ethereum { 3 | background-color: #003664; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f42e"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_gpay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.gpay { 3 | background-color: #1a73e8; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\e079"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_mastercard.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.mastercard { 3 | background-color: #f1efeb; 4 | color: #000; 5 | 6 | &:after { 7 | color: #000; 8 | content: "\f1f1"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_paypal.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.paypal { 3 | background-color: #1a73e8; 4 | color: #fff; 5 | font-weight: 500; 6 | &.rounded-btn { 7 | &:after { 8 | right: 5px; 9 | } 10 | } 11 | &:after { 12 | color: #fff; 13 | content: "\f1f4"; 14 | right: 0; 15 | } 16 | &:hover { 17 | text-shadow: 0px 0px 3px white; 18 | box-shadow: 0px 0px 5px white; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/payment/_paytm.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.paytm { 3 | background-color: #1a3667; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: url("https://api.iconify.design/simple-icons/paytm.svg?color=%2301b1e4&width=32"); 9 | right: 0; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/payment/_phonepe.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.phonepe { 3 | background-color: #5f259f; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: url("https://api.iconify.design/simple-icons/phonepe.svg?color=white&width=32"); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_stripe.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.stripe { 3 | background-color: #32325d; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1f5"; 9 | font-size: 34px; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/payment/_visa.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.visa { 3 | background-color: #1a73e8; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1f0"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/payment/_wechat-pay.less: -------------------------------------------------------------------------------- 1 | .payment-btn { 2 | &.wechat-pay { 3 | background-color: #04be02; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1d7"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_amazon.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.amazon { 3 | background: linear-gradient(to bottom, #f6da95, #ecb21f); 4 | border: 1px solid; 5 | border-color: #a88734 #9c7e31 #846a29; 6 | color: #111; 7 | &:after { 8 | color: #111; 9 | top: 25%; 10 | content: "\f270"; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/social/_apple.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.apple { 3 | background-color: #fff; 4 | color: #353535; 5 | 6 | &:after { 7 | color: #353535; 8 | content: "\f179"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_bitbucket.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.bitbucket { 3 | background-color: #0349b2; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f171"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_discord.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.discord { 3 | background-color: #7289da; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f392"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_dropbox.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.dropbox { 3 | background-color: rgb(20, 20, 252); 4 | color: #fff; 5 | 6 | &.block-btn { 7 | &:after { 8 | right: 0px !important; 9 | } 10 | } 11 | &:after { 12 | color: white; 13 | content: "\f16b"; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/social/_facebook.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.facebook { 3 | background-color: #3360ff; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f39e"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_flickr.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.flickr { 3 | background-color: #000000; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f16e"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_github.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.github { 3 | background-color: #000000; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f09b"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_gitlab.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.gitlab { 3 | background-color: #e25235; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f296"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_google.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.google { 3 | background-color: #fff; 4 | color: #353535; 5 | 6 | &:after { 7 | color: #ea4335; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f1a0"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_instagram.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.instagram { 3 | background: linear-gradient( 4 | 45deg, 5 | #f09433 0%, 6 | #e6683c 25%, 7 | #dc2743 50%, 8 | #cc2366 75%, 9 | #bc1888 100% 10 | ); 11 | color: #fff; 12 | border: 0px !important; 13 | 14 | &:after { 15 | color: white; 16 | position: absolute; 17 | right: 10px; 18 | top: 20%; 19 | content: "\f16d"; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/social/_linkedin.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.linkedin { 3 | background-color: #0e76a8; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f0e1"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_microsoft.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.microsoft { 3 | background-color: #00acee; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f3ca"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_pinterest.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.pinterest { 3 | background-color: #e60023; 4 | color: #fff; 5 | 6 | &.block-btn { 7 | &:after { 8 | right: 0px !important; 9 | } 10 | } 11 | &:after { 12 | color: white; 13 | content: "\f231"; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/social/_qq.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.qq { 3 | background-color: #eb1923; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: url("https://api.iconify.design/simple-icons/tencentqq.svg?color=%23ffffff&width=23"); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_reddit.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.reddit { 3 | background-color: #ff4500; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f1a1"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_slack.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.slack { 3 | background-color: #4a154b; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f198"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_snapchat.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.snapchat { 3 | background-color: #fffc00; 4 | color: #353535; 5 | 6 | &:after { 7 | color: #353535; 8 | content: "\f2ac"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_spotify.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.spotify { 3 | background-color: #1db954; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1bc"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_steam.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.steam { 3 | background-color: #202329; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1b6"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_telegram.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.telegram { 3 | background-color: #00acee; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f2c6"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_tumblr.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.tumblr { 3 | background-color: #001935; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f173"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_twitter.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.twitter { 3 | background-color: #00acee; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f099"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_vk.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.vk { 3 | background-color: #0077ff; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f189"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_wechat.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.wechat { 3 | background-color: #04be02; 4 | color: #fff; 5 | 6 | &:after { 7 | color: #fff; 8 | content: "\f1d7"; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/social/_weibo.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.weibo { 3 | background-color: #df2029; 4 | color: #fff; 5 | 6 | &:after { 7 | color: white; 8 | position: absolute; 9 | right: 10px; 10 | top: 20%; 11 | content: "\f18a"; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/social/_whatsapp.less: -------------------------------------------------------------------------------- 1 | .social-btn { 2 | &.whatsapp { 3 | background-color: #25d366; 4 | color: #fff; 5 | 6 | &.block-btn { 7 | &:after { 8 | right: 0px !important; 9 | } 10 | } 11 | &:after { 12 | color: white; 13 | 14 | content: "\f232"; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/special/_code-btn.less: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"); 2 | 3 | .code-btn { 4 | font-family: "Source Code Pro", monospace; 5 | background-color: @codeButtonBackground; 6 | color: @codeButtonColor; 7 | display: inline; 8 | position: relative; 9 | text-align: center; 10 | 11 | &:hover, 12 | &:focus { 13 | background: @codeButtonColor; 14 | color: @codeButtonBackground; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/special/_disco.less: -------------------------------------------------------------------------------- 1 | .disco-btn { 2 | background-color: @discobackground; 3 | font-size: 20px; 4 | background-size: 2px 3px; 5 | font-family: "Archivo", sans-serif; 6 | color: @discolight-text; 7 | display: block; 8 | width: 200px; 9 | min-height: 50px; 10 | margin: 30px; 11 | cursor: pointer; 12 | padding: 10px 15px; 13 | border: 3px solid @discoyellow; 14 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discodark-peach, 15 | 20px -20px 0 -3px @discobackground, 20px -20px @discored; 16 | &:hover { 17 | animation: shadow-wave 1s ease infinite; 18 | } 19 | } 20 | 21 | @keyframes shadow-wave { 22 | 0% { 23 | border: 3px solid @discodark-peach; 24 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discored, 25 | 20px -20px 0 -3px @discobackground, 20px -20px @discoyellow; 26 | } 27 | 20% { 28 | border: 3px solid @discored; 29 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discoyellow, 30 | 20px -20px 0 -3px @discobackground, 20px -20px @discodark-peach; 31 | } 32 | 40% { 33 | border: 3px solid @discoyellow; 34 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discodark-peach, 35 | 20px -20px 0 -3px @discobackground, 20px -20px @discored; 36 | } 37 | 60% { 38 | border: 3px solid @discodark-peach; 39 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discored, 40 | 20px -20px 0 -3px @discobackground, 20px -20px @discoyellow; 41 | } 42 | 80% { 43 | bborder: 3px solid @discored; 44 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discoyellow, 45 | 20px -20px 0 -3px @discobackground, 20px -20px @discodark-peach; 46 | } 47 | 100% { 48 | border: 3px solid @discoyellow; 49 | box-shadow: 10px -10px 0 -3px @discobackground, 10px -10px @discodark-peach, 50 | 20px -20px 0 -3px @discobackground, 20px -20px @discored; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/special/_handwritten-btn.less: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap"); 2 | 3 | .handwritten-btn { 4 | font-family: "Architects Daughter", cursive, serif, sans-serif; 5 | 6 | color: @handwrittenPencilColor; 7 | background-color: @handwrittenPaperColor; 8 | 9 | padding: 0.3rem 3.4rem; 10 | 11 | border: 2px solid @handwrittenPencilColor; 12 | border-radius: ~"2% 98% 1% 99% / 93% 15% 85% 7%"; 13 | &.rounded-btn { 14 | border-radius: ~"60px 45px 30px 35px / 37px 30px 45px 60px"; 15 | } 16 | &.block-btn { 17 | border-radius: ~"30px 2px 30% 3px / 4px 10px 3px 30px"; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/special/_neumorphic.less: -------------------------------------------------------------------------------- 1 | .neuColorRule(@color) { 2 | color: @color !important; 3 | background-color: transparent; 4 | } 5 | .neuBtnRule() { 6 | padding: @buttonPadding; 7 | text-align: center; 8 | -webkit-appearance: none; 9 | border: none; 10 | 11 | text-decoration: none; 12 | display: inline-block; 13 | 14 | cursor: pointer; 15 | font-family: inherit; 16 | overflow: hidden; 17 | 18 | &:not(.rounded-btn) { 19 | border-radius: @buttonPadding; 20 | } 21 | 22 | &.blue-btn { 23 | .neuColorRule(@blue); 24 | } 25 | 26 | &.pink-btn { 27 | .neuColorRule(@pink); 28 | } 29 | 30 | &.red-btn { 31 | .neuColorRule(@red); 32 | } 33 | 34 | &.green-btn { 35 | .neuColorRule(@green); 36 | } 37 | 38 | &.yellow-btn { 39 | .neuColorRule(@yellow); 40 | } 41 | 42 | &.orange-btn { 43 | .neuColorRule(@orange); 44 | } 45 | 46 | &.purple-btn { 47 | .neuColorRule(@purple); 48 | } 49 | 50 | &.black-btn { 51 | .neuColorRule(@black); 52 | } 53 | &.white-btn { 54 | .neuColorRule(@lightGray); 55 | } 56 | } 57 | .neu-btn { 58 | .neuBtnRule(); 59 | box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.1), 60 | 4px 4px 8px rgba(0, 0, 0, 0.1); 61 | 62 | &:hover, 63 | &:active, 64 | &:focus { 65 | box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.1), 66 | inset 4px 4px 8px rgba(0, 0, 0, 0.1); 67 | } 68 | } 69 | [data-theme="dark"] .neu-btn { 70 | box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.01), 71 | 4px 4px 8px rgba(0, 0, 0, 0.2); 72 | 73 | &:hover, 74 | &:active, 75 | &:focus { 76 | box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.01), 77 | inset 4px 4px 8px rgba(0, 0, 0, 0.2); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/special/_play-game.less: -------------------------------------------------------------------------------- 1 | .play-game-btn { 2 | min-width: 65px; 3 | height: 60px; 4 | position: relative; 5 | 6 | &.block-btn:before { 7 | content: "Ready Player One"; 8 | padding-left: 56px; 9 | } 10 | 11 | &:after { 12 | content: ""; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | width: 5px; 17 | height: 5px; 18 | box-shadow: 25px 0px #3d3d3d, 25px 5px #3d3d3d, 30px 10px #3d3d3d, 19 | 35px 15px #3d3d3d, 15px 15px #3d3d3d, 20px 15px #3d3d3d, 25px 15px #3d3d3d, 20 | 30px 15px #3d3d3d, 35px 15px #3d3d3d, 40px 15px #3d3d3d, 45px 15px #3d3d3d, 21 | 10px 20px #3d3d3d, 15px 20px #6e6e6e, 20px 20px #a6a6a6, 25px 20px #a6a6a6, 22 | 30px 20px #a6a6a6, 30px 20px #a6a6a6, 35px 20px #a6a6a6, 40px 20px #a6a6a6, 23 | 45px 20px #6e6e6e, 50px 20px #3d3d3d, 5px 25px #3d3d3d, 10px 25px #6e6e6e, 24 | 15px 25px #3d3d3d, 20px 25px #6e6e6e, 25px 25px #a6a6a6, 30px 25px #a6a6a6, 25 | 35px 25px #a6a6a6, 40px 25px #6e6e6e, 45px 25px #9ea1ff, 50px 25px #6e6e6e, 26 | 55px 25px #3d3d3d, 5px 30px #3d3d3d, 10px 30px #3d3d3d, 15px 30px #3d3d3d, 27 | 20px 30px #3d3d3d, 25px 30px #a6a6a6, 30px 30px #a6a6a6, 35px 30px #a6a6a6, 28 | 40px 30px #00ff00, 45px 30px #ffffff, 50px 30px #ff0000, 55px 30px #3d3d3d, 29 | 5px 35px #3d3d3d, 10px 35px #6e6e6e, 15px 35px #3d3d3d, 20px 35px #6e6e6e, 30 | 25px 35px#a6a6a6, 30px 35px #a6a6a6, 35px 35px #a6a6a6, 40px 35px #6e6e6e, 31 | 45px 35px #ffff00, 50px 35px #6e6e6e, 55px 35px#3d3d3d, 5px 40px #3d3d3d, 32 | 10px 40px #6e6e6e, 15px 40px #6e6e6e, 20px 40px #6e6e6e, 25px 40px #3d3d3d, 33 | 30px 40px #3d3d3d, 35px 40px #3d3d3d, 40px 40px #6e6e6e, 45px 40px #6e6e6e, 34 | 50px 40px #6e6e6e, 55px 40px #3d3d3d, 10px 45px #3d3d3d, 15px 45px #3d3d3d, 35 | 20px 45px #3d3d3d, 40px 45px #3d3d3d, 45px 45px #3d3d3d, 50px 45px #3d3d3d; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/special/_rainbow-border.less: -------------------------------------------------------------------------------- 1 | .rainbow-border-btn { 2 | background-image: linear-gradient(#000, #000), 3 | linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b); 4 | background-origin: padding-box, border-box; 5 | background-repeat: no-repeat; 6 | border: 5px solid transparent; 7 | background-position: 0 0, 0% 50%; 8 | background-size: 100% 100%, 200% 200%; 9 | 10 | &:hover { 11 | animation: colorwave 3.6s ease infinite; 12 | } 13 | } 14 | 15 | @keyframes colorwave { 16 | 0% { 17 | background-position: 0 0, 0% 50%; 18 | } 19 | 50% { 20 | background-position: 0 0, 100% 50%; 21 | } 22 | 100% { 23 | background-position: 0 0, 0 50%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/special/_retro.less: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); 2 | 3 | .retro-btn { 4 | background: @retroButtonBackground; 5 | display: inline; 6 | position: relative; 7 | text-align: center; 8 | padding: @buttonPadding; 9 | font-family: "Press Start 2P"; 10 | text-decoration: none; 11 | box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px 12 | @retroShadowColor; 13 | 14 | &:hover, 15 | &:focus { 16 | background: @retroSecButtonBackground; 17 | box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px 0px 18 | @retroShadowColor; 19 | } 20 | 21 | &:active { 22 | box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px 23 | @retroShadowColor; 24 | } 25 | 26 | &:before { 27 | content: ""; 28 | position: absolute; 29 | width: 100%; 30 | height: 100%; 31 | box-sizing: content-box; 32 | top: -@retroOutlineWidth !important; 33 | left: 0; 34 | border-top: @retroOutlineWidth black solid !important; 35 | border-bottom: @retroOutlineWidth black solid !important; 36 | } 37 | 38 | &:after { 39 | content: ""; 40 | position: absolute; 41 | width: 100%; 42 | height: 100%; 43 | box-sizing: content-box; 44 | left: -@retroOutlineWidth !important; 45 | top: 0; 46 | border-left: @retroOutlineWidth black solid !important; 47 | border-right: @retroOutlineWidth black solid !important; 48 | } 49 | 50 | &-reset { 51 | background: @retroResetButtonBackground; 52 | font-family: "Press Start 2P"; 53 | box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px 54 | @retroResetShadowColor; 55 | 56 | &:hover, 57 | &:focus { 58 | background: @retroResetSecButtonBackground; 59 | box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px 60 | 0px @retroResetShadowColor; 61 | } 62 | 63 | &:active { 64 | box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px 65 | @retroResetShadowColor; 66 | } 67 | } 68 | 69 | &-proceed { 70 | background: @retroAltButtonBackground; 71 | font-family: "Press Start 2P"; 72 | box-shadow: inset (-@retroShadowWidth) (-@retroShadowWidth) 0px 0px 73 | @retroAltShadowColor; 74 | 75 | &:hover, 76 | &:focus { 77 | background: @retroSecAltButtonBackground; 78 | box-shadow: inset (-@retroShadowWidth*1.5) (-@retroShadowWidth*1.5) 0px 79 | 0px @retroAltShadowColor; 80 | } 81 | 82 | &:active { 83 | box-shadow: inset @retroShadowWidth @retroShadowWidth 0px 0px 84 | @retroAltShadowColor; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/components/special/_toggle.less: -------------------------------------------------------------------------------- 1 | input[type="radio"].toggle-btn, 2 | input[type="checkbox"].toggle-btn { 3 | padding: 0px !important; 4 | 5 | &:not(.xsmall-btn):before { 6 | margin: 10px; 7 | } 8 | 9 | &.xsmall-btn:before { 10 | margin: 4px 5px 5px; 11 | } 12 | } 13 | 14 | .toggle-btn { 15 | width: @toggleWidth; 16 | height: @toggleHeight; 17 | border-radius: @toggleBorderRadius; 18 | border: 0; 19 | outline: 0; 20 | display: inline-flex; 21 | flex-direction: row; 22 | align-items: center; 23 | position: relative; 24 | &:before, 25 | &:after { 26 | content: ""; 27 | box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2); 28 | } 29 | 30 | &:before { 31 | background-color: @toggleSwitchColor; 32 | border-radius: 50%; 33 | display: inline-block; 34 | height: calc(@toggleWidth / 2.25); 35 | width: calc(@toggleWidth / 2.25); 36 | transition: all 0.5s ease; 37 | transform: @toggleSwitchOffPosition; 38 | } 39 | 40 | &:after { 41 | background-color: @toggleOffBgColor; 42 | width: 100%; 43 | height: 100%; 44 | position: absolute; 45 | transition: background-color 0.5s ease; 46 | transition-delay: 0.2s; 47 | left: 0; 48 | top: 0; 49 | z-index: -1; 50 | } 51 | 52 | &:checked:before { 53 | transform: @toggleSwitchOnPosition; 54 | } 55 | 56 | &:checked:after { 57 | background-color: @toggleOnBgColor; 58 | } 59 | 60 | &.xsmall-btn { 61 | width: @toggleWidthSmall; 62 | height: @toggleHeightSmall; 63 | border-radius: @toggleBorderRadiusSmall; 64 | 65 | &:checked:before { 66 | transform: @toggleSwitchOnPositionSmall; 67 | } 68 | 69 | &:before { 70 | height: calc(@toggleWidthSmall / 2.25); 71 | width: calc(@toggleWidthSmall / 2.25); 72 | transform: @toggleSwitchOffPositionSmall; 73 | margin-top: -1px; 74 | } 75 | 76 | &.toggle-on-btn { 77 | &:before { 78 | transform: @toggleSwitchOnPositionSmall; 79 | } 80 | 81 | &:active:before { 82 | transform: @toggleSwitchOffPositionSmall; 83 | } 84 | } 85 | 86 | .toggle-off-btn { 87 | &:before { 88 | transform: @toggleSwitchOffPositionSmall; 89 | } 90 | &:active:before { 91 | transform: @toggleSwitchOnPositionSmall; 92 | } 93 | } 94 | } 95 | } 96 | 97 | .toggle-on-btn { 98 | &:before { 99 | transform: @toggleSwitchOnPosition; 100 | } 101 | 102 | &:after { 103 | background-color: @toggleOnBgColor; 104 | } 105 | 106 | &:active:before { 107 | transform: @toggleSwitchOffPosition; 108 | } 109 | 110 | &:active:after { 111 | background-color: @toggleOffBgColor; 112 | } 113 | } 114 | 115 | .toggle-off-btn { 116 | &:before { 117 | transform: @toggleSwitchOffPosition; 118 | } 119 | 120 | &:after { 121 | background-color: @toggleOffBgColor; 122 | } 123 | 124 | &:active:before { 125 | transform: @toggleSwitchOnPosition; 126 | } 127 | 128 | &:active:after { 129 | background-color: @toggleOnBgColor; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/components/special/_win95.less: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=VT323&display=swap"); 2 | 3 | .win95-btn { 4 | font-family: "VT323", monospace; 5 | font-size: inherit; 6 | color: black; 7 | background-color: #d4d4d4; 8 | padding: 0.3rem 3.4rem; 9 | border-bottom: 3px solid black; 10 | border-right: 3px solid black; 11 | border-left: 3px solid white; 12 | border-top: 3px solid white; 13 | margin-right: 2.6rem; 14 | box-shadow: 0 0 0 black; 15 | transition: all 0.2s; 16 | 17 | &:last-child { 18 | margin: 0; 19 | } 20 | 21 | &:hover { 22 | box-shadow: 0.2rem 0.2rem 0 black; 23 | transform: translate(-0.2rem, -0.2rem); 24 | } 25 | 26 | &:active { 27 | box-shadow: 0 0 0 black; 28 | transform: translate(0, 0); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/styles/_click.less: -------------------------------------------------------------------------------- 1 | .click-btn { 2 | box-shadow: 0px 5px 0px @lightGray; 3 | 4 | &:focus { 5 | box-shadow: 0px 5px 0px @lightGray; 6 | } 7 | 8 | &:active { 9 | transform: translateY(3px); 10 | box-shadow: 0px 2.5px 0px @lightGray; 11 | } 12 | 13 | &.blue-btn { 14 | &:hover { 15 | .bc(@darkBlue); 16 | } 17 | } 18 | 19 | &.pink-btn { 20 | &:hover { 21 | .bc(@darkPink); 22 | } 23 | } 24 | 25 | &.green-btn { 26 | &:hover { 27 | .bc(@darkGreen); 28 | } 29 | } 30 | 31 | &.yellow-btn { 32 | &:hover { 33 | .bc(@darkYellow); 34 | } 35 | } 36 | 37 | &.orange-btn { 38 | &:hover { 39 | .bc(@darkOrange); 40 | } 41 | } 42 | 43 | &.red-btn { 44 | &:hover { 45 | .bc(@darkRed); 46 | } 47 | } 48 | 49 | &.purple-btn { 50 | &:hover { 51 | .bc(@darkPurple); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/styles/_dashed.less: -------------------------------------------------------------------------------- 1 | .borderRule(@color) { 2 | border: dashed 2px @color; 3 | color: @color !important; 4 | } 5 | 6 | .dashed-btn { 7 | background-color: transparent; 8 | 9 | &.blue-btn { 10 | .borderRule(@blue); 11 | } 12 | &.pink-btn { 13 | .borderRule(@pink); 14 | } 15 | 16 | &.red-btn { 17 | .borderRule(@red); 18 | } 19 | 20 | &.green-btn { 21 | .borderRule(@green); 22 | } 23 | 24 | &.yellow-btn { 25 | .borderRule(@yellow); 26 | } 27 | 28 | &.orange-btn { 29 | .borderRule(@orange); 30 | } 31 | 32 | &.purple-btn { 33 | .borderRule(@purple); 34 | } 35 | 36 | &.black-btn { 37 | .borderRule(@black); 38 | 39 | [data-theme="dark"] &, 40 | &.dark-mode { 41 | .borderRule(@white); 42 | } 43 | } 44 | 45 | &.white-btn { 46 | border: dashed 2px @whiteBorder; 47 | color: @darkText !important; 48 | 49 | [data-theme="dark"] &, 50 | &.dark-mode { 51 | .borderRule(@white); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/components/styles/_disabled.less: -------------------------------------------------------------------------------- 1 | .disabled-btn { 2 | opacity: 0.55; 3 | cursor: not-allowed; 4 | pointer-events: none; 5 | -webkit-touch-callout: none; 6 | -webkit-user-select: none; 7 | -khtml-user-select: none; 8 | -moz-user-select: none; 9 | -ms-user-select: none; 10 | user-select: none; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/styles/_glossy-btn.less: -------------------------------------------------------------------------------- 1 | .glossy-btn { 2 | border: none; 3 | border-radius: 50px; 4 | padding: 5px 20px; 5 | position: relative; 6 | transition: all 0.2s; 7 | &:hover { 8 | box-shadow: 0 2px 1px rgba(grey, 0.3); 9 | } 10 | 11 | &:after { 12 | border: 5px solid rgba(#fff, 0.5); 13 | content: ""; 14 | height: 120%; 15 | left: -20%; 16 | position: absolute; 17 | top: 0; 18 | transition: top 114ms; 19 | width: 140%; 20 | } 21 | &.white-btn:after { 22 | background: rgba(#ddd, 0.4); 23 | } 24 | 25 | &:active { 26 | &:after { 27 | top: -20%; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/styles/_glow.less: -------------------------------------------------------------------------------- 1 | .glow-btn { 2 | border: 2px solid; 3 | color: @darkText !important; 4 | transition: all 0.5s ease; 5 | 6 | .glow(@color) { 7 | border-color: @color; 8 | background-color: rgba(@color, 0.2); 9 | &:hover { 10 | background-color: rgba(@color, 0.3); 11 | box-shadow: inset 0px 0px 10px 3px @color, 0px 0px 10px 3px @color; 12 | border-color: @black; 13 | } 14 | } 15 | 16 | .darkMode() { 17 | color: @white !important; 18 | } 19 | 20 | [data-theme="dark"] &, 21 | &.dark-mode { 22 | .darkMode(); 23 | } 24 | 25 | &.blue-btn { 26 | .glow(@glowBlue); 27 | } 28 | 29 | &.green-btn { 30 | .glow(@glowGreen); 31 | } 32 | 33 | &.red-btn { 34 | .glow(@glowRed); 35 | } 36 | 37 | &.purple-btn { 38 | .glow(@glowPurple); 39 | } 40 | 41 | &.orange-btn { 42 | .glow(@glowOrange); 43 | } 44 | 45 | &.yellow-btn { 46 | .glow(@glowYellow); 47 | } 48 | 49 | &.pink-btn { 50 | .glow(@glowPink); 51 | } 52 | 53 | &.black-btn { 54 | .glow(@glowBlack); 55 | 56 | [data-theme="dark"] &, 57 | &.dark-mode { 58 | .glow(@glowWhite); 59 | } 60 | } 61 | 62 | &.white-btn { 63 | .glow(@glowWhite); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/styles/_gradient.less: -------------------------------------------------------------------------------- 1 | .gradient-btn { 2 | border: none; 3 | outline: none; 4 | background-size: 200% auto; 5 | transition: 0.5s; 6 | } 7 | .gradient-btn:hover { 8 | background-position: right center; 9 | } 10 | .gradient-btn.pink-btn { 11 | background-image: linear-gradient( 12 | to right, 13 | @pink 0%, 14 | @gradientPink 51%, 15 | @pink 100% 16 | ); 17 | box-shadow: 0px 2px 2px @pink; 18 | 19 | &:hover { 20 | box-shadow: 0px 4px 2px @gradientPink; 21 | } 22 | } 23 | .gradient-btn.blue-btn { 24 | background-image: linear-gradient( 25 | to right, 26 | @blue 0%, 27 | @gradientBlue 51%, 28 | @blue 100% 29 | ); 30 | box-shadow: 0px 2px 2px @blue; 31 | 32 | &:hover { 33 | box-shadow: 0px 4px 2px @gradientBlue; 34 | } 35 | } 36 | .gradient-btn.red-btn { 37 | background-image: linear-gradient( 38 | to right, 39 | @red 0%, 40 | @gradientRed 51%, 41 | @red 100% 42 | ); 43 | box-shadow: 0px 2px 2px @red; 44 | 45 | &:hover { 46 | box-shadow: 0px 4px 2px @gradientRed; 47 | } 48 | } 49 | .gradient-btn.green-btn { 50 | background-image: linear-gradient( 51 | to right, 52 | @green 0%, 53 | @gradientGreen 51%, 54 | @green 100% 55 | ); 56 | box-shadow: 0px 2px 2px @green; 57 | 58 | &:hover { 59 | box-shadow: 0px 4px 2px @gradientGreen; 60 | } 61 | } 62 | .gradient-btn.yellow-btn { 63 | background-image: linear-gradient( 64 | to right, 65 | @yellow 0%, 66 | @gradientYellow 51%, 67 | @yellow 100% 68 | ); 69 | box-shadow: 0px 2px 2px @boxShadowYellow; 70 | 71 | &:hover { 72 | box-shadow: 0px 4px 2px @gradientYellow; 73 | } 74 | } 75 | .gradient-btn.orange-btn { 76 | background-image: linear-gradient( 77 | to right, 78 | @orange 0%, 79 | @gradientOrange 51%, 80 | @orange 100% 81 | ); 82 | box-shadow: 0px 2px 2px @orange; 83 | 84 | &:hover { 85 | box-shadow: 0px 4px 2px @gradientOrange; 86 | } 87 | } 88 | .gradient-btn.purple-btn { 89 | background-image: linear-gradient( 90 | to right, 91 | @purple 0%, 92 | @gradientPurple 51%, 93 | @purple 100% 94 | ); 95 | box-shadow: 0px 2px 2px @purple; 96 | 97 | &:hover { 98 | box-shadow: 0px 4px 2px @gradientPurple; 99 | } 100 | } 101 | .gradient-btn.black-btn { 102 | background-image: linear-gradient( 103 | to right, 104 | @diffblack 0%, 105 | @black 51%, 106 | @diffblack 100% 107 | ); 108 | box-shadow: 0px 2px 2px @diffblack; 109 | 110 | &:hover { 111 | box-shadow: 0px 4px 2px @black; 112 | } 113 | } 114 | .gradient-btn.white-btn { 115 | background-image: linear-gradient( 116 | to right, 117 | @diffwhite 0%, 118 | @gradientwhite 51%, 119 | @diffwhite 100% 120 | ); 121 | box-shadow: 0px 2px 2px @boxShadowWhite; 122 | 123 | &:hover { 124 | box-shadow: 0px 4px 2px @gradientwhite; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/components/styles/_key.less: -------------------------------------------------------------------------------- 1 | .btnVariant(@color, @keyHoverColor, @keyBoxColor) { 2 | border-top: 2px solid @color; 3 | background-color: @color; 4 | 5 | box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor; 6 | -moz-box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor; 7 | -webkit-box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor; 8 | 9 | &:active { 10 | top: 10px; 11 | background-color: @color; 12 | 13 | -webkit-box-shadow: inset 0 1px 0 @color, inset 0 -3px 0 @keyHoverColor; 14 | -moz-box-shadow: inset 0 1px 0 @color, inset 0 -3pxpx 0 @keyHoverColor; 15 | box-shadow: inset 0 1px 0 @color, inset 0 -3px 0 @keyHoverColor; 16 | } 17 | } 18 | 19 | .key-btn { 20 | border: none; 21 | outline: none; 22 | display: inline-block; 23 | background-color: transparent; 24 | font-size: 1.5rem; 25 | font-weight: bolder; 26 | text-decoration: none; 27 | padding: 15px 25px; 28 | border-radius: 4px; 29 | position: relative; 30 | 31 | &:not(.yellow-btn) { 32 | color: white; 33 | } 34 | 35 | &:active { 36 | outline: none; 37 | top: 2px; 38 | border-top: 2px solid @cola; 39 | } 40 | 41 | &:after { 42 | height: 103%; 43 | width: 103%; 44 | padding: 4px; 45 | position: absolute; 46 | bottom: -15px; 47 | left: -4px; 48 | z-index: -1; 49 | background-color: @cola; 50 | } 51 | 52 | &.pink-btn { 53 | .btnVariant(@pink, @keyBoxPink, @keyBoxPink); 54 | } 55 | 56 | &.blue-btn { 57 | .btnVariant(@blue, @keyBoxBlue, @keyBoxBlue); 58 | } 59 | 60 | &.red-btn { 61 | .btnVariant(@red, @keyBoxRed, @keyBoxRed); 62 | } 63 | 64 | &.green-btn { 65 | .btnVariant(@green, @keyBoxGreen, @keyBoxGreen); 66 | } 67 | 68 | &.yellow-btn { 69 | .btnVariant(@yellow, @keyBoxYellow, @keyBoxYellow); 70 | } 71 | 72 | &.orange-btn { 73 | .btnVariant(@orange, @keyBoxOrange, @keyBoxOrange); 74 | } 75 | 76 | &.purple-btn { 77 | .btnVariant(@purple, @keyBoxPurple, @keyBoxPurple); 78 | } 79 | 80 | &.black-btn { 81 | .btnVariant(@diffblack, @keyBoxBlack, @keyBoxBlack); 82 | } 83 | 84 | &.white-btn { 85 | .btnVariant(@diffwhite, @keyBoxWhite, @keyBoxWhite); 86 | } 87 | 88 | &.rounded-btn { 89 | border-radius: 30px; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/components/styles/_neon-border.less: -------------------------------------------------------------------------------- 1 | .neon-border-btn { 2 | .neon(@col) { 3 | color: @col; 4 | background-color: @col; 5 | background: transparent; 6 | box-shadow: inset 0 0 8px 0 @col, 0 0 11px 0 @col; 7 | transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; 8 | border: @col solid 2px; 9 | text-shadow: 0 0 0.05px @white, 0 0 0.3px currentColor; 10 | &:hover { 11 | background-color: @col; 12 | box-shadow: @col; 13 | text-shadow: none; 14 | } 15 | } 16 | 17 | [data-theme="dark"] &, 18 | &.dark-mode:not(.yellow-btn), 19 | &:hover:not(.white-btn):not(.yellow-btn) { 20 | color: @white !important; 21 | } 22 | 23 | &.green-btn { 24 | .neon(@neonGreen); 25 | } 26 | 27 | &.blue-btn { 28 | .neon(@neonBlue); 29 | } 30 | 31 | &.red-btn { 32 | .neon(@neonRed); 33 | } 34 | 35 | &.purple-btn { 36 | .neon(@neonPurple); 37 | } 38 | 39 | &.orange-btn { 40 | .neon(@neonOrange); 41 | } 42 | 43 | &.yellow-btn { 44 | .neon(@neonYellow); 45 | &:hover { 46 | color: @black !important; 47 | } 48 | } 49 | 50 | &.pink-btn { 51 | .neon(@neonPink); 52 | } 53 | 54 | &.black-btn { 55 | .neon(@neonBlack); 56 | &:hover { 57 | color: @lightText !important; 58 | } 59 | [data-theme="dark"] &, 60 | &.dark-mode { 61 | .neon(@neonWhite); 62 | &:hover { 63 | color: @black !important; 64 | } 65 | } 66 | } 67 | 68 | &.white-btn { 69 | .neon(@neonWhite); 70 | &:hover { 71 | color: @darkText !important; 72 | } 73 | [data-theme="dark"] &, 74 | &.dark-mode { 75 | .neon(@neonWhite); 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/styles/_outline.less: -------------------------------------------------------------------------------- 1 | .outlineRule(@color) { 2 | border-color: @color; 3 | color: @color !important; 4 | } 5 | 6 | .outlineDarkMode() { 7 | color: #fff !important; 8 | border-color: #fff !important; 9 | } 10 | 11 | .outline-btn { 12 | background-color: transparent; 13 | border: 1px solid; 14 | 15 | &.blue-btn { 16 | .outlineRule(@blue); 17 | } 18 | &.pink-btn { 19 | .outlineRule(@pink); 20 | } 21 | 22 | &.red-btn { 23 | .outlineRule(@red); 24 | } 25 | 26 | &.green-btn { 27 | .outlineRule(@green); 28 | } 29 | 30 | &.yellow-btn { 31 | .outlineRule(@yellow); 32 | } 33 | 34 | &.orange-btn { 35 | .outlineRule(@orange); 36 | } 37 | 38 | &.purple-btn { 39 | .outlineRule(@purple); 40 | } 41 | 42 | &.black-btn { 43 | .outlineRule(@black); 44 | 45 | [data-theme="dark"] &, 46 | &.dark-mode { 47 | .outlineDarkMode(); 48 | } 49 | } 50 | 51 | &.white-btn { 52 | border-color: @whiteBorder; 53 | color: @whiteBorderText !important; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/styles/_rounded-bottom.less: -------------------------------------------------------------------------------- 1 | .rounded-bottom-btn { 2 | border-radius: 0 0 24px 24px; 3 | transition: all 0.2s; 4 | &:hover { 5 | box-shadow: 0 10px 10px rgba(@black, 0.3); 6 | } 7 | &:active { 8 | box-shadow: 0 4px 5px rgba(@black, 0.5); 9 | } 10 | &.rounded-btn.rd-tl-btn { 11 | border-radius: 0 0 34px 34px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/styles/_rounded-diagonal-tl.less: -------------------------------------------------------------------------------- 1 | .rounded-diagonal-tl-btn { 2 | border-radius: 24px 4px; 3 | transition: all 0.2s; 4 | &:hover { 5 | box-shadow: 0 10px 10px rgba(@black, 0.3); 6 | } 7 | &:active { 8 | box-shadow: 0 4px 5px rgba(@black, 0.5); 9 | } 10 | &.rounded-btn.rd-tl-btn { 11 | border-radius: 34px 14px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/styles/_rounded-diagonal-tr.less: -------------------------------------------------------------------------------- 1 | .rounded-diagonal-tr-btn { 2 | border-radius: 4px 24px; 3 | transition: all 0.2s; 4 | &:hover { 5 | box-shadow: 0 10px 10px rgba(@black, 0.3); 6 | } 7 | &:active { 8 | box-shadow: 0 4px 5px rgba(@black, 0.5); 9 | } 10 | &.rounded-btn.rd-tr-btn { 11 | border-radius: 14px 34px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/styles/_rounded-top.less: -------------------------------------------------------------------------------- 1 | .rounded-top-btn { 2 | border-radius: 24px 24px 0 0; 3 | transition: all 0.2s; 4 | &:hover { 5 | box-shadow: 0 10px 10px rgba(@black, 0.3); 6 | } 7 | &:active { 8 | box-shadow: 0 4px 5px rgba(@black, 0.5); 9 | } 10 | &.rounded-btn.rd-top-btn { 11 | border-radius: 14px 34px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/styles/_shadow-3d.less: -------------------------------------------------------------------------------- 1 | .shadow-3d-btn { 2 | position: relative; 3 | overflow: visible; 4 | border-style: solid; 5 | border-width: 2px; 6 | transform-origin: bottom; 7 | transition: all 100ms; 8 | box-shadow: none; 9 | 10 | &:before { 11 | position: absolute; 12 | content: ""; 13 | z-index: -1; 14 | bottom: 1px; 15 | left: -15px; 16 | height: 20%; 17 | width: 100%; 18 | background-color: fade(@black, 60%); 19 | filter: blur(4px); 20 | transform: skewX(60deg); 21 | } 22 | 23 | &.rounded-btn::before { 24 | border-radius: 50%; 25 | } 26 | 27 | &:active, 28 | &:focus { 29 | box-shadow: none; 30 | } 31 | 32 | .variant(@color,@hoverColor) { 33 | border-color: @hoverColor; 34 | 35 | &:before { 36 | background-color: fade(@color, 60%); 37 | } 38 | 39 | &:hover, 40 | &:focus, 41 | &:active { 42 | border-color: lighten(@color, 40%); 43 | } 44 | } 45 | 46 | &.blue-btn { 47 | .variant(@darkBlue, @blue); 48 | } 49 | 50 | &.pink-btn { 51 | .variant(@darkPink, @pink); 52 | } 53 | 54 | &.green-btn { 55 | .variant(@darkGreen, @green); 56 | } 57 | 58 | &.yellow-btn { 59 | .variant(@darkYellow, @yellow); 60 | } 61 | 62 | &.orange-btn { 63 | .variant(@darkOrange, @orange); 64 | } 65 | 66 | &.red-btn { 67 | .variant(@darkRed, @red); 68 | } 69 | 70 | &.purple-btn { 71 | .variant(@darkPurple, @purple); 72 | } 73 | 74 | &.white-btn { 75 | .variant(@black, @black); 76 | } 77 | 78 | &.black-btn { 79 | .variant(@black, @black); 80 | } 81 | 82 | [data-theme="dark"] &, 83 | &.dark-mode { 84 | &, 85 | &:before, 86 | &:after { 87 | background-color: lighten(@black, 50%); 88 | text-shadow: 0px 0px 4px @black; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/components/styles/_shadow.less: -------------------------------------------------------------------------------- 1 | .shadow-btn { 2 | .shadow(@color) { 3 | box-shadow: 0 8px 25px -8px @color; 4 | background-color: @color; 5 | } 6 | &.blue-btn { 7 | .shadow(@blue); 8 | } 9 | &.pink-btn { 10 | .shadow(@pink); 11 | } 12 | &.red-btn { 13 | .shadow(@red); 14 | } 15 | &.green-btn { 16 | .shadow(@green); 17 | } 18 | &.yellow-btn { 19 | .shadow(@yellow); 20 | } 21 | &.orange-btn { 22 | .shadow(@orange); 23 | } 24 | &.purple-btn { 25 | .shadow(@purple); 26 | } 27 | &.black-btn { 28 | .shadow(@black); 29 | } 30 | &.white-btn { 31 | .shadow(@white); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/styles/_smooth-shadow.less: -------------------------------------------------------------------------------- 1 | .smooth-shadow-btn { 2 | background-color: @white; 3 | color: @black; 4 | border-style: solid; 5 | border-width: 1px; 6 | transition: all 100ms; 7 | 8 | .variant(@color,@hoverColor) { 9 | border-color: @hoverColor; 10 | box-shadow: 0px 5px 4px fade(@color, 20%); 11 | color: @color; 12 | 13 | &:hover { 14 | color: @hoverColor; 15 | } 16 | 17 | &:focus { 18 | box-shadow: 0px 5px 4px fade(@color, 40%); 19 | } 20 | 21 | &:active { 22 | transform: translateY(3px); 23 | box-shadow: 0px 2.5px 2px fade(@color, 40%); 24 | } 25 | } 26 | 27 | &.blue-btn { 28 | .variant(@darkBlue, @blue); 29 | } 30 | 31 | &.pink-btn { 32 | .variant(@darkPink, @pink); 33 | } 34 | 35 | &.green-btn { 36 | .variant(@darkGreen, @green); 37 | } 38 | 39 | &.yellow-btn { 40 | .variant(@darkYellow, @yellow); 41 | } 42 | 43 | &.orange-btn { 44 | .variant(@darkOrange, @orange); 45 | } 46 | 47 | &.red-btn { 48 | .variant(@darkRed, @red); 49 | } 50 | 51 | &.purple-btn { 52 | .variant(@darkPurple, @purple); 53 | } 54 | 55 | &.white-btn { 56 | .variant(@black, @black); 57 | } 58 | 59 | &.black-btn { 60 | .variant(@black, @black); 61 | } 62 | 63 | [data-theme="dark"] &, 64 | &.dark-mode { 65 | &, 66 | &:before, 67 | &:after { 68 | background-color: lighten(@black, 50%); 69 | text-shadow: 0px 0px 4px @black; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/styles/_stack.less: -------------------------------------------------------------------------------- 1 | .layer(@stackHeight, @stackWidth, @stackRotate, @stackSkew, @stackBgColor) { 2 | content: ""; 3 | height: @stackHeight; 4 | width: @stackWidth; 5 | border-radius: inherit; 6 | background: @stackBgColor; 7 | position: absolute; 8 | transform: rotate(@stackRotate) skew(@stackSkew) translate(-10px, 10px); 9 | } 10 | 11 | .design_logic(@stackBgColor, @stackHeight, @stackWidth) { 12 | // THE DESIGN LOGIC START 13 | background-color: @stackBgColor; 14 | height: @stackHeight; 15 | width: @stackWidth; 16 | transform: rotate(@stackRotate) skew(@stackSkew); 17 | transition: all 0.5s; 18 | opacity: 0.95; 19 | justify-content: center; 20 | align-items: center; 21 | padding-bottom: 10px; 22 | overflow: visible; 23 | &:before, 24 | &:after { 25 | background-color: @stackBgColor; 26 | border-radius: inherit; 27 | content: ""; 28 | transition: all 0.5s; 29 | display: block; 30 | width: 100%; 31 | height: 100%; 32 | position: absolute; 33 | } 34 | &:before { 35 | opacity: 0.95; 36 | z-index: -1; 37 | } 38 | &:after { 39 | z-index: -2; 40 | opacity: 0.3; 41 | top: 0; 42 | } 43 | &:hover { 44 | transform: rotate(-30deg) skew(25deg) translate(15px, -15px); 45 | &:after { 46 | transform: translate(-15px, 15px); 47 | } 48 | } 49 | // THE DESIGN LOGIC END 50 | } 51 | 52 | .colors_logic(@stackHeight, @stackWidth) { 53 | &.pink-btn { 54 | @stackBgColor: @darkPink; 55 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 56 | } 57 | 58 | &.blue-btn { 59 | @stackBgColor: @darkBlue; 60 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 61 | } 62 | 63 | &.green-btn { 64 | @stackBgColor: @darkGreen; 65 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 66 | } 67 | 68 | &.yellow-btn { 69 | @stackBgColor: @darkYellow; 70 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 71 | } 72 | 73 | &.orange-btn { 74 | @stackBgColor: @darkOrange; 75 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 76 | } 77 | 78 | &.red-btn { 79 | @stackBgColor: @darkRed; 80 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 81 | } 82 | 83 | &.purple-btn { 84 | @stackBgColor: @darkPurple; 85 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 86 | } 87 | &.black-btn { 88 | @stackBgColor: @black; 89 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 90 | } 91 | &.white-btn { 92 | @stackBgColor: @white; 93 | color: #000; 94 | &:before, 95 | &:after { 96 | border: #000 solid 2px !important; 97 | } 98 | .design_logic(@stackBgColor, @stackHeight, @stackWidth); 99 | } 100 | } 101 | 102 | .stackDarkMode () { 103 | &:before, 104 | &:after { 105 | border: none !important; 106 | } 107 | } 108 | 109 | .stack-btn { 110 | padding: 10px 0 20px 0; 111 | height: 90%; 112 | width: 90%; 113 | display: inline-flex; 114 | transform: translateY(30px); 115 | background-color: inherit; 116 | justify-content: center; 117 | align-items: center; 118 | font-size: 10px; 119 | position: relative; 120 | border: none; 121 | opacity: 1; 122 | .colors_logic(@stackHeight, @stackWidth); 123 | 124 | &.block-btn { 125 | display: flex; 126 | font-size: 25px; 127 | margin: 2rem auto; 128 | @stackRotate: -30deg; 129 | @stackSkew: 25deg; 130 | @stackHeight: 40px; 131 | @stackWidth: 3 * @stackHeight; 132 | .colors_logic(@stackHeight, @stackWidth); 133 | } 134 | 135 | &.white-btn { 136 | [data-theme="dark"] &, 137 | &.dark-mode { 138 | .stackDarkMode(); 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/components/styles/_striped.less: -------------------------------------------------------------------------------- 1 | .stripeRule(@color) { 2 | border: solid 2px @color; 3 | color: black !important; 4 | background-image: repeating-linear-gradient( 5 | 45deg, 6 | @color, 7 | @color 10px, 8 | rgba(0, 0, 0, 0.15) 10px, 9 | rgba(0, 0, 0, 0.15) 20px 10 | ); 11 | } 12 | 13 | .striped-btn { 14 | &.blue-btn { 15 | .stripeRule(@blue); 16 | } 17 | &.pink-btn { 18 | .stripeRule(@pink); 19 | } 20 | 21 | &.red-btn { 22 | .stripeRule(@red); 23 | } 24 | 25 | &.green-btn { 26 | .stripeRule(@green); 27 | } 28 | 29 | &.yellow-btn { 30 | .stripeRule(@yellow); 31 | } 32 | 33 | &.orange-btn { 34 | .stripeRule(@orange); 35 | } 36 | 37 | &.purple-btn { 38 | .stripeRule(@purple); 39 | } 40 | 41 | &.black-btn { 42 | border: solid 2px black; 43 | color: white !important; 44 | background-image: repeating-linear-gradient( 45 | 45deg, 46 | black, 47 | black 10px, 48 | rgba(255, 255, 255, 0.15) 10px, 49 | rgba(255, 255, 255, 0.15) 20px 50 | ); 51 | } 52 | 53 | &.white-btn { 54 | .stripeRule(@white); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/styles/_xlarge.less: -------------------------------------------------------------------------------- 1 | .xlarge-btn { 2 | font-size: 4rem; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/styles/_xsmall.less: -------------------------------------------------------------------------------- 1 | .xsmall-btn { 2 | font-size: 0.6rem; 3 | padding: 5px !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/sbuttons.less: -------------------------------------------------------------------------------- 1 | @import "_variables.less"; 2 | @import "components/_basic.less"; 3 | @import "components/_hover.less"; 4 | @import "components/_styles.less"; 5 | @import "components/_animated.less"; 6 | @import "components/_icon.less"; 7 | @import "components/_social.less"; 8 | @import "components/_payment.less"; 9 | @import "components/_special.less"; 10 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "animate.css": "^4.1.1", 10 | "prism-react-renderer": "^1.3.1", 11 | "react": "^17.0.2", 12 | "react-copy-to-clipboard": "^5.0.4", 13 | "react-dark-mode-toggle": "^0.2.0", 14 | "react-dom": "^17.0.2", 15 | "react-helmet": "^6.1.0", 16 | "react-icons": "^4.3.1", 17 | "react-router-dom": "^6.2.1", 18 | "react-scripts": "5.0.0", 19 | "react-toastify": "^8.1.1", 20 | "use-dark-mode-hook": "^1.2.6", 21 | "web-vitals": "^2.1.4" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "autoprefixer": "^10.4.2", 49 | "postcss": "^8.4.6", 50 | "tailwindcss": "^3.0.22" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /website/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /website/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/website/public/favicon.png -------------------------------------------------------------------------------- /website/public/images/logo-colored.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/website/public/images/logo-colored.png -------------------------------------------------------------------------------- /website/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/website/public/images/logo.png -------------------------------------------------------------------------------- /website/public/images/projects/grammarly-ghost.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/website/public/images/projects/grammarly-ghost.jpg -------------------------------------------------------------------------------- /website/public/images/projects/uuid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sButtons/sbuttons/f8f5404b20ca1bbe49e3c80a0d1061c0d865d92c/website/public/images/projects/uuid.png -------------------------------------------------------------------------------- /website/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | sButtons 15 | 16 | 17 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /website/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "sButtons", 3 | "name": "Simple and creative buttons", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "images/logo.png", 12 | "type": "image/png", 13 | "sizes": "500x122" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /website/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /website/src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' 3 | import Documentation from './pages/Documentation' 4 | import Examples from './pages/Examples' 5 | import Home from './pages/Home' 6 | import Projects from './pages/Projects' 7 | import vars from './vars' 8 | import NotFound from './pages/404' 9 | 10 | function App () { 11 | return ( 12 | 13 | 14 | } /> 15 | } /> 16 | } /> 17 | } /> 18 | } /> 19 | 20 | 21 | ) 22 | } 23 | 24 | export default App -------------------------------------------------------------------------------- /website/src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CopyToClipboard from 'react-copy-to-clipboard' 3 | import { toast } from 'react-toastify' 4 | import { FiCopy } from 'react-icons/fi' 5 | 6 | function Button ({classes, text, htmlContent}) { 7 | function getCopyClasses(classes) { 8 | classes = classes.trim() 9 | return "." + classes.replaceAll(new RegExp(/\s+/g), ".") 10 | } 11 | 12 | function showToast () { 13 | toast.success('Copied!', { 14 | className: 'dark:bg-gray-800', 15 | position: "top-right", 16 | autoClose: 3000, 17 | hideProgressBar: false, 18 | closeOnClick: false, 19 | pauseOnHover: false, 20 | draggable: false, 21 | progress: undefined, 22 | }) 23 | } 24 | 25 | const copyClasses = classes ? getCopyClasses(classes) : "" 26 | 27 | function removePeriodsOnCopy (codeWithPeriods) { 28 | classes.replace('.', " ") 29 | return classes 30 | }; 31 | 32 | return ( 33 |
34 | 38 | 39 | 40 | 41 | {copyClasses} 42 | 43 | 44 |
45 | ) 46 | } 47 | 48 | export default Button -------------------------------------------------------------------------------- /website/src/components/ButtonExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ButtonSection from './ButtonSection' 3 | 4 | function ButtonExample ({ 5 | type: {shouldHaveRoundedType, shouldHaveBlockType, usesColors, usesText}, 6 | button: {classes = "", htmlContent = "", label = "", text = ""} 7 | }) { 8 | 9 | return ( 10 |
11 | {label.length >= 1 &&

{label}

} 12 |
13 | 14 | { shouldHaveRoundedType && 15 | 16 | } 17 | { shouldHaveBlockType && 18 | 19 | } 20 |
21 |
22 | ) 23 | } 24 | 25 | export default ButtonExample -------------------------------------------------------------------------------- /website/src/components/ButtonSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import buttonColors from '../data/button-colors.json' 3 | import Button from './Button' 4 | 5 | function ButtonSection ({title, text, classes, htmlContent = "", usesColors = true, usesText = true}) { 6 | classes = "sbtn " + classes 7 | 8 | return ( 9 |
10 |

{title}

11 |
12 | {usesColors && buttonColors.map((color, index) => { 13 | const buttonClasses = `${classes} ${color}` 14 | return
18 |
19 | ) 20 | } 21 | 22 | export default ButtonSection -------------------------------------------------------------------------------- /website/src/components/Code.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Highlight, { defaultProps } from "prism-react-renderer" 3 | import okaidia from "prism-react-renderer/themes/okaidia" 4 | import {CopyToClipboard} from 'react-copy-to-clipboard' 5 | import { FiCopy } from 'react-icons/fi' 6 | import { toast } from 'react-toastify' 7 | 8 | 9 | function Code ({code, language, className=""}) { 10 | 11 | function showToast () { 12 | toast.success('Copied!', { 13 | className: 'dark:bg-gray-800', 14 | position: "top-right", 15 | autoClose: 3000, 16 | hideProgressBar: false, 17 | closeOnClick: false, 18 | pauseOnHover: false, 19 | draggable: false, 20 | progress: undefined, 21 | }) 22 | } 23 | 24 | const classes = className 25 | 26 | return ( 27 | 28 | {({ className, style, tokens, getLineProps, getTokenProps }) => ( 29 |
30 | 
31 |                 {tokens.map((line, i) => (
32 |                     

33 |                         {line.map((token, key) => (
34 |                         
35 |                         ))}
36 |                     

37 |                     ))}
38 |
39 | 40 | 43 | 44 |
45 | )} 46 | 47 | ) 48 | } 49 | 50 | export default Code -------------------------------------------------------------------------------- /website/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-target-blank */ 2 | import React from 'react' 3 | import { AiFillHeart } from 'react-icons/ai' 4 | import { FiGithub, FiInstagram, FiLinkedin, FiTwitter } from 'react-icons/fi' 5 | 6 | function Footer () { 7 | return ( 8 | 30 | ) 31 | } 32 | 33 | export default Footer 34 | -------------------------------------------------------------------------------- /website/src/components/Header.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-target-blank */ 2 | /* eslint-disable jsx-a11y/anchor-is-valid */ 3 | import React from 'react' 4 | import { Link } from 'react-router-dom' 5 | import { FiCoffee, FiGithub, FiMoreVertical } from 'react-icons/fi' 6 | import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook' 7 | import MenuToggler from './MenuToggler' 8 | import vars from '../vars' 9 | 10 | function Header({activePage = null, showMenuButton = false}) { 11 | const [isDarkMode, toggleDarkMode] = useDarkMode() 12 | 13 | return ( 14 | 63 | ) 64 | } 65 | 66 | export default Header; -------------------------------------------------------------------------------- /website/src/components/Hero.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-target-blank */ 2 | import React from 'react' 3 | import { Link } from 'react-router-dom' 4 | 5 | function Hero () { 6 | return ( 7 |
8 |
9 |

10 | Simple and Creative buttons with sButtons. 11 |

12 |
13 | 14 | Documentation 15 | 16 | 19 | Download 20 | 21 | 24 | Buy Me a Coffee ☕️ 25 | 26 |
27 |
28 |
29 | ) 30 | } 31 | 32 | export default Hero -------------------------------------------------------------------------------- /website/src/components/MenuToggler.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useMemo, useRef } from 'react' 2 | import { FiMenu } from 'react-icons/fi' 3 | import 'animate.css'; 4 | 5 | function MenuToggler () { 6 | const menuToggleRef = useRef(null) 7 | const openClasses = useMemo(() => { 8 | return ['animate__slideInLeft'] 9 | }, []), 10 | closeClasses = useMemo(() => { 11 | return ['animate__slideOutLeft', '-left-full'] 12 | }, []) 13 | 14 | const changeSidebarClassesCallback = useCallback((add, remove) => { 15 | const menu = document.getElementById('sidebar') 16 | if (menu) { 17 | menu.classList.remove(...remove) 18 | menu.classList.add(...add) 19 | } 20 | }, []) 21 | 22 | function toggleSidebar () { 23 | const menu = document.getElementById('sidebar') 24 | if (menu) { 25 | let add = openClasses, 26 | remove = closeClasses 27 | if (menu.classList.contains(openClasses)) { 28 | add = closeClasses 29 | remove = openClasses 30 | } 31 | 32 | changeSidebarClassesCallback(add, remove) 33 | } 34 | } 35 | 36 | const closeSidebarCallback = useCallback(() => { 37 | changeSidebarClassesCallback([closeClasses[0]], openClasses) 38 | }, [changeSidebarClassesCallback, closeClasses, openClasses]) 39 | 40 | const clickOutsideSidebarCallback = useCallback((e) => { 41 | const menu = document.getElementById('sidebar') 42 | // Check that the clicked element isn't the toggler button 43 | // and isn't inside the sidebar and the sidebar is opened 44 | if (e.target && menuToggleRef && menu && 45 | menuToggleRef.current && e.target.id !== 'sidebar' && 46 | !e.target.isSameNode(menuToggleRef.current) && 47 | !menuToggleRef.current.contains(e.target) && 48 | !menu.contains(e.target) && 49 | menu.classList.contains(openClasses) 50 | ) { 51 | closeSidebarCallback() 52 | } 53 | }, [closeSidebarCallback, openClasses]) 54 | 55 | const resizeListener = useCallback(() => { 56 | if (window.innerWidth >= 768) { 57 | changeSidebarClassesCallback([closeClasses[1]], closeClasses) 58 | } 59 | }, [changeSidebarClassesCallback, closeClasses]) 60 | 61 | const clickSidebarLinks = useCallback((e) => { 62 | if (window.innerWidth < 768 && e.target && e.target.classList.contains('sidebar-item')) { 63 | closeSidebarCallback() 64 | } 65 | }, [closeSidebarCallback]) 66 | 67 | useEffect(() => { 68 | window.addEventListener('resize', resizeListener) 69 | document.body.addEventListener('click', clickOutsideSidebarCallback) 70 | document.addEventListener('click', clickSidebarLinks) 71 | 72 | return () => { 73 | window.removeEventListener('resize', resizeListener) 74 | document.body.removeEventListener('click', clickOutsideSidebarCallback) 75 | document.removeEventListener('click', clickSidebarLinks) 76 | } 77 | }, [resizeListener, clickOutsideSidebarCallback, clickSidebarLinks]) 78 | 79 | return ( 80 |
81 | 86 |
87 | ) 88 | } 89 | 90 | export default MenuToggler -------------------------------------------------------------------------------- /website/src/components/Meta.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | 4 | function Meta ({pageTitle = '', url = '/', children = {}}) { 5 | return ( 6 | 7 | {pageTitle ? pageTitle + ' - ' : ''}sButtons{!pageTitle ? ' - Simple buttons you can use easily for your next project.' : ''} 8 | 9 | 10 | 11 | 12 | {children} 13 | 14 | ) 15 | } 16 | 17 | export default Meta -------------------------------------------------------------------------------- /website/src/components/ProjectCard.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/anchor-has-content */ 2 | /* eslint-disable react/jsx-no-target-blank */ 3 | import React from 'react' 4 | import vars from '../vars' 5 | 6 | function ProjectCard({project: {name, about, url, image}}) { 7 | return ( 8 |
9 | {name} 10 |
11 |

{name}

12 |

{about}

13 | 14 |
15 |
16 | ) 17 | } 18 | 19 | export default ProjectCard 20 | -------------------------------------------------------------------------------- /website/src/components/SectionHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SectionLink from './SectionLink' 3 | 4 | function SectionHeader ({title, to}) { 5 | return ( 6 |

7 | 8 | {title} 9 |

10 | ) 11 | } 12 | 13 | export default SectionHeader -------------------------------------------------------------------------------- /website/src/components/SectionLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FiHash } from 'react-icons/fi' 3 | 4 | function SectionLink ({to}) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default SectionLink -------------------------------------------------------------------------------- /website/src/components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | function Sidebar ({children = []}) { 4 | const [filter, setFilter] = useState(""); 5 | 6 | return ( 7 | 28 | ) 29 | } 30 | 31 | export default Sidebar 32 | -------------------------------------------------------------------------------- /website/src/components/SidebarLink.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect } from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | function SidebarLink ({text, to = "", level = 0, clickCallback = null, current = null}) { 5 | const active = current === to 6 | function scroll () { 7 | if (to.length) { 8 | const elm = document.querySelector(to) 9 | if (elm) { 10 | const header = document.querySelector('.sticky nav'), 11 | headerOffset = header ? header.clientHeight : 0 12 | window.scroll({ 13 | top: Math.abs(elm.offsetTop - headerOffset), 14 | behavior: 'smooth' 15 | }) 16 | } 17 | if (clickCallback) { 18 | clickCallback(to) 19 | } 20 | } 21 | } 22 | 23 | const scrollCallback = useCallback(scroll, [clickCallback, to]) 24 | 25 | useEffect (() => { 26 | if (window.location.href.indexOf(to) !== -1) { 27 | scrollCallback() 28 | } 29 | }, [scrollCallback, to]) 30 | 31 | return ( 32 | {text} 35 | ) 36 | } 37 | 38 | export default SidebarLink -------------------------------------------------------------------------------- /website/src/components/SubsectionHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SectionLink from './SectionLink' 3 | 4 | function SubsectionHeader ({title, to}) { 5 | return ( 6 |

7 | 8 | {title} 9 |

10 | ) 11 | } 12 | 13 | export default SubsectionHeader -------------------------------------------------------------------------------- /website/src/data/button-colors.json: -------------------------------------------------------------------------------- 1 | [ 2 | "blue-btn", 3 | "pink-btn", 4 | "red-btn", 5 | "green-btn", 6 | "yellow-btn", 7 | "orange-btn", 8 | "purple-btn", 9 | "black-btn", 10 | "white-btn" 11 | ] -------------------------------------------------------------------------------- /website/src/data/projects.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "UUID generator", 4 | "about": "A web application that generates unique hashed strings once you click a button.", 5 | "url": "https://uuid-generator.vercel.app/", 6 | "image": "/images/projects/uuid.png" 7 | }, 8 | { 9 | "name": "Grammarly With Ghost", 10 | "about": "An extension that allows Grammarly to work on Ghost's editor", 11 | "url": "https://chrome.google.com/webstore/detail/grammarly-with-ghost/iakfoofepmfjafjepidembmheemidbdb", 12 | "image": "/images/projects/grammarly-ghost.jpg" 13 | } 14 | ] -------------------------------------------------------------------------------- /website/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | @tailwind variants; 5 | 6 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); 7 | @import url('sbuttons.min.css'); 8 | 9 | html, body { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | font-family: 'Quicksand', sans-serif; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | 19 | @apply transition-colors duration-100 overflow-x-hidden; 20 | } 21 | 22 | .dark { 23 | @apply bg-gray-800 text-white; 24 | } 25 | 26 | .underline-red { 27 | @apply underline; 28 | text-decoration-color: #E11D48; 29 | } 30 | 31 | .content { 32 | min-height: 75vh; 33 | } 34 | 35 | .sidebar-item.active { 36 | @apply border-red-600 !important 37 | } 38 | 39 | .sidebar-item { 40 | width: fit-content; 41 | width: -moz-fit-content; 42 | } 43 | 44 | .stretched-link { 45 | position: absolute; 46 | left: 0; 47 | top: 0; 48 | height: 100%; 49 | width: 100%; 50 | z-index: 2; 51 | } 52 | 53 | /** Carbon ads **/ 54 | 55 | [id*=carbonads] { 56 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 57 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, 58 | sans-serif; 59 | } 60 | 61 | [id*=carbonads] { 62 | display: flex; 63 | position: fixed; 64 | bottom: 66px; 65 | right: 20px; 66 | max-width: 330px; 67 | background-color: hsl(0, 0%, 98%); 68 | box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1); 69 | z-index: 100; 70 | } 71 | 72 | [id*=carbonads] a { 73 | color: inherit; 74 | text-decoration: none; 75 | } 76 | 77 | [id*=carbonads] a:hover { 78 | color: inherit; 79 | } 80 | 81 | [id*=carbonads] span { 82 | position: relative; 83 | display: block; 84 | overflow: hidden; 85 | } 86 | 87 | [id*=carbonads] .carbon-wrap { 88 | display: flex; 89 | } 90 | 91 | .carbon-img { 92 | display: block; 93 | margin: 0; 94 | line-height: 1; 95 | } 96 | 97 | .carbon-img img { 98 | display: block; 99 | } 100 | 101 | .carbon-text { 102 | font-size: 13px; 103 | padding: 10px; 104 | line-height: 1.5; 105 | text-align: left; 106 | } 107 | 108 | .carbon-poweredby { 109 | display: block; 110 | padding: 8px 10px; 111 | background: repeating-linear-gradient( 112 | -45deg, 113 | transparent, 114 | transparent 5px, 115 | hsla(0, 0%, 0%, 0.025) 5px, 116 | hsla(0, 0%, 0%, 0.025) 10px 117 | ) 118 | hsla(203, 11%, 95%, 0.4); 119 | text-align: center; 120 | text-transform: uppercase; 121 | letter-spacing: 0.5px; 122 | font-weight: 600; 123 | font-size: 9px; 124 | line-height: 1; 125 | } 126 | 127 | /** DARK THEME **/ 128 | 129 | .dark [id*=carbonads] { 130 | background-color: hsl(0, 0%, 10%); 131 | box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.5); 132 | } 133 | 134 | .dark [id*=carbonads] a { 135 | color: #ddd; 136 | text-decoration: none; 137 | } 138 | 139 | .dark [id*=carbonads] a:hover { 140 | color: #ddd; 141 | } 142 | 143 | .dark .carbon-poweredby { 144 | background: repeating-linear-gradient( 145 | -45deg, 146 | transparent, 147 | transparent 5px, 148 | hsla(0, 0%, 0%, 0.025) 5px, 149 | hsla(0, 0%, 0%, 0.025) 10px 150 | ) 151 | hsla(203, 11%, 15%, 0.4); 152 | color: #aaa !important; 153 | } 154 | .heading { 155 | background: -webkit-linear-gradient(#ff8533, #ff4da6); 156 | -webkit-text-fill-color: transparent; 157 | } 158 | -------------------------------------------------------------------------------- /website/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import './index.css'; 3 | import App from './app' 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); 9 | -------------------------------------------------------------------------------- /website/src/pages/404/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Footer from '../../components/Footer' 3 | import Common from '../Common' 4 | 5 | function NotFound() { 6 | return ( 7 |
8 | 9 |
10 |
11 | 404 12 |
13 |
14 |
15 |
16 | ); 17 | } 18 | 19 | export default NotFound; -------------------------------------------------------------------------------- /website/src/pages/Common.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import Header from '../components/Header' 3 | import Meta from '../components/Meta' 4 | import { ToastContainer } from 'react-toastify' 5 | import 'react-toastify/dist/ReactToastify.css' 6 | 7 | function Common ({activePage = null, pageTitle = '', showMenuButton = false, children = []}) { 8 | useEffect(() => { 9 | const d = document, 10 | s = d.createElement('script'), 11 | previous = d.getElementById('carbonads'); 12 | 13 | if (previous) { 14 | previous.remove() 15 | } 16 | 17 | s.src = 'https://cdn.carbonads.com/carbon.js?serve=CEBILKJI&placement=sbuttonsgithubio'; 18 | s.id = '_carbonads_js'; 19 | s.setAttribute('async', 'async'); 20 | d.body.appendChild(s); 21 | 22 | return () => { 23 | s.remove(); 24 | } 25 | }, []); 26 | 27 | return ( 28 |
29 | 30 | 31 |
32 |
33 | ) 34 | } 35 | 36 | export default Common -------------------------------------------------------------------------------- /website/src/pages/Examples/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import Footer from '../../components/Footer' 3 | import Common from '../Common' 4 | import Sidebar from '../../components/Sidebar' 5 | import SidebarLink from '../../components/SidebarLink' 6 | import buttons from '../../data/buttons.json' 7 | import ButtonExample from '../../components/ButtonExample' 8 | 9 | function Examples () { 10 | const [currentButton, setCurrentButton] = useState(null) 11 | let sidebarLinks = []; 12 | 13 | useEffect(() => { 14 | //todo set currentbutton intial value 15 | if (window.location.hash) { 16 | setCurrentButton(window.location.hash) 17 | } else { 18 | if (buttons.length) { 19 | //set the first button as current button 20 | if (buttons[0].children.length) { 21 | setCurrentButton('#' + buttons[0].children[0].type) 22 | } else { 23 | setCurrentButton('#' + buttons[0].type) 24 | } 25 | } 26 | } 27 | }, []) 28 | 29 | let button = null 30 | if (currentButton) { 31 | const type = currentButton.replace("#", "") 32 | buttons.some((buttonType) => { 33 | if (buttonType.type === type) { 34 | button = { 35 | button: { 36 | title: buttonType.label, 37 | classes: buttonType.classes, 38 | variations: buttonType.variations ? buttonType.variations : [], 39 | html: buttonType.html !== undefined ? buttonType.html : "", 40 | text: buttonType.text !== undefined ? buttonType.text : "" 41 | }, 42 | type: { 43 | name: buttonType.label, 44 | shouldHaveRoundedType: buttonType.shouldHaveRoundedType !== undefined ? buttonType.shouldHaveRoundedType : true, 45 | shouldHaveBlockType: buttonType.shouldHaveBlockType !== undefined ? buttonType.shouldHaveBlockType : true, 46 | usesColors: buttonType.usesColors 47 | } 48 | } 49 | return true 50 | } else { 51 | return buttonType.children.some((buttonChild) => { 52 | if (buttonChild.type === type) { 53 | button = { 54 | button: { 55 | title: buttonChild.label, 56 | classes: buttonType.classes + " " + buttonChild.classes, 57 | variations: buttonChild.variations ? buttonChild.variations : [], 58 | html: buttonType.html !== undefined ? buttonType.html : "", 59 | text: buttonChild.text !== undefined ? buttonChild.text : "" 60 | }, 61 | type: { 62 | name: buttonType.label, 63 | shouldHaveRoundedType: buttonChild.shouldHaveRoundedType !== undefined ? buttonChild.shouldHaveRoundedType : true, 64 | shouldHaveBlockType: buttonChild.shouldHaveBlockType !== undefined ? buttonChild.shouldHaveBlockType : true, 65 | usesColors: buttonChild.usesColors, 66 | usesText: buttonChild.usesText 67 | } 68 | } 69 | return true 70 | } 71 | return false 72 | }) 73 | } 74 | }) 75 | } 76 | 77 | const hasVariations = button && button.button.variations && button.button.variations.length >= 1 78 | 79 | return ( 80 |
81 | 82 | 83 | 84 |
85 | 86 | {buttons.forEach((buttonType, index) => { 87 | if (!buttonType.children.length) { 88 | sidebarLinks.push( 89 | 93 | ); 94 | } else { 95 | sidebarLinks.push( 96 | 98 | ); 99 | 100 | buttonType.children.forEach((button, buttonIndex) => { 101 | sidebarLinks.push( 102 | 106 | ); 107 | }); 108 | } 109 | })} 110 | 111 | {sidebarLinks} 112 |
113 |

{button && button.button.title}

114 | Type: {button && button.type.name} 115 | {hasVariations && button.button.variations.map((variation, index) => ( 116 | 120 | ))} 121 | {(button && !hasVariations) && 122 | } 123 |
124 |
125 |
126 |
127 | ) 128 | } 129 | 130 | export default Examples 131 | -------------------------------------------------------------------------------- /website/src/pages/Home/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-target-blank */ 2 | import React from 'react' 3 | import { FiCloud, FiCode } from 'react-icons/fi' 4 | import Code from '../../components/Code' 5 | import Footer from '../../components/Footer' 6 | import Common from '../Common' 7 | import Hero from '../../components/Hero' 8 | 9 | function Home () { 10 | return ( 11 |
12 | 13 | 14 |
15 |
16 |

17 | 18 | 19 | 20 | Installation 21 |

22 |
23 |

24 | Install sButtons’s source LESS via npm. 25 | Package managed installs don’t include documentation or our full build scripts. 26 | You can also use our npm. 27 |

28 |
29 | 30 |
31 |
32 |
33 |
34 |

35 | 36 | 37 | 38 | sButtons CDN 39 |

40 |
41 |

42 | When you only need to include sButtons’ compiled CSS , you can use 43 | 47 | sButtons CDN 48 | . 49 |

50 |
51 | `} 52 | language="html" /> 53 |
54 |
55 |
56 |
57 |
58 |
59 | ) 60 | } 61 | 62 | export default Home 63 | -------------------------------------------------------------------------------- /website/src/pages/Projects/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-no-target-blank */ 2 | import React from 'react' 3 | import Footer from '../../components/Footer' 4 | import Common from '../Common' 5 | import projects from '../../data/projects.json' 6 | import ProjectCard from '../../components/ProjectCard' 7 | 8 | function Projects () { 9 | return ( 10 |
11 | 12 |
13 |

Projects using sButtons

14 |

Here's a list of projects using sButtons. If you are using sButtons in your project and would like to be featured, please submit it here.

15 |
16 | {projects.map((project, index) => )} 17 |
18 |
19 |
21 | ) 22 | } 23 | 24 | export default Projects -------------------------------------------------------------------------------- /website/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /website/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /website/src/vars.js: -------------------------------------------------------------------------------- 1 | const vars = { 2 | path: '' 3 | }; 4 | 5 | export default vars -------------------------------------------------------------------------------- /website/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | module.exports = { 4 | content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 5 | darkMode: 'class', 6 | theme: { 7 | extend: {}, 8 | colors: { 9 | transparent: 'transparent', 10 | current: 'currentColor', 11 | black: colors.black, 12 | white: colors.white, 13 | gray: colors.neutral, 14 | indigo: colors.indigo, 15 | red: colors.rose, 16 | yellow: colors.amber, 17 | blue: colors.blue, 18 | green: colors.emerald, 19 | purple: colors.violet 20 | } 21 | }, 22 | plugins: [], 23 | important: true, 24 | safelist: ['ml-3'] 25 | } 26 | --------------------------------------------------------------------------------