Docs for the new contrast module.
This commit is contained in:
parent
902450a244
commit
2b29dd0bbc
8
doc-src/content/examples/compass/utilities/contrast.haml
Normal file
8
doc-src/content/examples/compass/utilities/contrast.haml
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Compass Contrast Color Example
|
||||
description: Make text readable
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/color/_contrast.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
@ -0,0 +1,3 @@
|
||||
.example
|
||||
%p.dark This is a paragraph with a <em>dark</em> background and <em>light</em> text.
|
||||
%p.light This is a paragraph with a <em>light</em> background and <em>dark</em> text.
|
@ -0,0 +1,11 @@
|
||||
$contrasted-dark-default: #333
|
||||
$contrasted-light-default: #e7e7e7
|
||||
|
||||
@import "compass/utilities/color/contrast"
|
||||
|
||||
.example
|
||||
p.dark
|
||||
+contrasted(#5F1210)
|
||||
p.light
|
||||
+contrasted(#C82523)
|
||||
|
16
doc-src/content/reference/compass/utilities/color.haml
Normal file
16
doc-src/content/reference/compass/utilities/color.haml
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Compass Color
|
||||
crumb: Color
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/_color.scss
|
||||
layout: core
|
||||
sidebar: true
|
||||
meta_description: Utilities for working with colors.
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- utilities
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Utilities for working with colors.
|
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Compass Color Contrast
|
||||
crumb: Color Contrast
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/color/_contrast.scss
|
||||
layout: core
|
||||
meta_description: Contrast foreground with background colors.
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- utilities
|
||||
---
|
||||
= render 'reference'
|
Loading…
Reference in New Issue
Block a user