Fix transition glitch

This commit is contained in:
Rnhmjoj 2014-07-08 12:32:42 +02:00
parent 89e7f0cf10
commit 069097fbfb

View File

@ -13,10 +13,10 @@
&:-ms-input-placeholder {color: #fff}
}
.transition() {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
.transition(@property: all) {
-webkit-transition: @property .3s ease-in-out;
-moz-transition: @property .3s ease-in-out;
transition: @property .3s ease-in-out;
}
/* Main Colors
@ -51,6 +51,12 @@
&:checked {background:@pumpkin}
}
.check, .circles, .radio {
outline: none !important;
-webkit-appearance: none;
-moz-appearance: none !important;
}
/* Menus
===============================*/
nav {
@ -105,36 +111,30 @@ nav {
/* Checkbox
===============================*/
.check, .circles {
.transition(background-color);
&:after {
.transition;
font-family: FontAwesome;
content:"\f00d";
color: #fff;
}
&:checked:after {
.transition;
content:"\f00c";
}
}
.check {
.square(30px);
.transition;
.border-radius(4px);
position: relative;
-webkit-appearance: none;
-moz-appearance: none!important;
text-align: center;
&:after {
.transition;
position: absolute;
top: 7px;
left: 8px;
}
&:checked:after {
.transition;
position: absolute;
top: 7px;
left: 6px;
@ -145,17 +145,12 @@ nav {
===============================*/
.circles {
.square(30px);
.transition;
.border-radius(100px);
position: relative;
-webkit-appearance: none;
margin: 8px;
&:checked {
.transition;
&:after {
.transition;
position: absolute;
left: 6px;
top: 6px;
@ -164,7 +159,6 @@ nav {
}
&:after {
.transition;
position: absolute;
left: 8px;
top: 6px;
@ -179,7 +173,6 @@ nav {
.border-radius(100px);
display: inline-block;
position: relative;
-webkit-appearance: none;
margin: 10px;
margin-top: 0px;
@ -193,8 +186,8 @@ nav {
position: absolute;
top: 5px;
left: 5px;
background:#fff;
content:"";
background: #fff;
content: "";
}
}