We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
assets
mirror of https://github.com/vladimirok5959/assets.git
2
0
Fork 0
Files Wiki
Browse Source

Checkboxes for all bootstrap colors, examples

Volodymyr Tkach 2 years ago
parent
2c26d47980
commit
5c5b68709d
2 changed files with 100 additions and 3 deletions
Split View Show Diff Stats
  1. 35 0
      css/controls/checkbox/example.html
  2. 65 3
      css/controls/checkbox/ios.css

+ 35 - 0
css/controls/checkbox/example.html
View File 

@@ -0,0 +1,35 @@
 
+<!doctype html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<link rel="stylesheet" href="./ios.css">
 
+	</head>
 
+	<body>
 
+		<div style="background-color: gray;">
 
+			<div class="checkbox-ios">
 
+				<input type="checkbox" id="lbl_name" name="name" />
 
+				<label for="lbl_name"></label>
 
+			</div>
 
+			<br>
 
+			<div class="checkbox-ios blue">
 
+				<input type="checkbox" id="lbl_name_blue" name="name_blue" />
 
+				<label for="lbl_name_blue"></label>
 
+			</div>
 
+			<br>
 
+			<div class="checkbox-ios green">
 
+				<input type="checkbox" id="lbl_name_green" name="name_green" />
 
+				<label for="lbl_name_green"></label>
 
+			</div>
 
+			<br>
 
+			<div class="checkbox-ios red">
 
+				<input type="checkbox" id="lbl_name_red" name="name_red" />
 
+				<label for="lbl_name_red"></label>
 
+			</div>
 
+			<br>
 
+			<div class="checkbox-ios white">
 
+				<input type="checkbox" id="lbl_name_white" name="name_white" />
 
+				<label for="lbl_name_white"></label>
 
+			</div>
 
+		</div>
 
+	</body>
 
+</html>

+ 65 - 3
css/controls/checkbox/ios.css
View File 

@@ -1,9 +1,13 @@
 
 .checkbox-ios {
 
+	box-sizing: border-box;
 
 	display: inline-block;
 
+	height: 20px;
 
 	vertical-align: middle;
 
+	width: 35px;
 
 }
 
 
 .checkbox-ios input[type=checkbox] {
 
+	box-sizing: border-box;
 
 	max-height: 0;
 
 	max-width: 0;
 
 	opacity: 0;
 
@@ -13,6 +17,7 @@
 
 .checkbox-ios input[type=checkbox] + label {
 
 	border-radius: 24px;
 
 	border: 2px solid #18181b;
 
+	box-sizing: border-box;
 
 	cursor: pointer;
 
 	display: block;
 
 	height: 20px;
 
@@ -26,6 +31,7 @@
 
 .checkbox-ios input[type=checkbox] + label:before {
 
 	background: #18181b;
 
 	border-radius: 24px;
 
+	box-sizing: border-box;
 
 	content: "";
 
 	display: block;
 
 	height: 12px;
 
@@ -37,11 +43,13 @@
 
 }
 
 
 .checkbox-ios input[type=checkbox]:checked + label {
 
-	border-color: #772ce8;
 
+	border-color: #000;
 
+	box-sizing: border-box;
 
 }
 
 
 .checkbox-ios input[type=checkbox]:checked + label:before {
 
-	background: #772ce8;
 
+	background: #000;
 
+	box-sizing: border-box;
 
 	left: 17px;
 
 }
 
 
@@ -49,6 +57,7 @@
 
 	border-color: #18181b;
 
 	border-style: solid;
 
 	border-width: 0px 0px 2px 2px;
 
+	box-sizing: border-box;
 
 	content: "";
 
 	display: block;
 
 	height: 5px;
 
@@ -62,6 +71,59 @@
 
 }
 
 
 .checkbox-ios input[type=checkbox]:checked + label:after {
 
-	border-color: #772ce8;
 
+	border-color: #000;
 
+	box-sizing: border-box;
 
 	opacity: 1;
 
 }
 
+
 
+/* Blue */
 
+.checkbox-ios.blue input[type=checkbox]:checked + label {
 
+	border-color: #007bff;
 
+}
 
+
 
+.checkbox-ios.blue input[type=checkbox]:checked + label:before {
 
+	background: #007bff;
 
+}
 
+
 
+.checkbox-ios.blue input[type=checkbox]:checked + label:after {
 
+	border-color: #007bff;
 
+}
 
+
 
+/* Green */
 
+.checkbox-ios.green input[type=checkbox]:checked + label {
 
+	border-color: #28a745;
 
+}
 
+
 
+.checkbox-ios.green input[type=checkbox]:checked + label:before {
 
+	background: #28a745;
 
+}
 
+
 
+.checkbox-ios.green input[type=checkbox]:checked + label:after {
 
+	border-color: #28a745;
 
+}
 
+
 
+/* Red */
 
+.checkbox-ios.red input[type=checkbox]:checked + label {
 
+	border-color: #dc3545;
 
+}
 
+
 
+.checkbox-ios.red input[type=checkbox]:checked + label:before {
 
+	background: #dc3545;
 
+}
 
+
 
+.checkbox-ios.red input[type=checkbox]:checked + label:after {
 
+	border-color: #dc3545;
 
+}
 
+
 
+/* White */
 
+.checkbox-ios.white input[type=checkbox]:checked + label {
 
+	border-color: #fff;
 
+}
 
+
 
+.checkbox-ios.white input[type=checkbox]:checked + label:before {
 
+	background: #fff;
 
+}
 
+
 
+.checkbox-ios.white input[type=checkbox]:checked + label:after {
 
+	border-color: #fff;
 
+}