Volodymyr Tkach 2 years ago
parent
commit
592a0f5d9f

+ 11 - 0
css/controls/checkbox/circle-blue.css

@@ -0,0 +1,11 @@
+.checkbox-circle.blue input[type=checkbox]:checked + label {
+	border-color: #007bff;
+}
+
+.checkbox-circle.blue input[type=checkbox]:focus + label {
+	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
+}
+
+.checkbox-circle.blue input[type=checkbox]:checked + label:before {
+	background: #007bff;
+}

+ 11 - 0
css/controls/checkbox/circle-green.css

@@ -0,0 +1,11 @@
+.checkbox-circle.green input[type=checkbox]:checked + label {
+	border-color: #28a745;
+}
+
+.checkbox-circle.green input[type=checkbox]:focus + label {
+	box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
+}
+
+.checkbox-circle.green input[type=checkbox]:checked + label:before {
+	background: #28a745;
+}

+ 11 - 0
css/controls/checkbox/circle-red.css

@@ -0,0 +1,11 @@
+.checkbox-circle.red input[type=checkbox]:checked + label {
+	border-color: #dc3545;
+}
+
+.checkbox-circle.red input[type=checkbox]:focus + label {
+	box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
+}
+
+.checkbox-circle.red input[type=checkbox]:checked + label:before {
+	background: #dc3545;
+}

+ 11 - 0
css/controls/checkbox/circle-white.css

@@ -0,0 +1,11 @@
+.checkbox-circle.white input[type=checkbox]:checked + label {
+	border-color: #fff;
+}
+
+.checkbox-circle.white input[type=checkbox]:focus + label {
+	box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 50%);
+}
+
+.checkbox-circle.white input[type=checkbox]:checked + label:before {
+	background: #fff;
+}

+ 4 - 0
css/controls/checkbox/example.html

@@ -14,6 +14,10 @@
 		<link rel="stylesheet" href="./box-red.css">
 		<link rel="stylesheet" href="./box-white.css">
 		<link rel="stylesheet" href="./circle.css">
+		<link rel="stylesheet" href="./circle-blue.css">
+		<link rel="stylesheet" href="./circle-green.css">
+		<link rel="stylesheet" href="./circle-red.css">
+		<link rel="stylesheet" href="./circle-white.css">
 	</head>
 	<body>
 		<div style="padding: 10px; background-color: gray;">