Skip to content

Commit 6a1c157

Browse files
lokesh-coderlokesh-coder
committed
Refactored: scss folder names
1 parent 75d7549 commit 6a1c157

14 files changed

+309
-2
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pretty-checkbox",
3-
"version": "1.0.1",
3+
"version": "2.0.0",
44
"description": "Scalable css3 pretty checkbox and radio buttons",
55
"license": "MIT",
66
"main": "src/pretty.css",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pretty-checkbox",
3-
"version": "1.0.1",
3+
"version": "2.0.0",
44
"description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
55
"main": "src/pretty.min.css",
66
"dependencies": {},

‎src/scss/decorators/_animation.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.#{$pretty-class-name}.smooth{
2+
i{
3+
&:before{
4+
@include prefixer(transition,all 0.5s ease);
5+
@include prefixer(transform,scale(0));
6+
}
7+
&:after{
8+
@include prefixer(transition,all 0.5s ease);
9+
}
10+
}
11+
&>input[type='checkbox']:checked~label>i,
12+
&>input[type='radio']:checked~label>i{
13+
&:before{
14+
@include prefixer(transform,scale(1));
15+
}
16+
&:after{
17+
@include prefixer(transform,scale(0));
18+
}
19+
}
20+
}
21+
.#{$pretty-class-name}.smooth.toggle{
22+
i{
23+
&:before{
24+
@include prefixer(transform,none);
25+
}
26+
}
27+
&>input[type='checkbox']:checked~label>i,
28+
&>input[type='radio']:checked~label>i{
29+
&:before{
30+
@include prefixer(transform,none);
31+
}
32+
&:after{
33+
@include prefixer(transform,none);
34+
}
35+
}
36+
}

‎src/scss/decorators/_circle.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.#{$pretty-class-name}.circle{
2+
label i:after{
3+
border-radius: 100px;
4+
}
5+
label i.default:before{
6+
border-radius: 100px !important;
7+
}
8+
}

‎src/scss/decorators/_color.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
$outline-colors:primary outline-primary #428bca , success outline-success #5cb85c,info outline-info #5bc0de,warning outline-warning #f0ad4e,danger outline-danger #d9534f;
2+
3+
@each $color in $outline-colors{
4+
.#{$pretty-class-name}.#{nth($color,1)}{
5+
input:checked+ label i{
6+
&:before{
7+
color:#fff;
8+
}
9+
&:after{
10+
background-color:nth($color,3);
11+
border-color:nth($color,3)
12+
}
13+
}
14+
input[type='radio']:checked+ label i.default{
15+
&:before{
16+
background-color:nth($color,3);
17+
color:transparent;
18+
}
19+
&:after{
20+
background-color: initial;
21+
border-color:nth($color,3)
22+
}
23+
}
24+
&.smooth{
25+
input:checked ~ label i:after{
26+
@include prefixer(transform,scale(1) !important);
27+
}
28+
}
29+
}
30+
.#{$pretty-class-name}.#{nth($color,2)}{
31+
input:checked+label i{
32+
&:before{
33+
color:nth($color,3)
34+
}
35+
&:after{
36+
border-color:nth($color,3);
37+
}
38+
}
39+
}
40+
.#{$pretty-class-name}.toggle{
41+
@each $subcolor in $outline-colors{
42+
i.#{nth($subcolor,1)}{
43+
&:before{
44+
color:nth($subcolor,3) !important;
45+
}
46+
}
47+
}
48+
49+
}
50+
}

‎src/scss/decorators/_core.scss

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.#{$pretty-class-name}{
2+
position: relative;
3+
line-height: 1;
4+
margin-bottom: 5px;
5+
}
6+
7+
8+
.#{$pretty-class-name}{
9+
label{
10+
font-weight: normal;
11+
}
12+
&>input[type='checkbox'],
13+
&>input[type='radio']{
14+
position: absolute;
15+
display: block;
16+
left: 0;
17+
top: 0;
18+
height: 100%;
19+
width: 100%;
20+
opacity: 0;
21+
margin: 0;
22+
cursor: pointer;
23+
z-index: 99999999;
24+
}
25+
i{
26+
&:before{
27+
margin-right: 5px;
28+
vertical-align: bottom;
29+
display: inline-block ;
30+
color:transparent;
31+
position: relative;
32+
z-index: 999;
33+
left: -1px;
34+
}
35+
&:after{
36+
content: '\0000';
37+
border-radius: $pretty-border-radius;
38+
border: 1px solid #aaa;
39+
position: absolute;
40+
color: transparent;
41+
left: -1px;
42+
top: -1px;
43+
}
44+
}
45+
&>input[type='checkbox']:checked+label>i,
46+
&>input[type='radio']:checked+label>i{
47+
&:before{
48+
color:inherit;
49+
}
50+
&:after{}
51+
}
52+
&>input[type='radio']+label>i.default{
53+
&:before{
54+
content: '\0000';
55+
border-radius: 2px;
56+
@include prefixer(transform,scale(0.8));
57+
color: transparent;
58+
background: transparent;
59+
left: 0;
60+
}
61+
&:after{}
62+
}
63+
&>input[type='radio']:checked+label>i.default{
64+
&:before{
65+
background: #aaa;
66+
}
67+
&:after{}
68+
}
69+
&>input[type='checkbox'][disabled],
70+
&>input[type='radio'][disabled]{
71+
cursor: not-allowed;
72+
opacity: 0;
73+
&+label{
74+
opacity: 0.5;
75+
cursor: not-allowed;
76+
}
77+
}
78+
}

‎src/scss/decorators/_index.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import 'core';
2+
@import 'inline';
3+
@import 'plain';
4+
@import 'circle';
5+
@import 'color';
6+
@import 'toggle';
7+
@import 'override';
8+
@import 'animation';

‎src/scss/decorators/_inline.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.#{$pretty-class-name}.inline{
2+
display: inline-block;
3+
margin-right: 20px;
4+
}

‎src/scss/decorators/_override.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.zmdi{
2+
padding-left: 2px !important;
3+
}
4+
i[class*="ion-"]{
5+
padding-left: 2px;
6+
}

‎src/scss/decorators/_plain.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.#{$pretty-class-name}.plain{
2+
&>input[type='checkbox']+label,
3+
&>input[type='radio']+label{
4+
&>i:after{
5+
// border-color:transparent;
6+
}
7+
}
8+
&>input[type='checkbox']:checked+label,
9+
&>input[type='radio']:checked+label{
10+
&>i:after{
11+
border-color:transparent;
12+
}
13+
}
14+
&>input[type='checkbox']+label+label,
15+
&>input[type='radio']+label+label{
16+
&>i:after{
17+
border-color:transparent;
18+
}
19+
}
20+
&>input[type='checkbox']:checked+label+label,
21+
&>input[type='radio']:checked+label+label{
22+
&>i:after{
23+
border-color:transparent;
24+
}
25+
}
26+
}
27+
28+
.#{$pretty-class-name}.plain.toggle{
29+
&>input[type='checkbox']+label,
30+
&>input[type='radio']+label{
31+
&>i:after{
32+
border-color:transparent;
33+
}
34+
}
35+
}

‎src/scss/decorators/_toggle.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.#{$pretty-class-name}.toggle{
2+
&>input[type='checkbox']+label,
3+
&>input[type='radio']+label{
4+
&>i:before{
5+
color:inherit;
6+
}
7+
}
8+
&>input[type='checkbox']+label+label,
9+
&>input[type='radio']+label+label{
10+
display: none;
11+
}
12+
&>input[type='checkbox']:checked+label,
13+
&>input[type='radio']:checked+label{
14+
display: none;
15+
}
16+
&>input[type='checkbox']:checked+label+label,
17+
&>input[type='radio']:checked+label+label{
18+
display: inline-block;
19+
&>i:before{
20+
color:inherit;
21+
}
22+
}
23+
}

‎src/scss/support/_animations.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import 'mixins';
2+
3+
@include keyframes(popIn) {
4+
0% {
5+
@include prefixer(transform, scale(0));
6+
}
7+
100% {
8+
@include prefixer(transform, scale(1));
9+
}
10+
};
11+
@include keyframes(popOut) {
12+
0% {
13+
@include prefixer(transform, scale(1));
14+
}
15+
100% {
16+
@include prefixer(transform, scale(0));
17+
}
18+
};
19+
20+
@mixin animate($animation){
21+
@include animation($animation 0.5s cubic-bezier(0.25, 0.1, 0.23, 1.22) forwards);
22+
}

‎src/scss/support/_mixins.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@mixin prefixer($property, $value) {
2+
-webkit-#{$property}: $value;
3+
-moz-#{$property}: $value;
4+
-o-#{$property}: $value;
5+
#{$property}: $value;
6+
}
7+
8+
@mixin animation ($value) {
9+
@include prefixer($property: animation, $value: $value);
10+
}
11+
12+
13+
@mixin keyframes($animationName) {
14+
@keyframes #{$animationName} {
15+
@content;
16+
}
17+
@-webkit-keyframes #{$animationName} {
18+
@content;
19+
}
20+
@-moz-keyframes #{$animationName} {
21+
@content;
22+
}
23+
@-o-keyframes #{$animationName} {
24+
@content;
25+
}
26+
}
27+
28+
@mixin transition ($value...) {
29+
@if length($value) >= 1 {
30+
@include prefixer($property: transition, $value: $value);
31+
} @else {
32+
@include prefixer($property: transition, $value: all 0.15s ease-in 0.05s);
33+
}
34+
}

‎src/scss/support/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$pretty-class-name:pretty !default;
2+
$pretty-font-family:"Material Design Icons" !default;
3+
$pretty-border-radius:2px !default;

0 commit comments

Comments
 (0)