From 7a61889f776825b660de26b24e2e51e951b7cf4c Mon Sep 17 00:00:00 2001 From: Lokesh Date: Fri, 20 Oct 2017 19:31:04 -0700 Subject: [PATCH] feat( core ): Size and Alignment - Checkbox and radio button sizes are calculated from parent font size. Aligned to baseline of the application's font. BREAKING CHANGE: The complete API has been changed, and this version does not compatible with v2.x refactor( core ): Complete rewritten of the library feat( animation ): Pulse feat( state ): Introducing state, to work with different checkbox states feat( scale ): Added support to make checkbox bigger feat( SVG ): Added support for svg elements,files and sprites feat( Image ): Added support for tiny images feat( Switch ): New iOS style switches with 3 variants fix( core ): z-index is calculated from 0 to 2 [ #6 , #14 ] feat( lock ): Similar to disable but looks like active [ #17 ] build( CI ): Setup Travis for auto publish from staging to master doc( readme ): Updated with examples, badges, gif preview and a logo doc( readme ): Removed bower installation guide doc( readme ): Changed CDN provider from cdnjs to jsDelivr refactor( core ): All class names starts with prefix `p-` except *pretty*and *state* --- .gitignore | 30 +- .stylelintrc | 3 + .travis.yml | 33 + Gulpfile.js | 101 +- LICENSE | 9 + README.md | 310 ++++- bower.json | 25 - dist/maps/pretty-checkbox.css.map | 1 + dist/pretty-checkbox.css | 959 ++++++++++++++ dist/pretty-checkbox.min.css | 12 + logo.png | Bin 0 -> 5406 bytes package.json | 44 +- preview.gif | Bin 0 -> 97148 bytes src/pretty-checkbox.scss | 27 + src/pretty.css | 1006 -------------- src/pretty.min.css | 1 - src/pretty.scss | 2 - src/scss/_core.scss | 85 ++ src/scss/_variables.scss | 39 + src/scss/decorators/_animation.scss | 52 - src/scss/decorators/_circle.scss | 13 - src/scss/decorators/_color.scss | 55 - src/scss/decorators/_core.scss | 96 -- src/scss/decorators/_curvy.scss | 10 - src/scss/decorators/_hard_animation.scss | 176 --- src/scss/decorators/_hover.scss | 21 - src/scss/decorators/_index.scss | 10 - src/scss/decorators/_override.scss | 1 - src/scss/decorators/_plain.scss | 34 - src/scss/decorators/_toggle.scss | 26 - src/scss/elements/default/_fill.scss | 7 + src/scss/elements/default/_outline.scss | 13 + src/scss/elements/default/_thick.scss | 12 + src/scss/elements/font-icon/_general.scss | 39 + src/scss/elements/image/_general.scss | 21 + src/scss/elements/svg/_general.scss | 33 + src/scss/elements/switch/_fill.scss | 15 + src/scss/elements/switch/_general.scss | 54 + src/scss/elements/switch/_slim.scss | 16 + src/scss/essentials/_functions.scss | 1 + src/scss/essentials/_keyframes.scss | 102 ++ src/scss/essentials/_mixins.scss | 1 + src/scss/extras/_animation.scss | 89 ++ src/scss/extras/_bigger.scss | 14 + src/scss/extras/_colors.scss | 53 + src/scss/extras/_curve.scss | 8 + src/scss/extras/_disabled.scss | 12 + src/scss/extras/_locked.scss | 6 + src/scss/extras/_plain.scss | 12 + src/scss/extras/_print.scss | 13 + src/scss/extras/_round.scss | 17 + src/scss/extras/_toggle.scss | 32 + src/scss/states/_focus.scss | 7 + src/scss/states/_hover.scss | 13 + src/scss/states/_indeterminate.scss | 14 + src/scss/support/_animations.scss | 1 - src/scss/support/_extend.scss | 14 - src/scss/support/_index.scss | 5 - src/scss/support/_mixins.scss | 34 - src/scss/support/_print.scss | 26 - src/scss/support/_variables.scss | 18 - src/test.css | 1459 +++++++++++++++++++++ 62 files changed, 3636 insertions(+), 1706 deletions(-) create mode 100644 .stylelintrc create mode 100644 .travis.yml create mode 100644 LICENSE delete mode 100644 bower.json create mode 100644 dist/maps/pretty-checkbox.css.map create mode 100644 dist/pretty-checkbox.css create mode 100644 dist/pretty-checkbox.min.css create mode 100644 logo.png create mode 100644 preview.gif create mode 100644 src/pretty-checkbox.scss delete mode 100644 src/pretty.css delete mode 100644 src/pretty.min.css delete mode 100644 src/pretty.scss create mode 100644 src/scss/_core.scss create mode 100644 src/scss/_variables.scss delete mode 100644 src/scss/decorators/_animation.scss delete mode 100644 src/scss/decorators/_circle.scss delete mode 100644 src/scss/decorators/_color.scss delete mode 100644 src/scss/decorators/_core.scss delete mode 100644 src/scss/decorators/_curvy.scss delete mode 100644 src/scss/decorators/_hard_animation.scss delete mode 100644 src/scss/decorators/_hover.scss delete mode 100644 src/scss/decorators/_index.scss delete mode 100644 src/scss/decorators/_override.scss delete mode 100644 src/scss/decorators/_plain.scss delete mode 100644 src/scss/decorators/_toggle.scss create mode 100644 src/scss/elements/default/_fill.scss create mode 100644 src/scss/elements/default/_outline.scss create mode 100644 src/scss/elements/default/_thick.scss create mode 100644 src/scss/elements/font-icon/_general.scss create mode 100644 src/scss/elements/image/_general.scss create mode 100644 src/scss/elements/svg/_general.scss create mode 100644 src/scss/elements/switch/_fill.scss create mode 100644 src/scss/elements/switch/_general.scss create mode 100644 src/scss/elements/switch/_slim.scss create mode 100644 src/scss/essentials/_functions.scss create mode 100644 src/scss/essentials/_keyframes.scss create mode 100644 src/scss/essentials/_mixins.scss create mode 100644 src/scss/extras/_animation.scss create mode 100644 src/scss/extras/_bigger.scss create mode 100644 src/scss/extras/_colors.scss create mode 100644 src/scss/extras/_curve.scss create mode 100644 src/scss/extras/_disabled.scss create mode 100644 src/scss/extras/_locked.scss create mode 100644 src/scss/extras/_plain.scss create mode 100644 src/scss/extras/_print.scss create mode 100644 src/scss/extras/_round.scss create mode 100644 src/scss/extras/_toggle.scss create mode 100644 src/scss/states/_focus.scss create mode 100644 src/scss/states/_hover.scss create mode 100644 src/scss/states/_indeterminate.scss delete mode 100644 src/scss/support/_animations.scss delete mode 100644 src/scss/support/_extend.scss delete mode 100644 src/scss/support/_index.scss delete mode 100644 src/scss/support/_mixins.scss delete mode 100644 src/scss/support/_print.scss delete mode 100644 src/scss/support/_variables.scss create mode 100644 src/test.css diff --git a/.gitignore b/.gitignore index bbe21e5..ea83d62 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,29 @@ -node_modules/ -test/ +# Node +node_modules +npm-debug.log +package-lock.json +.npmrc + +# Yarn +yarn-error.log yarn.lock + +# JetBrains +.idea/ + +# VS Code +.vscode/ +.history + +# Windows +Thumbs.db +Desktop.ini + +# Mac +.DS_Store + +# Temporary files +coverage/ +docs +tmp +test \ No newline at end of file diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..0e9aef4 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-recommended-scss" +} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..dff1f88 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,33 @@ +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 +before_script: + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start + - sleep 3 + - git remote rm origin + - git remote add origin https://${GH_TOKEN}@github.com/lokesh-coder/hug.css.git + - 'if [ ${TRAVIS_PULL_REQUEST} = "false" ]; then + git fetch && git checkout master; + git config push.default current; + fi' +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 7803579..cb246fc 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -3,47 +3,110 @@ 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'); +const 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; module.exports = gulp; -gulp.task('browser-sync', function() { +/* BROWSER SYNC */ + +gulp.task('browser-sync', function () { browserSync({ port: 3040, server: { baseDir: "./", directory: true - } + }, + https: true }); }); -gulp.task('sass', function() { +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 } + ] + })); +}); + + +/* COMPILE SCSS */ +gulp.task('compile:scss', function () { return gulp.src('src/**/*.scss') + .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded' }) - .on('error', sass.logError)) + .on('error', sass.logError)) .pipe(autoprefixer({ - browsers: ['> 5%','last 2 versions'], - cascade: false + browsers: ['> 5%', 'last 4 versions'], + cascade: false })) - .pipe(gulp.dest('src/')) - .pipe(sass({ - outputStyle: 'compressed' - })) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest('src/')) + .pipe(sourcemaps.write('./maps')) + .pipe(gulp.dest('dist')) .pipe(browserSync.reload({ stream: true })); }); -gulp.task('bs-reload', function() { - browserSync.reload(); +/* 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']); }); -gulp.task('default', ['sass', 'browser-sync'], function() { - gulp.watch("src/**/*.scss", ['sass', 'bs-reload']); -}); \ No newline at end of file +/* MINIFY CSS */ +gulp.task('minify:css', () => { + 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(` + pretty-checkbox.css + + A pure CSS library to beautify checkbox and radio buttons. + + Source: <%= pkg.repository.link %> + Demo: <%= pkg.homepage %> + + Copyright (c) <%= moment().format('YYYY') %> <%= _.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) +}); + + +gulp.task('default', ['compile:scss', 'browser-sync'], function () { + gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']); +}); diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c66e5dc --- /dev/null +++ b/LICENSE @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2017 Lokesh Rajendran + +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 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 diff --git a/README.md b/README.md index b06471f..fb77d64 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,299 @@ -# :heavy_check_mark: Pretty checkbox +

+
+ Pretty checkbox +

pretty-checkbox.css
+

-No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**! +

A pure CSS library to beautify checkbox and radio buttons.

-Check it out the [Demo](https://lokesh-coder.github.io/pretty-checkbox/) for complete documentation. +

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

+
-### Get started +
+
+
Demo and documentation

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

+
+
-Install the library from `bower` , `npm` or `yarn` package manager +
+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*, ... + * Customize nearly everything with SCSS + * 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 -> bower install pretty-checkbox -``` -```sh -> npm install pretty-checkbox -``` -```sh +> npm install pretty-checkbox // or > yarn add pretty-checkbox ``` -Add `pretty.min.css` in your html +Add `pretty-checkbox.min.css` in your html -From CDN, +
+ +- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) ) ```html - + ``` -or from the source, + +
+ +- **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. -You can also import `pretty.scss` in your main scss file. +
+ +**SCSS** + +You can also import `pretty-checkbox.scss` in your main scss file. ```scss -@import '../PATH/pretty-checkbox/src/pretty.scss'; +@import '~pretty-checkbox/src/pretty.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 +
+ +
+ +
+
``` -`PATH` is where the library is downloaded. -Checkbox markup, +Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default) + +You can combine them. + ```html -
- - -
+
+ +
+ +
+
``` -### Basic examples +
---
-##### Checkbox +#### Switch checkbox + +Switch has three variants `p-outline` `p-fill` `p-slim` ```html -
- - -
+
+ +
+ +
+
``` -##### Radio +
---
+ +#### 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 +
+ +
+ + +
+
``` -Refer the [Documentation](https://lokesh-coder.github.io/pretty-checkbox/) for other features and sass settings. +
+ + Note: class `image` to be added in img tag. + +
-### Custom font library +
+ more details +
-This library supports wide variety of font icon libraries. Currently tested with `FontAwesome` , `Bootstrap Glyphicon` , `Google Material Design icons(material.io)`, `Material Design icons (mdi)` , `Material Design icons (zmdi)` , `Typicons` , `Ionicons`. +
---
-### What else +#### Colors -- Scalable. Can be used in any font sizes -- Cool animations and toggle features -- Customizable. See the demo for `sass` settings -- Used in frameworks like bootstrap, Foundation, Sematic UI -- Supported in all mordern browsers, including mobile devices -- Print friendly -- MIT Licence +There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger` -Thats all, folks! +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 ### 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! -- Inspired from Okendoken's [awesome-bootstrap-checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox). -- Crazy animations are heavily inspired ( copied 😊 ) from [Animista](http://animista.net) +### License +This project is licensed under the MIT License -Contributions are welcome! +
❤
diff --git a/bower.json b/bower.json deleted file mode 100644 index 4c5cba7..0000000 --- a/bower.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "pretty-checkbox", - "description": "Scalable css3 pretty checkbox and radio buttons", - "license": "MIT", - "main": "src/pretty.css", - "homepage": "https://lokesh-coder/github.io/pretty-checkbox", - "authors": [ - "Lokesh " - ], - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "dependencies": {}, - "keywords": [ - "checkbox", - "radio", - "bootstrap", - "css3", - "animations" - ] -} diff --git a/dist/maps/pretty-checkbox.css.map b/dist/maps/pretty-checkbox.css.map new file mode 100644 index 0000000..ff13b3b --- /dev/null +++ b/dist/maps/pretty-checkbox.css.map @@ -0,0 +1 @@ +{"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":"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","file":"../pretty-checkbox.css","sourcesContent":["@charset 'utf-8';\n\n.#{$pretty--class-name} * {\n box-sizing: border-box;\n}\n\n//Throw error on invalid input types.\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\n display: none;\n\n @if $pretty--debug {\n + *:after {\n content: $pretty--err-message;\n border: 1px solid #dedede;\n border-left: 3px solid #d9534f;\n padding: 9px;\n font-size: 1em;\n font-weight: 600;\n color: #d9534f;\n position: absolute;\n z-index: 3;\n background: #fbfbfb;\n top: 0;\n left: 0;\n }\n }\n}\n\n.#{$pretty--class-name} {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n\n input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: $pretty--z-index-front;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .state {\n label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: $pretty--label-text-offset;\n min-width: $pretty--box-size;\n\n &:before,\n &:after {\n content: '';\n width: $pretty--box-size;\n height: $pretty--box-size;\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: $pretty--z-index-back;\n position: absolute;\n left: 0;\n top: $pretty-top-offset;\n background-color: transparent;\n }\n\n &:before {\n border-color: $pretty--color-default;\n }\n }\n\n &.p-is-hover,\n &.p-is-indeterminate {\n display: none;\n }\n }\n}","$pretty--class-name: pretty !default;\n\n// colors\n$pretty--color-default: #bdc3c7 !default;\n$pretty--color-primary: #428bca !default;\n$pretty--color-info: #5bc0de !default;\n$pretty--color-success: #5cb85c !default;\n$pretty--color-warning: #f0ad4e !default;\n$pretty--color-danger: #d9534f !default;\n$pretty--color-dark: #5a656b !default;\n\n// z-index\n$pretty--z-index-back: 0 !default;\n$pretty--z-index-between: 1 !default;\n$pretty--z-index-front: 2 !default;\n\n// box\n$pretty--curve-radius: 20% !default;\n$pretty--box-size: calc(1em + 2px) !default;\n\n// text\n$pretty--label-text-offset: 1.5em !default;\n$pretty--label-text-offset-switch: 2.5em !default;\n\n// scale\n$pretty--2x: 1.2em !default;\n\n// color set\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\n\n// position\n$pretty-top: 8;\n$pretty-top-switch: ($pretty-top * 2) * 1%;\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\n\n// dev \n$pretty--debug: true !default;\n$pretty--err-message: 'Invalid input type!' !default;","@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\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\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\n 30% {\n transform: scale3d(.75, 1.25, 1);\n }\n\n 40% {\n transform: scale3d(1.25, .75, 1);\n }\n\n 50% {\n transform: scale3d(.85, 1.15, 1);\n }\n\n 65% {\n transform: scale3d(1.05, .95, 1);\n }\n\n 75% {\n transform: scale3d(.95, 1.05, 1);\n }\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\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 transparentize($pretty--color-default, 0);\n }\n\n 100% {\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\n }\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 input:not([type='checkbox']):not([type='radio']) + *:after {\n content: \"Invalid input type!\";\n border: 1px solid #dedede;\n border-left: 3px solid #d9534f;\n padding: 9px;\n font-size: 1em;\n font-weight: 600;\n color: #d9534f;\n position: absolute;\n z-index: 3;\n background: #fbfbfb;\n top: 0;\n left: 0;\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 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 {\n .state label {\n &:after {\n transform: scale(1);\n }\n }\n}",".#{$pretty--class-name}.p-default {\n .state label {\n &:after {\n transform: scale(0.6);\n }\n }\n\n input:checked ~ .state label {\n &:after {\n background-color: $pretty--color-default !important;\n }\n }\n}",".#{$pretty--class-name}.p-default.p-thick {\n .state label {\n &:before,\n &:after {\n border-width: calc(1em / 7);\n }\n\n &:after {\n transform: scale(0.4) !important;\n }\n }\n}",".#{$pretty--class-name}.p-icon {\n .state {\n .icon {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n left: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n .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\n input:checked ~ .state {\n .icon {\n opacity: 1;\n }\n\n label:before {\n border-color: #5a656b;\n }\n }\n}",".#{$pretty--class-name}.p-svg {\n .state {\n .svg {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n left: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n 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\n input:checked ~ .state .svg {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-image {\n .state {\n img {\n opacity: 0;\n position: absolute;\n width: $pretty--box-size;\n height: $pretty--box-size;\n top: 0;\n top: $pretty-top-offset;\n left: 0;\n z-index: $pretty--z-index-back;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n }\n }\n\n input:checked ~ .state img {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-switch {\n input{\n width:2em;\n }\n .state {\n position: relative;\n\n &:before {\n content: '';\n border: 1px solid $pretty--color-default;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: $pretty--box-size;\n position: absolute;\n top: 0;\n top: $pretty-top-offset-switch;\n z-index: $pretty--z-index-back;\n transition: all 0.5s ease;\n }\n\n label {\n text-indent: $pretty--label-text-offset-switch;\n\n &:before,\n &: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 &:after {\n background-color: $pretty--color-default !important;\n }\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n }\n\n label:before {\n opacity: 0;\n }\n\n label:after {\n background-color: $pretty--color-dark !important;\n left: 1em;\n }\n }\n}",".#{$pretty--class-name}.p-switch.p-fill {\n input:checked~.state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n label:before {\n opacity: 0;\n }\n label:after {\n background-color: #fff !important;\n left: 1em;\n }\n }\n}",".#{$pretty--class-name}.p-switch.p-slim {\n .state {\n &:before {\n height: 0.1em;\n background: $pretty--color-default !important;\n top: calc(50% - 0.1em);\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n }\n}",".#{$pretty--class-name}.p-has-hover {\n input:hover ~ .state:not(.p-is-hover) {\n display: none;\n }\n\n input:hover ~ .state.p-is-hover {\n display: block;\n\n .icon {\n display: block;\n }\n }\n}",".#{$pretty--class-name}.p-has-focus {\n input:focus {\n ~ .state label:before {\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\n }\n }\n}",".#{$pretty--class-name}.p-has-indeterminate {\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\n display: none;\n }\n\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\n display: block;\n\n .icon {\n display: block;\n opacity: 1;\n }\n }\n}",".#{$pretty--class-name}.p-toggle {\n .state {\n &.p-on {\n opacity: 0;\n display: none;\n }\n\n &.p-off,\n .icon,\n .svg,\n img {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off .icon {\n color: $pretty--color-default;\n }\n }\n\n input:checked ~ .state {\n &.p-on {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off {\n opacity: 0;\n display: none;\n }\n }\n}",".#{$pretty--class-name}.p-plain {\n input:checked ~ .state label,\n &.p-toggle .state label {\n &:before {\n content: none;\n }\n }\n\n &.p-plain .icon {\n transform: scale(1.1);\n }\n}",".#{$pretty--class-name}.p-round {\n .state label {\n &:before,\n &:after {\n border-radius: 100%;\n }\n }\n\n &.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n\n &:before {\n transform: scale(0.8);\n }\n }\n}\n",".#{$pretty--class-name}.p-curve {\n .state label {\n &:before,\n &:after {\n border-radius: $pretty--curve-radius;\n }\n }\n}",".#{$pretty--class-name}.p-smooth {\n label:before,\n label:after,\n .icon,\n .svg {\n transition: all 0.5s ease;\n }\n\n input:checked + .state {\n label:after {\n transition: all 0.3s ease;\n }\n\n .icon,\n .svg,\n img {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-default input:checked + .state {\n label:after {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-plain input:checked + .state {\n label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n }\n }\n}\n\n.#{$pretty--class-name}.p-tada:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\n opacity: 1;\n }\n }\n}\n\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\n input:checked ~ .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\n input:checked ~ .state {\n label:before {\n animation: pulse 1s;\n }\n }\n}",".#{$pretty--class-name} {\n input {\n &[disabled] {\n cursor: not-allowed;\n display: none;\n\n & ~ * {\n opacity: .5;\n }\n }\n }\n}\r\n",".#{$pretty--class-name}.p-locked {\n input {\n display: none;\n cursor: not-allowed;\n }\n}",".#{$pretty--class-name} {\n @each $name, $color in $pretty--colors {\n input:checked ~ .state.p-#{$name},\n &.p-toggle .state.p-#{$name} {\n label:after {\n background-color: $color !important;\n }\n\n .icon,\n .svg {\n color: #fff;\n stroke: #fff;\n }\n }\n\n input:checked ~ .state.p-#{$name}-o,\n &.p-toggle .state.p-#{$name}-o {\n label:before {\n border-color: $color;\n }\n\n label:after {\n background-color: transparent;\n }\n\n .icon,\n .svg,\n svg {\n color: $color;\n stroke: $color;\n }\n }\n\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\n &:after {\n background-color: $color !important;\n }\n }\n\n &.p-switch input:checked ~ .state.p-#{$name}:before {\n border-color: $color;\n }\n\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\n background-color: $color !important;\n }\n\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\n border-color: darken($color, 20%);\n background-color: darken($color, 20%) !important;\n }\n }\n}",".#{$pretty--class-name}.p-bigger {\n label:before,\n label:after,\n .icon,\n .svg,\n .img {\n font-size: $pretty--2x !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n }\n\n label {\n text-indent: 1.7em;\n }\n}","@media print {\n .#{$pretty--class-name} {\n .state:before,\n .state label:before,\n .state label:after,\n .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n}"]} \ No newline at end of file diff --git a/dist/pretty-checkbox.css b/dist/pretty-checkbox.css new file mode 100644 index 0000000..aa84532 --- /dev/null +++ b/dist/pretty-checkbox.css @@ -0,0 +1,959 @@ +.pretty * { + box-sizing: border-box; +} + +.pretty input:not([type='checkbox']):not([type='radio']) { + display: none; +} + +.pretty input:not([type='checkbox']):not([type='radio']) + *:after { + content: "Invalid input type!"; + 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 { + 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 { + 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; + } +} + +/*# sourceMappingURL=maps/pretty-checkbox.css.map */ diff --git a/dist/pretty-checkbox.min.css b/dist/pretty-checkbox.min.css new file mode 100644 index 0000000..d31e1b1 --- /dev/null +++ b/dist/pretty-checkbox.min.css @@ -0,0 +1,12 @@ +/** + * 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 .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;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}} \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..5c738235522b49613a932425dc8ee405667a9bc1 GIT binary patch literal 5406 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 IM6N<$g4tARvj6}9 literal 0 HcmV?d00001 diff --git a/package.json b/package.json index 47ffe23..da1141e 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,59 @@ { "name": "pretty-checkbox", - "version": "2.2.1", - "description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library", - "main": "src/pretty.min.css", + "version": "3.0.0", + "description": "A pure css library to beautify checkbox and radio buttons.", + "main": "dist/pretty.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 --branch master", + "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-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" }, - "scripts": {}, "repository": { "type": "git", - "url": "git+https://github.com/lokesh-coder/pretty-checkbox.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" ], - "author": "lokesh", + "author": "Lokesh Rajendran", "license": "MIT", "bugs": { "url": "https://github.com/lokesh-coder/pretty-checkbox/issues" diff --git a/preview.gif b/preview.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6130703e97a18553d9031ac719b9cc54b0e3e9d GIT binary patch literal 97148 zcmeFa3tY^J{{R1(Yg0`%Q&XmkOgBctL%G>t`?p%|o_f%$s;qtc_T8NHhWGE^Urt~0 z{6+V~~|wsk&!(%SZ*z4HpXEAF)3yU=vy z#+}xN%U93Vo`3ZC>7}dJ8?Q9KdHc5K&6{_~Ha`mC$wd}G)17xy1_w6r~F zYQFL2&D+wdy5|?$yE}TXT)TPwc1!EM`xlz7mQ~lideN&citW8q)pYgx``+H3p5BU@ za~+Q!^>*BP`}S>Cdc)Ia&*~eSo~gT@b#*m0U%&jIr1QyBb~5P=Y_hozO1SakD~VM4Ha z2@1oE)3nWf zP8773Cm0NyTYsYPUR8?K5bJ1*r z4_hMX^^v!UO6mGjtJ8JWDZkd34z~4?5URC1^lYd4Nzd#od)M>g^0?A39zZKMQPF1F+^$c z194+3%S*XyrPclLDg&AA!ZHKB@u{&M;Yvy)!Db0K8sC-;T{vg8N%{c~yNE_9yVoei zE#KwHk4>Ei3pW*iqpe-jen&DarG>S=ps|aiHz|}?#tq`Pa`JP|%s$J=J8;z2`D!q| zl&-^Qj6QVjN@wG-TR%=r)1ZhlQ}&pr&`V7#DzC)58i76Rur?MH)%`Df`wmjoDM~-H~p!HdTg9}*E1LEYbuQq zZh42te`jsdCh(e|+%%w+Z5Y8@cTz({Fg$jNx;7 zX`+}0y1sMs6w%@pQClvv;*0g^=cZ0{HuLhATgPUUGJW2*Nb*ml49jd2TZyv8)+qzI zTVvRxCG_>#2p0G}He2S5GTDAMwBI{vVD*iHcj#)Bg>sQPFw=3s$!mp%cs@>@q{XT%;}M`S{g+^J46e;60fi_?p<3n= z+MHI(uy`uHlw&z`pa{sJ3dMeTj)JO zOwkL~q?s!T%YY)Pg<2pUvXfxsv{Wj48h7e;-OJpamzlJnRHM=Bt8W8j@ky(@_Xu?M zOFX?Vre${L3a9M%o>hBs+sW>|qK*4~7J6UGyxyJXcy9mHm9>|4zwO>9);S=J_ioBD zd6_Sna=>qUZByQam;0p~5BTr%zIXG8pJ#XHXmDQ-#FWTEX|F{qR^DFtsEp7aXlczMEL{`n zLuV!@bOpI@7&zv~wsvV-^#+44e~c)Qie0x1vMBc1|9oD|4rb5+H<4Ig7iFmvW+pD) zH%)1%V;0JhE2uw7H&61PBXB0@nmHa*B!;Re4T_P|<<8N9kIC#~9Eu4?VhCaUF%A)g z$Y=d=h#*8LBK#1FSFSXZ(I^x;j2``ETiXK!B*JpUhzSTw#N@eijR?-5;IPlZ`LFf< z{G+@Yma0DvVMWo!GLn&KK zc8=CILSbyfXil(NkqERjrzwoK5uK(`))jT8N z7)MW^sb3vCcKY&_Yn`2sJtQ+ zH29hvNeFiKc~KGZVz8j+N02q?H{TvjTrFjinJ zc8Wg}nY~$4*JE^UsM*zw@h>-T8`2!sAw7xDmh(5KqKe)N}+2kDtg^t=9JkpP7N zo$y&C{IhT8&p+?K=LxV12^w3-QTDZ|82SR1(n21ip}`WURIRQF3>z(}RAuR*pt{(~ z8kD7;DHcOkIPJF&k;fX1GzlB36x3%7SY%WjK6HN z3x#iJ=hV(2JQBL?0dAW;el z@hi->@ zC#5@dd%t3bdWVvSXoq5ldWUp}Vux;rdWUF-TqkuqG(1GRjnEOI9nu{d9=aXsos{mV z0!Ud7=?(!88Bc0;h;~SK2zXM=FaB;7ggqoZ^f{C{^f^>IWIV(?bUQRWspm;04;c?( z|4;oHe*Q^+h$p~$Mle_`v9u44tVV0g}R26_3Yrl!<+_-KjK!;5RhR zb4{`I+QwGfw@EaOQmn-)b#5JHKw5xGO0cMz!)eJr*DRwFsf-l?Jn=FiK^wY0TwUnD zcXIx;=`(HG#UYxh0UE3jfz(DLTf=RIWXC;4v=%!vDQogdRkW^#AS`9_@exS^OH(%Y z`thGRW`o=Y4-SmXm7ALI>gV5_rO=J~!l_}e)3_+@Sc@=+yfw~IWpsmW$woDI&${p# z7suwcX3t}A#=P|t7Af4ktPBLn0gWxJIAhzHOo6^@bOK|Pz8#zFF7fbZ3(-9k$r=nG z0RR&8*X|$zS-zui2Ln*MlK?>IlMF!Z-VXqTKB{&w0L(z>0|Q_HNboldK=hLsKmausEU?D@nAaS7r!* zS(}_?lqOKA3vFt&z3u!39J;GkJTuBf=yh?gw#E<^N4~U3;G4q;q}HhSERydd=)7u^ z88(yCXPbtMDZOmt9HpJL;9SZ}@fF<>_OBuv`*)$4i=rQ}C zz$Y+yg}?it;Ig4Mx#Z4<6Sqs69+{7l3LFClSd1SZaZsFaR^M=l{k$y>i+29A&;0Yx z`}_p{M?V49LTGmkjJAl0zJXC;c(!Y-4u!)P7Y4giSyoyiN2$1yV2xYGZsE!+Q?0*@ zbDRCVt$Le)5*8>`5ws}LEF*C!vCn%4g=g*4(Dl$G!F@_)R(^w}$6mcX9?2&;&dvuk zI86Fq#y$8*$QFNImfl~ z!@GwCY!6-^+^}foeZNBE=3|C$W?n1-x-W>P zL$?bpXs|1zZl(xN2*jnql>uCRG3SzsMqvv@$+o@}8igZRu$AAcU}{r;@0oo}vBQZG zgvnpoWc@MzIl%w!z3};e{L4N8RuMs?lLIL%Z7s7545Y-e2YS;9drKE8!+K_MXo^an ztTS$zwM49{O0gWNCDMGZlqfVN|LoN9e6RbC(O>BoYi?<){mEhF^N<9C(7J55^}ShQ zgZjK=)3!xUVNoqb;leBXZcw%9 z)&b&`K~<*+jz32(d+HWVW6SLt#B!=;yp5$)pmGk0*E5kR#iCEHy07k zVmfn-@un`eKzbcO!j}gG#KBiT~1? zawZ02lA4@Tf!R%=P(*e^dHURc|5bhdp3hIHD@=P{zo_dHcP*p2zrcAQlvCO76-BzzVwle8K#~0>IMk%$jOAK# zW(-{?7|j0xK*y|xEfCWh~f?PoaAXhLB}dAffvX+vX88SBMZS%wXb zC1Y69aH7d6GMLV=p~?Of=EunX6jqI~35^Y4_|e$+B`3}9wmrc9v7dhs#>vo%!eTVp zs6v+tO)GfTJ9qDeJ$<|NE@@T6v&LRB=~JVbh0W}L!S~)D{w0x1$c}2J+=ih`I7$VY zax=P>mQ%0`hQu64=(^?fEg{o?3gbE|tqJBl=2|I#uPl<7+Vp&3%8k?~0TidfAp)^D{%jiUJyWE9?X6+A?oXTMpYHj-jnJ*E z%m|yE6MuBx#AJ7ok=sLsx3#0Hh4Q5NYC)ZTIzgq-b$<@3+7yse+pIA&LVNocQnmqi zUaIz;frT~k%(@@Ose`(z650zG-&j-V@0zu^BSsHC!Kqxc(cC1FBlz`nHET0}D!=hp zXKf9`L8k)cDP@(kkw$b2nol6Bi=w5?PL+H7J|ytTu3iKdHQqiyan`YI2FlY)skPT~}se$CIDIfqiAn<_#5({Lfifm9#o%S`! z4G*tbbr&wScRohH3Qes3mK8aGivBg(vLc(;pF7uocuxF-2f(`2XOC6Wt8@op)|3}% zQJQF|ZABGWP!v>ieM4Q2KqlUtEO51r5IfgUXqFWJ0GA*t#eyka(B>$2r)kq!#jH2- z1u1N?AGQ6OZw^&qV;wBbaF$UNX3R2~k|^_2Pzx3tR?A%#3=_XhVVQj?C)F)1k`Tzg zttP%4E0AgHJL?jZhzQQA=`uNYoXgB`ky;!xSm1k_&sQ-N`?&KWSSccc&T-&*i*s7b z%Lp$^J5IKxB2{yYpR{+aTV)()zydQ?!34`EH;N5@x4}OyiuA>~!S6PBzg!>(${`xa zsg(YX^rxYYI49@G5#D5|BkX|&C<8=0*_TGZ_xGj$gHZo;Faohy}^{f?@0gr%hAt+DgWSY{)hi=){T!gxFAtmXCl)!P$G(^@=W;NbdfTKPS@7= z33L<_a>9I^?c*N%TuGF<^Q8RnHdX9KYiAF!pCU>zh?u*~r)EoRv?jqWZl3+zN|83n zv0I>ZG5=DY)$|cPp?4QmQ%vS9>j`L?7oSE8cL*RX6kdq}4TpBAyfp3z`_gXWxvzqg zx+wZ)k2>{PWgaa|CJrA(M48c7MGD_9Zz1$2s68TEdgKh7^|Ms`H)Z0hCmf8H$8d7u z$_V}BFv4P~n5)h9$d`&@T#|XB#A=nmvOJll_2~|YgcwE+fB$`6|8(|*oIFD@fG`IQ zApH^DpaB`|@#z%WPq_!6`!Rb$E|7dWh=!tqOzk1_m+r{Q zMbsm^BgZ4VgCUqpBLg2Cz$gkr9toa=z+72a-oZkod{3_caDY_#iK*D6M6mn@Sf@u z&KhP~gX{_g!9j!#hZiGN2x?-?h6;zVRWVE^XH1wIOL=|tlN(2W4|8q2QacG@OBnvu z{%8NV85BIi`EQ0z`)AF_w2nweyd$k6p(Et`r_4T0=wz59s6VawRb`b3aQ|5$2zeYU zn->xe7of7Lo*XY zn*}s6Mf%*jRzV3aa@Zft+@S9|sgf;PE{+in5pu+S*=1$BzWAy(RHh&l{GqFK?Pe?Q zb9Fp&bR%ZZ5YO5!ny(ci;KZta(K4)v*zc^QC`{*QvBS$LG?rGN7U#suyqaCQWBHMC z%AvBf_4A@6MJr3wk`go?`@7^ui|cq+&)9@Djhb%5rBe#7X~b_%*m3^Wn^ujsG_F&O zjv%Nkz24^QmW+Wars8-!L+v;vd~^)w3zn9nnodjHGjW$sq$uYsbue$m>HHHVUYppK z`kL)2>Sd!Z#{OR0>-524GT`uUX?_TPzyX=}Qzg((2E;o#gH9>|XaG_SK=6}=Jt)zy z_Q3>bfWMhSg$4i(z=zO9KlGRPqyPYCe*LWiC_t7c1;D2$ARz#400ICDCrifCsHnba*d(sAtt2a~bDUD)jx=f{ySC%qqx});9RB|+Gk){>ahYcF zd(@~c6i%C)ZSFy~$6S4_sFD6G{!#cG^ zT%pDAv}=-b4Qi6LEp!_)l)pF7jr(HWhY(^4#^jR*`rilwMBu-t2@v^YH-Pl^$THyH z)C5oih=NBqO#!zI>F?LDY}bUdI2K!Jb!cKG}w{s2$l_qKp2iOP1t4vM3c5^cce zk7A4M<%u*+6T6iBf?zp?N@uq;7h2-fpyq0)@q(yi3mZ;&pz$&}eW>kVPGpog&&9~z zPaHJ+MQk)2K9w|*kZ^3=7`%M15ZBZ+o@Ww!{EWp@4h^EPLIp;QtH0O|2r)e6e27wL z)}WQ!rKH3%<}kDxO!aN#1YsU7A}n0z7Oq{g`n}vu5N*wVm((5F7O$b$KET_&#a^tZ zqv`l+O3R+*@__^0;+@_ef59?OednDZC^!~PHYu|aYhsN~V`j2;79esA5=hn{u zQ3)={hECW|Sj1>ECl783wJ#iPU}_@K5uONA9#5ByJ>-|29ju^u+ zV_XY{gvZfeH0f|-7)OQs4*lMHfTkgeZ#3PY$`OjVI*c@n^TW6+j27GZOIL7O_z&<# z`ur0AHJ<>>6QY1Eb#4(yGr0l>yp<`@3_H6lVFSfIhBjjH%}}+N*hC%TL}-eMnl02R zX)zo{Zp>!k_)(k;ft44H;AQ0&$mV@A5Hp1sLaS0FlNCuQjTUwVWq*lL^|$1!o_*+suD zdiUYo`w#DNM*QX5muR^^diC*Kc;}*juYg!TJOz2J^%H)*YBR)Y=7B)?9{KA2)KG4x_!3^YL z_2FqBx;vgd>q<=By0>{Rj*RDC&3$vP9P>nG3OJjaFfw-0I-omo_TyEx}+ zPR0F-&R3laPA@ogFKDpX;EZ8&A=lGrDzuo(7 z)A>!VzP=xNy7pb$xA)-BUQ+@}@0H@N`is-yT}J{(_)h4#aU|nnhUb)-cVFC9KYu=_ zcn-!B-hOzy{o?j_k1l6l$-bk$gRzBzn+3a@c3-)6<4xOH_0N9Y>3Y-k@a4nDPo6F-U510^FgR|jZ@+r`$|KNE z-Sq<8U3_Noy2^Dx@2hvOzApLt+uy#u_VgMUeC5fN|7j6QE`JG=nVapMLUV)d|Nbzz z{hnA&Vz;bG ziVCi=v-jWvSqp`R{W5+Ex0Fg9zd7S%^5v>bR-N=3@55`FM@hw#IVVDI1~aydn`TiX z!I2q-*4(Cd*3(2T5L7H=82K>Qv2DfPZ=}^ge~tXWoGGS5gkhl-@a_t zK!o7*KXUB9~6Rh0c9;S)&@ixP3PI~&-I@cE^Az7 zG=4`~JoVR6lWlk#SpHOP_k!KI`Qo=-15!6FNXr;p5K$`>%QMbL5}Swy z$-R9BI|{UC{uFa@vI%YDvaJJ7*W2>q4ac-Tk(y-8NEPxGYwnAWhK<^_XVO>)<+mrk zn82XWPH%gBsHxp$daI4Qm}RqWjmoMJTFmm*bUJ8#R%ZCd zDODqG1&d+l+dbe}^}N*+9z*-Dh(H_+)K2CiW29bq8;?W!Wgz+X1! zXO8_0&)ZIyj=gukS(?SA+h+(gpZC15D`j@hY!d69t-kZkV}XilqLzQHNv<$|Y!y$z zNGJC%s}x9NNEXO4U!VB8^JORURAfb@xZ^@g23S3j*B}Uc0at+ zbqAn((EZ?9&$FoNDDSDWf4%!_*l%I6wXvuZLH>}_A;=U+4d1H1-PN=Uso_-XDG>Yq zi~EmXJx1mN;pK;7k;OcHX12X(TUxsGWb4VZ56(6{ZdzHf5=r4g=Y`g;)`Yr*iBr7_ zZx!yiv;)Z9eR(&~4H|><%FD{s3#mZ;_f$_`KLuk!UBI^fe8ap`^P+2_fzYm= zF69+v^}}j#7{~=?*PdMq@Gd#C1X*wHg2n&S==%BV`LB5btm}QYQKZ6|F5ntD7*|VW zR85vSD^e~_K&wY5hA%*?coRJ;FqBVJP?8CzqoxSc8AFAPIr~-mVnUM^jxZ0(q|=xFLSs;S$ms5MHhUBA1;AH#hrF_3T|tUhs! z5b^z67l`bn`XsDSArNtI2yqDjAdaCx*PLAgBp{4%foN^zTJp>&^(`Nq#bR{aQstU9}@`)xNu6S0U>q)?PlG=KyEaNzoZ8_#ZhdYts&^@HHVlUGlQ zZWRF%kc|KaAfc#M;AkmMmqImzJ+cxR*Z^#RQukimgYFAgg(ub}BIu#!N?J;Q0c>u9 z1dwTvw`cC2!3iXQ3X7b58n9Yk^`HvU4vw9GIz~!bDd&Hhrz=VpSd=LQlpo93 zoW0pJ+XaM5a-b@z(?Nuy=*n~(C*_7AEglY5T zd?H3QY6!s}8YRoSaGL&V0$bqRqQmB$Hhbe3uK5+gpj*#nI}0`r<4Z+vSVdKH_U;%n zY%X71qcREbOEGG0?Y_`-z?dnu4_7fS+NL&FCQdwFMi|GuV(JFF%UeYoOa}?es=Ql< z@SN^!nj?SxY^UL`TB*Z0J@O$pF5T(v{lYU+F>_MNkaITl#O|AkNB*RH{|kcmwPU!7 z&?xh3MxqSl{S0|aUcb&5Jg8P)itYA%Crra{mKKMv1c{dU!H`AT|jMvmC( z7;Bfu{^2QdZR%+yWyy%SCw3<@!v$i7Sxbi1kH@=MD*9BGsB|MuXGhC4y0tQcV#AUt zbX_LAvGg$r5D?lY7nR(fJUm_Cp|6v;YKO<-pRZj>`7UYeysTxLBn!PJ+%A!lRrtq| z);^%Q5SD+Qj3>`9fobF!CQt~?FMtL1HoS1Cj7yI%Ve$>8I0Or-F))oBc!d_gcnnN& zvNe|8kPgbhAO{IyW20#f$%CpIwI<+$9vS2hT4wOhQJ@2x7av```Rpd31YnX%1RXTE z>FB#Xd;JVUHK-%ePy=d$PX>dcgD6$m3-+dpzgp!&hmfn4ScU8qI z;2QQkDrty2C@;u2a=sSLIOsSiDRS<%e@L(Y(kq5`@|yEN)S8Di04bDLV`n4O7W#Ln zs>4ge!TGq_IFJ^#HKZB5eAx4lRLjejqs9enF_jDF9$5etZJ()MQQN1^&MdJWJQkKe zs0-HwHb1BfCd2zD56fbr7u0R&Z0LB^VPH4}d;Ko3_+Rwv|6YYFWu+fC zz5z7XxE-(D)LdsqUOYaYE2KTKfjNpGzLiK9?5Wwp{{FNoRV`3P8{{@41{eJt}?v1u1G)l(Tx z)Ki4c!O?oxXzoiROY9db2jyuD9F@x5BXxD2GiB>rD~>-kMo0Z%e$V`!1=#(z6 zSRuV;b@Ah%MO5 z+;xdIwHrOmH=s3~SHFTDXR6yKG5V5dRIxUuhXy;sXzgkc$K(%Q8XUzK;NovzYBT7xGvnZp*;Ea-Yc(gH%3^$S z8)Gsmy}mu7-;Y&+k>qGFd9x1Kz(^oyN0xkK1qgPM;6!}?O&_u6T@OeZRTD*CvjU>P zC*Tt@4X^|V$x#Bbx!C7mzI_QSk+vOx3TlEk03UBm4#r=8(w8nkP3TQ1P2eABBxe=?MRHpKm?Wng zFu#D&2Fy5YI=2a!g!aUdJvgeM<1aUVfe?8L`nf!kx$ST1tTF> z!AL09|3v`%FZ)tIlG2PNke5bN&@3cB$WX&Fi{JM_hU_7WEAT;v<-{OeYscU+wpxsxH)?%Tf0M# zeXkC~p@7>OM=+Fgq+@DJ7fojx=P89n5$U@NosMT1Cd^Q9zntUtfl}bFz})ZvBbItm zl(tyc*zs^`saK3i77_NmJ4AU&cNcY-nNv2EH$eBb{FIm*#+oF z>m3-J>7{Ai(*cnMg7kw7m13}ljkLO32lA- z>Gc);50osgJ-=y$(;hYl3*2}br4^wTxaPbDT?J~#;INdcUFD)Xa`gyMwV zhmO_$>-&)(pjk;Y0-w-=kdlz{03MLp_^1)$64PU#CTKd;&IxG*pe279aoW zQEag|QNCq}UPFOJ(ca04i+UWzUei@<&dBARr>83iPZ{GAp`~N2WNT2k4C@-MEPr|e zg_@!HG9{gAMYtpO$l?ja8?_`#!dUOLX;Vt`_>{e6fUS?9k*q zO+gV)r;KaY7_^?q^;8*}xMBJvfYV)OJt^C|+)8(Bx|mw$?ugIS4LiBjgbmX({tQcMZVO^MzZ?<^@zbkE8NUd~Nykh3HgnFRehg(y$d z&Z>6ZJj0K-)!a}jqS9}E0cz^I&!FgOhjCmpbr07(_|8RKc9Wjq7V>bH-h#3?-65SV zL(=7GS1Pr*l8Qk3ch=Vz5KA7nv=b(w79F|HrMd#PYdTpqf92+Txx1DX_7Iw?GnBhbjG>!^cM z37H8t0-ofgEJ}AE6lg8GUj}syHxtZ63V_Ri7B*BTNZV&_zIqJl8eba^%An_xt91-4#vy zLwf>e2yH0){bIA`ys@3ZN+_JgwT=`lP8L%JRTRWVHni^BOO57JZ3=wyb!ppeo8L9~ z(GBCxCPk(eQ?oTfvetH8v~KnDNFL~Mf^cWl#0F8nwo!+qS~*AavOdM;G;9d3R)s%c$&4qY+I(y?&QM87a?v>Ycu_Cy|YRoyq znUa((r(C%yPBD%R512bIQS$vQM1cY-)yQXQ<{DjNPAqe@S-8qbbCFy0AV;<8?4Vi6 zZY}Oiw=$}YmT`rc#^y%^DX2SSsR>qN^EnLaOKETt-_Y9GnN}!hpi*myd+zcuv9so> zCnqj3N7>0swV15^mvpzV2^AwrXgu9&xvIsQt*4Wco32xmT1MwiAvCt@-seVd(OV>E z?9lBHYh>yqrcie3j2D*)!)+bJMk^Ywam+RBQikC3CDb15A1C;`=>EX#Y-eR0YH`ic z{lSIG922p$bg;$EY{p)_rIwyrW8FCMG|j(8p`c$)_All_N5cFAsz?RdFC2j_@`wjm zgDM-s5!``rgir$kNz##+yZHDb@OMjnYxDWdU>~RfT?phsNRcuTdJ%yQU5IL$Y;=(9 zgWv^C_H((6j~5AWNmvbdOM&Ypazh^dJGF+O$tQ73lsy+NV=h{ zhF%2kP-{aG0&19rLP3ox8$?6J4eJq_7}HB2J6caDw9$+L*N`xPFjUqBw+bNaekl6^ zEc2TY48Q?rqz4JW!G=73^0%SGoS>coKA;eQgP4Xigv&u{MGL7=Fh22BiJWw%t0nZZfZctvSB=G(I@Rx^hy56w;(CtM-eG3VvO z1}@R)wn-vu{j@8(oy8`SNno4D|B zNR$PYo+1e`*nO|FL8((GonFB=-5)mp^6OP1bW}yv_4Vdkw-U2+HVPUj z)a-CU)YGFBXPU8f%OE$kucVRSD8t1J>#!bay!nc;(E{ptPPLmbkKZ`x>qCN+ja&w2 zPcml}H;T$*DCI^@e%%ah=cy{U)RaakGkHK;Wv&}bmg2RE;^17FZm`Rlh|%fb%Z(+= z#``kI##rQSG8ej(X)o~OX)+Bf)G@Tp0Ysd^(q(Pcd<#{9oX>LLk)Mh2@l25qMj{RV za?lS{K*XaGgup{+LUDm5XYZdy)rpWL{VK#9y1W1zR1-J{8i8a07=Qt2p}~O2gH}W+ zV|W9SqrJQRe8+i&W?%E8JOZ)}h(aa1vuP&?^t9(GIyW#2(H()3gw+R;35O3-3VO1> zqaGb=PzRPC^c8rCffh)zKE?IxBFIjR6s|1qGXl{hhH65|iT*K)Yd{5EocF!&(e?m) zpq70LCr1PnhFMeIizIK73S&#(;3 z9c9_hsG(_?5ng+uRD`ZcogI;Tf1#yfez4=+@T7DG^(Hl8I6+Ud6O3G&BF&M@DejWB z;TBs6nw8Ga4yrQMf^zv^P6YN%MF07oCt@G99xNl|M#L}P{|I43H-G@AAHj~Q4S|Nx zL*WBy0OJVJhuQ=lITARjR$$0rlna7|LCF}7BHQvA5^1gLQ?`kU3jw) z;g1+cq$A-Yx{>)|-Xo&7Hf)7W1mg(Sld4SxOu?i-bMFiQ1=WD4#{>zir2oC|;m=?B zKm7z)m-}YP_-9pwEsY(x-@d?t&<>E)3&Q2{RIcR#N4hLFDsCeokct{on5k3&<2!MK z+AS)bruUvhw3Kl(G#%Or4o#CVruYqZCd%pZ!8Sx2>tvxkiZX&vII5mArpG&G`G|+A z6E`ww6T?qfsGU={(-Z;HGF}DE!jMqPTM863hRJX6YclMGcJi`I5pd@1br zy`qnn&Zm)%5Js?*0Y$psNQFq32!H5hL@qKlq7|kJ5qGoQjpvc`>1|km7s|S{eS@o zBy?CV2ZJmO_7u9Vpj6o=W}DN?99u5R88pI&mE2n7x=G)WV4a`{T)mhUyc5cyEiAdF z%|KyjflQe~I5Ms`NM{IU#F+``#`zX5TyuS*fqrUUd7YMiNWD1QoV%DCh{WpWdv|v443rwK0LK{N!Iy3=XTxvjNaacIr#VajCIEzX3bxMox)QOdgr7! zTuxttCBlwlir(g}bJmu0^!Cn~ugJQTg{35T65%HTA*Z1M*3Dn??%g{qE(O+|hE;$a zC=dYKN$ch-x}WT6dHW}{ud(-p)gBb|*jIuQc=PrxR0QNSwi4Bcr@!m%RUiHyi&Ur1 zmjs>&-}9s!n@8{-E?vEbx`XYfgxUm1ckEle|L_58 zK3H>n`m77HU|6?#ez6_vIj>&yc6an*(Ft3UWz}_mdfN%?sEcB;;?&dA+xhlSSe<;2 zXL6_N?c29-L2v^VGhI)gJ!`sp9otwPj~-!ZD=WRBqUKz0$1T_=7&k!egZTn%dtsI7 zSy$KP2PLYqs(0_+tBba(4~GDr*u{MIWDicLs7sEWt_$pZ^7Pf~*O(o^UMB32S6#hb z)wi&Agkz|n*2SyWPOVk^>21r0-rjX<6<9tBtSi0Q(t5n*_*0Cy-gyDus*e|{OY8SM zc?SFfq`T_^1M7Cb=oJswA?j~E$5qg6@_?FEJeA3rE)hd zwk0Ps%gf+iJXfFT9hsY*ci|`f4e1oMW|Nx+b(I^Xwz$J>fMkN`v5Kn+}vc3mz1mKgZ> zyEE?;!540=jQ2@5PW3d%T$1Z=CKt$6to&KW7bFM$Y&G4KK2ziNikR%g;U{`eol}pu zT$(W1yCGLf)7qF=zw6-O=i&+X#~pQ5I$rh?n05uG5aaM$H}Q_31BZ+E5a5{t4H3Z_fk)9-DZ zHCqwqHqvZ{0fTnSnKgvt&QcMBo2oJwFJd`3M@$=W%`9Ocwc$FIzwOGLcvFwDDT8-3 z8{JE$4wPAK4m&nJ%|O32aX_l(HT$!!+!ZXv;u*WEgXwFiqSD;~Mx4<2!<5c_YjsLR zQr)EPrFkx6PHHx7(hFL=f7(t7JuZbkxasy9oor!B;@YVT7iS0ti@%BMHBAzxBot}o zhPZmNV_bD-gB7CE;@@OYYjk42-U_IbA<#AtQ4*>1bRA$OJ(-rrG8(^fK< zBrufT2je$Pa@g_nwsyq=mxty{E}DNU>2`~JdfsiWKF6jo&($g>GuC>pTg1VbLl%pd z95qNzSe$(~?yDf>okoU6@Os##COuZC*n zt)+=B=8D-DIz`(H4;$s>OrN7_qfup)Yk?^dPM7BE#Rhl#Og6lmA~f9Zd1=5(KZo!G zYx7Q6#>eUUk0y?e5TsC-zb{#M;Y*sjT zk}aHG^t!NQi&fkHJ=@CaI#3%a3Rwqxwpg+~TUFP;Ui+}KZ<7`rM;b$x!s;v%3D#v{ zuw#?9^==zBX0b^Nuc~jqz9|RU0lTu;q3v6gEtmn$BAsB97HhOvk;P^#R%fv#J8bwD z)BS^xx3El0?!ICt7F)8&G+3;~#w>Pgk;$<8ie*>q!6LC?0~S6%_F6GifrcU$Uy<98 zCb7AS6;=q@Z@*vF`{4sp0$eIAqhiw)`>R-FMe@M%Di&7B)z*_IRd?^TVLcTI538zJ zPsPqER#mZgT3dGkE38O|XtE*=VEYuA086S^PyNrM^Yf4VzxxEpuA!u$?*q;8QBLHz zT3;&i6)?4k)lQGaK`woR7fEJsMAQUAIQ;;du%y<+Sw=?idz4Wz+Z~tNhAm|h0;Vob z(zdwlYuqDo^$4i(-&>bU{e}pj5kjev^hn(Mw5W!hHTINpN`L5+&-#E-}_GGk{4)^ny1W+wKO6f*yCmA7^ zQ)vRr0C9``)Cz51Q^T&5Lmfx>W<}qHmhPz@>nzZh2*gV2`JY^WGY^fM9DU?~!Qcxu zv{=_K%P;r^TuezU*E08*piV81E5G&Y7rjFS9H$9#w#l&sXY-cuHMyfre~gsPT{1uJ znCZm<9b%=~a2>@EY50ALQZCM=h{TjuV=OLcYqbcd8dSMTyn|98=bZi`#++VN_|V+n zWw?LvI>}45vuoj)2usNa&5){rL3Y*xf*vk558bV>;80av30B{8C*&)mG#40UMzd|L zquJDT{G0?vYET2xvDZb0&aUuT$+YaoSQqMqNST7aB3~TKv#nO{ppNHX&s-E2FEug= z5#0YeVD1}pzmb;R(c8QZS4%gr8FRQ9)TIvxx)}F5DpOL&8fO#tN`_+mnks6I`N6h{ zppUyrSk7H%l-?*yH*^hiYO+nHUGDPuE@Xv7x@ynXnRz@qTeTxkxw>|L zR(6tB>HhrQ{S5~!OP1bonf91CIF(oLTkbL@Ma|K@u9@p$GD8$`Ph4t0F(i^DZC;d` zRXKa)E~@*9;YX=m+G$JJ9R=S`mDZo-sI)e!Y}R`>_*SeuQ&eZQ%O}p0;7)k(Zo#j$ za~;J|KaKGklEQ2Y$XwL>*7PDzyHr%*>pnhSYRs8G?jmP(yHQte_PRWacpY=8MUmN% zVP>I=%_T)OzZ^EKatWuWc+MQgPvx*@o(^kb&W%csxxy?NmRh*0^klj>)54;Gzc%!K zv*94(C5^L2zOjjE7{e)dqw{?@uB?FODO~Cl@9x?AZg>>TJm9JP;nLxWEVHj!QNFU$ zkR)?!p5a(+^Es`$n%jSA$=yEbBHjFEZ3E4*CFtZ#3gs^!5E%8zhjUisA85VQq(1ZO z^U8|0=4bKKH z$1j{HnK60R|J^|U{HuL_0{>-CfE7;Yu%sN!qC``8EKWi}t20HD$|J;uIqn2Q-{^F8 z>fO>!W?x1X3)3vAR3SITAv9Gb->xz9yF=~zdG&pPs4_Q`#^dPqyYgx0v-gs2{;#UD_~5JegrmX;WA)}w$FDcIR?7{ zE(5#F(hd2iaQJH#a_0Pt~sQo;0odPP~5bm zs!r>Mn9Cp9#ct>%`0Z<6MoepZviV$=M((@7{U!>!x!!=WrvvbHX=n+VMJYBco1tjkiT=o(+swpV8FU*-JJz>`TNdVS#M#{sDiuJeB~msN}2U9?+&govj{juO=6pB#087Q z_vFtUOt@FG4bi{jfA7vcf8NcXxIb+*_u6rSKG@#<0H5p1drV~;;`V6*RE%V>=%Z4B>}AU`<%pj zD-Dz#HQXl;;%Iscv<_RVE%%u2DV{x8yu!XLv;&DfH}->d_@z3j)w5{cPh5UDO5-UT zi8;Q?oM+3Ni5ndaH1CLW**5EM+$y$jd2%8$z12)6@*EHU8rgU7ys|2eI!S^k$W6M+ zPwVm-?xNM;Rc_6%Ycbwb*oT*RXLJRG6xlqK-H_~S*wZ{|#c0bdx6!{`^tmxcWC?Kx zgH9Os*Z#$E4h7Zh;nVzY?4m_6KTPX6@gtW>n3Heq=Nxu|qAiqO+RRhjne1n>G}>!n z)IzE2bg3Qch~`Z}re;Ml!>r?m)FubdSTH;E zCM(qE(OFBn)T;=dDv?K6!0J84i6pDo4=ZTV-4PBsMzb`5X4>XKUB|K4FJtA+!wF9x zEQry)m7lp_wD+u1>ts40fhTbUgfy=fDdQ?Y}MpmTcYx zm-)3N->W#Vuj9$%iUWIlUl&xJINFt#+M0Z??%+Pg)G0MPwsky7S5{J(KE?R|3n{<< z((g~;|NIG%KOm@?34J^V1}}d^_*W4knTKSaB1yBW^1~ZYlsH?HRhH72OU4rs)?5K+ z(M6*z%T~UiH91_Fv2S*)v@qT`=*OQZ;>D4A%db#%ja1e}wiHHdd(WQralo)R(fp3X zvkD6)FJj%Ez0=wTr{*Oi+N?;&)Vpg>dKy0{X&p++PX8${ElK8aT^>na%0NgF+$+5# zJ8g4zFfX|-OF_@lpvT)=L^!SUV_Ic0TKDYAp?J5sqYq!a-s-f){@S`(Yu{hpkms+n z{@~)`v|j?>$c|3kR5N$|Ux@d#X7rZkP9|cBHx8cO*OR~Oce8}|o7`Xl12XWodr6pI z0w|C{jtkotm3#NV>P6+g@wHzNBzHVc!`9fay){gY4EkPdy%(g&kZHpX2CT7x>bSSy zRrS#$nD7|%#+cF=mMdWW43x&8D~1JLkPU-`xFh{B=#4>jJYit4a@A&R#|-4Yp!)^I z@84Vs217d#{lfkONPXmYZgGFzlE|4;o9?ddZ+dY}iQi|{suYi0S`;*NcZ$X46>-|9jvO5g zGc68r3E%n5F>;5?wM|bBM$QWmg_>Ar#jAXBHuWQ$#oqnkc|OTDaq4W#upZ{-4S^>* z)BG*zOdhIan?|34_)8M}WhY8|6-*z82{KypH6R3&eA zvQ+16^q(Ecn7mv)HrellmZct!GQTg|j;I_(vn4or3h`8XIeU9K-2@>|j$-+nj(CDo zPk!GRD_y?^8UzzARpX`mz;OHB+Z}1Cp9lJ@_IOq9{s{{8zLzhcCU3iY8_I7OnLvY} z=I}wRl>=8tQ7OpF7hYK}8MoAt;QY`h{{G>SP$vL+J|zEo@&vi3`Oo z^a7xug{l>bSSVJZDF7Awzt`*j{nP%NJ^|pAnjHt@l)9ZOB8bikqD{yUX6~%Yciw{Y zr^_3)upY#|0BhCDUT}}My_EE-msb}*jCTr>GH-hN;^D2gH)Id3Q>LUQ6vk+VxU4*x znz$l%siDI$$45I~C(=^ZRlj@`v-&D7l@x@eAj` zm^B zF(fW%-Oe4Hi^kvXb&Z!)E5V6s+*_q=l?$X)04(TMLaP$6)t;CDzyfSl@7!LsV|(Yr z2cP@<0a!q*+Wp=@tG@g^j8h<>0!RUyCO8GH$IjFTbq!6>YXnXKp#V<+Ca`P=NCBQ; zNDE+sIWw>c+K2z9FZ%b7{h#p!09abue;q4mdwvTndxS*WY2_oinRk}HU^-bS)c5n( zgJJbr@s?NT8Cx8V?g)=BxH5H@OL54GUT^!FWQB)v>g!kUbb9P*y-h0lf?0OB_EI8`Hs^y|hL_&9 zs&r?Y+CW$oMR=LEq>vM66=9{pey;f9-3K}FT3Q*^^=#U2Mh0n zr^TBvDz4?7245 zsp?t!U{9g%%K5w`yYNYl#9;aw!|IG(KkU^0EZF1t2q7Y8 zqL_^mUj>SmLx^Q>{flE$*QcG*NZOWjasKiWufzE5g^L%jAL430VwYU7PCa<++;m&9 zK!+yyvhF7|2cel5F|S&7Uq7LsEo9KM{2OdrP3JJ(d3cKW=Tq0F3#@}s+3UL7)f^=} zG>K?R4HLK@-I*k7Kuwk$ZwsL4Su&`YTld!m%L2IQRrdD<%WsnmtSZ6~0c61PiT{}l z-?8wYca;7l--!G(WD{g$ymgDGP_6R0JS2dip}L<8^G-y0>U1v?p}^i>XTk2P>MkC3 zp@uTcMxuHJQm3ZLZ{(@>b9`~=4BZx23Fplj5|v4#@kNV+tfkFpVH{CmEJ|BR;|V=Q zIHIbeCzMnE=co!MGzronBFQq?!QbvdrGYb;{_hP{h~Su`4P@=$=K$$AX6XPuRjiNt z_f1qVaDetH)=Gu;DdzkIy;ICP77S~kp*qn-o$x=z%nzY=3KM_mqk^CmnyAffZO~Q) z2ZnF$4MC6qmoUR*zwSd5bXK7+0<8|{okHUjvsswvuVU?1=(|F56^8gA1Ax&#^jcvF z0b~qtD~gI_4B@fD~d!)~#Fvr~L=&krmSlaDA%9q7Jy^wk03X_5+= z#Z;RrEAN1x{7j#mUbI{{!cmdtma?d}reww(&h{60~uxZWTzy-5p1-}@W z$^cU)hBN>d01W^I_yW@%fXlx9Cos6cR0fy=gBh690A+wCfR#n8HGmi;6%#OUfe8&@ z<$svXU`&}XZ~<@t!hjSoi2+!A%Lt$bHk-j10aF=32~1^RHuEPuIp4qXKlud6t>def z>DdHDUAV~6EuSq2lrlVM;KfovPLie7O`=@A>v#xCbP*=C{4C5nPzd8NS{<+hS+2mo_1$aXN0ANsy0RR#VIP}<51kxZ4|1efG0+ovp=&bJm?iHPrU9$PxTkynLK4WLYFiWqlx}|^G)e_end6Z zt7aNQCcm?*~iKRAi%fBA3OK}0T`<`G=BKAz1ZKs??3qj z$dYja1QYl~-6e2ij|q*BQ`S7lxJnif{0TBqR6#oUb|bjidsnt7#O86(>_R<^%U>jAz3`q6qcIombzihChp)%qct+YQxS+0% zks~l(T+A(CWcr;W85u<1i$Ro6`Nk0TqkTQ%b7`|TJ45d8O^dQ^+dUbOPObnq?hiM>4 z@3GsPVW$D~O;B+Elh5`0k9~gvf7mBLwi!S4>YPj_g33{r3fK}nB1JR}6DRBYpCn0h z?y8GKxqdRlqgEyyu*@}Fe$paDD132|L7E}<=|gx#t>0qlSKA_N@yOuovHEtQ9O`PQ zKjF$|=-$Dt%}`@w7dJz;3wJj|6%D}_+b@Uxp|Xm~fx$u8GJhj3gw+{1ZqVnOxW~Dr zwGG=c2VK#Nf&!@0v2}B}(-}Hp5V2t+2ZA;%n)mkgVWAt=XquXvF{@WtwjLZBg0*lg ze}_cArL7GzdRS(HO(qEAnBgndGJN&=4c0P*y``a{p*Mwvon2j$x_a10hplv2Mwiq# zz^Xa~d00=!%6FDf)_z#;;u*D990d%~2^QN<_8wvtgTZfte@&aHEtgVCc z33l0GI|sJdOUo-jhw!1P8R~90Y0+OcM&p2$rG1T0CsSV=MBo6Az^c?7gjUEyi*xACC>B}qs(51}RcAfS=+9~G*QIVHc2Io*)Z1HIEgT^e< zDib%FH{bUf(P+y{tNaFKo`$A&6G4c+D!9S)qv)7&9i}_XrK|J9Y{O{=b}^1eQ@7Y( zkac}{m)9ERUwogFb^MxLbf!Ovp=A}t=0~WcaHVU)vmeq)!P}nZR=;|DKT9KLqrp*r z{HfaeRtNoA=~DU*DR}MiRdObR!_ken3`z3#aQT(1TwSfnrEi(@EssjV{1$~LzF}%7 z(|Jr{HU4vr(4b|JPEY14jC7gY9>XyFcH zhVqUg{7(V$R&4dZJT%WLm0iwKQ#W(A?Z6#4L=rOT+YuZs>>5fM?>7>R#FG$ds*pUgAfg@QS;9;y_1u+#>avON#mn>;GuSg;Mm?Y%N2qMvp{TX1Pco$& zS8oY@q{E`~kTJEj+X$2dn#xM@%DMo(mj*alqG)rNg1*I$BBE>wa^WQ5nQySoh(cNI zak*vrLSG8bL=c5jh$_Fdbz6{FkA5^c_WaBp`E}O1x_sls1~WYLZA}8RKQN2e28sPF zn;uV&anMy49^9$#!}LQ8qBvJ6_8e51?K*O6>4$3<*+*W5YAR~@S{S^t9qWs;3^Py3 zCpP&L4m@7F-TkFG4~blru_OLs#)}=dRD*BdUd$-4zG|J9%8;6>WWcX_pt6-$peQpf zCDV3Y0SWev%ra@A_||P^XUh!*^!SAvE8?GWDf{VZ?z4nBp2SCVyv~Z1;*+=$m&ip5 zvYnUM3a;@ji>94$3;HQzR_0odgLq^{%(I_fF7fiieLi$4oZIBd3%#adrljaeUd^5) zpHB0eb|hhG`0}3({H5&*PiN;%d+5~Rx$UC0Nga=5W^y+#t1Ix*r7xF4AH1Hi);VOY zC#-|vq`-MVW914v-wX6OerJXvx_)h$^8t~)qHZ!1PjLI$iBYK-PO}-KEaQk#;<8vV zxrS`WiM6}v?l{7hO^A*lFDgDQl(iGzw2?m)bl%rhgPZIcP3df8y^Yy+Fx~c-@?R|7 zBIM0w6qo|u5_!bqd4{!m6zz_!v8U)&r_k8=a4DI(*_LL4(1JTfbGofcvhWOC?=x1N zO#j>M_ZM6*T>is?-m*PEjE&qV(XlQ4X@BPeT-~|uu}>}wthv=L`(>?5-FfnV8T%{~ zK#?;a5h=A@pbZUn^T-C$a+wIKHqt2NqlY$F#5kdvL^uQkvU#HzYZ zIofkdPcfTz({i)ot(K>3f#f*pg}+)XD`z^co8(>QFE@!1IyISpYU9$$b^djDom4(; z2AxQo=S;S^-FwD;CSrV35~%8FBXux)at{tGUB6DN$FtZ;;7In{jbjjHC&Vp71HBMj zKaGAI85*cA$?IsYZEvm}{Wv^4*mp}1j?J1Soi7OK-icp){0O%Sc8v`6*H?*0 zMuzVvUd2Q*i7}CNHRbh^%7o~14b?@}6(w2EQ|sY3)>S{c9|KCe)O$A{CC9wVdpiW@4$!$X6gK8?N;=a;^F{l2K6vAPiE=^x=QPq^~#Z9b^+o~0)Z4ffuN zy)Zb?_lHfezJIWP!4vozZV8}ovGyBx6SGW~@MWa64LrF5de$jvnav!gHJ>0wSLG%L zhr3&oG*t=K2*O9tXt6GMsUv5%}M6a!?hO?6_YF<)=5pal&X(% z_BRe7qL(SuFed7&!d@u!>1p&ksYX^d$iF>{hnL2!?eSr*aa7?eYA5e{S#n3HGh3IP zsK@ABmqgH78KqClmp5D(LAH?K?l5suj+6~T1c@+QhD5@xK3U{=giOspnnEWTIq%R+ z=-Ed{(L3g2d0~MLXL2ad^`K4JxN- zb&rB%6XCrqJ=#}8!6(cQu|xRMxL6wQpz6JgdIYIpI+Li+Q`bi|w{7FoaIQUdHhP*C zNXS|hrZ1wKE!ce8YpsNjn3R!XnZ{u>d--mi5Or(jk&7FHm#_A8Kfn5R&<9@QEEUZ9 z@M~@G7)JTCf8UDy7FNj-n=$=v#*G7GV_z_h&6h8qyW1qdpGQ$YjgAbaoZA8jO1-!f zgf~UPc%V?N_(@CU%Ws8woz*!5ZIwgaAIh_1pWg6psS!VmJt}!8{QUV7=z3Ex?#RCF z3seL&Rc2kU$-UXv(OC2HE|?WJRTaF+xLWjUbP9ZuwyL(elHB{J%ku72zIpQDZ4z*) zy)qMEC4PQ0C1OiW;WJSEefj*U@afgG%ex+)-}cHyft{obqUEwN@7HYlUd@P z%k&UZ*wz)AUOYX~8nTA6aKYLOOnwkig{tS<_(Imi(zD*+PK1#6>r}j5zPn$LoUwUS zN8H+XMksm~U2avjmfm{hhPCZ(*5%3B?@mkQ%jsyOWxkJ_7JvQOs7Y6q@}d6epS03# z>#~libqBi%r7LEinz_5ojY(_S8>h9#bpunWW74DbYdWU$M7)-IzgMbU&Jb_7Ic01p zY81iA;pQz(&$v4GXM)s9_C~4Ce2?|qp)ZewayYZ(NiGgLBXHdjWu;IGXO(Q@cFL)= z5GPL-ph5AwE))^fmKORke={Qbikoy$4b4Wh{+b)X26j%=>Mx%@=3H_ueH`4|T-sip z*ZZOP<6!r@l;bb1yB8)Ms>!+W_V&K_k3(9^eyz^BHq_Ic6SbzTA~WyGx|$q;jg{r6 zkAt~a*6V6%7TrGr=f67hN_TC3(fyxChrj0^f2bq&{lonJ1hA_TSR7FDeYLk^_yy6Z zlO63$1o{Z7#ZafxtZn@fCEGw{9s}V^;ZSFgZ^F&+y%aWdTMUZlpEt&Kmn|vg~MKAx=dYSe>BSB0}U$ z)JHfxU%y8bd`p~97|$Pn1g{;&rgc{eNe?yUG<>?5Ij0O~A3SRQ;MI#Wdh0g^AHLu8 zT6%u_7wRat;Uo?xnEsk=vH5+{h82MuTn?_U!0oEd?bJNf@#gv5$=9{5Qn%FSOrE{$ z-sf37-tSi>j30klMCR-9uej;*WpubXJG|T&4s@5N*Qfc^-rrdn zySh2+EL@D&@Z?x$adP7?{Nc{((Y}`Yv_lm)S9HC9I6Bx-0Y8&@dZ@MZ^KkF)5BK{& zeSZRf>?c5Wg9g902?t6etr>2XJ~SMWOqF&aGovL;k~GnZEuN6w1fV1-3rj{16MyPk@%(6~kk^{(*`9HrIcZ%}qD%WP2iu?Qn=#FFw5$44f6G8+ zI&{@#sWRPpXZ3WohZ|q^mpy1oaPH1M-CugYJ3nlsrReiW@5lDiuG~-v#h(W|{@Bm` z`=|SpJ^^yV_<{R9-qLs^n!cvvRZBKch^nH>mgyoP@g&`tA_xoP`63ibpxY%jFMzLP zz_k<$nFwB1jvL0{$1O+YsWvQ{AfXVErjLAnQph2Y7U3;}lLxkw{dH8;H;AK6SNN-| zt8e9rrY;eXr+P4ZQ0qX-wlx`6EM`^!U(F&RbZUe_?XL)dihN$faDN^sf5qu;x@kkM z-ptKUzm?gKdjb6Q@OIu^4(AIyzhj?<`(K{zeSV-<^fS!cV6@hGZ$;-__UodO&jT%8 z$!mqVFS{Ra?|*T+FY`p_UFXr(qMm1aKYn;IRPkV_{QhwD<4;}HK!DNq_b{O9Oj-ew z74TAq3|f&U|9PmRKmXL9^ey@Rwf~S$fSfcw4tJeMmTAmjMFTjzo?P(3(3_DjFMa!P`Td?GHq6j5T|0f6v`}kHWBfxyvTF7#bAtXU<*0B(X5Lj=CPVkjaKYHi%)deHv`;3~D%- z?88(VQ^mqm8aT9a^%j^oW7^ok7pGj;Z%<50g(q$R# zyodSn_)K|l2yQOLr1LOz{zJZ<-#^s<{sg{u*OYw>^Mqf^-SlLhEkcNG;aG|@HDr`$ z?kr$&Vwh@pHy`b}4<_fRnbmuW`tsW z&Zf#lKj)3Iek4)nB|9_VnwkMCPC7PU*;HeRg{$*6dq2hX+jph_6Wa`44y@)RpEO)K=Gv!4Z<1 z!{ru`EPFo6kbk(f`1ZDEqx(9-12vE)G%8I}sXUBhP;m^L(98?J#?=t#N2O5l*Oz@6 z-s`X6O6M|dU=&cQv@4U2_Yp;Pw++eY$rX}5vCKJ_b zt!y0?Mblgw%CJ>h#^Hhs8w5tg z7#6{Nc>K$OmWNTn(44fT!x&lmzCpH!Vrepop{i!PeuLDD4 zkjQ~kaW7m^k>mkp#p9O6PtpLpCqpB_Zy8*R!O9r+89{~x00qc`Q!#iH!@44@E`lTo z_zN;105K35C=86oWJB2U0!W3x*a;*=U{>5GIstYnV`H5F=&yH$^nCs_1}?|ogbdUM z8{~08RsMdkMD7*Ay-hp7?s)jq_{~fs{VgC1>Pb2YydJB*0#YF`Jq9JviZxrn@fgga z0NDU;@IW5tyJ!zch{kP@^IOJm1_80x;84FP4a8Moh78+5dZp$<-WG6kOx}v2x=wlK`ew>ZdT_^H@w_WzZcI|xLijR+F9R`=L>>g zKDtvHoSK&Mi8AX&hK#hkb#{KFFp#foiZCS-#7~>S2dB?||yNMTt2Mw(5*<3lTGdX8Xpb7-jOv4@+jP(ZwyM zU-F~Oo2~1El;sEy?k<Pt;b17vnB{ zPT!I#GvDjsFR1?v?;N*i#E$jWqq4*9#>)f!g^DVV9^$szZCPyW!3fBdLfPSX>RdLe zTtrz6o8S8{y%;Qu-Q|>mvt_=cDrmd;5)>WXIhj)Pn6X(>oAzIg8+)~Beq$dqGJKkk zjidbjgOjb)MJVZ{iJ>f6lNoERoJQUK@q@C894`lnO?7+w?$5nTR93x`{lTm*vy;TTm@z6#NG+SD2Q5sb_j!5W)86k zLKDO&h*S`rAOt~p{QKpzf0%)ba$iEYfcOBh2to~nLB_KXv>37Cc5yXK_?p_cm zCf3ogU3MTnmUsi~0r^ENuEd`GlY|~s2X+=7Ejm#wDb6N%uD8W zfs0Tx&bnZm7#wP#Hr>L^L=h>_lr^Ezdwlf@5r=41^|=xz&)2dikcV*D3t38f)vHE-*B&m?47 z``j^_zjp7b_^pCsr)3*-XRzn&y|rldE(7M4WA`iQmah5>Hf@V89v=N{vE$0h3vd6t zuif`={>OU)SS*o?-Wjo zO6H_6v%#0s$Sj$T;P^CMhKWdm68L&*CS>HHC>xRWFm)|gVEV>L6Es=s-kiV~eWHVh zX-{i*f-at_PEpDt(hT&Cr08^>@8vnDC(S3i8B`^z%C6Egw^gFDdb%y`Y{cdiZYGfn z3PJy1x#^1P5{5rXPSrHq%O@o(2b(&7738)h{#A5>HR9kzPqg45OheR$+7#mZ zL~w`04!t<2{2;zVl!s#u1fM11T{MLippMO>!$`1QVsy7{^) z%dLFUWUZORvUG22yqfOp=dRvc3|^cxn{L7t3U7+85GSSjJmEs~3_tszpob^KQ*;u7 z8|R9R#bNp}+dL@3RvuaPwgFSjzP;x5>Ny4}VbMHAf}7Hj^OT`mC7MbWkWkomR>Un$ z8nck7N(UL?Hq_+2T5%tF9#k#2v2r!f?*?PYbYsBZ9oLm@WfTnm>XXv#pkz&e|4m-!*!M!IHEO zt5VmNK5%;3H_h$Q+~x}lb_{pfJp0*c=*vmH-PXeOYvjfpGke(C^V)A-Go$CM$ls;1 z;`&_m5aCdT_$@?=NOY2RSV3;zF7jck!_S&@9yo1c(0}j1&q1gCcixql zy8iF+fQjc}g-1!54yeF(cIM8vS5?)=7ytl(gAV5&TG?>!@27lskox9T{Qi%B$R|MN zBX}zPt9K<%hGrGah3k@a)ioQzpPomN(byTx?s0eU!^s};Pdtm9X_iWR+b4E*ph;l4g+Oy`}n6ppSl};D=B2xp1OfHJxh*Hwp zCOr?Cc$8v9HzY^WVNqGzYr}|uPn6lBhO5@Z*3iC|=%(mYMB~4;dxYZrzw5k1eGX+g z)_li$?ogIv^ItG}fUuRF6e5ss#*NTCUnH-q7ux{11F_-6Y6JdU7FPie^W*IRVq>PSPZFcMD} za`*Cbq*Y9KKA*`CGtU_)lcP)`G7Xl8GqzYJGkH8}4AuRl884C?sHbzt*KXc{wpVx8 zk>Wk*djr-Wcwtvn@M;5MIMHtR$nCT|JW)wGR{6yop6eqVh+xF@teWS?TYbN9>>658ADYtUuj`qtx)#Op-s0u$f@l0< zf4Y)QdPApO+$SeDU1}LQ8lU2Cq`@*!%Qvv`Q}{vEB$}6%Gr(WsCGAGzOLEbRzZKa; zcn{2s01m3Z!2#4OSpROKd53lGCfat`Kn^;0pyB{HfKmZ#tR;sr0RRO(JFHuW_2!^YhYjIChyvmY(9D1{ zq!;%Hbn5^GkidUy4F@Rr77o`0w}20j-YcmXe{b0RSz++E-<$mLs}5ElM>9qhiR$^u z(LyqXb(Nhij?OVrrkSyrg*UTMu!(K?%?(n{YA%v_(wMZ)#NQ=iYk-06bQ-x&f`(68 zaP%luT2Y9oQO#&{p?)0m0uE6Qp2uVbPF{9e@$|e^rX_cc)$DXcgLiEB($@nEXeG>I z*=JBw6@!WEH$ts zN89itWahYNtEGDoi8PCy+T7n#1;ue17@*@5dX2woY5@qKUIUF8wC{llnDaa~p2y^5 z00iIwwCphy00$sXz>HzxAVZP><9Rrk(8mWX{0~4dG_k~h0A!fx+Mf=;1SkNiJj=`l z4nUFsOu$e8c>+cQfB*&r%q4o~?!y2p$R$9l_V*+Czu^Fgsel9DA@H{+;rpKvggi1% z15ca{Q58~!rDQ$yBvqYfc9kp)@yAg%DhtxNOdf)dBGZKC(Tl<+FS-2LQiui^kE7 zIf9r3#ZUG&WA`A!#e7tfIcUm3gYeYpPvcm_gz&S{p+_58kMrf^y%q94T#3jF#GO+6 z!7R-7_8B?9xwE-?DoF682;9Umyywd=EF({Ie-WUN zL^2H#GW|~ySVmPW_bZztG_`CB1bpGpu9NSt$p3aT%-8-q9i=1EP|1%A>>+svStx{A zkj;P?6Ery>qRe^q7FzJ2js%l8PBy*Zh=b&`6ByF-IR zA3uI9E-LBk?Sm*=Szh`2)tmgB{DJ;~yqx@nKQ1dRDedm+uBxc+>g;w{v?@!Oo%w54 zcXv-ucTaxqi)>NOyTW2aW6P?_>Uv3i$-9zvjxMlC1|LL^t=^!V zE`C>1QvANIwhp3iZdTq;I}hY$=XG^<^>p=gcX#Jy=SylOUE}}jZf|Qp6B_wT`Y)h7 zE-5PM?gG2R{?7K!|Cs;s-@nNJ$rHc|Z}n^*PX$#pbxY^+c?u3hN9A-h6OocO+NnLl zv{s-JXDddtdDcW}f`JEz&56lHnMR{wg#r>miQ>e}Z`oUaP7XgO%u2#@&r~vBH>7Pz zHwe+uR9BvLS&ZUkmyp`vRzzQt+)A~*Jz=Xr5;Jorjr@vczZRho%v>K_NXneNXObCN zEVx&V7}Vg%3_bp)U-bLth0;YPvNXd86N8@FU1VKV8wNoy*)Ef&T60|o7b6T%k}))0 z>utSbwWId`r8@rJlSOJhIg* zqhJPt_r31qCP$7EKMW8~@|U8s%+0X@*4NhDI3Y}aA93djqQ5nX>T7E&$@t|}LL!X2 zhkARVc|I~Y*xlIp5vJL#t&&#-l7iR0EiDa&g+P>7iHSYU&H1r$T@4KlMMYmee{L*# z2lKCi&Q376lN1z`WMsUIzx5{RUgNvs{`U6azCLi8dVM!(u)F*7=xBu~^L0{Ee|ra5 zPDx(B2Ft11moLF`>hq^hm08)fuU_>ux2US4!gxx<7pAYHWmAK*^Jg@tJ%> zW5L~|o|cxTlJCyc|0f6a|Jz@J5hB>oCYXR5Cjdy+VRezv&}rc1zS%^X*uj=&UC52XoRqd$U_@{8-=O5#rqjIjdjGUIwlRg~ zqVSAEY8%zd>F6SKu5*R#RqkS^Y^`ZlNP#QU?o7bkKrZuAFaNX@wc`WX*Ke7Uh59=N zdKo#VrX4~ke4g4#(i6c{Ve*BwWYH?7%N`25-2JhJ<3%c#2##}@PDwb^2Q>$yL7X*3;{m^s4rrJkbsM`kKHR%WV?*$fwkKO|9Pg9%6fBaP z_w9<@INzLp=i3`T4{I=7yup1n!9%jLqecsF|qgihR>HI--isVUm_`q zJU7_f4Bd>8uFm3f5tt0IF(c#4r%%w(faXSXcGlpB54}}YqXPr5W(CNFRk)$HHfVHA z3`F4i8|ZvO3lw(TKKAs~+_`-_F|GFQUFd@LR93=>q&X|IyL|jEENFhV|J=+|2Ith+x}vVZ$7Pj4g6QWiNP2{75Fx;4m_nU zm6lKEpYjXE>u`GXw~+JCnJnMDPS2e83bE6qPhl!8#_KDc^>BRg@Ro4laiix{u3;86 zVCD=1K@=hQ?JbS<$=a3{0Tc_WlFRML%{To??5t&1!)|?er6$YqSVfKzoeG(ue^TWW z^X%G-%iiDJke>Gv)o6B2mNPs%xEph#b`_(3IJ-kqsW+xjkpKqxXGgCuQ1q z^VOIv>Al{z8d*yt365qgX{C~#%41e)W%i4Ll4#~qw|UC2WTGi-$K z7V^kssx=*Fzo~~&yl<$Eq)1a#pKT*g>0pTDCTo@7<}PBTPK*G@DUxrv*9%;$6d75js7Xv?cV)0iQ|e4gnXBBl{~< zhO;Q~jR@5&k);r{bg|*F)zc4ey5Ks!^}|K2H|Hg!;a%qOm*S(Pn^v@!u=(kc5TZftQ~`!Vw{n%5qc zGWv^@EmbLAdk)eC&A0bin0M}*wGv$vH*e`?f0fFG&B3xpORb6Iv*I42`iC>55N#W_ zx3#tkOZgki(Q)89{|4N5UOOiyI&B$Gn(p5l?dch;sTr)T!3I3dDaoaW4-HgTmmc;3 zCIWDQP<!UPBi`)=1yfY-7U$KD^@56o>& zzCYB^(E2zHfZO);m!_nI?$ zKviWq|HMFLWpD92Xcm9!>jU8SzJCv#?XRi?;C>z%Dd!z8_vP0Mt~WnODc;K+lt|jr z9|Lm%xWHdP>V)qC%$5MbfZg_ApVtd+l7 z6CLON@-m?CU~TRD!-x8-Dtg})mGO?ZKYLp2y{G?uN!`^e_1CXKCmQQGLzfv7k7IIj z05L#$w6_Pa+h1N@eI|6c=>uRFYfRT)z4HFhfx+r(0B*@XZy+x;qk*}w;tTKv>;iCM zM%7zfTqn2z*ai4v`?|wTP5l++Fv*5p?z-z&Tc4zV?CdN(e)Qj#g#V%sjsZ742a%ig zwd71j)s%jk0Pd7~Q7bu_{7}3ht1bHl0>E8C(T>i%$-78fm(SwS`Jt++1XcCu2e;nx zZ;ZJeog!SJs7P6C@X>@#K6`_`{GR99a8HWz9(AK)U&DZ9=bW=#3L*kPTU1H2t{n~;3rp%2rV>e)j5H(93^KbHD7XuXXfsbi*xt$ z-iO=LDTYr`nhKYXkD{v`%75|`%F@pcMk?IMObO^a0(RJ&xfm!v448#ff8U~DP2B`vVz`YN0-OpxrCRb<=9 zhO*gwdt$QKf02m}!&)hT5HIn?`CDe`&k_rSlU1%-DkxC1dk{~`0-B#pgf69JE-mio7R{to+*7X9Bq#kNS%$W(l+OD&S6mipMWo2uz@o}J z_sIe$lC6%%dD8@SN4vYrxVu{J-o|)4SXG6M(15Njw-bP_ZI4pl zdu|2NVu@@ycQ+)mlGCRKt18sIi{-VAmoAQd`2tYwFDfkExxK>Yz}TlxeTCwI($dDOm%o7XeQRrT zLVU}eM4&F2JYR8eA4Hk{cSZH*BL^xg zfWxCb-Tg&HfZ_=e0ALmf3{38L^0-$l{?ym|skgUm_fPE)AM}@&)CBmor9Nype-1zm z)CB@V;yYMX0YC;UV-rE(FiZy_8~)hQ0r+jcolqNk62M!3@jQm&_S6Uc#qWU9fLRQ} zozI^FZ?RMuPz*o@J`a|c)dc$YmzDyV`-L!9)BwAsSlEuMmS#1 zFCI4AE#J?i&<*TP+Dx%oh-=xOed}H1vUQuaeGL{70;NxLt!EH?{cdr7IIdq8@#5qi zS0x8m5rIe1c5iUBD9+g$Ja32EP6|rTLZ9&D1H2RIKiH-(c0?}xBnVwX4OBBl*+OA` zI_ht8<|_BJu;8L-HT#G&)BO#~a!%78ZIzliUEz|%%Le6TCrzQy*lp-p8?_s}z2zR# z&4x}$qhdxxrDz>{u8nZGt1>oS_W#g|A?+b*QF*K2Bz(REP%5{nKop5iDFXUSO%*mL;!&VzJRH)9AIYSv8fS{SIqkdrtlVL@lwB4u`hoY3G-5``0>D|jG5lVWDjvL^H8c!86io|#9+ z$*?^((UVo@x5>JGHV->CBUsU2_04-tN2>PH=s>BMRD`8j-ZTX<_HAM3;14tC-`-h0 zp4hJX4Y8$bSO1RKuC5Btt-#mTTk+69XpM{g*xU@1tqTfhPq|;UXV*kBJ5*5)#0AiH zq$IcBPpS*_A1EmX+zwS%0BC`-jS*px)wU+Ye{5+f<7^l#egENHIB<8Urn({QG@!TK z!yT~tAu<9}Jq?zY0&6=Sj_0!gS4d`C<70;YlkW-`rf=LUAG2+3RrE4iT;QAZ0F-g10^Mud%XI^ zZ-J(g<3}sDZ2^>)yKfw-tOS$-FFR8114OY)um+0X0bBv7<(oH+G}N~z-ya1po$|7w z^74T~ao?K)U}t0aS?DVCzkSnjKM5EKO#QaQ0AvNw0#<>kk`u>98XEdb#_`!-SO`&K zpzM9wCbtjaVFRV_`-{Y*-Ccw4OFngX19~fW{nT;)9w4?W;|Zj?e~;LXN8`74LY_My zep|KMt77|BVC|=#9su)5-6QBc0AB~+e{b#n7x-g{jj~3G%Q3_<@tVOCh&7+RwhlRU z6A)YAth8vnld!_2gMg3anaM2mib@t`*$(CrL@^a7;|SL)R>`S0#)B;DoC_2855QtZvt>!WF9kCjzixza3|ivQQ%nMXB! zrG5ODjVuHS31C3L$Yubw5jR9^lMoOPZCF&6paBwAt7uUXwI=K!NLZ?f?3);W>JQhuqKoe!utL=ZW2YRm4TU zJIOVx{4wyjs8R zzN>rEuQ)B#Tj}E>LtHh(=6~;Cl-xpFV)>kuhQoiAbk;2BP1Hlb3fnm*vLSwiDw90( zmR^3)!Ior-o?y&J)AFX&v@Q*KdcVyFMw;MAlAQ|nqf{bw`g>%gjP%p%=Z%mbOsO`u zRkKf4)ROGGSoMUlpJ%3hg`o?h)Y7>$xg8~9grr_5cSqF2bCmmI7~d18V?N{h*;0uf z^x8N^jf{&^$=s)~Wu2BA%5aFVM~7V=ro{NY&(e+MT_AF?7HfNPrcRMfB?=z@ZC}zV z*R3W*o^_hZexC~_2(n1@*j7QsZ^s{yE|eZ*O%Lm+Q+wfw56rQ-{km3z8cq}BX$@aG zTP_1Xfu#^&ytvr(V{cDyjJ#(@1b`IPr$ABQ>a)`) z`;(J^tANw~l%!X;ZjN5Nc6Y5;e`?CZXxY1G!!O%f(VP}o`tnN4r!4)Ov=;c;8!ZD` zK0kYUoT%+>@18yTY2^7GA5Z8bH;|hA{>2N}JAkE-6O7bUzrJ-7c!*wXL!~RoRnVNC5Ejp5Iy^YR}H?u-Dx2Uh}H!+HYtw`G-#`fTGnwr8e7OBBUMR z6Bw=^(K^r7rqG{Qz||$344xNDNmQ`i4xjf(v};B_95p;_IO+7{mVh;=8$&IS~dJGaJij zRf6D!EQT@Hk4s<%?W4iml@rbJug#jf6T~qcd<-E*Zsb2hMPU#*sLv@fvYKyMBDOQw zUXqRz9(a(k&5o=@bk<)Iq#OAi&<;h8+Sf*T_g0l+2Q@UxvYfQu#uIhQxwYS7a}Nz3 z3>$JUAqvRH%f1vBDaA;1zG_~`;!v^rf9f& z$7?kZ6Br6&7xnu9?t%1FfF{rx5DCQm@$TK>6UXna^M0J4J5-oI+Irh+zXPv>Szb839NK-m!aMqoIBtW ztUc@~VCO%Tp8hTlcSRn7ZK-k z9KSZvwliat3(E~LvRP|FDEgN>r4G2IOjBpK#w2W!F!u8oY3b3fv3kgxG}s8SCXxXG;{=eFU5G>uWv3HUgg@XDsb^M)_?v=@(s#`qPMVV>RJKku)f zb8O_QLDk)x#4bE6Zno=Lj%>#EcZp93SqF9)jJVhmNk}iUOLKM@7ZY#NryzaxelS<| zq=u-E`BGAV!IG?e3q{O;>KWnG^~`2+R5Ei-;+0@4ZqmFBkNmtie%g8Xj!s!o$|C-C zy<~Nf_5*Uq0_46bSH;t9@BSJWIewZA%^=((z$`c8OTK5Vs+zO7?px20OVa&|2fE|A z8t+{O4tnRkrDtMBI~%D8l~aFE+GIB96duXr=j{yetkd3oRd7gqu4Z;=e4;s}bc)o9 zl1rQ_ux8{=msQ1=E>{#jE)(X-W$8P!HR{XL>qtr!izUe}0i^9&VjScIRx~4)a~O`H zVRaS5T+y9mx`VFsfh)f7#yN4_Ru|?tk{PJo)b@EAX$a z0LcxmB9Bkm=0$7hLMxDtZURxw$dZb15rj}HRD zp@A!#Z7DprGnB456WUdOdLjVc4^)JYvprZZNT48!0#yJ$3KRl*0|t%#A;1D50g?a> zus{_YxzZsJu040I3iV54Xo%#^UglB4<$+A9@cPEHc;Y)+lLCGa)EB8hx^u6yq--S!!sE z!P+C|Ma*l)%~Ms`2%8oicsUg>(XQn-lslIQR}{T3@AgkDpFxx$9gO;Axao_U^*W;E zSdtEZC4RB2Rt2Xvzx>h49^dR6tC|p>YtrB{vb#SrUb-31U?XwfW`-D|LR&N$o4@+%KhK~(Atj+ z^Fbqzwzoqx1o$rO=7&-BU%-DhYkXNnBlL-71-q!1 zG<2*j%WG%NNjExu=^UCZP8|&D0b};8aZjLk*L@f-1 z@RG`5`op+*J$5wbKwaOTbH{q>`e1Ow(Zi41vKo8FKn=sDI-X=6skq*j1@0U|&Pe~D zb8TawgN^4n!&z0|ozP@gl6Rf$cziYstTTvaP|P5g zK_$cf4{{ltF&y83Glu*Cl7rt-$jQGlS%F_GFyZ*|=`-S{j4!JaSr1X&kYe=9-Pd_u z^XCeR8}tpvmzAp#b%u$?Ylrb=wV&hfMde;IYDIL2G&bv0V1pWcemJ7!Md4|N8{cV` zXAE8~CF5CEG%+;IR7t-fx-)9#Ug2Kpx59ii7oSbpdUd_mEAty?u=oI}?o?i4?%G}U zxp%g%Z$=hOLBwITyt*?HszkA(XsD}pYL*v=>Wh7F-txz|KUv=lXjM@?S=R5lWoGnL z_wU-&6fEo`66u`Z-in&zn4E>YbAMW@%YBUfzFnpK>Fc5B%em6_Z#=!%2c}TXl`6Bd zo2ba*TT}8mIyK6JG|2&GK;-tCmVq2Q^9XK+wG3lHKm7BBwLPsjNjnaHp?>3RGbYt+ zL>u=xE2eHGPSU8m1Lr(2ZAzTkh(~zD_3#YWpQQLqp+G0LYn=-@%r?lIJSq>?Vs6Wj znNvz+Tzrm$?#ih*!uiV=N=S@2uO9m}icU!%k7RwpI7*e5-0;xOK+NUYQ`0*5Y3}b< z7uy>t8u;IeLO#7W>IK4|^N-tr0J6|962e9FHYn-gJ5K1;xf2E0+jJ z7vG;b@l-xjGHaVBFRE=2%Mf{3-fv8Pa)@Eo#8Ox-Qq$N-`0O+nOAMw6Y%;4NSN&Ya zp32G+*DA?zdb2xb($+E-Y^ql=>Jr;xv8I`;e(Bpg;U}g6OI&`#5@`MhEdZha9{>Pt z-3!b8Z+dfr-ht+?V9rzZ`52XIjY&n^IX8AynEAEDT29_OQrtq&8a3WCex$IIVO=vazF6j^oR+ z_N2wpLwXVEftT|g)G0o?C(1js9g8h}hDL+Cj=06H&JFH)bUoiQdP8nv?UOYJeZStD zTT%P;cB;v>bkUNpYh~ZD`d#}I#RIZG@BX3gy2V!0C>#SX3}aat_teF!&Zj||`0#w{ zpuI`~D;gmrfA;VSys^HBrQtc{tVoV;G=)h@=(ux66isJ^RSS2Ve(*rN5vOjj)#_?* zQ|f0XpN`dSLo5)_f4uh5h5t9J{(oEYu-+%Te*PzY)+fK$-&TNh|2J#Dn!`onXyc}* zv&R;Cc89DF+EjcoRcE#}-tnY_pJt>=XNymk+Gm;(=}hI-($)lyKNbdb47BD`zHaKf zeaf_>7#CY+?4?=ZR%&!$;TDSKVcQC~iaV!uk@#GF3H}cKX>NU^X&Jeq%c%1hLTV5|vXUbSCEbgK=`DLa^ESKR` zIYuT*9VCi^rHQnE{#qu_Cg_rcEcuz$cnaRCYQ-xaj;a}P_d}PUi6evK;2SJ{GXUh{ zZa=x=fBTu3{L>$~0;J}TD;|f#bD@D?eGFx~Qx1viD@bChd!5fZ;oq2|x-+R;FZ`}r$H2j(M- z5WUIm{Ez&xo&4E;PX$Qdql+6}*I=mTA`hA`KaMudI@#feg8F!^scQv6FjXUY+G4sf zr`xDeVMw6UgfEPpk}W*5C2w3M&If3ro6je@6}KTaJ9OWZ-DRD{v*X98=3>5U)B>WV zmbj-vS#F*hq7_ye;ozh(@4wrdHZzBPc3WJ@PsH2Rb=sSgz=Jq!1AzAp{ds9_px0k-u z6u;P|&mmoHMV?^0u-|DP-seILnLFUTZy}7^;GQaL#SkLu!WYB1jRM zg03`a^zo%~q|9|o_GrnC%B2eeq)ump+oRSU&@GSD=AvisA<)EURxILxP@v0ZJe&|h zo6SE!X(xY#$qM{GDnK%XHJyjO-1!d input + label > i.g-mdi:before, -.pretty > input + label + label > i.g-mdi:before { - content: attr(data-icon); - display: inline-block; - font: normal normal normal 24px/1 "Material Icons"; - font-size: inherit; - text-rendering: auto; - line-height: inherit; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-transform: translate(0, 0); - transform: translate(0, 0); -} - -@media print { - .pretty > input:not(:checked) + label i:before { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color: transparent !important; - } - .pretty :not(.toggle) input:not(:checked) + label i:before, - .pretty > input[type='radio']:checked + label > i.default:before, - .pretty i:after { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color: transparent !important; - } - .pretty input:checked + label i:before { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } - .pretty.primary input:checked + label i:before { - color: white !important; - } - .pretty.success input:checked + label i:before { - color: white !important; - } - .pretty.info input:checked + label i:before { - color: white !important; - } - .pretty.warning input:checked + label i:before { - color: white !important; - } - .pretty.danger input:checked + label i:before { - color: white !important; - } -} - -.pretty { - line-height: 1; - position: relative; - display: inline-block; - margin: 0 10px 5px 0; -} - -.pretty label { - font-weight: normal; -} - -.pretty > input[type='checkbox'], -.pretty > input[type='radio'] { - position: absolute; - z-index: 99999999; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - margin: 0; - cursor: pointer; - opacity: 0; -} - -.pretty i { - font-size: 1em !important; - position: relative; - display: inline-block; - box-sizing: initial; - min-width: 1em; - margin-right: 2px; - padding: 1px; - text-align: center; -} - -.pretty i:before { - position: relative; - z-index: 999; - left: 0; - display: inline-block; - vertical-align: bottom; - color: transparent; - background-color: #fff; -} - -.pretty i:after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: '\0000'; - color: transparent; - border: 1px solid #b9b9b9; - border-radius: 0; -} - -.pretty > input[type='checkbox']:checked + label > i:before, -.pretty > input[type='radio']:checked + label > i:before { - color: inherit; - background-color: #fff; -} - -.pretty > input[type='radio'] + label > i.default:before { - left: 0; - min-width: 1em; - content: '\0000'; - color: transparent; - border-radius: 0; - background: #fff; - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty > input[type='radio']:checked + label > i.default:before { - background-color: #b9b9b9 !important; -} - -.pretty > input[type='checkbox'][disabled], -.pretty > input[type='radio'][disabled] { - cursor: not-allowed; - opacity: 0; -} - -.pretty > input[type='checkbox'][disabled] + label, -.pretty > input[type='radio'][disabled] + label { - cursor: not-allowed; - opacity: 0.5; -} - -.pretty.plain > input[type='checkbox']:checked + label > i:after, -.pretty.plain > input[type='radio']:checked + label > i:after { - border-color: transparent; -} - -.pretty.plain > input[type='checkbox'] + label + label > i:after, -.pretty.plain > input[type='radio'] + label + label > i:after { - border-color: transparent; -} - -.pretty.plain > input[type='checkbox']:checked + label + label > i:after, -.pretty.plain > input[type='radio']:checked + label + label > i:after { - border-color: transparent; -} - -.pretty.plain.toggle > input[type='checkbox'] + label > i:after, .pretty.plain.toggle > input[type='radio'] + label > i:after { - border-color: transparent; -} - -.pretty.circle label i { - padding: 2px; -} - -.pretty.circle label i:after, -.pretty.circle label i:before { - border-radius: 100px; -} - -.pretty.circle label i.default:before { - border-radius: 100px !important; -} - -.pretty.curvy label i:after, -.pretty.curvy label i:before { - border-radius: 2px; -} - -.pretty.curvy label i.default:before { - border-radius: 2px !important; -} - -.pretty.primary input:checked + label i:before { - color: #fff; - background-color: #428bca !important; -} - -.pretty.primary input:checked + label i:after { - border-color: #428bca; - background-color: #428bca !important; -} - -.pretty.primary input[type='radio']:checked + label i.default:before { - background-color: #428bca !important; - color: transparent; -} - -.pretty.primary input[type='radio']:checked + label i.default:after { - background-color: initial !important; - border-color: #428bca; -} - -.pretty.primary.smooth input:checked ~ label i:after { - -webkit-transform: scale(1) !important; - transform: scale(1) !important; -} - -.pretty.o-primary input:checked + label i:before { - color: #428bca; -} - -.pretty.o-primary input:checked + label i:after { - border-color: #428bca; -} - -.pretty.toggle i.primary:before { - color: #428bca !important; -} - -.pretty.toggle i.success:before { - color: #5cb85c !important; -} - -.pretty.toggle i.info:before { - color: #5bc0de !important; -} - -.pretty.toggle i.warning:before { - color: #f0ad4e !important; -} - -.pretty.toggle i.danger:before { - color: #d9534f !important; -} - -.pretty.success input:checked + label i:before { - color: #fff; - background-color: #5cb85c !important; -} - -.pretty.success input:checked + label i:after { - border-color: #5cb85c; - background-color: #5cb85c !important; -} - -.pretty.success input[type='radio']:checked + label i.default:before { - background-color: #5cb85c !important; - color: transparent; -} - -.pretty.success input[type='radio']:checked + label i.default:after { - background-color: initial !important; - border-color: #5cb85c; -} - -.pretty.success.smooth input:checked ~ label i:after { - -webkit-transform: scale(1) !important; - transform: scale(1) !important; -} - -.pretty.o-success input:checked + label i:before { - color: #5cb85c; -} - -.pretty.o-success input:checked + label i:after { - border-color: #5cb85c; -} - -.pretty.toggle i.primary:before { - color: #428bca !important; -} - -.pretty.toggle i.success:before { - color: #5cb85c !important; -} - -.pretty.toggle i.info:before { - color: #5bc0de !important; -} - -.pretty.toggle i.warning:before { - color: #f0ad4e !important; -} - -.pretty.toggle i.danger:before { - color: #d9534f !important; -} - -.pretty.info input:checked + label i:before { - color: #fff; - background-color: #5bc0de !important; -} - -.pretty.info input:checked + label i:after { - border-color: #5bc0de; - background-color: #5bc0de !important; -} - -.pretty.info input[type='radio']:checked + label i.default:before { - background-color: #5bc0de !important; - color: transparent; -} - -.pretty.info input[type='radio']:checked + label i.default:after { - background-color: initial !important; - border-color: #5bc0de; -} - -.pretty.info.smooth input:checked ~ label i:after { - -webkit-transform: scale(1) !important; - transform: scale(1) !important; -} - -.pretty.o-info input:checked + label i:before { - color: #5bc0de; -} - -.pretty.o-info input:checked + label i:after { - border-color: #5bc0de; -} - -.pretty.toggle i.primary:before { - color: #428bca !important; -} - -.pretty.toggle i.success:before { - color: #5cb85c !important; -} - -.pretty.toggle i.info:before { - color: #5bc0de !important; -} - -.pretty.toggle i.warning:before { - color: #f0ad4e !important; -} - -.pretty.toggle i.danger:before { - color: #d9534f !important; -} - -.pretty.warning input:checked + label i:before { - color: #fff; - background-color: #f0ad4e !important; -} - -.pretty.warning input:checked + label i:after { - border-color: #f0ad4e; - background-color: #f0ad4e !important; -} - -.pretty.warning input[type='radio']:checked + label i.default:before { - background-color: #f0ad4e !important; - color: transparent; -} - -.pretty.warning input[type='radio']:checked + label i.default:after { - background-color: initial !important; - border-color: #f0ad4e; -} - -.pretty.warning.smooth input:checked ~ label i:after { - -webkit-transform: scale(1) !important; - transform: scale(1) !important; -} - -.pretty.o-warning input:checked + label i:before { - color: #f0ad4e; -} - -.pretty.o-warning input:checked + label i:after { - border-color: #f0ad4e; -} - -.pretty.toggle i.primary:before { - color: #428bca !important; -} - -.pretty.toggle i.success:before { - color: #5cb85c !important; -} - -.pretty.toggle i.info:before { - color: #5bc0de !important; -} - -.pretty.toggle i.warning:before { - color: #f0ad4e !important; -} - -.pretty.toggle i.danger:before { - color: #d9534f !important; -} - -.pretty.danger input:checked + label i:before { - color: #fff; - background-color: #d9534f !important; -} - -.pretty.danger input:checked + label i:after { - border-color: #d9534f; - background-color: #d9534f !important; -} - -.pretty.danger input[type='radio']:checked + label i.default:before { - background-color: #d9534f !important; - color: transparent; -} - -.pretty.danger input[type='radio']:checked + label i.default:after { - background-color: initial !important; - border-color: #d9534f; -} - -.pretty.danger.smooth input:checked ~ label i:after { - -webkit-transform: scale(1) !important; - transform: scale(1) !important; -} - -.pretty.o-danger input:checked + label i:before { - color: #d9534f; -} - -.pretty.o-danger input:checked + label i:after { - border-color: #d9534f; -} - -.pretty.toggle i.primary:before { - color: #428bca !important; -} - -.pretty.toggle i.success:before { - color: #5cb85c !important; -} - -.pretty.toggle i.info:before { - color: #5bc0de !important; -} - -.pretty.toggle i.warning:before { - color: #f0ad4e !important; -} - -.pretty.toggle i.danger:before { - color: #d9534f !important; -} - -.pretty.toggle > input[type='checkbox'] + label > i:before, .pretty.toggle > input[type='radio'] + label > i:before { - color: inherit; -} - -.pretty.toggle > input[type='checkbox'] + label + label, -.pretty.toggle > input[type='radio'] + label + label { - display: none; -} - -.pretty.toggle > input[type='checkbox']:checked + label, -.pretty.toggle > input[type='radio']:checked + label { - display: none; -} - -.pretty.toggle > input[type='checkbox']:checked + label + label, -.pretty.toggle > input[type='radio']:checked + label + label { - display: inline-block; -} - -.pretty.toggle > input[type='checkbox']:checked + label + label > i:before, -.pretty.toggle > input[type='radio']:checked + label + label > i:before { - color: inherit; -} - -.pretty.primary.hover:hover input + label i:before { - background-color: rgba(66, 139, 202, 0.5) !important; - color: #fff !important; -} - -.pretty.primary.hover:hover input + label i:after { - border-color: rgba(66, 139, 202, 0.5) !important; -} - -.pretty.o-primary.hover:hover input + label i:before { - color: rgba(66, 139, 202, 0.8); -} - -.pretty.success.hover:hover input + label i:before { - background-color: rgba(92, 184, 92, 0.5) !important; - color: #fff !important; -} - -.pretty.success.hover:hover input + label i:after { - border-color: rgba(92, 184, 92, 0.5) !important; -} - -.pretty.o-success.hover:hover input + label i:before { - color: rgba(92, 184, 92, 0.8); -} - -.pretty.info.hover:hover input + label i:before { - background-color: rgba(91, 192, 222, 0.5) !important; - color: #fff !important; -} - -.pretty.info.hover:hover input + label i:after { - border-color: rgba(91, 192, 222, 0.5) !important; -} - -.pretty.o-info.hover:hover input + label i:before { - color: rgba(91, 192, 222, 0.8); -} - -.pretty.warning.hover:hover input + label i:before { - background-color: rgba(240, 173, 78, 0.5) !important; - color: #fff !important; -} - -.pretty.warning.hover:hover input + label i:after { - border-color: rgba(240, 173, 78, 0.5) !important; -} - -.pretty.o-warning.hover:hover input + label i:before { - color: rgba(240, 173, 78, 0.8); -} - -.pretty.danger.hover:hover input + label i:before { - background-color: rgba(217, 83, 79, 0.5) !important; - color: #fff !important; -} - -.pretty.danger.hover:hover input + label i:after { - border-color: rgba(217, 83, 79, 0.5) !important; -} - -.pretty.o-danger.hover:hover input + label i:before { - color: rgba(217, 83, 79, 0.8); -} - -.pretty.smooth i:before { - -webkit-transition: all .5s ease; - transition: all .5s ease; - -webkit-transform: scale(0); - transform: scale(0); -} - -.pretty.smooth i:after { - -webkit-transition: all .5s ease; - transition: all .5s ease; -} - -.pretty.smooth > input[type='checkbox']:checked ~ label > i:before, -.pretty.smooth > input[type='radio']:checked ~ label > i:before { - -webkit-transform: scale(1); - transform: scale(1); -} - -.pretty.smooth > input[type='checkbox']:checked ~ label > i:after, -.pretty.smooth > input[type='radio']:checked ~ label > i:after { - -webkit-transform: scale(0); - transform: scale(0); -} - -.pretty.smooth > input[type='radio']:checked ~ label > i.default:before { - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.smooth > input[type='radio']:checked ~ label > i.default:after { - -webkit-transform: scale(1); - transform: scale(1); -} - -.pretty.smooth.toggle i:before { - -webkit-transform: none; - transform: none; -} - -.pretty.smooth.toggle > input[type='checkbox']:checked ~ label > i:before, -.pretty.smooth.toggle > input[type='radio']:checked ~ label > i:before { - -webkit-transform: none; - transform: none; -} - -.pretty.smooth.toggle > input[type='checkbox']:checked ~ label > i:after, -.pretty.smooth.toggle > input[type='radio']:checked ~ label > i:after { - -webkit-transform: none; - transform: 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 bounce { - 0% { - -webkit-transform: translateY(-50px); - transform: translateY(-50px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: translateY(-30px); - transform: translateY(-30px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: translateY(-18px); - transform: translateY(-18px); - -webkit-animation-timing-function: ease-in; - } - 90% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: translateY(-8px); - transform: translateY(-8px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@keyframes bounce { - 0% { - -webkit-transform: translateY(-50px); - transform: translateY(-50px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: translateY(-30px); - transform: translateY(-30px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: translateY(-18px); - transform: translateY(-18px); - -webkit-animation-timing-function: ease-in; - } - 90% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: translateY(-8px); - transform: translateY(-8px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: translateY(0); - transform: translateY(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@-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; - } -} - -@-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 vibrate { - 0% { - -webkit-transform: translate(0); - transform: translate(0); - } - 10% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 20% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 30% { - -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); - } - 40% { - -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); - } - 50% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 60% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 70% { - -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); - } - 80% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 90% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 100% { - -webkit-transform: translate(0); - transform: translate(0); - } -} - -@keyframes vibrate { - 0% { - -webkit-transform: translate(0); - transform: translate(0); - } - 10% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 20% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 30% { - -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); - } - 40% { - -webkit-transform: translate(2px, 2px); - transform: translate(2px, 2px); - } - 50% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 60% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 70% { - -webkit-transform: translate(-2px, 2px); - transform: translate(-2px, 2px); - } - 80% { - -webkit-transform: translate(-2px, -2px); - transform: translate(-2px, -2px); - } - 90% { - -webkit-transform: translate(2px, -2px); - transform: translate(2px, -2px); - } - 100% { - -webkit-transform: translate(0); - transform: translate(0); - } -} - -.pretty.a-tada > input[type='checkbox']:checked + label > i, -.pretty.a-tada > input[type='radio']:checked + label > i { - -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; - animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -} - -.pretty.a-bounce > input[type='checkbox']:checked + label > i, -.pretty.a-bounce > input[type='radio']:checked + label > i { - -webkit-animation: bounce 1.1s both; - animation: bounce 1.1s both; -} - -.pretty.a-rotate > input[type='checkbox']:checked + label > i, -.pretty.a-rotate > input[type='radio']:checked + label > i { - -webkit-animation: rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; - animation: rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -} - -.pretty.a-jelly > input[type='checkbox']:checked + label > i, -.pretty.a-jelly > input[type='radio']:checked + label > i { - -webkit-animation: jelly 0.9s both; - animation: jelly 0.9s both; -} - -.pretty.a-vibrate > input[type='checkbox']:checked + label > i, -.pretty.a-vibrate > input[type='radio']:checked + label > i { - -webkit-animation: vibrate 0.5s linear infinite both; - animation: vibrate 0.5s linear infinite both; -} diff --git a/src/pretty.min.css b/src/pretty.min.css deleted file mode 100644 index d5caf61..0000000 --- a/src/pretty.min.css +++ /dev/null @@ -1 +0,0 @@ -.pretty>input+label>i.g-mdi:before,.pretty>input+label+label>i.g-mdi:before{content:attr(data-icon);display:inline-block;font:normal normal normal 24px/1 "Material Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0, 0);transform:translate(0, 0)}@media print{.pretty>input:not(:checked)+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:transparent !important}.pretty :not(.toggle) input:not(:checked)+label i:before,.pretty>input[type='radio']:checked+label>i.default:before,.pretty i:after{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:transparent !important}.pretty input:checked+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact}.pretty.primary input:checked+label i:before{color:white !important}.pretty.success input:checked+label i:before{color:white !important}.pretty.info input:checked+label i:before{color:white !important}.pretty.warning input:checked+label i:before{color:white !important}.pretty.danger input:checked+label i:before{color:white !important}}.pretty{line-height:1;position:relative;display:inline-block;margin:0 10px 5px 0}.pretty label{font-weight:normal}.pretty>input[type='checkbox'],.pretty>input[type='radio']{position:absolute;z-index:99999999;top:0;left:0;display:block;width:100%;height:100%;margin:0;cursor:pointer;opacity:0}.pretty i{font-size:1em !important;position:relative;display:inline-block;box-sizing:initial;min-width:1em;margin-right:2px;padding:1px;text-align:center}.pretty i:before{position:relative;z-index:999;left:0;display:inline-block;vertical-align:bottom;color:transparent;background-color:#fff}.pretty i:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'\0000';color:transparent;border:1px solid #b9b9b9;border-radius:0}.pretty>input[type='checkbox']:checked+label>i:before,.pretty>input[type='radio']:checked+label>i:before{color:inherit;background-color:#fff}.pretty>input[type='radio']+label>i.default:before{left:0;min-width:1em;content:'\0000';color:transparent;border-radius:0;background:#fff;-webkit-transform:scale(0.8);transform:scale(0.8)}.pretty>input[type='radio']:checked+label>i.default:before{background-color:#b9b9b9 !important}.pretty>input[type='checkbox'][disabled],.pretty>input[type='radio'][disabled]{cursor:not-allowed;opacity:0}.pretty>input[type='checkbox'][disabled]+label,.pretty>input[type='radio'][disabled]+label{cursor:not-allowed;opacity:0.5}.pretty.plain>input[type='checkbox']:checked+label>i:after,.pretty.plain>input[type='radio']:checked+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']+label+label>i:after,.pretty.plain>input[type='radio']+label+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']:checked+label+label>i:after,.pretty.plain>input[type='radio']:checked+label+label>i:after{border-color:transparent}.pretty.plain.toggle>input[type='checkbox']+label>i:after,.pretty.plain.toggle>input[type='radio']+label>i:after{border-color:transparent}.pretty.circle label i{padding:2px}.pretty.circle label i:after,.pretty.circle label i:before{border-radius:100px}.pretty.circle label i.default:before{border-radius:100px !important}.pretty.curvy label i:after,.pretty.curvy label i:before{border-radius:2px}.pretty.curvy label i.default:before{border-radius:2px !important}.pretty.primary input:checked+label i:before{color:#fff;background-color:#428bca !important}.pretty.primary input:checked+label i:after{border-color:#428bca;background-color:#428bca !important}.pretty.primary input[type='radio']:checked+label i.default:before{background-color:#428bca !important;color:transparent}.pretty.primary input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#428bca}.pretty.primary.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-primary input:checked+label i:before{color:#428bca}.pretty.o-primary input:checked+label i:after{border-color:#428bca}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.success input:checked+label i:before{color:#fff;background-color:#5cb85c !important}.pretty.success input:checked+label i:after{border-color:#5cb85c;background-color:#5cb85c !important}.pretty.success input[type='radio']:checked+label i.default:before{background-color:#5cb85c !important;color:transparent}.pretty.success input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5cb85c}.pretty.success.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-success input:checked+label i:before{color:#5cb85c}.pretty.o-success input:checked+label i:after{border-color:#5cb85c}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.info input:checked+label i:before{color:#fff;background-color:#5bc0de !important}.pretty.info input:checked+label i:after{border-color:#5bc0de;background-color:#5bc0de !important}.pretty.info input[type='radio']:checked+label i.default:before{background-color:#5bc0de !important;color:transparent}.pretty.info input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5bc0de}.pretty.info.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-info input:checked+label i:before{color:#5bc0de}.pretty.o-info input:checked+label i:after{border-color:#5bc0de}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.warning input:checked+label i:before{color:#fff;background-color:#f0ad4e !important}.pretty.warning input:checked+label i:after{border-color:#f0ad4e;background-color:#f0ad4e !important}.pretty.warning input[type='radio']:checked+label i.default:before{background-color:#f0ad4e !important;color:transparent}.pretty.warning input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#f0ad4e}.pretty.warning.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-warning input:checked+label i:before{color:#f0ad4e}.pretty.o-warning input:checked+label i:after{border-color:#f0ad4e}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.danger input:checked+label i:before{color:#fff;background-color:#d9534f !important}.pretty.danger input:checked+label i:after{border-color:#d9534f;background-color:#d9534f !important}.pretty.danger input[type='radio']:checked+label i.default:before{background-color:#d9534f !important;color:transparent}.pretty.danger input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#d9534f}.pretty.danger.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-danger input:checked+label i:before{color:#d9534f}.pretty.o-danger input:checked+label i:after{border-color:#d9534f}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.toggle>input[type='checkbox']+label>i:before,.pretty.toggle>input[type='radio']+label>i:before{color:inherit}.pretty.toggle>input[type='checkbox']+label+label,.pretty.toggle>input[type='radio']+label+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label,.pretty.toggle>input[type='radio']:checked+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label+label,.pretty.toggle>input[type='radio']:checked+label+label{display:inline-block}.pretty.toggle>input[type='checkbox']:checked+label+label>i:before,.pretty.toggle>input[type='radio']:checked+label+label>i:before{color:inherit}.pretty.primary.hover:hover input+label i:before{background-color:rgba(66,139,202,0.5) !important;color:#fff !important}.pretty.primary.hover:hover input+label i:after{border-color:rgba(66,139,202,0.5) !important}.pretty.o-primary.hover:hover input+label i:before{color:rgba(66,139,202,0.8)}.pretty.success.hover:hover input+label i:before{background-color:rgba(92,184,92,0.5) !important;color:#fff !important}.pretty.success.hover:hover input+label i:after{border-color:rgba(92,184,92,0.5) !important}.pretty.o-success.hover:hover input+label i:before{color:rgba(92,184,92,0.8)}.pretty.info.hover:hover input+label i:before{background-color:rgba(91,192,222,0.5) !important;color:#fff !important}.pretty.info.hover:hover input+label i:after{border-color:rgba(91,192,222,0.5) !important}.pretty.o-info.hover:hover input+label i:before{color:rgba(91,192,222,0.8)}.pretty.warning.hover:hover input+label i:before{background-color:rgba(240,173,78,0.5) !important;color:#fff !important}.pretty.warning.hover:hover input+label i:after{border-color:rgba(240,173,78,0.5) !important}.pretty.o-warning.hover:hover input+label i:before{color:rgba(240,173,78,0.8)}.pretty.danger.hover:hover input+label i:before{background-color:rgba(217,83,79,0.5) !important;color:#fff !important}.pretty.danger.hover:hover input+label i:after{border-color:rgba(217,83,79,0.5) !important}.pretty.o-danger.hover:hover input+label i:before{color:rgba(217,83,79,0.8)}.pretty.smooth i:before{-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-transform:scale(0);transform:scale(0)}.pretty.smooth i:after{-webkit-transition:all .5s ease;transition:all .5s ease}.pretty.smooth>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth>input[type='radio']:checked ~ label>i:before{-webkit-transform:scale(1);transform:scale(1)}.pretty.smooth>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth>input[type='radio']:checked ~ label>i:after{-webkit-transform:scale(0);transform:scale(0)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:before{-webkit-transform:scale(0.8);transform:scale(0.8)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:after{-webkit-transform:scale(1);transform:scale(1)}.pretty.smooth.toggle i:before{-webkit-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:before{-webkit-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:after{-webkit-transform:none;transform: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 bounce{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-18px);transform:translateY(-18px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-18px);transform:translateY(-18px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-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}}@-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 vibrate{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}20%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}30%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}40%{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}50%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}60%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}70%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}80%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}90%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}20%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}30%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}40%{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}50%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}60%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}70%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}80%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}90%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}.pretty.a-tada>input[type='checkbox']:checked+label>i,.pretty.a-tada>input[type='radio']:checked+label>i{-webkit-animation:tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.pretty.a-bounce>input[type='checkbox']:checked+label>i,.pretty.a-bounce>input[type='radio']:checked+label>i{-webkit-animation:bounce 1.1s both;animation:bounce 1.1s both}.pretty.a-rotate>input[type='checkbox']:checked+label>i,.pretty.a-rotate>input[type='radio']:checked+label>i{-webkit-animation:rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.pretty.a-jelly>input[type='checkbox']:checked+label>i,.pretty.a-jelly>input[type='radio']:checked+label>i{-webkit-animation:jelly 0.9s both;animation:jelly 0.9s both}.pretty.a-vibrate>input[type='checkbox']:checked+label>i,.pretty.a-vibrate>input[type='radio']:checked+label>i{-webkit-animation:vibrate 0.5s linear infinite both;animation:vibrate 0.5s linear infinite both} diff --git a/src/pretty.scss b/src/pretty.scss deleted file mode 100644 index 0a95446..0000000 --- a/src/pretty.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'scss/support/index'; -@import 'scss/decorators/index'; \ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss new file mode 100644 index 0000000..13b0736 --- /dev/null +++ b/src/scss/_core.scss @@ -0,0 +1,85 @@ +@charset 'utf-8'; + +.#{$pretty--class-name} * { + box-sizing: border-box; +} + +//Throw error on invalid input types. +.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) { + 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; + } + } +} + +.#{$pretty--class-name} { + 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; + 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 new file mode 100644 index 0000000..750d59e --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,39 @@ +$pretty--class-name: pretty !default; + +// colors +$pretty--color-default: #bdc3c7 !default; +$pretty--color-primary: #428bca !default; +$pretty--color-info: #5bc0de !default; +$pretty--color-success: #5cb85c !default; +$pretty--color-warning: #f0ad4e !default; +$pretty--color-danger: #d9534f !default; +$pretty--color-dark: #5a656b !default; + +// z-index +$pretty--z-index-back: 0 !default; +$pretty--z-index-between: 1 !default; +$pretty--z-index-front: 2 !default; + +// box +$pretty--curve-radius: 20% !default; +$pretty--box-size: calc(1em + 2px) !default; + +// text +$pretty--label-text-offset: 1.5em !default; +$pretty--label-text-offset-switch: 2.5em !default; + +// scale +$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; + +// position +$pretty-top: 8; +$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 +$pretty--debug: false !default; +$pretty--err-message: 'Invalid input type!' !default; \ No newline at end of file diff --git a/src/scss/decorators/_animation.scss b/src/scss/decorators/_animation.scss deleted file mode 100644 index 1addfc7..0000000 --- a/src/scss/decorators/_animation.scss +++ /dev/null @@ -1,52 +0,0 @@ -.#{$pretty--class-name}.smooth { - i { - &:before { - transition:all .5s ease; - transform:scale(0); - } - - &:after { - transition:all .5s ease; - } - } - - & > input[type='checkbox']:checked ~ label>i, - & > input[type='radio']:checked ~ label>i { - &:before { - transform:scale(1); - } - - &:after { - transform:scale(0); - } - } - - & > input[type='radio']:checked ~ label > i.default { - &:before { - transform:scale(.8); - } - - &:after { - transform:scale(1); - } - } -} - -.#{$pretty--class-name}.smooth.toggle { - i { - &:before { - transform:none; - } - } - - & > input[type='checkbox']:checked ~ label>i, - & > input[type='radio']:checked ~ label>i { - &:before { - transform:none; - } - - &:after { - transform:none; - } - } -} diff --git a/src/scss/decorators/_circle.scss b/src/scss/decorators/_circle.scss deleted file mode 100644 index feaef90..0000000 --- a/src/scss/decorators/_circle.scss +++ /dev/null @@ -1,13 +0,0 @@ -.#{$pretty--class-name}.circle { - label i{ - padding: 2px; - } - label i:after, - label i:before { - border-radius: 100px; - } - - label i.default:before { - border-radius: 100px !important; - } -} diff --git a/src/scss/decorators/_color.scss b/src/scss/decorators/_color.scss deleted file mode 100644 index 3739d9c..0000000 --- a/src/scss/decorators/_color.scss +++ /dev/null @@ -1,55 +0,0 @@ -@each $color in $outline-colors { - .#{$pretty--class-name}.#{nth($color,1)} { - input:checked+ label i { - &:before { - color: #fff; - background-color: nth($color, 3) !important - } - - &:after { - border-color: nth($color, 3); - background-color: nth($color, 3) !important - } - } - - input[type='radio']:checked+ label i.default { - &:before { - background-color: nth($color, 3) !important; - color: transparent; - } - - &:after { - background-color: initial !important; - border-color: nth($color, 3); - } - } - - &.smooth { - input:checked ~ label i:after { - transform:scale(1) !important; - } - } - } - - .#{$pretty--class-name}.#{nth($color,2)} { - input:checked+label i { - &:before { - color: nth($color, 3); - } - - &:after { - border-color: nth($color, 3); - } - } - } - - .#{$pretty--class-name}.toggle { - @each $subcolor in $outline-colors { - i.#{nth($subcolor,1)} { - &:before { - color: nth($subcolor, 3) !important; - } - } - } - } -} diff --git a/src/scss/decorators/_core.scss b/src/scss/decorators/_core.scss deleted file mode 100644 index bfb34e9..0000000 --- a/src/scss/decorators/_core.scss +++ /dev/null @@ -1,96 +0,0 @@ -.#{$pretty--class-name} { - line-height: 1; - position: relative; - display: inline-block; - margin: 0 10px 5px 0; -} - -.#{$pretty--class-name} { - label { - font-weight: normal; - } - - & > input[type='checkbox'], - & > input[type='radio'] { - position: absolute; - z-index: 99999999; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - margin: 0; - cursor: pointer; - opacity: 0; - } - - i { - font-size: 1em !important; - position: relative; - display: inline-block; - box-sizing: initial; - min-width: 1em; - margin-right: 2px; - padding: 1px; - text-align: center; - - &:before { - position: relative; - z-index: 999; - left: 0; - display: inline-block; - vertical-align: bottom; - color: transparent; - background-color: $pretty--color-bg; - } - - &:after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: '\0000'; - color: transparent; - border: 1px solid $pretty--color-border; - border-radius: $pretty--border-radius; - } - } - - & > input[type='checkbox']:checked + label > i, - & > input[type='radio']:checked + label > i { - &:before { - color: inherit; - background-color: $pretty--color-bg; - } - } - - & > input[type='radio'] + label > i.default { - &:before { - left: 0; - min-width: 1em; - content: '\0000'; - color: transparent; - border-radius: $pretty--border-radius; - background: $pretty--color-bg; - transform:scale(.8); - } - } - - & > input[type='radio']:checked + label > i.default { - &:before { - background-color: $pretty--color-radio !important; - } - } - - & > input[type='checkbox'][disabled], - & > input[type='radio'][disabled] { - cursor: not-allowed; - opacity: 0; - - & + label { - cursor: not-allowed; - opacity: 0.5; - } - } -} diff --git a/src/scss/decorators/_curvy.scss b/src/scss/decorators/_curvy.scss deleted file mode 100644 index 74bd748..0000000 --- a/src/scss/decorators/_curvy.scss +++ /dev/null @@ -1,10 +0,0 @@ -.#{$pretty--class-name}.curvy { - label i:after, - label i:before { - border-radius: 2px; - } - - label i.default:before { - border-radius: 2px !important; - } -} diff --git a/src/scss/decorators/_hard_animation.scss b/src/scss/decorators/_hard_animation.scss deleted file mode 100644 index 9815823..0000000 --- a/src/scss/decorators/_hard_animation.scss +++ /dev/null @@ -1,176 +0,0 @@ -@keyframes tada { - 0% { - transform: scale(7); - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - transform: scale(1); - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - transform: scale(1.5); - animation-timing-function: ease-in; - } - 72% { - transform: scale(1); - animation-timing-function: ease-out; - } - 81% { - transform: scale(1.24); - animation-timing-function: ease-in; - } - 89% { - transform: scale(1); - animation-timing-function: ease-out; - } - 95% { - transform: scale(1.04); - animation-timing-function: ease-in; - } - 100% { - transform: scale(1); - animation-timing-function: ease-out; - } -}; - -@keyframes bounce { - 0% { - transform: translateY(-50px); - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - transform: translateY(0); - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - transform: translateY(-30px); - animation-timing-function: ease-in; - } - 72% { - transform: translateY(0); - animation-timing-function: ease-out; - } - 81% { - transform: translateY(-18px); - -webkit-animation-timing-function: ease-in; - } - 90% { - transform: translateY(0); - animation-timing-function: ease-out; - } - 95% { - transform: translateY(-8px); - animation-timing-function: ease-in; - } - 100% { - transform: translateY(0); - animation-timing-function: ease-out; - } -}; - - -@keyframes rotate { - 0% { - transform: translateZ(-200px) rotate(-45deg); - opacity: 0; - } - 100% { - transform: translateZ(0) rotate(0); - opacity: 1; - } -} - -@keyframes jelly { - 0% { - transform: scale3d(1, 1, 1); - } - 30% { - transform: scale3d(0.75, 1.25, 1); - } - 40% { - transform: scale3d(1.25, 0.75, 1); - } - 50% { - transform: scale3d(0.85, 1.15, 1); - } - 65% { - transform: scale3d(1.05, 0.95, 1); - } - 75% { - transform: scale3d(0.95, 1.05, 1); - } - 100% { - transform: scale3d(1, 1, 1); - } -} - -@keyframes vibrate { - 0% { - transform: translate(0); - } - 10% { - transform: translate(-2px, -2px); - } - 20% { - transform: translate(2px, -2px); - } - 30% { - transform: translate(-2px, 2px); - } - 40% { - transform: translate(2px, 2px); - } - 50% { - transform: translate(-2px, -2px); - } - 60% { - transform: translate(2px, -2px); - } - 70% { - transform: translate(-2px, 2px); - } - 80% { - transform: translate(-2px, -2px); - } - 90% { - transform: translate(2px, -2px); - } - 100% { - transform: translate(0); - } -} - -.pretty.a-tada{ - & > input[type='checkbox']:checked + label>i, - & > input[type='radio']:checked+ label>i { - animation:tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; - } -} -.pretty.a-bounce{ - & > input[type='checkbox']:checked + label>i, - & > input[type='radio']:checked+ label>i { - animation:bounce 1.1s both; - } -} -.pretty.a-rotate{ - & > input[type='checkbox']:checked + label>i, - & > input[type='radio']:checked+ label>i { - animation: rotate 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; - } -} -.pretty.a-jelly{ - & > input[type='checkbox']:checked + label>i, - & > input[type='radio']:checked+ label>i { - animation: jelly 0.9s both; - } -} -.pretty.a-vibrate{ - & > input[type='checkbox']:checked + label>i, - & > input[type='radio']:checked+ label>i { - animation: vibrate 0.5s linear infinite both; - } -} diff --git a/src/scss/decorators/_hover.scss b/src/scss/decorators/_hover.scss deleted file mode 100644 index 7a3f2f5..0000000 --- a/src/scss/decorators/_hover.scss +++ /dev/null @@ -1,21 +0,0 @@ -@each $color in $outline-colors { - .#{$pretty--class-name}.#{nth($color,1)}.hover:hover { - input+ label i { - &:before { - background-color: transparentize(nth($color, 3),0.5) !important; - color: #fff !important; - } - &:after { - border-color: transparentize(nth($color, 3),0.5) !important; - } - } - } - - .#{$pretty--class-name}.#{nth($color,2)}.hover:hover { - input+label i { - &:before { - color: transparentize(nth($color, 3),0.2); - } - } - } -} diff --git a/src/scss/decorators/_index.scss b/src/scss/decorators/_index.scss deleted file mode 100644 index ed18265..0000000 --- a/src/scss/decorators/_index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'core'; -@import 'plain'; -@import 'circle'; -@import 'curvy'; -@import 'color'; -@import 'toggle'; -@import 'override'; -@import 'hover'; -@import 'animation'; -@import 'hard_animation'; diff --git a/src/scss/decorators/_override.scss b/src/scss/decorators/_override.scss deleted file mode 100644 index 8b13789..0000000 --- a/src/scss/decorators/_override.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/scss/decorators/_plain.scss b/src/scss/decorators/_plain.scss deleted file mode 100644 index 6674324..0000000 --- a/src/scss/decorators/_plain.scss +++ /dev/null @@ -1,34 +0,0 @@ -.#{$pretty--class-name}.plain { - & > input[type='checkbox'] + label, & > input[type='radio'] + label { - & > i:after {} - } - - & > input[type='checkbox']:checked + label, - & > input[type='radio']:checked + label { - & > i:after { - border-color: transparent; - } - } - - & > input[type='checkbox'] + label+label, - & > input[type='radio'] + label+label { - & > i:after { - border-color: transparent; - } - } - - & > input[type='checkbox']:checked + label+label, - & > input[type='radio']:checked + label+label { - & > i:after { - border-color: transparent; - } - } -} - -.#{$pretty--class-name}.plain.toggle { - & > input[type='checkbox'] + label, & > input[type='radio'] + label { - & > i:after { - border-color: transparent; - } - } -} diff --git a/src/scss/decorators/_toggle.scss b/src/scss/decorators/_toggle.scss deleted file mode 100644 index 761cff7..0000000 --- a/src/scss/decorators/_toggle.scss +++ /dev/null @@ -1,26 +0,0 @@ -.#{$pretty--class-name}.toggle { - & > input[type='checkbox'] + label, & > input[type='radio'] + label { - & > i:before { - color: inherit; - } - } - - & > input[type='checkbox'] + label+label, - & > input[type='radio'] + label+label { - display: none; - } - - & > input[type='checkbox']:checked + label, - & > input[type='radio']:checked + label { - display: none; - } - - & > input[type='checkbox']:checked + label+label, - & > input[type='radio']:checked + label+label { - display: inline-block; - - & > i:before { - color: inherit; - } - } -} diff --git a/src/scss/elements/default/_fill.scss b/src/scss/elements/default/_fill.scss new file mode 100644 index 0000000..33707e2 --- /dev/null +++ b/src/scss/elements/default/_fill.scss @@ -0,0 +1,7 @@ +.#{$pretty--class-name}.p-default.p-fill { + .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 new file mode 100644 index 0000000..0914cc2 --- /dev/null +++ b/src/scss/elements/default/_outline.scss @@ -0,0 +1,13 @@ +.#{$pretty--class-name}.p-default { + .state label { + &:after { + transform: scale(0.6); + } + } + + 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 new file mode 100644 index 0000000..8c16921 --- /dev/null +++ b/src/scss/elements/default/_thick.scss @@ -0,0 +1,12 @@ +.#{$pretty--class-name}.p-default.p-thick { + .state label { + &:before, + &:after { + border-width: calc(1em / 7); + } + + &: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 new file mode 100644 index 0000000..5a8ee41 --- /dev/null +++ b/src/scss/elements/font-icon/_general.scss @@ -0,0 +1,39 @@ +.#{$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; + } + + .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; + } + + 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 new file mode 100644 index 0000000..f9678c4 --- /dev/null +++ b/src/scss/elements/image/_general.scss @@ -0,0 +1,21 @@ +.#{$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); + } + } + + input:checked ~ .state img { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/scss/elements/svg/_general.scss b/src/scss/elements/svg/_general.scss new file mode 100644 index 0000000..f594f53 --- /dev/null +++ b/src/scss/elements/svg/_general.scss @@ -0,0 +1,33 @@ +.#{$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; + } + + 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 diff --git a/src/scss/elements/switch/_fill.scss b/src/scss/elements/switch/_fill.scss new file mode 100644 index 0000000..0f0ace5 --- /dev/null +++ b/src/scss/elements/switch/_fill.scss @@ -0,0 +1,15 @@ +.#{$pretty--class-name}.p-switch.p-fill { + input:checked~.state { + &:before { + border-color: $pretty--color-dark; + background-color: $pretty--color-dark !important; + } + label:before { + opacity: 0; + } + label:after { + background-color: #fff !important; + left: 1em; + } + } +} \ No newline at end of file diff --git a/src/scss/elements/switch/_general.scss b/src/scss/elements/switch/_general.scss new file mode 100644 index 0000000..e921aa8 --- /dev/null +++ b/src/scss/elements/switch/_general.scss @@ -0,0 +1,54 @@ +.#{$pretty--class-name}.p-switch { + input{ + 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; + } + + label { + text-indent: $pretty--label-text-offset-switch; + + &:before, + &:after { + transition: all 0.5s ease; + border-radius: 100%; + left: 0; + border-color: transparent; + transform: scale(0.8); + } + + &:after { + background-color: $pretty--color-default !important; + } + } + } + + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + } + + label:before { + opacity: 0; + } + + 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 new file mode 100644 index 0000000..0b98b7f --- /dev/null +++ b/src/scss/elements/switch/_slim.scss @@ -0,0 +1,16 @@ +.#{$pretty--class-name}.p-switch.p-slim { + .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; + } + } +} \ No newline at end of file diff --git a/src/scss/essentials/_functions.scss b/src/scss/essentials/_functions.scss new file mode 100644 index 0000000..cfa374b --- /dev/null +++ b/src/scss/essentials/_functions.scss @@ -0,0 +1 @@ +// empty \ No newline at end of file diff --git a/src/scss/essentials/_keyframes.scss b/src/scss/essentials/_keyframes.scss new file mode 100644 index 0000000..f0681e0 --- /dev/null +++ b/src/scss/essentials/_keyframes.scss @@ -0,0 +1,102 @@ +@keyframes zoom { + 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); + } +} + +@keyframes jelly { + 0% { + transform: scale3d(1, 1, 1); + } + + 30% { + transform: scale3d(.75, 1.25, 1); + } + + 40% { + transform: scale3d(1.25, .75, 1); + } + + 50% { + transform: scale3d(.85, 1.15, 1); + } + + 65% { + transform: scale3d(1.05, .95, 1); + } + + 75% { + transform: scale3d(.95, 1.05, 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); + } +} + +@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 diff --git a/src/scss/essentials/_mixins.scss b/src/scss/essentials/_mixins.scss new file mode 100644 index 0000000..cfa374b --- /dev/null +++ b/src/scss/essentials/_mixins.scss @@ -0,0 +1 @@ +// empty \ No newline at end of file diff --git a/src/scss/extras/_animation.scss b/src/scss/extras/_animation.scss new file mode 100644 index 0000000..0a07282 --- /dev/null +++ b/src/scss/extras/_animation.scss @@ -0,0 +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; + } + + .icon, + .svg, + img { + 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; + } + } +} + +.#{$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; + } + } +} + +.#{$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; + } + + 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; + } + + label:before { + border-color: transparent; + } + } +} + +.#{$pretty--class-name}.p-pulse:not(.p-switch) { + 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 new file mode 100644 index 0000000..95909d0 --- /dev/null +++ b/src/scss/extras/_bigger.scss @@ -0,0 +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 { + text-indent: 1.7em; + } +} \ No newline at end of file diff --git a/src/scss/extras/_colors.scss b/src/scss/extras/_colors.scss new file mode 100644 index 0000000..a127124 --- /dev/null +++ b/src/scss/extras/_colors.scss @@ -0,0 +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; + } + } + + 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 new file mode 100644 index 0000000..b67720a --- /dev/null +++ b/src/scss/extras/_curve.scss @@ -0,0 +1,8 @@ +.#{$pretty--class-name}.p-curve { + .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 new file mode 100644 index 0000000..69a8d45 --- /dev/null +++ b/src/scss/extras/_disabled.scss @@ -0,0 +1,12 @@ +.#{$pretty--class-name} { + input { + &[disabled] { + cursor: not-allowed; + display: none; + + & ~ * { + opacity: .5; + } + } + } +} diff --git a/src/scss/extras/_locked.scss b/src/scss/extras/_locked.scss new file mode 100644 index 0000000..4ae9e6c --- /dev/null +++ b/src/scss/extras/_locked.scss @@ -0,0 +1,6 @@ +.#{$pretty--class-name}.p-locked { + input { + display: none; + cursor: not-allowed; + } +} \ No newline at end of file diff --git a/src/scss/extras/_plain.scss b/src/scss/extras/_plain.scss new file mode 100644 index 0000000..bfa6b09 --- /dev/null +++ b/src/scss/extras/_plain.scss @@ -0,0 +1,12 @@ +.#{$pretty--class-name}.p-plain { + input:checked ~ .state label, + &.p-toggle .state label { + &:before { + content: none; + } + } + + &.p-plain .icon { + transform: scale(1.1); + } +} \ No newline at end of file diff --git a/src/scss/extras/_print.scss b/src/scss/extras/_print.scss new file mode 100644 index 0000000..aab23f3 --- /dev/null +++ b/src/scss/extras/_print.scss @@ -0,0 +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; + } + } +} \ No newline at end of file diff --git a/src/scss/extras/_round.scss b/src/scss/extras/_round.scss new file mode 100644 index 0000000..87e5960 --- /dev/null +++ b/src/scss/extras/_round.scss @@ -0,0 +1,17 @@ +.#{$pretty--class-name}.p-round { + .state label { + &:before, + &:after { + border-radius: 100%; + } + } + + &.p-icon .state .icon { + border-radius: 100%; + overflow: hidden; + + &:before { + transform: scale(0.8); + } + } +} diff --git a/src/scss/extras/_toggle.scss b/src/scss/extras/_toggle.scss new file mode 100644 index 0000000..426291d --- /dev/null +++ b/src/scss/extras/_toggle.scss @@ -0,0 +1,32 @@ +.#{$pretty--class-name}.p-toggle { + .state { + &.p-on { + opacity: 0; + display: none; + } + + &.p-off, + .icon, + .svg, + img { + opacity: 1; + display: inherit; + } + + &.p-off .icon { + color: $pretty--color-default; + } + } + + input:checked ~ .state { + &.p-on { + opacity: 1; + display: inherit; + } + + &.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 new file mode 100644 index 0000000..0f7d977 --- /dev/null +++ b/src/scss/states/_focus.scss @@ -0,0 +1,7 @@ +.#{$pretty--class-name}.p-has-focus { + 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 new file mode 100644 index 0000000..e996752 --- /dev/null +++ b/src/scss/states/_hover.scss @@ -0,0 +1,13 @@ +.#{$pretty--class-name}.p-has-hover { + input:hover ~ .state:not(.p-is-hover) { + display: none; + } + + input:hover ~ .state.p-is-hover { + 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 new file mode 100644 index 0000000..4007b3c --- /dev/null +++ b/src/scss/states/_indeterminate.scss @@ -0,0 +1,14 @@ +.#{$pretty--class-name}.p-has-indeterminate { + input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) { + display: none; + } + + input[type='checkbox']:indeterminate ~.state.p-is-indeterminate { + display: block; + + .icon { + display: block; + opacity: 1; + } + } +} \ No newline at end of file diff --git a/src/scss/support/_animations.scss b/src/scss/support/_animations.scss deleted file mode 100644 index 2e109dc..0000000 --- a/src/scss/support/_animations.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'mixins'; \ No newline at end of file diff --git a/src/scss/support/_extend.scss b/src/scss/support/_extend.scss deleted file mode 100644 index f6a42d0..0000000 --- a/src/scss/support/_extend.scss +++ /dev/null @@ -1,14 +0,0 @@ -.#{$pretty--class-name} { - & > input + label>i.#{$pretty--gmdi-class-name}:before, - & > input + label+label > i.#{$pretty--gmdi-class-name}:before{ - content:attr(#{$pretty--gmdi-attr}); - display: inline-block; - font: normal normal normal 24px/1 $pretty--gmdi-name; - font-size: inherit; - text-rendering: auto; - line-height: inherit; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transform: translate(0, 0); - } -} \ No newline at end of file diff --git a/src/scss/support/_index.scss b/src/scss/support/_index.scss deleted file mode 100644 index 50d4032..0000000 --- a/src/scss/support/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'variables'; -@import 'mixins'; -@import 'extend'; -@import 'animations'; -@import 'print'; \ No newline at end of file diff --git a/src/scss/support/_mixins.scss b/src/scss/support/_mixins.scss deleted file mode 100644 index fd19150..0000000 --- a/src/scss/support/_mixins.scss +++ /dev/null @@ -1,34 +0,0 @@ -@mixin prefixer($property, $value) { - -webkit-#{$property}: $value; - -moz-#{$property}: $value; - -o-#{$property}: $value; - #{$property}: $value; -} - -@mixin animation ($value) { - @include prefixer($property: animation, $value: $value); -} - - -@mixin keyframes($animationName) { - @keyframes #{$animationName} { - @content; - } - @-webkit-keyframes #{$animationName} { - @content; - } - @-moz-keyframes #{$animationName} { - @content; - } - @-o-keyframes #{$animationName} { - @content; - } -} - -@mixin transition ($value...) { - @if length($value) >= 1 { - @include prefixer($property: transition, $value: $value); - } @else { - @include prefixer($property: transition, $value: all 0.15s ease-in 0.05s); - } -} \ No newline at end of file diff --git a/src/scss/support/_print.scss b/src/scss/support/_print.scss deleted file mode 100644 index 1070759..0000000 --- a/src/scss/support/_print.scss +++ /dev/null @@ -1,26 +0,0 @@ -@media print { - - .#{$pretty--class-name} > input:not(:checked)+label i:before{ - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color: transparent !important; - } - .#{$pretty--class-name} :not(.toggle) input:not(:checked)+label i:before, - .#{$pretty--class-name} > input[type='radio']:checked + label > i.default:before, - .#{$pretty--class-name} i:after{ - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color: transparent !important; - } - - .#{$pretty--class-name} input:checked + label i:before { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } - - @each $color in $outline-colors { - .#{$pretty--class-name}.#{nth($color, 1)} input:checked + label i:before { - color: white !important; - } - } -} diff --git a/src/scss/support/_variables.scss b/src/scss/support/_variables.scss deleted file mode 100644 index b2a1ee8..0000000 --- a/src/scss/support/_variables.scss +++ /dev/null @@ -1,18 +0,0 @@ -$pretty--class-name: pretty !default; - -$pretty--border-radius: 0 !default; - -$pretty--color-primary: #428bca !default; -$pretty--color-success: #5cb85c !default; -$pretty--color-info: #5bc0de !default; -$pretty--color-warning: #f0ad4e !default; -$pretty--color-danger: #d9534f !default; -$pretty--color-border: #b9b9b9 !default; -$pretty--color-radio: #b9b9b9 !default; -$pretty--color-bg: #fff !default; - -$pretty--gmdi-class-name:'g-mdi'; -$pretty--gmdi-name:'Material Icons'; -$pretty--gmdi-attr:'data-icon'; - -$outline-colors: (primary o-primary $pretty--color-primary, success o-success $pretty--color-success, info o-info $pretty--color-info, warning o-warning $pretty--color-warning, danger o-danger $pretty--color-danger); diff --git a/src/test.css b/src/test.css new file mode 100644 index 0000000..2f949f5 --- /dev/null +++ b/src/test.css @@ -0,0 +1,1459 @@ +.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 + +*/