Skip to content

Commit

Permalink
Merge pull request #167 from coliff/dev/coliff/add-dark-mode-support
Browse files Browse the repository at this point in the history
  • Loading branch information
coliff authored Jul 21, 2023
2 parents 7381e25 + 2ad6099 commit b0fc052
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 13 deletions.
5 changes: 5 additions & 0 deletions .github/workflows/super-linter.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ jobs:
statuses: write
name: Lint Code Base
runs-on: ubuntu-latest
if: ${{ github.actor != 'dependabot[bot]' }}

steps:
- name: Checkout Code
Expand All @@ -26,8 +27,12 @@ jobs:
env:
DEFAULT_BRANCH: main
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
IGNORE_GITIGNORED_FILES: true
JAVASCRIPT_DEFAULT_STYLE: prettier
LINTER_RULES_PATH: /
LOG_LEVEL: NOTICE
SUPPRESS_POSSUM: true
VALIDATE_ALL_CODEBASE: false
VALIDATE_EDITORCONFIG: false
VALIDATE_MARKDOWN: false
VALIDATE_NATURAL_LANGUAGE: false
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ A show password as text toggle for Bootstrap forms
- Base64 encoded SVG icons (no external images or fonts required)
- Graceful fallback for browsers with JavaScript disabled
- Works with Bootstrap 4 and 5
- Supports dark mode (Bootstrap 5 only)
- Only 1KB gzipped

![show password toggle](https://christianoliff.com/img/2020/show-password-toggle-anim.gif)
Expand Down Expand Up @@ -47,8 +48,8 @@ You should also add `name="current-password"` and `autocomplete="current-passwor

## Demo

- [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/)
- [Bootstrap 5 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/)
- [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/)

## Browser Support

Expand All @@ -63,7 +64,7 @@ A. Yes you can change the icon displayed by replacing the `.input-password[type=
## Known Issues

- If the browser autofills the password input then the user-agent will apply `background-image: none !important`.
- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) or [:empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) pseudo-selectors!)
- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) pseudo-selector!)

## Credits and Thanks

Expand Down
7 changes: 7 additions & 0 deletions css/show-password-toggle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/show-password-toggle.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions css/show-password-toggle.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit b0fc052

Please sign in to comment.