Browse Source

Improve coverage

bootstrap-4
Skylar Ittner 4 years ago
parent
commit
65b8d67832
  1. 144
      generate.php
  2. 285
      material-color.css
  3. 2
      material-color.min.css

144
generate.php

@ -1,50 +1,60 @@
<?php
$use_variables = false;
$classes = ["alert", "badge", "btn", "bg", "list-group-item"];
$classes = [
"alert" => ["background-color" => "m", "color" => "t!"],
"alert .alert-link" => ["color" => "t!"],
"alert .alert-heading" => ["color" => "t!"],
"badge" => ["background-color" => "m", "color" => "t"],
"btn" => ["background-color" => "m", "color" => "t"],
"bg" => ["background-color" => "m"],
"list-group-item" => ["background-color" => "m", "color" => "t"],
"border" => ["border-color" => "m", "border-width" => "1px"],
"text" => ["color" => "m"]
];
$colors = [
"red" => "#f44336",
"pink" => "#e91e63",
"purple" => "#9c27b0",
"deep-purple" => "#673ab7",
"indigo" => "#3f51b5",
"blue" => "#2196f3",
"light-blue" => "#03a9f4",
"cyan" => "#00bcd4",
"teal" => "#009688",
"green" => "#4caf50",
"light-green" => "#8bc34a",
"lime" => "#cddc39",
"yellow" => "#ffeb3b",
"amber" => "#ffc107",
"orange" => "#ff9800",
"deep-orange" => "#ff5722",
"brown" => "#795548",
"grey" => "#9e9e9e",
"blue-grey" => "#607d8b"
"red" => "#f44336",
"pink" => "#e91e63",
"purple" => "#9c27b0",
"deep-purple" => "#673ab7",
"indigo" => "#3f51b5",
"blue" => "#2196f3",
"light-blue" => "#03a9f4",
"cyan" => "#00bcd4",
"teal" => "#009688",
"green" => "#4caf50",
"light-green" => "#8bc34a",
"lime" => "#cddc39",
"yellow" => "#ffeb3b",
"amber" => "#ffc107",
"orange" => "#ff9800",
"deep-orange" => "#ff5722",
"brown" => "#795548",
"grey" => "#9e9e9e",
"blue-grey" => "#607d8b"
];
$texts = [
"red" => "white",
"pink" => "white",
"purple" => "white",
"deep-purple" => "white",
"indigo" => "white",
"blue" => "white",
"light-blue" => "black",
"cyan" => "black",
"teal" => "white",
"green" => "white",
"light-green" => "black",
"lime" => "black",
"yellow" => "black",
"amber" => "black",
"orange" => "black",
"deep-orange" => "white",
"brown" => "white",
"grey" => "black",
"blue-grey" => "white"
"red" => "white",
"pink" => "white",
"purple" => "white",
"deep-purple" => "white",
"indigo" => "white",
"blue" => "white",
"light-blue" => "black",
"cyan" => "black",
"teal" => "white",
"green" => "white",
"light-green" => "black",
"lime" => "black",
"yellow" => "black",
"amber" => "black",
"orange" => "black",
"deep-orange" => "white",
"brown" => "white",
"grey" => "black",
"blue-grey" => "white"
];
@ -72,30 +82,54 @@ if ($use_variables) {
}
/* The fun bit */
foreach ($classes as $c) {
foreach ($classes as $c => $props) {
foreach ($colors as $k => $v) {
$textcolor = $texts[$k];
$t = $texts[$k];
// Save a few bytes
if ($textcolor == "white") {
$textcolor = "#fff";
} else if ($textcolor == "black") {
$textcolor = "#000";
if ($t == "white") {
$t = "#fff";
} else if ($t == "black") {
$t = "#000";
}
// Class and background color
echo ".$c-$k {\n\tbackground-color: ";
// Color setup
if ($use_variables) {
echo "var(--material-color-$k)";
$m = "var(--material-color-$k)";
} else {
echo $v;
$m = $v;
}
echo ";\n";
// Text color
if ($c != "bg") {
echo "\tcolor: $textcolor;\n";
// Class
if (strpos($c, " ") !== FALSE) {
$classes = explode(" ", $c);
foreach ($classes as $cl) {
if (strpos($cl, ".") === 0) {
echo "$cl ";
} else {
echo ".$cl-$k ";
}
}
echo "{\n";
} else {
echo ".$c-$k {\n";
}
foreach ($props as $prop => $val) {
echo "\t$prop: ";
if (strpos($val, "m") === 0) {
echo $m;
} else if (strpos($val, "t") === 0) {
echo $t;
} else {
echo $val;
}
if (strpos($val, "!") === 1) {
echo " !important";
}
echo ";\n";
}
// Finish it off
echo "}\n";
}
}

285
material-color.css

@ -5,79 +5,193 @@
*/
.alert-red {
background-color: #f44336;
color: #fff;
color: #fff !important;
}
.alert-pink {
background-color: #e91e63;
color: #fff;
color: #fff !important;
}
.alert-purple {
background-color: #9c27b0;
color: #fff;
color: #fff !important;
}
.alert-deep-purple {
background-color: #673ab7;
color: #fff;
color: #fff !important;
}
.alert-indigo {
background-color: #3f51b5;
color: #fff;
color: #fff !important;
}
.alert-blue {
background-color: #2196f3;
color: #fff;
color: #fff !important;
}
.alert-light-blue {
background-color: #03a9f4;
color: #000;
color: #000 !important;
}
.alert-cyan {
background-color: #00bcd4;
color: #000;
color: #000 !important;
}
.alert-teal {
background-color: #009688;
color: #fff;
color: #fff !important;
}
.alert-green {
background-color: #4caf50;
color: #fff;
color: #fff !important;
}
.alert-light-green {
background-color: #8bc34a;
color: #000;
color: #000 !important;
}
.alert-lime {
background-color: #cddc39;
color: #000;
color: #000 !important;
}
.alert-yellow {
background-color: #ffeb3b;
color: #000;
color: #000 !important;
}
.alert-amber {
background-color: #ffc107;
color: #000;
color: #000 !important;
}
.alert-orange {
background-color: #ff9800;
color: #000;
color: #000 !important;
}
.alert-deep-orange {
background-color: #ff5722;
color: #fff;
color: #fff !important;
}
.alert-brown {
background-color: #795548;
color: #fff;
color: #fff !important;
}
.alert-grey {
background-color: #9e9e9e;
color: #000;
color: #000 !important;
}
.alert-blue-grey {
background-color: #607d8b;
color: #fff;
color: #fff !important;
}
.alert-red .alert-link {
color: #fff !important;
}
.alert-pink .alert-link {
color: #fff !important;
}
.alert-purple .alert-link {
color: #fff !important;
}
.alert-deep-purple .alert-link {
color: #fff !important;
}
.alert-indigo .alert-link {
color: #fff !important;
}
.alert-blue .alert-link {
color: #fff !important;
}
.alert-light-blue .alert-link {
color: #000 !important;
}
.alert-cyan .alert-link {
color: #000 !important;
}
.alert-teal .alert-link {
color: #fff !important;
}
.alert-green .alert-link {
color: #fff !important;
}
.alert-light-green .alert-link {
color: #000 !important;
}
.alert-lime .alert-link {
color: #000 !important;
}
.alert-yellow .alert-link {
color: #000 !important;
}
.alert-amber .alert-link {
color: #000 !important;
}
.alert-orange .alert-link {
color: #000 !important;
}
.alert-deep-orange .alert-link {
color: #fff !important;
}
.alert-brown .alert-link {
color: #fff !important;
}
.alert-grey .alert-link {
color: #000 !important;
}
.alert-blue-grey .alert-link {
color: #fff !important;
}
.alert-red .alert-heading {
color: #fff !important;
}
.alert-pink .alert-heading {
color: #fff !important;
}
.alert-purple .alert-heading {
color: #fff !important;
}
.alert-deep-purple .alert-heading {
color: #fff !important;
}
.alert-indigo .alert-heading {
color: #fff !important;
}
.alert-blue .alert-heading {
color: #fff !important;
}
.alert-light-blue .alert-heading {
color: #000 !important;
}
.alert-cyan .alert-heading {
color: #000 !important;
}
.alert-teal .alert-heading {
color: #fff !important;
}
.alert-green .alert-heading {
color: #fff !important;
}
.alert-light-green .alert-heading {
color: #000 !important;
}
.alert-lime .alert-heading {
color: #000 !important;
}
.alert-yellow .alert-heading {
color: #000 !important;
}
.alert-amber .alert-heading {
color: #000 !important;
}
.alert-orange .alert-heading {
color: #000 !important;
}
.alert-deep-orange .alert-heading {
color: #fff !important;
}
.alert-brown .alert-heading {
color: #fff !important;
}
.alert-grey .alert-heading {
color: #000 !important;
}
.alert-blue-grey .alert-heading {
color: #fff !important;
}
.badge-red {
background-color: #f44336;
@ -364,3 +478,136 @@
background-color: #607d8b;
color: #fff;
}
.border-red {
border-color: #f44336;
border-width: 1px;
}
.border-pink {
border-color: #e91e63;
border-width: 1px;
}
.border-purple {
border-color: #9c27b0;
border-width: 1px;
}
.border-deep-purple {
border-color: #673ab7;
border-width: 1px;
}
.border-indigo {
border-color: #3f51b5;
border-width: 1px;
}
.border-blue {
border-color: #2196f3;
border-width: 1px;
}
.border-light-blue {
border-color: #03a9f4;
border-width: 1px;
}
.border-cyan {
border-color: #00bcd4;
border-width: 1px;
}
.border-teal {
border-color: #009688;
border-width: 1px;
}
.border-green {
border-color: #4caf50;
border-width: 1px;
}
.border-light-green {
border-color: #8bc34a;
border-width: 1px;
}
.border-lime {
border-color: #cddc39;
border-width: 1px;
}
.border-yellow {
border-color: #ffeb3b;
border-width: 1px;
}
.border-amber {
border-color: #ffc107;
border-width: 1px;
}
.border-orange {
border-color: #ff9800;
border-width: 1px;
}
.border-deep-orange {
border-color: #ff5722;
border-width: 1px;
}
.border-brown {
border-color: #795548;
border-width: 1px;
}
.border-grey {
border-color: #9e9e9e;
border-width: 1px;
}
.border-blue-grey {
border-color: #607d8b;
border-width: 1px;
}
.text-red {
color: #f44336;
}
.text-pink {
color: #e91e63;
}
.text-purple {
color: #9c27b0;
}
.text-deep-purple {
color: #673ab7;
}
.text-indigo {
color: #3f51b5;
}
.text-blue {
color: #2196f3;
}
.text-light-blue {
color: #03a9f4;
}
.text-cyan {
color: #00bcd4;
}
.text-teal {
color: #009688;
}
.text-green {
color: #4caf50;
}
.text-light-green {
color: #8bc34a;
}
.text-lime {
color: #cddc39;
}
.text-yellow {
color: #ffeb3b;
}
.text-amber {
color: #ffc107;
}
.text-orange {
color: #ff9800;
}
.text-deep-orange {
color: #ff5722;
}
.text-brown {
color: #795548;
}
.text-grey {
color: #9e9e9e;
}
.text-blue-grey {
color: #607d8b;
}

2
material-color.min.css
File diff suppressed because it is too large
View File

Loading…
Cancel
Save