Browse Source

Explode colors by files

Volodymyr Tkach 2 years ago
parent
commit
24bca74dc7

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

@@ -4,6 +4,10 @@
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
 		<link rel="stylesheet" href="./../../reset.css">
 		<link rel="stylesheet" href="./../../reset.css">
 		<link rel="stylesheet" href="./ios.css">
 		<link rel="stylesheet" href="./ios.css">
+		<link rel="stylesheet" href="./ios-blue.css">
+		<link rel="stylesheet" href="./ios-green.css">
+		<link rel="stylesheet" href="./ios-red.css">
+		<link rel="stylesheet" href="./ios-white.css">
 		<link rel="stylesheet" href="./box.css">
 		<link rel="stylesheet" href="./box.css">
 	</head>
 	</head>
 	<body>
 	<body>

+ 15 - 0
css/controls/checkbox/ios-blue.css

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

+ 15 - 0
css/controls/checkbox/ios-green.css

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

+ 15 - 0
css/controls/checkbox/ios-red.css

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

+ 15 - 0
css/controls/checkbox/ios-white.css

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

+ 0 - 68
css/controls/checkbox/ios.css

@@ -72,71 +72,3 @@
 	border-color: #212529;
 	border-color: #212529;
 	opacity: 1;
 	opacity: 1;
 }
 }
-
-/* Blue */
-.checkbox-ios.blue input[type=checkbox]:checked + label {
-	border-color: #007bff;
-}
-
-.checkbox-ios.blue input[type=checkbox]:focus + label {
-	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
-}
-
-.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]:focus + label {
-	box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
-}
-
-.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]:focus + label {
-	box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
-}
-
-.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]:focus + label {
-	box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 50%);
-}
-
-.checkbox-ios.white input[type=checkbox]:checked + label:before {
-	background: #fff;
-}
-
-.checkbox-ios.white input[type=checkbox]:checked + label:after {
-	border-color: #fff;
-}