3434 < a class ="c-link-inline " href ="/o-pair.html "> Pair</ a >
3535 < a class ="c-link-inline " href ="/o-ratio.html "> Ratio</ a >
3636 < a class ="c-link-inline " href ="/o-stack.html "> Stack</ a >
37+ < a class ="c-link-inline " href ="/o-table-wrapper.html "> Table Wrapper</ a >
3738 </ div >
3839
3940 < div class ="u-type-lg u-margin-block-end-sm "> < strong > Components</ strong > </ div >
5152 < a class ="c-link-inline " href ="/c-link-inline.html "> Link-Inline</ a >
5253 < a class ="c-link-inline " href ="/c-spinner.html "> Spinner</ a >
5354 < 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 >
5555 </ div >
5656
5757 < div class ="u-type-lg u-margin-block-end-sm "> < strong > Behaviors</ strong > </ div >
9393 < main class ="c-doc-layout__main ">
9494 < button id ="js-menu-toggle " class ="c-button u-margin-block-end-md u-visible-below-md "> Toggle Menu </ button >
9595 < div class ="position:relative ">
96- < h1 > Scroll-Scale </ h1 >
96+ < h1 > Scroll-Reveal </ h1 >
9797< p > Reveals an element as it enters the viewport.</ p >
98- < pre > < code > <div class="c-box c-box--border">
98+ < pre > < code > <div class="c-box c-box--border u-margin-block-end-sm ">
9999 <p>The quick brown fox jumped over the lazy dog.</p>
100100 <p>The quick brown fox jumped over the lazy dog.</p>
101101 <p>The quick brown fox jumped over the lazy dog.</p>
@@ -110,7 +110,7 @@ <h1>Scroll-Scale</h1>
110110</ code > </ pre >
111111< div class ="c-doc-preview ">
112112 < 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 ">
113+ < p > < div class ="c-box c-box--border u-margin-block-end-sm ">
114114< p > The quick brown fox jumped over the lazy dog.</ p >
115115< p > The quick brown fox jumped over the lazy dog.</ p >
116116< p > The quick brown fox jumped over the lazy dog.</ p >
@@ -124,58 +124,56 @@ <h1>Scroll-Scale</h1>
124124</ div > </ p >
125125</ div >
126126< 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">
127+ < h3 > Range </ h3 >
128+ < p > Sets the animation range .</ p >
129+ < pre > < code > <div class="c-box c-box--border u-margin-block-end-sm ">
130130 <p>The quick brown fox jumped over the lazy dog.</p>
131131 <p>The quick brown fox jumped over the lazy dog.</p>
132132 <p>The quick brown fox jumped over the lazy dog.</p>
133133 <p>The quick brown fox jumped over the lazy dog.</p>
134134</div>
135- <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--subtle ">
135+ <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--range-short ">
136136 <p>The quick brown fox jumped over the lazy dog.</p>
137137 <p>The quick brown fox jumped over the lazy dog.</p>
138138 <p>The quick brown fox jumped over the lazy dog.</p>
139139 <p>The quick brown fox jumped over the lazy dog.</p>
140140</div>
141141</ code > </ pre >
142142< div class ="c-doc-preview ">
143- < div class ="c-box c-box--border ">
143+ < div class ="c-box c-box--border u-margin-block-end-sm ">
144144 < p > The quick brown fox jumped over the lazy dog.</ p >
145145 < p > The quick brown fox jumped over the lazy dog.</ p >
146146 < p > The quick brown fox jumped over the lazy dog.</ p >
147147 < p > The quick brown fox jumped over the lazy dog.</ p >
148148 </ div >
149- < div class ="c-box c-box--border b-scroll-reveal b-scroll-reveal--subtle ">
149+ < div class ="c-box c-box--border b-scroll-reveal b-scroll-reveal--range-short ">
150150 < p > The quick brown fox jumped over the lazy dog.</ p >
151151 < p > The quick brown fox jumped over the lazy dog.</ p >
152152 < p > The quick brown fox jumped over the lazy dog.</ p >
153153 < p > The quick brown fox jumped over the lazy dog.</ p >
154154 </ div >
155155</ div >
156- < h3 > Strong</ h3 >
157- < p > Makes the effect more strong.</ p >
158- < pre > < code > <div class="c-box c-box--border">
156+ < pre > < code > <div class="c-box c-box--border u-margin-block-end-sm">
159157 <p>The quick brown fox jumped over the lazy dog.</p>
160158 <p>The quick brown fox jumped over the lazy dog.</p>
161159 <p>The quick brown fox jumped over the lazy dog.</p>
162160 <p>The quick brown fox jumped over the lazy dog.</p>
163161</div>
164- <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--strong ">
162+ <div class="c-box c-box--border b-scroll-reveal b-scroll-reveal--range-long ">
165163 <p>The quick brown fox jumped over the lazy dog.</p>
166164 <p>The quick brown fox jumped over the lazy dog.</p>
167165 <p>The quick brown fox jumped over the lazy dog.</p>
168166 <p>The quick brown fox jumped over the lazy dog.</p>
169167</div>
170168</ code > </ pre >
171169< div class ="c-doc-preview ">
172- < div class ="c-box c-box--border ">
170+ < div class ="c-box c-box--border u-margin-block-end-sm ">
173171 < p > The quick brown fox jumped over the lazy dog.</ p >
174172 < p > The quick brown fox jumped over the lazy dog.</ p >
175173 < p > The quick brown fox jumped over the lazy dog.</ p >
176174 < p > The quick brown fox jumped over the lazy dog.</ p >
177175 </ div >
178- < div class ="c-box c-box--border b-scroll-reveal b-scroll-reveal--strong ">
176+ < div class ="c-box c-box--border b-scroll-reveal b-scroll-reveal--range-long ">
179177 < p > The quick brown fox jumped over the lazy dog.</ p >
180178 < p > The quick brown fox jumped over the lazy dog.</ p >
181179 < p > The quick brown fox jumped over the lazy dog.</ p >
0 commit comments