MaxMilton/ekscss

View on GitHub
packages/framework/level2/color.xcss

Summary

Maintainability
Test Coverage
/**
 * COLOURS
 */

/* Foreground colours */

${x.fn.each(x.color, (key, value) => xcss`
  .${key} { color: ${value}; }
`)}

/* Background colours */

${x.fn.each(x.color, (key, value) => xcss`
  .bg-${key} { background-color: ${value}; }
`)}

// Zebra stripes (alternating coloured backgrounds)
.bg-zebra:nth-child(even) {
  background-color: ${x.color.zebraBackground};
}

/* Border colours */

.border { border-style: solid }
.border-dash { border-style: dashed }

${x.fn.each(x.color, (key, value) => xcss`
  .border-${key} { border-color: ${value}; }
`)}

/* Transparency */

.alpha100 { opacity: 1; }
.alpha85 { opacity: 0.85; }
.alpha75 { opacity: 0.75; }
.alpha50 { opacity: 0.5; }
.alpha25 { opacity: 0.25; }
.alpha15 { opacity: 0.15; }
.alpha0 { opacity: 0; }

/* Utility colours */

.plain { color: ${x.color.text}; }
.muted { color: ${x.color.muted}; }
.bg-muted { background-color: ${x.color.muted}; }
.inherit { color: inherit; }
.inherit-i { color: inherit !important; }