|
51 | 51 | <a class="c-link-inline" href="/c-link-inline.html">Link-Inline</a> |
52 | 52 | <a class="c-link-inline" href="/c-spinner.html">Spinner</a> |
53 | 53 | <a class="c-link-inline" href="/c-table.html">Table</a> |
| 54 | + <a class="c-link-inline" href="/c-table-wrapper.html">Table Wrapper</a> |
54 | 55 | </div> |
55 | 56 |
|
56 | 57 | <div class="u-type-lg u-margin-block-end-sm"><strong>Behaviors</strong></div> |
|
61 | 62 | <a class="c-link-inline" href="/b-press-scale.html">Press-Scale</a> |
62 | 63 | <a class="c-link-inline" href="/b-press-tint.html">Press-Tint</a> |
63 | 64 | <a class="c-link-inline" href="/b-scroll-reveal.html">Scroll-Reveal</a> |
| 65 | + <a class="c-link-inline" href="/b-scroll-scale.html">Scroll-Scale</a> |
64 | 66 | </div> |
65 | 67 |
|
66 | 68 | <div class="u-type-lg u-margin-block-end-sm"><strong>Utilities</strong></div> |
|
91 | 93 | <main class="c-doc-layout__main"> |
92 | 94 | <button id="js-menu-toggle" class="c-button u-margin-block-end-md u-visible-below-md"> Toggle Menu </button> |
93 | 95 | <div class="position:relative"> |
94 | | - <h1>Scroll-Reveal</h1> |
| 96 | + <h1>Scroll-Scale</h1> |
95 | 97 | <p>Reveals an element as it enters the viewport.</p> |
96 | | -<pre><code><p> |
97 | | - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus |
98 | | - iaculis eros ut arcu varius accumsan. Duis ac tristique ipsum. Morbi |
99 | | - maximus molestie tincidunt. Quisque nec sodales purus. Nam ipsum est, |
100 | | - lobortis et efficitur malesuada, pulvinar vel dui. Morbi sed ex non |
101 | | - arcu congue condimentum. Quisque at tristique ligula. In ut ex |
102 | | - hendrerit ante vestibulum viverra. |
103 | | -</p> |
104 | | -<p> |
105 | | - Pellentesque accumsan non ex sollicitudin. Maecenas non metus placerat, |
106 | | - convallis libero sit amet, dapibus erat. Nam auctor, tortor a blandit |
107 | | - ultricies, arcu enim tristique sapien, at ultrices libero dolor bibendum |
108 | | - felis. Proin semper, libero vitae luctus iaculis, mauris turpis iaculis |
109 | | - dolor, eget viverra ipsum lectus eget nisl. Lorem ipsum dolor sit amet, |
110 | | - consectetur adipiscing elit. Morbi auctor ipsum vel ultricies laoreet. |
111 | | - Vivamus et auctor arcu. |
112 | | -</p> |
113 | | -<p class="c-box b-scroll-reveal u-color-neutral"> |
114 | | - Donec ac blandit erat. Curabitur varius est eget convallis auctor. Nunc |
115 | | - porttitor sollicitudin quam, quis mollis nibh egestas a. Maecenas metus |
116 | | - felis, feugiat at porta in, fringilla a magna. Sed vulputate, convallis |
117 | | - laoreet, enim nisl pulvinar sapien, eu venenatis arcu diam nec ligula. |
118 | | - Vivamus eleifend blandit convallis. Integer faucibus ultricies felis, |
119 | | - sed vestibulum purus suscipit vitae. Quisque sodales urna sit amet felis |
120 | | - mollis, at pellentesque arcu consectetur. Ut vehicula nulla et dignissim |
121 | | - efficitur. Donec eleifend tempor commodo. |
122 | | -</p> |
| 98 | +<pre><code><div class="c-box c-box--border"> |
| 99 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 100 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 101 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 102 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 103 | +</div> |
| 104 | +<div class="c-box c-box--border b-scroll-reveal"> |
| 105 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 106 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 107 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 108 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 109 | +</div> |
123 | 110 | </code></pre> |
124 | 111 | <div class="c-doc-preview"> |
125 | | - <p> |
126 | | - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus |
127 | | - iaculis eros ut arcu varius accumsan. Duis ac tristique ipsum. Morbi |
128 | | - maximus molestie tincidunt. Quisque nec sodales purus. Nam ipsum est, |
129 | | - lobortis et efficitur malesuada, pulvinar vel dui. Morbi sed ex non |
130 | | - arcu congue condimentum. Quisque at tristique ligula. In ut ex |
131 | | - hendrerit ante vestibulum viverra. |
132 | | - </p> |
133 | | - <p> |
134 | | - Pellentesque accumsan non ex sollicitudin. Maecenas non metus placerat, |
135 | | - convallis libero sit amet, dapibus erat. Nam auctor, tortor a blandit |
136 | | - ultricies, arcu enim tristique sapien, at ultrices libero dolor bibendum |
137 | | - felis. Proin semper, libero vitae luctus iaculis, mauris turpis iaculis |
138 | | - dolor, eget viverra ipsum lectus eget nisl. Lorem ipsum dolor sit amet, |
139 | | - consectetur adipiscing elit. Morbi auctor ipsum vel ultricies laoreet. |
140 | | - Vivamus et auctor arcu. |
141 | | - </p> |
142 | | - <p class="c-box b-scroll-reveal u-color-neutral"> |
143 | | - Donec ac blandit erat. Curabitur varius est eget convallis auctor. Nunc |
144 | | - porttitor sollicitudin quam, quis mollis nibh egestas a. Maecenas metus |
145 | | - felis, feugiat at porta in, fringilla a magna. Sed vulputate, convallis |
146 | | - laoreet, enim nisl pulvinar sapien, eu venenatis arcu diam nec ligula. |
147 | | - Vivamus eleifend blandit convallis. Integer faucibus ultricies felis, |
148 | | - sed vestibulum purus suscipit vitae. Quisque sodales urna sit amet felis |
149 | | - mollis, at pellentesque arcu consectetur. Ut vehicula nulla et dignissim |
150 | | - efficitur. Donec eleifend tempor commodo. |
151 | | - </p> |
| 112 | + <p class="c-box c-box--spacing--sm u-color-secondary">You may have to resize your browser window to see the effect.</p> |
| 113 | +<p><div class="c-box c-box--border"> |
| 114 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 115 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 116 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 117 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 118 | +</div> |
| 119 | +<div class="c-box c-box--border b-scroll-reveal"> |
| 120 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 121 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 122 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 123 | +<p>The quick brown fox jumped over the lazy dog.</p> |
| 124 | +</div></p> |
| 125 | +</div> |
| 126 | +<h2>Modifiers</h2> |
| 127 | +<h3>Subtle</h3> |
| 128 | +<p>Makes the effect more subtle.</p> |
| 129 | +<pre><code><div class="c-box c-box--border"> |
| 130 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 131 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 132 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 133 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 134 | +</div> |
| 135 | +<div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--subtle"> |
| 136 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 137 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 138 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 139 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 140 | +</div> |
| 141 | +</code></pre> |
| 142 | +<div class="c-doc-preview"> |
| 143 | + <div class="c-box c-box--border"> |
| 144 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 145 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 146 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 147 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 148 | + </div> |
| 149 | + <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--subtle"> |
| 150 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 151 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 152 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 153 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 154 | + </div> |
| 155 | +</div> |
| 156 | +<h3>Strong</h3> |
| 157 | +<p>Makes the effect more strong.</p> |
| 158 | +<pre><code><div class="c-box c-box--border"> |
| 159 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 160 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 161 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 162 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 163 | +</div> |
| 164 | +<div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--strong"> |
| 165 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 166 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 167 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 168 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 169 | +</div> |
| 170 | +</code></pre> |
| 171 | +<div class="c-doc-preview"> |
| 172 | + <div class="c-box c-box--border"> |
| 173 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 174 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 175 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 176 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 177 | + </div> |
| 178 | + <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--strong"> |
| 179 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 180 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 181 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 182 | + <p>The quick brown fox jumped over the lazy dog.</p> |
| 183 | + </div> |
152 | 184 | </div> |
153 | 185 |
|
154 | 186 | </div> |
|
0 commit comments