Colors

[ionlyseespots]

LESS, extend into am-layout="COLOR" for explicit section themes as well as classes (.COLOR) for individual elements, create/update docs

docs

Noted Updates

// Decided to provide 5 class builds for adding color to elements. // Class build: // .am-clr-NUMBER-ORIENTATION // // Class examples for red // .am-clr-1-text // .am-clr-1-bg // .am-clr-1-border // .am-clr-1-fill // .am-clr-1-stroke // //== Mixin build // .COLOR(RANGE, ORIENTATION); // // COLOR: color // RANGE: 1-14. The value of 6 is Material 500. // ORIENTATION: text, bg, border, fill, stroke // // Mixin example for red // .example-text { // .red(6, text); // } // .example-background { // .red(2, bg); // } //

// Red .am-clr-1 { &-text { .red(6, text); } &-bg { .red(6, bg); } &-border { .red(6, border); } &-fill { .red(6, fill); } &-stroke { .red(6, stroke); } } //== Mixin build // .COLOR(RANGE, ORIENTATION); // // COLOR: color // RANGE: 1-14. The value of 6 is Material 500. // ORIENTATION: text, bg, border, fill, stroke // // Mixin example for red // .example-text { // .red(6, text); // } // .example-background { // .red(7, bg); // } // // Mixin: // Red .red(@am-clr, @am-clr-orientation) { & when (@am-clr-orientation = text) { color: extract(@group-red, @am-clr); } & when (@am-clr-orientation = bg) { background-color: extract(@group-red, @am-clr); } & when (@am-clr-orientation = border) { border-color: extract(@group-red, @am-clr); } & when (@am-clr-orientation = fill) { fill: extract(@group-red, @am-clr); } & when (@am-clr-orientation = stroke) { stroke: extract(@group-red, @am-clr); } }

[ionlyseespots]

merged into /master

[ionlyseespots]

color classes are now semantic.

What this means is that you can pick a color (and class) and if you decide to change colors, you do not have to touch the HTML and change the class name. Simply update the CSS or LESS variable.