Merging
commit
7f2e7a8caf
@ -1,9 +1,9 @@
|
|||||||
# Material-Color
|
# Material-Color
|
||||||
|
|
||||||
Additional color classes for Bootstrap 3. Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
|
Additional color classes for Bootstrap 4. Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
|
||||||
|
|
||||||
## Notes:
|
## Notes:
|
||||||
* Link this CSS after you link to Bootstrap.css.
|
* Link this CSS after you link to Bootstrap.css.
|
||||||
* Use the included color classes instead of .btn-primary, .alert-danger, etc.
|
* Use the included color classes instead of .btn-primary, .alert-danger, etc.
|
||||||
* Navbars need both the .navbar-inverse (or .navbar-default for lighter colors, try both and see which works for you) and .navbar-[color] classes to appear properly.
|
* Navbars need .navbar-dark or .navbar-light to appear properly, choose according to your colors.
|
||||||
* We recommend using [Bootswatch Paper](http://bootswatch.com/paper/) (a material design Bootstrap theme) with this stylesheet. We don't test or support it on other themes, actually.
|
* We recommend using [Bootswatch Materia](https://bootswatch.com/materia/) (a material design Bootstrap theme) with this stylesheet.
|
||||||
|
@ -0,0 +1,136 @@
|
|||||||
|
<?php
|
||||||
|
$use_variables = false;
|
||||||
|
|
||||||
|
$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"
|
||||||
|
];
|
||||||
|
|
||||||
|
$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"
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
/* License header */
|
||||||
|
$year = date('Y');
|
||||||
|
echo <<<END
|
||||||
|
/* Material-Color.css
|
||||||
|
* Copyright (c) $year Netsyms Technologies
|
||||||
|
* MIT License
|
||||||
|
* https://source.netsyms.com/Netsyms/Material-Color
|
||||||
|
*/
|
||||||
|
|
||||||
|
END;
|
||||||
|
|
||||||
|
/* Make CSS variables */
|
||||||
|
if ($use_variables) {
|
||||||
|
echo ":root {\n";
|
||||||
|
foreach ($colors as $k => $v) {
|
||||||
|
if (strpos($k, "text-") !== FALSE) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
echo "\t--material-color-$k: $v;\n";
|
||||||
|
}
|
||||||
|
echo "}\n\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The fun bit */
|
||||||
|
foreach ($classes as $c => $props) {
|
||||||
|
foreach ($colors as $k => $v) {
|
||||||
|
$t = $texts[$k];
|
||||||
|
// Save a few bytes
|
||||||
|
if ($t == "white") {
|
||||||
|
$t = "#fff";
|
||||||
|
} else if ($t == "black") {
|
||||||
|
$t = "#000";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color setup
|
||||||
|
if ($use_variables) {
|
||||||
|
$m = "var(--material-color-$k)";
|
||||||
|
} else {
|
||||||
|
$m = $v;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue