Browse Source

Merging

master
Skylar Ittner 4 years ago
parent
commit
7f2e7a8caf
  1. 6
      README.md
  2. 136
      generate.php
  3. 2512
      material-color.css
  4. 5
      material-color.min.css

6
README.md

@ -1,9 +1,9 @@
# 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:
* Link this CSS after you link to Bootstrap.css.
* 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.
* 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.
* Navbars need .navbar-dark or .navbar-light to appear properly, choose according to your colors.
* We recommend using [Bootswatch Materia](https://bootswatch.com/materia/) (a material design Bootstrap theme) with this stylesheet.

136
generate.php

@ -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";
}
}
?>

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

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

Loading…
Cancel
Save