Mirage: BGA styles

1.1 sass.colors Colors

Use the color() function to add colors to CSS properties. To learn more, read the Chroma documentation.

Example

branding

The site's main colors. Can be used to define colors in other color schemes.

color(bga-blue) uses the color: #003a63

color(bga-yellow) uses the color: #fff200 This color is inherited by: mark-bg

color(black) uses the color: #000 This color is inherited by: text-black, grey-dark, grey, grey-light, text, text-grey, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary

color(text-black) uses the color: #333333 (black) This color is inherited by: text, autocomplete, button, menu-active, status-highlight, warning, tab

color(grey-dark) uses the color: #666666 (black) This color is inherited by: text-grey, progress-bar-border, skip-link-bg, tab-secondary

color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary

color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg

color(grey-extra-light) uses the color: #eaebee This color is inherited by: body-bg, resizable-grippie, row-stripe, watermark

color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, skip-link, tabs-bg, tab-text-shadow

color(blue) uses the color: #4580bb This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg

color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg

color(yellow) uses the color: #fd0 This color is inherited by: preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(text) uses the color: #333333 (text-black) This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab

color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg

color(text-grey) uses the color: #666666 (grey-dark)

color(link) uses the color: #4580bb (blue)

color(link-visited) uses the color: #294d71 (blue)

color(link-active) uses the color: #c00 (red)

color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border

color(autocomplete) uses the color: #333333 (text)

color(autocomplete-bg) uses the color: #fff (text-bg)

color(autocomplete-select) uses the color: #fff (white)

color(autocomplete-select-bg) uses the color: #4580bb (blue)

color(body-bg) uses the color: #eaebee (grey-extra-light)

color(button) uses the color: #333333 (text)

color(button-disabled) uses the color: #999999 (grey)

color(fieldset-summary) uses the color: #999999 (grey)

color(form-error) uses the color: #c00 (red)

color(mark-highlight) uses the color: #c00 (red)

color(mark-bg) uses the color: #fff200 (bga-yellow)

color(menu-active) uses the color: #333333 (text)

color(preview-bg) uses the color: #fffadb (yellow)

color(progress-bar) uses the color: #4580bb (blue)

color(progress-bar-bg) uses the color: #cccccc (grey-light)

color(progress-bar-border) uses the color: #666666 (grey-dark)

color(resizable-grippie) uses the color: #eaebee (grey-extra-light)

color(row-stripe) uses the color: #eaebee (grey-extra-light)

color(row-disabled) uses the color: #cccccc (grey-light)

color(skip-link) uses the color: #fff (white)

color(skip-link-bg) uses the color: #666666 (grey-dark)

color(status) uses the color: #4580bb (blue) This color is inherited by: status-bg

color(status-bg) uses the color: white (status)

color(status-highlight) uses the color: #333333 (text)

color(warning) uses the color: #333333 (text)

color(warning-bg) uses the color: #fffce6 (yellow)

color(warning-border) uses the color: #fd0 (yellow)

color(error) uses the color: #c00 (red) This color is inherited by: error-bg

color(error-bg) uses the color: #fff0f0 (error)

color(tabs-border) uses the color: #cccccc (border)

color(tabs-bg) uses the color: #fff (text-bg)

color(tab) uses the color: #333333 (text)

color(tab-text-shadow) uses the color: #fff (white)

color(tab-bg) uses the color: #dddddd (grey-light)

color(tab-secondary) uses the color: #666666 (grey-dark)

color(table-drag) uses the color: #fffadb (yellow)

color(table-select) uses the color: #fffdf0 (yellow)

color(watermark) uses the color: #eaebee (grey-extra-light)

Source: init/_colors.scss, line 3