Skip to content

Commit

Permalink
Docs(web): Add Stack demo #DS-908
Browse files Browse the repository at this point in the history 
- Stack demo in web is now same as demo in web-react and web-twig
  • Loading branch information
@pavelklibani
pavelklibani committed Sep 21, 2023
1 parent d61febc commit a2d8b85
Showing 1 changed file with 102 additions and 78 deletions.
180 changes: 102 additions & 78 deletions packages/web/src/scss/components/Stack/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{{#> layout/plain }}

<section class="docs-Section">
<section class="docs-Section">

<h2 class="docs-Heading">Stacked Form Fields</h2>

<h2 class="docs-Heading">Stacked Form Fields</h2>
<div class="docs-Stack docs-Stack--stretch">

<div class="Stack Stack--hasSpacing">
<div class="TextField">
Expand All @@ -15,11 +17,15 @@ <h2 class="docs-Heading">Stacked Form Fields</h2>
</div>
</div>

</section>
</div>

</section>

<section class="docs-Section">

<section class="docs-Section">
<h2 class="docs-Heading">Stacked Blocks</h2>

<h2 class="docs-Heading">Stacked Blocks</h2>
<div class="docs-Stack docs-Stack--stretch">

<ul class="Stack">
<li>
Expand All @@ -39,101 +45,119 @@ <h2 class="docs-Heading">Stacked Blocks</h2>
</li>
</ul>

</section>
</div>

</section>

<section class="docs-Section">

<h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
<h2 class="docs-Heading">Stacked Blocks with Vertical Spacing</h2>

<ul class="Stack Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>
<div class="docs-Stack docs-Stack--stretch">

<ul class="Stack Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>

</div>

</section>

<section class="docs-Section">

<h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
<h2 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h2>

<ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>
<div class="docs-Stack docs-Stack--stretch">

<ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>

</div>

</section>

<section class="docs-Section">

<h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
<h2 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h2>

<ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>
<div class="docs-Stack docs-Stack--stretch">

<ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>

</div>

</section>

<section class="docs-Section">

<h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
<h2 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h2>

<ul class="Stack Stack--hasIntermediateDividers">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>
<div class="docs-Stack docs-Stack--stretch">

<ul class="Stack Stack--hasIntermediateDividers">
<li>
<div class="docs-Box">
Block 1
</div>
</li>
<li>
<div class="docs-Box">
Block 2
</div>
</li>
<li>
<div class="docs-Box">
Block 3
</div>
</li>
</ul>

</div>

</section>

Expand Down

0 comments on commit a2d8b85

Please sign in to comment.