wispcode.github.io/b-tint.html at main · wispcode/wispcode.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tint</title>
        <link rel="stylesheet" href="/public/styles/bundle.min.css">
        <link rel="stylesheet" href="/public/styles/custom.full.css">


    </head>
    <body>
        <div class="c-doc-layout">
            <aside id="js-menu" class="c-doc-layout__sidebar">

                <div class="c-box c-box--spacing-lg">
                    <div class="u-type-lg u-margin-block-end-sm"><strong>Getting Started</strong></div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Objects</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/o-cluster.html">Cluster</a>
                        <a class="c-link-inline" href="/o-container.html">Container</a>
                        <a class="c-link-inline" href="/o-grid.html">Grid</a>
                        <a class="c-link-inline" href="/o-media.html">Media</a>
                        <a class="c-link-inline" href="/o-pair.html">Pair</a>
                        <a class="c-link-inline" href="/o-ratio.html">Ratio</a>
                        <a class="c-link-inline" href="/o-stack.html">Stack</a>
                    </div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Components</strong></div>
                    <div class="u-type-lg u-margin-block-end-sm"><strong>Behaviors</strong></div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Utilities</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/u-color.html">Color</a>
                        <a class="c-link-inline" href="/u-hidden-below.html">Hidden Below</a>
                        <a class="c-link-inline" href="/u-margin.html">Margin</a>
                        <a class="c-link-inline" href="/u-text.html">Text</a>
                        <a class="c-link-inline" href="/u-type.html">Type</a>
                        <a class="c-link-inline" href="/u-visible-below.html">Visible Below</a>
                        <a class="c-link-inline" href="/u-visually-hidden.html">Visually Hidden</a>
                        <a class="c-link-inline" href="/u-width.html">Width</a>
                    </div>

                </div>
            </aside>
            <div id="js-layout-overlay" class="c-doc-layout__overlay"></div>
            <div>
                <header class="c-box c-box--spacing-lg u-color-primary">
                    <div class="o-cluster o-cluster--align-center o-cluster--justify-between">
                        <a class="c-link-inline" href="http://wispcode.github.io/"><strong>Wisp CSS</strong></a>
                        <a href="https://github.com/wispcode/wisp-css/">
                            <img src="/github-logo-sm.svg" alt="GitHub Logo">
                        </a>
                    </div>
                </header>
                <main class="c-doc-layout__main">
                    <button id="js-menu-toggle" class="c-button u-margin-block-end-md u-visible-below-md"> Toggle Menu </button>
                    <div class="position:relative">
                        <h1>Tint</h1>
<p>Tints an element on a hover and active state.</p>
<pre><code>&lt;div class=&quot;o-cluster u-color-neutral&quot;&gt;
	&lt;a class=&quot;c-link-block b-press-tint&quot; href=&quot;#&quot;&gt;Tab 1&lt;/a&gt;
	&lt;a class=&quot;c-link-block b-press-tint&quot; href=&quot;#&quot;&gt;Tab 2&lt;/a&gt;
	&lt;a class=&quot;c-link-block b-press-tint&quot; href=&quot;#&quot;&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<div class="c-doc-preview" style="">
	<div class="o-cluster u-color-neutral">
		<a class="c-link-block b-press-tint" href="#">Tab 1</a>
		<a class="c-link-block b-press-tint" href="#">Tab 2</a>
		<a class="c-link-block b-press-tint" href="#">Tab 3</a>
	</div>
</div>

                    </div>
                </main>
            </div>
        </div>
        <script src="/public/scripts/sidebar.js"></script>
  </body>
</html>