diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..81eba8c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 4 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +end_of_line = lf diff --git a/.github/workflows/on_pre_release.yml b/.github/workflows/on_pre_release.yml new file mode 100644 index 0000000..db4e3b4 --- /dev/null +++ b/.github/workflows/on_pre_release.yml @@ -0,0 +1,21 @@ +name: Pre Release +on: + release: + types: [prereleased] +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - name: npm install + run: npm i + - name: build + run: npm run build + - name: publish + run: npm publish --tag next + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml new file mode 100644 index 0000000..3d15a9e --- /dev/null +++ b/.github/workflows/on_pull_request.yml @@ -0,0 +1,19 @@ +on: pull_request +name: Build PR +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x, 14.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and test + run: | + npm i + npm run build + diff --git a/.github/workflows/on_push.yml b/.github/workflows/on_push.yml new file mode 100644 index 0000000..f369244 --- /dev/null +++ b/.github/workflows/on_push.yml @@ -0,0 +1,27 @@ +on: push +name: Build & Publish Docs +jobs: + checkChangesInDocs: + name: Check changes in docs + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Check changes in stories + uses: netlify/actions/diff-includes@master + with: + args: docs + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x, 14.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and test + run: | + npm i + npm run build diff --git a/.github/workflows/on_release.yml b/.github/workflows/on_release.yml new file mode 100644 index 0000000..c238742 --- /dev/null +++ b/.github/workflows/on_release.yml @@ -0,0 +1,21 @@ +name: Release +on: + release: + types: [released] +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - name: npm install + run: npm i + - name: build + run: npm run build + - name: publish + run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..7bbc050 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,19 @@ +name: Mark stale issues and pull requests + +on: + schedule: + - cron: "0 0 * * *" + +jobs: + stale: + + runs-on: ubuntu-latest + + steps: + - uses: actions/stale@v1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + stale-issue-message: 'Stale issue message' + stale-pr-message: 'Stale pull request message' + stale-issue-label: 'no-issue-activity' + stale-pr-label: 'no-pr-activity' diff --git a/.gitignore b/.gitignore index 75a0854..c5558f1 100644 --- a/.gitignore +++ b/.gitignore @@ -24,9 +24,35 @@ Desktop.ini # Temporary files coverage/ -docs tmp -test +test/*.css # Logs .log + +# Build +dist/ + +# Dependencies +/node_modules + +# Production +/build + +# Docs +docs/build/ + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..bb0224d --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +.github/ diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index e5279ba..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "stylelint-config-recommended-scss", - "rules":{} -} \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..736b1f0 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-recommended-scss" +} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 2a3006d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,22 +0,0 @@ -sudo: required -dist: trusty -language: node_js -node_js: - - node -cache: - yarn: true -notifications: - email: false -before_install: - - echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc -after_success: - - 'if [ ${TRAVIS_PULL_REQUEST} = "false" ]; then - npm run ci; - npm run release; - npm publish --access=public; - npm run log; - fi' -branches: - only: - - staging - - /^greenkeeper/.*$/ \ No newline at end of file diff --git a/Gulpfile.js b/Gulpfile.js index f066bbe..6bb6469 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -1,95 +1,58 @@ -var gulp = require('gulp'); -var browserSync = require('browser-sync'); -var sass = require('gulp-sass'); -var rename = require('gulp-rename'); -var autoprefixer = require('gulp-autoprefixer'); -var sourcemaps = require('gulp-sourcemaps'); -var headerComment = require('gulp-header-comment'); -var gulpStylelint = require('gulp-stylelint'); -var stylefmt = require('gulp-stylefmt'); -let cleanCSS = require('gulp-clean-css'); -var gulpSequence = require('gulp-sequence') -var del = require('del'); -var reload = browserSync.reload; +const gulp = require('gulp'); -module.exports = gulp; +const sass = require('gulp-sass'); +sass.compiler = require('sass'); -/* BROWSER SYNC */ -gulp.task('browser-sync', function () { - browserSync({ - port: 3040, - server: { - baseDir: "./", - directory: true - }, - https: true - }); -}); - -/* BROWSER SYNC RELOAD */ -gulp.task('browser-sync-reload', function () { - browserSync.reload(); -}); - -/* LIST SCSS */ -gulp.task('lint:scss', function () { - return gulp - .src('src/**/*.scss') - .pipe(gulpStylelint({ - reporters: [{ - formatter: 'string', - console: true - }] - })); -}); +const rename = require('gulp-rename'); +const autoprefixer = require('gulp-autoprefixer'); +const sourcemaps = require('gulp-sourcemaps'); +const headerComment = require('gulp-header-comment'); +const gulpStylelint = require('gulp-stylelint'); +const cleanCSS = require('gulp-clean-css'); +const del = require('del'); /* COMPILE SCSS */ -gulp.task('compile:scss', function () { - return gulp.src('src/**/*.scss') - .pipe(sourcemaps.init()) - .pipe(sass({ - outputStyle: 'expanded' - }) - .on('error', sass.logError)) - .pipe(autoprefixer({ - browsers: ['> 5%', 'last 4 versions'], - cascade: false - })) - .pipe(sourcemaps.write('./maps')) - .pipe(gulp.dest('dist')) - .pipe(browserSync.reload({ - stream: true - })); -}); - -/* FORMAT CSS */ -gulp.task('format:css', function () { - return gulp.src('dist/*.css') - .pipe(stylefmt()) - .pipe(gulp.dest('dist')); -}) - -/* CLEAN DIST */ -gulp.task('clean:dist', function () { - return del(['dist']); -}); +exports['compile:scss'] = function compileSCSS() { + return gulp + .src('src/**/*.scss') + .pipe(sourcemaps.init()) + .pipe( + sass({ + outputStyle: 'expanded', + }).on('error', sass.logError) + ) + .pipe( + autoprefixer({ + cascade: false, + }) + ) + .pipe(sourcemaps.write('./maps')) + .pipe(gulp.dest('dist')); +}; /* MINIFY CSS */ -gulp.task('minify:css', () => { - return gulp.src('dist/*.css') - .pipe(cleanCSS({ - compatibility: 'ie9' - })) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest('dist')); -}); +exports['minify:css'] = function minifyCSS() { + return gulp + .src('dist/*.css') + .pipe( + cleanCSS({ + compatibility: 'ie9', + }) + ) + .pipe( + rename({ + suffix: '.min', + }) + ) + .pipe(gulp.dest('dist')); +}; /* SET HEADER */ -gulp.task('set:header', function () { - return gulp.src('dist/*.css') - .pipe(headerComment(` +exports['set:header'] = function setHeader() { + return gulp + .src('dist/*.css') + .pipe( + headerComment(` pretty-checkbox.css A pure CSS library to beautify checkbox and radio buttons @@ -97,15 +60,18 @@ gulp.task('set:header', function () { Source: <%= pkg.repository.link %> Demo: <%= pkg.homepage %> - Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %> - `)) - .pipe(gulp.dest('dist')) -}); + Copyright (c) <%= new Date().getFullYear() %> <%= pkg.maintainers[0] %> + Originally By: <%= _.capitalize(pkg.author) %> + `) + ) + .pipe(gulp.dest('dist')); +}; -gulp.task('build', function (cb) { - gulpSequence('lint:scss', 'clean:dist', 'compile:scss', 'format:css', 'minify:css', 'set:header', cb) -}); +const build = gulp.series( + exports['compile:scss'], + exports['minify:css'], + exports['set:header'] +); -gulp.task('default', ['compile:scss', 'browser-sync'], function () { - gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']); -}); +exports.build = build; +exports.default = build; diff --git a/LICENSE b/LICENSE index fc783d6..fe0df4c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,9 +1,21 @@ -The MIT License (MIT) +MIT License Copyright (c) 2017 Lokesh Rajendran ( lokesh.aero@gmail.com ) -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index c66e4b4..7300fc7 100644 --- a/README.md +++ b/README.md @@ -1,303 +1,303 @@ -

-
- Pretty checkbox -

pretty-checkbox.css
-

- -

A pure CSS library to beautify checkbox and radio buttons.

- -

- - Github Release - - - Licence - - - Downloads - -

-
- -
-
-
Demo and documentation

-
https://lokesh-coder.github.io/pretty-checkbox/

-
-
- -
-Pretty checkbox preview -
- -### Features -* Basic - - **Shapes** - *Square*, *Curve*, *Round* - - **Variants** - *Default*, *Fill*, *Thick* - - **Colors** - *Primary*, *Success*, *Info*, *Warning*, *Danger* - - **Color types** - *Solid*, *Outline* - - **Animations** - *Smooth*, *Tada*, *Jelly*, *Pulse*, *Rotate* - * Switch - iOS style - *Outline*, *Fill*, *Slim* - * Responsive - * No JavaScript - * Custom Font Icons - * SVG Icons - * Image support - * Toggle between icons / SVG's / images - * Lock - * State - *Focus*, *Hover*, *Indeterminate* - * Supports frameworks - *Bootstrap*, *Foundation*, *Sematic UI*, *Bulma*, ... - * SCSS customization - * Supports all modern browsers, including mobile devices - * Print friendly - * and more... ( *I am kidding, that's all!* ) - -### Installation -- **From CLI** - -Install the library from [`npm`](https://www.npmjs.com/package/pretty-checkbox) or [`yarn`](https://yarnpkg.com/en/package/pretty-checkbox) package manager - -```sh -> npm install pretty-checkbox // or -> yarn add pretty-checkbox -``` -Add `pretty-checkbox.min.css` in your html - -
- -- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) ) -```html - -``` - -
- -- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) ) - -Download the source from Github. -```html - -``` -`` is where the library is downloaded. - -
- -**SCSS** - -You can also import `pretty-checkbox.scss` in your main scss file. -```scss -@import '~pretty-checkbox/src/pretty-checkbox.scss'; -``` - -Please refer the document for SCSS settings. - - -### Usage - - -Pretty checkbox comes with many styles, - -| Class name | Description | -| :---------- | :----------------------- | -| `p-default` | Basic style | -| `p-switch` | iOS like toggle style | -| `p-icon` | Custom font icons | -| `p-svg` | Custom SVG files, markup | -| `p-image` | Tiny images | - -And three shapes `p-round` `p-curve` `p-square` (default) - - -#### Basic checkbox - -```html -
- -
- -
-
-``` - -Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default) - -You can combine them. - -```html -
- -
- -
-
-``` - -
---
- -#### Switch checkbox - -Switch has three variants `p-outline` `p-fill` `p-slim` - -```html -
- -
- -
-
-``` - -
---
- -#### Custom Font icons - -```html -
- -
- - -
-
-``` - -
- - Note: class `icon` should be added along with icon class names - -
- -
- - Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately. - -
- -
- - more details -
- -
---
- -#### SVG - -Supports SVG file in tag, markup (` ... `) and sprites - -```html -
- -
- - -
-
-``` - -
- - Note: class `svg` to be added in img tag or svg tag. - -
- -
- more details -
- -
---
- -#### Image - -Supports any type of valid image format. - -```html -
- -
- - -
-
-``` - -
- - Note: class `image` to be added in img tag. - -
- -
- more details -
- -
---
- -#### Colors - -There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger` - -And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o` - -```html -
- -
- -
-
-``` -
- - Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature. - -
- -
- more details -
- -### More - -There are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***. - -Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them. - - -### Browser support - -Works in all modern browsers. - -`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9` - -### Font Icon libraries -* [Font awesome](http://fontawesome.io/icons/) -* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons) -* [Material icon ( MDI )](https://materialdesignicons.com/) -* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html) -* [Ion icons](http://ionicons.com/) -* [Typicons](http://www.typicons.com/) -* [Material icon ( Google )](https://material.io/icons) -* Others not tested, but will work ( 99% ). - - -### SVG -* [UIKit](https://getuikit.com/docs/icon) -* [Feathers](https://feathericons.com/) -* Others - -### Libraries -- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue) -- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox) - -### Inspiration -- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea -- [Animista](http://animista.net) - Animations - -### Contributions -Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome! - -### License -This project is licensed under the MIT License - - -
❤
+

+
+ Pretty checkbox +

pretty-checkbox.css
+

+ +

A pure CSS library to beautify checkbox and radio buttons.

+ +

+ + Github Release + + + Licence + + + Downloads + +

+
+ +
+
+
Demo and documentation

+
https://pretty-checkbox.netlify.app/

+
+
+ +
+Pretty checkbox preview +
+ +## Features + +- Basic + - **Shapes** - _Square_, _Curve_, _Round_ + - **Variants** - _Default_, _Fill_, _Thick_ + - **Colors** - _Primary_, _Success_, _Info_, _Warning_, _Danger_ + - **Color types** - _Solid_, _Outline_ + - **Animations** - _Smooth_, _Tada_, _Jelly_, _Pulse_, _Rotate_ +- Switch - iOS style - _Outline_, _Fill_, _Slim_ +- Responsive +- No JavaScript +- Custom Font Icons +- SVG Icons +- Image support +- Toggle between icons / SVG's / images +- Lock +- State - _Focus_, _Hover_, _Indeterminate_ +- Supports frameworks - _Bootstrap_, _Foundation_, _Sematic UI_, _Bulma_, ... +- SCSS customization +- Supports all modern browsers, including mobile devices +- Print friendly +- and more... ( _I am kidding, that's all!_ ) + +## Installation + +### From CLI + +Install using `npm` or `yarn`: + +```sh +npm install @djthoms/pretty-checkbox # or +yarn add @djthoms/pretty-checkbox +``` + +Add `pretty-checkbox.min.css` in your html: + +### From CDN + +```html + +``` + +### Manual download + +Download the source from [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip). + +```html + +``` + +`` is where the library is downloaded. + +### SCSS + +You can also import `pretty-checkbox.scss` in your main scss file. + +```scss +@import '~@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; +``` + +Please refer the document for SCSS settings. + +## Usage + +Pretty checkbox comes with many styles, + +| Class name | Description | +| :---------- | :----------------------- | +| `p-default` | Basic style | +| `p-switch` | iOS like toggle style | +| `p-icon` | Custom font icons | +| `p-svg` | Custom SVG files, markup | +| `p-image` | Tiny images | + +And three shapes `p-round` `p-curve` `p-square` (default) + +### Basic checkbox + +```html +
+ +
+ +
+
+``` + +Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default) + +You can combine them. + +```html +
+ +
+ +
+
+``` + +### Switch checkbox + +Switch has three variants `p-outline` `p-fill` `p-slim` + +```html +
+ +
+ +
+
+``` + +### Custom Font icons + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `icon` should be added along with icon class names + +
+ +
+ + Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately. + +
+ +
+ + more details +
+ +### SVG + +Supports SVG file in tag, markup (` ... `) and sprites + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `svg` to be added in img tag or svg tag. + +
+ +
+ more details +
+ +### Image + +Supports any type of valid image format. + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `image` to be added in img tag. + +
+ +
+ more details +
+ +### Colors + +There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger` + +And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o` + +```html +
+ +
+ +
+
+``` + +
+ + Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature. + +
+ +
+ more details +
+ +## RTL Support + +Include `rtl.css` in your source file :smile: + +## More + +There are more features like **_Radio buttons_** , **_Toggle_** , **_States_** , **_Animations_** , **_Border less_** , **_Lock_** , **_Scale_**, **_SCSS Settings_**. + +Please refer the [documentation](https://pretty-checkbox.netlify.app/docs/) to know about them. + +## Browser support + +Works in all modern browsers. + +`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9` + +## Font Icon libraries + +- [Font awesome](http://fontawesome.io/icons/) +- [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons) +- [Material icon ( MDI )](https://materialdesignicons.com/) +- [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html) +- [Ion icons](http://ionicons.com/) +- [Typicons](http://www.typicons.com/) +- [Material icon ( Google )](https://material.io/icons) +- Others not tested, but will work ( 99% ). + +## SVG + +- [UIKit](https://getuikit.com/docs/icon) +- [Feathers](https://feathericons.com/) +- Others + +## Libraries + +- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue) +- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox) +- React - [pretty-checkbox-react](https://github.com/atomicpages/pretty-checkbox-react) + +## Inspiration + +- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea +- [Animista](http://animista.net) - Animations + +## Contributions + +Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome! + +## License + +This project is licensed under the MIT License + +
❤
diff --git a/dist/maps/pretty-checkbox.css.map b/dist/maps/pretty-checkbox.css.map deleted file mode 100644 index 7da9fa2..0000000 --- a/dist/maps/pretty-checkbox.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["scss/_core.scss","scss/_variables.scss","scss/essentials/_keyframes.scss","pretty-checkbox.css","scss/elements/default/_fill.scss","scss/elements/default/_outline.scss","scss/elements/default/_thick.scss","scss/elements/font-icon/_general.scss","scss/elements/svg/_general.scss","scss/elements/image/_general.scss","scss/elements/switch/_general.scss","scss/elements/switch/_fill.scss","scss/elements/switch/_slim.scss","scss/states/_hover.scss","scss/states/_focus.scss","scss/states/_indeterminate.scss","scss/extras/_toggle.scss","scss/extras/_plain.scss","scss/extras/_round.scss","scss/extras/_curve.scss","scss/extras/_animation.scss","scss/extras/_disabled.scss","scss/extras/_locked.scss","scss/extras/_colors.scss","scss/extras/_bigger.scss","scss/extras/_print.scss"],"names":[],"mappings":"AAEA;EACE,uBAAuB;CACxB;;AAGD;EACE,cAAc;CAkBf;;AAED;EACE,mBAAmB;EACnB,sBAAsB;EACtB,kBAAkB;EAClB,oBAAoB;EACpB,eAAe;CAmDhB;;AAxDD;EAQI,mBAAmB;EACnB,QAAQ;EACR,OAAO;EACP,eAAe;EACf,YAAY;EACZ,aAAa;EACb,WC5BqB;ED6BrB,WAAW;EACX,UAAU;EACV,WAAW;EACX,gBAAgB;CACjB;;AAnBH;EAuBM,kBAAkB;EAClB,sBAAsB;EACtB,oBAAoB;EACpB,UAAU;EACV,mBClC2B;EDmC3B,2BCtCiB;CD2DlB;;AAjDL;EAgCQ,YAAY;EACZ,uBC3Ce;ED4Cf,wBC5Ce;ED6Cf,eAAe;EACf,uBAAuB;EACvB,iBAAiB;EACjB,8BAA8B;EAC9B,WCvDgB;EDwDhB,mBAAmB;EACnB,QAAQ;EACR,oCCrCgB;EDsChB,8BAA8B;CAC/B;;AA5CP;EA+CQ,sBCxEuB;CDyExB;;AAhDP;EAqDM,cAAc;CACf;;AElFL;EACE;IACE,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;CACF;;ADnED;EACE;IACE,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;CACF;;AD5DD;EACE;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;ED5DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC8DjB;ED3DD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,8BAAgB;IAAhB,sBAAgB;GC6DjB;ED1DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC4DjB;EDzDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GC2DjB;EDxDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC0DjB;EDvDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GCyDjB;EDtDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GCwDjB;CACF;;ADjGD;EACE;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;ED5DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC8DjB;ED3DD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,8BAAgB;IAAhB,sBAAgB;GC6DjB;ED1DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC4DjB;EDzDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GC2DjB;EDxDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC0DjB;EDvDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GCyDjB;EDtDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GCwDjB;CACF;;ADrDD;EACE;IACE,oCAAkB;IAAlB,4BAAkB;GCwDnB;EDrDD;IACE,0CAAkB;IAAlB,kCAAkB;GCuDnB;EDpDD;IACE,0CAAkB;IAAlB,kCAAkB;GCsDnB;EDnDD;IACE,0CAAkB;IAAlB,kCAAkB;GCqDnB;EDlDD;IACE,0CAAkB;IAAlB,kCAAkB;GCoDnB;EDjDD;IACE,0CAAkB;IAAlB,kCAAkB;GCmDnB;EDhDD;IACE,oCAAkB;IAAlB,4BAAkB;GCkDnB;CACF;;AD7ED;EACE;IACE,oCAAkB;IAAlB,4BAAkB;GCwDnB;EDrDD;IACE,0CAAkB;IAAlB,kCAAkB;GCuDnB;EDpDD;IACE,0CAAkB;IAAlB,kCAAkB;GCsDnB;EDnDD;IACE,0CAAkB;IAAlB,kCAAkB;GCqDnB;EDlDD;IACE,0CAAkB;IAAlB,kCAAkB;GCoDnB;EDjDD;IACE,0CAAkB;IAAlB,kCAAkB;GCmDnB;EDhDD;IACE,oCAAkB;IAAlB,4BAAkB;GCkDnB;CACF;;AD/CD;EACE;IACE,WAAW;IACX,qDAAoC;IAApC,6CAAoC;GCkDrC;ED/CD;IACE,WAAW;IACX,2CAA+B;IAA/B,mCAA+B;GCiDhC;CACF;;AD1DD;EACE;IACE,WAAW;IACX,qDAAoC;IAApC,6CAAoC;GCkDrC;ED/CD;IACE,WAAW;IACX,2CAA+B;IAA/B,mCAA+B;GCiDhC;CACF;;AD9CD;EACE;IACE,oCAA0C;GCiD3C;ED9CD;IACE,qDAA4C;GCgD7C;CACF;;ADvDD;EACE;IACE,oCAA0C;GCiD3C;ED9CD;IACE,qDAA4C;GCgD7C;CACF;;ACpJD;EAGM,4BAAgB;EAAhB,wBAAgB;EAAhB,oBAAgB;CACjB;;ACJL;EAGM,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AAJL;EASM,qCAAmD;CACpD;;ACVL;EAIM,4BAAkB;CACnB;;AALL;EAQM,yCAAgC;EAAhC,qCAAgC;EAAhC,iCAAgC;CACjC;;ACTL;EAGM,mBAAmB;EACnB,eAAe;EACf,uBNaiB;EMZjB,wBNYiB;EMXjB,QAAQ;EACR,WNKqB;EMJrB,mBAAmB;EACnB,oBAAoB;EACpB,oCNsBkB;EMrBlB,8BAA8B;EAC9B,WAAW;CACZ;;AAdL;EAiBM,UAAU;EACV,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAQ;EAAR,YAAQ;EAAR,QAAQ;EACR,yBAAwB;EAAxB,sBAAwB;EAAxB,wBAAwB;EACxB,0BAAoB;EAApB,uBAAoB;EAApB,oBAAoB;EACpB,eAAe;CAChB;;AA1BL;EA+BM,WAAW;CACZ;;AAhCL;EAmCM,sBAAsB;CACvB;;ACpCL;EAGM,mBAAmB;EACnB,eAAe;EACf,uBPaiB;EOZjB,wBPYiB;EOXjB,QAAQ;EACR,WPKqB;EOJrB,mBAAmB;EACnB,oBAAoB;EACpB,oCPsBkB;EOrBlB,8BAA8B;EAC9B,WAAW;CACZ;;AAdL;EAiBM,UAAU;EACV,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAQ;EAAR,YAAQ;EAAR,QAAQ;EACR,yBAAwB;EAAxB,sBAAwB;EAAxB,wBAAwB;EACxB,0BAAoB;EAApB,uBAAoB;EAApB,oBAAoB;EACpB,eAAe;CAChB;;AA1BL;EA8BI,WAAW;CACZ;;AC/BH;EAGM,WAAW;EACX,mBAAmB;EACnB,uBRaiB;EQZjB,wBRYiB;EQXjB,OAAO;EACP,oCRyBkB;EQxBlB,QAAQ;EACR,WREkB;EQDlB,mBAAmB;EACnB,oBAAoB;EACpB,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AAdL;EAkBI,WAAW;CACZ;;ACnBH;EAEI,eAAc;CACf;;AAHH;EAKI,mBAAmB;CAgCpB;;AArCH;EAQM,YAAY;EACZ,0BTNyB;ESOzB,oBAAoB;EACpB,WAAW;EACX,kBAAkB;EAClB,wBTKiB;ESJjB,mBAAmB;EACnB,OAAO;EACP,qCTkByB;ESjBzB,WTLkB;ESMlB,0BAA0B;CAC3B;;AAnBL;EAsBM,mBTAkC;CScnC;;AApCL;EA0BQ,0BAA0B;EAC1B,oBAAoB;EACpB,QAAQ;EACR,0BAA0B;EAC1B,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AA/BP;EAkCQ,qCAAmD;CACpD;;AAnCP;EAyCM,sBThCsB;CSiCvB;;AA1CL;EA6CM,WAAW;CACZ;;AA9CL;EAiDM,qCAAgD;EAChD,UAAU;CACX;;ACnDL;EAGY,sBVMgB;EULhB,qCAAgD;CACnD;;AALT;EAOY,WAAW;CACd;;AART;EAUY,kCAAkC;EAClC,UAAU;CACb;;ACZT;EAGM,cAAc;EACd,+BAA6C;EAC7C,uBAAS;CACV;;AANL;EAWM,sBXFsB;EWGtB,qCAAgD;CACjD;;ACbL;EAEI,cAAc;CACf;;AAHH;EAMI,eAAe;CAKhB;;AAXH;EASM,eAAe;CAChB;;ACVL;EAGM,oCAA+B;CAChC;;ACJL;EAEI,cAAc;CACf;;AAHH;EAMI,eAAe;CAMhB;;AAZH;EASM,eAAe;EACf,WAAW;CACZ;;ACXL;EAGM,WAAW;EACX,cAAc;CACf;;AALL;;;;EAWM,WAAW;EACX,iBAAiB;CAClB;;AAbL;EAgBM,efbyB;Cec1B;;AAjBL;EAsBM,WAAW;EACX,iBAAiB;CAClB;;AAxBL;EA2BM,WAAW;EACX,cAAc;CACf;;AC7BL;;EAIM,cAAc;CACf;;AALL;EASI,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;ACVH;EAIM,oBAAoB;CACrB;;AALL;EASI,oBAAoB;EACpB,iBAAiB;CAKlB;;AAfH;EAaM,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;ACdL;EAIM,mBlBaoB;CkBZrB;;ACLL;;;;EAKI,0BAA0B;CAC3B;;AANH;EAUM,0BAA0B;CAC3B;;AAXL;;;EAgBM,kCAA0B;EAA1B,0BAA0B;CAC3B;;AAjBL;EAsBM,kCAA0B;EAA1B,0BAA0B;CAC3B;;AAvBL;EA4BM,YAAY;EACZ,4BAAgB;EAAhB,wBAAgB;EAAhB,oBAAgB;EAChB,0BAA0B;CAC3B;;AAIL;;;;;EAOM,8EAAyE;EAAzE,sEAAyE;EACzE,WAAW;CACZ;;AAIL;;;;;EAOM,mEAAkC;EAAlC,2DAAkC;EAClC,WAAW;CACZ;;AATL;EAYM,0BAA0B;CAC3B;;AAIL;;;;;EAOM,oEAAmC;EAAnC,4DAAmC;EACnC,WAAW;CACZ;;AATL;EAYM,0BAA0B;CAC3B;;AAIL;EAGM,4BAAoB;EAApB,oBAAoB;CACrB;;ACtFL;EAGM,oBAAoB;EACpB,cAAc;CAKf;;AATL;EAOQ,YAAY;CACb;;ACRP;EAEI,cAAc;EACd,oBAAoB;CACrB;;ACJH;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBZuB;CsBaxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBtBuB;EsBuBvB,gBtBvBuB;CsBwBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBlCyB;CsBmC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBXoB;CsBYrB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBrBoB;EsBsBpB,gBtBtBoB;CsBuBrB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBjCsB;CsBkCvB;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBVuB;CsBWxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBpBuB;EsBqBvB,gBtBrBuB;CsBsBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBhCyB;CsBiC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBTuB;CsBUxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBnBuB;EsBoBvB,gBtBpBuB;CsBqBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtB/ByB;CsBgC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBRsB;CsBSvB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBlBsB;EsBmBtB,gBtBnBsB;CsBoBvB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtB9BwB;CsB+BzB;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AChDL;;;;;EAMI,4BAAiC;EACjC,gDAA+C;CAChD;;AARH;EAWI,mBAAmB;CACpB;;ACZH;EACE;;;;IAKI,oBAAoB;IACpB,uBAAuB;IACvB,kCAAkC;IAClC,0BAA0B;GAC3B;CtBivBJ","file":"../pretty-checkbox.css","sourcesContent":["@charset 'utf-8';\r\n\r\n.#{$pretty--class-name} * {\r\n box-sizing: border-box;\r\n}\r\n\r\n//Throw error on invalid input types.\r\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\r\n display: none;\r\n\r\n @if $pretty--debug {\r\n + *:after {\r\n content: $pretty--err-message;\r\n border: 1px solid #dedede;\r\n border-left: 3px solid #d9534f;\r\n padding: 9px;\r\n font-size: 1em;\r\n font-weight: 600;\r\n color: #d9534f;\r\n position: absolute;\r\n z-index: 3;\r\n background: #fbfbfb;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name} {\r\n position: relative;\r\n display: inline-block;\r\n margin-right: 1em;\r\n white-space: nowrap;\r\n line-height: 1;\r\n\r\n input {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n min-width: 1em;\r\n width: 100%;\r\n height: 100%;\r\n z-index: $pretty--z-index-front;\r\n opacity: 0;\r\n margin: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .state {\r\n label {\r\n position: initial;\r\n display: inline-block;\r\n font-weight: normal;\r\n margin: 0;\r\n text-indent: $pretty--label-text-offset;\r\n min-width: $pretty--box-size;\r\n\r\n &:before,\r\n &:after {\r\n content: '';\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n display: block;\r\n box-sizing: border-box;\r\n border-radius: 0;\r\n border: 1px solid transparent;\r\n z-index: $pretty--z-index-back;\r\n position: absolute;\r\n left: 0;\r\n top: $pretty-top-offset;\r\n background-color: transparent;\r\n }\r\n\r\n &:before {\r\n border-color: $pretty--color-default;\r\n }\r\n }\r\n\r\n &.p-is-hover,\r\n &.p-is-indeterminate {\r\n display: none;\r\n }\r\n }\r\n}","$pretty--class-name: pretty !default;\r\n\r\n// colors\r\n$pretty--color-default: #bdc3c7 !default;\r\n$pretty--color-primary: #428bca !default;\r\n$pretty--color-info: #5bc0de !default;\r\n$pretty--color-success: #5cb85c !default;\r\n$pretty--color-warning: #f0ad4e !default;\r\n$pretty--color-danger: #d9534f !default;\r\n$pretty--color-dark: #5a656b !default;\r\n\r\n// z-index\r\n$pretty--z-index-back: 0 !default;\r\n$pretty--z-index-between: 1 !default;\r\n$pretty--z-index-front: 2 !default;\r\n\r\n// box\r\n$pretty--curve-radius: 20% !default;\r\n$pretty--box-size: calc(1em + 2px) !default;\r\n\r\n// text\r\n$pretty--label-text-offset: 1.5em !default;\r\n$pretty--label-text-offset-switch: 2.5em !default;\r\n\r\n// scale\r\n$pretty--2x: 1.2em !default;\r\n\r\n// color set\r\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\r\n\r\n// position\r\n$pretty-top: 8;\r\n$pretty-top-switch: ($pretty-top * 2) * 1%;\r\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\r\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\r\n\r\n// dev \r\n$pretty--debug: false !default;\r\n$pretty--err-message: 'Error: Invalid input type!' !default;","@keyframes zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0);\r\n }\r\n}\r\n\r\n@keyframes tada {\r\n 0% {\r\n animation-timing-function: ease-in;\r\n opacity: 0;\r\n transform: scale(7);\r\n }\r\n\r\n 38% {\r\n animation-timing-function: ease-out;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n 55% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.5);\r\n }\r\n\r\n 72% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 81% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.24);\r\n }\r\n\r\n 89% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 95% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.04);\r\n }\r\n\r\n 100% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes jelly {\r\n 0% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n\r\n 30% {\r\n transform: scale3d(.75, 1.25, 1);\r\n }\r\n\r\n 40% {\r\n transform: scale3d(1.25, .75, 1);\r\n }\r\n\r\n 50% {\r\n transform: scale3d(.85, 1.15, 1);\r\n }\r\n\r\n 65% {\r\n transform: scale3d(1.05, .95, 1);\r\n }\r\n\r\n 75% {\r\n transform: scale3d(.95, 1.05, 1);\r\n }\r\n\r\n 100% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n opacity: 0;\r\n transform: translateZ(-200px) rotate(-45deg);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateZ(0) rotate(0);\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);\r\n }\r\n\r\n 100% {\r\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\r\n }\r\n}",".pretty * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type='checkbox']):not([type='radio']) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n\n.pretty input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: 2;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.pretty .state label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: 1.5em;\n min-width: calc(1em + 2px);\n}\n\n.pretty .state label:before, .pretty .state label:after {\n content: '';\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: 0;\n position: absolute;\n left: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n background-color: transparent;\n}\n\n.pretty .state label:before {\n border-color: #bdc3c7;\n}\n\n.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {\n display: none;\n}\n\n@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px #bdc3c7;\n }\n 100% {\n box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);\n }\n}\n\n.pretty.p-default.p-fill .state label:after {\n transform: scale(1);\n}\n\n.pretty.p-default .state label:after {\n transform: scale(0.6);\n}\n\n.pretty.p-default input:checked ~ .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {\n border-width: calc(1em / 7);\n}\n\n.pretty.p-default.p-thick .state label:after {\n transform: scale(0.4) !important;\n}\n\n.pretty.p-icon .state .icon {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-icon .state .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-icon input:checked ~ .state .icon {\n opacity: 1;\n}\n\n.pretty.p-icon input:checked ~ .state label:before {\n border-color: #5a656b;\n}\n\n.pretty.p-svg .state .svg {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-svg .state svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-svg input:checked ~ .state .svg {\n opacity: 1;\n}\n\n.pretty.p-image .state img {\n opacity: 0;\n position: absolute;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n top: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n left: 0;\n z-index: 0;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n}\n\n.pretty.p-image input:checked ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n\n.pretty.p-switch .state {\n position: relative;\n}\n\n.pretty.p-switch .state:before {\n content: '';\n border: 1px solid #bdc3c7;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: calc(1em + 2px);\n position: absolute;\n top: 0;\n top: calc((0% - (100% - 1em)) - 16%);\n z-index: 0;\n transition: all 0.5s ease;\n}\n\n.pretty.p-switch .state label {\n text-indent: 2.5em;\n}\n\n.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n left: 0;\n border-color: transparent;\n transform: scale(0.8);\n}\n\n.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch input:checked ~ .state label:after {\n background-color: #5a656b !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:after {\n background-color: #fff !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-slim .state:before {\n height: 0.1em;\n background: #bdc3c7 !important;\n top: calc(50% - 0.1em);\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {\n display: none;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {\n display: block;\n}\n\n.pretty.p-has-focus input:focus ~ .state label:before {\n box-shadow: 0px 0px 3px 0px #bdc3c7;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {\n display: none;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {\n display: block;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {\n display: block;\n opacity: 1;\n}\n\n.pretty.p-toggle .state.p-on {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-toggle .state.p-off,\n.pretty.p-toggle .state .icon,\n.pretty.p-toggle .state .svg,\n.pretty.p-toggle .state img {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-off {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-plain input:checked ~ .state label:before,\n.pretty.p-plain.p-toggle .state label:before {\n content: none;\n}\n\n.pretty.p-plain.p-plain .icon {\n transform: scale(1.1);\n}\n\n.pretty.p-round .state label:before, .pretty.p-round .state label:after {\n border-radius: 100%;\n}\n\n.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n}\n\n.pretty.p-round.p-icon .state .icon:before {\n transform: scale(0.8);\n}\n\n.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {\n border-radius: 20%;\n}\n\n.pretty.p-smooth label:before,\n.pretty.p-smooth label:after,\n.pretty.p-smooth .icon,\n.pretty.p-smooth .svg {\n transition: all 0.5s ease;\n}\n\n.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\n}\n\n.pretty.p-smooth input:checked + .state .icon,\n.pretty.p-smooth input:checked + .state .svg,\n.pretty.p-smooth input:checked + .state img {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-plain input:checked + .state label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n}\n\n.pretty.p-tada:not(.p-default) input:checked + .state .icon,\n.pretty.p-tada:not(.p-default) input:checked + .state .svg,\n.pretty.p-tada:not(.p-default) input:checked + .state img,\n.pretty.p-tada:not(.p-default) input:checked + .state label:before,\n.pretty.p-tada:not(.p-default) input:checked + .state label:after {\n animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state .icon,\n.pretty.p-jelly:not(.p-default) input:checked + .state .svg,\n.pretty.p-jelly:not(.p-default) input:checked + .state img,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:after {\n animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state img,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {\n animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {\n animation: pulse 1s;\n}\n\n.pretty input[disabled] {\n cursor: not-allowed;\n display: none;\n}\n\n.pretty input[disabled] ~ * {\n opacity: .5;\n}\n\n.pretty.p-locked input {\n display: none;\n cursor: not-allowed;\n}\n\n.pretty input:checked ~ .state.p-primary label:after,\n.pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg,\n.pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:before,\n.pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:after,\n.pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-primary-o .icon,\n.pretty input:checked ~ .state.p-primary-o .svg,\n.pretty input:checked ~ .state.p-primary-o svg,\n.pretty.p-toggle .state.p-primary-o .icon,\n.pretty.p-toggle .state.p-primary-o .svg,\n.pretty.p-toggle .state.p-primary-o svg {\n color: #428bca;\n stroke: #428bca;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n\n.pretty input:checked ~ .state.p-info label:after,\n.pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg,\n.pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-info-o label:before,\n.pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n\n.pretty input:checked ~ .state.p-info-o label:after,\n.pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-info-o .icon,\n.pretty input:checked ~ .state.p-info-o .svg,\n.pretty input:checked ~ .state.p-info-o svg,\n.pretty.p-toggle .state.p-info-o .icon,\n.pretty.p-toggle .state.p-info-o .svg,\n.pretty.p-toggle .state.p-info-o svg {\n color: #5bc0de;\n stroke: #5bc0de;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n\n.pretty input:checked ~ .state.p-success label:after,\n.pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg,\n.pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-success-o label:before,\n.pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n\n.pretty input:checked ~ .state.p-success-o label:after,\n.pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-success-o .icon,\n.pretty input:checked ~ .state.p-success-o .svg,\n.pretty input:checked ~ .state.p-success-o svg,\n.pretty.p-toggle .state.p-success-o .icon,\n.pretty.p-toggle .state.p-success-o .svg,\n.pretty.p-toggle .state.p-success-o svg {\n color: #5cb85c;\n stroke: #5cb85c;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n\n.pretty input:checked ~ .state.p-warning label:after,\n.pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg,\n.pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:before,\n.pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:after,\n.pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-warning-o .icon,\n.pretty input:checked ~ .state.p-warning-o .svg,\n.pretty input:checked ~ .state.p-warning-o svg,\n.pretty.p-toggle .state.p-warning-o .icon,\n.pretty.p-toggle .state.p-warning-o .svg,\n.pretty.p-toggle .state.p-warning-o svg {\n color: #f0ad4e;\n stroke: #f0ad4e;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n\n.pretty input:checked ~ .state.p-danger label:after,\n.pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg,\n.pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:before,\n.pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:after,\n.pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-danger-o .icon,\n.pretty input:checked ~ .state.p-danger-o .svg,\n.pretty input:checked ~ .state.p-danger-o svg,\n.pretty.p-toggle .state.p-danger-o .icon,\n.pretty.p-toggle .state.p-danger-o .svg,\n.pretty.p-toggle .state.p-danger-o svg {\n color: #d9534f;\n stroke: #d9534f;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {\n border-color: #a02622;\n background-color: #a02622 !important;\n}\n\n.pretty.p-bigger label:before,\n.pretty.p-bigger label:after,\n.pretty.p-bigger .icon,\n.pretty.p-bigger .svg,\n.pretty.p-bigger .img {\n font-size: 1.2em !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n}\n\n.pretty.p-bigger label {\n text-indent: 1.7em;\n}\n\n@media print {\n .pretty .state:before,\n .pretty .state label:before,\n .pretty .state label:after,\n .pretty .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n",".#{$pretty--class-name}.p-default.p-fill {\r\n .state label {\r\n &:after {\r\n transform: scale(1);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default {\r\n .state label {\r\n &:after {\r\n transform: scale(0.6);\r\n }\r\n }\r\n\r\n input:checked ~ .state label {\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default.p-thick {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-width: calc(1em / 7);\r\n }\r\n\r\n &:after {\r\n transform: scale(0.4) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-icon {\r\n .state {\r\n .icon {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n .icon:before {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n .icon {\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: #5a656b;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-svg {\r\n .state {\r\n .svg {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n svg {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state .svg {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-image {\r\n .state {\r\n img {\r\n opacity: 0;\r\n position: absolute;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n top: 0;\r\n top: $pretty-top-offset;\r\n left: 0;\r\n z-index: $pretty--z-index-back;\r\n text-align: center;\r\n line-height: normal;\r\n transform: scale(0.8);\r\n }\r\n }\r\n\r\n input:checked ~ .state img {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-switch {\r\n input{\r\n min-width:2em;\r\n }\r\n .state {\r\n position: relative;\r\n\r\n &:before {\r\n content: '';\r\n border: 1px solid $pretty--color-default;\r\n border-radius: 60px;\r\n width: 2em;\r\n box-sizing: unset;\r\n height: $pretty--box-size;\r\n position: absolute;\r\n top: 0;\r\n top: $pretty-top-offset-switch;\r\n z-index: $pretty--z-index-back;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n label {\r\n text-indent: $pretty--label-text-offset-switch;\r\n\r\n &:before,\r\n &:after {\r\n transition: all 0.5s ease;\r\n border-radius: 100%;\r\n left: 0;\r\n border-color: transparent;\r\n transform: scale(0.8);\r\n }\r\n\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n }\r\n\r\n label:before {\r\n opacity: 0;\r\n }\r\n\r\n label:after {\r\n background-color: $pretty--color-dark !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-fill {\r\n input:checked~.state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n label:before {\r\n opacity: 0;\r\n }\r\n label:after {\r\n background-color: #fff !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-slim {\r\n .state {\r\n &:before {\r\n height: 0.1em;\r\n background: $pretty--color-default !important;\r\n top: calc(50% - 0.1em);\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-hover {\r\n input:hover ~ .state:not(.p-is-hover) {\r\n display: none;\r\n }\r\n\r\n input:hover ~ .state.p-is-hover {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-focus {\r\n input:focus {\r\n ~ .state label:before {\r\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-indeterminate {\r\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\r\n display: none;\r\n }\r\n\r\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n opacity: 1;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-toggle {\r\n .state {\r\n &.p-on {\r\n opacity: 0;\r\n display: none;\r\n }\r\n\r\n &.p-off,\r\n .icon,\r\n .svg,\r\n img {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off .icon {\r\n color: $pretty--color-default;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &.p-on {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off {\r\n opacity: 0;\r\n display: none;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-plain {\r\n input:checked ~ .state label,\r\n &.p-toggle .state label {\r\n &:before {\r\n content: none;\r\n }\r\n }\r\n\r\n &.p-plain .icon {\r\n transform: scale(1.1);\r\n }\r\n}",".#{$pretty--class-name}.p-round {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: 100%;\r\n }\r\n }\r\n\r\n &.p-icon .state .icon {\r\n border-radius: 100%;\r\n overflow: hidden;\r\n\r\n &:before {\r\n transform: scale(0.8);\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-curve {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: $pretty--curve-radius;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-smooth {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg {\r\n transition: all 0.5s ease;\r\n }\r\n\r\n input:checked + .state {\r\n label:after {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n img {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-default input:checked + .state {\r\n label:after {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-plain input:checked + .state {\r\n label:before {\r\n content: '';\r\n transform: scale(0);\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-tada:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\r\n input:checked ~ .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\r\n input:checked ~ .state {\r\n label:before {\r\n animation: pulse 1s;\r\n }\r\n }\r\n}",".#{$pretty--class-name} {\r\n input {\r\n &[disabled] {\r\n cursor: not-allowed;\r\n display: none;\r\n\r\n & ~ * {\r\n opacity: .5;\r\n }\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-locked {\r\n input {\r\n display: none;\r\n cursor: not-allowed;\r\n }\r\n}",".#{$pretty--class-name} {\r\n @each $name, $color in $pretty--colors {\r\n input:checked ~ .state.p-#{$name},\r\n &.p-toggle .state.p-#{$name} {\r\n label:after {\r\n background-color: $color !important;\r\n }\r\n\r\n .icon,\r\n .svg {\r\n color: #fff;\r\n stroke: #fff;\r\n }\r\n }\r\n\r\n input:checked ~ .state.p-#{$name}-o,\r\n &.p-toggle .state.p-#{$name}-o {\r\n label:before {\r\n border-color: $color;\r\n }\r\n\r\n label:after {\r\n background-color: transparent;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n svg {\r\n color: $color;\r\n stroke: $color;\r\n }\r\n }\r\n\r\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\r\n &:after {\r\n background-color: $color !important;\r\n }\r\n }\r\n\r\n &.p-switch input:checked ~ .state.p-#{$name}:before {\r\n border-color: $color;\r\n }\r\n\r\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\r\n background-color: $color !important;\r\n }\r\n\r\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\r\n border-color: darken($color, 20%);\r\n background-color: darken($color, 20%) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-bigger {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg,\r\n .img {\r\n font-size: $pretty--2x !important;\r\n top: calc((0% - (100% - 1em)) - 35%) !important;\r\n }\r\n\r\n label {\r\n text-indent: 1.7em;\r\n }\r\n}","@media print {\r\n .#{$pretty--class-name} {\r\n .state:before,\r\n .state label:before,\r\n .state label:after,\r\n .state .icon {\r\n color-adjust: exact;\r\n /* stylelint-disable */\r\n -webkit-print-color-adjust: exact;\r\n print-color-adjust: exact;\r\n }\r\n }\r\n}"]} \ No newline at end of file diff --git a/dist/pretty-checkbox.css b/dist/pretty-checkbox.css deleted file mode 100644 index 73a30ff..0000000 --- a/dist/pretty-checkbox.css +++ /dev/null @@ -1,959 +0,0 @@ -/** - * pretty-checkbox.css - * - * A pure CSS library to beautify checkbox and radio buttons - * - * Source: https://github.com/lokesh-coder/pretty-checkbox - * Demo: https://lokesh-coder.github.io/pretty-checkbox - * - * Copyright (c) 2017 Lokesh rajendran - */ - -.pretty * { - box-sizing: border-box; -} - -.pretty input:not([type='checkbox']):not([type='radio']) { - display: none; -} - -.pretty { - position: relative; - display: inline-block; - margin-right: 1em; - white-space: nowrap; - line-height: 1; -} - -.pretty input { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: 2; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; -} - -.pretty .state label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: 1.5em; - min-width: calc(1em + 2px); -} - -.pretty .state label:before, -.pretty .state label:after { - content: ''; - width: calc(1em + 2px); - height: calc(1em + 2px); - display: block; - box-sizing: border-box; - border-radius: 0; - border: 1px solid transparent; - z-index: 0; - position: absolute; - left: 0; - top: calc((0% - (100% - 1em)) - 8%); - background-color: transparent; -} - -.pretty .state label:before { - border-color: #bdc3c7; -} - -.pretty .state.p-is-hover, -.pretty .state.p-is-indeterminate { - display: none; -} - -@-webkit-keyframes zoom { - 0% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } -} - -@keyframes zoom { - 0% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } -} - -@-webkit-keyframes tada { - 0% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - -webkit-transform: scale(7); - transform: scale(7); - } - 38% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 55% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - 72% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 81% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.24); - transform: scale(1.24); - } - 89% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 95% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.04); - transform: scale(1.04); - } - 100% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes tada { - 0% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - -webkit-transform: scale(7); - transform: scale(7); - } - 38% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 55% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - 72% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 81% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.24); - transform: scale(1.24); - } - 89% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 95% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.04); - transform: scale(1.04); - } - 100% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@-webkit-keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@-webkit-keyframes rotate { - 0% { - opacity: 0; - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - } - 100% { - opacity: 1; - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - } -} - -@keyframes rotate { - 0% { - opacity: 0; - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - } - 100% { - opacity: 1; - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - } -} - -@-webkit-keyframes pulse { - 0% { - box-shadow: 0px 0px 0px 0px #bdc3c7; - } - 100% { - box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - } -} - -@keyframes pulse { - 0% { - box-shadow: 0px 0px 0px 0px #bdc3c7; - } - 100% { - box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - } -} - -.pretty.p-default.p-fill .state label:after { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.pretty.p-default .state label:after { - -webkit-transform: scale(0.6); - -ms-transform: scale(0.6); - transform: scale(0.6); -} - -.pretty.p-default input:checked ~ .state label:after { - background-color: #bdc3c7 !important; -} - -.pretty.p-default.p-thick .state label:before, -.pretty.p-default.p-thick .state label:after { - border-width: calc(1em / 7); -} - -.pretty.p-default.p-thick .state label:after { - -webkit-transform: scale(0.4) !important; - -ms-transform: scale(0.4) !important; - transform: scale(0.4) !important; -} - -.pretty.p-icon .state .icon { - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc((0% - (100% - 1em)) - 8%); - border: 1px solid transparent; - opacity: 0; -} - -.pretty.p-icon .state .icon:before { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.p-icon input:checked ~ .state .icon { - opacity: 1; -} - -.pretty.p-icon input:checked ~ .state label:before { - border-color: #5a656b; -} - -.pretty.p-svg .state .svg { - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc((0% - (100% - 1em)) - 8%); - border: 1px solid transparent; - opacity: 0; -} - -.pretty.p-svg .state svg { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.p-svg input:checked ~ .state .svg { - opacity: 1; -} - -.pretty.p-image .state img { - opacity: 0; - position: absolute; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - top: calc((0% - (100% - 1em)) - 8%); - left: 0; - z-index: 0; - text-align: center; - line-height: normal; - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.p-image input:checked ~ .state img { - opacity: 1; -} - -.pretty.p-switch input { - min-width: 2em; -} - -.pretty.p-switch .state { - position: relative; -} - -.pretty.p-switch .state:before { - content: ''; - border: 1px solid #bdc3c7; - border-radius: 60px; - width: 2em; - box-sizing: unset; - height: calc(1em + 2px); - position: absolute; - top: 0; - top: calc((0% - (100% - 1em)) - 16%); - z-index: 0; - transition: all 0.5s ease; -} - -.pretty.p-switch .state label { - text-indent: 2.5em; -} - -.pretty.p-switch .state label:before, -.pretty.p-switch .state label:after { - transition: all 0.5s ease; - border-radius: 100%; - left: 0; - border-color: transparent; - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.p-switch .state label:after { - background-color: #bdc3c7 !important; -} - -.pretty.p-switch input:checked ~ .state:before { - border-color: #5a656b; -} - -.pretty.p-switch input:checked ~ .state label:before { - opacity: 0; -} - -.pretty.p-switch input:checked ~ .state label:after { - background-color: #5a656b !important; - left: 1em; -} - -.pretty.p-switch.p-fill input:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b !important; -} - -.pretty.p-switch.p-fill input:checked ~ .state label:before { - opacity: 0; -} - -.pretty.p-switch.p-fill input:checked ~ .state label:after { - background-color: #fff !important; - left: 1em; -} - -.pretty.p-switch.p-slim .state:before { - height: 0.1em; - background: #bdc3c7 !important; - top: calc(50% - 0.1em); -} - -.pretty.p-switch.p-slim input:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b !important; -} - -.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) { - display: none; -} - -.pretty.p-has-hover input:hover ~ .state.p-is-hover { - display: block; -} - -.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon { - display: block; -} - -.pretty.p-has-focus input:focus ~ .state label:before { - box-shadow: 0px 0px 3px 0px #bdc3c7; -} - -.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { - display: none; -} - -.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { - display: block; -} - -.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon { - display: block; - opacity: 1; -} - -.pretty.p-toggle .state.p-on { - opacity: 0; - display: none; -} - -.pretty.p-toggle .state.p-off, -.pretty.p-toggle .state .icon, -.pretty.p-toggle .state .svg, -.pretty.p-toggle .state img { - opacity: 1; - display: inherit; -} - -.pretty.p-toggle .state.p-off .icon { - color: #bdc3c7; -} - -.pretty.p-toggle input:checked ~ .state.p-on { - opacity: 1; - display: inherit; -} - -.pretty.p-toggle input:checked ~ .state.p-off { - opacity: 0; - display: none; -} - -.pretty.p-plain input:checked ~ .state label:before, -.pretty.p-plain.p-toggle .state label:before { - content: none; -} - -.pretty.p-plain.p-plain .icon { - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); -} - -.pretty.p-round .state label:before, -.pretty.p-round .state label:after { - border-radius: 100%; -} - -.pretty.p-round.p-icon .state .icon { - border-radius: 100%; - overflow: hidden; -} - -.pretty.p-round.p-icon .state .icon:before { - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.p-curve .state label:before, -.pretty.p-curve .state label:after { - border-radius: 20%; -} - -.pretty.p-smooth label:before, -.pretty.p-smooth label:after, -.pretty.p-smooth .icon, -.pretty.p-smooth .svg { - transition: all 0.5s ease; -} - -.pretty.p-smooth input:checked + .state label:after { - transition: all 0.3s ease; -} - -.pretty.p-smooth input:checked + .state .icon, -.pretty.p-smooth input:checked + .state .svg, -.pretty.p-smooth input:checked + .state img { - -webkit-animation: zoom 0.2s ease; - animation: zoom 0.2s ease; -} - -.pretty.p-smooth.p-default input:checked + .state label:after { - -webkit-animation: zoom 0.2s ease; - animation: zoom 0.2s ease; -} - -.pretty.p-smooth.p-plain input:checked + .state label:before { - content: ''; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - transition: all 0.5s ease; -} - -.pretty.p-tada:not(.p-default) input:checked + .state .icon, -.pretty.p-tada:not(.p-default) input:checked + .state .svg, -.pretty.p-tada:not(.p-default) input:checked + .state img, -.pretty.p-tada:not(.p-default) input:checked + .state label:before, -.pretty.p-tada:not(.p-default) input:checked + .state label:after { - -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - opacity: 1; -} - -.pretty.p-jelly:not(.p-default) input:checked + .state .icon, -.pretty.p-jelly:not(.p-default) input:checked + .state .svg, -.pretty.p-jelly:not(.p-default) input:checked + .state img, -.pretty.p-jelly:not(.p-default) input:checked + .state label:before, -.pretty.p-jelly:not(.p-default) input:checked + .state label:after { - -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); - animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); - opacity: 1; -} - -.pretty.p-jelly:not(.p-default) input:checked + .state label:before { - border-color: transparent; -} - -.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon, -.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg, -.pretty.p-rotate:not(.p-default) input:checked ~ .state img, -.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before, -.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after { - -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); - animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); - opacity: 1; -} - -.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before { - border-color: transparent; -} - -.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before { - -webkit-animation: pulse 1s; - animation: pulse 1s; -} - -.pretty input[disabled] { - cursor: not-allowed; - display: none; -} - -.pretty input[disabled] ~ * { - opacity: .5; -} - -.pretty.p-locked input { - display: none; - cursor: not-allowed; -} - -.pretty input:checked ~ .state.p-primary label:after, -.pretty.p-toggle .state.p-primary label:after { - background-color: #428bca !important; -} - -.pretty input:checked ~ .state.p-primary .icon, -.pretty input:checked ~ .state.p-primary .svg, -.pretty.p-toggle .state.p-primary .icon, -.pretty.p-toggle .state.p-primary .svg { - color: #fff; - stroke: #fff; -} - -.pretty input:checked ~ .state.p-primary-o label:before, -.pretty.p-toggle .state.p-primary-o label:before { - border-color: #428bca; -} - -.pretty input:checked ~ .state.p-primary-o label:after, -.pretty.p-toggle .state.p-primary-o label:after { - background-color: transparent; -} - -.pretty input:checked ~ .state.p-primary-o .icon, -.pretty input:checked ~ .state.p-primary-o .svg, -.pretty input:checked ~ .state.p-primary-o svg, -.pretty.p-toggle .state.p-primary-o .icon, -.pretty.p-toggle .state.p-primary-o .svg, -.pretty.p-toggle .state.p-primary-o svg { - color: #428bca; - stroke: #428bca; -} - -.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after { - background-color: #428bca !important; -} - -.pretty.p-switch input:checked ~ .state.p-primary:before { - border-color: #428bca; -} - -.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before { - background-color: #428bca !important; -} - -.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before { - border-color: #245682; - background-color: #245682 !important; -} - -.pretty input:checked ~ .state.p-info label:after, -.pretty.p-toggle .state.p-info label:after { - background-color: #5bc0de !important; -} - -.pretty input:checked ~ .state.p-info .icon, -.pretty input:checked ~ .state.p-info .svg, -.pretty.p-toggle .state.p-info .icon, -.pretty.p-toggle .state.p-info .svg { - color: #fff; - stroke: #fff; -} - -.pretty input:checked ~ .state.p-info-o label:before, -.pretty.p-toggle .state.p-info-o label:before { - border-color: #5bc0de; -} - -.pretty input:checked ~ .state.p-info-o label:after, -.pretty.p-toggle .state.p-info-o label:after { - background-color: transparent; -} - -.pretty input:checked ~ .state.p-info-o .icon, -.pretty input:checked ~ .state.p-info-o .svg, -.pretty input:checked ~ .state.p-info-o svg, -.pretty.p-toggle .state.p-info-o .icon, -.pretty.p-toggle .state.p-info-o .svg, -.pretty.p-toggle .state.p-info-o svg { - color: #5bc0de; - stroke: #5bc0de; -} - -.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after { - background-color: #5bc0de !important; -} - -.pretty.p-switch input:checked ~ .state.p-info:before { - border-color: #5bc0de; -} - -.pretty.p-switch.p-fill input:checked ~ .state.p-info:before { - background-color: #5bc0de !important; -} - -.pretty.p-switch.p-slim input:checked ~ .state.p-info:before { - border-color: #2390b0; - background-color: #2390b0 !important; -} - -.pretty input:checked ~ .state.p-success label:after, -.pretty.p-toggle .state.p-success label:after { - background-color: #5cb85c !important; -} - -.pretty input:checked ~ .state.p-success .icon, -.pretty input:checked ~ .state.p-success .svg, -.pretty.p-toggle .state.p-success .icon, -.pretty.p-toggle .state.p-success .svg { - color: #fff; - stroke: #fff; -} - -.pretty input:checked ~ .state.p-success-o label:before, -.pretty.p-toggle .state.p-success-o label:before { - border-color: #5cb85c; -} - -.pretty input:checked ~ .state.p-success-o label:after, -.pretty.p-toggle .state.p-success-o label:after { - background-color: transparent; -} - -.pretty input:checked ~ .state.p-success-o .icon, -.pretty input:checked ~ .state.p-success-o .svg, -.pretty input:checked ~ .state.p-success-o svg, -.pretty.p-toggle .state.p-success-o .icon, -.pretty.p-toggle .state.p-success-o .svg, -.pretty.p-toggle .state.p-success-o svg { - color: #5cb85c; - stroke: #5cb85c; -} - -.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after { - background-color: #5cb85c !important; -} - -.pretty.p-switch input:checked ~ .state.p-success:before { - border-color: #5cb85c; -} - -.pretty.p-switch.p-fill input:checked ~ .state.p-success:before { - background-color: #5cb85c !important; -} - -.pretty.p-switch.p-slim input:checked ~ .state.p-success:before { - border-color: #357935; - background-color: #357935 !important; -} - -.pretty input:checked ~ .state.p-warning label:after, -.pretty.p-toggle .state.p-warning label:after { - background-color: #f0ad4e !important; -} - -.pretty input:checked ~ .state.p-warning .icon, -.pretty input:checked ~ .state.p-warning .svg, -.pretty.p-toggle .state.p-warning .icon, -.pretty.p-toggle .state.p-warning .svg { - color: #fff; - stroke: #fff; -} - -.pretty input:checked ~ .state.p-warning-o label:before, -.pretty.p-toggle .state.p-warning-o label:before { - border-color: #f0ad4e; -} - -.pretty input:checked ~ .state.p-warning-o label:after, -.pretty.p-toggle .state.p-warning-o label:after { - background-color: transparent; -} - -.pretty input:checked ~ .state.p-warning-o .icon, -.pretty input:checked ~ .state.p-warning-o .svg, -.pretty input:checked ~ .state.p-warning-o svg, -.pretty.p-toggle .state.p-warning-o .icon, -.pretty.p-toggle .state.p-warning-o .svg, -.pretty.p-toggle .state.p-warning-o svg { - color: #f0ad4e; - stroke: #f0ad4e; -} - -.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after { - background-color: #f0ad4e !important; -} - -.pretty.p-switch input:checked ~ .state.p-warning:before { - border-color: #f0ad4e; -} - -.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before { - background-color: #f0ad4e !important; -} - -.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before { - border-color: #c77c11; - background-color: #c77c11 !important; -} - -.pretty input:checked ~ .state.p-danger label:after, -.pretty.p-toggle .state.p-danger label:after { - background-color: #d9534f !important; -} - -.pretty input:checked ~ .state.p-danger .icon, -.pretty input:checked ~ .state.p-danger .svg, -.pretty.p-toggle .state.p-danger .icon, -.pretty.p-toggle .state.p-danger .svg { - color: #fff; - stroke: #fff; -} - -.pretty input:checked ~ .state.p-danger-o label:before, -.pretty.p-toggle .state.p-danger-o label:before { - border-color: #d9534f; -} - -.pretty input:checked ~ .state.p-danger-o label:after, -.pretty.p-toggle .state.p-danger-o label:after { - background-color: transparent; -} - -.pretty input:checked ~ .state.p-danger-o .icon, -.pretty input:checked ~ .state.p-danger-o .svg, -.pretty input:checked ~ .state.p-danger-o svg, -.pretty.p-toggle .state.p-danger-o .icon, -.pretty.p-toggle .state.p-danger-o .svg, -.pretty.p-toggle .state.p-danger-o svg { - color: #d9534f; - stroke: #d9534f; -} - -.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after { - background-color: #d9534f !important; -} - -.pretty.p-switch input:checked ~ .state.p-danger:before { - border-color: #d9534f; -} - -.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before { - background-color: #d9534f !important; -} - -.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before { - border-color: #a02622; - background-color: #a02622 !important; -} - -.pretty.p-bigger label:before, -.pretty.p-bigger label:after, -.pretty.p-bigger .icon, -.pretty.p-bigger .svg, -.pretty.p-bigger .img { - font-size: 1.2em !important; - top: calc((0% - (100% - 1em)) - 35%) !important; -} - -.pretty.p-bigger label { - text-indent: 1.7em; -} - -@media print { - .pretty .state:before, - .pretty .state label:before, - .pretty .state label:after, - .pretty .state .icon { - color-adjust: exact; - /* stylelint-disable */ - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } -} diff --git a/dist/pretty-checkbox.min.css b/dist/pretty-checkbox.min.css deleted file mode 100644 index 394fa2c..0000000 --- a/dist/pretty-checkbox.min.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * pretty-checkbox.css - * - * A pure CSS library to beautify checkbox and radio buttons - * - * Source: https://github.com/lokesh-coder/pretty-checkbox - * Demo: https://lokesh-coder.github.io/pretty-checkbox - * - * Copyright (c) 2017 Lokesh rajendran - */ - -.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-webkit-transform:scale(.4)!important;-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);left:0;z-index:0;text-align:center;line-height:normal;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{-webkit-animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{-webkit-animation:jelly .7s cubic-bezier(.25,.46,.45,.94);animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{-webkit-animation:rotate .7s cubic-bezier(.25,.46,.45,.94);animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{-webkit-animation:pulse 1s;animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..ee0ccc9 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,33 @@ +# Website + +This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ yarn start +``` + +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. + +### Build + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + +### Deployment + +``` +$ GIT_USER= USE_SSH=true yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/docs/babel.config.js b/docs/babel.config.js new file mode 100644 index 0000000..0adade1 --- /dev/null +++ b/docs/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/docs/docs/checkbox.mdx b/docs/docs/checkbox.mdx new file mode 100644 index 0000000..a9ec6e2 --- /dev/null +++ b/docs/docs/checkbox.mdx @@ -0,0 +1,213 @@ +--- +id: checkbox +title: Checkbox +--- + +import { IndeterminateCheckbox } from '../src/components/IndeterminateCheckbox'; + +The cornerstone of any UI component is probably the checkbox. Pretty Checkbox support checkoxes with a wide range of usage. Be sure to checkout the [basic concepts guide](main-concepts/intro) for more info! + +## Basic Checkbox + +Our basic checkbox can take on three different shapes: square, `p-curve`, `p-round` + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Colors, Icon, and Animations + +Checkbox supports [colors](main-concepts/colors), [icons](main-concepts/icons), [animations](main-concepts/animations). +There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +```html {1,8,16,24,32} +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ +
+
+ +## Indeterminate + +Pretty checkbox supports indeterminate states, too although you'll need to use a little javascript to make this happen: + +```js title="toggleIndeterminate.js" +// checkbox: HTMLInputElement +// indeterminate: boolean +function toggleIndeterminate(checkbox, indeterminate) { + if (checkbox) { + checkbox.indeterminate = indeterminate; + + // don't forget a11y + checkbox.setAttribute('aria-checked', indeterminate ? 'mixed' : checkbox.checked); + } +} +``` + +### Indeterminates with React + +One way we can make this work is by exposing an `indeterminate` prop and passing a `ref` to the `HTMLInputElement`, the main point here is we want our effect to run whenever `indeterminate` changes: + +```jsx title="Checkbox.jsx" +import React from 'react'; + +function Checkbox({ children, indeterminate, color = '', className = '', ...rest }) { + const ref = React.useRef(null); + + React.useEffect(() => { + if (ref.current) { + ref.current.indeterminate = indeterminate; + } + }, [indeterminate]); + + return ( +
+ +
+ +
+
+ ); +} +``` + + + +### Indeterminates with React Class + +Not on the hooks train yet 🚂 ? No biggie. Just remember we can register side effects in `componentDidMount` since it's called whenever props or state changes :wink: + +```jsx title="Checkbox.jsx" +import React from 'react'; + +export class Checkbox extends React.Component { + constructor(props) { + super(props); + this.ref = React.createRef(); + } + + componentDidMount() { + if (this.ref.current) { + this.ref.current.indeterminate = this.props.indeterminate; + } + } + + render() { + return ( +
+ +
+ +
+
+ ); + } +} +``` diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md new file mode 100644 index 0000000..b48d045 --- /dev/null +++ b/docs/docs/getting-started.md @@ -0,0 +1,77 @@ +--- +id: getting-started +title: Getting Started +slug: / +--- + +## Installation + +Download using `npm` or `yarn`: + +```sh +npm install @djthoms/pretty-checkbox # or +yarn add @djthoms/pretty-checkbox +``` + +### Modern Bundler Usage + +Pretty checkbox works well with modern bundlers such as parcel or webpack (via `css-loader`): + +```js +import '@djthoms/pretty-checkbox'; + +// rest of your app +``` + +If you want to import the `scss` source you can do that, too: + +```js +import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; +``` + +### Sass Usage + +At the heart of Pretty Checkbox is Sass. If you're using `.sass` or `.scss` in your project you can import pretty checkbox there: + +:::info +`~` might not resolve to the `node_modules` directory. If this is the case then you need to reference the relative path to the `pretty-checkbox` installation. +::: + +```scss +@import '~@djthoms/pretty-checkbox/src/pretty-checkbox'; +``` + +### Regular ol' HTML + +And of course you can use a CDN and embed in your html file using the `link` tag :wink: + +```html + +``` + +## Usage + +Once pretty checkbox styles have been added, just add a little bit of markup and we're in business 👩‍💻 + +```jsx live +<> +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +``` diff --git a/docs/docs/main-concepts/animations.mdx b/docs/docs/main-concepts/animations.mdx new file mode 100644 index 0000000..4878f5c --- /dev/null +++ b/docs/docs/main-concepts/animations.mdx @@ -0,0 +1,111 @@ +--- +id: animations +title: Animations +--- + +In terms of basic concepts we're at the end of the road folks. We've learned a lot about what pretty checkbox can do, now it's time to explore the crown jewel of the library: animations. + +
+ +
+ +Animations are broken into two categories: + +1. Animations that **only** work with images +2. Animations that work without images as well (i.e. universal animations) + +Possible values: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +## Universal Animations + +To recap, univeral animations are those that work with or without icons, svg, or images. There are two: + +1. `p-smooth` +2. `p-pulse` + +Add to the root div and they'll work like a charm! + +```html {1,8} +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +## Icon Animations + +Icon animations means these animations are compatbile with `p-svg`, `p-icon`, or `p-image`, There are three: + +1. `p-tada` +2. `p-jelly` +3. `p-rotate` + +```html {1,9,17} +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
diff --git a/docs/docs/main-concepts/colors.mdx b/docs/docs/main-concepts/colors.mdx new file mode 100644 index 0000000..1e8ada1 --- /dev/null +++ b/docs/docs/main-concepts/colors.mdx @@ -0,0 +1,108 @@ +--- +id: colors +title: Colors +--- + +One of the more fun features of pretty checkbox is a wide range of built-in colors to make your controls _even more_ stylish (or to provide users with visual feedback, your choice 😆). + +
+ pretty colors +
+
+ +There are five colors and they can be used two ways: **solid** or **outline** + +## Solid Colors + +Like other selectors, colors are prefixed with `p-` and the the name of the color on `div.state`: + +```html {3} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Outline Colors + +Like solid colors, outline colors go on `div.state`, but with the _suffix_ `-o`. + +:::info +The nuisances of outline colors is easy to miss. The difference between solid and outlines colors is when we use the `-o` suffix we're _also_ changing the colors of the input control's border. +::: + +```html {3} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
diff --git a/docs/docs/main-concepts/icons.mdx b/docs/docs/main-concepts/icons.mdx new file mode 100644 index 0000000..e237b83 --- /dev/null +++ b/docs/docs/main-concepts/icons.mdx @@ -0,0 +1,113 @@ +--- +id: icons +title: Icons +--- + +import { mdiCheck } from '@mdi/js'; + +Icon in the generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three :tada: + +## Icons + +Using icons is easy as eating pie :pie:. It can be done in three easy steps: + +1. Add `p-icon` to the root div +2. Add your icon _before_ the `label` +3. Add an `icon` selector to the tag containing the icon font + +```html {1,4} +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
+ +### Supported Icon Libraries + +Pretty Checkbox has been tested with the following font icons libraries: + +- [Font Awesome](https://fontawesome.com/icons?from=io) +- [Bootstrap Glyphicons](http://fontawesome.io/icons/) +- [Material Icon (MDI)](https://materialdesignicons.com/) +- [Material Icon (ZMDI)](http://zavoloklom.github.io/material-design-iconic-font/icons.html) +- [Material Icon (Google)](https://material.io/icons) +- [Typeicons](http://www.typicons.com/) +- [Ion icons](http://ionicons.com/) + +## SVG + +Similar to icon, using SVG images requires the same three basic steps: + +1. Add `p-svg` to the root div +2. Add your svg _before_ the `label` +3. Add a `svg` selector to the tag containing the SVG element + +```html {1,4} +
+ +
+ + + + +
+
+``` + +
+ +
+ + + + +
+
+ +### Supported SVG Libraries + +- [UIKit](https://getuikit.com/docs/icon) +- [Feather Icons](https://feathericons.com/) + +## Images + +Last, but surely not least, images are supported, too: + +1. Add `p-image` to the root div +2. Add your svg _before_ the `label` +3. Add an `image` selector to the tag containing the `img` element + +```html {1,4} +
+ +
+ check + +
+
+``` + +
+ +
+ check + +
+
diff --git a/docs/docs/main-concepts/intro.md b/docs/docs/main-concepts/intro.md new file mode 100644 index 0000000..f143a8c --- /dev/null +++ b/docs/docs/main-concepts/intro.md @@ -0,0 +1,139 @@ +--- +id: intro +title: Introduction +--- + +At the core of pretty checkbox are three input controls: + +1. Checkbox +2. Radio +3. Switch + +## Concepts + +Each input control uses CSS to mask, or hide, the actual `input` element. This means there are no real accessibility concerns when using using pretty checkbox to beautify 💅 our input controls. + +### Base `div` + +Each control is wrapped by a `div` that contains a class attribute with `pretty`: + +```html +
+``` + +To astute reader might notice `p-default`. This influences many things such as animations, colors, and possible styles that can be applied. We'll learn more about this later :smile: + +### Adding the `input` + +Remember that pretty checkbox _styles_ our `input` control, but we're still on the hook for adding it as a child of our base `div`: + +```html +
+ +
+``` + +`input` is complete hidden to the user via CSS. Inspecting the element we'll see the following styles applied: + +```css +.pretty { + position: relative; + /* truncated... */ +} +.pretty input { + position: absolute; + left: 0; + top: 0; + /* truncated... */ + opacity: 0; + cursor: pointer; +} +``` + +New to CSS? No worries. This effectively hides the `input` from the users by setting the `opacity` to `0`. What's nice here is we're not blocking functionality; our input still behaves like a checkbox. + +### Tieing it All Together + +The last stretch is adding an inner `div` with a class name of `state`. This contains the `label` used to render alongside the input control: + +:::warning Danger, Will Robinson! +Omitting the `label` prevents our pretty input from rendering completely. If you don't need a label add it to the DOM anyway without any content. + +```html +
+ +
+``` + +::: + +```html +
+ +
+ +
+
+``` + +Our `label` element is important. There's a lot of CSS work happening behind the scenes with this little element. By using a combination of `:before` to create the box before the label and `:after` to create the interior of the box, we create our pretty checkbox 😲 + +### Accessibility + +For the most part, pretty checkbox is accessible; however, it's always recommended to add `for` and `id` attributes: + +```html {2,4} +
+ +
+ +
+
+``` + +## Basic Usage + +### Checkbox + +A basic example of checkbox uses the `input` element with `type="checkbox"`: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` + +### Radio + +A basic example of radio uses the `input` element with `type="radio"` and to make our control round we can use the `p-round` selector: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` + +### Switch + +Switch can be used as either a radio or a checkbox – you can decide by changing the `type` attribute value from `checkbox` to `radio` (or vice versa). In the root `div` we need to replace `p-default` with `p-switch` to active switch styles: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` diff --git a/docs/docs/main-concepts/rtl.md b/docs/docs/main-concepts/rtl.md new file mode 100644 index 0000000..44dc5fd --- /dev/null +++ b/docs/docs/main-concepts/rtl.md @@ -0,0 +1,26 @@ +--- +id: rtl +title: RTL +--- + +Pretty Checkbox supports RTL languages starting 3.1.0. + +## Usage + +If you're using a modern bundler like webpack, parcel, or something else you can import `rtl.scss` in your `index.js`: + +```js title="index.js" +import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; +import '@djthoms/pretty-checkbox/src/rtl.scss'; + +// ... +``` + +## Browsers + +For browsers, you can reference `rtl.css`: + +```html title="index.html" + + +``` diff --git a/docs/docs/main-concepts/shapes.mdx b/docs/docs/main-concepts/shapes.mdx new file mode 100644 index 0000000..a276866 --- /dev/null +++ b/docs/docs/main-concepts/shapes.mdx @@ -0,0 +1,219 @@ +--- +id: shapes-size +title: Shapes & Size +--- + +import { ScaleMe } from '../../src/components/ScaleMe'; + +Among the many features of pretty checkbox, shapes might be the most widely used 🤔 + +## Shapes + +:::info +The below section covers regular checkbox and radio usage. For switch check out the switch docs for available shapes :+1: +::: + +Pretty Checkbox offers three shapes that can be used by checkbox and radio controls: + +1. `p-square` (implicit) +2. `p-curve` +3. `p-round` + +add to the root `div` and see your control change! + +### Checkbox Shape + +```jsx live +
+ +
+ +
+
+``` + +### Radio Shape + +```jsx live +
+ +
+ +
+
+``` + +### Mix-n-Match Shapes + +There's no limitation with mix-n-matching shapes. We can create round checkboxes or square radio controls if we want: + +```html {1,7} +
+ +
+ +
+
+
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +### Switch Shapes + +Switch is different from checkbox and radio controls in terms of shapes. There are three shapes availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div. + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Fill Variants + +Fill variants change how the checkbox and radio controls are presented and there are two values that can be used in the root div: `p-fill` and `p-thick` + +```html {1,8} +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Size + +Pretty Checkbox is adaptable and can be scaled easily using `p-bigger` on the root div: + +```html {1} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +### Make it Big (or Tiny) + +Make it as big or as small as you need by using regular ol' CSS! Just add `font-size` to the root div: + +```html {1} +
+ +
+ +
+
+``` + + + +## Plain + +In some cases you might want to drop the border altogether. Pretty Checkbox has a style for that ✅, but it's best when using in conjunction with [icons](icons) and [animations](animations). + +```html {1,4} +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
diff --git a/docs/docs/main-concepts/states.md b/docs/docs/main-concepts/states.md new file mode 100644 index 0000000..39fe4aa --- /dev/null +++ b/docs/docs/main-concepts/states.md @@ -0,0 +1,199 @@ +--- +id: states +title: States +--- + +Pretty Checkbox offers various states including `disabled`, something called "locked" state, and much more :smile: + +## Disabled + +Nothing fancy here, just add `disabled` to the `input` and pretty checkbox will take care of the rest :rocket: + +```jsx live +
+ +
+ +
+
+``` + +## Locked + +"Locked" state is a unique. Adding `p-locked` on the root div will _style_ the control as though it's not disabled, but will block user interaction. + +:::caution +Using `p-locked` might seem exciting, but there are accessibility concerns with using this. Seeing as this is a maintained fork of pretty checkbox it might be removed in the future. +::: + +```jsx live +
+ +
+ +
+
+``` + +## Focus + +Among the many states, we can add a bit of class when our control has focus. We can enable a pleasant `box-shadow` around the control by adding `p-has-focus` to the root div: + +```jsx live +
+ +
+ +
+
+``` + +## Hover + +Upon hover we can swap content using `p-has-hover` on the root div. Using this requires an extra `div` below `state`. The awesome part here is we can mix and match different styles between hovered and regular states 😎 + +```jsx live +
+ +
+ +
+
+ +
+
+``` + +## Toggle + +Pretty Checkbox allows you to show/hide different labels using nothing but CSS using `p-on` and `p-off` on the state div. By default `p-off` will be visible and upon checking `p-on` will become visible. + +```html {1,3,6} +
+ +
+ +
+
+ +
+
+``` + +
+ +
+ +
+
+ +
+
+ +### Without Border + +Using `p-plain` to skip the border: + +```html {1} +
+ +
+ + +
+
+ + +
+
+``` + +
+ +
+ + +
+
+ + +
+
+ +### Mo' Toggle + +Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding! Make it extra fancy by adding [colors](colors), too! + +```html {1,13,25} +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
+``` + +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
diff --git a/docs/docs/radio.md b/docs/docs/radio.md new file mode 100644 index 0000000..4a3ab4a --- /dev/null +++ b/docs/docs/radio.md @@ -0,0 +1,196 @@ +--- +id: radio +title: Radio +--- + +Radio controls are another all-important input control that is widespread in the wild. Be sure to checkout the [basic concepts guide](main-concepts/intro) for more info! + +## Basic Radio + +Our basic checkbox can take on three different shapes: square, `p-curve`, `p-round` (although round makes the most sense): + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Colors, Icon, and Animations + +Radio supports [colors](main-concepts/colors), [icons](main-concepts/icons), [animations](main-concepts/animations). +There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +```html {1,8,16,24,32} +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +## Radio Groups + +For accessibility reasons, it's ideal if we wrap our radio controls in a `fieldset` or another wrapping container with the [correct ARIA roles](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html). + +```html +
+ Pizza Crust +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+``` + +
+ Pizza Crust +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +## Accessibility + +As mentioned before, PCR excels because it leverages built-in components instead of creating soft controls. Patterns such as roving focus/selection, space bar selection, etc. are all given to us _for free_ because we're using **real** checkbox components. Take our pizza crust selection example above: + +- You can select using the space bar +- You can use your left/right arrow keys +- You can use your up/down arrow keys +- Selection cycles between elements when arrow keys are used diff --git a/docs/docs/sass-customize.md b/docs/docs/sass-customize.md new file mode 100644 index 0000000..f8c7a0b --- /dev/null +++ b/docs/docs/sass-customize.md @@ -0,0 +1,122 @@ +--- +id: sass-customize +title: Sass Customize +--- + +Pretty Checkbox is built with [Sass](https://sass-lang.com/). While the particular of transpiling sass to css varies from project-to-project, the recommendation is to use the latest version of [dart-sass](https://www.npmjs.com/package/sass). + +## Variables + +Customize using these handy variables! + +```scss +// not digging the name? Change it! +$pretty--class-name: pretty; + +// customize the colors added to .state +$pretty--color-default: #bdc3c7; +$pretty--color-primary: #428bca; +$pretty--color-info: #5bc0de; +$pretty--color-success: #5cb85c; +$pretty--color-warning: #f0ad4e; +$pretty--color-danger: #d9534f; +$pretty--color-dark: #5a656b; + +// uh, boring z-index stuff, who cares. +$pretty--z-index-back: 0; +$pretty--z-index-between: 1; +$pretty--z-index-front: 2; + +// nobody will change this. +$pretty--debug: false; +$pretty--dev-err: 'Invalid input type!'; +``` + +## Imports + +```scss +// REQUIRED +@import '~@djthoms/pretty-checkbox/scss/variables'; +@import '~@djthoms/pretty-checkbox/scss/core'; + +// OPTIONALS +// fill variants +@import '~@djthoms/pretty-checkbox/scss/elements/default/fill'; +@import '~@djthoms/pretty-checkbox/scss/elements/default/outline'; +@import '~@djthoms/pretty-checkbox/scss/elements/default/thick'; + +// p-icon imports +@import '~@djthoms/pretty-checkbox/scss/elements/font-icon/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/svg/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/image/general'; + +// p-switch imports +@import '~@djthoms/pretty-checkbox/scss/elements/switch/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/switch/fill'; +@import '~@djthoms/pretty-checkbox/scss/elements/switch/slim'; + +// colors +@import '~@djthoms/pretty-checkbox/scss/extras/colors'; + +// animations +@import '~@djthoms/pretty-checkbox/scss/extras/animation'; + +// shapes and style variants +@import '~@djthoms/pretty-checkbox/scss/extras/plain'; +@import '~@djthoms/pretty-checkbox/scss/extras/round'; +@import '~@djthoms/pretty-checkbox/scss/extras/curve'; + +// disabled & locked +@import '~@djthoms/pretty-checkbox/scss/extras/disabled'; +@import '~@djthoms/pretty-checkbox/scss/extras/locked'; + +// extras +@import '~@djthoms/pretty-checkbox/scss/extras/toggle'; +@import '~@djthoms/pretty-checkbox/scss/extras/print'; + +// states +@import '~@djthoms/pretty-checkbox/scss/states/hover'; +@import '~@djthoms/pretty-checkbox/scss/states/focus'; + +// indeterminate +@import '~@djthoms/pretty-checkbox/scss/states/indeterminate'; +``` + +## Webpack, Parcel, & Create React App + +Good news for Parcel, CRA, and `react-scripts` users. Sass is transpiled for you without any extra config required :tada:. + +For webpack it's recommended to use [`mini-css-extract-plugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/#root) alongside `sass-loader` and `sass`. A config might look like this for webpack 4+ + +:::info +`~` module resolution is supported by default with `sass-loader` and webpack 4+. [Read more about sass-loader in the webpack docs](https://webpack.js.org/loaders/sass-loader/#webpackimporter) +::: + +```sh title="setup" +npm i sass sass-loader mini-css-extract-plugin -D +``` + +```js title="webpack.config.js" +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'sass-loader', + options: { + implementation: require('sass'), + }, + }, + ], + }, + ], + }, +}; +``` diff --git a/docs/docs/switch.md b/docs/docs/switch.md new file mode 100644 index 0000000..bdeea93 --- /dev/null +++ b/docs/docs/switch.md @@ -0,0 +1,106 @@ +--- +id: switch +title: Switch +--- + +Switch was briefly at various points in the doc; however, it certainly deserves a its own page so you know how to give your app that mobile-like vibe 📱. + +## Basic Switch + +:::caution +Switch is not compatible with `p-default` or `p-icon` +::: + +Similar to Checkbox and Radio, switch contains a similar DOM structure, but we use `p-switch` instead of the default style with `p-default`: + +```html {1} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +## Shapes & Colors + +:::caution +Switch is not compatible with [outline colors](main-concepts/colors) +::: + +Switch has three unique shapes that can be used: `p-outline`, `p-fill`, and `p-slim`. + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Usage as Radio + +Switch can be used as a checkbox or as a radio – just change the input `type` value to `radio`: + +```html {2} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js new file mode 100644 index 0000000..ba8b475 --- /dev/null +++ b/docs/docusaurus.config.js @@ -0,0 +1,110 @@ +module.exports = { + title: 'Pretty Checkbox', + tagline: 'A pure css library to beautify checkbox and radio buttons.', + url: 'https://your-docusaurus-test-site.com', + baseUrl: '/', + onBrokenLinks: 'throw', + favicon: 'img/favicon.ico', + organizationName: 'atomicpages', // Usually your GitHub org/user name. + projectName: 'pretty-checkbox', // Usually your repo name. + stylesheets: [ + 'https://unpkg.com/@djthoms/pretty-checkbox@3.0.4/dist/pretty-checkbox.min.css', + 'https://cdn.materialdesignicons.com/5.5.55/css/materialdesignicons.min.css', + ], + themes: ['@docusaurus/theme-live-codeblock'], + plugins: [ + [ + '@djthoms/docusaurus-plugin-sass', + { + implementation: require('sass'), + }, + ], + ], + themeConfig: { + // switchConfig: { + // darkIcon: '🌙', + // darkIconStyle: { + // marginLeft: '2px', + // }, + // lightIcon: '\u2600', + // lightIconStyle: { + // marginLeft: '1px', + // }, + // }, + algolia: { + apiKey: 'd3db4a5e15b4370010535093e10fb8c7', + indexName: 'pretty-checkbox', + searchParameters: {}, // Optional (if provided by Algolia) + }, + prism: { + theme: require('prism-react-renderer/themes/github'), + darkTheme: require('prism-react-renderer/themes/palenight'), + }, + navbar: { + title: 'Pretty Checkbox', + logo: { + alt: 'Pretty Checkbox Logo', + src: 'img/logo.svg', + }, + items: [ + { + to: 'docs/', + activeBasePath: 'docs', + label: 'Docs', + position: 'left', + }, + { + href: 'https://github.com/atomicpages/pretty-checkbox', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Getting Started', + to: 'docs/', + }, + { + label: 'Basic Concepts', + to: 'docs/main-concepts/intro/', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'GitHub', + href: 'https://github.com/atomicpages/pretty-checkbox', + }, + { + label: 'Inspired by the original pretty checkbox', + href: 'https://lokesh-coder.github.io/pretty-checkbox/', + }, + ], + }, + ], + copyright: `Made with \u2665 by Dennis Thompson \uFF5C © ${new Date().getFullYear()} \uFF5C Built with Docusaurus.`, + }, + }, + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + sidebarPath: require.resolve('./sidebars.js'), + editUrl: 'https://github.com/atomicpages/pretty-checkbox/edit/master/docs/', + }, + theme: { + customCss: require.resolve('./src/css/custom.scss'), + }, + }, + ], + ], +}; diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..728a0d2 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,41 @@ +{ + "name": "docs", + "version": "0.0.0", + "private": true, + "scripts": { + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "serve": "docusaurus serve" + }, + "dependencies": { + "@docusaurus/core": "^2.0.0-alpha.65", + "@docusaurus/preset-classic": "^2.0.0-alpha.65", + "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.65", + "@mdi/js": "^5.5.55", + "@mdi/react": "^1.4.0", + "@mdx-js/react": "^1.5.8", + "clsx": "^1.1.1", + "react": "^16.8.4", + "react-dom": "^16.8.4" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "prettier": "../node_modules/@djthoms/prettier-config", + "devDependencies": { + "@djthoms/docusaurus-plugin-sass": "^0.2.0", + "sass": "^1.26.10" + } +} diff --git a/docs/sidebars.js b/docs/sidebars.js new file mode 100644 index 0000000..2cc99ed --- /dev/null +++ b/docs/sidebars.js @@ -0,0 +1,22 @@ +module.exports = { + sidebar: [ + 'getting-started', + { + type: 'category', + label: 'Main Concepts', + items: [ + 'main-concepts/intro', + 'main-concepts/rtl', + 'main-concepts/colors', + 'main-concepts/shapes-size', + 'main-concepts/states', + 'main-concepts/icons', + 'main-concepts/animations', + ], + }, + 'checkbox', + 'radio', + 'switch', + 'sass-customize' + ], +}; diff --git a/docs/src/components/IndeterminateCheckbox.js b/docs/src/components/IndeterminateCheckbox.js new file mode 100644 index 0000000..7e59605 --- /dev/null +++ b/docs/src/components/IndeterminateCheckbox.js @@ -0,0 +1,45 @@ +import React from 'react'; + +export const IndeterminateCheckbox = () => { + const ref = React.useRef(null); + const [indeterminate, setIndeterminate] = React.useState(); + + React.useEffect(() => { + if (ref.current) { + ref.current.indeterminate = indeterminate; + } + }, [indeterminate]); + + return ( + <> +
+ { + const { checked } = e.currentTarget; + + setIndeterminate(false); + // prob should go full controlled here, but it's late + e.currentTarget.setAttribute('aria-checked', checked); + }, [])} + /> +
+ + +
+
+ + +
+
+ + + ); +}; diff --git a/docs/src/components/ScaleMe.js b/docs/src/components/ScaleMe.js new file mode 100644 index 0000000..948f444 --- /dev/null +++ b/docs/src/components/ScaleMe.js @@ -0,0 +1,29 @@ +import React from 'react'; + +export const ScaleMe = () => { + const [size, setSize] = React.useState(14); + + return ( + <> +
+ +
+ +
+
+
+ { + setSize(parseInt(e.currentTarget.value)); + }, [])} + /> + + + ); +}; diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss new file mode 100644 index 0000000..4aa30a3 --- /dev/null +++ b/docs/src/css/custom.scss @@ -0,0 +1,80 @@ +@import '../../../src/scss/variables'; + +/* stylelint-disable docusaurus/copyright-header */ + +:root { + --ifm-color-primary: #8d38c2; + --ifm-color-primary-dark: #7f32af; + --ifm-color-primary-darker: #7830a5; + --ifm-color-primary-darkest: #632788; + --ifm-color-primary-light: #9949ca; + --ifm-color-primary-lighter: #9e52cd; + --ifm-color-primary-lightest: #ae6fd6; + --ifm-code-font-size: 95%; +} + +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +header.hero { + color: #fff; + background: linear-gradient(270deg, #124665, #8033b0); + border-bottom: 5px solid #75b7dd; + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 0; + opacity: 0.4; + background-image: url('data:image/svg+xml;charset=utf-8,'); + } + .container { + z-index: 10; + } +} + +.color-preview { + display: inline-block; + width: 1em; + height: 1em; + border-radius: 100%; + margin: 0 2px; + + &.primary { + background-color: $pretty--color-primary; + } + &.info { + background-color: $pretty--color-info; + } + &.success { + background-color: $pretty--color-success; + } + &.warning { + background-color: $pretty--color-warning; + } + &.danger { + background-color: $pretty--color-danger; + } +} + +html[data-theme='dark'] { + a > code { + color: var(--ifm-color-primary-lightest); + } +} + +html[data-theme='light'] { + a > code { + color: var(--ifm-color-primary-darkest); + } + .docusaurus-highlight-code-line { + background-color: #fffbdd; + } +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js new file mode 100644 index 0000000..a3d0c84 --- /dev/null +++ b/docs/src/pages/index.js @@ -0,0 +1,99 @@ +import React from 'react'; +import clsx from 'clsx'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import preview from '../../static/img/preview.gif'; +import styles from './styles.module.css'; + +const features = [ + { + title: <>Easy to Use, + description: ( + <> + Simple CSS selectors makes pretty checkbox a breeze to use. Mix- n' match colors, + animations, and icons to create your perfect checkbox, radio, or switch control. + + ), + }, + { + title: <>Customization Ready, + description: ( + <> + Pretty Checkbox is powered by Sass and allows you to easily customize colors so it + integrates nicely into your design system. + + ), + }, + { + title: <>Powered by HTML, + description: ( + <> + Pretty Checkbox is not a soft control. All inputs are powered by regular HTML which + means it's accessible by default. Show all users of the world-wide web some love ❤️ + + ), + }, +]; + +function Feature({ imageUrl, title, description }) { + const imgUrl = useBaseUrl(imageUrl); + + return ( +
+ {imgUrl && ( +
+ {title} +
+ )} +

{title}

+

{description}

+
+ ); +} + +function Home() { + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + return ( + +
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + Get Started + +
+
+
+
+ {features && features.length > 0 && ( +
+
+
+ {features.map((props, idx) => ( + + ))} +
+
+
+ )} +
+ preview +
+
+ + ); +} + +export default Home; diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css new file mode 100644 index 0000000..4ef126c --- /dev/null +++ b/docs/src/pages/styles.module.css @@ -0,0 +1,37 @@ +/* stylelint-disable docusaurus/copyright-header */ + +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} + +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureImage { + height: 200px; + width: 200px; +} diff --git a/docs/static/.nojekyll b/docs/static/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico new file mode 100644 index 0000000..c0145b6 Binary files /dev/null and b/docs/static/img/favicon.ico differ diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg new file mode 100644 index 0000000..d32953d --- /dev/null +++ b/docs/static/img/logo.svg @@ -0,0 +1,13 @@ + + + Artboard + + + + + + + + + + \ No newline at end of file diff --git a/docs/static/img/preview.gif b/docs/static/img/preview.gif new file mode 100644 index 0000000..a613070 Binary files /dev/null and b/docs/static/img/preview.gif differ diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..4ee9a53 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,15 @@ +[build] + base = "docs/" + publish = "build/" + command = "npm run build" + +[[headers]] + for = "/*" + + [headers.values] + X-Frame-Options = "DENY" + X-XSS-Protection = "1; mode=block" + cache-control = ''' + max-age=0, + no-cache, + must-revalidate''' diff --git a/package.json b/package.json index 8cb112a..88a292b 100644 --- a/package.json +++ b/package.json @@ -1,65 +1,74 @@ { - "name": "pretty-checkbox", - "version": "3.0.3", - "description": "A pure css library to beautify checkbox and radio buttons.", - "main": "dist/pretty-checkbox.min.css", - "scripts": { - "lint":"gulp lint:scss", - "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", - "format": "gulp css:format", - "build": "gulp build", - "ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"", - "release": "corp-semantic-release", - "log": "conventional-github-releaser -p angular -r 0" - }, - "dependencies": {}, - "devDependencies": { - "browser-sync": "^2.8.2", - "conventional-github-releaser": "^1.1.12", - "corp-semantic-release": "^6.1.0", - "del": "^3.0.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "^3.1.1", - "gulp-clean-css": "^3.9.0", - "gulp-header-comment": "^0.2.1", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.1", - "gulp-sequence": "^0.4.6", - "gulp-sourcemaps": "^2.6.1", - "gulp-stylefmt": "^1.1.0", - "gulp-stylelint": "^5.0.0", - "rimraf": "2.6.1", - "stylefmt": "^6.0.0", - "stylelint": "^8.2.0", - "stylelint-config-recommended": "^1.0.0", - "stylelint-config-recommended-scss": "^2.0.0", - "stylelint-scss": "^2.1.0" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", - "link": "https://github.com/lokesh-coder/pretty-checkbox" - }, - "keywords": [ - "checkbox", - "radio", - "bootstrap", - "fonticon", - "icon", - "svg", - "switch", - "toggle", - "sass", - "css3", - "animation", - "pretty", - "check", - "colors" - ], - "author": "Lokesh Rajendran", - "license": "MIT", - "bugs": { - "url": "https://github.com/lokesh-coder/pretty-checkbox/issues" - }, - "homepage": "https://lokesh-coder.github.io/pretty-checkbox" + "name": "@djthoms/pretty-checkbox", + "version": "3.1.0", + "description": "A pure css library to beautify checkbox and radio buttons.", + "main": "dist/pretty-checkbox.min.css", + "scripts": { + "clean": "del dist/", + "lint": "stylelint 'src/**/*.scss'", + "fix:scss": "npm run lint -- --fix", + "prebuild": "npm-run-all -p clean lint", + "pretest": "npm run build && cp dist/pretty-checkbox.css test/.", + "posttest": "del test/pretty-checkbox.css", + "build": "gulp build" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": {}, + "devDependencies": { + "@djthoms/prettier-config": "^2.0.0", + "del": "^5.0.0", + "del-cli": "^3.0.1", + "gulp": "^4.0.2", + "gulp-autoprefixer": "^7.0.0", + "gulp-clean-css": "^4.0.0", + "gulp-header-comment": "^0.8.0", + "gulp-rename": "^2.0.0", + "gulp-sass": "^4.1.0", + "gulp-sourcemaps": "^2.6.1", + "gulp-stylelint": "^13.0.0", + "npm-run-all": "^4.1.5", + "prettier": "^2.0.5", + "sass": "^1.26.10", + "stylelint": "^13.6.1", + "stylelint-config-recommended": "^3.0.0", + "stylelint-config-recommended-scss": "^4.2.0", + "stylelint-scss": "^3.18.0" + }, + "browserslist": [ + "> 5%", + "last 4 versions" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/atomicpages/pretty-checkbox.git", + "link": "https://github.com/atomicpages/pretty-checkbox" + }, + "keywords": [ + "checkbox", + "radio", + "bootstrap", + "fonticon", + "icon", + "svg", + "switch", + "toggle", + "sass", + "css3", + "animation", + "pretty", + "check", + "colors" + ], + "author": "Lokesh Rajendran", + "maintainers": [ + "Dennis Thompson" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/atomicpages/pretty-checkbox/issues" + }, + "homepage": "https://pretty-checkbox.netlify.app/", + "prettier": "@djthoms/prettier-config" } diff --git a/src/pretty-checkbox.scss b/src/pretty-checkbox.scss index 1e6fa0f..c24e590 100644 --- a/src/pretty-checkbox.scss +++ b/src/pretty-checkbox.scss @@ -1,6 +1,6 @@ @import './scss/variables'; @import './scss/core'; -@import './scss/essentials/keyframes'; +@import './scss/essentials/keyframes'; @import './scss/essentials/functions'; @import './scss/essentials/mixins'; @import './scss/elements/default/fill'; @@ -24,4 +24,4 @@ @import './scss/extras/locked'; @import './scss/extras/colors'; @import './scss/extras/bigger'; -@import './scss/extras/print'; \ No newline at end of file +@import './scss/extras/print'; diff --git a/src/rtl.scss b/src/rtl.scss new file mode 100644 index 0000000..6153280 --- /dev/null +++ b/src/rtl.scss @@ -0,0 +1,8 @@ +@import './scss/variables'; + +.#{$pretty--class-name} { + .state label { + margin-left: $pretty--label-text-offset; + text-indent: 0; + } +} diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 13b0736..d634803 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -1,85 +1,85 @@ @charset 'utf-8'; .#{$pretty--class-name} * { - box-sizing: border-box; + box-sizing: border-box; } //Throw error on invalid input types. .#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) { - display: none; + display: none; - @if $pretty--debug { - + *:after { - content: $pretty--err-message; - border: 1px solid #dedede; - border-left: 3px solid #d9534f; - padding: 9px; - font-size: 1em; - font-weight: 600; - color: #d9534f; - position: absolute; - z-index: 3; - background: #fbfbfb; - top: 0; - left: 0; + @if $pretty--debug { + + *:after { + content: $pretty--err-message; + border: 1px solid #dedede; + border-left: 3px solid #d9534f; + padding: 9px; + font-size: 1em; + font-weight: 600; + color: #d9534f; + position: absolute; + z-index: 3; + background: #fbfbfb; + top: 0; + left: 0; + } } - } } .#{$pretty--class-name} { - position: relative; - display: inline-block; - margin-right: 1em; - white-space: nowrap; - line-height: 1; + position: relative; + display: inline-block; + margin-right: 1em; + white-space: nowrap; + line-height: 1; - input { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: $pretty--z-index-front; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; - } - - .state { - label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: $pretty--label-text-offset; - min-width: $pretty--box-size; - - &:before, - &:after { - content: ''; - width: $pretty--box-size; - height: $pretty--box-size; - display: block; - box-sizing: border-box; - border-radius: 0; - border: 1px solid transparent; - z-index: $pretty--z-index-back; + input { position: absolute; left: 0; - top: $pretty-top-offset; - background-color: transparent; - } - - &:before { - border-color: $pretty--color-default; - } + top: 0; + min-width: 1em; + width: 100%; + height: 100%; + z-index: $pretty--z-index-front; + opacity: 0; + margin: 0; + padding: 0; + cursor: pointer; } - &.p-is-hover, - &.p-is-indeterminate { - display: none; + .state { + label { + position: initial; + display: inline-block; + font-weight: normal; + margin: 0; + text-indent: $pretty--label-text-offset; + min-width: $pretty--box-size; + + &:before, + &:after { + content: ''; + width: $pretty--box-size; + height: $pretty--box-size; + display: block; + box-sizing: border-box; + border-radius: 0; + border: 1px solid transparent; + z-index: $pretty--z-index-back; + position: absolute; + left: 0; + top: $pretty-top-offset; + background-color: transparent; + } + + &:before { + border-color: $pretty--color-default; + } + } + + &.p-is-hover, + &.p-is-indeterminate { + display: none; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 915af22..2dcd985 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -26,7 +26,9 @@ $pretty--label-text-offset-switch: 2.5em !default; $pretty--2x: 1.2em !default; // color set -$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default; +$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), + (success, $pretty--color-success), (warning, $pretty--color-warning), + (danger, $pretty--color-danger) !default; // position $pretty-top: 8; @@ -34,6 +36,6 @@ $pretty-top-switch: ($pretty-top * 2) * 1%; $pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%}); $pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch}); -// dev +// dev $pretty--debug: false !default; $pretty--err-message: 'Error: Invalid input type!' !default; diff --git a/src/scss/elements/default/_fill.scss b/src/scss/elements/default/_fill.scss index 33707e2..a8b4628 100644 --- a/src/scss/elements/default/_fill.scss +++ b/src/scss/elements/default/_fill.scss @@ -1,7 +1,7 @@ .#{$pretty--class-name}.p-default.p-fill { - .state label { - &:after { - transform: scale(1); + .state label { + &:after { + transform: scale(1); + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/default/_outline.scss b/src/scss/elements/default/_outline.scss index 0914cc2..c9b3506 100644 --- a/src/scss/elements/default/_outline.scss +++ b/src/scss/elements/default/_outline.scss @@ -1,13 +1,13 @@ .#{$pretty--class-name}.p-default { - .state label { - &:after { - transform: scale(0.6); + .state label { + &:after { + transform: scale(0.6); + } } - } - input:checked ~ .state label { - &:after { - background-color: $pretty--color-default !important; + input:checked ~ .state label { + &:after { + background-color: $pretty--color-default !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/default/_thick.scss b/src/scss/elements/default/_thick.scss index 8c16921..615716b 100644 --- a/src/scss/elements/default/_thick.scss +++ b/src/scss/elements/default/_thick.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name}.p-default.p-thick { - .state label { - &:before, - &:after { - border-width: calc(1em / 7); - } + .state label { + &:before, + &:after { + border-width: calc(1em / 7); + } - &:after { - transform: scale(0.4) !important; + &:after { + transform: scale(0.4) !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/font-icon/_general.scss b/src/scss/elements/font-icon/_general.scss index 5a8ee41..6208472 100644 --- a/src/scss/elements/font-icon/_general.scss +++ b/src/scss/elements/font-icon/_general.scss @@ -1,39 +1,40 @@ .#{$pretty--class-name}.p-icon { - .state { - .icon { - position: absolute; - font-size: 1em; - width: $pretty--box-size; - height: $pretty--box-size; - left: 0; - z-index: $pretty--z-index-between; - text-align: center; - line-height: normal; - top: $pretty-top-offset; - border: 1px solid transparent; - opacity: 0; - } + .state { + .icon { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + left: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } - .icon:before { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: flex; - flex: 1; - justify-content: center; - align-items: center; - line-height: 1; + .icon:before { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } } - } - input:checked ~ .state { - .icon { - opacity: 1; - } + input:checked ~ .state, + input:indeterminate ~ .state { + .icon { + opacity: 1; + } - label:before { - border-color: #5a656b; + label:before { + border-color: #5a656b; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/image/_general.scss b/src/scss/elements/image/_general.scss index f9678c4..fb2df0e 100644 --- a/src/scss/elements/image/_general.scss +++ b/src/scss/elements/image/_general.scss @@ -1,21 +1,22 @@ .#{$pretty--class-name}.p-image { - .state { - img { - opacity: 0; - position: absolute; - width: $pretty--box-size; - height: $pretty--box-size; - top: 0; - top: $pretty-top-offset; - left: 0; - z-index: $pretty--z-index-back; - text-align: center; - line-height: normal; - transform: scale(0.8); + .state { + img { + opacity: 0; + position: absolute; + width: $pretty--box-size; + height: $pretty--box-size; + top: 0; + top: $pretty-top-offset; + left: 0; + z-index: $pretty--z-index-back; + text-align: center; + line-height: normal; + transform: scale(0.8); + } } - } - input:checked ~ .state img { - opacity: 1; - } -} \ No newline at end of file + input:checked ~ .state img, + input:indeterminate ~ .state img { + opacity: 1; + } +} diff --git a/src/scss/elements/svg/_general.scss b/src/scss/elements/svg/_general.scss index f594f53..0ae3a4a 100644 --- a/src/scss/elements/svg/_general.scss +++ b/src/scss/elements/svg/_general.scss @@ -1,33 +1,34 @@ .#{$pretty--class-name}.p-svg { - .state { - .svg { - position: absolute; - font-size: 1em; - width: $pretty--box-size; - height: $pretty--box-size; - left: 0; - z-index: $pretty--z-index-between; - text-align: center; - line-height: normal; - top: $pretty-top-offset; - border: 1px solid transparent; - opacity: 0; - } + .state { + .svg { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + left: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } - svg { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: flex; - flex: 1; - justify-content: center; - align-items: center; - line-height: 1; + svg { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } } - } - input:checked ~ .state .svg { - opacity: 1; - } -} \ No newline at end of file + input:checked ~ .state .svg, + input:indeterminate ~ .state .svg { + opacity: 1; + } +} diff --git a/src/scss/elements/switch/_fill.scss b/src/scss/elements/switch/_fill.scss index 0f0ace5..c934e21 100644 --- a/src/scss/elements/switch/_fill.scss +++ b/src/scss/elements/switch/_fill.scss @@ -1,5 +1,5 @@ .#{$pretty--class-name}.p-switch.p-fill { - input:checked~.state { + input:checked ~ .state { &:before { border-color: $pretty--color-dark; background-color: $pretty--color-dark !important; @@ -12,4 +12,4 @@ left: 1em; } } -} \ No newline at end of file +} diff --git a/src/scss/elements/switch/_general.scss b/src/scss/elements/switch/_general.scss index 7d1fbef..fb0d432 100644 --- a/src/scss/elements/switch/_general.scss +++ b/src/scss/elements/switch/_general.scss @@ -1,54 +1,54 @@ .#{$pretty--class-name}.p-switch { - input{ - min-width:2em; - } - .state { - position: relative; - - &:before { - content: ''; - border: 1px solid $pretty--color-default; - border-radius: 60px; - width: 2em; - box-sizing: unset; - height: $pretty--box-size; - position: absolute; - top: 0; - top: $pretty-top-offset-switch; - z-index: $pretty--z-index-back; - transition: all 0.5s ease; + input { + min-width: 2em; } + .state { + position: relative; - label { - text-indent: $pretty--label-text-offset-switch; + &:before { + content: ''; + border: 1px solid $pretty--color-default; + border-radius: 60px; + width: 2em; + box-sizing: unset; + height: $pretty--box-size; + position: absolute; + top: 0; + top: $pretty-top-offset-switch; + z-index: $pretty--z-index-back; + transition: all 0.5s ease; + } - &:before, - &:after { - transition: all 0.5s ease; - border-radius: 100%; - left: 0; - border-color: transparent; - transform: scale(0.8); - } + label { + text-indent: $pretty--label-text-offset-switch; - &:after { - background-color: $pretty--color-default !important; - } - } - } + &:before, + &:after { + transition: all 0.5s ease; + border-radius: 100%; + left: 0; + border-color: transparent; + transform: scale(0.8); + } - input:checked ~ .state { - &:before { - border-color: $pretty--color-dark; + &:after { + background-color: $pretty--color-default !important; + } + } } - label:before { - opacity: 0; - } + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + } + + label:before { + opacity: 0; + } - label:after { - background-color: $pretty--color-dark !important; - left: 1em; + label:after { + background-color: $pretty--color-dark !important; + left: 1em; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/switch/_slim.scss b/src/scss/elements/switch/_slim.scss index 0b98b7f..cb7c4ec 100644 --- a/src/scss/elements/switch/_slim.scss +++ b/src/scss/elements/switch/_slim.scss @@ -1,16 +1,16 @@ .#{$pretty--class-name}.p-switch.p-slim { - .state { - &:before { - height: 0.1em; - background: $pretty--color-default !important; - top: calc(50% - 0.1em); + .state { + &:before { + height: 0.1em; + background: $pretty--color-default !important; + top: calc(50% - 0.1em); + } } - } - input:checked ~ .state { - &:before { - border-color: $pretty--color-dark; - background-color: $pretty--color-dark !important; + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + background-color: $pretty--color-dark !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/essentials/_functions.scss b/src/scss/essentials/_functions.scss index cfa374b..8b1a393 100644 --- a/src/scss/essentials/_functions.scss +++ b/src/scss/essentials/_functions.scss @@ -1 +1 @@ -// empty \ No newline at end of file +// empty diff --git a/src/scss/essentials/_keyframes.scss b/src/scss/essentials/_keyframes.scss index f0681e0..2a31aec 100644 --- a/src/scss/essentials/_keyframes.scss +++ b/src/scss/essentials/_keyframes.scss @@ -1,102 +1,102 @@ @keyframes zoom { - 0% { - opacity: 0; - transform: scale(0); - } + 0% { + opacity: 0; + transform: scale(0); + } } @keyframes tada { - 0% { - animation-timing-function: ease-in; - opacity: 0; - transform: scale(7); - } - - 38% { - animation-timing-function: ease-out; - opacity: 1; - transform: scale(1); - } - - 55% { - animation-timing-function: ease-in; - transform: scale(1.5); - } - - 72% { - animation-timing-function: ease-out; - transform: scale(1); - } - - 81% { - animation-timing-function: ease-in; - transform: scale(1.24); - } - - 89% { - animation-timing-function: ease-out; - transform: scale(1); - } - - 95% { - animation-timing-function: ease-in; - transform: scale(1.04); - } - - 100% { - animation-timing-function: ease-out; - transform: scale(1); - } + 0% { + animation-timing-function: ease-in; + opacity: 0; + transform: scale(7); + } + + 38% { + animation-timing-function: ease-out; + opacity: 1; + transform: scale(1); + } + + 55% { + animation-timing-function: ease-in; + transform: scale(1.5); + } + + 72% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 81% { + animation-timing-function: ease-in; + transform: scale(1.24); + } + + 89% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 95% { + animation-timing-function: ease-in; + transform: scale(1.04); + } + + 100% { + animation-timing-function: ease-out; + transform: scale(1); + } } @keyframes jelly { - 0% { - transform: scale3d(1, 1, 1); - } + 0% { + transform: scale3d(1, 1, 1); + } - 30% { - transform: scale3d(.75, 1.25, 1); - } + 30% { + transform: scale3d(0.75, 1.25, 1); + } - 40% { - transform: scale3d(1.25, .75, 1); - } + 40% { + transform: scale3d(1.25, 0.75, 1); + } - 50% { - transform: scale3d(.85, 1.15, 1); - } + 50% { + transform: scale3d(0.85, 1.15, 1); + } - 65% { - transform: scale3d(1.05, .95, 1); - } + 65% { + transform: scale3d(1.05, 0.95, 1); + } - 75% { - transform: scale3d(.95, 1.05, 1); - } + 75% { + transform: scale3d(0.95, 1.05, 1); + } - 100% { - transform: scale3d(1, 1, 1); - } + 100% { + transform: scale3d(1, 1, 1); + } } @keyframes rotate { - 0% { - opacity: 0; - transform: translateZ(-200px) rotate(-45deg); - } - - 100% { - opacity: 1; - transform: translateZ(0) rotate(0); - } + 0% { + opacity: 0; + transform: translateZ(-200px) rotate(-45deg); + } + + 100% { + opacity: 1; + transform: translateZ(0) rotate(0); + } } @keyframes pulse { - 0% { - box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0); - } - - 100% { - box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1); - } -} \ No newline at end of file + 0% { + box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0); + } + + 100% { + box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1); + } +} diff --git a/src/scss/essentials/_mixins.scss b/src/scss/essentials/_mixins.scss index cfa374b..8b1a393 100644 --- a/src/scss/essentials/_mixins.scss +++ b/src/scss/essentials/_mixins.scss @@ -1 +1 @@ -// empty \ No newline at end of file +// empty diff --git a/src/scss/extras/_animation.scss b/src/scss/extras/_animation.scss index 0a07282..6e13090 100644 --- a/src/scss/extras/_animation.scss +++ b/src/scss/extras/_animation.scss @@ -1,89 +1,89 @@ .#{$pretty--class-name}.p-smooth { - label:before, - label:after, - .icon, - .svg { - transition: all 0.5s ease; - } - - input:checked + .state { - label:after { - transition: all 0.3s ease; + label:before, + label:after, + .icon, + .svg { + transition: all 0.5s ease; } - .icon, - .svg, - img { - animation: zoom 0.2s ease; + input:checked + .state { + label:after { + transition: all 0.3s ease; + } + + .icon, + .svg, + img { + animation: zoom 0.2s ease; + } } - } - &.p-default input:checked + .state { - label:after { - animation: zoom 0.2s ease; + &.p-default input:checked + .state { + label:after { + animation: zoom 0.2s ease; + } } - } - &.p-plain input:checked + .state { - label:before { - content: ''; - transform: scale(0); - transition: all 0.5s ease; + &.p-plain input:checked + .state { + label:before { + content: ''; + transform: scale(0); + transition: all 0.5s ease; + } } - } } .#{$pretty--class-name}.p-tada:not(.p-default) { - input:checked + .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate; - opacity: 1; + input:checked + .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; + opacity: 1; + } } - } } .#{$pretty--class-name}.p-jelly:not(.p-default) { - input:checked + .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); - opacity: 1; - } + input:checked + .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; + } - label:before { - border-color: transparent; + label:before { + border-color: transparent; + } } - } } .#{$pretty--class-name}.p-rotate:not(.p-default) { - input:checked ~ .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); - opacity: 1; - } + input:checked ~ .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; + } - label:before { - border-color: transparent; + label:before { + border-color: transparent; + } } - } } .#{$pretty--class-name}.p-pulse:not(.p-switch) { - input:checked ~ .state { - label:before { - animation: pulse 1s; + input:checked ~ .state { + label:before { + animation: pulse 1s; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_bigger.scss b/src/scss/extras/_bigger.scss index 95909d0..477cd25 100644 --- a/src/scss/extras/_bigger.scss +++ b/src/scss/extras/_bigger.scss @@ -1,14 +1,14 @@ .#{$pretty--class-name}.p-bigger { - label:before, - label:after, - .icon, - .svg, - .img { - font-size: $pretty--2x !important; - top: calc((0% - (100% - 1em)) - 35%) !important; - } + label:before, + label:after, + .icon, + .svg, + .img { + font-size: $pretty--2x !important; + top: calc((0% - (100% - 1em)) - 35%) !important; + } - label { - text-indent: 1.7em; - } -} \ No newline at end of file + label { + text-indent: 1.7em; + } +} diff --git a/src/scss/extras/_colors.scss b/src/scss/extras/_colors.scss index a127124..d48668b 100644 --- a/src/scss/extras/_colors.scss +++ b/src/scss/extras/_colors.scss @@ -1,53 +1,53 @@ .#{$pretty--class-name} { - @each $name, $color in $pretty--colors { - input:checked ~ .state.p-#{$name}, - &.p-toggle .state.p-#{$name} { - label:after { - background-color: $color !important; - } - - .icon, - .svg { - color: #fff; - stroke: #fff; - } + @each $name, $color in $pretty--colors { + input:checked ~ .state.p-#{$name}, + &.p-toggle .state.p-#{$name} { + label:after { + background-color: $color !important; + } + + .icon, + .svg { + color: #fff; + stroke: #fff; + } + } + + input:checked ~ .state.p-#{$name}-o, + &.p-toggle .state.p-#{$name}-o { + label:before { + border-color: $color; + } + + label:after { + background-color: transparent; + } + + .icon, + .svg, + svg { + color: $color; + stroke: $color; + } + } + + &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label { + &:after { + background-color: $color !important; + } + } + + &.p-switch input:checked ~ .state.p-#{$name}:before { + border-color: $color; + } + + &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before { + background-color: $color !important; + } + + &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before { + border-color: darken($color, 20%); + background-color: darken($color, 20%) !important; + } } - - input:checked ~ .state.p-#{$name}-o, - &.p-toggle .state.p-#{$name}-o { - label:before { - border-color: $color; - } - - label:after { - background-color: transparent; - } - - .icon, - .svg, - svg { - color: $color; - stroke: $color; - } - } - - &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label { - &:after { - background-color: $color !important; - } - } - - &.p-switch input:checked ~ .state.p-#{$name}:before { - border-color: $color; - } - - &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before { - background-color: $color !important; - } - - &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before { - border-color: darken($color, 20%); - background-color: darken($color, 20%) !important; - } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_curve.scss b/src/scss/extras/_curve.scss index b67720a..2a4d318 100644 --- a/src/scss/extras/_curve.scss +++ b/src/scss/extras/_curve.scss @@ -1,8 +1,8 @@ .#{$pretty--class-name}.p-curve { - .state label { - &:before, - &:after { - border-radius: $pretty--curve-radius; + .state label { + &:before, + &:after { + border-radius: $pretty--curve-radius; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_disabled.scss b/src/scss/extras/_disabled.scss index 69a8d45..8b9e88a 100644 --- a/src/scss/extras/_disabled.scss +++ b/src/scss/extras/_disabled.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name} { - input { - &[disabled] { - cursor: not-allowed; - display: none; + input { + &[disabled] { + cursor: not-allowed; + display: none; - & ~ * { - opacity: .5; - } + & ~ * { + opacity: 0.5; + } + } } - } } diff --git a/src/scss/extras/_locked.scss b/src/scss/extras/_locked.scss index 4ae9e6c..e6f0133 100644 --- a/src/scss/extras/_locked.scss +++ b/src/scss/extras/_locked.scss @@ -1,6 +1,6 @@ .#{$pretty--class-name}.p-locked { - input { - display: none; - cursor: not-allowed; - } -} \ No newline at end of file + input { + display: none; + cursor: not-allowed; + } +} diff --git a/src/scss/extras/_plain.scss b/src/scss/extras/_plain.scss index bfa6b09..081de99 100644 --- a/src/scss/extras/_plain.scss +++ b/src/scss/extras/_plain.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name}.p-plain { - input:checked ~ .state label, - &.p-toggle .state label { - &:before { - content: none; + input:checked ~ .state label, + &.p-toggle .state label { + &:before { + content: none; + } } - } - &.p-plain .icon { - transform: scale(1.1); - } -} \ No newline at end of file + &.p-plain .icon { + transform: scale(1.1); + } +} diff --git a/src/scss/extras/_print.scss b/src/scss/extras/_print.scss index aab23f3..a8ad133 100644 --- a/src/scss/extras/_print.scss +++ b/src/scss/extras/_print.scss @@ -1,13 +1,13 @@ @media print { - .#{$pretty--class-name} { - .state:before, - .state label:before, - .state label:after, - .state .icon { - color-adjust: exact; - /* stylelint-disable */ - -webkit-print-color-adjust: exact; - print-color-adjust: exact; + .#{$pretty--class-name} { + .state:before, + .state label:before, + .state label:after, + .state .icon { + color-adjust: exact; + /* stylelint-disable */ + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_round.scss b/src/scss/extras/_round.scss index 87e5960..7e4b2a6 100644 --- a/src/scss/extras/_round.scss +++ b/src/scss/extras/_round.scss @@ -1,17 +1,17 @@ .#{$pretty--class-name}.p-round { - .state label { - &:before, - &:after { - border-radius: 100%; + .state label { + &:before, + &:after { + border-radius: 100%; + } } - } - &.p-icon .state .icon { - border-radius: 100%; - overflow: hidden; + &.p-icon .state .icon { + border-radius: 100%; + overflow: hidden; - &:before { - transform: scale(0.8); + &:before { + transform: scale(0.8); + } } - } } diff --git a/src/scss/extras/_toggle.scss b/src/scss/extras/_toggle.scss index 426291d..3d75113 100644 --- a/src/scss/extras/_toggle.scss +++ b/src/scss/extras/_toggle.scss @@ -1,32 +1,32 @@ .#{$pretty--class-name}.p-toggle { - .state { - &.p-on { - opacity: 0; - display: none; - } + .state { + &.p-on { + opacity: 0; + display: none; + } - &.p-off, - .icon, - .svg, - img { - opacity: 1; - display: inherit; - } + &.p-off, + .icon, + .svg, + img { + opacity: 1; + display: inherit; + } - &.p-off .icon { - color: $pretty--color-default; + &.p-off .icon { + color: $pretty--color-default; + } } - } - input:checked ~ .state { - &.p-on { - opacity: 1; - display: inherit; - } + input:checked ~ .state { + &.p-on { + opacity: 1; + display: inherit; + } - &.p-off { - opacity: 0; - display: none; + &.p-off { + opacity: 0; + display: none; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_focus.scss b/src/scss/states/_focus.scss index 0f7d977..d9caf1a 100644 --- a/src/scss/states/_focus.scss +++ b/src/scss/states/_focus.scss @@ -1,7 +1,7 @@ .#{$pretty--class-name}.p-has-focus { - input:focus { - ~ .state label:before { - box-shadow: 0px 0px 3px 0px rgb(189, 195, 199); + input:focus { + ~ .state label:before { + box-shadow: 0px 0px 3px 0px rgb(189, 195, 199); + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_hover.scss b/src/scss/states/_hover.scss index e996752..aa0419e 100644 --- a/src/scss/states/_hover.scss +++ b/src/scss/states/_hover.scss @@ -1,13 +1,13 @@ .#{$pretty--class-name}.p-has-hover { - input:hover ~ .state:not(.p-is-hover) { - display: none; - } + input:hover ~ .state:not(.p-is-hover) { + display: none; + } - input:hover ~ .state.p-is-hover { - display: block; + input:hover ~ .state.p-is-hover { + display: block; - .icon { - display: block; + .icon { + display: block; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_indeterminate.scss b/src/scss/states/_indeterminate.scss index 4007b3c..c88e164 100644 --- a/src/scss/states/_indeterminate.scss +++ b/src/scss/states/_indeterminate.scss @@ -1,14 +1,14 @@ .#{$pretty--class-name}.p-has-indeterminate { - input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) { - display: none; - } + input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { + display: none; + } - input[type='checkbox']:indeterminate ~.state.p-is-indeterminate { - display: block; + input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { + display: block; - .icon { - display: block; - opacity: 1; + .icon { + display: block; + opacity: 1; + } } - } -} \ No newline at end of file +} diff --git a/src/test.css b/src/test.css deleted file mode 100644 index 2f949f5..0000000 --- a/src/test.css +++ /dev/null @@ -1,1459 +0,0 @@ -.pretty * { - box-sizing: border-box; -} - -.pretty { - position: relative; - display: inline-block; - margin-right: 1em; - line-height: unset; - white-space: nowrap; -} - -.pretty input[type='checkbox'], -.pretty input[type='radio'] { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: 2; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; -} - -.pretty .state label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: 1.5em; -} - -.pretty .state label:before, .pretty .state label:after { - content: ''; - width: calc(1em + 2px); - height: calc(1em + 2px); - display: inline-block; - box-sizing: border-box; - border-radius: 0%; - border: 1px solid transparent; - z-index: 0; - position: absolute; - left: 0; - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 1px); -} - -.pretty .state label:before { - background-color: transparent; - border-color: #bdc3c7; - margin-right: 0.1em; -} - -.pretty .state.--is-hover, .pretty .state.--is-indeterminate { - display: none; -} - -@-webkit-keyframes tada { - 0% { - -webkit-transform: scale(7); - transform: scale(7); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: scale(1.24); - transform: scale(1.24); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 89% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: scale(1.04); - transform: scale(1.04); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@keyframes tada { - 0% { - -webkit-transform: scale(7); - transform: scale(7); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: scale(1.24); - transform: scale(1.24); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 89% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: scale(1.04); - transform: scale(1.04); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@-webkit-keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@-webkit-keyframes rotate { - 0% { - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - opacity: 1; - } -} - -@keyframes rotate { - 0% { - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - opacity: 1; - } -} - -.pretty.--default.--fill input[type='checkbox'] ~ .state label:after, -.pretty.--default.--fill input[type='radio'] ~ .state label:after { - -webkit-transform: scale(1); - transform: scale(1); -} - -.pretty.--default.--fill input[type='checkbox']:checked ~ .state label:after, -.pretty.--default.--fill input[type='radio']:checked ~ .state label:after { - background-color: #bdc3c7; -} - -.pretty.--default input[type='checkbox'] ~ .state label:after, -.pretty.--default input[type='radio'] ~ .state label:after { - -webkit-transform: scale(0.6); - transform: scale(0.6); -} - -.pretty.--default input[type='checkbox']:checked ~ .state label:after, -.pretty.--default input[type='radio']:checked ~ .state label:after { - background-color: #bdc3c7; -} - -.pretty.--default.--thick input[type='checkbox'] ~ .state label:before, .pretty.--default.--thick input[type='checkbox'] ~ .state label:after, -.pretty.--default.--thick input[type='radio'] ~ .state label:before, -.pretty.--default.--thick input[type='radio'] ~ .state label:after { - border-width: 0.13em; -} - -.pretty.--default.--thick input[type='checkbox'] ~ .state label:after, -.pretty.--default.--thick input[type='radio'] ~ .state label:after { - -webkit-transform: scale(0.4) !important; - transform: scale(0.4) !important; -} - -.pretty.--default.--thick input[type='checkbox']:checked + .state label:after, -.pretty.--default.--thick input[type='radio']:checked + .state label:after { - background-color: #bdc3c7; -} - -.pretty.--icon .state .icon { - display: none; - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc(calc(50% - calc(100% - 1em)) - 1px); - border: 1px solid transparent; -} - -.pretty.--icon .state .icon:before { - line-height: normal; - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.--icon input[type='checkbox']:checked ~ .state .icon, -.pretty.--icon input[type='radio']:checked ~ .state .icon { - display: inline-block; - vertical-align: top; -} - -.pretty.--icon input[type='checkbox']:checked ~ .state label:before, -.pretty.--icon input[type='radio']:checked ~ .state label:before { - border-color: #5a656b; -} - -.pretty.--svg .state .svg { - display: none; - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc(calc(50% - calc(100% - 1em)) - 1px); - border: 1px solid transparent; -} - -.pretty.--svg .state svg { - line-height: normal; - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.--svg input[type='checkbox']:checked ~ .state .svg, -.pretty.--svg input[type='radio']:checked ~ .state .svg { - display: inline-block; -} - -.pretty.--image .state img { - display: none; - position: absolute; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 2px); - left: 0; - z-index: 0; - text-align: center; - line-height: normal; - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--image input[type='checkbox']:checked ~ .state img, -.pretty.--image input[type='radio']:checked ~ .state img { - display: inline-block; -} - -.pretty.--switch .state { - position: relative; -} - -.pretty.--switch .state:before { - content: ''; - border: 1px solid #bdc3c7; - border-radius: 60px; - width: 2em; - display: inline-block; - box-sizing: unset; - height: calc(1em + 2px); - position: absolute; - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 2px); - z-index: 0; - transition: all 0.5s ease; -} - -.pretty.--switch .state label { - text-indent: 2.5em; -} - -.pretty.--switch .state label:before, .pretty.--switch .state label:after { - transition: all 0.5s ease; - border-radius: 100%; - left: 0; - border-color: transparent; - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--switch .state label:after { - background-color: #bdc3c7; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state:before, -.pretty.--switch input[type='radio']:checked ~ .state:before { - border-color: #5a656b; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state label:before, -.pretty.--switch input[type='radio']:checked ~ .state label:before { - opacity: 0; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state label:after, -.pretty.--switch input[type='radio']:checked ~ .state label:after { - background-color: #5a656b; - left: 1em; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state label:before { - opacity: 0; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state label:after { - background-color: #fff; - left: 1em; -} - -.pretty.--switch.--slim .state:before { - height: 0.1em; - background: #bdc3c7; - top: calc(50% - 1.5px); -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--on, -.pretty.--toggle input[type='radio'] ~ .state.--on { - display: none; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off, -.pretty.--toggle input[type='checkbox'] ~ .state .icon, -.pretty.--toggle input[type='checkbox'] ~ .state .svg, -.pretty.--toggle input[type='checkbox'] ~ .state img, -.pretty.--toggle input[type='radio'] ~ .state.--off, -.pretty.--toggle input[type='radio'] ~ .state .icon, -.pretty.--toggle input[type='radio'] ~ .state .svg, -.pretty.--toggle input[type='radio'] ~ .state img { - display: inline-block; -} - -.pretty.--toggle input[type='checkbox']:checked ~ .state.--on, -.pretty.--toggle input[type='radio']:checked ~ .state.--on { - display: inline-block; -} - -.pretty.--toggle input[type='checkbox']:checked ~ .state.--off, -.pretty.--toggle input[type='radio']:checked ~ .state.--off { - display: none; -} - -.pretty.--plain input[type='checkbox']:checked ~ .state label:before, -.pretty.--plain input[type='radio']:checked ~ .state label:before, -.pretty.--plain.--toggle input[type='checkbox'] ~ .state label:before, -.pretty.--plain.--toggle input[type='radio'] ~ .state label:before { - content: none; -} - -.pretty.--round input[type='checkbox'] ~ .state label:before, .pretty.--round input[type='checkbox'] ~ .state label:after, -.pretty.--round input[type='radio'] ~ .state label:before, -.pretty.--round input[type='radio'] ~ .state label:after { - border-radius: 100%; -} - -.pretty.--round.--icon .state .icon { - border-radius: 100%; - overflow: hidden; -} - -.pretty.--round.--icon .state .icon:before { - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--curve input[type='checkbox'] ~ .state label:before, .pretty.--curve input[type='checkbox'] ~ .state label:after, -.pretty.--curve input[type='radio'] ~ .state label:before, -.pretty.--curve input[type='radio'] ~ .state label:after { - border-radius: 20%; -} - -.pretty.--smooth input[type='checkbox'] + .state .icon, -.pretty.--smooth input[type='checkbox'] + .state .svg, -.pretty.--smooth input[type='checkbox'] + .state img, -.pretty.--smooth input[type='radio'] + .state .icon, -.pretty.--smooth input[type='radio'] + .state .svg, -.pretty.--smooth input[type='radio'] + .state img { - display: inline-block; - -webkit-transform: scale(0); - transform: scale(0); - opacity: 0; - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox'] + .state label:before, -.pretty.--smooth input[type='radio'] + .state label:before { - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox'] + .state label:after, -.pretty.--smooth input[type='radio'] + .state label:after { - opacity: 0; - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox']:checked + .state .icon, -.pretty.--smooth input[type='checkbox']:checked + .state .svg, -.pretty.--smooth input[type='checkbox']:checked + .state img, -.pretty.--smooth input[type='checkbox']:checked + .state label:after, -.pretty.--smooth input[type='radio']:checked + .state .icon, -.pretty.--smooth input[type='radio']:checked + .state .svg, -.pretty.--smooth input[type='radio']:checked + .state img, -.pretty.--smooth input[type='radio']:checked + .state label:after { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; -} - -.pretty.--smooth input[type='checkbox']:checked + .state img, -.pretty.--smooth input[type='radio']:checked + .state img { - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--smooth input[type='checkbox']:checked + .state label:after, -.pretty.--smooth input[type='radio']:checked + .state label:after { - opacity: 1; -} - -.pretty.--smooth.--default:not(.--fill) input[type='checkbox']:checked + .state label:after, -.pretty.--smooth.--default:not(.--fill) input[type='radio']:checked + .state label:after { - -webkit-transform: scale(0.6); - transform: scale(0.6); -} - -.pretty.--smooth.--plain input[type='checkbox']:checked + .state label:before, -.pretty.--smooth.--plain input[type='radio']:checked + .state label:before { - content: ''; - -webkit-transform: scale(0); - transform: scale(0); -} - -.pretty.--tada input[type='checkbox'] + .state .icon, -.pretty.--tada input[type='checkbox'] + .state .svg, -.pretty.--tada input[type='checkbox'] + .state img, -.pretty.--tada input[type='radio'] + .state .icon, -.pretty.--tada input[type='radio'] + .state .svg, -.pretty.--tada input[type='radio'] + .state img { - display: inline-block; - opacity: 0; -} - -.pretty.--tada input[type='checkbox'] + .state label:after, -.pretty.--tada input[type='radio'] + .state label:after { - opacity: 0; -} - -.pretty.--tada input[type='checkbox']:checked + .state .icon, -.pretty.--tada input[type='checkbox']:checked + .state .svg, -.pretty.--tada input[type='checkbox']:checked + .state img, -.pretty.--tada input[type='checkbox']:checked + .state label:after, -.pretty.--tada input[type='radio']:checked + .state .icon, -.pretty.--tada input[type='radio']:checked + .state .svg, -.pretty.--tada input[type='radio']:checked + .state img, -.pretty.--tada input[type='radio']:checked + .state label:after { - -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - opacity: 1; -} - -.pretty.--tada input[type='checkbox']:checked + .state label:after, -.pretty.--tada input[type='radio']:checked + .state label:after { - opacity: 1; -} - -.pretty.--jelly input[type='checkbox'] + .state .icon, -.pretty.--jelly input[type='checkbox'] + .state .svg, -.pretty.--jelly input[type='checkbox'] + .state img, -.pretty.--jelly input[type='radio'] + .state .icon, -.pretty.--jelly input[type='radio'] + .state .svg, -.pretty.--jelly input[type='radio'] + .state img { - display: inline-block; - opacity: 0; - -webkit-animation-fill-mode: reverse; - animation-fill-mode: reverse; -} - -.pretty.--jelly input[type='checkbox'] + .state label:after, -.pretty.--jelly input[type='radio'] + .state label:after { - opacity: 0; -} - -.pretty.--jelly input[type='checkbox']:checked + .state .icon, -.pretty.--jelly input[type='checkbox']:checked + .state .svg, -.pretty.--jelly input[type='checkbox']:checked + .state img, -.pretty.--jelly input[type='checkbox']:checked + .state label:after, -.pretty.--jelly input[type='radio']:checked + .state .icon, -.pretty.--jelly input[type='radio']:checked + .state .svg, -.pretty.--jelly input[type='radio']:checked + .state img, -.pretty.--jelly input[type='radio']:checked + .state label:after { - -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - opacity: 1; -} - -.pretty.--jelly input[type='checkbox']:checked + .state label:before, -.pretty.--jelly input[type='radio']:checked + .state label:before { - border-color: transparent; -} - -.pretty.--rotate input[type='checkbox'] ~ .state .icon, -.pretty.--rotate input[type='checkbox'] ~ .state .svg, -.pretty.--rotate input[type='checkbox'] ~ .state img, -.pretty.--rotate input[type='radio'] ~ .state .icon, -.pretty.--rotate input[type='radio'] ~ .state .svg, -.pretty.--rotate input[type='radio'] ~ .state img { - display: inline-block; - opacity: 0; - -webkit-animation-fill-mode: reverse; - animation-fill-mode: reverse; -} - -.pretty.--rotate input[type='checkbox'] ~ .state label:after, -.pretty.--rotate input[type='radio'] ~ .state label:after { - opacity: 0; -} - -.pretty.--rotate input[type='checkbox']:checked ~ .state .icon, -.pretty.--rotate input[type='checkbox']:checked ~ .state .svg, -.pretty.--rotate input[type='checkbox']:checked ~ .state img, -.pretty.--rotate input[type='checkbox']:checked ~ .state label:after, -.pretty.--rotate input[type='radio']:checked ~ .state .icon, -.pretty.--rotate input[type='radio']:checked ~ .state .svg, -.pretty.--rotate input[type='radio']:checked ~ .state img, -.pretty.--rotate input[type='radio']:checked ~ .state label:after { - -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - opacity: 1; -} - -.pretty.--rotate input[type='checkbox']:checked ~ .state label:before, -.pretty.--rotate input[type='radio']:checked ~ .state label:before { - border-color: transparent; -} - -.pretty input[type='checkbox'][disabled], -.pretty input[type='radio'][disabled] { - display: none; - cursor: not-allowed; -} - -.pretty input[type='checkbox'][disabled] ~ *, -.pretty input[type='radio'][disabled] ~ * { - opacity: 0.5; -} - -.pretty.--locked input[type='checkbox'], -.pretty.--locked input[type='radio'] { - display: none; - cursor: not-allowed; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary .icon, -.pretty input[type='checkbox']:checked ~ .state.--primary svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--primary .icon, -.pretty input[type='radio']:checked ~ .state.--primary svg.svg, -.pretty input[type='radio']:checked ~ .state.--primary .svg svg, -.pretty input[type='radio']:checked ~ .state.--primary .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary label:after, -.pretty input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary label:after { - background-color: #428bca !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--primary-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--primary-o .icon, -.pretty input[type='radio']:checked ~ .state.--primary-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg > * { - stroke: #428bca; - color: #428bca; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o label:before, -.pretty input[type='radio']:checked ~ .state.--primary-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:before { - border-color: #428bca !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o label:after, -.pretty input[type='radio']:checked ~ .state.--primary-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:after { - background-color: #428bca !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--primary-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--primary-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--primary-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--primary-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--primary-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--primary-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary label:after { - background-color: #428bca !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o .icon { - color: #428bca; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:before { - border-color: #428bca !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:after { - background-color: #428bca; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary:before { - border-color: #428bca; - background-color: #428bca; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary-o:before { - border-color: #428bca; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary:before { - border-color: #428bca; - background-color: #428bca; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary label:after { - background-color: #428bca !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary-o:before { - border-color: #245682; - background-color: #245682; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--info .icon, -.pretty input[type='checkbox']:checked ~ .state.--info svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--info .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--info .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--info .icon, -.pretty input[type='radio']:checked ~ .state.--info svg.svg, -.pretty input[type='radio']:checked ~ .state.--info .svg svg, -.pretty input[type='radio']:checked ~ .state.--info .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--info label:after, -.pretty input[type='radio']:checked ~ .state.--info label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info label:after { - background-color: #5bc0de !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--info-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--info-o .icon, -.pretty input[type='radio']:checked ~ .state.--info-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--info-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--info-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg > * { - stroke: #5bc0de; - color: #5bc0de; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o label:before, -.pretty input[type='radio']:checked ~ .state.--info-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:before { - border-color: #5bc0de !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o label:after, -.pretty input[type='radio']:checked ~ .state.--info-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:after { - background-color: #5bc0de !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--info-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--info-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--info-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--info-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--info-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--info-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--info .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--info label:after { - background-color: #5bc0de !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o .icon { - color: #5bc0de; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:before { - border-color: #5bc0de !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:after { - background-color: #5bc0de; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info:before { - border-color: #5bc0de; - background-color: #5bc0de; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info-o:before { - border-color: #5bc0de; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info:before { - border-color: #5bc0de; - background-color: #5bc0de; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info label:after { - background-color: #5bc0de !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info-o:before { - border-color: #2390b0; - background-color: #2390b0; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--success .icon, -.pretty input[type='checkbox']:checked ~ .state.--success svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--success .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--success .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--success .icon, -.pretty input[type='radio']:checked ~ .state.--success svg.svg, -.pretty input[type='radio']:checked ~ .state.--success .svg svg, -.pretty input[type='radio']:checked ~ .state.--success .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--success label:after, -.pretty input[type='radio']:checked ~ .state.--success label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success label:after { - background-color: #5cb85c !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--success-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--success-o .icon, -.pretty input[type='radio']:checked ~ .state.--success-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--success-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--success-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg > * { - stroke: #5cb85c; - color: #5cb85c; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o label:before, -.pretty input[type='radio']:checked ~ .state.--success-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:before { - border-color: #5cb85c !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o label:after, -.pretty input[type='radio']:checked ~ .state.--success-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:after { - background-color: #5cb85c !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--success-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--success-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--success-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--success-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--success-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--success-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--success .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--success label:after { - background-color: #5cb85c !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o .icon { - color: #5cb85c; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:before { - border-color: #5cb85c !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:after { - background-color: #5cb85c; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success:before { - border-color: #5cb85c; - background-color: #5cb85c; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success-o:before { - border-color: #5cb85c; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success:before { - border-color: #5cb85c; - background-color: #5cb85c; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success label:after { - background-color: #5cb85c !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success-o:before { - border-color: #357935; - background-color: #357935; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning .icon, -.pretty input[type='checkbox']:checked ~ .state.--warning svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--warning .icon, -.pretty input[type='radio']:checked ~ .state.--warning svg.svg, -.pretty input[type='radio']:checked ~ .state.--warning .svg svg, -.pretty input[type='radio']:checked ~ .state.--warning .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning label:after, -.pretty input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning label:after { - background-color: #f0ad4e !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--warning-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--warning-o .icon, -.pretty input[type='radio']:checked ~ .state.--warning-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg > * { - stroke: #f0ad4e; - color: #f0ad4e; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o label:before, -.pretty input[type='radio']:checked ~ .state.--warning-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:before { - border-color: #f0ad4e !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o label:after, -.pretty input[type='radio']:checked ~ .state.--warning-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:after { - background-color: #f0ad4e !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--warning-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--warning-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--warning-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--warning-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--warning-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--warning-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning label:after { - background-color: #f0ad4e !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o .icon { - color: #f0ad4e; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:before { - border-color: #f0ad4e !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:after { - background-color: #f0ad4e; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning:before { - border-color: #f0ad4e; - background-color: #f0ad4e; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning-o:before { - border-color: #f0ad4e; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning:before { - border-color: #f0ad4e; - background-color: #f0ad4e; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning label:after { - background-color: #f0ad4e !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning-o:before { - border-color: #c77c11; - background-color: #c77c11; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger .icon, -.pretty input[type='checkbox']:checked ~ .state.--danger svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--danger .icon, -.pretty input[type='radio']:checked ~ .state.--danger svg.svg, -.pretty input[type='radio']:checked ~ .state.--danger .svg svg, -.pretty input[type='radio']:checked ~ .state.--danger .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger label:after, -.pretty input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger label:after { - background-color: #d9534f !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--danger-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--danger-o .icon, -.pretty input[type='radio']:checked ~ .state.--danger-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg > * { - stroke: #d9534f; - color: #d9534f; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o label:before, -.pretty input[type='radio']:checked ~ .state.--danger-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:before { - border-color: #d9534f !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o label:after, -.pretty input[type='radio']:checked ~ .state.--danger-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:after { - background-color: #d9534f !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--danger-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--danger-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--danger-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--danger-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--danger-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--danger-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger label:after { - background-color: #d9534f !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o .icon { - color: #d9534f; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:before { - border-color: #d9534f !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:after { - background-color: #d9534f; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger:before { - border-color: #d9534f; - background-color: #d9534f; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger-o:before { - border-color: #d9534f; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger:before { - border-color: #d9534f; - background-color: #d9534f; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger label:after { - background-color: #d9534f !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger-o:before { - border-color: #a02622; - background-color: #a02622; - zoom: 0; -} - -@media print { - .pretty .state:before, - .pretty .state label:before, - .pretty .state label:after { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color-adjust: exact; - } -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state:not(.--is-hover), -.pretty.--has-hover input[type='radio']:hover ~ .state:not(.--is-hover) { - display: none; -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover, -.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover { - display: block; -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover .icon { - display: block; -} - -.pretty.--has-focus input[type='checkbox']:focus ~ .state label:before, -.pretty.--has-focus input[type='radio']:focus ~ .state label:before { - box-shadow: 0px 0px 3px 0px #bdc3c7; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.--is-indeterminate) { - display: none; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate { - display: block; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate .icon { - display: block; -} - -/* - -default - outline - fill - thick -icon -svg -image -switch - inside - outside - thin -toggle -insideout - ---common-- -color -print -animation -disabled -round - -*/ diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..e482a1d --- /dev/null +++ b/test/index.html @@ -0,0 +1,30 @@ + + + + + Pretty Checkbox Tests + + + + + + + + + + + + + + + diff --git a/test/scripts/nanoid.js b/test/scripts/nanoid.js new file mode 100644 index 0000000..49e9c28 --- /dev/null +++ b/test/scripts/nanoid.js @@ -0,0 +1,31 @@ +var nanoid = (function () { + 'use strict'; + + // browser-safe version of nanoid@2 + var crypto = self.crypto || self.msCrypto; + + var url = '-_'; + var i = 36; + + while (i--) { + url += i.toString(36); + } + + i = 36; + + while (i-- - 10) { + url += i.toString(36).toUpperCase(); + } + + return function nanoid(size) { + var id = ''; + var bytes = crypto.getRandomValues(new Uint8Array(size || 21)); + i = size || 21; + + while (i--) { + id += url[bytes[i] & 63]; + } + + return id; + }; +})(); diff --git a/test/scripts/sections/basic.js b/test/scripts/sections/basic.js new file mode 100644 index 0000000..a5d4fe6 --- /dev/null +++ b/test/scripts/sections/basic.js @@ -0,0 +1,8 @@ +function basic(fragment) { + var basic = fragment.appendChild(createSection('Basic Checkbox')); + basic.appendChild(createControl('Basic Checkbox')); + basic.appendChild(createControl('Curve Checkbox', { shape: 'p-curve' })); + basic.appendChild(createControl('Round Checkbox', { shape: 'p-round' })); + basic.appendChild(createControl('Fill Checkbox', { variant: 'p-fill' })); + basic.appendChild(createControl('Thick Checkbox', { variant: 'p-thick' })); +} diff --git a/test/scripts/sections/colors.js b/test/scripts/sections/colors.js new file mode 100644 index 0000000..730ae85 --- /dev/null +++ b/test/scripts/sections/colors.js @@ -0,0 +1,34 @@ +function colors(fragment) { + var colors = fragment.appendChild(createSection('Colors')); + colors.appendChild(createControl('Primary', { color: 'p-primary' })); + colors.appendChild(createControl('Info', { color: 'p-info', variant: 'p-fill' })); + + colors.appendChild(createControl('Success', { color: 'p-success', variant: 'p-thick' })); + + colors.appendChild( + createControl('Warning', { + color: 'p-warning', + variant: 'p-thick', + shape: 'p-round', + }) + ); + + colors.appendChild(createControl('Danger', { color: 'p-danger', shape: 'p-curve' })); + + colors.appendChild(createControl('Primary Outline', { color: 'p-primary-o' })); + colors.appendChild(createControl('Info Outline', { color: 'p-info-o', variant: 'p-fill' })); + + colors.appendChild( + createControl('Success Outline', { color: 'p-success-o', variant: 'p-thick' }) + ); + + colors.appendChild( + createControl('Warning Outline', { + color: 'p-warning-o', + variant: 'p-thick', + shape: 'p-round', + }) + ); + + colors.appendChild(createControl('Danger Outline', { color: 'p-danger-o', shape: 'p-curve' })); +} diff --git a/test/scripts/sections/icon.js b/test/scripts/sections/icon.js new file mode 100644 index 0000000..aff7d19 --- /dev/null +++ b/test/scripts/sections/icon.js @@ -0,0 +1,32 @@ +function icon(fragment) { + var icon = fragment.appendChild(createSection('Icon')); + + icon.appendChild( + createControl('mdi-check', { + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); + + icon.appendChild( + createControl('mdi-close', { + shape: 'p-curve', + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); + + icon.appendChild( + createControl('mdi-close-outline', { + shape: 'p-round', + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); +} diff --git a/test/scripts/sections/main.js b/test/scripts/sections/main.js new file mode 100644 index 0000000..a490506 --- /dev/null +++ b/test/scripts/sections/main.js @@ -0,0 +1,8 @@ +function main(fragment) { + basic(fragment); + radio(fragment); + colors(fragment); + icon(fragment); + + return fragment +} diff --git a/test/scripts/sections/radio.js b/test/scripts/sections/radio.js new file mode 100644 index 0000000..d0b7a1a --- /dev/null +++ b/test/scripts/sections/radio.js @@ -0,0 +1,15 @@ +function radio(fragment) { + var radio = fragment.appendChild(createSection('Basic Radio')); + + radio.appendChild( + createControl('Regular Crust', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); + + radio.appendChild( + createControl('Thin Crust', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); + + radio.appendChild( + createControl('Deep Dish', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); +} diff --git a/test/scripts/utils.js b/test/scripts/utils.js new file mode 100644 index 0000000..33d4c26 --- /dev/null +++ b/test/scripts/utils.js @@ -0,0 +1,137 @@ +/** + * @typedef Icon + * @type {object} + * @property {string} dom + * @property {'p-icon' | 'p-svg' | 'p-image'} type + */ + +/** + * @typedef Config + * @type {object} + * @property {'checkbox' | 'radio'} [type] + * @property {string} [name] + * @property {boolean} [switch] + * @property {string} [shape] + * @property {string} [variant] + * @property {string} [name] + * @property {string} [color] + * @property {Icon} icon + */ + +/** + * @param {string} title + * @returns {HTMLElement} + */ +function createSection(title) { + var section = document.createElement('section'); + var heading = section.appendChild(document.createElement('h2')); + heading.innerText = title; + + return section; +} + +function toggleAll() { + var inputs = document.querySelectorAll('input'); + + for (var i = 0; i < inputs.length; i++) { + inputs[i].checked = inputs[i].checked ? false : true; + } +} + +var createControl = (function () { + 'use strict'; + + var parser = (function () { + if (!window.DOMParser) { + return false; + } + + var parser = new DOMParser(); + + try { + parser.parseFromString('x', 'text/html'); + } catch (err) { + return false; + } + + return parser; + })(); + + /** + * A IE-friendly function to parse text into HTML. + * @param {string} html + * @returns {HTMLElement} + */ + function stringToHTML(html) { + if (parser) { + return parser.parseFromString(html, 'text/html').body.firstChild; + } + + var span = document.createElement('span'); + span.innerHTML = html; + + return span.firstChild; + } + + /** + * @param {HTMLElement} element + * @param {string} [config] + */ + function appendSelector(element, config) { + if (config) { + element.className += ' ' + config; + } + } + + /** + * @param {string} children + * @param {Config} config + */ + function createControl(children, config) { + /** @type {Config} */ + var _config = config || {}; + var id = 'pc-' + nanoid(8); + + var pretty = document.createElement('div'); + var input = pretty.appendChild(document.createElement('input')); + var state = pretty.appendChild(document.createElement('div')); + var label = state.appendChild(document.createElement('label')); + + input.id = id; + + if (_config.name) { + input.name = _config.name; + } + + label.setAttribute('for', id); + label.innerText = children; + + pretty.className = 'pretty'; + state.className = 'state'; + + if (!_config.icon && !_config.switch) { + pretty.className += ' p-default'; + } + + if (_config.icon && _config.icon.type && _config.icon.dom) { + appendSelector(pretty, _config.icon.type); + var icon = stringToHTML(_config.icon.dom); + + if (!/icon|svg|image/.test(icon.className)) { + icon.className += ' ' + _config.icon.type.replace('p-', ''); + } + + state.insertBefore(icon, state.firstChild); + } + + appendSelector(state, _config.color); + appendSelector(pretty, _config.shape); + appendSelector(pretty, _config.variant); + + input.setAttribute('type', _config.type || 'checkbox'); + + return pretty; + }; + + return createControl; +})();