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

Explode colors by files

Volodymyr Tkach 2 years ago
parent
24bca74dc7
commit
e906d3b0b1
6 changed files with 48 additions and 52 deletions
Split View Show Diff Stats
  1. 11 0
      css/controls/checkbox/box-blue.css
  2. 11 0
      css/controls/checkbox/box-green.css
  3. 11 0
      css/controls/checkbox/box-red.css
  4. 11 0
      css/controls/checkbox/box-white.css
  5. 0 52
      css/controls/checkbox/box.css
  6. 4 0
      css/controls/checkbox/example.html

+ 11 - 0
css/controls/checkbox/box-blue.css
View File 

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

+ 11 - 0
css/controls/checkbox/box-green.css
View File 

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

+ 11 - 0
css/controls/checkbox/box-red.css
View File 

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

+ 11 - 0
css/controls/checkbox/box-white.css
View File 

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

+ 0 - 52
css/controls/checkbox/box.css
View File 

@@ -59,55 +59,3 @@
 
 	border-color: #212529;
 
 	opacity: 1;
 
 }
 
-
 
-/* Blue */
 
-.checkbox-box.blue input[type=checkbox]:checked + label {
 
-	border-color: #007bff;
 
-}
 
-
 
-.checkbox-box.blue input[type=checkbox]:focus + label {
 
-	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
 
-}
 
-
 
-.checkbox-box.blue input[type=checkbox]:checked + label:before {
 
-	border-color: #007bff;
 
-}
 
-
 
-/* Green */
 
-.checkbox-box.green input[type=checkbox]:checked + label {
 
-	border-color: #28a745;
 
-}
 
-
 
-.checkbox-box.green input[type=checkbox]:focus + label {
 
-	box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
 
-}
 
-
 
-.checkbox-box.green input[type=checkbox]:checked + label:before {
 
-	border-color: #28a745;
 
-}
 
-
 
-/* Red */
 
-.checkbox-box.red input[type=checkbox]:checked + label {
 
-	border-color: #dc3545;
 
-}
 
-
 
-.checkbox-box.red input[type=checkbox]:focus + label {
 
-	box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
 
-}
 
-
 
-.checkbox-box.red input[type=checkbox]:checked + label:before {
 
-	border-color: #dc3545;
 
-}
 
-
 
-/* White */
 
-.checkbox-box.white input[type=checkbox]:checked + label {
 
-	border-color: #fff;
 
-}
 
-
 
-.checkbox-box.white input[type=checkbox]:focus + label {
 
-	box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 50%);
 
-}
 
-
 
-.checkbox-box.white input[type=checkbox]:checked + label:before {
 
-	border-color: #fff;
 
-}

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

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