Preview: checkbox-replacement.less
Size: 4.19 KB
/home/jambtst2015/public_html/eschoolengine Installer/assets/less/neon-less/checkbox-replacement.less
.checkbox-replace,
.radio-replace {
@s: 16px;
position: relative;
padding-left: 0;
margin: 0;
input[type="checkbox"],
input[type="radio"] {
visibility: hidden;
}
.cb-wrapper {
position: relative;
display: inline-block;
border: 1px solid @default;
margin-bottom: 0;
.size(@s, @s - 1);
.bs;
.rounded;
.transall;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
input {
position: absolute;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0;
visibility: hidden;
}
&.disabled {
.opacity(.3);
}
.checked {
@m: 2px;
position: absolute;
background: @default;
display: block;
left: @m;
right: @m;
bottom: @m;
top: @m;
.rounded(@border_radius - 1);
.opacity(0);
.transition(~"250ms all cubic-bezier(0.455, 0.030, 0.515, 0.955)");
}
+ label {
position: relative;
top: -2px;
margin-left: 6px;
}
}
&:hover .cb-wrapper {
.box-shadow(~"0 0 0 2px rgba(0,0,0,.03)");
}
// Radio
&.radio-replace {
.cb-wrapper {
.border-radius(@s);
.checked {
.border-radius(@s);
}
}
}
// Checked
&.checked .cb-wrapper .checked {
.opacity(1);
}
// Skins
.replaced-checkbox-variant(darken(@default, 10%); #fff);
&.color-primary { .replaced-checkbox-variant(@main_color; @secondary_text); }
&.color-red { .replaced-checkbox-variant(@secondary; @secondary_text); }
&.color-blue { .replaced-checkbox-variant(@info; @info_text); }
&.color-green { .replaced-checkbox-variant(@success; @success_text); }
&.color-gold { .replaced-checkbox-variant(@warning; @warning_text); }
&.color-white { .replaced-checkbox-variant(#fff; #fff); }
}
/*&:before {
content: '';
display: block;
border: 1px solid @default;
.size(@s, @s - 1);
float: left;
margin-right: 5px;
.bs;
.rounded;
.transall;
}
&:after {
content: '';
position: absolute;
display: block;
border: 2px solid #fff;
background: @default;
left: 1px;
top: 8px;
left: -20px;
top: 1px;
.size(@s - 2, @s - 3);
opacity: 0;
.rounded;
.transition(~"250ms all cubic-bezier(0.455, 0.030, 0.515, 0.955)");
}
> .chk-replaced {
}
input[type="checkbox"],
input[type="radio"] {
visibility: visible;
position: absolute;
.opacity(0);
left: 0;
top: 0;
margin-left: 0;
.size(@s);
&:checked + label:after {
opacity: 1;
}
&:disabled {
+ label {
&:before {
opacity: 0.3;
}
&:after {
opacity: 0;
}
}
&:checked {
+ label {
&:after {
opacity: 1;
}
}
}
}
}
label {
position: relative;
}
&:hover {
label {
&:before {
.box-shadow(~"0 0 0 2px rgba(0,0,0,.03)");
}
}
}
&:hover input[type="checkbox"]:disabled + label:before {
.box-shadow(none);
}
// Radio
&.radio-replace {
label {
&:before {
.border-radius(50%);
}
&:after {
.border-radius(50%);
height: @s - 2;
border-width: 3px;
}
}
}
// Skins
.replaced-checkbox-variant(darken(@default, 10%); #fff);
&.color-primary { .replaced-checkbox-variant(@main_color; @secondary_text); }
&.color-red { .replaced-checkbox-variant(@secondary; @secondary_text); }
&.color-blue { .replaced-checkbox-variant(@info; @info_text); }
&.color-green { .replaced-checkbox-variant(@success; @success_text); }
&.color-gold { .replaced-checkbox-variant(@warning; @warning_text); }
}
.replaced-checkbox-variant(@color-1; @color-2)
{
label {
&:before {
border-color: @color-1;
}
&:after {
border-color: @color-2;
background-color: @color-1;
}
}
&:hover {
label {
&:before {
@r: red(@color-1);
@g: green(@color-1);
@b: blue(@color-1);
.box-shadow(~"0 0 0 2px rgba(@{r},@{g},@{b},.1)");
}
}
}
}*/
.replaced-checkbox-variant(@color-1; @color-2)
{
.cb-wrapper {
border: 1px solid @color-1;
.checked {
background: @color-1;
}
}
&:hover .cb-wrapper {
@r: red(@color-1);
@g: green(@color-1);
@b: blue(@color-1);
.box-shadow(~"0 0 0 2px rgba(@{r},@{g},@{b},.1)");
}
}
Directory Contents
Dirs: 0 × Files: 40