xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial work for hstack and vstack

Browse Source
This commit is contained in:
Hakim El Hattab 2020-05-20 14:33:52 +02:00
parent f0b67ad6ea
commit cd5161ffe9
3 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/layout.scss
View File

@ -34,16 +34,24 @@
.reveal .r-vstack { .reveal .r-vstack {
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
} }
.reveal .r-hstack { .reveal .r-hstack {
flex-direction: row; flex-direction: row;
}
.reveal .items-center {
align-items: center; align-items: center;
justify-content: center;
} }
.reveal .justify-center { // Naming based on tailwindcss
justify-content: center; .reveal .items-stretch { align-items: stretch; }
} .reveal .items-start { align-items: flex-start; }
.reveal .items-center { align-items: center; }
.reveal .items-end { align-items: flex-end; }
.reveal .justify-between { justify-content: space-between; }
.reveal .justify-around { justify-content: space-around; }
.reveal .justify-start { justify-content: flex-start; }
.reveal .justify-center { justify-content: center; }
.reveal .justify-end { justify-content: flex-end; }

2
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

23
examples/layout-helpers.html
View File

@ -24,6 +24,8 @@
<ul> <ul>
<li><a href="#/stretch">Stretch</a></li> <li><a href="#/stretch">Stretch</a></li>
<li><a href="#/stack">Stack</a></li> <li><a href="#/stack">Stack</a></li>
<li><a href="#/hstack">HStack</a></li>
<li><a href="#/vstack">VStack</a></li>
</ul> </ul>
</section> </section>
@ -74,6 +76,27 @@
</div> </div>
</section> </section>
<section id="hstack">
<h2>HStack</h2>
<p>Stacks multiple elements horizontally.</p>
<pre><code class="html" data-trim data-line-numbers>
<div class="r-hstack">
&lt;img width="450" height="300" src="..."&gt;
&lt;img width="300" height="450" src="..."&gt;
&lt;img width="400" height="400" src="..."&gt;
</div>
</code></pre>
</section>
<section data-auto-animate>
<h2>HStack Example</h2>
<div class="r-hstack">
<p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
<p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
<p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
</div>
</section>
</div> </div>
</div> </div>