superfly-css-utilities-colors
Version:
73 lines (58 loc) • 2.41 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test superfly-css-color-utilities</title>
<link href="../../main/css/index.css" rel="stylesheet">
<link href="../../test/css/index.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class=Test-header>
<h1 class="Display--fs400fw700">Color Utility Tests</h1>
<a href="https://github.com/superfly-css/superfly-css-utilities-colors">Github</a>
</div>
<div class="Test">
<h2 class="Test-when">the
<code>transparent-test-block</code> is rendered</h2>
<pre class="Test-markup">
<code class="html">
<div class="transparent-test-block">
<code style="color:gray;">transparent-test-block</code>
</div>
</code>
</pre>
<h2 class="Test-then">the background color of the body shows</h2>
<hr>
<h2 class="Test-when">the gray background color utilities are applied.</h2>
<pre class="Test-markup">
<code class="html">
<div class="u-color-background-gray-100 transparent-test-block">
<code>u-color-background-gray-100</code>
</div>
<div class="u-color-background-gray-300 transparent-test-block">
<code>u-color-background-gray-300</code>
</div>
<div class="u-color-background-gray-400 transparent-test-block">
<code>u-color-background-gray-400</code>
</div>
<div class="u-color-background-gray-500 transparent-test-block">
<code>u-color-background-gray-500</code>
</div>
<div class="u-color-background-gray-600 transparent-test-block">
<code>u-color-background-gray-600</code>
</div>
<div class="u-color-background-gray-700 transparent-test-block">
<code>u-color-background-gray-700</code>
</div>
<div class="u-color-background-gray-900 transparent-test-block">
<code>u-color-background-gray-900</code>
</div>
</code>
</pre>
<h2 class="Test-then">the right background color is rendered.</h2>
</div>
</body>
</html>