Angel Fernando Quiroz Campos
7 years ago
commit
a327f6ccc7
@ -0,0 +1,15 @@ |
|||||||
|
{ |
||||||
|
"name": "pretty-checkbox", |
||||||
|
"homepage": "https://github.com/lokesh-coder/pretty-checkbox", |
||||||
|
"version": "3.0.3", |
||||||
|
"_release": "3.0.3", |
||||||
|
"_resolution": { |
||||||
|
"type": "version", |
||||||
|
"tag": "v3.0.3", |
||||||
|
"commit": "c225070a9bbc1ff416d624fd94858ae9c67656a1" |
||||||
|
}, |
||||||
|
"_source": "https://github.com/lokesh-coder/pretty-checkbox.git", |
||||||
|
"_target": "^3.0.3", |
||||||
|
"_originalSource": "pretty-checkbox", |
||||||
|
"_direct": true |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
# Node |
||||||
|
node_modules |
||||||
|
npm-debug.log |
||||||
|
package-lock.json |
||||||
|
.npmrc |
||||||
|
|
||||||
|
# Yarn |
||||||
|
yarn-error.log |
||||||
|
yarn.lock |
||||||
|
|
||||||
|
# JetBrains |
||||||
|
.idea/ |
||||||
|
|
||||||
|
# VS Code |
||||||
|
.vscode/ |
||||||
|
.history |
||||||
|
|
||||||
|
# Windows |
||||||
|
Thumbs.db |
||||||
|
Desktop.ini |
||||||
|
|
||||||
|
# Mac |
||||||
|
.DS_Store |
||||||
|
|
||||||
|
# Temporary files |
||||||
|
coverage/ |
||||||
|
docs |
||||||
|
tmp |
||||||
|
test |
||||||
|
|
||||||
|
# Logs |
||||||
|
.log |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"extends": "stylelint-config-recommended-scss", |
||||||
|
"rules":{} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
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/.*$/ |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
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; |
||||||
|
|
||||||
|
/* BROWSER SYNC */ |
||||||
|
gulp.task('browser-sync', function () { |
||||||
|
browserSync({ |
||||||
|
port: 3040, |
||||||
|
server: { |
||||||
|
baseDir: "./", |
||||||
|
directory: true |
||||||
|
}, |
||||||
|
https: true |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
/* BROWSER SYNC RELOAD */ |
||||||
|
gulp.task('browser-sync-reload', function () { |
||||||
|
browserSync.reload(); |
||||||
|
}); |
||||||
|
|
||||||
|
/* LIST SCSS */ |
||||||
|
gulp.task('lint:scss', function () { |
||||||
|
return gulp |
||||||
|
.src('src/**/*.scss') |
||||||
|
.pipe(gulpStylelint({ |
||||||
|
reporters: [{ |
||||||
|
formatter: 'string', |
||||||
|
console: true |
||||||
|
}] |
||||||
|
})); |
||||||
|
}); |
||||||
|
|
||||||
|
/* COMPILE SCSS */ |
||||||
|
gulp.task('compile:scss', function () { |
||||||
|
return gulp.src('src/**/*.scss') |
||||||
|
.pipe(sourcemaps.init()) |
||||||
|
.pipe(sass({ |
||||||
|
outputStyle: 'expanded' |
||||||
|
}) |
||||||
|
.on('error', sass.logError)) |
||||||
|
.pipe(autoprefixer({ |
||||||
|
browsers: ['> 5%', 'last 4 versions'], |
||||||
|
cascade: false |
||||||
|
})) |
||||||
|
.pipe(sourcemaps.write('./maps')) |
||||||
|
.pipe(gulp.dest('dist')) |
||||||
|
.pipe(browserSync.reload({ |
||||||
|
stream: true |
||||||
|
})); |
||||||
|
}); |
||||||
|
|
||||||
|
/* FORMAT CSS */ |
||||||
|
gulp.task('format:css', function () { |
||||||
|
return gulp.src('dist/*.css') |
||||||
|
.pipe(stylefmt()) |
||||||
|
.pipe(gulp.dest('dist')); |
||||||
|
}) |
||||||
|
|
||||||
|
/* CLEAN DIST */ |
||||||
|
gulp.task('clean:dist', function () { |
||||||
|
return del(['dist']); |
||||||
|
}); |
||||||
|
|
||||||
|
/* MINIFY CSS */ |
||||||
|
gulp.task('minify:css', () => { |
||||||
|
return gulp.src('dist/*.css') |
||||||
|
.pipe(cleanCSS({ |
||||||
|
compatibility: 'ie9' |
||||||
|
})) |
||||||
|
.pipe(rename({ |
||||||
|
suffix: '.min' |
||||||
|
})) |
||||||
|
.pipe(gulp.dest('dist')); |
||||||
|
}); |
||||||
|
|
||||||
|
/* SET HEADER */ |
||||||
|
gulp.task('set:header', function () { |
||||||
|
return gulp.src('dist/*.css') |
||||||
|
.pipe(headerComment(` |
||||||
|
pretty-checkbox.css |
||||||
|
|
||||||
|
A pure CSS library to beautify checkbox and radio buttons |
||||||
|
|
||||||
|
Source: <%= pkg.repository.link %> |
||||||
|
Demo: <%= pkg.homepage %> |
||||||
|
|
||||||
|
Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %> |
||||||
|
`))
|
||||||
|
.pipe(gulp.dest('dist')) |
||||||
|
}); |
||||||
|
|
||||||
|
gulp.task('build', function (cb) { |
||||||
|
gulpSequence('lint:scss', 'clean:dist', 'compile:scss', 'format:css', 'minify:css', 'set:header', cb) |
||||||
|
}); |
||||||
|
|
||||||
|
gulp.task('default', ['compile:scss', 'browser-sync'], function () { |
||||||
|
gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']); |
||||||
|
}); |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
The MIT License (MIT) |
||||||
|
|
||||||
|
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: |
||||||
|
|
||||||
|
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. |
||||||
@ -0,0 +1,299 @@ |
|||||||
|
<h1 align="center"> |
||||||
|
<br> |
||||||
|
<a href="https://lokesh-coder.github.io/pretty-checkbox/"><img src="logo.png" alt="Pretty checkbox" width="100"></a> |
||||||
|
<br> <br> pretty-checkbox.css <br> |
||||||
|
</h1> |
||||||
|
|
||||||
|
<h4 align="center">A pure CSS library to beautify checkbox and radio buttons.</h4> |
||||||
|
|
||||||
|
<p align="center"> |
||||||
|
<a href="https://github.com/lokesh-coder/pretty-checkbox/releases"> |
||||||
|
<img src="https://img.shields.io/github/release/lokesh-coder/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Github Release"> |
||||||
|
</a> |
||||||
|
<a href="LICENSE"> |
||||||
|
<img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Licence"> |
||||||
|
</a> |
||||||
|
<a href="#"> |
||||||
|
<img src="https://img.shields.io/npm/dm/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Downloads"> |
||||||
|
</a> |
||||||
|
</p> |
||||||
|
<br> |
||||||
|
|
||||||
|
<div class="highlight highlight-source-shell"> |
||||||
|
<pre> |
||||||
|
<div align="center"><strong >Demo and documentation</strong></div> |
||||||
|
<div align="center"><a align="center" href="https://lokesh-coder.github.io/pretty-checkbox/">https://lokesh-coder.github.io/pretty-checkbox/</a></div> |
||||||
|
</pre> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div align="center"> |
||||||
|
<img src="preview.gif" alt="Pretty checkbox preview"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
### 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 |
||||||
|
|
||||||
|
<br> |
||||||
|
|
||||||
|
- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) ) |
||||||
|
```html |
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/> |
||||||
|
``` |
||||||
|
|
||||||
|
<br> |
||||||
|
|
||||||
|
- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) ) |
||||||
|
|
||||||
|
Download the source from Github. |
||||||
|
```html |
||||||
|
<link rel="stylesheet" href="../<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css"/> |
||||||
|
``` |
||||||
|
`<PATH>` is where the library is downloaded. |
||||||
|
|
||||||
|
<br> |
||||||
|
|
||||||
|
**SCSS** |
||||||
|
|
||||||
|
You can also import `pretty-checkbox.scss` in your main scss file. |
||||||
|
```scss |
||||||
|
@import '~pretty-checkbox/src/pretty.scss'; |
||||||
|
``` |
||||||
|
|
||||||
|
Please refer the document for SCSS settings. |
||||||
|
|
||||||
|
|
||||||
|
### Usage |
||||||
|
|
||||||
|
|
||||||
|
Pretty checkbox comes with many styles, |
||||||
|
|
||||||
|
| Class name | Description | |
||||||
|
| :---------- | :----------------------- | |
||||||
|
| `p-default` | Basic style | |
||||||
|
| `p-switch` | iOS like toggle style | |
||||||
|
| `p-icon` | Custom font icons | |
||||||
|
| `p-svg` | Custom SVG files, markup | |
||||||
|
| `p-image` | Tiny images | |
||||||
|
|
||||||
|
And three shapes `p-round` `p-curve` `p-square` (default) |
||||||
|
|
||||||
|
|
||||||
|
#### Basic checkbox |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-default"> |
||||||
|
<input type="checkbox" /> |
||||||
|
<div class="state"> |
||||||
|
<label>Check me</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default) |
||||||
|
|
||||||
|
You can combine them. |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-default p-curve p-fill"> |
||||||
|
<input type="checkbox" /> |
||||||
|
<div class="state"> |
||||||
|
<label>Fill</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
<div align="center"><strong >---</strong></div> |
||||||
|
|
||||||
|
#### Switch checkbox |
||||||
|
|
||||||
|
Switch has three variants `p-outline` `p-fill` `p-slim` |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-switch p-fill"> |
||||||
|
<input type="checkbox" /> |
||||||
|
<div class="state"> |
||||||
|
<label>On</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
<div align="center"><strong >---</strong></div> |
||||||
|
|
||||||
|
#### Custom Font icons |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-icon"> |
||||||
|
<input type="checkbox"> |
||||||
|
<div class="state"> |
||||||
|
<i class="icon fa fa-check"></i> |
||||||
|
<label>Check me</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
<blockquote> |
||||||
|
<sub> |
||||||
|
<strong>Note</strong>: class `icon` should be added along with icon class names |
||||||
|
</sub> |
||||||
|
</blockquote> |
||||||
|
|
||||||
|
<blockquote> |
||||||
|
<sub> |
||||||
|
<strong>Note</strong>: 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. |
||||||
|
</sub> |
||||||
|
</blockquote> |
||||||
|
|
||||||
|
<div align="right"> |
||||||
|
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#fonticons"> |
||||||
|
more details</a></sub></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div align="center"><strong >---</strong></div> |
||||||
|
|
||||||
|
#### SVG |
||||||
|
|
||||||
|
Supports SVG file in <img/> tag, markup (`<svg> ... </svg>`) and sprites |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-svg"> |
||||||
|
<input type="checkbox"> |
||||||
|
<div class="state"> |
||||||
|
<img class="svg" src="file.svg" /> |
||||||
|
<label>Check me</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
<blockquote> |
||||||
|
<sub> |
||||||
|
<strong>Note</strong>: class `svg` to be added in img tag or svg tag. |
||||||
|
</sub> |
||||||
|
</blockquote> |
||||||
|
|
||||||
|
<div align="right"> |
||||||
|
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#svg">more details</a></sub></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div align="center"><strong >---</strong></div> |
||||||
|
|
||||||
|
#### Image |
||||||
|
|
||||||
|
Supports any type of valid image format. |
||||||
|
|
||||||
|
```html |
||||||
|
<div class="pretty p-image"> |
||||||
|
<input type="checkbox" /> |
||||||
|
<div class="state"> |
||||||
|
<img class="image" src="/check.png" /> |
||||||
|
<label>Block</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
<blockquote> |
||||||
|
<sub> |
||||||
|
<strong>Note</strong>: class `image` to be added in img tag. |
||||||
|
</sub> |
||||||
|
</blockquote> |
||||||
|
|
||||||
|
<div align="right"> |
||||||
|
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#image">more details</a></sub></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div align="center"><strong >---</strong></div> |
||||||
|
|
||||||
|
#### 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 |
||||||
|
<div class="pretty p-default p-curve p-thick"> |
||||||
|
<input type="checkbox" /> |
||||||
|
<div class="state p-warning"> |
||||||
|
<label>Warning</label> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
<blockquote> |
||||||
|
<sub> |
||||||
|
<strong>Note</strong>: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature. |
||||||
|
</sub> |
||||||
|
</blockquote> |
||||||
|
|
||||||
|
<div align="right"> |
||||||
|
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#colors">more details</a></sub></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
### More |
||||||
|
|
||||||
|
There are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***. |
||||||
|
|
||||||
|
Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them. |
||||||
|
|
||||||
|
|
||||||
|
### Browser support |
||||||
|
|
||||||
|
Works in all modern browsers. |
||||||
|
|
||||||
|
`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9` |
||||||
|
|
||||||
|
### Font Icon libraries |
||||||
|
* [Font awesome](http://fontawesome.io/icons/) |
||||||
|
* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons) |
||||||
|
* [Material icon ( MDI )](https://materialdesignicons.com/) |
||||||
|
* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html) |
||||||
|
* [Ion icons](http://ionicons.com/) |
||||||
|
* [Typicons](http://www.typicons.com/) |
||||||
|
* [Material icon ( Google )](https://material.io/icons) |
||||||
|
* Others not tested, but will work ( 99% ). |
||||||
|
|
||||||
|
|
||||||
|
### SVG |
||||||
|
* [UIKit](https://getuikit.com/docs/icon) |
||||||
|
* [Feathers](https://feathericons.com/) |
||||||
|
* Others |
||||||
|
|
||||||
|
### Inspiration |
||||||
|
- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea |
||||||
|
- [Animista](http://animista.net) - Animations |
||||||
|
|
||||||
|
### Contributions |
||||||
|
Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome! |
||||||
|
|
||||||
|
### License |
||||||
|
This project is licensed under the MIT License |
||||||
|
|
||||||
|
|
||||||
|
<div align="center"><sub>❤</sub></div> |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,959 @@ |
|||||||
|
/** |
||||||
|
* pretty-checkbox.css |
||||||
|
* |
||||||
|
* A pure CSS library to beautify checkbox and radio buttons |
||||||
|
* |
||||||
|
* Source: https://github.com/lokesh-coder/pretty-checkbox |
||||||
|
* Demo: https://lokesh-coder.github.io/pretty-checkbox |
||||||
|
* |
||||||
|
* Copyright (c) 2017 Lokesh rajendran |
||||||
|
*/ |
||||||
|
|
||||||
|
.pretty * { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:not([type='checkbox']):not([type='radio']) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
margin-right: 1em; |
||||||
|
white-space: nowrap; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
min-width: 1em; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index: 2; |
||||||
|
opacity: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty .state label { |
||||||
|
position: initial; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
margin: 0; |
||||||
|
text-indent: 1.5em; |
||||||
|
min-width: calc(1em + 2px); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty .state label:before, |
||||||
|
.pretty .state label:after { |
||||||
|
content: ''; |
||||||
|
width: calc(1em + 2px); |
||||||
|
height: calc(1em + 2px); |
||||||
|
display: block; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 0; |
||||||
|
border: 1px solid transparent; |
||||||
|
z-index: 0; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: calc((0% - (100% - 1em)) - 8%); |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty .state label:before { |
||||||
|
border-color: #bdc3c7; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty .state.p-is-hover, |
||||||
|
.pretty .state.p-is-indeterminate { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes zoom { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: scale(0); |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes zoom { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: scale(0); |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes tada { |
||||||
|
0% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: scale(7); |
||||||
|
transform: scale(7); |
||||||
|
} |
||||||
|
38% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
opacity: 1; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
55% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.5); |
||||||
|
transform: scale(1.5); |
||||||
|
} |
||||||
|
72% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
81% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.24); |
||||||
|
transform: scale(1.24); |
||||||
|
} |
||||||
|
89% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
95% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.04); |
||||||
|
transform: scale(1.04); |
||||||
|
} |
||||||
|
100% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes tada { |
||||||
|
0% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: scale(7); |
||||||
|
transform: scale(7); |
||||||
|
} |
||||||
|
38% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
opacity: 1; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
55% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.5); |
||||||
|
transform: scale(1.5); |
||||||
|
} |
||||||
|
72% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
81% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.24); |
||||||
|
transform: scale(1.24); |
||||||
|
} |
||||||
|
89% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
95% { |
||||||
|
-webkit-animation-timing-function: ease-in; |
||||||
|
animation-timing-function: ease-in; |
||||||
|
-webkit-transform: scale(1.04); |
||||||
|
transform: scale(1.04); |
||||||
|
} |
||||||
|
100% { |
||||||
|
-webkit-animation-timing-function: ease-out; |
||||||
|
animation-timing-function: ease-out; |
||||||
|
-webkit-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes jelly { |
||||||
|
0% { |
||||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
30% { |
||||||
|
-webkit-transform: scale3d(0.75, 1.25, 1); |
||||||
|
transform: scale3d(0.75, 1.25, 1); |
||||||
|
} |
||||||
|
40% { |
||||||
|
-webkit-transform: scale3d(1.25, 0.75, 1); |
||||||
|
transform: scale3d(1.25, 0.75, 1); |
||||||
|
} |
||||||
|
50% { |
||||||
|
-webkit-transform: scale3d(0.85, 1.15, 1); |
||||||
|
transform: scale3d(0.85, 1.15, 1); |
||||||
|
} |
||||||
|
65% { |
||||||
|
-webkit-transform: scale3d(1.05, 0.95, 1); |
||||||
|
transform: scale3d(1.05, 0.95, 1); |
||||||
|
} |
||||||
|
75% { |
||||||
|
-webkit-transform: scale3d(0.95, 1.05, 1); |
||||||
|
transform: scale3d(0.95, 1.05, 1); |
||||||
|
} |
||||||
|
100% { |
||||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes jelly { |
||||||
|
0% { |
||||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
30% { |
||||||
|
-webkit-transform: scale3d(0.75, 1.25, 1); |
||||||
|
transform: scale3d(0.75, 1.25, 1); |
||||||
|
} |
||||||
|
40% { |
||||||
|
-webkit-transform: scale3d(1.25, 0.75, 1); |
||||||
|
transform: scale3d(1.25, 0.75, 1); |
||||||
|
} |
||||||
|
50% { |
||||||
|
-webkit-transform: scale3d(0.85, 1.15, 1); |
||||||
|
transform: scale3d(0.85, 1.15, 1); |
||||||
|
} |
||||||
|
65% { |
||||||
|
-webkit-transform: scale3d(1.05, 0.95, 1); |
||||||
|
transform: scale3d(1.05, 0.95, 1); |
||||||
|
} |
||||||
|
75% { |
||||||
|
-webkit-transform: scale3d(0.95, 1.05, 1); |
||||||
|
transform: scale3d(0.95, 1.05, 1); |
||||||
|
} |
||||||
|
100% { |
||||||
|
-webkit-transform: scale3d(1, 1, 1); |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes rotate { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: translateZ(-200px) rotate(-45deg); |
||||||
|
transform: translateZ(-200px) rotate(-45deg); |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
-webkit-transform: translateZ(0) rotate(0); |
||||||
|
transform: translateZ(0) rotate(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes rotate { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transform: translateZ(-200px) rotate(-45deg); |
||||||
|
transform: translateZ(-200px) rotate(-45deg); |
||||||
|
} |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
-webkit-transform: translateZ(0) rotate(0); |
||||||
|
transform: translateZ(0) rotate(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes pulse { |
||||||
|
0% { |
||||||
|
box-shadow: 0px 0px 0px 0px #bdc3c7; |
||||||
|
} |
||||||
|
100% { |
||||||
|
box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes pulse { |
||||||
|
0% { |
||||||
|
box-shadow: 0px 0px 0px 0px #bdc3c7; |
||||||
|
} |
||||||
|
100% { |
||||||
|
box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default.p-fill .state label:after { |
||||||
|
-webkit-transform: scale(1); |
||||||
|
-ms-transform: scale(1); |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default .state label:after { |
||||||
|
-webkit-transform: scale(0.6); |
||||||
|
-ms-transform: scale(0.6); |
||||||
|
transform: scale(0.6); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default input:checked ~ .state label:after { |
||||||
|
background-color: #bdc3c7 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default.p-thick .state label:before, |
||||||
|
.pretty.p-default.p-thick .state label:after { |
||||||
|
border-width: calc(1em / 7); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default.p-thick .state label:after { |
||||||
|
-webkit-transform: scale(0.4) !important; |
||||||
|
-ms-transform: scale(0.4) !important; |
||||||
|
transform: scale(0.4) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-icon .state .icon { |
||||||
|
position: absolute; |
||||||
|
font-size: 1em; |
||||||
|
width: calc(1em + 2px); |
||||||
|
height: calc(1em + 2px); |
||||||
|
left: 0; |
||||||
|
z-index: 1; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
top: calc((0% - (100% - 1em)) - 8%); |
||||||
|
border: 1px solid transparent; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-icon .state .icon:before { |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
display: -webkit-box; |
||||||
|
display: -ms-flexbox; |
||||||
|
display: flex; |
||||||
|
-webkit-box-flex: 1; |
||||||
|
-ms-flex: 1; |
||||||
|
flex: 1; |
||||||
|
-webkit-box-pack: center; |
||||||
|
-ms-flex-pack: center; |
||||||
|
justify-content: center; |
||||||
|
-webkit-box-align: center; |
||||||
|
-ms-flex-align: center; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-icon input:checked ~ .state .icon { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-icon input:checked ~ .state label:before { |
||||||
|
border-color: #5a656b; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-svg .state .svg { |
||||||
|
position: absolute; |
||||||
|
font-size: 1em; |
||||||
|
width: calc(1em + 2px); |
||||||
|
height: calc(1em + 2px); |
||||||
|
left: 0; |
||||||
|
z-index: 1; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
top: calc((0% - (100% - 1em)) - 8%); |
||||||
|
border: 1px solid transparent; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-svg .state svg { |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
display: -webkit-box; |
||||||
|
display: -ms-flexbox; |
||||||
|
display: flex; |
||||||
|
-webkit-box-flex: 1; |
||||||
|
-ms-flex: 1; |
||||||
|
flex: 1; |
||||||
|
-webkit-box-pack: center; |
||||||
|
-ms-flex-pack: center; |
||||||
|
justify-content: center; |
||||||
|
-webkit-box-align: center; |
||||||
|
-ms-flex-align: center; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-svg input:checked ~ .state .svg { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-image .state img { |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
width: calc(1em + 2px); |
||||||
|
height: calc(1em + 2px); |
||||||
|
top: 0; |
||||||
|
top: calc((0% - (100% - 1em)) - 8%); |
||||||
|
left: 0; |
||||||
|
z-index: 0; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
-webkit-transform: scale(0.8); |
||||||
|
-ms-transform: scale(0.8); |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-image input:checked ~ .state img { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input { |
||||||
|
min-width: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch .state { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch .state:before { |
||||||
|
content: ''; |
||||||
|
border: 1px solid #bdc3c7; |
||||||
|
border-radius: 60px; |
||||||
|
width: 2em; |
||||||
|
box-sizing: unset; |
||||||
|
height: calc(1em + 2px); |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
top: calc((0% - (100% - 1em)) - 16%); |
||||||
|
z-index: 0; |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch .state label { |
||||||
|
text-indent: 2.5em; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch .state label:before, |
||||||
|
.pretty.p-switch .state label:after { |
||||||
|
transition: all 0.5s ease; |
||||||
|
border-radius: 100%; |
||||||
|
left: 0; |
||||||
|
border-color: transparent; |
||||||
|
-webkit-transform: scale(0.8); |
||||||
|
-ms-transform: scale(0.8); |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch .state label:after { |
||||||
|
background-color: #bdc3c7 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state:before { |
||||||
|
border-color: #5a656b; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state label:before { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state label:after { |
||||||
|
background-color: #5a656b !important; |
||||||
|
left: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state:before { |
||||||
|
border-color: #5a656b; |
||||||
|
background-color: #5a656b !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state label:before { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state label:after { |
||||||
|
background-color: #fff !important; |
||||||
|
left: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim .state:before { |
||||||
|
height: 0.1em; |
||||||
|
background: #bdc3c7 !important; |
||||||
|
top: calc(50% - 0.1em); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state:before { |
||||||
|
border-color: #5a656b; |
||||||
|
background-color: #5a656b !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-hover input:hover ~ .state.p-is-hover { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-focus input:focus ~ .state label:before { |
||||||
|
box-shadow: 0px 0px 3px 0px #bdc3c7; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon { |
||||||
|
display: block; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-toggle .state.p-on { |
||||||
|
opacity: 0; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-toggle .state.p-off, |
||||||
|
.pretty.p-toggle .state .icon, |
||||||
|
.pretty.p-toggle .state .svg, |
||||||
|
.pretty.p-toggle .state img { |
||||||
|
opacity: 1; |
||||||
|
display: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-toggle .state.p-off .icon { |
||||||
|
color: #bdc3c7; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-toggle input:checked ~ .state.p-on { |
||||||
|
opacity: 1; |
||||||
|
display: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-toggle input:checked ~ .state.p-off { |
||||||
|
opacity: 0; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-plain input:checked ~ .state label:before, |
||||||
|
.pretty.p-plain.p-toggle .state label:before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-plain.p-plain .icon { |
||||||
|
-webkit-transform: scale(1.1); |
||||||
|
-ms-transform: scale(1.1); |
||||||
|
transform: scale(1.1); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-round .state label:before, |
||||||
|
.pretty.p-round .state label:after { |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-round.p-icon .state .icon { |
||||||
|
border-radius: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-round.p-icon .state .icon:before { |
||||||
|
-webkit-transform: scale(0.8); |
||||||
|
-ms-transform: scale(0.8); |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-curve .state label:before, |
||||||
|
.pretty.p-curve .state label:after { |
||||||
|
border-radius: 20%; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-smooth label:before, |
||||||
|
.pretty.p-smooth label:after, |
||||||
|
.pretty.p-smooth .icon, |
||||||
|
.pretty.p-smooth .svg { |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-smooth input:checked + .state label:after { |
||||||
|
transition: all 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-smooth input:checked + .state .icon, |
||||||
|
.pretty.p-smooth input:checked + .state .svg, |
||||||
|
.pretty.p-smooth input:checked + .state img { |
||||||
|
-webkit-animation: zoom 0.2s ease; |
||||||
|
animation: zoom 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-smooth.p-default input:checked + .state label:after { |
||||||
|
-webkit-animation: zoom 0.2s ease; |
||||||
|
animation: zoom 0.2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-smooth.p-plain input:checked + .state label:before { |
||||||
|
content: ''; |
||||||
|
-webkit-transform: scale(0); |
||||||
|
-ms-transform: scale(0); |
||||||
|
transform: scale(0); |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-tada:not(.p-default) input:checked + .state .icon, |
||||||
|
.pretty.p-tada:not(.p-default) input:checked + .state .svg, |
||||||
|
.pretty.p-tada:not(.p-default) input:checked + .state img, |
||||||
|
.pretty.p-tada:not(.p-default) input:checked + .state label:before, |
||||||
|
.pretty.p-tada:not(.p-default) input:checked + .state label:after { |
||||||
|
-webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; |
||||||
|
animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state .icon, |
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state .svg, |
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state img, |
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state label:before, |
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state label:after { |
||||||
|
-webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||||
|
animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-jelly:not(.p-default) input:checked + .state label:before { |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon, |
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg, |
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state img, |
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before, |
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after { |
||||||
|
-webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||||
|
animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before { |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before { |
||||||
|
-webkit-animation: pulse 1s; |
||||||
|
animation: pulse 1s; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input[disabled] { |
||||||
|
cursor: not-allowed; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input[disabled] ~ * { |
||||||
|
opacity: .5; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-locked input { |
||||||
|
display: none; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-primary label:after, |
||||||
|
.pretty.p-toggle .state.p-primary label:after { |
||||||
|
background-color: #428bca !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-primary .icon, |
||||||
|
.pretty input:checked ~ .state.p-primary .svg, |
||||||
|
.pretty.p-toggle .state.p-primary .icon, |
||||||
|
.pretty.p-toggle .state.p-primary .svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-primary-o label:before, |
||||||
|
.pretty.p-toggle .state.p-primary-o label:before { |
||||||
|
border-color: #428bca; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-primary-o label:after, |
||||||
|
.pretty.p-toggle .state.p-primary-o label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-primary-o .icon, |
||||||
|
.pretty input:checked ~ .state.p-primary-o .svg, |
||||||
|
.pretty input:checked ~ .state.p-primary-o svg, |
||||||
|
.pretty.p-toggle .state.p-primary-o .icon, |
||||||
|
.pretty.p-toggle .state.p-primary-o .svg, |
||||||
|
.pretty.p-toggle .state.p-primary-o svg { |
||||||
|
color: #428bca; |
||||||
|
stroke: #428bca; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after { |
||||||
|
background-color: #428bca !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state.p-primary:before { |
||||||
|
border-color: #428bca; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before { |
||||||
|
background-color: #428bca !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before { |
||||||
|
border-color: #245682; |
||||||
|
background-color: #245682 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-info label:after, |
||||||
|
.pretty.p-toggle .state.p-info label:after { |
||||||
|
background-color: #5bc0de !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-info .icon, |
||||||
|
.pretty input:checked ~ .state.p-info .svg, |
||||||
|
.pretty.p-toggle .state.p-info .icon, |
||||||
|
.pretty.p-toggle .state.p-info .svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-info-o label:before, |
||||||
|
.pretty.p-toggle .state.p-info-o label:before { |
||||||
|
border-color: #5bc0de; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-info-o label:after, |
||||||
|
.pretty.p-toggle .state.p-info-o label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-info-o .icon, |
||||||
|
.pretty input:checked ~ .state.p-info-o .svg, |
||||||
|
.pretty input:checked ~ .state.p-info-o svg, |
||||||
|
.pretty.p-toggle .state.p-info-o .icon, |
||||||
|
.pretty.p-toggle .state.p-info-o .svg, |
||||||
|
.pretty.p-toggle .state.p-info-o svg { |
||||||
|
color: #5bc0de; |
||||||
|
stroke: #5bc0de; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after { |
||||||
|
background-color: #5bc0de !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state.p-info:before { |
||||||
|
border-color: #5bc0de; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state.p-info:before { |
||||||
|
background-color: #5bc0de !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state.p-info:before { |
||||||
|
border-color: #2390b0; |
||||||
|
background-color: #2390b0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-success label:after, |
||||||
|
.pretty.p-toggle .state.p-success label:after { |
||||||
|
background-color: #5cb85c !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-success .icon, |
||||||
|
.pretty input:checked ~ .state.p-success .svg, |
||||||
|
.pretty.p-toggle .state.p-success .icon, |
||||||
|
.pretty.p-toggle .state.p-success .svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-success-o label:before, |
||||||
|
.pretty.p-toggle .state.p-success-o label:before { |
||||||
|
border-color: #5cb85c; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-success-o label:after, |
||||||
|
.pretty.p-toggle .state.p-success-o label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-success-o .icon, |
||||||
|
.pretty input:checked ~ .state.p-success-o .svg, |
||||||
|
.pretty input:checked ~ .state.p-success-o svg, |
||||||
|
.pretty.p-toggle .state.p-success-o .icon, |
||||||
|
.pretty.p-toggle .state.p-success-o .svg, |
||||||
|
.pretty.p-toggle .state.p-success-o svg { |
||||||
|
color: #5cb85c; |
||||||
|
stroke: #5cb85c; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after { |
||||||
|
background-color: #5cb85c !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state.p-success:before { |
||||||
|
border-color: #5cb85c; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state.p-success:before { |
||||||
|
background-color: #5cb85c !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state.p-success:before { |
||||||
|
border-color: #357935; |
||||||
|
background-color: #357935 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-warning label:after, |
||||||
|
.pretty.p-toggle .state.p-warning label:after { |
||||||
|
background-color: #f0ad4e !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-warning .icon, |
||||||
|
.pretty input:checked ~ .state.p-warning .svg, |
||||||
|
.pretty.p-toggle .state.p-warning .icon, |
||||||
|
.pretty.p-toggle .state.p-warning .svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-warning-o label:before, |
||||||
|
.pretty.p-toggle .state.p-warning-o label:before { |
||||||
|
border-color: #f0ad4e; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-warning-o label:after, |
||||||
|
.pretty.p-toggle .state.p-warning-o label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-warning-o .icon, |
||||||
|
.pretty input:checked ~ .state.p-warning-o .svg, |
||||||
|
.pretty input:checked ~ .state.p-warning-o svg, |
||||||
|
.pretty.p-toggle .state.p-warning-o .icon, |
||||||
|
.pretty.p-toggle .state.p-warning-o .svg, |
||||||
|
.pretty.p-toggle .state.p-warning-o svg { |
||||||
|
color: #f0ad4e; |
||||||
|
stroke: #f0ad4e; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after { |
||||||
|
background-color: #f0ad4e !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state.p-warning:before { |
||||||
|
border-color: #f0ad4e; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before { |
||||||
|
background-color: #f0ad4e !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before { |
||||||
|
border-color: #c77c11; |
||||||
|
background-color: #c77c11 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-danger label:after, |
||||||
|
.pretty.p-toggle .state.p-danger label:after { |
||||||
|
background-color: #d9534f !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-danger .icon, |
||||||
|
.pretty input:checked ~ .state.p-danger .svg, |
||||||
|
.pretty.p-toggle .state.p-danger .icon, |
||||||
|
.pretty.p-toggle .state.p-danger .svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-danger-o label:before, |
||||||
|
.pretty.p-toggle .state.p-danger-o label:before { |
||||||
|
border-color: #d9534f; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-danger-o label:after, |
||||||
|
.pretty.p-toggle .state.p-danger-o label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty input:checked ~ .state.p-danger-o .icon, |
||||||
|
.pretty input:checked ~ .state.p-danger-o .svg, |
||||||
|
.pretty input:checked ~ .state.p-danger-o svg, |
||||||
|
.pretty.p-toggle .state.p-danger-o .icon, |
||||||
|
.pretty.p-toggle .state.p-danger-o .svg, |
||||||
|
.pretty.p-toggle .state.p-danger-o svg { |
||||||
|
color: #d9534f; |
||||||
|
stroke: #d9534f; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after { |
||||||
|
background-color: #d9534f !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch input:checked ~ .state.p-danger:before { |
||||||
|
border-color: #d9534f; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before { |
||||||
|
background-color: #d9534f !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before { |
||||||
|
border-color: #a02622; |
||||||
|
background-color: #a02622 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-bigger label:before, |
||||||
|
.pretty.p-bigger label:after, |
||||||
|
.pretty.p-bigger .icon, |
||||||
|
.pretty.p-bigger .svg, |
||||||
|
.pretty.p-bigger .img { |
||||||
|
font-size: 1.2em !important; |
||||||
|
top: calc((0% - (100% - 1em)) - 35%) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pretty.p-bigger label { |
||||||
|
text-indent: 1.7em; |
||||||
|
} |
||||||
|
|
||||||
|
@media print { |
||||||
|
.pretty .state:before, |
||||||
|
.pretty .state label:before, |
||||||
|
.pretty .state label:after, |
||||||
|
.pretty .state .icon { |
||||||
|
color-adjust: exact; |
||||||
|
/* stylelint-disable */ |
||||||
|
-webkit-print-color-adjust: exact; |
||||||
|
print-color-adjust: exact; |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
@ -0,0 +1,65 @@ |
|||||||
|
{ |
||||||
|
"name": "pretty-checkbox", |
||||||
|
"version": "3.0.3", |
||||||
|
"description": "A pure css library to beautify checkbox and radio buttons.", |
||||||
|
"main": "dist/pretty-checkbox.min.css", |
||||||
|
"scripts": { |
||||||
|
"lint":"gulp lint:scss", |
||||||
|
"fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", |
||||||
|
"format": "gulp css:format", |
||||||
|
"build": "gulp build", |
||||||
|
"ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"", |
||||||
|
"release": "corp-semantic-release", |
||||||
|
"log": "conventional-github-releaser -p angular -r 0" |
||||||
|
}, |
||||||
|
"dependencies": {}, |
||||||
|
"devDependencies": { |
||||||
|
"browser-sync": "^2.8.2", |
||||||
|
"conventional-github-releaser": "^1.1.12", |
||||||
|
"corp-semantic-release": "^6.1.0", |
||||||
|
"del": "^3.0.0", |
||||||
|
"gulp": "^3.9.0", |
||||||
|
"gulp-autoprefixer": "^3.1.1", |
||||||
|
"gulp-clean-css": "^3.9.0", |
||||||
|
"gulp-header-comment": "^0.2.1", |
||||||
|
"gulp-rename": "^1.2.2", |
||||||
|
"gulp-sass": "^2.3.1", |
||||||
|
"gulp-sequence": "^0.4.6", |
||||||
|
"gulp-sourcemaps": "^2.6.1", |
||||||
|
"gulp-stylefmt": "^1.1.0", |
||||||
|
"gulp-stylelint": "^5.0.0", |
||||||
|
"rimraf": "2.6.1", |
||||||
|
"stylefmt": "^6.0.0", |
||||||
|
"stylelint": "^8.2.0", |
||||||
|
"stylelint-config-recommended": "^1.0.0", |
||||||
|
"stylelint-config-recommended-scss": "^2.0.0", |
||||||
|
"stylelint-scss": "^2.1.0" |
||||||
|
}, |
||||||
|
"repository": { |
||||||
|
"type": "git", |
||||||
|
"url": "git+https://github.com/lokesh-coder/pretty-checkbox.git", |
||||||
|
"link": "https://github.com/lokesh-coder/pretty-checkbox" |
||||||
|
}, |
||||||
|
"keywords": [ |
||||||
|
"checkbox", |
||||||
|
"radio", |
||||||
|
"bootstrap", |
||||||
|
"fonticon", |
||||||
|
"icon", |
||||||
|
"svg", |
||||||
|
"switch", |
||||||
|
"toggle", |
||||||
|
"sass", |
||||||
|
"css3", |
||||||
|
"animation", |
||||||
|
"pretty", |
||||||
|
"check", |
||||||
|
"colors" |
||||||
|
], |
||||||
|
"author": "Lokesh Rajendran", |
||||||
|
"license": "MIT", |
||||||
|
"bugs": { |
||||||
|
"url": "https://github.com/lokesh-coder/pretty-checkbox/issues" |
||||||
|
}, |
||||||
|
"homepage": "https://lokesh-coder.github.io/pretty-checkbox" |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 95 KiB |
@ -0,0 +1,27 @@ |
|||||||
|
@import './scss/variables'; |
||||||
|
@import './scss/core'; |
||||||
|
@import './scss/essentials/keyframes'; |
||||||
|
@import './scss/essentials/functions'; |
||||||
|
@import './scss/essentials/mixins'; |
||||||
|
@import './scss/elements/default/fill'; |
||||||
|
@import './scss/elements/default/outline'; |
||||||
|
@import './scss/elements/default/thick'; |
||||||
|
@import './scss/elements/font-icon/general'; |
||||||
|
@import './scss/elements/svg/general'; |
||||||
|
@import './scss/elements/image/general'; |
||||||
|
@import './scss/elements/switch/general'; |
||||||
|
@import './scss/elements/switch/fill'; |
||||||
|
@import './scss/elements/switch/slim'; |
||||||
|
@import './scss/states/hover'; |
||||||
|
@import './scss/states/focus'; |
||||||
|
@import './scss/states/indeterminate'; |
||||||
|
@import './scss/extras/toggle'; |
||||||
|
@import './scss/extras/plain'; |
||||||
|
@import './scss/extras/round'; |
||||||
|
@import './scss/extras/curve'; |
||||||
|
@import './scss/extras/animation'; |
||||||
|
@import './scss/extras/disabled'; |
||||||
|
@import './scss/extras/locked'; |
||||||
|
@import './scss/extras/colors'; |
||||||
|
@import './scss/extras/bigger'; |
||||||
|
@import './scss/extras/print'; |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
@charset 'utf-8'; |
||||||
|
|
||||||
|
.#{$pretty--class-name} * { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
//Throw error on invalid input types. |
||||||
|
.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) { |
||||||
|
display: none; |
||||||
|
|
||||||
|
@if $pretty--debug { |
||||||
|
+ *:after { |
||||||
|
content: $pretty--err-message; |
||||||
|
border: 1px solid #dedede; |
||||||
|
border-left: 3px solid #d9534f; |
||||||
|
padding: 9px; |
||||||
|
font-size: 1em; |
||||||
|
font-weight: 600; |
||||||
|
color: #d9534f; |
||||||
|
position: absolute; |
||||||
|
z-index: 3; |
||||||
|
background: #fbfbfb; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$pretty--class-name} { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
margin-right: 1em; |
||||||
|
white-space: nowrap; |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
input { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
min-width: 1em; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
z-index: $pretty--z-index-front; |
||||||
|
opacity: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.state { |
||||||
|
label { |
||||||
|
position: initial; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
margin: 0; |
||||||
|
text-indent: $pretty--label-text-offset; |
||||||
|
min-width: $pretty--box-size; |
||||||
|
|
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
content: ''; |
||||||
|
width: $pretty--box-size; |
||||||
|
height: $pretty--box-size; |
||||||
|
display: block; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 0; |
||||||
|
border: 1px solid transparent; |
||||||
|
z-index: $pretty--z-index-back; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: $pretty-top-offset; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
border-color: $pretty--color-default; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-is-hover, |
||||||
|
&.p-is-indeterminate { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
$pretty--class-name: pretty !default; |
||||||
|
|
||||||
|
// colors |
||||||
|
$pretty--color-default: #bdc3c7 !default; |
||||||
|
$pretty--color-primary: #428bca !default; |
||||||
|
$pretty--color-info: #5bc0de !default; |
||||||
|
$pretty--color-success: #5cb85c !default; |
||||||
|
$pretty--color-warning: #f0ad4e !default; |
||||||
|
$pretty--color-danger: #d9534f !default; |
||||||
|
$pretty--color-dark: #5a656b !default; |
||||||
|
|
||||||
|
// z-index |
||||||
|
$pretty--z-index-back: 0 !default; |
||||||
|
$pretty--z-index-between: 1 !default; |
||||||
|
$pretty--z-index-front: 2 !default; |
||||||
|
|
||||||
|
// box |
||||||
|
$pretty--curve-radius: 20% !default; |
||||||
|
$pretty--box-size: calc(1em + 2px) !default; |
||||||
|
|
||||||
|
// text |
||||||
|
$pretty--label-text-offset: 1.5em !default; |
||||||
|
$pretty--label-text-offset-switch: 2.5em !default; |
||||||
|
|
||||||
|
// scale |
||||||
|
$pretty--2x: 1.2em !default; |
||||||
|
|
||||||
|
// color set |
||||||
|
$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default; |
||||||
|
|
||||||
|
// position |
||||||
|
$pretty-top: 8; |
||||||
|
$pretty-top-switch: ($pretty-top * 2) * 1%; |
||||||
|
$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%}); |
||||||
|
$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch}); |
||||||
|
|
||||||
|
// dev |
||||||
|
$pretty--debug: false !default; |
||||||
|
$pretty--err-message: 'Error: Invalid input type!' !default; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
.#{$pretty--class-name}.p-default.p-fill { |
||||||
|
.state label { |
||||||
|
&:after { |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
.#{$pretty--class-name}.p-default { |
||||||
|
.state label { |
||||||
|
&:after { |
||||||
|
transform: scale(0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state label { |
||||||
|
&:after { |
||||||
|
background-color: $pretty--color-default !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
.#{$pretty--class-name}.p-default.p-thick { |
||||||
|
.state label { |
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
border-width: calc(1em / 7); |
||||||
|
} |
||||||
|
|
||||||
|
&:after { |
||||||
|
transform: scale(0.4) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
.#{$pretty--class-name}.p-icon { |
||||||
|
.state { |
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
font-size: 1em; |
||||||
|
width: $pretty--box-size; |
||||||
|
height: $pretty--box-size; |
||||||
|
left: 0; |
||||||
|
z-index: $pretty--z-index-between; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
top: $pretty-top-offset; |
||||||
|
border: 1px solid transparent; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.icon:before { |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state { |
||||||
|
.icon { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
label:before { |
||||||
|
border-color: #5a656b; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
.#{$pretty--class-name}.p-image { |
||||||
|
.state { |
||||||
|
img { |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
width: $pretty--box-size; |
||||||
|
height: $pretty--box-size; |
||||||
|
top: 0; |
||||||
|
top: $pretty-top-offset; |
||||||
|
left: 0; |
||||||
|
z-index: $pretty--z-index-back; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state img { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
.#{$pretty--class-name}.p-svg { |
||||||
|
.state { |
||||||
|
.svg { |
||||||
|
position: absolute; |
||||||
|
font-size: 1em; |
||||||
|
width: $pretty--box-size; |
||||||
|
height: $pretty--box-size; |
||||||
|
left: 0; |
||||||
|
z-index: $pretty--z-index-between; |
||||||
|
text-align: center; |
||||||
|
line-height: normal; |
||||||
|
top: $pretty-top-offset; |
||||||
|
border: 1px solid transparent; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
svg { |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state .svg { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
.#{$pretty--class-name}.p-switch.p-fill { |
||||||
|
input:checked~.state { |
||||||
|
&:before { |
||||||
|
border-color: $pretty--color-dark; |
||||||
|
background-color: $pretty--color-dark !important; |
||||||
|
} |
||||||
|
label:before { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
label:after { |
||||||
|
background-color: #fff !important; |
||||||
|
left: 1em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +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; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
text-indent: $pretty--label-text-offset-switch; |
||||||
|
|
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
transition: all 0.5s ease; |
||||||
|
border-radius: 100%; |
||||||
|
left: 0; |
||||||
|
border-color: transparent; |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
|
||||||
|
&:after { |
||||||
|
background-color: $pretty--color-default !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state { |
||||||
|
&:before { |
||||||
|
border-color: $pretty--color-dark; |
||||||
|
} |
||||||
|
|
||||||
|
label:before { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
label:after { |
||||||
|
background-color: $pretty--color-dark !important; |
||||||
|
left: 1em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
.#{$pretty--class-name}.p-switch.p-slim { |
||||||
|
.state { |
||||||
|
&:before { |
||||||
|
height: 0.1em; |
||||||
|
background: $pretty--color-default !important; |
||||||
|
top: calc(50% - 0.1em); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state { |
||||||
|
&:before { |
||||||
|
border-color: $pretty--color-dark; |
||||||
|
background-color: $pretty--color-dark !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
// empty |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
@keyframes zoom { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes tada { |
||||||
|
0% { |
||||||
|
animation-timing-function: ease-in; |
||||||
|
opacity: 0; |
||||||
|
transform: scale(7); |
||||||
|
} |
||||||
|
|
||||||
|
38% { |
||||||
|
animation-timing-function: ease-out; |
||||||
|
opacity: 1; |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
55% { |
||||||
|
animation-timing-function: ease-in; |
||||||
|
transform: scale(1.5); |
||||||
|
} |
||||||
|
|
||||||
|
72% { |
||||||
|
animation-timing-function: ease-out; |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
81% { |
||||||
|
animation-timing-function: ease-in; |
||||||
|
transform: scale(1.24); |
||||||
|
} |
||||||
|
|
||||||
|
89% { |
||||||
|
animation-timing-function: ease-out; |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
|
||||||
|
95% { |
||||||
|
animation-timing-function: ease-in; |
||||||
|
transform: scale(1.04); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
animation-timing-function: ease-out; |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes jelly { |
||||||
|
0% { |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
|
||||||
|
30% { |
||||||
|
transform: scale3d(.75, 1.25, 1); |
||||||
|
} |
||||||
|
|
||||||
|
40% { |
||||||
|
transform: scale3d(1.25, .75, 1); |
||||||
|
} |
||||||
|
|
||||||
|
50% { |
||||||
|
transform: scale3d(.85, 1.15, 1); |
||||||
|
} |
||||||
|
|
||||||
|
65% { |
||||||
|
transform: scale3d(1.05, .95, 1); |
||||||
|
} |
||||||
|
|
||||||
|
75% { |
||||||
|
transform: scale3d(.95, 1.05, 1); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: scale3d(1, 1, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes rotate { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
transform: translateZ(-200px) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
transform: translateZ(0) rotate(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes pulse { |
||||||
|
0% { |
||||||
|
box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
// empty |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
.#{$pretty--class-name}.p-smooth { |
||||||
|
label:before, |
||||||
|
label:after, |
||||||
|
.icon, |
||||||
|
.svg { |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
|
||||||
|
input:checked + .state { |
||||||
|
label:after { |
||||||
|
transition: all 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
img { |
||||||
|
animation: zoom 0.2s ease; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-default input:checked + .state { |
||||||
|
label:after { |
||||||
|
animation: zoom 0.2s ease; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-plain input:checked + .state { |
||||||
|
label:before { |
||||||
|
content: ''; |
||||||
|
transform: scale(0); |
||||||
|
transition: all 0.5s ease; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$pretty--class-name}.p-tada:not(.p-default) { |
||||||
|
input:checked + .state { |
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
img, |
||||||
|
label:before, |
||||||
|
label:after { |
||||||
|
animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$pretty--class-name}.p-jelly:not(.p-default) { |
||||||
|
input:checked + .state { |
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
img, |
||||||
|
label:before, |
||||||
|
label:after { |
||||||
|
animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
label:before { |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$pretty--class-name}.p-rotate:not(.p-default) { |
||||||
|
input:checked ~ .state { |
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
img, |
||||||
|
label:before, |
||||||
|
label:after { |
||||||
|
animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
label:before { |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.#{$pretty--class-name}.p-pulse:not(.p-switch) { |
||||||
|
input:checked ~ .state { |
||||||
|
label:before { |
||||||
|
animation: pulse 1s; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
.#{$pretty--class-name}.p-bigger { |
||||||
|
label:before, |
||||||
|
label:after, |
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
.img { |
||||||
|
font-size: $pretty--2x !important; |
||||||
|
top: calc((0% - (100% - 1em)) - 35%) !important; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
text-indent: 1.7em; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
.#{$pretty--class-name} { |
||||||
|
@each $name, $color in $pretty--colors { |
||||||
|
input:checked ~ .state.p-#{$name}, |
||||||
|
&.p-toggle .state.p-#{$name} { |
||||||
|
label:after { |
||||||
|
background-color: $color !important; |
||||||
|
} |
||||||
|
|
||||||
|
.icon, |
||||||
|
.svg { |
||||||
|
color: #fff; |
||||||
|
stroke: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state.p-#{$name}-o, |
||||||
|
&.p-toggle .state.p-#{$name}-o { |
||||||
|
label:before { |
||||||
|
border-color: $color; |
||||||
|
} |
||||||
|
|
||||||
|
label:after { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
svg { |
||||||
|
color: $color; |
||||||
|
stroke: $color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label { |
||||||
|
&:after { |
||||||
|
background-color: $color !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-switch input:checked ~ .state.p-#{$name}:before { |
||||||
|
border-color: $color; |
||||||
|
} |
||||||
|
|
||||||
|
&.p-switch.p-fill input:checked ~ .state.p-#{$name}:before { |
||||||
|
background-color: $color !important; |
||||||
|
} |
||||||
|
|
||||||
|
&.p-switch.p-slim input:checked ~ .state.p-#{$name}:before { |
||||||
|
border-color: darken($color, 20%); |
||||||
|
background-color: darken($color, 20%) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.#{$pretty--class-name}.p-curve { |
||||||
|
.state label { |
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
border-radius: $pretty--curve-radius; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
.#{$pretty--class-name} { |
||||||
|
input { |
||||||
|
&[disabled] { |
||||||
|
cursor: not-allowed; |
||||||
|
display: none; |
||||||
|
|
||||||
|
& ~ * { |
||||||
|
opacity: .5; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
.#{$pretty--class-name}.p-locked { |
||||||
|
input { |
||||||
|
display: none; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
.#{$pretty--class-name}.p-plain { |
||||||
|
input:checked ~ .state label, |
||||||
|
&.p-toggle .state label { |
||||||
|
&:before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-plain .icon { |
||||||
|
transform: scale(1.1); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
@media print { |
||||||
|
.#{$pretty--class-name} { |
||||||
|
.state:before, |
||||||
|
.state label:before, |
||||||
|
.state label:after, |
||||||
|
.state .icon { |
||||||
|
color-adjust: exact; |
||||||
|
/* stylelint-disable */ |
||||||
|
-webkit-print-color-adjust: exact; |
||||||
|
print-color-adjust: exact; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
.#{$pretty--class-name}.p-round { |
||||||
|
.state label { |
||||||
|
&:before, |
||||||
|
&:after { |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.p-icon .state .icon { |
||||||
|
border-radius: 100%; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:before { |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
.#{$pretty--class-name}.p-toggle { |
||||||
|
.state { |
||||||
|
&.p-on { |
||||||
|
opacity: 0; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.p-off, |
||||||
|
.icon, |
||||||
|
.svg, |
||||||
|
img { |
||||||
|
opacity: 1; |
||||||
|
display: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
&.p-off .icon { |
||||||
|
color: $pretty--color-default; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input:checked ~ .state { |
||||||
|
&.p-on { |
||||||
|
opacity: 1; |
||||||
|
display: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
&.p-off { |
||||||
|
opacity: 0; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
.#{$pretty--class-name}.p-has-focus { |
||||||
|
input:focus { |
||||||
|
~ .state label:before { |
||||||
|
box-shadow: 0px 0px 3px 0px rgb(189, 195, 199); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
.#{$pretty--class-name}.p-has-hover { |
||||||
|
input:hover ~ .state:not(.p-is-hover) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
input:hover ~ .state.p-is-hover { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.icon { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
.#{$pretty--class-name}.p-has-indeterminate { |
||||||
|
input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
input[type='checkbox']:indeterminate ~.state.p-is-indeterminate { |
||||||
|
display: block; |
||||||
|
|
||||||
|
.icon { |
||||||
|
display: block; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue