From b89ebee542445ad92b4cba85077636917de2b2a0 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sun, 22 Sep 2019 10:43:43 -0700 Subject: [PATCH 01/23] Fixing #73 --- src/scss/elements/font-icon/_general.scss | 3 ++- src/scss/elements/image/_general.scss | 3 ++- src/scss/elements/svg/_general.scss | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/scss/elements/font-icon/_general.scss b/src/scss/elements/font-icon/_general.scss index 5a8ee41..6b1374c 100644 --- a/src/scss/elements/font-icon/_general.scss +++ b/src/scss/elements/font-icon/_general.scss @@ -27,7 +27,8 @@ } } - input:checked ~ .state { + input:checked ~ .state, + input:indeterminate ~ .state { .icon { opacity: 1; } diff --git a/src/scss/elements/image/_general.scss b/src/scss/elements/image/_general.scss index f9678c4..2171eac 100644 --- a/src/scss/elements/image/_general.scss +++ b/src/scss/elements/image/_general.scss @@ -15,7 +15,8 @@ } } - input:checked ~ .state img { + input:checked ~ .state img, + input:indeterminate ~ .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 index f594f53..42da039 100644 --- a/src/scss/elements/svg/_general.scss +++ b/src/scss/elements/svg/_general.scss @@ -27,7 +27,8 @@ } } - input:checked ~ .state .svg { + input:checked ~ .state .svg, + input:indeterminate ~ .state .svg { opacity: 1; } } \ No newline at end of file From 1ad4aca17b35c3a18443211ccb639120b5000091 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Mon, 17 Aug 2020 10:53:01 -0700 Subject: [PATCH 02/23] ci(gulp) upgrading gulp and otehr packages - Moving to gelp 4.x - Upgrading stylelint and lots of other packages - Formatting using stylelint in Gulpfile - Using dart-sass to compile instead of node-sass --- .stylelintrc | 4 - .stylelintrc.json | 3 + Gulpfile.js | 87 ++++++----- dist/maps/pretty-checkbox.css.map | 2 +- dist/pretty-checkbox.css | 247 +++++++++--------------------- dist/pretty-checkbox.min.css | 4 +- package.json | 42 ++--- 7 files changed, 148 insertions(+), 241 deletions(-) delete mode 100644 .stylelintrc create mode 100644 .stylelintrc.json diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index e5279ba..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "stylelint-config-recommended-scss", - "rules":{} -} \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..736b1f0 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-recommended-scss" +} \ No newline at end of file diff --git a/Gulpfile.js b/Gulpfile.js index f066bbe..5fa518f 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -1,21 +1,22 @@ -var gulp = require('gulp'); -var browserSync = require('browser-sync'); -var sass = require('gulp-sass'); -var rename = require('gulp-rename'); -var autoprefixer = require('gulp-autoprefixer'); -var sourcemaps = require('gulp-sourcemaps'); -var headerComment = require('gulp-header-comment'); -var gulpStylelint = require('gulp-stylelint'); -var stylefmt = require('gulp-stylefmt'); -let cleanCSS = require('gulp-clean-css'); -var gulpSequence = require('gulp-sequence') -var del = require('del'); -var reload = browserSync.reload; - -module.exports = gulp; +const gulp = require('gulp'); +const browserSync = require('browser-sync'); + +const sass = require('gulp-sass'); +sass.compiler = require('sass'); + +const rename = require('gulp-rename'); +const autoprefixer = require('gulp-autoprefixer'); +const sourcemaps = require('gulp-sourcemaps'); +const headerComment = require('gulp-header-comment'); +const gulpStylelint = require('gulp-stylelint'); +const cleanCSS = require('gulp-clean-css'); +const gulpSequence = require('gulp-sequence') +const del = require('del'); + +const reload = browserSync.reload; /* BROWSER SYNC */ -gulp.task('browser-sync', function () { +exports['browser-sync'] = function serve() { browserSync({ port: 3040, server: { @@ -24,15 +25,15 @@ gulp.task('browser-sync', function () { }, https: true }); -}); +}; /* BROWSER SYNC RELOAD */ -gulp.task('browser-sync-reload', function () { +exports['browser-sync-reload'] = function browserSyncReload() { browserSync.reload(); -}); +}; /* LIST SCSS */ -gulp.task('lint:scss', function () { +exports['lint:scss'] = function lintCSS() { return gulp .src('src/**/*.scss') .pipe(gulpStylelint({ @@ -41,10 +42,10 @@ gulp.task('lint:scss', function () { console: true }] })); -}); +}; /* COMPILE SCSS */ -gulp.task('compile:scss', function () { +exports['compile:scss'] = function compileSCSS () { return gulp.src('src/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass({ @@ -52,7 +53,6 @@ gulp.task('compile:scss', function () { }) .on('error', sass.logError)) .pipe(autoprefixer({ - browsers: ['> 5%', 'last 4 versions'], cascade: false })) .pipe(sourcemaps.write('./maps')) @@ -60,22 +60,25 @@ gulp.task('compile:scss', function () { .pipe(browserSync.reload({ stream: true })); -}); +}; /* FORMAT CSS */ -gulp.task('format:css', function () { +exports['format:css'] = function formatCSS() { return gulp.src('dist/*.css') - .pipe(stylefmt()) + .pipe(gulpStylelint({ + fix: true, + failAfterError: false + })) .pipe(gulp.dest('dist')); -}) +} /* CLEAN DIST */ -gulp.task('clean:dist', function () { +exports['clean:dist'] = function cleanDist() { return del(['dist']); -}); +}; /* MINIFY CSS */ -gulp.task('minify:css', () => { +exports['minify:css'] = function minifyCSS() { return gulp.src('dist/*.css') .pipe(cleanCSS({ compatibility: 'ie9' @@ -84,10 +87,10 @@ gulp.task('minify:css', () => { suffix: '.min' })) .pipe(gulp.dest('dist')); -}); +} /* SET HEADER */ -gulp.task('set:header', function () { +exports['set:header'] = function setHeader() { return gulp.src('dist/*.css') .pipe(headerComment(` pretty-checkbox.css @@ -100,12 +103,18 @@ gulp.task('set:header', function () { 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) -}); +const build = gulp.series( + gulp.parallel( + exports['clean:dist'], + exports['lint:scss'] + ), + exports['compile:scss'], + exports['format:css'], + exports['minify:css'], + exports['set:header'] +) -gulp.task('default', ['compile:scss', 'browser-sync'], function () { - gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']); -}); +exports.build = build; +exports.default = build; diff --git a/dist/maps/pretty-checkbox.css.map b/dist/maps/pretty-checkbox.css.map index 7da9fa2..e5631c4 100644 --- a/dist/maps/pretty-checkbox.css.map +++ b/dist/maps/pretty-checkbox.css.map @@ -1 +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":"AAEA;EACE,uBAAuB;CACxB;;AAGD;EACE,cAAc;CAkBf;;AAED;EACE,mBAAmB;EACnB,sBAAsB;EACtB,kBAAkB;EAClB,oBAAoB;EACpB,eAAe;CAmDhB;;AAxDD;EAQI,mBAAmB;EACnB,QAAQ;EACR,OAAO;EACP,eAAe;EACf,YAAY;EACZ,aAAa;EACb,WC5BqB;ED6BrB,WAAW;EACX,UAAU;EACV,WAAW;EACX,gBAAgB;CACjB;;AAnBH;EAuBM,kBAAkB;EAClB,sBAAsB;EACtB,oBAAoB;EACpB,UAAU;EACV,mBClC2B;EDmC3B,2BCtCiB;CD2DlB;;AAjDL;EAgCQ,YAAY;EACZ,uBC3Ce;ED4Cf,wBC5Ce;ED6Cf,eAAe;EACf,uBAAuB;EACvB,iBAAiB;EACjB,8BAA8B;EAC9B,WCvDgB;EDwDhB,mBAAmB;EACnB,QAAQ;EACR,oCCrCgB;EDsChB,8BAA8B;CAC/B;;AA5CP;EA+CQ,sBCxEuB;CDyExB;;AAhDP;EAqDM,cAAc;CACf;;AElFL;EACE;IACE,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;CACF;;ADnED;EACE;IACE,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;CACF;;AD5DD;EACE;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;ED5DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC8DjB;ED3DD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,8BAAgB;IAAhB,sBAAgB;GC6DjB;ED1DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC4DjB;EDzDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GC2DjB;EDxDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC0DjB;EDvDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GCyDjB;EDtDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GCwDjB;CACF;;ADjGD;EACE;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC+DjB;ED5DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,WAAW;IACX,4BAAgB;IAAhB,oBAAgB;GC8DjB;ED3DD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,8BAAgB;IAAhB,sBAAgB;GC6DjB;ED1DD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC4DjB;EDzDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GC2DjB;EDxDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GC0DjB;EDvDD;IACE,2CAAmC;IAAnC,mCAAmC;IACnC,+BAAgB;IAAhB,uBAAgB;GCyDjB;EDtDD;IACE,4CAAoC;IAApC,oCAAoC;IACpC,4BAAgB;IAAhB,oBAAgB;GCwDjB;CACF;;ADrDD;EACE;IACE,oCAAkB;IAAlB,4BAAkB;GCwDnB;EDrDD;IACE,0CAAkB;IAAlB,kCAAkB;GCuDnB;EDpDD;IACE,0CAAkB;IAAlB,kCAAkB;GCsDnB;EDnDD;IACE,0CAAkB;IAAlB,kCAAkB;GCqDnB;EDlDD;IACE,0CAAkB;IAAlB,kCAAkB;GCoDnB;EDjDD;IACE,0CAAkB;IAAlB,kCAAkB;GCmDnB;EDhDD;IACE,oCAAkB;IAAlB,4BAAkB;GCkDnB;CACF;;AD7ED;EACE;IACE,oCAAkB;IAAlB,4BAAkB;GCwDnB;EDrDD;IACE,0CAAkB;IAAlB,kCAAkB;GCuDnB;EDpDD;IACE,0CAAkB;IAAlB,kCAAkB;GCsDnB;EDnDD;IACE,0CAAkB;IAAlB,kCAAkB;GCqDnB;EDlDD;IACE,0CAAkB;IAAlB,kCAAkB;GCoDnB;EDjDD;IACE,0CAAkB;IAAlB,kCAAkB;GCmDnB;EDhDD;IACE,oCAAkB;IAAlB,4BAAkB;GCkDnB;CACF;;AD/CD;EACE;IACE,WAAW;IACX,qDAAoC;IAApC,6CAAoC;GCkDrC;ED/CD;IACE,WAAW;IACX,2CAA+B;IAA/B,mCAA+B;GCiDhC;CACF;;AD1DD;EACE;IACE,WAAW;IACX,qDAAoC;IAApC,6CAAoC;GCkDrC;ED/CD;IACE,WAAW;IACX,2CAA+B;IAA/B,mCAA+B;GCiDhC;CACF;;AD9CD;EACE;IACE,oCAA0C;GCiD3C;ED9CD;IACE,qDAA4C;GCgD7C;CACF;;ADvDD;EACE;IACE,oCAA0C;GCiD3C;ED9CD;IACE,qDAA4C;GCgD7C;CACF;;ACpJD;EAGM,4BAAgB;EAAhB,wBAAgB;EAAhB,oBAAgB;CACjB;;ACJL;EAGM,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AAJL;EASM,qCAAmD;CACpD;;ACVL;EAIM,4BAAkB;CACnB;;AALL;EAQM,yCAAgC;EAAhC,qCAAgC;EAAhC,iCAAgC;CACjC;;ACTL;EAGM,mBAAmB;EACnB,eAAe;EACf,uBNaiB;EMZjB,wBNYiB;EMXjB,QAAQ;EACR,WNKqB;EMJrB,mBAAmB;EACnB,oBAAoB;EACpB,oCNsBkB;EMrBlB,8BAA8B;EAC9B,WAAW;CACZ;;AAdL;EAiBM,UAAU;EACV,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAQ;EAAR,YAAQ;EAAR,QAAQ;EACR,yBAAwB;EAAxB,sBAAwB;EAAxB,wBAAwB;EACxB,0BAAoB;EAApB,uBAAoB;EAApB,oBAAoB;EACpB,eAAe;CAChB;;AA1BL;EA+BM,WAAW;CACZ;;AAhCL;EAmCM,sBAAsB;CACvB;;ACpCL;EAGM,mBAAmB;EACnB,eAAe;EACf,uBPaiB;EOZjB,wBPYiB;EOXjB,QAAQ;EACR,WPKqB;EOJrB,mBAAmB;EACnB,oBAAoB;EACpB,oCPsBkB;EOrBlB,8BAA8B;EAC9B,WAAW;CACZ;;AAdL;EAiBM,UAAU;EACV,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,qBAAc;EAAd,qBAAc;EAAd,cAAc;EACd,oBAAQ;EAAR,YAAQ;EAAR,QAAQ;EACR,yBAAwB;EAAxB,sBAAwB;EAAxB,wBAAwB;EACxB,0BAAoB;EAApB,uBAAoB;EAApB,oBAAoB;EACpB,eAAe;CAChB;;AA1BL;EA8BI,WAAW;CACZ;;AC/BH;EAGM,WAAW;EACX,mBAAmB;EACnB,uBRaiB;EQZjB,wBRYiB;EQXjB,OAAO;EACP,oCRyBkB;EQxBlB,QAAQ;EACR,WREkB;EQDlB,mBAAmB;EACnB,oBAAoB;EACpB,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AAdL;EAkBI,WAAW;CACZ;;ACnBH;EAEI,eAAc;CACf;;AAHH;EAKI,mBAAmB;CAgCpB;;AArCH;EAQM,YAAY;EACZ,0BTNyB;ESOzB,oBAAoB;EACpB,WAAW;EACX,kBAAkB;EAClB,wBTKiB;ESJjB,mBAAmB;EACnB,OAAO;EACP,qCTkByB;ESjBzB,WTLkB;ESMlB,0BAA0B;CAC3B;;AAnBL;EAsBM,mBTAkC;CScnC;;AApCL;EA0BQ,0BAA0B;EAC1B,oBAAoB;EACpB,QAAQ;EACR,0BAA0B;EAC1B,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;AA/BP;EAkCQ,qCAAmD;CACpD;;AAnCP;EAyCM,sBThCsB;CSiCvB;;AA1CL;EA6CM,WAAW;CACZ;;AA9CL;EAiDM,qCAAgD;EAChD,UAAU;CACX;;ACnDL;EAGY,sBVMgB;EULhB,qCAAgD;CACnD;;AALT;EAOY,WAAW;CACd;;AART;EAUY,kCAAkC;EAClC,UAAU;CACb;;ACZT;EAGM,cAAc;EACd,+BAA6C;EAC7C,uBAAS;CACV;;AANL;EAWM,sBXFsB;EWGtB,qCAAgD;CACjD;;ACbL;EAEI,cAAc;CACf;;AAHH;EAMI,eAAe;CAKhB;;AAXH;EASM,eAAe;CAChB;;ACVL;EAGM,oCAA+B;CAChC;;ACJL;EAEI,cAAc;CACf;;AAHH;EAMI,eAAe;CAMhB;;AAZH;EASM,eAAe;EACf,WAAW;CACZ;;ACXL;EAGM,WAAW;EACX,cAAc;CACf;;AALL;;;;EAWM,WAAW;EACX,iBAAiB;CAClB;;AAbL;EAgBM,efbyB;Cec1B;;AAjBL;EAsBM,WAAW;EACX,iBAAiB;CAClB;;AAxBL;EA2BM,WAAW;EACX,cAAc;CACf;;AC7BL;;EAIM,cAAc;CACf;;AALL;EASI,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;ACVH;EAIM,oBAAoB;CACrB;;AALL;EASI,oBAAoB;EACpB,iBAAiB;CAKlB;;AAfH;EAaM,8BAAgB;EAAhB,0BAAgB;EAAhB,sBAAgB;CACjB;;ACdL;EAIM,mBlBaoB;CkBZrB;;ACLL;;;;EAKI,0BAA0B;CAC3B;;AANH;EAUM,0BAA0B;CAC3B;;AAXL;;;EAgBM,kCAA0B;EAA1B,0BAA0B;CAC3B;;AAjBL;EAsBM,kCAA0B;EAA1B,0BAA0B;CAC3B;;AAvBL;EA4BM,YAAY;EACZ,4BAAgB;EAAhB,wBAAgB;EAAhB,oBAAgB;EAChB,0BAA0B;CAC3B;;AAIL;;;;;EAOM,8EAAyE;EAAzE,sEAAyE;EACzE,WAAW;CACZ;;AAIL;;;;;EAOM,mEAAkC;EAAlC,2DAAkC;EAClC,WAAW;CACZ;;AATL;EAYM,0BAA0B;CAC3B;;AAIL;;;;;EAOM,oEAAmC;EAAnC,4DAAmC;EACnC,WAAW;CACZ;;AATL;EAYM,0BAA0B;CAC3B;;AAIL;EAGM,4BAAoB;EAApB,oBAAoB;CACrB;;ACtFL;EAGM,oBAAoB;EACpB,cAAc;CAKf;;AATL;EAOQ,YAAY;CACb;;ACRP;EAEI,cAAc;EACd,oBAAoB;CACrB;;ACJH;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBZuB;CsBaxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBtBuB;EsBuBvB,gBtBvBuB;CsBwBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBlCyB;CsBmC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBXoB;CsBYrB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBrBoB;EsBsBpB,gBtBtBoB;CsBuBrB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBjCsB;CsBkCvB;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBVuB;CsBWxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBpBuB;EsBqBvB,gBtBrBuB;CsBsBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtBhCyB;CsBiC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBTuB;CsBUxB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBnBuB;EsBoBvB,gBtBpBuB;CsBqBxB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtB/ByB;CsBgC1B;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AAhDL;;EAIQ,qCAAmC;CACpC;;AALP;;;;EASQ,YAAY;EACZ,aAAa;CACd;;AAXP;;EAgBQ,sBtBRsB;CsBSvB;;AAjBP;;EAoBQ,8BAA8B;CAC/B;;AArBP;;;;;;EA0BQ,etBlBsB;EsBmBtB,gBtBnBsB;CsBoBvB;;AA5BP;EAiCQ,qCAAmC;CACpC;;AAlCP;EAsCM,sBtB9BwB;CsB+BzB;;AAvCL;EA0CM,qCAAmC;CACpC;;AA3CL;EA8CM,sBAAoB;EACpB,qCAAgD;CACjD;;AChDL;;;;;EAMI,4BAAiC;EACjC,gDAA+C;CAChD;;AARH;EAWI,mBAAmB;CACpB;;ACZH;EACE;;;;IAKI,oBAAoB;IACpB,uBAAuB;IACvB,kCAAkC;IAClC,0BAA0B;GAC3B;CtBivBJ","file":"../pretty-checkbox.css","sourcesContent":["@charset 'utf-8';\r\n\r\n.#{$pretty--class-name} * {\r\n box-sizing: border-box;\r\n}\r\n\r\n//Throw error on invalid input types.\r\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\r\n display: none;\r\n\r\n @if $pretty--debug {\r\n + *:after {\r\n content: $pretty--err-message;\r\n border: 1px solid #dedede;\r\n border-left: 3px solid #d9534f;\r\n padding: 9px;\r\n font-size: 1em;\r\n font-weight: 600;\r\n color: #d9534f;\r\n position: absolute;\r\n z-index: 3;\r\n background: #fbfbfb;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name} {\r\n position: relative;\r\n display: inline-block;\r\n margin-right: 1em;\r\n white-space: nowrap;\r\n line-height: 1;\r\n\r\n input {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n min-width: 1em;\r\n width: 100%;\r\n height: 100%;\r\n z-index: $pretty--z-index-front;\r\n opacity: 0;\r\n margin: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .state {\r\n label {\r\n position: initial;\r\n display: inline-block;\r\n font-weight: normal;\r\n margin: 0;\r\n text-indent: $pretty--label-text-offset;\r\n min-width: $pretty--box-size;\r\n\r\n &:before,\r\n &:after {\r\n content: '';\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n display: block;\r\n box-sizing: border-box;\r\n border-radius: 0;\r\n border: 1px solid transparent;\r\n z-index: $pretty--z-index-back;\r\n position: absolute;\r\n left: 0;\r\n top: $pretty-top-offset;\r\n background-color: transparent;\r\n }\r\n\r\n &:before {\r\n border-color: $pretty--color-default;\r\n }\r\n }\r\n\r\n &.p-is-hover,\r\n &.p-is-indeterminate {\r\n display: none;\r\n }\r\n }\r\n}","$pretty--class-name: pretty !default;\r\n\r\n// colors\r\n$pretty--color-default: #bdc3c7 !default;\r\n$pretty--color-primary: #428bca !default;\r\n$pretty--color-info: #5bc0de !default;\r\n$pretty--color-success: #5cb85c !default;\r\n$pretty--color-warning: #f0ad4e !default;\r\n$pretty--color-danger: #d9534f !default;\r\n$pretty--color-dark: #5a656b !default;\r\n\r\n// z-index\r\n$pretty--z-index-back: 0 !default;\r\n$pretty--z-index-between: 1 !default;\r\n$pretty--z-index-front: 2 !default;\r\n\r\n// box\r\n$pretty--curve-radius: 20% !default;\r\n$pretty--box-size: calc(1em + 2px) !default;\r\n\r\n// text\r\n$pretty--label-text-offset: 1.5em !default;\r\n$pretty--label-text-offset-switch: 2.5em !default;\r\n\r\n// scale\r\n$pretty--2x: 1.2em !default;\r\n\r\n// color set\r\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\r\n\r\n// position\r\n$pretty-top: 8;\r\n$pretty-top-switch: ($pretty-top * 2) * 1%;\r\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\r\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\r\n\r\n// dev \r\n$pretty--debug: false !default;\r\n$pretty--err-message: 'Error: Invalid input type!' !default;","@keyframes zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0);\r\n }\r\n}\r\n\r\n@keyframes tada {\r\n 0% {\r\n animation-timing-function: ease-in;\r\n opacity: 0;\r\n transform: scale(7);\r\n }\r\n\r\n 38% {\r\n animation-timing-function: ease-out;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n 55% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.5);\r\n }\r\n\r\n 72% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 81% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.24);\r\n }\r\n\r\n 89% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 95% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.04);\r\n }\r\n\r\n 100% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes jelly {\r\n 0% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n\r\n 30% {\r\n transform: scale3d(.75, 1.25, 1);\r\n }\r\n\r\n 40% {\r\n transform: scale3d(1.25, .75, 1);\r\n }\r\n\r\n 50% {\r\n transform: scale3d(.85, 1.15, 1);\r\n }\r\n\r\n 65% {\r\n transform: scale3d(1.05, .95, 1);\r\n }\r\n\r\n 75% {\r\n transform: scale3d(.95, 1.05, 1);\r\n }\r\n\r\n 100% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n opacity: 0;\r\n transform: translateZ(-200px) rotate(-45deg);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateZ(0) rotate(0);\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);\r\n }\r\n\r\n 100% {\r\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\r\n }\r\n}",".pretty * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type='checkbox']):not([type='radio']) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n\n.pretty input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: 2;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.pretty .state label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: 1.5em;\n min-width: calc(1em + 2px);\n}\n\n.pretty .state label:before, .pretty .state label:after {\n content: '';\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: 0;\n position: absolute;\n left: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n background-color: transparent;\n}\n\n.pretty .state label:before {\n border-color: #bdc3c7;\n}\n\n.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {\n display: none;\n}\n\n@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px #bdc3c7;\n }\n 100% {\n box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);\n }\n}\n\n.pretty.p-default.p-fill .state label:after {\n transform: scale(1);\n}\n\n.pretty.p-default .state label:after {\n transform: scale(0.6);\n}\n\n.pretty.p-default input:checked ~ .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {\n border-width: calc(1em / 7);\n}\n\n.pretty.p-default.p-thick .state label:after {\n transform: scale(0.4) !important;\n}\n\n.pretty.p-icon .state .icon {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-icon .state .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-icon input:checked ~ .state .icon {\n opacity: 1;\n}\n\n.pretty.p-icon input:checked ~ .state label:before {\n border-color: #5a656b;\n}\n\n.pretty.p-svg .state .svg {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-svg .state svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-svg input:checked ~ .state .svg {\n opacity: 1;\n}\n\n.pretty.p-image .state img {\n opacity: 0;\n position: absolute;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n top: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n left: 0;\n z-index: 0;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n}\n\n.pretty.p-image input:checked ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n\n.pretty.p-switch .state {\n position: relative;\n}\n\n.pretty.p-switch .state:before {\n content: '';\n border: 1px solid #bdc3c7;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: calc(1em + 2px);\n position: absolute;\n top: 0;\n top: calc((0% - (100% - 1em)) - 16%);\n z-index: 0;\n transition: all 0.5s ease;\n}\n\n.pretty.p-switch .state label {\n text-indent: 2.5em;\n}\n\n.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n left: 0;\n border-color: transparent;\n transform: scale(0.8);\n}\n\n.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch input:checked ~ .state label:after {\n background-color: #5a656b !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:after {\n background-color: #fff !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-slim .state:before {\n height: 0.1em;\n background: #bdc3c7 !important;\n top: calc(50% - 0.1em);\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {\n display: none;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {\n display: block;\n}\n\n.pretty.p-has-focus input:focus ~ .state label:before {\n box-shadow: 0px 0px 3px 0px #bdc3c7;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {\n display: none;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {\n display: block;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {\n display: block;\n opacity: 1;\n}\n\n.pretty.p-toggle .state.p-on {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-toggle .state.p-off,\n.pretty.p-toggle .state .icon,\n.pretty.p-toggle .state .svg,\n.pretty.p-toggle .state img {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-off {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-plain input:checked ~ .state label:before,\n.pretty.p-plain.p-toggle .state label:before {\n content: none;\n}\n\n.pretty.p-plain.p-plain .icon {\n transform: scale(1.1);\n}\n\n.pretty.p-round .state label:before, .pretty.p-round .state label:after {\n border-radius: 100%;\n}\n\n.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n}\n\n.pretty.p-round.p-icon .state .icon:before {\n transform: scale(0.8);\n}\n\n.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {\n border-radius: 20%;\n}\n\n.pretty.p-smooth label:before,\n.pretty.p-smooth label:after,\n.pretty.p-smooth .icon,\n.pretty.p-smooth .svg {\n transition: all 0.5s ease;\n}\n\n.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\n}\n\n.pretty.p-smooth input:checked + .state .icon,\n.pretty.p-smooth input:checked + .state .svg,\n.pretty.p-smooth input:checked + .state img {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-plain input:checked + .state label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n}\n\n.pretty.p-tada:not(.p-default) input:checked + .state .icon,\n.pretty.p-tada:not(.p-default) input:checked + .state .svg,\n.pretty.p-tada:not(.p-default) input:checked + .state img,\n.pretty.p-tada:not(.p-default) input:checked + .state label:before,\n.pretty.p-tada:not(.p-default) input:checked + .state label:after {\n animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state .icon,\n.pretty.p-jelly:not(.p-default) input:checked + .state .svg,\n.pretty.p-jelly:not(.p-default) input:checked + .state img,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:after {\n animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state img,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {\n animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {\n animation: pulse 1s;\n}\n\n.pretty input[disabled] {\n cursor: not-allowed;\n display: none;\n}\n\n.pretty input[disabled] ~ * {\n opacity: .5;\n}\n\n.pretty.p-locked input {\n display: none;\n cursor: not-allowed;\n}\n\n.pretty input:checked ~ .state.p-primary label:after,\n.pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg,\n.pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:before,\n.pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:after,\n.pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-primary-o .icon,\n.pretty input:checked ~ .state.p-primary-o .svg,\n.pretty input:checked ~ .state.p-primary-o svg,\n.pretty.p-toggle .state.p-primary-o .icon,\n.pretty.p-toggle .state.p-primary-o .svg,\n.pretty.p-toggle .state.p-primary-o svg {\n color: #428bca;\n stroke: #428bca;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n\n.pretty input:checked ~ .state.p-info label:after,\n.pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg,\n.pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-info-o label:before,\n.pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n\n.pretty input:checked ~ .state.p-info-o label:after,\n.pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-info-o .icon,\n.pretty input:checked ~ .state.p-info-o .svg,\n.pretty input:checked ~ .state.p-info-o svg,\n.pretty.p-toggle .state.p-info-o .icon,\n.pretty.p-toggle .state.p-info-o .svg,\n.pretty.p-toggle .state.p-info-o svg {\n color: #5bc0de;\n stroke: #5bc0de;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n\n.pretty input:checked ~ .state.p-success label:after,\n.pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg,\n.pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-success-o label:before,\n.pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n\n.pretty input:checked ~ .state.p-success-o label:after,\n.pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-success-o .icon,\n.pretty input:checked ~ .state.p-success-o .svg,\n.pretty input:checked ~ .state.p-success-o svg,\n.pretty.p-toggle .state.p-success-o .icon,\n.pretty.p-toggle .state.p-success-o .svg,\n.pretty.p-toggle .state.p-success-o svg {\n color: #5cb85c;\n stroke: #5cb85c;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n\n.pretty input:checked ~ .state.p-warning label:after,\n.pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg,\n.pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:before,\n.pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:after,\n.pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-warning-o .icon,\n.pretty input:checked ~ .state.p-warning-o .svg,\n.pretty input:checked ~ .state.p-warning-o svg,\n.pretty.p-toggle .state.p-warning-o .icon,\n.pretty.p-toggle .state.p-warning-o .svg,\n.pretty.p-toggle .state.p-warning-o svg {\n color: #f0ad4e;\n stroke: #f0ad4e;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n\n.pretty input:checked ~ .state.p-danger label:after,\n.pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg,\n.pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:before,\n.pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:after,\n.pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-danger-o .icon,\n.pretty input:checked ~ .state.p-danger-o .svg,\n.pretty input:checked ~ .state.p-danger-o svg,\n.pretty.p-toggle .state.p-danger-o .icon,\n.pretty.p-toggle .state.p-danger-o .svg,\n.pretty.p-toggle .state.p-danger-o svg {\n color: #d9534f;\n stroke: #d9534f;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {\n border-color: #a02622;\n background-color: #a02622 !important;\n}\n\n.pretty.p-bigger label:before,\n.pretty.p-bigger label:after,\n.pretty.p-bigger .icon,\n.pretty.p-bigger .svg,\n.pretty.p-bigger .img {\n font-size: 1.2em !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n}\n\n.pretty.p-bigger label {\n text-indent: 1.7em;\n}\n\n@media print {\n .pretty .state:before,\n .pretty .state label:before,\n .pretty .state label:after,\n .pretty .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n",".#{$pretty--class-name}.p-default.p-fill {\r\n .state label {\r\n &:after {\r\n transform: scale(1);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default {\r\n .state label {\r\n &:after {\r\n transform: scale(0.6);\r\n }\r\n }\r\n\r\n input:checked ~ .state label {\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default.p-thick {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-width: calc(1em / 7);\r\n }\r\n\r\n &:after {\r\n transform: scale(0.4) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-icon {\r\n .state {\r\n .icon {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n .icon:before {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n .icon {\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: #5a656b;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-svg {\r\n .state {\r\n .svg {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n svg {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state .svg {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-image {\r\n .state {\r\n img {\r\n opacity: 0;\r\n position: absolute;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n top: 0;\r\n top: $pretty-top-offset;\r\n left: 0;\r\n z-index: $pretty--z-index-back;\r\n text-align: center;\r\n line-height: normal;\r\n transform: scale(0.8);\r\n }\r\n }\r\n\r\n input:checked ~ .state img {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-switch {\r\n input{\r\n min-width:2em;\r\n }\r\n .state {\r\n position: relative;\r\n\r\n &:before {\r\n content: '';\r\n border: 1px solid $pretty--color-default;\r\n border-radius: 60px;\r\n width: 2em;\r\n box-sizing: unset;\r\n height: $pretty--box-size;\r\n position: absolute;\r\n top: 0;\r\n top: $pretty-top-offset-switch;\r\n z-index: $pretty--z-index-back;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n label {\r\n text-indent: $pretty--label-text-offset-switch;\r\n\r\n &:before,\r\n &:after {\r\n transition: all 0.5s ease;\r\n border-radius: 100%;\r\n left: 0;\r\n border-color: transparent;\r\n transform: scale(0.8);\r\n }\r\n\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n }\r\n\r\n label:before {\r\n opacity: 0;\r\n }\r\n\r\n label:after {\r\n background-color: $pretty--color-dark !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-fill {\r\n input:checked~.state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n label:before {\r\n opacity: 0;\r\n }\r\n label:after {\r\n background-color: #fff !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-slim {\r\n .state {\r\n &:before {\r\n height: 0.1em;\r\n background: $pretty--color-default !important;\r\n top: calc(50% - 0.1em);\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-hover {\r\n input:hover ~ .state:not(.p-is-hover) {\r\n display: none;\r\n }\r\n\r\n input:hover ~ .state.p-is-hover {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-focus {\r\n input:focus {\r\n ~ .state label:before {\r\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-indeterminate {\r\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\r\n display: none;\r\n }\r\n\r\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n opacity: 1;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-toggle {\r\n .state {\r\n &.p-on {\r\n opacity: 0;\r\n display: none;\r\n }\r\n\r\n &.p-off,\r\n .icon,\r\n .svg,\r\n img {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off .icon {\r\n color: $pretty--color-default;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &.p-on {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off {\r\n opacity: 0;\r\n display: none;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-plain {\r\n input:checked ~ .state label,\r\n &.p-toggle .state label {\r\n &:before {\r\n content: none;\r\n }\r\n }\r\n\r\n &.p-plain .icon {\r\n transform: scale(1.1);\r\n }\r\n}",".#{$pretty--class-name}.p-round {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: 100%;\r\n }\r\n }\r\n\r\n &.p-icon .state .icon {\r\n border-radius: 100%;\r\n overflow: hidden;\r\n\r\n &:before {\r\n transform: scale(0.8);\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-curve {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: $pretty--curve-radius;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-smooth {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg {\r\n transition: all 0.5s ease;\r\n }\r\n\r\n input:checked + .state {\r\n label:after {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n img {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-default input:checked + .state {\r\n label:after {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-plain input:checked + .state {\r\n label:before {\r\n content: '';\r\n transform: scale(0);\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-tada:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\r\n input:checked ~ .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\r\n input:checked ~ .state {\r\n label:before {\r\n animation: pulse 1s;\r\n }\r\n }\r\n}",".#{$pretty--class-name} {\r\n input {\r\n &[disabled] {\r\n cursor: not-allowed;\r\n display: none;\r\n\r\n & ~ * {\r\n opacity: .5;\r\n }\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-locked {\r\n input {\r\n display: none;\r\n cursor: not-allowed;\r\n }\r\n}",".#{$pretty--class-name} {\r\n @each $name, $color in $pretty--colors {\r\n input:checked ~ .state.p-#{$name},\r\n &.p-toggle .state.p-#{$name} {\r\n label:after {\r\n background-color: $color !important;\r\n }\r\n\r\n .icon,\r\n .svg {\r\n color: #fff;\r\n stroke: #fff;\r\n }\r\n }\r\n\r\n input:checked ~ .state.p-#{$name}-o,\r\n &.p-toggle .state.p-#{$name}-o {\r\n label:before {\r\n border-color: $color;\r\n }\r\n\r\n label:after {\r\n background-color: transparent;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n svg {\r\n color: $color;\r\n stroke: $color;\r\n }\r\n }\r\n\r\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\r\n &:after {\r\n background-color: $color !important;\r\n }\r\n }\r\n\r\n &.p-switch input:checked ~ .state.p-#{$name}:before {\r\n border-color: $color;\r\n }\r\n\r\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\r\n background-color: $color !important;\r\n }\r\n\r\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\r\n border-color: darken($color, 20%);\r\n background-color: darken($color, 20%) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-bigger {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg,\r\n .img {\r\n font-size: $pretty--2x !important;\r\n top: calc((0% - (100% - 1em)) - 35%) !important;\r\n }\r\n\r\n label {\r\n text-indent: 1.7em;\r\n }\r\n}","@media print {\r\n .#{$pretty--class-name} {\r\n .state:before,\r\n .state label:before,\r\n .state label:after,\r\n .state .icon {\r\n color-adjust: exact;\r\n /* stylelint-disable */\r\n -webkit-print-color-adjust: exact;\r\n print-color-adjust: exact;\r\n }\r\n }\r\n}"]} \ No newline at end of file +{"version":3,"sources":["scss/_core.scss","pretty-checkbox.css","scss/_variables.scss","scss/essentials/_keyframes.scss","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 * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type=checkbox]):not([type=radio]) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n.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.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.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.pretty .state label:before {\n border-color: #bdc3c7;\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@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@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@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@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.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.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.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.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.pretty.p-icon input:checked ~ .state .icon,\n.pretty.p-icon input:indeterminate ~ .state .icon {\n opacity: 1;\n}\n.pretty.p-icon input:checked ~ .state label:before,\n.pretty.p-icon input:indeterminate ~ .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.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.pretty.p-svg input:checked ~ .state .svg,\n.pretty.p-svg input:indeterminate ~ .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.pretty.p-image input:checked ~ .state img,\n.pretty.p-image input:indeterminate ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n.pretty.p-switch .state {\n position: relative;\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.pretty.p-switch .state label {\n text-indent: 2.5em;\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.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\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.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\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.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.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\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.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate {\n display: block;\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.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.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\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, .pretty.p-plain.p-toggle .state label:before {\n content: none;\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.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\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.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\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.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\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.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.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.pretty input[disabled] ~ * {\n opacity: 0.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, .pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg, .pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-primary-o label:before, .pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n.pretty input:checked ~ .state.p-primary-o label:after, .pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n.pretty input:checked ~ .state.p-info label:after, .pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg, .pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-info-o label:before, .pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n.pretty input:checked ~ .state.p-info-o label:after, .pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n.pretty input:checked ~ .state.p-success label:after, .pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg, .pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-success-o label:before, .pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n.pretty input:checked ~ .state.p-success-o label:after, .pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n.pretty input:checked ~ .state.p-warning label:after, .pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg, .pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-warning-o label:before, .pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n.pretty input:checked ~ .state.p-warning-o label:after, .pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n.pretty input:checked ~ .state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg, .pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-danger-o label:before, .pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n.pretty input:checked ~ .state.p-danger-o label:after, .pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\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.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}","$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: false !default;\n$pretty--err-message: 'Error: Invalid input type!' !default;\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\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--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 input:indeterminate ~ .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 input:indeterminate ~ .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 input:indeterminate ~ .state img {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-switch {\n input{\n min-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}\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 index 73a30ff..111c04a 100644 --- a/dist/pretty-checkbox.css +++ b/dist/pretty-checkbox.css @@ -6,14 +6,15 @@ * Source: https://github.com/lokesh-coder/pretty-checkbox * Demo: https://lokesh-coder.github.io/pretty-checkbox * - * Copyright (c) 2017 Lokesh rajendran + * Copyright (c) 2020 Lokesh rajendran */ .pretty * { + -webkit-box-sizing: border-box; box-sizing: border-box; } -.pretty input:not([type='checkbox']):not([type='radio']) { +.pretty input:not([type=checkbox]):not([type=radio]) { display: none; } @@ -24,7 +25,6 @@ white-space: nowrap; line-height: 1; } - .pretty input { position: absolute; left: 0; @@ -38,7 +38,6 @@ padding: 0; cursor: pointer; } - .pretty .state label { position: initial; display: inline-block; @@ -47,13 +46,12 @@ text-indent: 1.5em; min-width: calc(1em + 2px); } - -.pretty .state label:before, -.pretty .state label:after { - content: ''; +.pretty .state label:before, .pretty .state label:after { + content: ""; width: calc(1em + 2px); height: calc(1em + 2px); display: block; + -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; border: 1px solid transparent; @@ -63,13 +61,10 @@ 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 { +.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate { display: none; } @@ -88,7 +83,6 @@ transform: scale(0); } } - @-webkit-keyframes tada { 0% { -webkit-animation-timing-function: ease-in; @@ -141,7 +135,6 @@ transform: scale(1); } } - @keyframes tada { 0% { -webkit-animation-timing-function: ease-in; @@ -194,7 +187,6 @@ transform: scale(1); } } - @-webkit-keyframes jelly { 0% { -webkit-transform: scale3d(1, 1, 1); @@ -225,7 +217,6 @@ transform: scale3d(1, 1, 1); } } - @keyframes jelly { 0% { -webkit-transform: scale3d(1, 1, 1); @@ -256,7 +247,6 @@ transform: scale3d(1, 1, 1); } } - @-webkit-keyframes rotate { 0% { opacity: 0; @@ -269,7 +259,6 @@ transform: translateZ(0) rotate(0); } } - @keyframes rotate { 0% { opacity: 0; @@ -282,25 +271,26 @@ transform: translateZ(0) rotate(0); } } - @-webkit-keyframes pulse { 0% { + -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; box-shadow: 0px 0px 0px 0px #bdc3c7; } 100% { + -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } } - @keyframes pulse { 0% { + -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; box-shadow: 0px 0px 0px 0px #bdc3c7; } 100% { + -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); 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); @@ -312,16 +302,13 @@ -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 { +.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; @@ -341,7 +328,6 @@ border: 1px solid transparent; opacity: 0; } - .pretty.p-icon .state .icon:before { margin: 0; width: 100%; @@ -361,12 +347,12 @@ align-items: center; line-height: 1; } - -.pretty.p-icon input:checked ~ .state .icon { +.pretty.p-icon input:checked ~ .state .icon, +.pretty.p-icon input:indeterminate ~ .state .icon { opacity: 1; } - -.pretty.p-icon input:checked ~ .state label:before { +.pretty.p-icon input:checked ~ .state label:before, +.pretty.p-icon input:indeterminate ~ .state label:before { border-color: #5a656b; } @@ -383,7 +369,6 @@ border: 1px solid transparent; opacity: 0; } - .pretty.p-svg .state svg { margin: 0; width: 100%; @@ -403,8 +388,8 @@ align-items: center; line-height: 1; } - -.pretty.p-svg input:checked ~ .state .svg { +.pretty.p-svg input:checked ~ .state .svg, +.pretty.p-svg input:indeterminate ~ .state .svg { opacity: 1; } @@ -423,39 +408,39 @@ -ms-transform: scale(0.8); transform: scale(0.8); } - -.pretty.p-image input:checked ~ .state img { +.pretty.p-image input:checked ~ .state img, +.pretty.p-image input:indeterminate ~ .state img { opacity: 1; } .pretty.p-switch input { min-width: 2em; } - .pretty.p-switch .state { position: relative; } - .pretty.p-switch .state:before { - content: ''; + content: ""; border: 1px solid #bdc3c7; border-radius: 60px; width: 2em; + -webkit-box-sizing: unset; box-sizing: unset; height: calc(1em + 2px); position: absolute; top: 0; top: calc((0% - (100% - 1em)) - 16%); z-index: 0; + -webkit-transition: all 0.5s ease; + -o-transition: all 0.5s ease; 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 { +.pretty.p-switch .state label:before, .pretty.p-switch .state label:after { + -webkit-transition: all 0.5s ease; + -o-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 100%; left: 0; @@ -464,19 +449,15 @@ -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; @@ -486,11 +467,9 @@ 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; @@ -501,7 +480,6 @@ background: #bdc3c7 !important; top: calc(50% - 0.1em); } - .pretty.p-switch.p-slim input:checked ~ .state:before { border-color: #5a656b; background-color: #5a656b !important; @@ -510,28 +488,25 @@ .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 { + -webkit-box-shadow: 0px 0px 3px 0px #bdc3c7; box-shadow: 0px 0px 3px 0px #bdc3c7; } -.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { +.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 { +.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 { +.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate .icon { display: block; opacity: 1; } @@ -540,7 +515,6 @@ opacity: 0; display: none; } - .pretty.p-toggle .state.p-off, .pretty.p-toggle .state .icon, .pretty.p-toggle .state .svg, @@ -548,50 +522,41 @@ 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 { +.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 { +.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 { +.pretty.p-curve .state label:before, .pretty.p-curve .state label:after { border-radius: 20%; } @@ -599,30 +564,32 @@ .pretty.p-smooth label:after, .pretty.p-smooth .icon, .pretty.p-smooth .svg { + -webkit-transition: all 0.5s ease; + -o-transition: all 0.5s ease; transition: all 0.5s ease; } - .pretty.p-smooth input:checked + .state label:after { + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; 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: ''; + content: ""; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); + -webkit-transition: all 0.5s ease; + -o-transition: all 0.5s ease; transition: all 0.5s ease; } @@ -645,7 +612,6 @@ 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; } @@ -659,7 +625,6 @@ 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; } @@ -673,9 +638,8 @@ cursor: not-allowed; display: none; } - .pretty input[disabled] ~ * { - opacity: .5; + opacity: 0.5; } .pretty.p-locked input { @@ -683,251 +647,182 @@ cursor: not-allowed; } -.pretty input:checked ~ .state.p-primary label:after, -.pretty.p-toggle .state.p-primary label:after { +.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 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 { +.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 { +.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 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 { +.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 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 { +.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 { +.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 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 { +.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 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 { +.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 { +.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 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 { +.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 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 { +.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 { +.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 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 { +.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 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 { +.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 { +.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 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; @@ -941,19 +836,19 @@ 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 { +.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 index 394fa2c..5694824 100644 --- a/dist/pretty-checkbox.min.css +++ b/dist/pretty-checkbox.min.css @@ -6,7 +6,7 @@ * Source: https://github.com/lokesh-coder/pretty-checkbox * Demo: https://lokesh-coder.github.io/pretty-checkbox * - * Copyright (c) 2017 Lokesh rajendran + * Copyright (c) 2020 Lokesh rajendran */ -.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-webkit-transform:scale(.4)!important;-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);left:0;z-index:0;text-align:center;line-height:normal;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{-webkit-animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{-webkit-animation:jelly .7s cubic-bezier(.25,.46,.45,.94);animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{-webkit-animation:rotate .7s cubic-bezier(.25,.46,.45,.94);animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{-webkit-animation:pulse 1s;animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}} +.pretty *{-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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%{-webkit-box-shadow:0 0 0 0 #bdc3c7;box-shadow:0 0 0 0 #bdc3c7}100%{-webkit-box-shadow:0 0 0 1.5em rgba(189,195,199,0);box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 #bdc3c7;box-shadow:0 0 0 0 #bdc3c7}100%{-webkit-box-shadow:0 0 0 1.5em rgba(189,195,199,0);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,.pretty.p-icon input:indeterminate~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before,.pretty.p-icon input:indeterminate~.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,.pretty.p-svg input:indeterminate~.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,.pretty.p-image input:indeterminate~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:"";border:1px solid #bdc3c7;border-radius:60px;width:2em;-webkit-box-sizing:unset;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;-webkit-transition:all .5s ease;-o-transition:all .5s ease;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{-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{-webkit-box-shadow:0 0 3px 0 #bdc3c7;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{-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{-webkit-transition:all .3s ease;-o-transition:all .3s ease;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);-webkit-transition:all .5s ease;-o-transition:all .5s ease;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/package.json b/package.json index 8cb112a..bc0f9e7 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "A pure css library to beautify checkbox and radio buttons.", "main": "dist/pretty-checkbox.min.css", "scripts": { - "lint":"gulp lint:scss", + "lint": "gulp lint:scss", "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", "format": "gulp css:format", "build": "gulp build", @@ -15,26 +15,30 @@ "dependencies": {}, "devDependencies": { "browser-sync": "^2.8.2", - "conventional-github-releaser": "^1.1.12", - "corp-semantic-release": "^6.1.0", - "del": "^3.0.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "^3.1.1", - "gulp-clean-css": "^3.9.0", - "gulp-header-comment": "^0.2.1", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.1", - "gulp-sequence": "^0.4.6", + "conventional-github-releaser": "^3.1.5", + "corp-semantic-release": "^7.0.0", + "del": "^5.0.0", + "gulp": "^4.0.2", + "gulp-autoprefixer": "^7.0.0", + "gulp-clean-css": "^4.0.0", + "gulp-header-comment": "^0.8.0", + "gulp-rename": "^2.0.0", + "gulp-sass": "^4.1.0", + "gulp-sequence": "^1.0.0", "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" + "gulp-stylelint": "^13.0.0", + "rimraf": "^3.0.0", + "sass": "^1.26.10", + "stylelint": "^13.6.1", + "stylelint-config-recommended": "^3.0.0", + "stylelint-config-recommended-scss": "^4.2.0", + "stylelint-config-sass-guidelines": "^7.0.0", + "stylelint-scss": "^3.18.0" }, + "browserslist": [ + "> 5%", + "last 4 versions" + ], "repository": { "type": "git", "url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", From 46370b692c8297b9d14c2dd342a27da058a47618 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Mon, 17 Aug 2020 11:07:04 -0700 Subject: [PATCH 03/23] feat(:tada:) maintain fork of pretty-checkbox - Using prettier to format :art: - Using github actions for build :construction_worker: - Releasing under scoped package :package: --- .editorconfig | 9 + .github/workflows/nodejs.yml | 18 + .github/workflows/on_pre_release.yml | 21 + .github/workflows/on_release.yml | 21 + .github/workflows/stale.yml | 19 + .gitignore | 3 + .travis.yml | 22 - Gulpfile.js | 142 +-- README.md | 618 +++++------ dist/maps/pretty-checkbox.css.map | 1 - dist/pretty-checkbox.css | 854 --------------- dist/pretty-checkbox.min.css | 12 - package.json | 140 +-- src/pretty-checkbox.scss | 4 +- src/scss/_core.scss | 134 +-- src/scss/_variables.scss | 6 +- src/scss/elements/default/_fill.scss | 10 +- src/scss/elements/default/_outline.scss | 18 +- src/scss/elements/default/_thick.scss | 18 +- src/scss/elements/font-icon/_general.scss | 68 +- src/scss/elements/image/_general.scss | 38 +- src/scss/elements/svg/_general.scss | 60 +- src/scss/elements/switch/_fill.scss | 4 +- src/scss/elements/switch/_general.scss | 88 +- src/scss/elements/switch/_slim.scss | 24 +- src/scss/essentials/_functions.scss | 2 +- src/scss/essentials/_keyframes.scss | 166 +-- src/scss/essentials/_mixins.scss | 2 +- src/scss/extras/_animation.scss | 126 +-- src/scss/extras/_bigger.scss | 24 +- src/scss/extras/_colors.scss | 102 +- src/scss/extras/_curve.scss | 12 +- src/scss/extras/_disabled.scss | 16 +- src/scss/extras/_locked.scss | 10 +- src/scss/extras/_plain.scss | 18 +- src/scss/extras/_print.scss | 22 +- src/scss/extras/_round.scss | 22 +- src/scss/extras/_toggle.scss | 50 +- src/scss/states/_focus.scss | 10 +- src/scss/states/_hover.scss | 18 +- src/scss/states/_indeterminate.scss | 20 +- src/test.css | 1147 +++++++++++---------- 42 files changed, 1689 insertions(+), 2430 deletions(-) create mode 100644 .editorconfig create mode 100644 .github/workflows/nodejs.yml create mode 100644 .github/workflows/on_pre_release.yml create mode 100644 .github/workflows/on_release.yml create mode 100644 .github/workflows/stale.yml delete mode 100644 .travis.yml delete mode 100644 dist/maps/pretty-checkbox.css.map delete mode 100644 dist/pretty-checkbox.css delete mode 100644 dist/pretty-checkbox.min.css diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..81eba8c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 4 +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +end_of_line = lf diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml new file mode 100644 index 0000000..ebd4a5e --- /dev/null +++ b/.github/workflows/nodejs.yml @@ -0,0 +1,18 @@ +name: Build +on: [push, pull_request] +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x, 14.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and test + run: | + npm ci + npm run build diff --git a/.github/workflows/on_pre_release.yml b/.github/workflows/on_pre_release.yml new file mode 100644 index 0000000..db4e3b4 --- /dev/null +++ b/.github/workflows/on_pre_release.yml @@ -0,0 +1,21 @@ +name: Pre Release +on: + release: + types: [prereleased] +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - name: npm install + run: npm i + - name: build + run: npm run build + - name: publish + run: npm publish --tag next + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.github/workflows/on_release.yml b/.github/workflows/on_release.yml new file mode 100644 index 0000000..c238742 --- /dev/null +++ b/.github/workflows/on_release.yml @@ -0,0 +1,21 @@ +name: Release +on: + release: + types: [released] +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - name: npm install + run: npm i + - name: build + run: npm run build + - name: publish + run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..7bbc050 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,19 @@ +name: Mark stale issues and pull requests + +on: + schedule: + - cron: "0 0 * * *" + +jobs: + stale: + + runs-on: ubuntu-latest + + steps: + - uses: actions/stale@v1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + stale-issue-message: 'Stale issue message' + stale-pr-message: 'Stale pull request message' + stale-issue-label: 'no-issue-activity' + stale-pr-label: 'no-pr-activity' diff --git a/.gitignore b/.gitignore index 75a0854..36280e2 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,6 @@ test # Logs .log + +# Build +dist/ \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 2a3006d..0000000 --- a/.travis.yml +++ /dev/null @@ -1,22 +0,0 @@ -sudo: required -dist: trusty -language: node_js -node_js: - - node -cache: - yarn: true -notifications: - email: false -before_install: - - echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc -after_success: - - 'if [ ${TRAVIS_PULL_REQUEST} = "false" ]; then - npm run ci; - npm run release; - npm publish --access=public; - npm run log; - fi' -branches: - only: - - staging - - /^greenkeeper/.*$/ \ No newline at end of file diff --git a/Gulpfile.js b/Gulpfile.js index 5fa518f..8477fd4 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -10,89 +10,107 @@ const sourcemaps = require('gulp-sourcemaps'); const headerComment = require('gulp-header-comment'); const gulpStylelint = require('gulp-stylelint'); const cleanCSS = require('gulp-clean-css'); -const gulpSequence = require('gulp-sequence') +const gulpSequence = require('gulp-sequence'); const del = require('del'); const reload = browserSync.reload; /* BROWSER SYNC */ exports['browser-sync'] = function serve() { - browserSync({ - port: 3040, - server: { - baseDir: "./", - directory: true - }, - https: true - }); + browserSync({ + port: 3040, + server: { + baseDir: './', + directory: true, + }, + https: true, + }); }; /* BROWSER SYNC RELOAD */ exports['browser-sync-reload'] = function browserSyncReload() { - browserSync.reload(); + browserSync.reload(); }; /* LIST SCSS */ exports['lint:scss'] = function lintCSS() { - return gulp - .src('src/**/*.scss') - .pipe(gulpStylelint({ - reporters: [{ - formatter: 'string', - console: true - }] - })); + return gulp.src('src/**/*.scss').pipe( + gulpStylelint({ + reporters: [ + { + formatter: 'string', + console: true, + }, + ], + }) + ); }; /* COMPILE SCSS */ -exports['compile:scss'] = function compileSCSS () { - return gulp.src('src/**/*.scss') - .pipe(sourcemaps.init()) - .pipe(sass({ - outputStyle: 'expanded' - }) - .on('error', sass.logError)) - .pipe(autoprefixer({ - cascade: false - })) - .pipe(sourcemaps.write('./maps')) - .pipe(gulp.dest('dist')) - .pipe(browserSync.reload({ - stream: true - })); +exports['compile:scss'] = function compileSCSS() { + return gulp + .src('src/**/*.scss') + .pipe(sourcemaps.init()) + .pipe( + sass({ + outputStyle: 'expanded', + }).on('error', sass.logError) + ) + .pipe( + autoprefixer({ + cascade: false, + }) + ) + .pipe(sourcemaps.write('./maps')) + .pipe(gulp.dest('dist')) + .pipe( + browserSync.reload({ + stream: true, + }) + ); }; /* FORMAT CSS */ exports['format:css'] = function formatCSS() { - return gulp.src('dist/*.css') - .pipe(gulpStylelint({ - fix: true, - failAfterError: false - })) - .pipe(gulp.dest('dist')); -} + return gulp + .src('dist/*.css') + .pipe( + gulpStylelint({ + fix: true, + failAfterError: false, + }) + ) + .pipe(gulp.dest('dist')); +}; /* CLEAN DIST */ exports['clean:dist'] = function cleanDist() { - return del(['dist']); + return del(['dist']); }; /* MINIFY CSS */ exports['minify:css'] = function minifyCSS() { - return gulp.src('dist/*.css') - .pipe(cleanCSS({ - compatibility: 'ie9' - })) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest('dist')); -} + return gulp + .src('dist/*.css') + .pipe( + cleanCSS({ + compatibility: 'ie9', + }) + ) + .pipe( + rename({ + suffix: '.min', + }) + ) + .pipe(gulp.dest('dist')); +}; /* SET HEADER */ exports['set:header'] = function setHeader() { - return gulp.src('dist/*.css') - .pipe(headerComment(` + return gulp + .src('dist/*.css') + .pipe( + headerComment(` pretty-checkbox.css A pure CSS library to beautify checkbox and radio buttons @@ -101,20 +119,18 @@ exports['set:header'] = function setHeader() { Demo: <%= pkg.homepage %> Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %> - `)) - .pipe(gulp.dest('dist')) + `) + ) + .pipe(gulp.dest('dist')); }; const build = gulp.series( - gulp.parallel( - exports['clean:dist'], - exports['lint:scss'] - ), - exports['compile:scss'], - exports['format:css'], - exports['minify:css'], - exports['set:header'] -) + gulp.parallel(exports['clean:dist'], exports['lint:scss']), + exports['compile:scss'], + exports['format:css'], + exports['minify:css'], + exports['set:header'] +); exports.build = build; exports.default = build; diff --git a/README.md b/README.md index c66e4b4..a257933 100644 --- a/README.md +++ b/README.md @@ -1,303 +1,315 @@ -

-
- Pretty checkbox -

pretty-checkbox.css
-

- -

A pure CSS library to beautify checkbox and radio buttons.

- -

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

-
- -
-
-
Demo and documentation

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

+
+ Pretty checkbox +

pretty-checkbox.css
+

+ +

A pure CSS library to beautify checkbox and radio buttons.

+ +

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

+
+ +
+
+
Demo and documentation

+
+
+
+ +
+Pretty checkbox preview +
+ +### Features + +- Basic + - **Shapes** - _Square_, _Curve_, _Round_ + - **Variants** - _Default_, _Fill_, _Thick_ + - **Colors** - _Primary_, _Success_, _Info_, _Warning_, _Danger_ + - **Color types** - _Solid_, _Outline_ + - **Animations** - _Smooth_, _Tada_, _Jelly_, _Pulse_, _Rotate_ +- Switch - iOS style - _Outline_, _Fill_, _Slim_ +- Responsive +- No JavaScript +- Custom Font Icons +- SVG Icons +- Image support +- Toggle between icons / SVG's / images +- Lock +- State - _Focus_, _Hover_, _Indeterminate_ +- Supports frameworks - _Bootstrap_, _Foundation_, _Sematic UI_, _Bulma_, ... +- SCSS customization +- Supports all modern browsers, including mobile devices +- Print friendly +- and more... ( _I am kidding, that's all!_ ) + +### Installation + +- **From CLI** + +Install using `npm` or `yarn`: + +```sh +> npm install @djthoms/pretty-checkbox // or +> yarn add @djthoms/pretty-checkbox +``` + +Add `pretty-checkbox.min.css` in your html: + +
+ +- **From CDN** ( [`unpkg`](https://www.jsdelivr.com/package/npm/pretty-checkbox) ) + +```html + +``` + +
+ +- **Manual download** ( [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip) ) + +Download the source from Github. + +```html + +``` + +`` is where the library is downloaded. + +
+ +**SCSS** + +You can also import `pretty-checkbox.scss` in your main scss file. + +```scss +@import '~pretty-checkbox/src/pretty-checkbox.scss'; +``` + +Please refer the document for SCSS settings. + +### Usage + +Pretty checkbox comes with many styles, + +| Class name | Description | +| :---------- | :----------------------- | +| `p-default` | Basic style | +| `p-switch` | iOS like toggle style | +| `p-icon` | Custom font icons | +| `p-svg` | Custom SVG files, markup | +| `p-image` | Tiny images | + +And three shapes `p-round` `p-curve` `p-square` (default) + +#### Basic checkbox + +```html +
+ +
+ +
+
+``` + +Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default) + +You can combine them. + +```html +
+ +
+ +
+
+``` + +
---
+ +#### Switch checkbox + +Switch has three variants `p-outline` `p-fill` `p-slim` + +```html +
+ +
+ +
+
+``` + +
---
+ +#### Custom Font icons + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `icon` should be added along with icon class names + +
+ +
+ + Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately. + +
+ + + +
---
+ +#### SVG + +Supports SVG file in tag, markup (` ... `) and sprites + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `svg` to be added in img tag or svg tag. + +
+ + + +
---
+ +#### Image + +Supports any type of valid image format. + +```html +
+ +
+ + +
+
+``` + +
+ + Note: class `image` to be added in img tag. + +
+ + + +
---
+ +#### Colors + +There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger` + +And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o` + +```html +
+ +
+ +
+
+``` + +
+ + Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature. + +
+ + + +### More + +There are more features like **_Radio buttons_** , **_Toggle_** , **_States_** , **_Animations_** , **_Border less_** , **_Lock_** , **_Scale_**, **_SCSS Settings_**. + +Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them. + +### Browser support + +Works in all modern browsers. + +`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9` + +### Font Icon libraries + +- [Font awesome](http://fontawesome.io/icons/) +- [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons) +- [Material icon ( MDI )](https://materialdesignicons.com/) +- [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html) +- [Ion icons](http://ionicons.com/) +- [Typicons](http://www.typicons.com/) +- [Material icon ( Google )](https://material.io/icons) +- Others not tested, but will work ( 99% ). + +### SVG + +- [UIKit](https://getuikit.com/docs/icon) +- [Feathers](https://feathericons.com/) +- Others + +### Libraries + +- VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue) +- Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox) +- React - [pretty-checkbox-react](https://github.com/atomicpages/pretty-checkbox-react) + +### Inspiration + +- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea +- [Animista](http://animista.net) - Animations + +### Contributions + +Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome! + +### License + +This project is licensed under the MIT License + +
❤
diff --git a/dist/maps/pretty-checkbox.css.map b/dist/maps/pretty-checkbox.css.map deleted file mode 100644 index e5631c4..0000000 --- a/dist/maps/pretty-checkbox.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["scss/_core.scss","pretty-checkbox.css","scss/_variables.scss","scss/essentials/_keyframes.scss","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 * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type=checkbox]):not([type=radio]) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n.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.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.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.pretty .state label:before {\n border-color: #bdc3c7;\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@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@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@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@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.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.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.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.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.pretty.p-icon input:checked ~ .state .icon,\n.pretty.p-icon input:indeterminate ~ .state .icon {\n opacity: 1;\n}\n.pretty.p-icon input:checked ~ .state label:before,\n.pretty.p-icon input:indeterminate ~ .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.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.pretty.p-svg input:checked ~ .state .svg,\n.pretty.p-svg input:indeterminate ~ .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.pretty.p-image input:checked ~ .state img,\n.pretty.p-image input:indeterminate ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n.pretty.p-switch .state {\n position: relative;\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.pretty.p-switch .state label {\n text-indent: 2.5em;\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.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\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.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\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.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.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\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.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate {\n display: block;\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.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.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\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, .pretty.p-plain.p-toggle .state label:before {\n content: none;\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.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\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.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\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.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\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.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.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.pretty input[disabled] ~ * {\n opacity: 0.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, .pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg, .pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-primary-o label:before, .pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n.pretty input:checked ~ .state.p-primary-o label:after, .pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n.pretty input:checked ~ .state.p-info label:after, .pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg, .pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-info-o label:before, .pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n.pretty input:checked ~ .state.p-info-o label:after, .pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n.pretty input:checked ~ .state.p-success label:after, .pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg, .pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-success-o label:before, .pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n.pretty input:checked ~ .state.p-success-o label:after, .pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n.pretty input:checked ~ .state.p-warning label:after, .pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg, .pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-warning-o label:before, .pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n.pretty input:checked ~ .state.p-warning-o label:after, .pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n.pretty input:checked ~ .state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg, .pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n.pretty input:checked ~ .state.p-danger-o label:before, .pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n.pretty input:checked ~ .state.p-danger-o label:after, .pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\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, .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.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\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.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}","$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: false !default;\n$pretty--err-message: 'Error: Invalid input type!' !default;\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\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--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 input:indeterminate ~ .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 input:indeterminate ~ .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 input:indeterminate ~ .state img {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-switch {\n input{\n min-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}\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 deleted file mode 100644 index 111c04a..0000000 --- a/dist/pretty-checkbox.css +++ /dev/null @@ -1,854 +0,0 @@ -/** - * pretty-checkbox.css - * - * A pure CSS library to beautify checkbox and radio buttons - * - * Source: https://github.com/lokesh-coder/pretty-checkbox - * Demo: https://lokesh-coder.github.io/pretty-checkbox - * - * Copyright (c) 2020 Lokesh rajendran - */ - -.pretty * { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.pretty input:not([type=checkbox]):not([type=radio]) { - display: none; -} - -.pretty { - position: relative; - display: inline-block; - margin-right: 1em; - white-space: nowrap; - line-height: 1; -} -.pretty input { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: 2; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; -} -.pretty .state label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: 1.5em; - min-width: calc(1em + 2px); -} -.pretty .state label:before, .pretty .state label:after { - content: ""; - width: calc(1em + 2px); - height: calc(1em + 2px); - display: block; - -webkit-box-sizing: border-box; - 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% { - -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; - box-shadow: 0px 0px 0px 0px #bdc3c7; - } - 100% { - -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - } -} -@keyframes pulse { - 0% { - -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; - box-shadow: 0px 0px 0px 0px #bdc3c7; - } - 100% { - -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - 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, -.pretty.p-icon input:indeterminate ~ .state .icon { - opacity: 1; -} -.pretty.p-icon input:checked ~ .state label:before, -.pretty.p-icon input:indeterminate ~ .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, -.pretty.p-svg input:indeterminate ~ .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, -.pretty.p-image input:indeterminate ~ .state img { - opacity: 1; -} - -.pretty.p-switch input { - min-width: 2em; -} -.pretty.p-switch .state { - position: relative; -} -.pretty.p-switch .state:before { - content: ""; - border: 1px solid #bdc3c7; - border-radius: 60px; - width: 2em; - -webkit-box-sizing: unset; - box-sizing: unset; - height: calc(1em + 2px); - position: absolute; - top: 0; - top: calc((0% - (100% - 1em)) - 16%); - z-index: 0; - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - 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 { - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - 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 { - -webkit-box-shadow: 0px 0px 3px 0px #bdc3c7; - 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 { - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; -} -.pretty.p-smooth input:checked + .state label:after { - -webkit-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - 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); - -webkit-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - 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: 0.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 deleted file mode 100644 index 5694824..0000000 --- a/dist/pretty-checkbox.min.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * pretty-checkbox.css - * - * A pure CSS library to beautify checkbox and radio buttons - * - * Source: https://github.com/lokesh-coder/pretty-checkbox - * Demo: https://lokesh-coder.github.io/pretty-checkbox - * - * Copyright (c) 2020 Lokesh rajendran - */ - -.pretty *{-webkit-box-sizing:border-box;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;-webkit-box-sizing:border-box;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%{-webkit-box-shadow:0 0 0 0 #bdc3c7;box-shadow:0 0 0 0 #bdc3c7}100%{-webkit-box-shadow:0 0 0 1.5em rgba(189,195,199,0);box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 #bdc3c7;box-shadow:0 0 0 0 #bdc3c7}100%{-webkit-box-shadow:0 0 0 1.5em rgba(189,195,199,0);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,.pretty.p-icon input:indeterminate~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before,.pretty.p-icon input:indeterminate~.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,.pretty.p-svg input:indeterminate~.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,.pretty.p-image input:indeterminate~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:"";border:1px solid #bdc3c7;border-radius:60px;width:2em;-webkit-box-sizing:unset;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;-webkit-transition:all .5s ease;-o-transition:all .5s ease;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{-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{-webkit-box-shadow:0 0 3px 0 #bdc3c7;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{-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{-webkit-transition:all .3s ease;-o-transition:all .3s ease;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);-webkit-transition:all .5s ease;-o-transition:all .5s ease;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/package.json b/package.json index bc0f9e7..331719e 100644 --- a/package.json +++ b/package.json @@ -1,69 +1,75 @@ { - "name": "pretty-checkbox", - "version": "3.0.3", - "description": "A pure css library to beautify checkbox and radio buttons.", - "main": "dist/pretty-checkbox.min.css", - "scripts": { - "lint": "gulp lint:scss", - "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", - "format": "gulp css:format", - "build": "gulp build", - "ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"", - "release": "corp-semantic-release", - "log": "conventional-github-releaser -p angular -r 0" - }, - "dependencies": {}, - "devDependencies": { - "browser-sync": "^2.8.2", - "conventional-github-releaser": "^3.1.5", - "corp-semantic-release": "^7.0.0", - "del": "^5.0.0", - "gulp": "^4.0.2", - "gulp-autoprefixer": "^7.0.0", - "gulp-clean-css": "^4.0.0", - "gulp-header-comment": "^0.8.0", - "gulp-rename": "^2.0.0", - "gulp-sass": "^4.1.0", - "gulp-sequence": "^1.0.0", - "gulp-sourcemaps": "^2.6.1", - "gulp-stylelint": "^13.0.0", - "rimraf": "^3.0.0", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-config-recommended": "^3.0.0", - "stylelint-config-recommended-scss": "^4.2.0", - "stylelint-config-sass-guidelines": "^7.0.0", - "stylelint-scss": "^3.18.0" - }, - "browserslist": [ - "> 5%", - "last 4 versions" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", - "link": "https://github.com/lokesh-coder/pretty-checkbox" - }, - "keywords": [ - "checkbox", - "radio", - "bootstrap", - "fonticon", - "icon", - "svg", - "switch", - "toggle", - "sass", - "css3", - "animation", - "pretty", - "check", - "colors" - ], - "author": "Lokesh Rajendran", - "license": "MIT", - "bugs": { - "url": "https://github.com/lokesh-coder/pretty-checkbox/issues" - }, - "homepage": "https://lokesh-coder.github.io/pretty-checkbox" + "name": "@djthoms/pretty-checkbox", + "version": "3.0.3", + "description": "A pure css library to beautify checkbox and radio buttons.", + "main": "dist/pretty-checkbox.min.css", + "scripts": { + "lint": "gulp lint:scss", + "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", + "format": "gulp css:format", + "build": "gulp build", + "ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"", + "release": "corp-semantic-release", + "log": "conventional-github-releaser -p angular -r 0" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": {}, + "devDependencies": { + "@djthoms/prettier-config": "^2.0.0", + "browser-sync": "^2.8.2", + "conventional-github-releaser": "^3.1.5", + "corp-semantic-release": "^7.0.0", + "del": "^5.0.0", + "gulp": "^4.0.2", + "gulp-autoprefixer": "^7.0.0", + "gulp-clean-css": "^4.0.0", + "gulp-header-comment": "^0.8.0", + "gulp-rename": "^2.0.0", + "gulp-sass": "^4.1.0", + "gulp-sequence": "^1.0.0", + "gulp-sourcemaps": "^2.6.1", + "gulp-stylelint": "^13.0.0", + "prettier": "^2.0.5", + "rimraf": "^3.0.0", + "sass": "^1.26.10", + "stylelint": "^13.6.1", + "stylelint-config-recommended": "^3.0.0", + "stylelint-config-recommended-scss": "^4.2.0", + "stylelint-config-sass-guidelines": "^7.0.0", + "stylelint-scss": "^3.18.0" + }, + "browserslist": [ + "> 5%", + "last 4 versions" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", + "link": "https://github.com/lokesh-coder/pretty-checkbox" + }, + "keywords": [ + "checkbox", + "radio", + "bootstrap", + "fonticon", + "icon", + "svg", + "switch", + "toggle", + "sass", + "css3", + "animation", + "pretty", + "check", + "colors" + ], + "author": "Lokesh Rajendran", + "license": "MIT", + "bugs": { + "url": "https://github.com/lokesh-coder/pretty-checkbox/issues" + }, + "homepage": "https://lokesh-coder.github.io/pretty-checkbox", + "prettier": "@djthoms/prettier-config" } diff --git a/src/pretty-checkbox.scss b/src/pretty-checkbox.scss index 1e6fa0f..c24e590 100644 --- a/src/pretty-checkbox.scss +++ b/src/pretty-checkbox.scss @@ -1,6 +1,6 @@ @import './scss/variables'; @import './scss/core'; -@import './scss/essentials/keyframes'; +@import './scss/essentials/keyframes'; @import './scss/essentials/functions'; @import './scss/essentials/mixins'; @import './scss/elements/default/fill'; @@ -24,4 +24,4 @@ @import './scss/extras/locked'; @import './scss/extras/colors'; @import './scss/extras/bigger'; -@import './scss/extras/print'; \ No newline at end of file +@import './scss/extras/print'; diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 13b0736..d634803 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -1,85 +1,85 @@ @charset 'utf-8'; .#{$pretty--class-name} * { - box-sizing: border-box; + box-sizing: border-box; } //Throw error on invalid input types. .#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) { - display: none; + display: none; - @if $pretty--debug { - + *:after { - content: $pretty--err-message; - border: 1px solid #dedede; - border-left: 3px solid #d9534f; - padding: 9px; - font-size: 1em; - font-weight: 600; - color: #d9534f; - position: absolute; - z-index: 3; - background: #fbfbfb; - top: 0; - left: 0; + @if $pretty--debug { + + *:after { + content: $pretty--err-message; + border: 1px solid #dedede; + border-left: 3px solid #d9534f; + padding: 9px; + font-size: 1em; + font-weight: 600; + color: #d9534f; + position: absolute; + z-index: 3; + background: #fbfbfb; + top: 0; + left: 0; + } } - } } .#{$pretty--class-name} { - position: relative; - display: inline-block; - margin-right: 1em; - white-space: nowrap; - line-height: 1; + position: relative; + display: inline-block; + margin-right: 1em; + white-space: nowrap; + line-height: 1; - input { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: $pretty--z-index-front; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; - } - - .state { - label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: $pretty--label-text-offset; - min-width: $pretty--box-size; - - &:before, - &:after { - content: ''; - width: $pretty--box-size; - height: $pretty--box-size; - display: block; - box-sizing: border-box; - border-radius: 0; - border: 1px solid transparent; - z-index: $pretty--z-index-back; + input { position: absolute; left: 0; - top: $pretty-top-offset; - background-color: transparent; - } - - &:before { - border-color: $pretty--color-default; - } + top: 0; + min-width: 1em; + width: 100%; + height: 100%; + z-index: $pretty--z-index-front; + opacity: 0; + margin: 0; + padding: 0; + cursor: pointer; } - &.p-is-hover, - &.p-is-indeterminate { - display: none; + .state { + label { + position: initial; + display: inline-block; + font-weight: normal; + margin: 0; + text-indent: $pretty--label-text-offset; + min-width: $pretty--box-size; + + &:before, + &:after { + content: ''; + width: $pretty--box-size; + height: $pretty--box-size; + display: block; + box-sizing: border-box; + border-radius: 0; + border: 1px solid transparent; + z-index: $pretty--z-index-back; + position: absolute; + left: 0; + top: $pretty-top-offset; + background-color: transparent; + } + + &:before { + border-color: $pretty--color-default; + } + } + + &.p-is-hover, + &.p-is-indeterminate { + display: none; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 915af22..2dcd985 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -26,7 +26,9 @@ $pretty--label-text-offset-switch: 2.5em !default; $pretty--2x: 1.2em !default; // color set -$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default; +$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), + (success, $pretty--color-success), (warning, $pretty--color-warning), + (danger, $pretty--color-danger) !default; // position $pretty-top: 8; @@ -34,6 +36,6 @@ $pretty-top-switch: ($pretty-top * 2) * 1%; $pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%}); $pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch}); -// dev +// dev $pretty--debug: false !default; $pretty--err-message: 'Error: Invalid input type!' !default; diff --git a/src/scss/elements/default/_fill.scss b/src/scss/elements/default/_fill.scss index 33707e2..a8b4628 100644 --- a/src/scss/elements/default/_fill.scss +++ b/src/scss/elements/default/_fill.scss @@ -1,7 +1,7 @@ .#{$pretty--class-name}.p-default.p-fill { - .state label { - &:after { - transform: scale(1); + .state label { + &:after { + transform: scale(1); + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/default/_outline.scss b/src/scss/elements/default/_outline.scss index 0914cc2..c9b3506 100644 --- a/src/scss/elements/default/_outline.scss +++ b/src/scss/elements/default/_outline.scss @@ -1,13 +1,13 @@ .#{$pretty--class-name}.p-default { - .state label { - &:after { - transform: scale(0.6); + .state label { + &:after { + transform: scale(0.6); + } } - } - input:checked ~ .state label { - &:after { - background-color: $pretty--color-default !important; + input:checked ~ .state label { + &:after { + background-color: $pretty--color-default !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/default/_thick.scss b/src/scss/elements/default/_thick.scss index 8c16921..615716b 100644 --- a/src/scss/elements/default/_thick.scss +++ b/src/scss/elements/default/_thick.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name}.p-default.p-thick { - .state label { - &:before, - &:after { - border-width: calc(1em / 7); - } + .state label { + &:before, + &:after { + border-width: calc(1em / 7); + } - &:after { - transform: scale(0.4) !important; + &:after { + transform: scale(0.4) !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/font-icon/_general.scss b/src/scss/elements/font-icon/_general.scss index 6b1374c..6208472 100644 --- a/src/scss/elements/font-icon/_general.scss +++ b/src/scss/elements/font-icon/_general.scss @@ -1,40 +1,40 @@ .#{$pretty--class-name}.p-icon { - .state { - .icon { - position: absolute; - font-size: 1em; - width: $pretty--box-size; - height: $pretty--box-size; - left: 0; - z-index: $pretty--z-index-between; - text-align: center; - line-height: normal; - top: $pretty-top-offset; - border: 1px solid transparent; - opacity: 0; - } + .state { + .icon { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + left: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } - .icon:before { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: flex; - flex: 1; - justify-content: center; - align-items: center; - line-height: 1; + .icon:before { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } } - } - input:checked ~ .state, - input:indeterminate ~ .state { - .icon { - opacity: 1; - } + input:checked ~ .state, + input:indeterminate ~ .state { + .icon { + opacity: 1; + } - label:before { - border-color: #5a656b; + label:before { + border-color: #5a656b; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/image/_general.scss b/src/scss/elements/image/_general.scss index 2171eac..fb2df0e 100644 --- a/src/scss/elements/image/_general.scss +++ b/src/scss/elements/image/_general.scss @@ -1,22 +1,22 @@ .#{$pretty--class-name}.p-image { - .state { - img { - opacity: 0; - position: absolute; - width: $pretty--box-size; - height: $pretty--box-size; - top: 0; - top: $pretty-top-offset; - left: 0; - z-index: $pretty--z-index-back; - text-align: center; - line-height: normal; - transform: scale(0.8); + .state { + img { + opacity: 0; + position: absolute; + width: $pretty--box-size; + height: $pretty--box-size; + top: 0; + top: $pretty-top-offset; + left: 0; + z-index: $pretty--z-index-back; + text-align: center; + line-height: normal; + transform: scale(0.8); + } } - } - input:checked ~ .state img, - input:indeterminate ~ .state img { - opacity: 1; - } -} \ No newline at end of file + input:checked ~ .state img, + input:indeterminate ~ .state img { + opacity: 1; + } +} diff --git a/src/scss/elements/svg/_general.scss b/src/scss/elements/svg/_general.scss index 42da039..0ae3a4a 100644 --- a/src/scss/elements/svg/_general.scss +++ b/src/scss/elements/svg/_general.scss @@ -1,34 +1,34 @@ .#{$pretty--class-name}.p-svg { - .state { - .svg { - position: absolute; - font-size: 1em; - width: $pretty--box-size; - height: $pretty--box-size; - left: 0; - z-index: $pretty--z-index-between; - text-align: center; - line-height: normal; - top: $pretty-top-offset; - border: 1px solid transparent; - opacity: 0; - } + .state { + .svg { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + left: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } - svg { - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: flex; - flex: 1; - justify-content: center; - align-items: center; - line-height: 1; + svg { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } } - } - input:checked ~ .state .svg, - input:indeterminate ~ .state .svg { - opacity: 1; - } -} \ No newline at end of file + input:checked ~ .state .svg, + input:indeterminate ~ .state .svg { + opacity: 1; + } +} diff --git a/src/scss/elements/switch/_fill.scss b/src/scss/elements/switch/_fill.scss index 0f0ace5..c934e21 100644 --- a/src/scss/elements/switch/_fill.scss +++ b/src/scss/elements/switch/_fill.scss @@ -1,5 +1,5 @@ .#{$pretty--class-name}.p-switch.p-fill { - input:checked~.state { + input:checked ~ .state { &:before { border-color: $pretty--color-dark; background-color: $pretty--color-dark !important; @@ -12,4 +12,4 @@ left: 1em; } } -} \ No newline at end of file +} diff --git a/src/scss/elements/switch/_general.scss b/src/scss/elements/switch/_general.scss index 7d1fbef..fb0d432 100644 --- a/src/scss/elements/switch/_general.scss +++ b/src/scss/elements/switch/_general.scss @@ -1,54 +1,54 @@ .#{$pretty--class-name}.p-switch { - input{ - min-width:2em; - } - .state { - position: relative; - - &:before { - content: ''; - border: 1px solid $pretty--color-default; - border-radius: 60px; - width: 2em; - box-sizing: unset; - height: $pretty--box-size; - position: absolute; - top: 0; - top: $pretty-top-offset-switch; - z-index: $pretty--z-index-back; - transition: all 0.5s ease; + input { + min-width: 2em; } + .state { + position: relative; - label { - text-indent: $pretty--label-text-offset-switch; + &:before { + content: ''; + border: 1px solid $pretty--color-default; + border-radius: 60px; + width: 2em; + box-sizing: unset; + height: $pretty--box-size; + position: absolute; + top: 0; + top: $pretty-top-offset-switch; + z-index: $pretty--z-index-back; + transition: all 0.5s ease; + } - &:before, - &:after { - transition: all 0.5s ease; - border-radius: 100%; - left: 0; - border-color: transparent; - transform: scale(0.8); - } + label { + text-indent: $pretty--label-text-offset-switch; - &:after { - background-color: $pretty--color-default !important; - } - } - } + &:before, + &:after { + transition: all 0.5s ease; + border-radius: 100%; + left: 0; + border-color: transparent; + transform: scale(0.8); + } - input:checked ~ .state { - &:before { - border-color: $pretty--color-dark; + &:after { + background-color: $pretty--color-default !important; + } + } } - label:before { - opacity: 0; - } + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + } + + label:before { + opacity: 0; + } - label:after { - background-color: $pretty--color-dark !important; - left: 1em; + label:after { + background-color: $pretty--color-dark !important; + left: 1em; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/elements/switch/_slim.scss b/src/scss/elements/switch/_slim.scss index 0b98b7f..cb7c4ec 100644 --- a/src/scss/elements/switch/_slim.scss +++ b/src/scss/elements/switch/_slim.scss @@ -1,16 +1,16 @@ .#{$pretty--class-name}.p-switch.p-slim { - .state { - &:before { - height: 0.1em; - background: $pretty--color-default !important; - top: calc(50% - 0.1em); + .state { + &:before { + height: 0.1em; + background: $pretty--color-default !important; + top: calc(50% - 0.1em); + } } - } - input:checked ~ .state { - &:before { - border-color: $pretty--color-dark; - background-color: $pretty--color-dark !important; + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + background-color: $pretty--color-dark !important; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/essentials/_functions.scss b/src/scss/essentials/_functions.scss index cfa374b..8b1a393 100644 --- a/src/scss/essentials/_functions.scss +++ b/src/scss/essentials/_functions.scss @@ -1 +1 @@ -// empty \ No newline at end of file +// empty diff --git a/src/scss/essentials/_keyframes.scss b/src/scss/essentials/_keyframes.scss index f0681e0..2a31aec 100644 --- a/src/scss/essentials/_keyframes.scss +++ b/src/scss/essentials/_keyframes.scss @@ -1,102 +1,102 @@ @keyframes zoom { - 0% { - opacity: 0; - transform: scale(0); - } + 0% { + opacity: 0; + transform: scale(0); + } } @keyframes tada { - 0% { - animation-timing-function: ease-in; - opacity: 0; - transform: scale(7); - } - - 38% { - animation-timing-function: ease-out; - opacity: 1; - transform: scale(1); - } - - 55% { - animation-timing-function: ease-in; - transform: scale(1.5); - } - - 72% { - animation-timing-function: ease-out; - transform: scale(1); - } - - 81% { - animation-timing-function: ease-in; - transform: scale(1.24); - } - - 89% { - animation-timing-function: ease-out; - transform: scale(1); - } - - 95% { - animation-timing-function: ease-in; - transform: scale(1.04); - } - - 100% { - animation-timing-function: ease-out; - transform: scale(1); - } + 0% { + animation-timing-function: ease-in; + opacity: 0; + transform: scale(7); + } + + 38% { + animation-timing-function: ease-out; + opacity: 1; + transform: scale(1); + } + + 55% { + animation-timing-function: ease-in; + transform: scale(1.5); + } + + 72% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 81% { + animation-timing-function: ease-in; + transform: scale(1.24); + } + + 89% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 95% { + animation-timing-function: ease-in; + transform: scale(1.04); + } + + 100% { + animation-timing-function: ease-out; + transform: scale(1); + } } @keyframes jelly { - 0% { - transform: scale3d(1, 1, 1); - } + 0% { + transform: scale3d(1, 1, 1); + } - 30% { - transform: scale3d(.75, 1.25, 1); - } + 30% { + transform: scale3d(0.75, 1.25, 1); + } - 40% { - transform: scale3d(1.25, .75, 1); - } + 40% { + transform: scale3d(1.25, 0.75, 1); + } - 50% { - transform: scale3d(.85, 1.15, 1); - } + 50% { + transform: scale3d(0.85, 1.15, 1); + } - 65% { - transform: scale3d(1.05, .95, 1); - } + 65% { + transform: scale3d(1.05, 0.95, 1); + } - 75% { - transform: scale3d(.95, 1.05, 1); - } + 75% { + transform: scale3d(0.95, 1.05, 1); + } - 100% { - transform: scale3d(1, 1, 1); - } + 100% { + transform: scale3d(1, 1, 1); + } } @keyframes rotate { - 0% { - opacity: 0; - transform: translateZ(-200px) rotate(-45deg); - } - - 100% { - opacity: 1; - transform: translateZ(0) rotate(0); - } + 0% { + opacity: 0; + transform: translateZ(-200px) rotate(-45deg); + } + + 100% { + opacity: 1; + transform: translateZ(0) rotate(0); + } } @keyframes pulse { - 0% { - box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0); - } - - 100% { - box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1); - } -} \ No newline at end of file + 0% { + box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0); + } + + 100% { + box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1); + } +} diff --git a/src/scss/essentials/_mixins.scss b/src/scss/essentials/_mixins.scss index cfa374b..8b1a393 100644 --- a/src/scss/essentials/_mixins.scss +++ b/src/scss/essentials/_mixins.scss @@ -1 +1 @@ -// empty \ No newline at end of file +// empty diff --git a/src/scss/extras/_animation.scss b/src/scss/extras/_animation.scss index 0a07282..6e13090 100644 --- a/src/scss/extras/_animation.scss +++ b/src/scss/extras/_animation.scss @@ -1,89 +1,89 @@ .#{$pretty--class-name}.p-smooth { - label:before, - label:after, - .icon, - .svg { - transition: all 0.5s ease; - } - - input:checked + .state { - label:after { - transition: all 0.3s ease; + label:before, + label:after, + .icon, + .svg { + transition: all 0.5s ease; } - .icon, - .svg, - img { - animation: zoom 0.2s ease; + input:checked + .state { + label:after { + transition: all 0.3s ease; + } + + .icon, + .svg, + img { + animation: zoom 0.2s ease; + } } - } - &.p-default input:checked + .state { - label:after { - animation: zoom 0.2s ease; + &.p-default input:checked + .state { + label:after { + animation: zoom 0.2s ease; + } } - } - &.p-plain input:checked + .state { - label:before { - content: ''; - transform: scale(0); - transition: all 0.5s ease; + &.p-plain input:checked + .state { + label:before { + content: ''; + transform: scale(0); + transition: all 0.5s ease; + } } - } } .#{$pretty--class-name}.p-tada:not(.p-default) { - input:checked + .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate; - opacity: 1; + input:checked + .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; + opacity: 1; + } } - } } .#{$pretty--class-name}.p-jelly:not(.p-default) { - input:checked + .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); - opacity: 1; - } + input:checked + .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; + } - label:before { - border-color: transparent; + label:before { + border-color: transparent; + } } - } } .#{$pretty--class-name}.p-rotate:not(.p-default) { - input:checked ~ .state { - .icon, - .svg, - img, - label:before, - label:after { - animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); - opacity: 1; - } + input:checked ~ .state { + .icon, + .svg, + img, + label:before, + label:after { + animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; + } - label:before { - border-color: transparent; + label:before { + border-color: transparent; + } } - } } .#{$pretty--class-name}.p-pulse:not(.p-switch) { - input:checked ~ .state { - label:before { - animation: pulse 1s; + input:checked ~ .state { + label:before { + animation: pulse 1s; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_bigger.scss b/src/scss/extras/_bigger.scss index 95909d0..477cd25 100644 --- a/src/scss/extras/_bigger.scss +++ b/src/scss/extras/_bigger.scss @@ -1,14 +1,14 @@ .#{$pretty--class-name}.p-bigger { - label:before, - label:after, - .icon, - .svg, - .img { - font-size: $pretty--2x !important; - top: calc((0% - (100% - 1em)) - 35%) !important; - } + label:before, + label:after, + .icon, + .svg, + .img { + font-size: $pretty--2x !important; + top: calc((0% - (100% - 1em)) - 35%) !important; + } - label { - text-indent: 1.7em; - } -} \ No newline at end of file + label { + text-indent: 1.7em; + } +} diff --git a/src/scss/extras/_colors.scss b/src/scss/extras/_colors.scss index a127124..d48668b 100644 --- a/src/scss/extras/_colors.scss +++ b/src/scss/extras/_colors.scss @@ -1,53 +1,53 @@ .#{$pretty--class-name} { - @each $name, $color in $pretty--colors { - input:checked ~ .state.p-#{$name}, - &.p-toggle .state.p-#{$name} { - label:after { - background-color: $color !important; - } - - .icon, - .svg { - color: #fff; - stroke: #fff; - } + @each $name, $color in $pretty--colors { + input:checked ~ .state.p-#{$name}, + &.p-toggle .state.p-#{$name} { + label:after { + background-color: $color !important; + } + + .icon, + .svg { + color: #fff; + stroke: #fff; + } + } + + input:checked ~ .state.p-#{$name}-o, + &.p-toggle .state.p-#{$name}-o { + label:before { + border-color: $color; + } + + label:after { + background-color: transparent; + } + + .icon, + .svg, + svg { + color: $color; + stroke: $color; + } + } + + &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label { + &:after { + background-color: $color !important; + } + } + + &.p-switch input:checked ~ .state.p-#{$name}:before { + border-color: $color; + } + + &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before { + background-color: $color !important; + } + + &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before { + border-color: darken($color, 20%); + background-color: darken($color, 20%) !important; + } } - - input:checked ~ .state.p-#{$name}-o, - &.p-toggle .state.p-#{$name}-o { - label:before { - border-color: $color; - } - - label:after { - background-color: transparent; - } - - .icon, - .svg, - svg { - color: $color; - stroke: $color; - } - } - - &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label { - &:after { - background-color: $color !important; - } - } - - &.p-switch input:checked ~ .state.p-#{$name}:before { - border-color: $color; - } - - &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before { - background-color: $color !important; - } - - &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before { - border-color: darken($color, 20%); - background-color: darken($color, 20%) !important; - } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_curve.scss b/src/scss/extras/_curve.scss index b67720a..2a4d318 100644 --- a/src/scss/extras/_curve.scss +++ b/src/scss/extras/_curve.scss @@ -1,8 +1,8 @@ .#{$pretty--class-name}.p-curve { - .state label { - &:before, - &:after { - border-radius: $pretty--curve-radius; + .state label { + &:before, + &:after { + border-radius: $pretty--curve-radius; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_disabled.scss b/src/scss/extras/_disabled.scss index 69a8d45..8b9e88a 100644 --- a/src/scss/extras/_disabled.scss +++ b/src/scss/extras/_disabled.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name} { - input { - &[disabled] { - cursor: not-allowed; - display: none; + input { + &[disabled] { + cursor: not-allowed; + display: none; - & ~ * { - opacity: .5; - } + & ~ * { + opacity: 0.5; + } + } } - } } diff --git a/src/scss/extras/_locked.scss b/src/scss/extras/_locked.scss index 4ae9e6c..e6f0133 100644 --- a/src/scss/extras/_locked.scss +++ b/src/scss/extras/_locked.scss @@ -1,6 +1,6 @@ .#{$pretty--class-name}.p-locked { - input { - display: none; - cursor: not-allowed; - } -} \ No newline at end of file + input { + display: none; + cursor: not-allowed; + } +} diff --git a/src/scss/extras/_plain.scss b/src/scss/extras/_plain.scss index bfa6b09..081de99 100644 --- a/src/scss/extras/_plain.scss +++ b/src/scss/extras/_plain.scss @@ -1,12 +1,12 @@ .#{$pretty--class-name}.p-plain { - input:checked ~ .state label, - &.p-toggle .state label { - &:before { - content: none; + input:checked ~ .state label, + &.p-toggle .state label { + &:before { + content: none; + } } - } - &.p-plain .icon { - transform: scale(1.1); - } -} \ No newline at end of file + &.p-plain .icon { + transform: scale(1.1); + } +} diff --git a/src/scss/extras/_print.scss b/src/scss/extras/_print.scss index aab23f3..a8ad133 100644 --- a/src/scss/extras/_print.scss +++ b/src/scss/extras/_print.scss @@ -1,13 +1,13 @@ @media print { - .#{$pretty--class-name} { - .state:before, - .state label:before, - .state label:after, - .state .icon { - color-adjust: exact; - /* stylelint-disable */ - -webkit-print-color-adjust: exact; - print-color-adjust: exact; + .#{$pretty--class-name} { + .state:before, + .state label:before, + .state label:after, + .state .icon { + color-adjust: exact; + /* stylelint-disable */ + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/extras/_round.scss b/src/scss/extras/_round.scss index 87e5960..7e4b2a6 100644 --- a/src/scss/extras/_round.scss +++ b/src/scss/extras/_round.scss @@ -1,17 +1,17 @@ .#{$pretty--class-name}.p-round { - .state label { - &:before, - &:after { - border-radius: 100%; + .state label { + &:before, + &:after { + border-radius: 100%; + } } - } - &.p-icon .state .icon { - border-radius: 100%; - overflow: hidden; + &.p-icon .state .icon { + border-radius: 100%; + overflow: hidden; - &:before { - transform: scale(0.8); + &:before { + transform: scale(0.8); + } } - } } diff --git a/src/scss/extras/_toggle.scss b/src/scss/extras/_toggle.scss index 426291d..3d75113 100644 --- a/src/scss/extras/_toggle.scss +++ b/src/scss/extras/_toggle.scss @@ -1,32 +1,32 @@ .#{$pretty--class-name}.p-toggle { - .state { - &.p-on { - opacity: 0; - display: none; - } + .state { + &.p-on { + opacity: 0; + display: none; + } - &.p-off, - .icon, - .svg, - img { - opacity: 1; - display: inherit; - } + &.p-off, + .icon, + .svg, + img { + opacity: 1; + display: inherit; + } - &.p-off .icon { - color: $pretty--color-default; + &.p-off .icon { + color: $pretty--color-default; + } } - } - input:checked ~ .state { - &.p-on { - opacity: 1; - display: inherit; - } + input:checked ~ .state { + &.p-on { + opacity: 1; + display: inherit; + } - &.p-off { - opacity: 0; - display: none; + &.p-off { + opacity: 0; + display: none; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_focus.scss b/src/scss/states/_focus.scss index 0f7d977..d9caf1a 100644 --- a/src/scss/states/_focus.scss +++ b/src/scss/states/_focus.scss @@ -1,7 +1,7 @@ .#{$pretty--class-name}.p-has-focus { - input:focus { - ~ .state label:before { - box-shadow: 0px 0px 3px 0px rgb(189, 195, 199); + input:focus { + ~ .state label:before { + box-shadow: 0px 0px 3px 0px rgb(189, 195, 199); + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_hover.scss b/src/scss/states/_hover.scss index e996752..aa0419e 100644 --- a/src/scss/states/_hover.scss +++ b/src/scss/states/_hover.scss @@ -1,13 +1,13 @@ .#{$pretty--class-name}.p-has-hover { - input:hover ~ .state:not(.p-is-hover) { - display: none; - } + input:hover ~ .state:not(.p-is-hover) { + display: none; + } - input:hover ~ .state.p-is-hover { - display: block; + input:hover ~ .state.p-is-hover { + display: block; - .icon { - display: block; + .icon { + display: block; + } } - } -} \ No newline at end of file +} diff --git a/src/scss/states/_indeterminate.scss b/src/scss/states/_indeterminate.scss index 4007b3c..c88e164 100644 --- a/src/scss/states/_indeterminate.scss +++ b/src/scss/states/_indeterminate.scss @@ -1,14 +1,14 @@ .#{$pretty--class-name}.p-has-indeterminate { - input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) { - display: none; - } + input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { + display: none; + } - input[type='checkbox']:indeterminate ~.state.p-is-indeterminate { - display: block; + input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { + display: block; - .icon { - display: block; - opacity: 1; + .icon { + display: block; + opacity: 1; + } } - } -} \ No newline at end of file +} diff --git a/src/test.css b/src/test.css index 2f949f5..30cefaa 100644 --- a/src/test.css +++ b/src/test.css @@ -1,488 +1,492 @@ .pretty * { - box-sizing: border-box; + box-sizing: border-box; } .pretty { - position: relative; - display: inline-block; - margin-right: 1em; - line-height: unset; - white-space: nowrap; + 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; + 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); + 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; + background-color: transparent; + border-color: #bdc3c7; + margin-right: 0.1em; } -.pretty .state.--is-hover, .pretty .state.--is-indeterminate { - display: none; +.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; - } + 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; - } + 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); - } + 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); - } + 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; - } + 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; - } + 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); + -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; + 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); + -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; + 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='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; + 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; + -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; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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); + 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; + display: inline-block; } .pretty.--switch .state { - position: relative; + 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; + 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; + 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: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; + background-color: #bdc3c7; } .pretty.--switch input[type='checkbox']:checked ~ .state:before, .pretty.--switch input[type='radio']:checked ~ .state:before { - border-color: #5a656b; + border-color: #5a656b; } .pretty.--switch input[type='checkbox']:checked ~ .state label:before, .pretty.--switch input[type='radio']:checked ~ .state label:before { - opacity: 0; + 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; + 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; + 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; + 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; + background-color: #fff; + left: 1em; } .pretty.--switch.--slim .state:before { - height: 0.1em; - background: #bdc3c7; - top: calc(50% - 1.5px); + 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; + border-color: #5a656b; + background-color: #5a656b; } .pretty.--toggle input[type='checkbox'] ~ .state.--on, .pretty.--toggle input[type='radio'] ~ .state.--on { - display: none; + display: none; } .pretty.--toggle input[type='checkbox'] ~ .state.--off, @@ -493,46 +497,48 @@ .pretty.--toggle input[type='radio'] ~ .state .icon, .pretty.--toggle input[type='radio'] ~ .state .svg, .pretty.--toggle input[type='radio'] ~ .state img { - display: inline-block; + display: inline-block; } .pretty.--toggle input[type='checkbox']:checked ~ .state.--on, .pretty.--toggle input[type='radio']:checked ~ .state.--on { - display: inline-block; + display: inline-block; } .pretty.--toggle input[type='checkbox']:checked ~ .state.--off, .pretty.--toggle input[type='radio']:checked ~ .state.--off { - display: none; + 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; + content: none; } -.pretty.--round input[type='checkbox'] ~ .state label:before, .pretty.--round input[type='checkbox'] ~ .state label:after, +.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%; + border-radius: 100%; } .pretty.--round.--icon .state .icon { - border-radius: 100%; - overflow: hidden; + border-radius: 100%; + overflow: hidden; } .pretty.--round.--icon .state .icon:before { - -webkit-transform: scale(0.8); - transform: scale(0.8); + -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='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%; + border-radius: 20%; } .pretty.--smooth input[type='checkbox'] + .state .icon, @@ -541,22 +547,22 @@ .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; + 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; + 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; + opacity: 0; + transition: all 0.5s ease; } .pretty.--smooth input[type='checkbox']:checked + .state .icon, @@ -567,33 +573,33 @@ .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; + -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); + -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; + 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); + -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); + content: ''; + -webkit-transform: scale(0); + transform: scale(0); } .pretty.--tada input[type='checkbox'] + .state .icon, @@ -602,13 +608,13 @@ .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; + display: inline-block; + opacity: 0; } .pretty.--tada input[type='checkbox'] + .state label:after, .pretty.--tada input[type='radio'] + .state label:after { - opacity: 0; + opacity: 0; } .pretty.--tada input[type='checkbox']:checked + .state .icon, @@ -619,14 +625,14 @@ .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; + -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; + opacity: 1; } .pretty.--jelly input[type='checkbox'] + .state .icon, @@ -635,15 +641,15 @@ .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; + 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; + opacity: 0; } .pretty.--jelly input[type='checkbox']:checked + .state .icon, @@ -654,14 +660,14 @@ .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; + -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; + border-color: transparent; } .pretty.--rotate input[type='checkbox'] ~ .state .icon, @@ -670,15 +676,15 @@ .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; + 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; + opacity: 0; } .pretty.--rotate input[type='checkbox']:checked ~ .state .icon, @@ -689,31 +695,31 @@ .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; + -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; + border-color: transparent; } .pretty input[type='checkbox'][disabled], .pretty input[type='radio'][disabled] { - display: none; - cursor: not-allowed; + display: none; + cursor: not-allowed; } .pretty input[type='checkbox'][disabled] ~ *, .pretty input[type='radio'][disabled] ~ * { - opacity: 0.5; + opacity: 0.5; } .pretty.--locked input[type='checkbox'], .pretty.--locked input[type='radio'] { - display: none; - cursor: not-allowed; + display: none; + cursor: not-allowed; } .pretty input[type='checkbox']:checked ~ .state.--primary .icon, @@ -732,16 +738,16 @@ .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; + 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; + background-color: #428bca !important; + color: #fff; } .pretty input[type='checkbox']:checked ~ .state.--primary-o .icon, @@ -760,95 +766,98 @@ .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; + 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; + 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; + 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; + 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.--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; + background-color: transparent !important; } .pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary .icon, .pretty.--toggle input[type='radio'] ~ .state.--off.--primary .icon { - color: #fff; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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.--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; + 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.--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; + 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; + border-color: #245682; + background-color: #245682; + zoom: 0; } .pretty input[type='checkbox']:checked ~ .state.--info .icon, @@ -867,16 +876,16 @@ .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; + 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; + background-color: #5bc0de !important; + color: #fff; } .pretty input[type='checkbox']:checked ~ .state.--info-o .icon, @@ -895,95 +904,98 @@ .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; + 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; + 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; + 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; + 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.--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; + background-color: transparent !important; } .pretty.--toggle input[type='checkbox'] ~ .state.--off.--info .icon, .pretty.--toggle input[type='radio'] ~ .state.--off.--info .icon { - color: #fff; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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.--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; + 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.--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; + 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; + border-color: #2390b0; + background-color: #2390b0; + zoom: 0; } .pretty input[type='checkbox']:checked ~ .state.--success .icon, @@ -1002,16 +1014,16 @@ .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; + 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; + background-color: #5cb85c !important; + color: #fff; } .pretty input[type='checkbox']:checked ~ .state.--success-o .icon, @@ -1030,95 +1042,98 @@ .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; + 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; + 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; + 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; + 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.--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; + background-color: transparent !important; } .pretty.--toggle input[type='checkbox'] ~ .state.--off.--success .icon, .pretty.--toggle input[type='radio'] ~ .state.--off.--success .icon { - color: #fff; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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.--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; + 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.--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; + 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; + border-color: #357935; + background-color: #357935; + zoom: 0; } .pretty input[type='checkbox']:checked ~ .state.--warning .icon, @@ -1137,16 +1152,16 @@ .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; + 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; + background-color: #f0ad4e !important; + color: #fff; } .pretty input[type='checkbox']:checked ~ .state.--warning-o .icon, @@ -1165,95 +1180,98 @@ .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; + 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; + 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; + 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; + 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.--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; + background-color: transparent !important; } .pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning .icon, .pretty.--toggle input[type='radio'] ~ .state.--off.--warning .icon { - color: #fff; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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.--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; + 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.--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; + 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; + border-color: #c77c11; + background-color: #c77c11; + zoom: 0; } .pretty input[type='checkbox']:checked ~ .state.--danger .icon, @@ -1272,16 +1290,16 @@ .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; + 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; + background-color: #d9534f !important; + color: #fff; } .pretty input[type='checkbox']:checked ~ .state.--danger-o .icon, @@ -1300,137 +1318,140 @@ .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; + 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; + 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; + 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; + 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.--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; + background-color: transparent !important; } .pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger .icon, .pretty.--toggle input[type='radio'] ~ .state.--off.--danger .icon { - color: #fff; + 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; + 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; + 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; + 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; + 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; + 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; + 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; + 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.--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; + 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.--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; + 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; + 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 .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; + display: none; } .pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover, .pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover { - display: block; + 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; + 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; + box-shadow: 0px 0px 3px 0px #bdc3c7; } .pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.--is-indeterminate) { - display: none; + display: none; } .pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate { - display: block; + display: block; } .pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate .icon { - display: block; + display: block; } /* From 9e80f16cb30217e90fe4fb7b66d1e1a28c40ea8a Mon Sep 17 00:00:00 2001 From: atomicpages Date: Mon, 17 Aug 2020 11:11:37 -0700 Subject: [PATCH 04/23] build(:construction_worker:) whoops, using npm i --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index ebd4a5e..c2d1ad4 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -14,5 +14,5 @@ jobs: node-version: ${{ matrix.node-version }} - name: npm install, build, and test run: | - npm ci + npm i npm run build From 03847932c00f44026dc191082a99aa6e7c12df35 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Mon, 17 Aug 2020 11:26:44 -0700 Subject: [PATCH 05/23] refactor(:recycle:) - Cleaning up README - Cleaning up package.json --- Gulpfile.js | 1 - README.md | 64 ++++++++++++++++++++-------------------------------- package.json | 18 ++++++--------- 3 files changed, 31 insertions(+), 52 deletions(-) diff --git a/Gulpfile.js b/Gulpfile.js index 8477fd4..438aee6 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -10,7 +10,6 @@ const sourcemaps = require('gulp-sourcemaps'); const headerComment = require('gulp-header-comment'); const gulpStylelint = require('gulp-stylelint'); const cleanCSS = require('gulp-clean-css'); -const gulpSequence = require('gulp-sequence'); const del = require('del'); const reload = browserSync.reload; diff --git a/README.md b/README.md index a257933..b772c9d 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Pretty checkbox preview -### Features +## Features - Basic - **Shapes** - _Square_, _Curve_, _Round_ @@ -53,22 +53,20 @@ - Print friendly - and more... ( _I am kidding, that's all!_ ) -### Installation +## Installation -- **From CLI** +### **From CLI** Install using `npm` or `yarn`: ```sh -> npm install @djthoms/pretty-checkbox // or -> yarn add @djthoms/pretty-checkbox +npm install @djthoms/pretty-checkbox # or +yarn add @djthoms/pretty-checkbox ``` Add `pretty-checkbox.min.css` in your html: -
- -- **From CDN** ( [`unpkg`](https://www.jsdelivr.com/package/npm/pretty-checkbox) ) +### From CDN ```html ``` -
- -- **Manual download** ( [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip) ) +### Manual download -Download the source from Github. +Download the source from [`Github`](https://github.com/atomicpages/pretty-checkbox/archive/master.zip). ```html @@ -89,9 +85,7 @@ Download the source from Github. `` is where the library is downloaded. -
- -**SCSS** +### SCSS You can also import `pretty-checkbox.scss` in your main scss file. @@ -101,7 +95,7 @@ You can also import `pretty-checkbox.scss` in your main scss file. Please refer the document for SCSS settings. -### Usage +## Usage Pretty checkbox comes with many styles, @@ -115,7 +109,7 @@ Pretty checkbox comes with many styles, And three shapes `p-round` `p-curve` `p-square` (default) -#### Basic checkbox +### Basic checkbox ```html
@@ -139,9 +133,7 @@ You can combine them.
``` -
---
- -#### Switch checkbox +### Switch checkbox Switch has three variants `p-outline` `p-fill` `p-slim` @@ -154,9 +146,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim` ``` -
---
- -#### Custom Font icons +### Custom Font icons ```html
@@ -185,9 +175,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim` more details
-
---
- -#### SVG +### SVG Supports SVG file in tag, markup (` ... `) and sprites @@ -211,9 +199,7 @@ Supports SVG file in tag, markup (` ... `) and sprites more details -
---
- -#### Image +### Image Supports any type of valid image format. @@ -237,9 +223,7 @@ Supports any type of valid image format. more details -
---
- -#### Colors +### Colors There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger` @@ -264,19 +248,19 @@ And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p- more details -### More +## 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 +## Browser support Works in all modern browsers. `Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9` -### Font Icon libraries +## Font Icon libraries - [Font awesome](http://fontawesome.io/icons/) - [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons) @@ -287,28 +271,28 @@ Works in all modern browsers. - [Material icon ( Google )](https://material.io/icons) - Others not tested, but will work ( 99% ). -### SVG +## SVG - [UIKit](https://getuikit.com/docs/icon) - [Feathers](https://feathericons.com/) - Others -### Libraries +## Libraries - VueJs - [pretty-checkbox-vue](https://github.com/hamed-ehtesham/pretty-checkbox-vue) - Angular - [ngx-pretty-checkbox](https://github.com/miladfm/ngx-pretty-checkbox) - React - [pretty-checkbox-react](https://github.com/atomicpages/pretty-checkbox-react) -### Inspiration +## Inspiration - [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea - [Animista](http://animista.net) - Animations -### Contributions +## Contributions Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome! -### License +## License This project is licensed under the MIT License diff --git a/package.json b/package.json index 331719e..7d92c93 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,7 @@ "lint": "gulp lint:scss", "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", "format": "gulp css:format", - "build": "gulp build", - "ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"", - "release": "corp-semantic-release", - "log": "conventional-github-releaser -p angular -r 0" + "build": "gulp build" }, "publishConfig": { "access": "public" @@ -19,8 +16,6 @@ "devDependencies": { "@djthoms/prettier-config": "^2.0.0", "browser-sync": "^2.8.2", - "conventional-github-releaser": "^3.1.5", - "corp-semantic-release": "^7.0.0", "del": "^5.0.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.0", @@ -28,7 +23,6 @@ "gulp-header-comment": "^0.8.0", "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0", - "gulp-sequence": "^1.0.0", "gulp-sourcemaps": "^2.6.1", "gulp-stylelint": "^13.0.0", "prettier": "^2.0.5", @@ -37,7 +31,6 @@ "stylelint": "^13.6.1", "stylelint-config-recommended": "^3.0.0", "stylelint-config-recommended-scss": "^4.2.0", - "stylelint-config-sass-guidelines": "^7.0.0", "stylelint-scss": "^3.18.0" }, "browserslist": [ @@ -46,8 +39,8 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", - "link": "https://github.com/lokesh-coder/pretty-checkbox" + "url": "git+https://github.com/atomicpages/pretty-checkbox.git", + "link": "https://github.com/atomicpages/pretty-checkbox" }, "keywords": [ "checkbox", @@ -66,9 +59,12 @@ "colors" ], "author": "Lokesh Rajendran", + "maintainers": [ + "Dennis Thompson" + ], "license": "MIT", "bugs": { - "url": "https://github.com/lokesh-coder/pretty-checkbox/issues" + "url": "https://github.com/atomicpages/pretty-checkbox/issues" }, "homepage": "https://lokesh-coder.github.io/pretty-checkbox", "prettier": "@djthoms/prettier-config" From 803cf0023fe14152b0cdb1969032f3e13ae8c6db Mon Sep 17 00:00:00 2001 From: atomicpages Date: Mon, 17 Aug 2020 11:33:28 -0700 Subject: [PATCH 06/23] 3.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7d92c93..f7a68ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@djthoms/pretty-checkbox", - "version": "3.0.3", + "version": "3.0.4", "description": "A pure css library to beautify checkbox and radio buttons.", "main": "dist/pretty-checkbox.min.css", "scripts": { From 3993f5402585e42c8720efd9ee64fd520b82d0ea Mon Sep 17 00:00:00 2001 From: atomicpages Date: Tue, 18 Aug 2020 23:22:56 -0700 Subject: [PATCH 07/23] feat(:pencil:) new docs phase 1 - Moving to docusaurus 2.x - Re-writing pretty mucg all of the docs --- .gitignore | 24 +- .npmignore | 1 + README.md | 2 +- docs/README.md | 33 +++ docs/babel.config.js | 3 + docs/blog/2019-05-28-hola.md | 11 + docs/blog/2019-05-29-hello-world.md | 17 ++ docs/blog/2019-05-30-welcome.md | 13 ++ docs/docs/basic-concepts/animations.mdx | 111 +++++++++ docs/docs/basic-concepts/colors.mdx | 108 +++++++++ docs/docs/basic-concepts/icons.mdx | 113 +++++++++ docs/docs/basic-concepts/intro.md | 139 +++++++++++ docs/docs/basic-concepts/shapes.mdx | 219 ++++++++++++++++++ docs/docs/basic-concepts/states.md | 121 ++++++++++ docs/docs/checkbox.mdx | 157 +++++++++++++ docs/docs/getting-started.md | 63 +++++ docs/docs/radio.md | 0 docs/docs/switch.md | 4 + docs/docusaurus.config.js | 98 ++++++++ docs/package.json | 38 +++ docs/sidebars.js | 21 ++ docs/src/components/IndeterminateCheckbox.js | 45 ++++ docs/src/components/ScaleMe.js | 29 +++ docs/src/css/custom.scss | 71 ++++++ docs/src/pages/index.js | 97 ++++++++ docs/src/pages/styles.module.css | 37 +++ docs/static/.nojekyll | 0 docs/static/img/favicon.ico | Bin 0 -> 3626 bytes docs/static/img/logo.svg | 1 + .../static/img/undraw_docusaurus_mountain.svg | 170 ++++++++++++++ docs/static/img/undraw_docusaurus_react.svg | 169 ++++++++++++++ docs/static/img/undraw_docusaurus_tree.svg | 1 + 32 files changed, 1913 insertions(+), 3 deletions(-) create mode 100644 .npmignore create mode 100644 docs/README.md create mode 100644 docs/babel.config.js create mode 100644 docs/blog/2019-05-28-hola.md create mode 100644 docs/blog/2019-05-29-hello-world.md create mode 100644 docs/blog/2019-05-30-welcome.md create mode 100644 docs/docs/basic-concepts/animations.mdx create mode 100644 docs/docs/basic-concepts/colors.mdx create mode 100644 docs/docs/basic-concepts/icons.mdx create mode 100644 docs/docs/basic-concepts/intro.md create mode 100644 docs/docs/basic-concepts/shapes.mdx create mode 100644 docs/docs/basic-concepts/states.md create mode 100644 docs/docs/checkbox.mdx create mode 100644 docs/docs/getting-started.md create mode 100644 docs/docs/radio.md create mode 100644 docs/docs/switch.md create mode 100644 docs/docusaurus.config.js create mode 100644 docs/package.json create mode 100644 docs/sidebars.js create mode 100644 docs/src/components/IndeterminateCheckbox.js create mode 100644 docs/src/components/ScaleMe.js create mode 100644 docs/src/css/custom.scss create mode 100644 docs/src/pages/index.js create mode 100644 docs/src/pages/styles.module.css create mode 100644 docs/static/.nojekyll create mode 100644 docs/static/img/favicon.ico create mode 100644 docs/static/img/logo.svg create mode 100644 docs/static/img/undraw_docusaurus_mountain.svg create mode 100644 docs/static/img/undraw_docusaurus_react.svg create mode 100644 docs/static/img/undraw_docusaurus_tree.svg diff --git a/.gitignore b/.gitignore index 36280e2..0918540 100644 --- a/.gitignore +++ b/.gitignore @@ -24,7 +24,6 @@ Desktop.ini # Temporary files coverage/ -docs tmp test @@ -32,4 +31,25 @@ test .log # Build -dist/ \ No newline at end of file +dist/ + +# Dependencies +/node_modules + +# Production +/build + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..bb0224d --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +.github/ diff --git a/README.md b/README.md index b772c9d..0b5dc69 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ Add `pretty-checkbox.min.css` in your html: ```html ``` diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..ee0ccc9 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,33 @@ +# Website + +This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ yarn start +``` + +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. + +### Build + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + +### Deployment + +``` +$ GIT_USER= USE_SSH=true yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/docs/babel.config.js b/docs/babel.config.js new file mode 100644 index 0000000..0adade1 --- /dev/null +++ b/docs/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/docs/blog/2019-05-28-hola.md b/docs/blog/2019-05-28-hola.md new file mode 100644 index 0000000..5552da1 --- /dev/null +++ b/docs/blog/2019-05-28-hola.md @@ -0,0 +1,11 @@ +--- +id: hola +title: Hola +author: Gao Wei +author_title: Docusaurus Core Team +author_url: https://github.com/wgao19 +author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 +tags: [hola, docusaurus] +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/docs/blog/2019-05-29-hello-world.md b/docs/blog/2019-05-29-hello-world.md new file mode 100644 index 0000000..3b33193 --- /dev/null +++ b/docs/blog/2019-05-29-hello-world.md @@ -0,0 +1,17 @@ +--- +id: hello-world +title: Hello +author: Endilie Yacop Sucipto +author_title: Maintainer of Docusaurus +author_url: https://github.com/endiliey +author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 +tags: [hello, docusaurus] +--- + +Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/). + + + +This is a test post. + +A whole bunch of other information. diff --git a/docs/blog/2019-05-30-welcome.md b/docs/blog/2019-05-30-welcome.md new file mode 100644 index 0000000..3b5affe --- /dev/null +++ b/docs/blog/2019-05-30-welcome.md @@ -0,0 +1,13 @@ +--- +id: welcome +title: Welcome +author: Yangshun Tay +author_title: Front End Engineer @ Facebook +author_url: https://github.com/yangshun +author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 +tags: [facebook, hello, docusaurus] +--- + +Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! + +Delete the whole directory if you don't want the blog features. As simple as that! diff --git a/docs/docs/basic-concepts/animations.mdx b/docs/docs/basic-concepts/animations.mdx new file mode 100644 index 0000000..4878f5c --- /dev/null +++ b/docs/docs/basic-concepts/animations.mdx @@ -0,0 +1,111 @@ +--- +id: animations +title: Animations +--- + +In terms of basic concepts we're at the end of the road folks. We've learned a lot about what pretty checkbox can do, now it's time to explore the crown jewel of the library: animations. + +
+ +
+ +Animations are broken into two categories: + +1. Animations that **only** work with images +2. Animations that work without images as well (i.e. universal animations) + +Possible values: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +## Universal Animations + +To recap, univeral animations are those that work with or without icons, svg, or images. There are two: + +1. `p-smooth` +2. `p-pulse` + +Add to the root div and they'll work like a charm! + +```html {1,8} +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +## Icon Animations + +Icon animations means these animations are compatbile with `p-svg`, `p-icon`, or `p-image`, There are three: + +1. `p-tada` +2. `p-jelly` +3. `p-rotate` + +```html {1,9,17} +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
diff --git a/docs/docs/basic-concepts/colors.mdx b/docs/docs/basic-concepts/colors.mdx new file mode 100644 index 0000000..1e8ada1 --- /dev/null +++ b/docs/docs/basic-concepts/colors.mdx @@ -0,0 +1,108 @@ +--- +id: colors +title: Colors +--- + +One of the more fun features of pretty checkbox is a wide range of built-in colors to make your controls _even more_ stylish (or to provide users with visual feedback, your choice 😆). + +
+ pretty colors +
+
+ +There are five colors and they can be used two ways: **solid** or **outline** + +## Solid Colors + +Like other selectors, colors are prefixed with `p-` and the the name of the color on `div.state`: + +```html {3} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Outline Colors + +Like solid colors, outline colors go on `div.state`, but with the _suffix_ `-o`. + +:::info +The nuisances of outline colors is easy to miss. The difference between solid and outlines colors is when we use the `-o` suffix we're _also_ changing the colors of the input control's border. +::: + +```html {3} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
diff --git a/docs/docs/basic-concepts/icons.mdx b/docs/docs/basic-concepts/icons.mdx new file mode 100644 index 0000000..e2c281e --- /dev/null +++ b/docs/docs/basic-concepts/icons.mdx @@ -0,0 +1,113 @@ +--- +id: icons +title: Icons +--- + +import { mdiCheck } from '@mdi/js'; + +Icon in tge generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three :tada: + +## Icons + +Using icons is easy as eating pie :pie:. It can be done in three easy steps: + +1. Add `p-icon` to the root div +2. Add your icon _before_ the `label` +3. Add an `icon` selector to the tag containing the icon font + +```html {1,4} +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
+ +### Supported Icon Libraries + +Pretty Checkbox has been tested with the following font icons libraries: + +- [Font Awesome](https://fontawesome.com/icons?from=io) +- [Bootstrap Glyphicons](http://fontawesome.io/icons/) +- [Material Icon (MDI)](https://materialdesignicons.com/) +- [Material Icon (ZMDI)](http://zavoloklom.github.io/material-design-iconic-font/icons.html) +- [Material Icon (Google)](https://material.io/icons) +- [Typeicons](http://www.typicons.com/) +- [Ion icons](http://ionicons.com/) + +## SVG + +Similar to icon, using SVG images requires the same three basic steps: + +1. Add `p-svg` to the root div +2. Add your svg _before_ the `label` +3. Add a `svg` selector to the tag containing the SVG element + +```html {1,4} +
+ +
+ + + + +
+
+``` + +
+ +
+ + + + +
+
+ +### Supported SVG Libraries + +- [UIKit](https://getuikit.com/docs/icon) +- [Feather Icons](https://feathericons.com/) + +## Images + +Last, but surely not least, images are supported, too: + +1. Add `p-image` to the root div +2. Add your svg _before_ the `label` +3. Add an `image` selector to the tag containing the `img` element + +```html {1,4} +
+ +
+ check + +
+
+``` + +
+ +
+ check + +
+
diff --git a/docs/docs/basic-concepts/intro.md b/docs/docs/basic-concepts/intro.md new file mode 100644 index 0000000..f143a8c --- /dev/null +++ b/docs/docs/basic-concepts/intro.md @@ -0,0 +1,139 @@ +--- +id: intro +title: Introduction +--- + +At the core of pretty checkbox are three input controls: + +1. Checkbox +2. Radio +3. Switch + +## Concepts + +Each input control uses CSS to mask, or hide, the actual `input` element. This means there are no real accessibility concerns when using using pretty checkbox to beautify 💅 our input controls. + +### Base `div` + +Each control is wrapped by a `div` that contains a class attribute with `pretty`: + +```html +
+``` + +To astute reader might notice `p-default`. This influences many things such as animations, colors, and possible styles that can be applied. We'll learn more about this later :smile: + +### Adding the `input` + +Remember that pretty checkbox _styles_ our `input` control, but we're still on the hook for adding it as a child of our base `div`: + +```html +
+ +
+``` + +`input` is complete hidden to the user via CSS. Inspecting the element we'll see the following styles applied: + +```css +.pretty { + position: relative; + /* truncated... */ +} +.pretty input { + position: absolute; + left: 0; + top: 0; + /* truncated... */ + opacity: 0; + cursor: pointer; +} +``` + +New to CSS? No worries. This effectively hides the `input` from the users by setting the `opacity` to `0`. What's nice here is we're not blocking functionality; our input still behaves like a checkbox. + +### Tieing it All Together + +The last stretch is adding an inner `div` with a class name of `state`. This contains the `label` used to render alongside the input control: + +:::warning Danger, Will Robinson! +Omitting the `label` prevents our pretty input from rendering completely. If you don't need a label add it to the DOM anyway without any content. + +```html +
+ +
+``` + +::: + +```html +
+ +
+ +
+
+``` + +Our `label` element is important. There's a lot of CSS work happening behind the scenes with this little element. By using a combination of `:before` to create the box before the label and `:after` to create the interior of the box, we create our pretty checkbox 😲 + +### Accessibility + +For the most part, pretty checkbox is accessible; however, it's always recommended to add `for` and `id` attributes: + +```html {2,4} +
+ +
+ +
+
+``` + +## Basic Usage + +### Checkbox + +A basic example of checkbox uses the `input` element with `type="checkbox"`: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` + +### Radio + +A basic example of radio uses the `input` element with `type="radio"` and to make our control round we can use the `p-round` selector: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` + +### Switch + +Switch can be used as either a radio or a checkbox – you can decide by changing the `type` attribute value from `checkbox` to `radio` (or vice versa). In the root `div` we need to replace `p-default` with `p-switch` to active switch styles: + +```jsx live +// note this is react code, do not use +// className or htmlFor attributes in regular HTML +
+ +
+ +
+
+``` diff --git a/docs/docs/basic-concepts/shapes.mdx b/docs/docs/basic-concepts/shapes.mdx new file mode 100644 index 0000000..dd82adc --- /dev/null +++ b/docs/docs/basic-concepts/shapes.mdx @@ -0,0 +1,219 @@ +--- +id: shapes-size +title: Shapes & Size +--- + +import { ScaleMe } from '../../src/components/ScaleMe'; + +Among the many features of pretty checkbox, shapes might be the most widely used 🤔 + +## Shapes + +:::info +The below section covers regular checkbox and radio usage. For switch check out the switch docs for available shapes :+1: +::: + +Pretty Checkbox offers three shapes that can be used by checkbox and radio controls: + +1. `p-square` (implicit) +2. `p-curve` +3. `p-round` + +add to the root `div` and see your control change! + +### Checkbox Shape + +```jsx live +
+ +
+ +
+
+``` + +### Radio Shape + +```jsx live +
+ +
+ +
+
+``` + +### Mix-n-Match Shapes + +There's no limitation with mix-n-matching shapes. We can create round checkboxes or square radio controls if we want: + +```html {1,7} +
+ +
+ +
+
+
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +### Switch Shapes + +Switch is different from checkbox and radio controls in terms of shapes. There three availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div. + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Fill Variants + +Fill variants change how the checkbox and radio controls are presented and there are two values that can be used in the root div: `p-fill` and `p-thick` + +```html {1,8} +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Size + +Pretty Checkbox is adaptable and can be scaled easily using `p-bigger` on the root div: + +```html {1} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+ +### Make it Big (or Tiny) + +Make it as big or as small as you need by using regular ol' CSS! Just add `font-size` to the root div: + +```html {1} +
+ +
+ +
+
+``` + + + +## Plain + +In some cases you might want to drop the border altogether. Pretty Checkbox has a style for that ✅, but it's best when using in conjunction with [icons](icons) and [animations](animations). + +```html {1,4} +
+ +
+ + +
+
+``` + +
+ +
+ + +
+
diff --git a/docs/docs/basic-concepts/states.md b/docs/docs/basic-concepts/states.md new file mode 100644 index 0000000..675b0fb --- /dev/null +++ b/docs/docs/basic-concepts/states.md @@ -0,0 +1,121 @@ +--- +id: states +title: States +--- + +Pretty Checkbox offers various states including `disabled`, something called "locked" state, and much more :smile: + +## Disabled + +Nothing fancy here, just add `disabled` to the `input` and pretty checkbox will take care of the rest :rocket: + +```jsx live +
+ +
+ +
+
+``` + +## Locked + +"Locked" state is a unique. Adding `p-locked` on the root div will _style_ the control as though it's not disabled, but will block user interaction. + +:::caution +Using `p-locked` might seem exciting, but there are accessibility concerns with using this. Seeing as this is a maintained fork of pretty checkbox it might be removed in the future. +::: + +```jsx live +
+ +
+ +
+
+``` + +## Focus + +Among the many states, we can add a bit of class when our control has focus. We can enable a pleasant `box-shadow` around the control by adding `p-has-focus` to the root div: + +```jsx live +
+ +
+ +
+
+``` + +## Hover + +Upon hover we can swap content using `p-has-hover` on the root div. Using this requires an extra `div` below `state`. The awesome part here is we can mix and match different styles between hovered and regular states 😎 + +```jsx live +
+ +
+ +
+
+ +
+
+``` + +## Toggle + +Pretty Checkbox allows you to show/hide different labels using nothing but CSS using `p-on` and `p-off` on the state div. By default `p-off` will be visible and upon checking `p-on` will become visible. + +```html {1,3,6} +
+ +
+ +
+
+ +
+
+``` + +
+ +
+ +
+
+ +
+
+ +### Toggle with Icons + +Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding! + +```html {1,3,7} +
+ +
+ + +
+
+ + +
+
+``` + +
+ +
+ + +
+
+ + +
+
diff --git a/docs/docs/checkbox.mdx b/docs/docs/checkbox.mdx new file mode 100644 index 0000000..f6f83da --- /dev/null +++ b/docs/docs/checkbox.mdx @@ -0,0 +1,157 @@ +--- +id: checkbox +title: Checkbox +--- + +import { IndeterminateCheckbox } from '../src/components/IndeterminateCheckbox'; + +The cornerstone of any UI component is probably the checkbox. Pretty Checkbox support checkoxes with a wide range of usage. Be sure to checkout the [basic concepts guide](basic-concepts/intro) for more info! + +## Basic Checkbox + +Our basic checkbox can take on three different shapes: square, `p-curve`, `p-round` + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Colors, Icon, and Animations + +Checkbox supports [colors](basic-concepts/colors), [icons](basic-concepts/icons), [animations](basic-concepts/animations). +There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +```html {1,8,16,24,32} +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ +
+
+ +## Indeterminate + +Pretty checkbox supports indeterminate states, too althoughn you'll need to use a little javascript to make this happen: + +```js +// checkbox: HTMLInputElement +// indeterminate: boolean +function toggleIndeterminate(checkbox, indeterminate) { + if (checkbox) { + checkbox.indeterminate = indeterminate; + + // don't forget a11y + checkbox.setAttribute( + 'aria-checked', + indeterminate ? 'mixed' : checkbox.checked + ); + } +} +``` + + diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md new file mode 100644 index 0000000..aeb6891 --- /dev/null +++ b/docs/docs/getting-started.md @@ -0,0 +1,63 @@ +--- +id: getting-started +title: Getting Started +sidebar_label: Getting Started +--- + +## Installation + +Download using `npm` or `yarn`: + +```sh +npm install @djthoms/pretty-checkbox # or +yarn add @djthoms/pretty-checkbox +``` + +### Modern Bundler Usage + +Pretty checkbox works well with modern bundlers such as parcel or webpack (via `css-loader`): + +```js +import 'pretty-checkbox'; + +// rest of your app +``` + +If you want to import the `scss` source you can do that, too: + +```js +import 'pretty-checkbox/src/pretty-checkbox.scss'; +``` + +### Sass Usage + +At the heart of Pretty Checkbox is Sass. If you're using `.sass` or `.scss` in your project you can import pretty checkbox there: + +:::info +`~` might not resolve to the `node_modules` directory. If this is the case then you need to reference the relative path to the `pretty-checkbox` installation. +::: + +```scss +@import '~/pretty-checkbox/src/pretty-checkbox'; +``` + +### Regular ol' HTML + +And of course you can use a CDN and embed in your html file using the `link` tag :wink: + +```html + +``` + +## Usage + +Once pretty checkbox styles have been added, just add a little bit of markup and we're in business 👩‍💻 + +```jsx live +
+ +
+ +
+
+``` diff --git a/docs/docs/radio.md b/docs/docs/radio.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/docs/switch.md b/docs/docs/switch.md new file mode 100644 index 0000000..13bafb6 --- /dev/null +++ b/docs/docs/switch.md @@ -0,0 +1,4 @@ +--- +id: switch +title: Switch +--- diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js new file mode 100644 index 0000000..d8ed633 --- /dev/null +++ b/docs/docusaurus.config.js @@ -0,0 +1,98 @@ +module.exports = { + title: 'Pretty Checkbox', + tagline: 'A pure css library to beautify checkbox and radio buttons.', + url: 'https://your-docusaurus-test-site.com', + baseUrl: '/', + onBrokenLinks: 'throw', + favicon: 'img/favicon.ico', + organizationName: 'atomicpages', // Usually your GitHub org/user name. + projectName: 'pretty-checkbox', // Usually your repo name. + stylesheets: [ + 'https://unpkg.com/@djthoms/pretty-checkbox@3.0.4/dist/pretty-checkbox.min.css', + 'https://cdn.materialdesignicons.com/5.5.55/css/materialdesignicons.min.css', + ], + themes: ['@docusaurus/theme-live-codeblock'], + plugins: ['docusaurus-plugin-sass'], + themeConfig: { + navbar: { + title: 'Pretty Checkbox', + logo: { + alt: 'Pretty Checkbox Logo', + src: 'img/logo.svg', + }, + items: [ + { + to: 'docs/', + activeBasePath: 'docs', + label: 'Docs', + position: 'left', + }, + { to: 'blog', label: 'Blog', position: 'left' }, + { + href: 'https://github.com/atomicpages/pretty-checkbox', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Style Guide', + to: 'docs/', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/pretty-checkbox', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Blog', + to: 'blog', + }, + { + label: 'GitHub', + href: 'https://github.com/facebook/docusaurus', + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} Dennis Thompson. Built with Docusaurus.`, + }, + }, + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + // It is recommended to set document id as docs home page (`docs/` path). + homePageId: 'getting-started', + sidebarPath: require.resolve('./sidebars.js'), + // Please change this to your repo. + editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', + }, + blog: { + showReadingTime: true, + // Please change this to your repo. + editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/', + }, + theme: { + customCss: require.resolve('./src/css/custom.scss'), + }, + }, + ], + ], +}; diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..0cac504 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,38 @@ +{ + "name": "docs", + "version": "0.0.0", + "private": true, + "scripts": { + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "serve": "docusaurus serve" + }, + "dependencies": { + "@docusaurus/core": "^2.0.0-alpha.61", + "@docusaurus/preset-classic": "^2.0.0-alpha.61", + "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.61", + "@mdi/js": "^5.5.55", + "@mdi/react": "^1.4.0", + "@mdx-js/react": "^1.5.8", + "clsx": "^1.1.1", + "docusaurus-plugin-sass": "^0.1.9", + "react": "^16.8.4", + "react-dom": "^16.8.4" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "prettier": "../node_modules/@djthoms/prettier-config" +} diff --git a/docs/sidebars.js b/docs/sidebars.js new file mode 100644 index 0000000..29b2aa0 --- /dev/null +++ b/docs/sidebars.js @@ -0,0 +1,21 @@ +module.exports = { + someSidebar: { + Guides: [ + 'getting-started', + { + type: 'category', + label: 'Basic Concepts', + items: [ + 'basic-concepts/intro', + 'basic-concepts/colors', + 'basic-concepts/shapes-size', + 'basic-concepts/states', + 'basic-concepts/icons', + 'basic-concepts/animations', + ], + }, + 'checkbox', + 'switch', + ], + }, +}; diff --git a/docs/src/components/IndeterminateCheckbox.js b/docs/src/components/IndeterminateCheckbox.js new file mode 100644 index 0000000..7e59605 --- /dev/null +++ b/docs/src/components/IndeterminateCheckbox.js @@ -0,0 +1,45 @@ +import React from 'react'; + +export const IndeterminateCheckbox = () => { + const ref = React.useRef(null); + const [indeterminate, setIndeterminate] = React.useState(); + + React.useEffect(() => { + if (ref.current) { + ref.current.indeterminate = indeterminate; + } + }, [indeterminate]); + + return ( + <> +
+ { + const { checked } = e.currentTarget; + + setIndeterminate(false); + // prob should go full controlled here, but it's late + e.currentTarget.setAttribute('aria-checked', checked); + }, [])} + /> +
+ + +
+
+ + +
+
+ + + ); +}; diff --git a/docs/src/components/ScaleMe.js b/docs/src/components/ScaleMe.js new file mode 100644 index 0000000..948f444 --- /dev/null +++ b/docs/src/components/ScaleMe.js @@ -0,0 +1,29 @@ +import React from 'react'; + +export const ScaleMe = () => { + const [size, setSize] = React.useState(14); + + return ( + <> +
+ +
+ +
+
+
+ { + setSize(parseInt(e.currentTarget.value)); + }, [])} + /> + + + ); +}; diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss new file mode 100644 index 0000000..db514f3 --- /dev/null +++ b/docs/src/css/custom.scss @@ -0,0 +1,71 @@ +@import '../../../src/scss/variables'; + +/* stylelint-disable docusaurus/copyright-header */ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: rgb(33, 175, 144); + --ifm-color-primary-darker: rgb(31, 165, 136); + --ifm-color-primary-darkest: rgb(26, 136, 112); + --ifm-color-primary-light: rgb(70, 203, 174); + --ifm-color-primary-lighter: rgb(102, 212, 189); + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-code-font-size: 95%; +} + +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +header.hero { + color: #fff; + background: linear-gradient(270deg, #124665, #8033b0); + border-bottom: 5px solid #75b7dd; + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 0; + opacity: 0.4; + background-image: url('data:image/svg+xml;charset=utf-8,'); + } + .container { + z-index: 10; + } +} + +.color-preview { + display: inline-block; + width: 1em; + height: 1em; + border-radius: 100%; + margin: 0 2px; + + &.primary { + background-color: $pretty--color-primary; + } + &.info { + background-color: $pretty--color-info; + } + &.success { + background-color: $pretty--color-success; + } + &.warning { + background-color: $pretty--color-warning; + } + &.danger { + background-color: $pretty--color-danger; + } +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js new file mode 100644 index 0000000..2432853 --- /dev/null +++ b/docs/src/pages/index.js @@ -0,0 +1,97 @@ +import React from 'react'; +import clsx from 'clsx'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './styles.module.css'; + +const features = [ + { + title: <>Easy to Use, + imageUrl: 'img/undraw_docusaurus_mountain.svg', + description: ( + <> + Docusaurus was designed from the ground up to be easily installed and used to get + your website up and running quickly. + + ), + }, + { + title: <>Focus on What Matters, + imageUrl: 'img/undraw_docusaurus_tree.svg', + description: ( + <> + Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and + move your docs into the docs directory. + + ), + }, + { + title: <>Powered by React, + imageUrl: 'img/undraw_docusaurus_react.svg', + description: ( + <> + Extend or customize your website layout by reusing React. Docusaurus can be extended + while reusing the same header and footer. + + ), + }, +]; + +function Feature({ imageUrl, title, description }) { + const imgUrl = useBaseUrl(imageUrl); + return ( +
+ {imgUrl && ( +
+ {title} +
+ )} +

{title}

+

{description}

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

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + Get Started + +
+
+
+
+ {features && features.length > 0 && ( +
+
+
+ {features.map((props, idx) => ( + + ))} +
+
+
+ )} +
+ + ); +} + +export default Home; diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css new file mode 100644 index 0000000..4ef126c --- /dev/null +++ b/docs/src/pages/styles.module.css @@ -0,0 +1,37 @@ +/* stylelint-disable docusaurus/copyright-header */ + +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} + +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureImage { + height: 200px; + width: 200px; +} diff --git a/docs/static/.nojekyll b/docs/static/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..c01d54bcd39a5f853428f3cd5aa0f383d963c484 GIT binary patch literal 3626 zcmb`Je@s(X6vrR`EK3%b%orErlDW({vnABqA zcfaS{d+xbU5JKp0*;0YOg+;Fl!eT)XRuapIwFLL`=imZCSon$`se`_<%@MB=M~KG+ z=EW^FL`w|Bo>*ktlaS^(fut!95`iG5u=SZ8nfDHO#GaTlH1-XG^;vsjUb^gWTVz0+ z^=WR1wv9-2oeR=_;fL0H7rNWqAzGtO(D;`~cX(RcN0w2v24Y8)6t`cS^_ghs`_ho? z{0ka~1Dgo8TfAP$r*ua?>$_V+kZ!-(TvEJ7O2f;Y#tezt$&R4 zLI}=-y@Z!grf*h3>}DUL{km4R>ya_I5Ag#{h_&?+HpKS!;$x3LC#CqUQ8&nM?X))Q zXAy2?`YL4FbC5CgJu(M&Q|>1st8XXLZ|5MgwgjP$m_2Vt0(J z&Gu7bOlkbGzGm2sh?X`){7w69Y$1#@P@7DF{ZE=4%T0NDS)iH`tiPSKpDNW)zmtn( zw;4$f>k)4$LBc>eBAaTZeCM2(iD+sHlj!qd z2GjRJ>f_Qes(+mnzdA^NH?^NB(^o-%Gmg$c8MNMq&`vm@9Ut;*&$xSD)PKH{wBCEC z4P9%NQ;n2s59ffMn8*5)5AAg4-93gBXBDX`A7S& zH-|%S3Wd%T79fk-e&l`{!?lve8_epXhE{d3Hn$Cg!t=-4D(t$cK~7f&4s?t7wr3ZP z*!SRQ-+tr|e1|hbc__J`k3S!rMy<0PHy&R`v#aJv?`Y?2{avK5sQz%=Us()jcNuZV z*$>auD4cEw>;t`+m>h?f?%VFJZj8D|Y1e_SjxG%J4{-AkFtT2+ZZS5UScS~%;dp!V>)7zi`w(xwSd*FS;Lml=f6hn#jq)2is4nkp+aTrV?)F6N z>DY#SU0IZ;*?Hu%tSj4edd~kYNHMFvS&5}#3-M;mBCOCZL3&;2obdG?qZ>rD|zC|Lu|sny76pn2xl|6sk~Hs{X9{8iBW zwiwgQt+@hi`FYMEhX2 \ No newline at end of file diff --git a/docs/static/img/undraw_docusaurus_mountain.svg b/docs/static/img/undraw_docusaurus_mountain.svg new file mode 100644 index 0000000..431cef2 --- /dev/null +++ b/docs/static/img/undraw_docusaurus_mountain.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/img/undraw_docusaurus_react.svg b/docs/static/img/undraw_docusaurus_react.svg new file mode 100644 index 0000000..e417050 --- /dev/null +++ b/docs/static/img/undraw_docusaurus_react.svg @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/img/undraw_docusaurus_tree.svg b/docs/static/img/undraw_docusaurus_tree.svg new file mode 100644 index 0000000..a05cc03 --- /dev/null +++ b/docs/static/img/undraw_docusaurus_tree.svg @@ -0,0 +1 @@ +docu_tree \ No newline at end of file From fb0c56714eec02e1b3b358dfca07c1c3076c704e Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 19:43:59 -0700 Subject: [PATCH 08/23] docs(:pencil:) Docs docs docs - Updating colors - Finalizing docs - Giving some love --- docs/blog/2019-05-28-hola.md | 11 -- docs/blog/2019-05-29-hello-world.md | 17 --- docs/blog/2019-05-30-welcome.md | 13 -- docs/docs/basic-concepts/shapes.mdx | 2 +- docs/docs/basic-concepts/states.md | 84 +++++++++++- docs/docs/checkbox.mdx | 68 +++++++++- docs/docs/getting-started.md | 30 +++-- docs/docs/radio.md | 196 ++++++++++++++++++++++++++++ docs/docs/sass-customize.md | 122 +++++++++++++++++ docs/docs/switch.md | 102 +++++++++++++++ docs/docusaurus.config.js | 33 ++--- docs/sidebars.js | 38 +++--- docs/src/css/custom.scss | 32 +++-- 13 files changed, 634 insertions(+), 114 deletions(-) delete mode 100644 docs/blog/2019-05-28-hola.md delete mode 100644 docs/blog/2019-05-29-hello-world.md delete mode 100644 docs/blog/2019-05-30-welcome.md create mode 100644 docs/docs/sass-customize.md diff --git a/docs/blog/2019-05-28-hola.md b/docs/blog/2019-05-28-hola.md deleted file mode 100644 index 5552da1..0000000 --- a/docs/blog/2019-05-28-hola.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -id: hola -title: Hola -author: Gao Wei -author_title: Docusaurus Core Team -author_url: https://github.com/wgao19 -author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 -tags: [hola, docusaurus] ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/docs/blog/2019-05-29-hello-world.md b/docs/blog/2019-05-29-hello-world.md deleted file mode 100644 index 3b33193..0000000 --- a/docs/blog/2019-05-29-hello-world.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -id: hello-world -title: Hello -author: Endilie Yacop Sucipto -author_title: Maintainer of Docusaurus -author_url: https://github.com/endiliey -author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 -tags: [hello, docusaurus] ---- - -Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/). - - - -This is a test post. - -A whole bunch of other information. diff --git a/docs/blog/2019-05-30-welcome.md b/docs/blog/2019-05-30-welcome.md deleted file mode 100644 index 3b5affe..0000000 --- a/docs/blog/2019-05-30-welcome.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: welcome -title: Welcome -author: Yangshun Tay -author_title: Front End Engineer @ Facebook -author_url: https://github.com/yangshun -author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 -tags: [facebook, hello, docusaurus] ---- - -Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! - -Delete the whole directory if you don't want the blog features. As simple as that! diff --git a/docs/docs/basic-concepts/shapes.mdx b/docs/docs/basic-concepts/shapes.mdx index dd82adc..a276866 100644 --- a/docs/docs/basic-concepts/shapes.mdx +++ b/docs/docs/basic-concepts/shapes.mdx @@ -77,7 +77,7 @@ There's no limitation with mix-n-matching shapes. We can create round checkboxes ### Switch Shapes -Switch is different from checkbox and radio controls in terms of shapes. There three availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div. +Switch is different from checkbox and radio controls in terms of shapes. There are three shapes availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div. ```html {1,8,15}
diff --git a/docs/docs/basic-concepts/states.md b/docs/docs/basic-concepts/states.md index 675b0fb..39fe4aa 100644 --- a/docs/docs/basic-concepts/states.md +++ b/docs/docs/basic-concepts/states.md @@ -90,11 +90,41 @@ Pretty Checkbox allows you to show/hide different labels using nothing but CSS u
-### Toggle with Icons +### Without Border -Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding! +Using `p-plain` to skip the border: -```html {1,3,7} +```html {1} +
+ +
+ + +
+
+ + +
+
+``` + +
+ +
+ + +
+
+ + +
+
+ +### Mo' Toggle + +Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding! Make it extra fancy by adding [colors](colors), too! + +```html {1,13,25}
@@ -106,6 +136,30 @@ Mix n' match icons with toggle, just be sure you review the [icons](icons) guide
+ +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
```
@@ -119,3 +173,27 @@ Mix n' match icons with toggle, just be sure you review the [icons](icons) guide
+ +
+ +
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+
diff --git a/docs/docs/checkbox.mdx b/docs/docs/checkbox.mdx index f6f83da..3a81a61 100644 --- a/docs/docs/checkbox.mdx +++ b/docs/docs/checkbox.mdx @@ -136,9 +136,9 @@ There are five animations classes available that can be added to the root div: ` ## Indeterminate -Pretty checkbox supports indeterminate states, too althoughn you'll need to use a little javascript to make this happen: +Pretty checkbox supports indeterminate states, too although you'll need to use a little javascript to make this happen: -```js +```js title="toggleIndeterminate.js" // checkbox: HTMLInputElement // indeterminate: boolean function toggleIndeterminate(checkbox, indeterminate) { @@ -146,12 +146,68 @@ function toggleIndeterminate(checkbox, indeterminate) { checkbox.indeterminate = indeterminate; // don't forget a11y - checkbox.setAttribute( - 'aria-checked', - indeterminate ? 'mixed' : checkbox.checked - ); + checkbox.setAttribute('aria-checked', indeterminate ? 'mixed' : checkbox.checked); } } ``` +### Indeterminates with React + +One way we can make this work is by exposing an `indeterminate` prop and passing a `ref` to the `HTMLInputElement`, the main point here is we want our effect to run whenever `indeterminate` changes: + +```jsx title="Checkbox.jsx" +import React from 'react'; + +function Checkbox({ children, indeterminate, color = '', className = '', ...rest }) { + const ref = React.useRef(null); + + React.useEffect(() => { + if (ref.current) { + ref.current.indeterminate = indeterminate; + } + }, [indeterminate]); + + return ( +
+ +
+ +
+
+ ); +} +``` + + +### Indeterminates with React Class + +Not on the hooks train yet 🚂 ? No biggie. Just remember we can register side effects in `componentDidMount` since it's called whenever props or state changes :wink: + +```jsx title="Checkbox.jsx" +import React from 'react'; + +export class Checkbox extends React.Component { + constructor(props) { + super(props); + this.ref = React.createRef(); + } + + componentDidMount() { + if (this.ref.current) { + this.ref.current.indeterminate = this.props.indeterminate; + } + } + + render() { + return ( +
+ +
+ +
+
+ ); + } +} +``` diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index aeb6891..57b283d 100644 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -18,7 +18,7 @@ yarn add @djthoms/pretty-checkbox Pretty checkbox works well with modern bundlers such as parcel or webpack (via `css-loader`): ```js -import 'pretty-checkbox'; +import '@djthoms/pretty-checkbox'; // rest of your app ``` @@ -26,7 +26,7 @@ import 'pretty-checkbox'; If you want to import the `scss` source you can do that, too: ```js -import 'pretty-checkbox/src/pretty-checkbox.scss'; +import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; ``` ### Sass Usage @@ -38,7 +38,7 @@ At the heart of Pretty Checkbox is Sass. If you're using `.sass` or `.scss` in y ::: ```scss -@import '~/pretty-checkbox/src/pretty-checkbox'; +@import '~@djthoms/pretty-checkbox/src/pretty-checkbox'; ``` ### Regular ol' HTML @@ -54,10 +54,24 @@ And of course you can use a CDN and embed in your html file using the `link` tag Once pretty checkbox styles have been added, just add a little bit of markup and we're in business 👩‍💻 ```jsx live -
- -
- +<> +
+ +
+ +
-
+
+ +
+ +
+
+
+ +
+ +
+
+ ``` diff --git a/docs/docs/radio.md b/docs/docs/radio.md index e69de29..6676714 100644 --- a/docs/docs/radio.md +++ b/docs/docs/radio.md @@ -0,0 +1,196 @@ +--- +id: radio +title: Radio +--- + +Radio controls are another all-important input control that is widespread in the wild. Be sure to checkout the [basic concepts guide](basic-concepts/intro) for more info! + +## Basic Radio + +Our basic checkbox can take on three different shapes: square, `p-curve`, `p-round` (although round makes the most sense): + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +## Colors, Icon, and Animations + +Radio supports [colors](basic-concepts/colors), [icons](basic-concepts/icons), [animations](basic-concepts/animations). +There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. + +```html {1,8,16,24,32} +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +## Radio Groups + +For accessibility reasons, it's ideal if we wrap our radio controls in a `fieldset` or another wrapping container with the [correct ARIA roles](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html). + +```html +
+ Pizza Crust +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+``` + +
+ Pizza Crust +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +## Accessibility + +As mentioned before, PCR excels because it leverages built-in components instead of creating soft controls. Patterns such as roving focus/selection, space bar selection, etc. are all given to us _for free_ because we're using **real** checkbox components. Take our pizza crust selection example above: + +- You can select using the space bar +- You can use your left/right arrow keys +- You can use your up/down arrow keys +- Selection cycles between elements when arrow keys are used diff --git a/docs/docs/sass-customize.md b/docs/docs/sass-customize.md new file mode 100644 index 0000000..f8c7a0b --- /dev/null +++ b/docs/docs/sass-customize.md @@ -0,0 +1,122 @@ +--- +id: sass-customize +title: Sass Customize +--- + +Pretty Checkbox is built with [Sass](https://sass-lang.com/). While the particular of transpiling sass to css varies from project-to-project, the recommendation is to use the latest version of [dart-sass](https://www.npmjs.com/package/sass). + +## Variables + +Customize using these handy variables! + +```scss +// not digging the name? Change it! +$pretty--class-name: pretty; + +// customize the colors added to .state +$pretty--color-default: #bdc3c7; +$pretty--color-primary: #428bca; +$pretty--color-info: #5bc0de; +$pretty--color-success: #5cb85c; +$pretty--color-warning: #f0ad4e; +$pretty--color-danger: #d9534f; +$pretty--color-dark: #5a656b; + +// uh, boring z-index stuff, who cares. +$pretty--z-index-back: 0; +$pretty--z-index-between: 1; +$pretty--z-index-front: 2; + +// nobody will change this. +$pretty--debug: false; +$pretty--dev-err: 'Invalid input type!'; +``` + +## Imports + +```scss +// REQUIRED +@import '~@djthoms/pretty-checkbox/scss/variables'; +@import '~@djthoms/pretty-checkbox/scss/core'; + +// OPTIONALS +// fill variants +@import '~@djthoms/pretty-checkbox/scss/elements/default/fill'; +@import '~@djthoms/pretty-checkbox/scss/elements/default/outline'; +@import '~@djthoms/pretty-checkbox/scss/elements/default/thick'; + +// p-icon imports +@import '~@djthoms/pretty-checkbox/scss/elements/font-icon/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/svg/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/image/general'; + +// p-switch imports +@import '~@djthoms/pretty-checkbox/scss/elements/switch/general'; +@import '~@djthoms/pretty-checkbox/scss/elements/switch/fill'; +@import '~@djthoms/pretty-checkbox/scss/elements/switch/slim'; + +// colors +@import '~@djthoms/pretty-checkbox/scss/extras/colors'; + +// animations +@import '~@djthoms/pretty-checkbox/scss/extras/animation'; + +// shapes and style variants +@import '~@djthoms/pretty-checkbox/scss/extras/plain'; +@import '~@djthoms/pretty-checkbox/scss/extras/round'; +@import '~@djthoms/pretty-checkbox/scss/extras/curve'; + +// disabled & locked +@import '~@djthoms/pretty-checkbox/scss/extras/disabled'; +@import '~@djthoms/pretty-checkbox/scss/extras/locked'; + +// extras +@import '~@djthoms/pretty-checkbox/scss/extras/toggle'; +@import '~@djthoms/pretty-checkbox/scss/extras/print'; + +// states +@import '~@djthoms/pretty-checkbox/scss/states/hover'; +@import '~@djthoms/pretty-checkbox/scss/states/focus'; + +// indeterminate +@import '~@djthoms/pretty-checkbox/scss/states/indeterminate'; +``` + +## Webpack, Parcel, & Create React App + +Good news for Parcel, CRA, and `react-scripts` users. Sass is transpiled for you without any extra config required :tada:. + +For webpack it's recommended to use [`mini-css-extract-plugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/#root) alongside `sass-loader` and `sass`. A config might look like this for webpack 4+ + +:::info +`~` module resolution is supported by default with `sass-loader` and webpack 4+. [Read more about sass-loader in the webpack docs](https://webpack.js.org/loaders/sass-loader/#webpackimporter) +::: + +```sh title="setup" +npm i sass sass-loader mini-css-extract-plugin -D +``` + +```js title="webpack.config.js" +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'sass-loader', + options: { + implementation: require('sass'), + }, + }, + ], + }, + ], + }, +}; +``` diff --git a/docs/docs/switch.md b/docs/docs/switch.md index 13bafb6..a53ef73 100644 --- a/docs/docs/switch.md +++ b/docs/docs/switch.md @@ -2,3 +2,105 @@ id: switch title: Switch --- + +Switch was briefly at various points in the doc; however, it certainly deserves a its own page so you know how to give your app that mobile-like vibe 📱. + +## Basic Switch + +:::caution +Switch is not compatible with `p-default` or `p-icon` +::: + +Similar to Checkbox and Radio, switch contains a similar DOM structure, but we use `p-switch` instead of the default style with `p-default`: + +```html {1} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+ +## Shapes & Colors + +:::caution +Switch is not compatible with [outline colors](basic-concepts/colors) +::: + +Switch has three unique shapes that can be used: `p-outline`, `p-fill`, and `p-slim`. + +```html {1,8,15} +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +## Usage as Radio + +Switch can be used as a checkbox or as a radio – just change the input `type` value to `radio`: + +```html {2} +
+ +
+ +
+
+``` + +
+ +
+ +
+
+
+ +
+ +
+
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index d8ed633..9cb3b5f 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -27,7 +27,6 @@ module.exports = { label: 'Docs', position: 'left', }, - { to: 'blog', label: 'Blog', position: 'left' }, { href: 'https://github.com/atomicpages/pretty-checkbox', label: 'GitHub', @@ -42,35 +41,30 @@ module.exports = { title: 'Docs', items: [ { - label: 'Style Guide', + label: 'Getting Started', to: 'docs/', }, - ], - }, - { - title: 'Community', - items: [ { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/pretty-checkbox', - }, + label: 'Basic Concepts', + to: 'docs/basic-concepts/intro/' + } ], }, { title: 'More', items: [ { - label: 'Blog', - to: 'blog', + label: 'GitHub', + href: 'https://github.com/atomicpages/pretty-checkbox', }, { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', + label: 'Inspired by the original pretty checkbox', + href: 'https://lokesh-coder.github.io/pretty-checkbox/', }, ], }, ], - copyright: `Copyright © ${new Date().getFullYear()} Dennis Thompson. Built with Docusaurus.`, + copyright: `Made with \u2665 by Dennis Thompson \uFF5C © ${new Date().getFullYear()} \uFF5C Built with Docusaurus.`, }, }, presets: [ @@ -78,16 +72,9 @@ module.exports = { '@docusaurus/preset-classic', { docs: { - // It is recommended to set document id as docs home page (`docs/` path). homePageId: 'getting-started', sidebarPath: require.resolve('./sidebars.js'), - // Please change this to your repo. - editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', - }, - blog: { - showReadingTime: true, - // Please change this to your repo. - editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/', + editUrl: 'https://github.com/atomicpages/pretty-checkbox/edit/master/docs/', }, theme: { customCss: require.resolve('./src/css/custom.scss'), diff --git a/docs/sidebars.js b/docs/sidebars.js index 29b2aa0..96749a4 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -1,21 +1,21 @@ module.exports = { - someSidebar: { - Guides: [ - 'getting-started', - { - type: 'category', - label: 'Basic Concepts', - items: [ - 'basic-concepts/intro', - 'basic-concepts/colors', - 'basic-concepts/shapes-size', - 'basic-concepts/states', - 'basic-concepts/icons', - 'basic-concepts/animations', - ], - }, - 'checkbox', - 'switch', - ], - }, + sidebar: [ + 'getting-started', + { + type: 'category', + label: 'Basic Concepts', + items: [ + 'basic-concepts/intro', + 'basic-concepts/colors', + 'basic-concepts/shapes-size', + 'basic-concepts/states', + 'basic-concepts/icons', + 'basic-concepts/animations', + ], + }, + 'checkbox', + 'radio', + 'switch', + 'sass-customize' + ], }; diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss index db514f3..ef4b9f6 100644 --- a/docs/src/css/custom.scss +++ b/docs/src/css/custom.scss @@ -1,21 +1,15 @@ @import '../../../src/scss/variables'; /* stylelint-disable docusaurus/copyright-header */ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ -/* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: rgb(33, 175, 144); - --ifm-color-primary-darker: rgb(31, 165, 136); - --ifm-color-primary-darkest: rgb(26, 136, 112); - --ifm-color-primary-light: rgb(70, 203, 174); - --ifm-color-primary-lighter: rgb(102, 212, 189); - --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-color-primary: #8d38c2; + --ifm-color-primary-dark: #7f32af; + --ifm-color-primary-darker: #7830a5; + --ifm-color-primary-darkest: #632788; + --ifm-color-primary-light: #9949ca; + --ifm-color-primary-lighter: #9e52cd; + --ifm-color-primary-lightest: #ae6fd6; --ifm-code-font-size: 95%; } @@ -69,3 +63,15 @@ header.hero { background-color: $pretty--color-danger; } } + +html[data-theme="dark"] { + a > code { + color: var(--ifm-color-primary-lightest); + } +} + +html[data-theme="light"] { + a > code { + color: var(--ifm-color-primary-darkest); + } +} From 81ba16f4afd7f68aa24c05b66b2f847bd48cf57b Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 22:56:19 -0700 Subject: [PATCH 09/23] docs(:pencil:) Docs docs docs --- docs/docs/radio.md | 2 +- docs/docusaurus.config.js | 18 +- docs/src/css/custom.scss | 7 +- docs/src/pages/index.js | 24 +-- docs/static/img/favicon.ico | Bin 3626 -> 204926 bytes docs/static/img/logo.svg | 14 +- docs/static/img/preview.gif | Bin 0 -> 97148 bytes .../static/img/undraw_docusaurus_mountain.svg | 170 ------------------ docs/static/img/undraw_docusaurus_react.svg | 169 ----------------- docs/static/img/undraw_docusaurus_tree.svg | 1 - 10 files changed, 48 insertions(+), 357 deletions(-) create mode 100644 docs/static/img/preview.gif delete mode 100644 docs/static/img/undraw_docusaurus_mountain.svg delete mode 100644 docs/static/img/undraw_docusaurus_react.svg delete mode 100644 docs/static/img/undraw_docusaurus_tree.svg diff --git a/docs/docs/radio.md b/docs/docs/radio.md index 6676714..eae1226 100644 --- a/docs/docs/radio.md +++ b/docs/docs/radio.md @@ -34,7 +34,7 @@ Our basic checkbox can take on three different shapes: square, `p-curve`, `p-rou
-
+
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 9cb3b5f..63ef599 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -14,6 +14,20 @@ module.exports = { themes: ['@docusaurus/theme-live-codeblock'], plugins: ['docusaurus-plugin-sass'], themeConfig: { + // switchConfig: { + // darkIcon: '🌙', + // darkIconStyle: { + // marginLeft: '2px', + // }, + // lightIcon: '\u2600', + // lightIconStyle: { + // marginLeft: '1px', + // }, + // }, + prism: { + theme: require('prism-react-renderer/themes/github'), + darkTheme: require('prism-react-renderer/themes/palenight'), + }, navbar: { title: 'Pretty Checkbox', logo: { @@ -46,8 +60,8 @@ module.exports = { }, { label: 'Basic Concepts', - to: 'docs/basic-concepts/intro/' - } + to: 'docs/basic-concepts/intro/', + }, ], }, { diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss index ef4b9f6..4aa30a3 100644 --- a/docs/src/css/custom.scss +++ b/docs/src/css/custom.scss @@ -64,14 +64,17 @@ header.hero { } } -html[data-theme="dark"] { +html[data-theme='dark'] { a > code { color: var(--ifm-color-primary-lightest); } } -html[data-theme="light"] { +html[data-theme='light'] { a > code { color: var(--ifm-color-primary-darkest); } + .docusaurus-highlight-code-line { + background-color: #fffbdd; + } } diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 2432853..a3d0c84 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -4,36 +4,34 @@ import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import preview from '../../static/img/preview.gif'; import styles from './styles.module.css'; const features = [ { title: <>Easy to Use, - imageUrl: 'img/undraw_docusaurus_mountain.svg', description: ( <> - Docusaurus was designed from the ground up to be easily installed and used to get - your website up and running quickly. + Simple CSS selectors makes pretty checkbox a breeze to use. Mix- n' match colors, + animations, and icons to create your perfect checkbox, radio, or switch control. ), }, { - title: <>Focus on What Matters, - imageUrl: 'img/undraw_docusaurus_tree.svg', + title: <>Customization Ready, description: ( <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and - move your docs into the docs directory. + Pretty Checkbox is powered by Sass and allows you to easily customize colors so it + integrates nicely into your design system. ), }, { - title: <>Powered by React, - imageUrl: 'img/undraw_docusaurus_react.svg', + title: <>Powered by HTML, description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can be extended - while reusing the same header and footer. + Pretty Checkbox is not a soft control. All inputs are powered by regular HTML which + means it's accessible by default. Show all users of the world-wide web some love ❤️ ), }, @@ -41,6 +39,7 @@ const features = [ function Feature({ imageUrl, title, description }) { const imgUrl = useBaseUrl(imageUrl); + return (
{imgUrl && ( @@ -89,6 +88,9 @@ function Home() {
)} +
+ preview +
); diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico index c01d54bcd39a5f853428f3cd5aa0f383d963c484..c0145b64e74426b0fe793129445d8b3ef2b35f55 100644 GIT binary patch literal 204926 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 VIDFrfSN?_L@pABqA zcfaS{d+xbU5JKp0*;0YOg+;Fl!eT)XRuapIwFLL`=imZCSon$`se`_<%@MB=M~KG+ z=EW^FL`w|Bo>*ktlaS^(fut!95`iG5u=SZ8nfDHO#GaTlH1-XG^;vsjUb^gWTVz0+ z^=WR1wv9-2oeR=_;fL0H7rNWqAzGtO(D;`~cX(RcN0w2v24Y8)6t`cS^_ghs`_ho? z{0ka~1Dgo8TfAP$r*ua?>$_V+kZ!-(TvEJ7O2f;Y#tezt$&R4 zLI}=-y@Z!grf*h3>}DUL{km4R>ya_I5Ag#{h_&?+HpKS!;$x3LC#CqUQ8&nM?X))Q zXAy2?`YL4FbC5CgJu(M&Q|>1st8XXLZ|5MgwgjP$m_2Vt0(J z&Gu7bOlkbGzGm2sh?X`){7w69Y$1#@P@7DF{ZE=4%T0NDS)iH`tiPSKpDNW)zmtn( zw;4$f>k)4$LBc>eBAaTZeCM2(iD+sHlj!qd z2GjRJ>f_Qes(+mnzdA^NH?^NB(^o-%Gmg$c8MNMq&`vm@9Ut;*&$xSD)PKH{wBCEC z4P9%NQ;n2s59ffMn8*5)5AAg4-93gBXBDX`A7S& zH-|%S3Wd%T79fk-e&l`{!?lve8_epXhE{d3Hn$Cg!t=-4D(t$cK~7f&4s?t7wr3ZP z*!SRQ-+tr|e1|hbc__J`k3S!rMy<0PHy&R`v#aJv?`Y?2{avK5sQz%=Us()jcNuZV z*$>auD4cEw>;t`+m>h?f?%VFJZj8D|Y1e_SjxG%J4{-AkFtT2+ZZS5UScS~%;dp!V>)7zi`w(xwSd*FS;Lml=f6hn#jq)2is4nkp+aTrV?)F6N z>DY#SU0IZ;*?Hu%tSj4edd~kYNHMFvS&5}#3-M;mBCOCZL3&;2obdG?qZ>rD|zC|Lu|sny76pn2xl|6sk~Hs{X9{8iBW zwiwgQt+@hi`FYMEhX2 \ No newline at end of file + + + Artboard + + + + + + + + + + \ No newline at end of file diff --git a/docs/static/img/preview.gif b/docs/static/img/preview.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6130703e97a18553d9031ac719b9cc54b0e3e9d GIT binary patch literal 97148 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/static/img/undraw_docusaurus_react.svg b/docs/static/img/undraw_docusaurus_react.svg deleted file mode 100644 index e417050..0000000 --- a/docs/static/img/undraw_docusaurus_react.svg +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/static/img/undraw_docusaurus_tree.svg b/docs/static/img/undraw_docusaurus_tree.svg deleted file mode 100644 index a05cc03..0000000 --- a/docs/static/img/undraw_docusaurus_tree.svg +++ /dev/null @@ -1 +0,0 @@ -docu_tree \ No newline at end of file From 0cd97e88d8a055276ced4271c1439854b346a511 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 22:58:22 -0700 Subject: [PATCH 10/23] build(:construction_worker:) - Splitting PR and push builds - Adding docs check from netlify - Prepping for netlify deployment --- .github/workflows/nodejs.yml | 18 ----------------- .github/workflows/on_pull_request.yml | 19 ++++++++++++++++++ .github/workflows/on_push.yml | 28 +++++++++++++++++++++++++++ .gitignore | 3 +++ 4 files changed, 50 insertions(+), 18 deletions(-) delete mode 100644 .github/workflows/nodejs.yml create mode 100644 .github/workflows/on_pull_request.yml create mode 100644 .github/workflows/on_push.yml diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml deleted file mode 100644 index c2d1ad4..0000000 --- a/.github/workflows/nodejs.yml +++ /dev/null @@ -1,18 +0,0 @@ -name: Build -on: [push, pull_request] -jobs: - build: - runs-on: ubuntu-latest - strategy: - matrix: - node-version: [12.x, 14.x] - steps: - - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - name: npm install, build, and test - run: | - npm i - npm run build diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml new file mode 100644 index 0000000..3d15a9e --- /dev/null +++ b/.github/workflows/on_pull_request.yml @@ -0,0 +1,19 @@ +on: pull_request +name: Build PR +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x, 14.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and test + run: | + npm i + npm run build + diff --git a/.github/workflows/on_push.yml b/.github/workflows/on_push.yml new file mode 100644 index 0000000..aa8bb97 --- /dev/null +++ b/.github/workflows/on_push.yml @@ -0,0 +1,28 @@ +on: push +name: Build & Publish Docs +jobs: + checkChangesInDocs: + name: Check changes in docs + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Check changes in stories + uses: netlify/actions/diff-includes@master + with: + args: docs + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x, 14.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and test + run: | + npm i + npm run build + diff --git a/.gitignore b/.gitignore index 0918540..2285243 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,9 @@ dist/ # Production /build +# Docs +docs/build/ + # Generated files .docusaurus .cache-loader From 0d8f652b35b1b583c7631da1a57964a68f313124 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 23:01:36 -0700 Subject: [PATCH 11/23] bugfix(:bug) bad yaml syntax --- .github/workflows/on_push.yml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/on_push.yml b/.github/workflows/on_push.yml index aa8bb97..f369244 100644 --- a/.github/workflows/on_push.yml +++ b/.github/workflows/on_push.yml @@ -7,9 +7,9 @@ jobs: steps: - uses: actions/checkout@master - name: Check changes in stories - uses: netlify/actions/diff-includes@master - with: - args: docs + uses: netlify/actions/diff-includes@master + with: + args: docs build: runs-on: ubuntu-latest strategy: @@ -25,4 +25,3 @@ jobs: run: | npm i npm run build - From d3319cc836e664a125240adbceea539a2cec529e Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 23:13:25 -0700 Subject: [PATCH 12/23] ci(:rocket:) netlify --- netlify.toml | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 netlify.toml diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..4ee9a53 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,15 @@ +[build] + base = "docs/" + publish = "build/" + command = "npm run build" + +[[headers]] + for = "/*" + + [headers.values] + X-Frame-Options = "DENY" + X-XSS-Protection = "1; mode=block" + cache-control = ''' + max-age=0, + no-cache, + must-revalidate''' From 513dceac77149a4202e16005e3ebe97914a97cf4 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sat, 22 Aug 2020 23:23:29 -0700 Subject: [PATCH 13/23] docs(:pencil:) Updating README --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 0b5dc69..be2fae2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@


- Pretty checkbox + Pretty checkbox

pretty-checkbox.css

@@ -8,13 +8,13 @@

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


@@ -22,7 +22,7 @@ 
 
Demo and documentation

-
+
@@ -90,7 +90,7 @@ Download the source from [`Github`](https://github.com/atomicpages/pretty-checkb You can also import `pretty-checkbox.scss` in your main scss file. ```scss -@import '~pretty-checkbox/src/pretty-checkbox.scss'; +@import '~@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; ``` Please refer the document for SCSS settings. @@ -171,7 +171,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim` @@ -196,7 +196,7 @@ Supports SVG file in tag, markup (` ... `) and sprites ### Image @@ -220,7 +220,7 @@ Supports any type of valid image format. ### Colors @@ -245,14 +245,14 @@ And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p- ## 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. +Please refer the [documentation](https://pretty-checkbox.netlify.app/docs/) to know about them. ## Browser support From d28e63536a1c923e15b79407a713c1a702de9606 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sun, 23 Aug 2020 14:45:08 -0700 Subject: [PATCH 14/23] refactor(:zap:) - Reducing boilerplate in the Gulpfile - Removing browser sync - Pushing some changes to the package.json instead - Removing seemingly unused test.css file --- .gitignore | 2 +- Gulpfile.js | 62 +-- package.json | 15 +- src/test.css | 1480 -------------------------------------------------- 4 files changed, 12 insertions(+), 1547 deletions(-) delete mode 100644 src/test.css diff --git a/.gitignore b/.gitignore index 2285243..c5558f1 100644 --- a/.gitignore +++ b/.gitignore @@ -25,7 +25,7 @@ Desktop.ini # Temporary files coverage/ tmp -test +test/*.css # Logs .log diff --git a/Gulpfile.js b/Gulpfile.js index 438aee6..6bb6469 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -1,5 +1,4 @@ const gulp = require('gulp'); -const browserSync = require('browser-sync'); const sass = require('gulp-sass'); sass.compiler = require('sass'); @@ -12,39 +11,6 @@ const gulpStylelint = require('gulp-stylelint'); const cleanCSS = require('gulp-clean-css'); const del = require('del'); -const reload = browserSync.reload; - -/* BROWSER SYNC */ -exports['browser-sync'] = function serve() { - browserSync({ - port: 3040, - server: { - baseDir: './', - directory: true, - }, - https: true, - }); -}; - -/* BROWSER SYNC RELOAD */ -exports['browser-sync-reload'] = function browserSyncReload() { - browserSync.reload(); -}; - -/* LIST SCSS */ -exports['lint:scss'] = function lintCSS() { - return gulp.src('src/**/*.scss').pipe( - gulpStylelint({ - reporters: [ - { - formatter: 'string', - console: true, - }, - ], - }) - ); -}; - /* COMPILE SCSS */ exports['compile:scss'] = function compileSCSS() { return gulp @@ -61,32 +27,9 @@ exports['compile:scss'] = function compileSCSS() { }) ) .pipe(sourcemaps.write('./maps')) - .pipe(gulp.dest('dist')) - .pipe( - browserSync.reload({ - stream: true, - }) - ); -}; - -/* FORMAT CSS */ -exports['format:css'] = function formatCSS() { - return gulp - .src('dist/*.css') - .pipe( - gulpStylelint({ - fix: true, - failAfterError: false, - }) - ) .pipe(gulp.dest('dist')); }; -/* CLEAN DIST */ -exports['clean:dist'] = function cleanDist() { - return del(['dist']); -}; - /* MINIFY CSS */ exports['minify:css'] = function minifyCSS() { return gulp @@ -117,16 +60,15 @@ exports['set:header'] = function setHeader() { Source: <%= pkg.repository.link %> Demo: <%= pkg.homepage %> - Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %> + Copyright (c) <%= new Date().getFullYear() %> <%= pkg.maintainers[0] %> + Originally By: <%= _.capitalize(pkg.author) %> `) ) .pipe(gulp.dest('dist')); }; const build = gulp.series( - gulp.parallel(exports['clean:dist'], exports['lint:scss']), exports['compile:scss'], - exports['format:css'], exports['minify:css'], exports['set:header'] ); diff --git a/package.json b/package.json index f7a68ec..7de9256 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,12 @@ "description": "A pure css library to beautify checkbox and radio buttons.", "main": "dist/pretty-checkbox.min.css", "scripts": { - "lint": "gulp lint:scss", - "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", - "format": "gulp css:format", + "clean": "del dist/", + "lint": "stylelint 'src/**/*.scss'", + "fix:scss": "npm run lint -- --fix", + "prebuild": "npm-run-all -p clean lint", + "pretest": "npm run build && cp dist/pretty-checkbox.css test/.", + "posttest": "del test/pretty-checkbox.css", "build": "gulp build" }, "publishConfig": { @@ -15,8 +18,8 @@ "dependencies": {}, "devDependencies": { "@djthoms/prettier-config": "^2.0.0", - "browser-sync": "^2.8.2", "del": "^5.0.0", + "del-cli": "^3.0.1", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.0", "gulp-clean-css": "^4.0.0", @@ -25,8 +28,8 @@ "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^2.6.1", "gulp-stylelint": "^13.0.0", + "npm-run-all": "^4.1.5", "prettier": "^2.0.5", - "rimraf": "^3.0.0", "sass": "^1.26.10", "stylelint": "^13.6.1", "stylelint-config-recommended": "^3.0.0", @@ -66,6 +69,6 @@ "bugs": { "url": "https://github.com/atomicpages/pretty-checkbox/issues" }, - "homepage": "https://lokesh-coder.github.io/pretty-checkbox", + "homepage": "https://pretty-checkbox.netlify.app/", "prettier": "@djthoms/prettier-config" } diff --git a/src/test.css b/src/test.css deleted file mode 100644 index 30cefaa..0000000 --- a/src/test.css +++ /dev/null @@ -1,1480 +0,0 @@ -.pretty * { - box-sizing: border-box; -} - -.pretty { - position: relative; - display: inline-block; - margin-right: 1em; - line-height: unset; - white-space: nowrap; -} - -.pretty input[type='checkbox'], -.pretty input[type='radio'] { - position: absolute; - left: 0; - top: 0; - min-width: 1em; - width: 100%; - height: 100%; - z-index: 2; - opacity: 0; - margin: 0; - padding: 0; - cursor: pointer; -} - -.pretty .state label { - position: initial; - display: inline-block; - font-weight: normal; - margin: 0; - text-indent: 1.5em; -} - -.pretty .state label:before, -.pretty .state label:after { - content: ''; - width: calc(1em + 2px); - height: calc(1em + 2px); - display: inline-block; - box-sizing: border-box; - border-radius: 0%; - border: 1px solid transparent; - z-index: 0; - position: absolute; - left: 0; - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 1px); -} - -.pretty .state label:before { - background-color: transparent; - border-color: #bdc3c7; - margin-right: 0.1em; -} - -.pretty .state.--is-hover, -.pretty .state.--is-indeterminate { - display: none; -} - -@-webkit-keyframes tada { - 0% { - -webkit-transform: scale(7); - transform: scale(7); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: scale(1.24); - transform: scale(1.24); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 89% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: scale(1.04); - transform: scale(1.04); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@keyframes tada { - 0% { - -webkit-transform: scale(7); - transform: scale(7); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - 38% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - } - 55% { - -webkit-transform: scale(1.5); - transform: scale(1.5); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 72% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 81% { - -webkit-transform: scale(1.24); - transform: scale(1.24); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 89% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 95% { - -webkit-transform: scale(1.04); - transform: scale(1.04); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } -} - -@-webkit-keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - -@-webkit-keyframes rotate { - 0% { - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - opacity: 1; - } -} - -@keyframes rotate { - 0% { - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); - opacity: 1; - } -} - -.pretty.--default.--fill input[type='checkbox'] ~ .state label:after, -.pretty.--default.--fill input[type='radio'] ~ .state label:after { - -webkit-transform: scale(1); - transform: scale(1); -} - -.pretty.--default.--fill input[type='checkbox']:checked ~ .state label:after, -.pretty.--default.--fill input[type='radio']:checked ~ .state label:after { - background-color: #bdc3c7; -} - -.pretty.--default input[type='checkbox'] ~ .state label:after, -.pretty.--default input[type='radio'] ~ .state label:after { - -webkit-transform: scale(0.6); - transform: scale(0.6); -} - -.pretty.--default input[type='checkbox']:checked ~ .state label:after, -.pretty.--default input[type='radio']:checked ~ .state label:after { - background-color: #bdc3c7; -} - -.pretty.--default.--thick input[type='checkbox'] ~ .state label:before, -.pretty.--default.--thick input[type='checkbox'] ~ .state label:after, -.pretty.--default.--thick input[type='radio'] ~ .state label:before, -.pretty.--default.--thick input[type='radio'] ~ .state label:after { - border-width: 0.13em; -} - -.pretty.--default.--thick input[type='checkbox'] ~ .state label:after, -.pretty.--default.--thick input[type='radio'] ~ .state label:after { - -webkit-transform: scale(0.4) !important; - transform: scale(0.4) !important; -} - -.pretty.--default.--thick input[type='checkbox']:checked + .state label:after, -.pretty.--default.--thick input[type='radio']:checked + .state label:after { - background-color: #bdc3c7; -} - -.pretty.--icon .state .icon { - display: none; - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc(calc(50% - calc(100% - 1em)) - 1px); - border: 1px solid transparent; -} - -.pretty.--icon .state .icon:before { - line-height: normal; - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.--icon input[type='checkbox']:checked ~ .state .icon, -.pretty.--icon input[type='radio']:checked ~ .state .icon { - display: inline-block; - vertical-align: top; -} - -.pretty.--icon input[type='checkbox']:checked ~ .state label:before, -.pretty.--icon input[type='radio']:checked ~ .state label:before { - border-color: #5a656b; -} - -.pretty.--svg .state .svg { - display: none; - position: absolute; - font-size: 1em; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - left: 0; - z-index: 1; - text-align: center; - line-height: normal; - top: calc(calc(50% - calc(100% - 1em)) - 1px); - border: 1px solid transparent; -} - -.pretty.--svg .state svg { - line-height: normal; - margin: 0; - width: 100%; - height: 100%; - text-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - line-height: 1; -} - -.pretty.--svg input[type='checkbox']:checked ~ .state .svg, -.pretty.--svg input[type='radio']:checked ~ .state .svg { - display: inline-block; -} - -.pretty.--image .state img { - display: none; - position: absolute; - width: calc(1em + 2px); - height: calc(1em + 2px); - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 2px); - left: 0; - z-index: 0; - text-align: center; - line-height: normal; - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--image input[type='checkbox']:checked ~ .state img, -.pretty.--image input[type='radio']:checked ~ .state img { - display: inline-block; -} - -.pretty.--switch .state { - position: relative; -} - -.pretty.--switch .state:before { - content: ''; - border: 1px solid #bdc3c7; - border-radius: 60px; - width: 2em; - display: inline-block; - box-sizing: unset; - height: calc(1em + 2px); - position: absolute; - top: 0; - top: calc(calc(50% - calc(100% - 1em)) - 2px); - z-index: 0; - transition: all 0.5s ease; -} - -.pretty.--switch .state label { - text-indent: 2.5em; -} - -.pretty.--switch .state label:before, -.pretty.--switch .state label:after { - transition: all 0.5s ease; - border-radius: 100%; - left: 0; - border-color: transparent; - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--switch .state label:after { - background-color: #bdc3c7; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state:before, -.pretty.--switch input[type='radio']:checked ~ .state:before { - border-color: #5a656b; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state label:before, -.pretty.--switch input[type='radio']:checked ~ .state label:before { - opacity: 0; -} - -.pretty.--switch input[type='checkbox']:checked ~ .state label:after, -.pretty.--switch input[type='radio']:checked ~ .state label:after { - background-color: #5a656b; - left: 1em; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state label:before { - opacity: 0; -} - -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state label:after { - background-color: #fff; - left: 1em; -} - -.pretty.--switch.--slim .state:before { - height: 0.1em; - background: #bdc3c7; - top: calc(50% - 1.5px); -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state:before { - border-color: #5a656b; - background-color: #5a656b; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--on, -.pretty.--toggle input[type='radio'] ~ .state.--on { - display: none; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off, -.pretty.--toggle input[type='checkbox'] ~ .state .icon, -.pretty.--toggle input[type='checkbox'] ~ .state .svg, -.pretty.--toggle input[type='checkbox'] ~ .state img, -.pretty.--toggle input[type='radio'] ~ .state.--off, -.pretty.--toggle input[type='radio'] ~ .state .icon, -.pretty.--toggle input[type='radio'] ~ .state .svg, -.pretty.--toggle input[type='radio'] ~ .state img { - display: inline-block; -} - -.pretty.--toggle input[type='checkbox']:checked ~ .state.--on, -.pretty.--toggle input[type='radio']:checked ~ .state.--on { - display: inline-block; -} - -.pretty.--toggle input[type='checkbox']:checked ~ .state.--off, -.pretty.--toggle input[type='radio']:checked ~ .state.--off { - display: none; -} - -.pretty.--plain input[type='checkbox']:checked ~ .state label:before, -.pretty.--plain input[type='radio']:checked ~ .state label:before, -.pretty.--plain.--toggle input[type='checkbox'] ~ .state label:before, -.pretty.--plain.--toggle input[type='radio'] ~ .state label:before { - content: none; -} - -.pretty.--round input[type='checkbox'] ~ .state label:before, -.pretty.--round input[type='checkbox'] ~ .state label:after, -.pretty.--round input[type='radio'] ~ .state label:before, -.pretty.--round input[type='radio'] ~ .state label:after { - border-radius: 100%; -} - -.pretty.--round.--icon .state .icon { - border-radius: 100%; - overflow: hidden; -} - -.pretty.--round.--icon .state .icon:before { - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--curve input[type='checkbox'] ~ .state label:before, -.pretty.--curve input[type='checkbox'] ~ .state label:after, -.pretty.--curve input[type='radio'] ~ .state label:before, -.pretty.--curve input[type='radio'] ~ .state label:after { - border-radius: 20%; -} - -.pretty.--smooth input[type='checkbox'] + .state .icon, -.pretty.--smooth input[type='checkbox'] + .state .svg, -.pretty.--smooth input[type='checkbox'] + .state img, -.pretty.--smooth input[type='radio'] + .state .icon, -.pretty.--smooth input[type='radio'] + .state .svg, -.pretty.--smooth input[type='radio'] + .state img { - display: inline-block; - -webkit-transform: scale(0); - transform: scale(0); - opacity: 0; - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox'] + .state label:before, -.pretty.--smooth input[type='radio'] + .state label:before { - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox'] + .state label:after, -.pretty.--smooth input[type='radio'] + .state label:after { - opacity: 0; - transition: all 0.5s ease; -} - -.pretty.--smooth input[type='checkbox']:checked + .state .icon, -.pretty.--smooth input[type='checkbox']:checked + .state .svg, -.pretty.--smooth input[type='checkbox']:checked + .state img, -.pretty.--smooth input[type='checkbox']:checked + .state label:after, -.pretty.--smooth input[type='radio']:checked + .state .icon, -.pretty.--smooth input[type='radio']:checked + .state .svg, -.pretty.--smooth input[type='radio']:checked + .state img, -.pretty.--smooth input[type='radio']:checked + .state label:after { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; -} - -.pretty.--smooth input[type='checkbox']:checked + .state img, -.pretty.--smooth input[type='radio']:checked + .state img { - -webkit-transform: scale(0.8); - transform: scale(0.8); -} - -.pretty.--smooth input[type='checkbox']:checked + .state label:after, -.pretty.--smooth input[type='radio']:checked + .state label:after { - opacity: 1; -} - -.pretty.--smooth.--default:not(.--fill) input[type='checkbox']:checked + .state label:after, -.pretty.--smooth.--default:not(.--fill) input[type='radio']:checked + .state label:after { - -webkit-transform: scale(0.6); - transform: scale(0.6); -} - -.pretty.--smooth.--plain input[type='checkbox']:checked + .state label:before, -.pretty.--smooth.--plain input[type='radio']:checked + .state label:before { - content: ''; - -webkit-transform: scale(0); - transform: scale(0); -} - -.pretty.--tada input[type='checkbox'] + .state .icon, -.pretty.--tada input[type='checkbox'] + .state .svg, -.pretty.--tada input[type='checkbox'] + .state img, -.pretty.--tada input[type='radio'] + .state .icon, -.pretty.--tada input[type='radio'] + .state .svg, -.pretty.--tada input[type='radio'] + .state img { - display: inline-block; - opacity: 0; -} - -.pretty.--tada input[type='checkbox'] + .state label:after, -.pretty.--tada input[type='radio'] + .state label:after { - opacity: 0; -} - -.pretty.--tada input[type='checkbox']:checked + .state .icon, -.pretty.--tada input[type='checkbox']:checked + .state .svg, -.pretty.--tada input[type='checkbox']:checked + .state img, -.pretty.--tada input[type='checkbox']:checked + .state label:after, -.pretty.--tada input[type='radio']:checked + .state .icon, -.pretty.--tada input[type='radio']:checked + .state .svg, -.pretty.--tada input[type='radio']:checked + .state img, -.pretty.--tada input[type='radio']:checked + .state label:after { - -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; - opacity: 1; -} - -.pretty.--tada input[type='checkbox']:checked + .state label:after, -.pretty.--tada input[type='radio']:checked + .state label:after { - opacity: 1; -} - -.pretty.--jelly input[type='checkbox'] + .state .icon, -.pretty.--jelly input[type='checkbox'] + .state .svg, -.pretty.--jelly input[type='checkbox'] + .state img, -.pretty.--jelly input[type='radio'] + .state .icon, -.pretty.--jelly input[type='radio'] + .state .svg, -.pretty.--jelly input[type='radio'] + .state img { - display: inline-block; - opacity: 0; - -webkit-animation-fill-mode: reverse; - animation-fill-mode: reverse; -} - -.pretty.--jelly input[type='checkbox'] + .state label:after, -.pretty.--jelly input[type='radio'] + .state label:after { - opacity: 0; -} - -.pretty.--jelly input[type='checkbox']:checked + .state .icon, -.pretty.--jelly input[type='checkbox']:checked + .state .svg, -.pretty.--jelly input[type='checkbox']:checked + .state img, -.pretty.--jelly input[type='checkbox']:checked + .state label:after, -.pretty.--jelly input[type='radio']:checked + .state .icon, -.pretty.--jelly input[type='radio']:checked + .state .svg, -.pretty.--jelly input[type='radio']:checked + .state img, -.pretty.--jelly input[type='radio']:checked + .state label:after { - -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - opacity: 1; -} - -.pretty.--jelly input[type='checkbox']:checked + .state label:before, -.pretty.--jelly input[type='radio']:checked + .state label:before { - border-color: transparent; -} - -.pretty.--rotate input[type='checkbox'] ~ .state .icon, -.pretty.--rotate input[type='checkbox'] ~ .state .svg, -.pretty.--rotate input[type='checkbox'] ~ .state img, -.pretty.--rotate input[type='radio'] ~ .state .icon, -.pretty.--rotate input[type='radio'] ~ .state .svg, -.pretty.--rotate input[type='radio'] ~ .state img { - display: inline-block; - opacity: 0; - -webkit-animation-fill-mode: reverse; - animation-fill-mode: reverse; -} - -.pretty.--rotate input[type='checkbox'] ~ .state label:after, -.pretty.--rotate input[type='radio'] ~ .state label:after { - opacity: 0; -} - -.pretty.--rotate input[type='checkbox']:checked ~ .state .icon, -.pretty.--rotate input[type='checkbox']:checked ~ .state .svg, -.pretty.--rotate input[type='checkbox']:checked ~ .state img, -.pretty.--rotate input[type='checkbox']:checked ~ .state label:after, -.pretty.--rotate input[type='radio']:checked ~ .state .icon, -.pretty.--rotate input[type='radio']:checked ~ .state .svg, -.pretty.--rotate input[type='radio']:checked ~ .state img, -.pretty.--rotate input[type='radio']:checked ~ .state label:after { - -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate; - opacity: 1; -} - -.pretty.--rotate input[type='checkbox']:checked ~ .state label:before, -.pretty.--rotate input[type='radio']:checked ~ .state label:before { - border-color: transparent; -} - -.pretty input[type='checkbox'][disabled], -.pretty input[type='radio'][disabled] { - display: none; - cursor: not-allowed; -} - -.pretty input[type='checkbox'][disabled] ~ *, -.pretty input[type='radio'][disabled] ~ * { - opacity: 0.5; -} - -.pretty.--locked input[type='checkbox'], -.pretty.--locked input[type='radio'] { - display: none; - cursor: not-allowed; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary .icon, -.pretty input[type='checkbox']:checked ~ .state.--primary svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--primary .icon, -.pretty input[type='radio']:checked ~ .state.--primary svg.svg, -.pretty input[type='radio']:checked ~ .state.--primary .svg svg, -.pretty input[type='radio']:checked ~ .state.--primary .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary label:after, -.pretty input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary label:after { - background-color: #428bca !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--primary-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--primary-o .icon, -.pretty input[type='radio']:checked ~ .state.--primary-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg > * { - stroke: #428bca; - color: #428bca; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o label:before, -.pretty input[type='radio']:checked ~ .state.--primary-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:before { - border-color: #428bca !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--primary-o label:after, -.pretty input[type='radio']:checked ~ .state.--primary-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:after { - background-color: #428bca !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--primary-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--primary-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--primary-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--primary-o label:after, -.pretty.--svg input[type='checkbox'] ~ .state.--primary-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--primary-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary label:after { - background-color: #428bca !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o .icon { - color: #428bca; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:before { - border-color: #428bca !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:after { - background-color: #428bca; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary:before { - border-color: #428bca; - background-color: #428bca; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--primary-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--primary-o:before { - border-color: #428bca; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary:before { - border-color: #428bca; - background-color: #428bca; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary label:after { - background-color: #428bca !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary-o:before { - border-color: #245682; - background-color: #245682; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--info .icon, -.pretty input[type='checkbox']:checked ~ .state.--info svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--info .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--info .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--info .icon, -.pretty input[type='radio']:checked ~ .state.--info svg.svg, -.pretty input[type='radio']:checked ~ .state.--info .svg svg, -.pretty input[type='radio']:checked ~ .state.--info .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--info label:after, -.pretty input[type='radio']:checked ~ .state.--info label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info label:after { - background-color: #5bc0de !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--info-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--info-o .icon, -.pretty input[type='radio']:checked ~ .state.--info-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--info-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--info-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg > * { - stroke: #5bc0de; - color: #5bc0de; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o label:before, -.pretty input[type='radio']:checked ~ .state.--info-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:before { - border-color: #5bc0de !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--info-o label:after, -.pretty input[type='radio']:checked ~ .state.--info-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:after { - background-color: #5bc0de !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--info-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--info-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--info-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--info-o label:after, -.pretty.--svg input[type='checkbox'] ~ .state.--info-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--info-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--info .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--info label:after { - background-color: #5bc0de !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o .icon { - color: #5bc0de; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:before { - border-color: #5bc0de !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:after { - background-color: #5bc0de; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info:before { - border-color: #5bc0de; - background-color: #5bc0de; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--info-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--info-o:before { - border-color: #5bc0de; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--info:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info:before { - border-color: #5bc0de; - background-color: #5bc0de; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--info label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info label:after { - background-color: #5bc0de !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info-o:before { - border-color: #2390b0; - background-color: #2390b0; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--success .icon, -.pretty input[type='checkbox']:checked ~ .state.--success svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--success .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--success .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--success .icon, -.pretty input[type='radio']:checked ~ .state.--success svg.svg, -.pretty input[type='radio']:checked ~ .state.--success .svg svg, -.pretty input[type='radio']:checked ~ .state.--success .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--success label:after, -.pretty input[type='radio']:checked ~ .state.--success label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success label:after { - background-color: #5cb85c !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--success-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--success-o .icon, -.pretty input[type='radio']:checked ~ .state.--success-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--success-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--success-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg > * { - stroke: #5cb85c; - color: #5cb85c; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o label:before, -.pretty input[type='radio']:checked ~ .state.--success-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:before { - border-color: #5cb85c !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--success-o label:after, -.pretty input[type='radio']:checked ~ .state.--success-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:after { - background-color: #5cb85c !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--success-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--success-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--success-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--success-o label:after, -.pretty.--svg input[type='checkbox'] ~ .state.--success-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--success-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--success .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--success label:after { - background-color: #5cb85c !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o .icon { - color: #5cb85c; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:before { - border-color: #5cb85c !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:after { - background-color: #5cb85c; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success:before { - border-color: #5cb85c; - background-color: #5cb85c; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--success-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--success-o:before { - border-color: #5cb85c; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--success:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success:before { - border-color: #5cb85c; - background-color: #5cb85c; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--success label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success label:after { - background-color: #5cb85c !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success-o:before { - border-color: #357935; - background-color: #357935; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning .icon, -.pretty input[type='checkbox']:checked ~ .state.--warning svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--warning .icon, -.pretty input[type='radio']:checked ~ .state.--warning svg.svg, -.pretty input[type='radio']:checked ~ .state.--warning .svg svg, -.pretty input[type='radio']:checked ~ .state.--warning .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning label:after, -.pretty input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning label:after { - background-color: #f0ad4e !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--warning-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--warning-o .icon, -.pretty input[type='radio']:checked ~ .state.--warning-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg > * { - stroke: #f0ad4e; - color: #f0ad4e; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o label:before, -.pretty input[type='radio']:checked ~ .state.--warning-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:before { - border-color: #f0ad4e !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--warning-o label:after, -.pretty input[type='radio']:checked ~ .state.--warning-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:after { - background-color: #f0ad4e !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--warning-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--warning-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--warning-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--warning-o label:after, -.pretty.--svg input[type='checkbox'] ~ .state.--warning-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--warning-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning label:after { - background-color: #f0ad4e !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o .icon { - color: #f0ad4e; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:before { - border-color: #f0ad4e !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:after { - background-color: #f0ad4e; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning:before { - border-color: #f0ad4e; - background-color: #f0ad4e; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--warning-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--warning-o:before { - border-color: #f0ad4e; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning:before { - border-color: #f0ad4e; - background-color: #f0ad4e; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning label:after { - background-color: #f0ad4e !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning-o:before { - border-color: #c77c11; - background-color: #c77c11; - zoom: 0; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger .icon, -.pretty input[type='checkbox']:checked ~ .state.--danger svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--danger .icon, -.pretty input[type='radio']:checked ~ .state.--danger svg.svg, -.pretty input[type='radio']:checked ~ .state.--danger .svg svg, -.pretty input[type='radio']:checked ~ .state.--danger .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg > * { - color: #fff; - stroke: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger label:after, -.pretty input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger label:after { - background-color: #d9534f !important; - color: #fff; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o .icon, -.pretty input[type='checkbox']:checked ~ .state.--danger-o svg.svg, -.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg, -.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg > *, -.pretty input[type='radio']:checked ~ .state.--danger-o .icon, -.pretty input[type='radio']:checked ~ .state.--danger-o svg.svg, -.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg, -.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg > *, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o svg.svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg > *, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .icon, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o svg.svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg > * { - stroke: #d9534f; - color: #d9534f; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o label:before, -.pretty input[type='radio']:checked ~ .state.--danger-o label:before, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:before, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:before { - border-color: #d9534f !important; -} - -.pretty input[type='checkbox']:checked ~ .state.--danger-o label:after, -.pretty input[type='radio']:checked ~ .state.--danger-o label:after, -.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:after, -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:after { - background-color: #d9534f !important; -} - -.pretty.--fill input[type='checkbox']:checked ~ .state.--danger-o label:after, -.pretty.--fill input[type='radio']:checked ~ .state.--danger-o label:after { - background-color: transparent !important; -} - -.pretty.--icon input[type='checkbox'] ~ .state.--danger-o label:after, -.pretty.--icon input[type='radio'] ~ .state.--danger-o label:after, -.pretty.--svg input[type='checkbox'] ~ .state.--danger-o label:after, -.pretty.--svg input[type='radio'] ~ .state.--danger-o label:after { - background-color: transparent !important; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger .icon, -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger .icon { - color: #fff; -} - -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger label:after, -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger label:after { - background-color: #d9534f !important; - color: #fff; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o .icon, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o .icon { - color: #d9534f; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:before, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:before { - border-color: #d9534f !important; -} - -.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:after, -.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:after { - background-color: #d9534f; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger:before { - border-color: #d9534f; - background-color: #d9534f; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger label:after { - background-color: #fff !important; -} - -.pretty.--switch input[type='radio']:checked ~ .state.--danger-o:before, -.pretty.--switch input[type='checkbox']:checked ~ .state.--danger-o:before { - border-color: #d9534f; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger:before, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger:before, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger:before { - border-color: #d9534f; - background-color: #d9534f; -} - -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger label:after, -.pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger label:after, -.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger label:after { - background-color: #d9534f !important; -} - -.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger-o:before, -.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger-o:before { - border-color: #a02622; - background-color: #a02622; - zoom: 0; -} - -@media print { - .pretty .state:before, - .pretty .state label:before, - .pretty .state label:after { - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - color-adjust: exact; - } -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state:not(.--is-hover), -.pretty.--has-hover input[type='radio']:hover ~ .state:not(.--is-hover) { - display: none; -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover, -.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover { - display: block; -} - -.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover .icon, -.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover .icon { - display: block; -} - -.pretty.--has-focus input[type='checkbox']:focus ~ .state label:before, -.pretty.--has-focus input[type='radio']:focus ~ .state label:before { - box-shadow: 0px 0px 3px 0px #bdc3c7; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.--is-indeterminate) { - display: none; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate { - display: block; -} - -.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate .icon { - display: block; -} - -/* - -default - outline - fill - thick -icon -svg -image -switch - inside - outside - thin -toggle -insideout - ---common-- -color -print -animation -disabled -round - -*/ From bc7fb568e5d4e5642cfe33a28bd9535cea55f85e Mon Sep 17 00:00:00 2001 From: atomicpages Date: Sun, 23 Aug 2020 14:47:11 -0700 Subject: [PATCH 15/23] test(:rotating_light:) test scaffolding --- test/index.html | 30 +++++++ test/scripts/nanoid.js | 31 ++++++++ test/scripts/sections/basic.js | 8 ++ test/scripts/sections/colors.js | 34 ++++++++ test/scripts/sections/icon.js | 32 ++++++++ test/scripts/sections/main.js | 8 ++ test/scripts/sections/radio.js | 15 ++++ test/scripts/utils.js | 137 ++++++++++++++++++++++++++++++++ 8 files changed, 295 insertions(+) create mode 100644 test/index.html create mode 100644 test/scripts/nanoid.js create mode 100644 test/scripts/sections/basic.js create mode 100644 test/scripts/sections/colors.js create mode 100644 test/scripts/sections/icon.js create mode 100644 test/scripts/sections/main.js create mode 100644 test/scripts/sections/radio.js create mode 100644 test/scripts/utils.js diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..e482a1d --- /dev/null +++ b/test/index.html @@ -0,0 +1,30 @@ + + + + + Pretty Checkbox Tests + + + + + + + + + + + + + + + diff --git a/test/scripts/nanoid.js b/test/scripts/nanoid.js new file mode 100644 index 0000000..49e9c28 --- /dev/null +++ b/test/scripts/nanoid.js @@ -0,0 +1,31 @@ +var nanoid = (function () { + 'use strict'; + + // browser-safe version of nanoid@2 + var crypto = self.crypto || self.msCrypto; + + var url = '-_'; + var i = 36; + + while (i--) { + url += i.toString(36); + } + + i = 36; + + while (i-- - 10) { + url += i.toString(36).toUpperCase(); + } + + return function nanoid(size) { + var id = ''; + var bytes = crypto.getRandomValues(new Uint8Array(size || 21)); + i = size || 21; + + while (i--) { + id += url[bytes[i] & 63]; + } + + return id; + }; +})(); diff --git a/test/scripts/sections/basic.js b/test/scripts/sections/basic.js new file mode 100644 index 0000000..a5d4fe6 --- /dev/null +++ b/test/scripts/sections/basic.js @@ -0,0 +1,8 @@ +function basic(fragment) { + var basic = fragment.appendChild(createSection('Basic Checkbox')); + basic.appendChild(createControl('Basic Checkbox')); + basic.appendChild(createControl('Curve Checkbox', { shape: 'p-curve' })); + basic.appendChild(createControl('Round Checkbox', { shape: 'p-round' })); + basic.appendChild(createControl('Fill Checkbox', { variant: 'p-fill' })); + basic.appendChild(createControl('Thick Checkbox', { variant: 'p-thick' })); +} diff --git a/test/scripts/sections/colors.js b/test/scripts/sections/colors.js new file mode 100644 index 0000000..730ae85 --- /dev/null +++ b/test/scripts/sections/colors.js @@ -0,0 +1,34 @@ +function colors(fragment) { + var colors = fragment.appendChild(createSection('Colors')); + colors.appendChild(createControl('Primary', { color: 'p-primary' })); + colors.appendChild(createControl('Info', { color: 'p-info', variant: 'p-fill' })); + + colors.appendChild(createControl('Success', { color: 'p-success', variant: 'p-thick' })); + + colors.appendChild( + createControl('Warning', { + color: 'p-warning', + variant: 'p-thick', + shape: 'p-round', + }) + ); + + colors.appendChild(createControl('Danger', { color: 'p-danger', shape: 'p-curve' })); + + colors.appendChild(createControl('Primary Outline', { color: 'p-primary-o' })); + colors.appendChild(createControl('Info Outline', { color: 'p-info-o', variant: 'p-fill' })); + + colors.appendChild( + createControl('Success Outline', { color: 'p-success-o', variant: 'p-thick' }) + ); + + colors.appendChild( + createControl('Warning Outline', { + color: 'p-warning-o', + variant: 'p-thick', + shape: 'p-round', + }) + ); + + colors.appendChild(createControl('Danger Outline', { color: 'p-danger-o', shape: 'p-curve' })); +} diff --git a/test/scripts/sections/icon.js b/test/scripts/sections/icon.js new file mode 100644 index 0000000..aff7d19 --- /dev/null +++ b/test/scripts/sections/icon.js @@ -0,0 +1,32 @@ +function icon(fragment) { + var icon = fragment.appendChild(createSection('Icon')); + + icon.appendChild( + createControl('mdi-check', { + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); + + icon.appendChild( + createControl('mdi-close', { + shape: 'p-curve', + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); + + icon.appendChild( + createControl('mdi-close-outline', { + shape: 'p-round', + icon: { + type: 'p-icon', + dom: '', + }, + }) + ); +} diff --git a/test/scripts/sections/main.js b/test/scripts/sections/main.js new file mode 100644 index 0000000..a490506 --- /dev/null +++ b/test/scripts/sections/main.js @@ -0,0 +1,8 @@ +function main(fragment) { + basic(fragment); + radio(fragment); + colors(fragment); + icon(fragment); + + return fragment +} diff --git a/test/scripts/sections/radio.js b/test/scripts/sections/radio.js new file mode 100644 index 0000000..d0b7a1a --- /dev/null +++ b/test/scripts/sections/radio.js @@ -0,0 +1,15 @@ +function radio(fragment) { + var radio = fragment.appendChild(createSection('Basic Radio')); + + radio.appendChild( + createControl('Regular Crust', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); + + radio.appendChild( + createControl('Thin Crust', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); + + radio.appendChild( + createControl('Deep Dish', { shape: 'p-round', type: 'radio', name: 'pizza' }) + ); +} diff --git a/test/scripts/utils.js b/test/scripts/utils.js new file mode 100644 index 0000000..33d4c26 --- /dev/null +++ b/test/scripts/utils.js @@ -0,0 +1,137 @@ +/** + * @typedef Icon + * @type {object} + * @property {string} dom + * @property {'p-icon' | 'p-svg' | 'p-image'} type + */ + +/** + * @typedef Config + * @type {object} + * @property {'checkbox' | 'radio'} [type] + * @property {string} [name] + * @property {boolean} [switch] + * @property {string} [shape] + * @property {string} [variant] + * @property {string} [name] + * @property {string} [color] + * @property {Icon} icon + */ + +/** + * @param {string} title + * @returns {HTMLElement} + */ +function createSection(title) { + var section = document.createElement('section'); + var heading = section.appendChild(document.createElement('h2')); + heading.innerText = title; + + return section; +} + +function toggleAll() { + var inputs = document.querySelectorAll('input'); + + for (var i = 0; i < inputs.length; i++) { + inputs[i].checked = inputs[i].checked ? false : true; + } +} + +var createControl = (function () { + 'use strict'; + + var parser = (function () { + if (!window.DOMParser) { + return false; + } + + var parser = new DOMParser(); + + try { + parser.parseFromString('x', 'text/html'); + } catch (err) { + return false; + } + + return parser; + })(); + + /** + * A IE-friendly function to parse text into HTML. + * @param {string} html + * @returns {HTMLElement} + */ + function stringToHTML(html) { + if (parser) { + return parser.parseFromString(html, 'text/html').body.firstChild; + } + + var span = document.createElement('span'); + span.innerHTML = html; + + return span.firstChild; + } + + /** + * @param {HTMLElement} element + * @param {string} [config] + */ + function appendSelector(element, config) { + if (config) { + element.className += ' ' + config; + } + } + + /** + * @param {string} children + * @param {Config} config + */ + function createControl(children, config) { + /** @type {Config} */ + var _config = config || {}; + var id = 'pc-' + nanoid(8); + + var pretty = document.createElement('div'); + var input = pretty.appendChild(document.createElement('input')); + var state = pretty.appendChild(document.createElement('div')); + var label = state.appendChild(document.createElement('label')); + + input.id = id; + + if (_config.name) { + input.name = _config.name; + } + + label.setAttribute('for', id); + label.innerText = children; + + pretty.className = 'pretty'; + state.className = 'state'; + + if (!_config.icon && !_config.switch) { + pretty.className += ' p-default'; + } + + if (_config.icon && _config.icon.type && _config.icon.dom) { + appendSelector(pretty, _config.icon.type); + var icon = stringToHTML(_config.icon.dom); + + if (!/icon|svg|image/.test(icon.className)) { + icon.className += ' ' + _config.icon.type.replace('p-', ''); + } + + state.insertBefore(icon, state.firstChild); + } + + appendSelector(state, _config.color); + appendSelector(pretty, _config.shape); + appendSelector(pretty, _config.variant); + + input.setAttribute('type', _config.type || 'checkbox'); + + return pretty; + }; + + return createControl; +})(); From 060ff2a797b235fd6a18f64c48034074b82f3693 Mon Sep 17 00:00:00 2001 From: Dennis Thompson Date: Sun, 6 Sep 2020 21:08:34 -0700 Subject: [PATCH 16/23] Fixing clerical error --- docs/docs/basic-concepts/icons.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/basic-concepts/icons.mdx b/docs/docs/basic-concepts/icons.mdx index e2c281e..e237b83 100644 --- a/docs/docs/basic-concepts/icons.mdx +++ b/docs/docs/basic-concepts/icons.mdx @@ -5,7 +5,7 @@ title: Icons import { mdiCheck } from '@mdi/js'; -Icon in tge generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three :tada: +Icon in the generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three :tada: ## Icons From 217baa646073eca7499c85187535768e023ffbca Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 9 Sep 2020 19:27:25 -0700 Subject: [PATCH 17/23] feat(:sparkles:) rtl support Adding new rtl.css file (or rtl.scss) file that can be imported to enable rtl support --- LICENSE | 20 ++++++++++++++++---- README.md | 6 +++++- src/rtl.scss | 8 ++++++++ 3 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 src/rtl.scss diff --git a/LICENSE b/LICENSE index fc783d6..fe0df4c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,9 +1,21 @@ -The MIT License (MIT) +MIT License Copyright (c) 2017 Lokesh Rajendran ( lokesh.aero@gmail.com ) -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index be2fae2..907040e 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ ## Installation -### **From CLI** +### From CLI Install using `npm` or `yarn`: @@ -248,6 +248,10 @@ And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p- more details
+## RTL Support + +Include `rtl.css` in your source file :smile: + ## More There are more features like **_Radio buttons_** , **_Toggle_** , **_States_** , **_Animations_** , **_Border less_** , **_Lock_** , **_Scale_**, **_SCSS Settings_**. diff --git a/src/rtl.scss b/src/rtl.scss new file mode 100644 index 0000000..6153280 --- /dev/null +++ b/src/rtl.scss @@ -0,0 +1,8 @@ +@import './scss/variables'; + +.#{$pretty--class-name} { + .state label { + margin-left: $pretty--label-text-offset; + text-indent: 0; + } +} From d6ebbc717bf102d0be6b1e21764c78b99b57bfde Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 9 Sep 2020 19:28:31 -0700 Subject: [PATCH 18/23] 3.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7de9256..88a292b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@djthoms/pretty-checkbox", - "version": "3.0.4", + "version": "3.1.0", "description": "A pure css library to beautify checkbox and radio buttons.", "main": "dist/pretty-checkbox.min.css", "scripts": { From 4917b6de5bf743d92166b4331b66b89e54181171 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 9 Sep 2020 19:52:10 -0700 Subject: [PATCH 19/23] docs(:pencil:) adding RTL docs - Upgrading docusaurus - Adding rtl docs - IA reorganization --- docs/docs/getting-started.md | 2 +- .../animations.mdx | 0 .../colors.mdx | 0 .../icons.mdx | 0 .../intro.md | 0 docs/docs/main-concepts/rtl.md | 26 +++++++++++++++++++ .../shapes.mdx | 0 .../states.md | 0 docs/docusaurus.config.js | 10 +++++-- docs/package.json | 7 +++-- docs/sidebars.js | 15 ++++++----- 11 files changed, 48 insertions(+), 12 deletions(-) rename docs/docs/{basic-concepts => main-concepts}/animations.mdx (100%) rename docs/docs/{basic-concepts => main-concepts}/colors.mdx (100%) rename docs/docs/{basic-concepts => main-concepts}/icons.mdx (100%) rename docs/docs/{basic-concepts => main-concepts}/intro.md (100%) create mode 100644 docs/docs/main-concepts/rtl.md rename docs/docs/{basic-concepts => main-concepts}/shapes.mdx (100%) rename docs/docs/{basic-concepts => main-concepts}/states.md (100%) diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index 57b283d..b48d045 100644 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -1,7 +1,7 @@ --- id: getting-started title: Getting Started -sidebar_label: Getting Started +slug: / --- ## Installation diff --git a/docs/docs/basic-concepts/animations.mdx b/docs/docs/main-concepts/animations.mdx similarity index 100% rename from docs/docs/basic-concepts/animations.mdx rename to docs/docs/main-concepts/animations.mdx diff --git a/docs/docs/basic-concepts/colors.mdx b/docs/docs/main-concepts/colors.mdx similarity index 100% rename from docs/docs/basic-concepts/colors.mdx rename to docs/docs/main-concepts/colors.mdx diff --git a/docs/docs/basic-concepts/icons.mdx b/docs/docs/main-concepts/icons.mdx similarity index 100% rename from docs/docs/basic-concepts/icons.mdx rename to docs/docs/main-concepts/icons.mdx diff --git a/docs/docs/basic-concepts/intro.md b/docs/docs/main-concepts/intro.md similarity index 100% rename from docs/docs/basic-concepts/intro.md rename to docs/docs/main-concepts/intro.md diff --git a/docs/docs/main-concepts/rtl.md b/docs/docs/main-concepts/rtl.md new file mode 100644 index 0000000..44dc5fd --- /dev/null +++ b/docs/docs/main-concepts/rtl.md @@ -0,0 +1,26 @@ +--- +id: rtl +title: RTL +--- + +Pretty Checkbox supports RTL languages starting 3.1.0. + +## Usage + +If you're using a modern bundler like webpack, parcel, or something else you can import `rtl.scss` in your `index.js`: + +```js title="index.js" +import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss'; +import '@djthoms/pretty-checkbox/src/rtl.scss'; + +// ... +``` + +## Browsers + +For browsers, you can reference `rtl.css`: + +```html title="index.html" + + +``` diff --git a/docs/docs/basic-concepts/shapes.mdx b/docs/docs/main-concepts/shapes.mdx similarity index 100% rename from docs/docs/basic-concepts/shapes.mdx rename to docs/docs/main-concepts/shapes.mdx diff --git a/docs/docs/basic-concepts/states.md b/docs/docs/main-concepts/states.md similarity index 100% rename from docs/docs/basic-concepts/states.md rename to docs/docs/main-concepts/states.md diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 63ef599..3d3d4fc 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -12,7 +12,14 @@ module.exports = { 'https://cdn.materialdesignicons.com/5.5.55/css/materialdesignicons.min.css', ], themes: ['@docusaurus/theme-live-codeblock'], - plugins: ['docusaurus-plugin-sass'], + plugins: [ + [ + '@djthoms/docusaurus-plugin-sass', + { + implementation: require('sass'), + }, + ], + ], themeConfig: { // switchConfig: { // darkIcon: '🌙', @@ -86,7 +93,6 @@ module.exports = { '@docusaurus/preset-classic', { docs: { - homePageId: 'getting-started', sidebarPath: require.resolve('./sidebars.js'), editUrl: 'https://github.com/atomicpages/pretty-checkbox/edit/master/docs/', }, diff --git a/docs/package.json b/docs/package.json index 0cac504..2f045d4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -18,7 +18,6 @@ "@mdi/react": "^1.4.0", "@mdx-js/react": "^1.5.8", "clsx": "^1.1.1", - "docusaurus-plugin-sass": "^0.1.9", "react": "^16.8.4", "react-dom": "^16.8.4" }, @@ -34,5 +33,9 @@ "last 1 safari version" ] }, - "prettier": "../node_modules/@djthoms/prettier-config" + "prettier": "../node_modules/@djthoms/prettier-config", + "devDependencies": { + "@djthoms/docusaurus-plugin-sass": "^0.2.0", + "sass": "^1.26.10" + } } diff --git a/docs/sidebars.js b/docs/sidebars.js index 96749a4..2cc99ed 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -3,14 +3,15 @@ module.exports = { 'getting-started', { type: 'category', - label: 'Basic Concepts', + label: 'Main Concepts', items: [ - 'basic-concepts/intro', - 'basic-concepts/colors', - 'basic-concepts/shapes-size', - 'basic-concepts/states', - 'basic-concepts/icons', - 'basic-concepts/animations', + 'main-concepts/intro', + 'main-concepts/rtl', + 'main-concepts/colors', + 'main-concepts/shapes-size', + 'main-concepts/states', + 'main-concepts/icons', + 'main-concepts/animations', ], }, 'checkbox', From 3c2ed6ca63d8d083654f085863e7e1b2dbb0b37c Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 9 Sep 2020 19:53:47 -0700 Subject: [PATCH 20/23] docs(:pencil:) IA --- docs/docs/checkbox.mdx | 4 ++-- docs/docs/radio.md | 4 ++-- docs/docs/switch.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/checkbox.mdx b/docs/docs/checkbox.mdx index 3a81a61..a9ec6e2 100644 --- a/docs/docs/checkbox.mdx +++ b/docs/docs/checkbox.mdx @@ -5,7 +5,7 @@ title: Checkbox import { IndeterminateCheckbox } from '../src/components/IndeterminateCheckbox'; -The cornerstone of any UI component is probably the checkbox. Pretty Checkbox support checkoxes with a wide range of usage. Be sure to checkout the [basic concepts guide](basic-concepts/intro) for more info! +The cornerstone of any UI component is probably the checkbox. Pretty Checkbox support checkoxes with a wide range of usage. Be sure to checkout the [basic concepts guide](main-concepts/intro) for more info! ## Basic Checkbox @@ -57,7 +57,7 @@ Our basic checkbox can take on three different shapes: square, `p-curve`, `p-rou ## Colors, Icon, and Animations -Checkbox supports [colors](basic-concepts/colors), [icons](basic-concepts/icons), [animations](basic-concepts/animations). +Checkbox supports [colors](main-concepts/colors), [icons](main-concepts/icons), [animations](main-concepts/animations). There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. ```html {1,8,16,24,32} diff --git a/docs/docs/radio.md b/docs/docs/radio.md index eae1226..4a3ab4a 100644 --- a/docs/docs/radio.md +++ b/docs/docs/radio.md @@ -3,7 +3,7 @@ id: radio title: Radio --- -Radio controls are another all-important input control that is widespread in the wild. Be sure to checkout the [basic concepts guide](basic-concepts/intro) for more info! +Radio controls are another all-important input control that is widespread in the wild. Be sure to checkout the [basic concepts guide](main-concepts/intro) for more info! ## Basic Radio @@ -55,7 +55,7 @@ Our basic checkbox can take on three different shapes: square, `p-curve`, `p-rou ## Colors, Icon, and Animations -Radio supports [colors](basic-concepts/colors), [icons](basic-concepts/icons), [animations](basic-concepts/animations). +Radio supports [colors](main-concepts/colors), [icons](main-concepts/icons), [animations](main-concepts/animations). There are five animations classes available that can be added to the root div: `p-smooth`, `p-pulse`, `p-tada`, `p-jelly`, and `p-rotate`. ```html {1,8,16,24,32} diff --git a/docs/docs/switch.md b/docs/docs/switch.md index a53ef73..bdeea93 100644 --- a/docs/docs/switch.md +++ b/docs/docs/switch.md @@ -32,7 +32,7 @@ Similar to Checkbox and Radio, switch contains a similar DOM structure, but we u ## Shapes & Colors :::caution -Switch is not compatible with [outline colors](basic-concepts/colors) +Switch is not compatible with [outline colors](main-concepts/colors) ::: Switch has three unique shapes that can be used: `p-outline`, `p-fill`, and `p-slim`. From 431e4b425018aacef0d468b4581621d949df9f49 Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 9 Sep 2020 20:01:16 -0700 Subject: [PATCH 21/23] ci(:green_heart:) --- README.md | 8 ++++---- docs/docusaurus.config.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 907040e..7300fc7 100644 --- a/README.md +++ b/README.md @@ -171,7 +171,7 @@ Switch has three variants `p-outline` `p-fill` `p-slim` @@ -196,7 +196,7 @@ Supports SVG file in tag, markup (` ... `) and sprites ### Image @@ -220,7 +220,7 @@ Supports any type of valid image format. ### Colors @@ -245,7 +245,7 @@ And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p- ## RTL Support diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 3d3d4fc..46afcd9 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -67,7 +67,7 @@ module.exports = { }, { label: 'Basic Concepts', - to: 'docs/basic-concepts/intro/', + to: 'docs/main-concepts/intro/', }, ], }, From cdcef7b02e7f7c84e10a954d49345199645a6baa Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 14 Oct 2020 09:31:59 -0700 Subject: [PATCH 22/23] :memo: Adding docsearch to site --- docs/docusaurus.config.js | 5 +++++ docs/package.json | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 46afcd9..ba8b475 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -31,6 +31,11 @@ module.exports = { // marginLeft: '1px', // }, // }, + algolia: { + apiKey: 'd3db4a5e15b4370010535093e10fb8c7', + indexName: 'pretty-checkbox', + searchParameters: {}, // Optional (if provided by Algolia) + }, prism: { theme: require('prism-react-renderer/themes/github'), darkTheme: require('prism-react-renderer/themes/palenight'), diff --git a/docs/package.json b/docs/package.json index 2f045d4..493bc68 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,9 +11,9 @@ "serve": "docusaurus serve" }, "dependencies": { - "@docusaurus/core": "^2.0.0-alpha.61", - "@docusaurus/preset-classic": "^2.0.0-alpha.61", - "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.61", + "@docusaurus/core": "^2.0.0-alpha.66", + "@docusaurus/preset-classic": "^2.0.0-alpha.66", + "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.66", "@mdi/js": "^5.5.55", "@mdi/react": "^1.4.0", "@mdx-js/react": "^1.5.8", From 580628dbea9f8874f3589839a6d0ce38653b2e4a Mon Sep 17 00:00:00 2001 From: atomicpages Date: Wed, 14 Oct 2020 09:34:44 -0700 Subject: [PATCH 23/23] :memo: --- docs/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/package.json b/docs/package.json index 493bc68..728a0d2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,9 +11,9 @@ "serve": "docusaurus serve" }, "dependencies": { - "@docusaurus/core": "^2.0.0-alpha.66", - "@docusaurus/preset-classic": "^2.0.0-alpha.66", - "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.66", + "@docusaurus/core": "^2.0.0-alpha.65", + "@docusaurus/preset-classic": "^2.0.0-alpha.65", + "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.65", "@mdi/js": "^5.5.55", "@mdi/react": "^1.4.0", "@mdx-js/react": "^1.5.8",