Skip to content

Commit

Permalink
minor bug fixes and changed sass variables
Browse files Browse the repository at this point in the history
  • Loading branch information
lo kesh committed Nov 23, 2016
1 parent 42fcb17 commit ed2839b
Show file tree
Hide file tree
Showing 16 changed files with 370 additions and 397 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/
test/
test/
yarn.lock
130 changes: 21 additions & 109 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
# Pretty checkbox

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

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

### Get started

Install the library from `bower` or `npm` package manager
Install the library from `bower` , `npm` or `yarn` package manager

```sh
> bower install pretty-checkbox
```
```sh
> npm install pretty-checkbox
```
```sh
> yarn add pretty-checkbox
```
Add `pretty.min.css` in your html

From CDN,
From CDN,
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.0.2/pretty.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.1.0/pretty.min.css"/>
```
or from the source,
```html
Expand All @@ -34,127 +37,36 @@ You can also import `pretty.scss` in your main scss file.
Checkbox markup,
```html
<div class="pretty">
<input type="checkbox"/>
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Buy vegetables</label>
</div>
```

### checkbox Features
### Basic examples

##### Inline checkbox
```html
<div class="pretty inline">
<input type="checkbox"/>
<label><i class="mdi mdi-close"></i> Buy vegetable</label>
</div>
```
##### Rounded Checkbox
```html
<div class="pretty inline circle">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Monday</label>
</div>
```
##### Checkbox

##### Solid Checkbox color
```html
<div class="pretty inline primary">
<input type="checkbox"/>
<div class="pretty primary">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Primary</label>
</div>
```
Color variants: `primary` , `success` , `warning` , `info` , `danger`
##### Outline Checkbox color
```html
<div class="pretty inline outline-primary">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Outline primary</label>
</div>
```
Color variants: `outline-primary` , `outline-success` , `outline-warning` , `outline-info` , `outline-danger`
##### Without border - plain checkbox
```html
<div class="pretty inline outline-success plain">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Oh, yes!</label>
</div>
```
##### Animated checkbox
```html
<div class="pretty inline outline-danger smooth">
<input type="checkbox">
<label><i class="mdi mdi-close"></i> Smooth animation</label>
</div>
```
##### Disabled checkbox
```html
<div class="pretty inline">
<input type="checkbox" disabled>
<label><i class="mdi mdi-check"></i> Disabled</label>
</div>
```
##### Toggle checkbox
```html
<div class="pretty inline toggle">
<input type="checkbox"/>
<label><i class="mdi mdi-microphone"></i> ON</label>
<label><i class="mdi mdi-microphone-off"></i> OFF</label>
</div>
```
##### Toggle checkbox without border
```html
<div class="pretty inline plain toggle">
<input type="checkbox"/>
<label><i class="mdi mdi-wifi"></i> WIFI ON</label>
<label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
</div>
```
##### Toggle checkbox with colors
```html
<div class="pretty inline plain toggle">
<input type="checkbox"/>
<label><i class="mdi mdi-play"></i> Play</label>
<label><i class="mdi mdi-pause success"></i> Pause</label>
</div>
```
##### Toggle checkbox with alternative colors
```html
<div class="pretty inline plain toggle">
<input type="checkbox"/>
<label><i class="mdi mdi-thumb-up success"></i> Liked</label>
<label><i class="mdi mdi-thumb-down danger"></i> Disliked</label>
</div>
```
### Radio button Features

##### Basic radio
```html
<div class="pretty inline circle">
<input type="radio" name="radio1">
<label><i class="default"></i> Default</label>
</div>
<div class="pretty inline circle">
<input type="radio" name="radio1">
<label><i class="mdi mdi-check"></i> With icon</label>
</div>
```
All the features in the checkbox is supported for radio buttons. It includes
`Boxed radio button` , `Solid Color radio` , `Outline Color radio` , `Radio button without border` , `Animated radio button` , `Disabled radio button` , `Toggle radio button`.

##### Radio

##### Toggle radio button without labels
```html
<div class="pretty inline circle plain toggle">
<input type="radio" name="radio9" checked>
<label><i class="mdi mdi-microphone-off"></i></label>
<label><i class="mdi mdi-microphone danger"></i></label>
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 1</label>
</div>
<div class="pretty inline circle plain toggle">
<input type="radio" name="radio9">
<label><i class="mdi mdi-microphone-off"></i></label>
<label><i class="mdi mdi-microphone danger"></i></label>
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 2</label>
</div>
```
Refer the [Documentation](https://lokesh-coder.github.io/pretty-checkbox/) for other features and sass settings.


### Custom font library

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "pretty-checkbox",
"version": "2.0.4",
"version": "2.1.0",
"description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
"main": "src/pretty.min.css",
"dependencies": {},
Expand Down
73 changes: 36 additions & 37 deletions src/pretty.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
}

@media print {
.pretty:not(.toggle) input:not(:checked) + label i:before,
.pretty :not(.toggle) input:not(:checked) + label i:before,
.pretty > input[type='radio']:checked + label > i.default:before,
.pretty i:after {
-webkit-print-color-adjust: exact;
Expand Down Expand Up @@ -148,9 +148,10 @@
}

.pretty {
position: relative;
line-height: 1;
margin-bottom: 5px;
position: relative;
display: inline-block;
margin: 0 10px 5px 0;
}

.pretty label {
Expand All @@ -160,39 +161,47 @@
.pretty > input[type='checkbox'],
.pretty > input[type='radio'] {
position: absolute;
display: block;
left: 0;
z-index: 99999999;
top: 0;
height: 100%;
left: 0;
display: block;
width: 100%;
opacity: 0;
height: 100%;
margin: 0;
cursor: pointer;
z-index: 99999999;
opacity: 0;
}

.pretty i {
font-size: 1em !important;
position: relative;
display: inline-block;
box-sizing: initial;
min-width: 1em;
margin-right: 6px;
padding: 1px;
text-align: center;
}

.pretty i:before {
margin-right: 5px;
vertical-align: bottom;
display: inline-block;
color: transparent;
position: relative;
z-index: 999;
left: -1px;
left: 0;
display: inline-block;
vertical-align: bottom;
color: transparent;
}

.pretty i:after {
content: '\0000';
border-radius: 2px;
border: 1px solid #aaa;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '\0000';
color: transparent;
left: -1px;
top: -1px;
border: 1px solid #aaa;
border-radius: 2px;
}

.pretty > input[type='checkbox']:checked + label > i:before,
Expand All @@ -201,15 +210,16 @@
}

.pretty > input[type='radio'] + label > i.default:before {
left: 0;
min-width: 1em;
content: '\0000';
color: transparent;
border-radius: 2px;
background: transparent;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
color: transparent;
background: transparent;
left: 0;
}

.pretty > input[type='radio']:checked + label > i.default:before {
Expand All @@ -224,13 +234,12 @@

.pretty > input[type='checkbox'][disabled] + label,
.pretty > input[type='radio'][disabled] + label {
opacity: 0.5;
cursor: not-allowed;
opacity: .5;
}

.pretty.inline {
display: inline-block;
margin-right: 20px;
.pretty.plain > input[type='checkbox'] + label > i:after, .pretty.plain > input[type='radio'] + label > i:after {
/* border-color:transparent;*/
}

.pretty.plain > input[type='checkbox']:checked + label > i:after,
Expand All @@ -248,8 +257,7 @@
border-color: transparent;
}

.pretty.plain.toggle > input[type='checkbox'] + label > i:after,
.pretty.plain.toggle > input[type='radio'] + label > i:after {
.pretty.plain.toggle > input[type='checkbox'] + label > i:after, .pretty.plain.toggle > input[type='radio'] + label > i:after {
border-color: transparent;
}

Expand Down Expand Up @@ -531,8 +539,7 @@
color: #d9534f !important;
}

.pretty.toggle > input[type='checkbox'] + label > i:before,
.pretty.toggle > input[type='radio'] + label > i:before {
.pretty.toggle > input[type='checkbox'] + label > i:before, .pretty.toggle > input[type='radio'] + label > i:before {
color: inherit;
}

Expand All @@ -556,14 +563,6 @@
color: inherit;
}

.zmdi {
padding-left: 2px !important;
}

i[class*="ion-"] {
padding-left: 2px;
}

.pretty.smooth i:before {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
Expand Down
Loading

0 comments on commit ed2839b

Please sign in to comment.