Commit 5ab4896f authored by Maciej Wilgucki's avatar Maciej Wilgucki

css toggle switch

parent 1ae9687b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS checkbox example</title>
<link href="dist/css/app.css" rel="stylesheet">
</head>
<body>
<div class="button">
<input type="checkbox" id="some_button">
<label for="some_button"></label>
</div>
</body>
</html>
@mixin transform($transformations) {
-webkit-transform: $transformations;
-ms-transform: $transformations; // IE9 only
-o-transform: $transformations;
transform: $transformations;
-webkit-transform: $transformations;
-ms-transform: $transformations; // IE9 only
-o-transform: $transformations;
transform: $transformations;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
......@@ -2,3 +2,4 @@
@import "components/checkbox";
@import "components/radiobutton";
@import "components/accordion";
@import "components/button";
.button {
label {
display: block;
width: 40px;
height: 20px;
border: 1px solid #dbdbdb;
@include border-radius(10px);
position: relative;
&::before {
content: '';
width: 20px;
height: 20px;
@include border-radius(10px);
background-color: #888;
position: absolute;
left: 0;
transition: all 0.1s linear;
}
}
input[type=checkbox] {
position: absolute;
top: -99999px;
opacity: 0;
&:checked {
& + label::before {
left: calc(100% - 20px);
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment