|
@@ -0,0 +1,67 @@
|
|
|
|
|
+.checkbox-ios {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox] {
|
|
|
|
|
+ max-height: 0;
|
|
|
|
|
+ max-width: 0;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox] + label {
|
|
|
|
|
+ border-radius: 24px;
|
|
|
|
|
+ border: 2px solid #18181b;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ text-indent: -5000px;
|
|
|
|
|
+ width: 35px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox] + label:before {
|
|
|
|
|
+ background: #18181b;
|
|
|
|
|
+ border-radius: 24px;
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 12px;
|
|
|
|
|
+ left: 2px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 2px;
|
|
|
|
|
+ transition: .1s ease-in-out;
|
|
|
|
|
+ width: 12px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox]:checked + label {
|
|
|
|
|
+ border-color: #772ce8;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox]:checked + label:before {
|
|
|
|
|
+ background: #772ce8;
|
|
|
|
|
+ left: 17px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox] + label:after {
|
|
|
|
|
+ border-color: #18181b;
|
|
|
|
|
+ border-style: solid;
|
|
|
|
|
+ border-width: 0px 0px 2px 2px;
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ height: 5px;
|
|
|
|
|
+ left: 6px;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 7px;
|
|
|
|
|
+ transform: translate3d(-50%, -50%, 0px) rotate(-45deg);
|
|
|
|
|
+ transition: .1s ease-in-out;
|
|
|
|
|
+ width: 7px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.checkbox-ios input[type=checkbox]:checked + label:after {
|
|
|
|
|
+ border-color: #772ce8;
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+}
|
