forked from tykayn/funky-framadate-front
added list of elements
This commit is contained in:
newick
parent
b0ca964c75
commit
8ac8b696aa
@ -1,4 +1,197 @@
|
||||
<h1>page de démo</h1>
|
||||
<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
|
||||
</p>
|
||||
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>
|
||||
<h1>Atoms</h1>
|
||||
<section>
|
||||
<article>
|
||||
<h2>Headings</h2>
|
||||
|
||||
<h1>Ceci est un h1</h1>
|
||||
<h2>Ceci est un h2</h2>
|
||||
<h3>Ceci est un h3</h3>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Links</h2>
|
||||
<div>
|
||||
<a [routerLink]="'/home'" class="next">
|
||||
<span class="text" i18n>
|
||||
C'est parti !
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a [routerLink]="'/home'" class="prev">
|
||||
<span class="text" i18n>
|
||||
C'est parti !
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<p>
|
||||
<input type="submit" value="Input Submit with border" class="btn_border"><br>
|
||||
<input type="submit" value="Input Submit with background" class="btn_background"><br>
|
||||
<input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br>
|
||||
<input type="submit" value="Input Submit delete with background" class="btn_background btn_delete">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="btn_border">Button with border</button><br>
|
||||
<button class="btn_background">Button with background</button><br>
|
||||
<button class="btn_border btn_delete">Button delete with background</button><br>
|
||||
<button class="btn_background btn_delete">Button delete with background</button>
|
||||
</p>
|
||||
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Forms element</h2>
|
||||
|
||||
<h3>Labels</h3>
|
||||
|
||||
<label for="">Un label pour les labelliser tous</label>
|
||||
|
||||
<h3>Input text</h3>
|
||||
<input type="text" name="" id=""><br>
|
||||
<input type="text" name="" id="" value="texte">
|
||||
|
||||
<h3>Input email</h3>
|
||||
<input type="email" name="" id=""><br>
|
||||
<input type="email" name="" id="" value="adresse@email.com">
|
||||
|
||||
<h3>Input password</h3>
|
||||
<input type="password" name="" id=""><br>
|
||||
<input type="password" name="" id="" value="password">
|
||||
|
||||
<h3>Input date</h3>
|
||||
<input type="date" name="" id=""><br>
|
||||
<input type="date" name="" id="" value="1985-11-23">
|
||||
|
||||
<h3>Select</h3>
|
||||
<select name="" id="">
|
||||
<option value="">
|
||||
1
|
||||
</option>
|
||||
<option value="">
|
||||
2
|
||||
</option>
|
||||
<option value="">
|
||||
3
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<h3>Textarea</h3>
|
||||
<textarea name="" id="" cols="30" rows="10"></textarea>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Paragraphs</h2>
|
||||
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
|
||||
Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
|
||||
delectus beatae!</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Lists</h2>
|
||||
|
||||
<h3>Unordered list</h3>
|
||||
<ul>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Ordered list</h3>
|
||||
<ol>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
</ol>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Images</h2>
|
||||
<img src="http://placekitten.com/200/300" alt="">
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Molecules</h1>
|
||||
|
||||
<article>
|
||||
<h2>Label + input text</h2>
|
||||
<label for="test-text">Ceci est un label un peu long mais pas trop</label>
|
||||
<input type="text" name="test-text" id="test-text">
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Label + select</h2>
|
||||
<label for="test-select">Ceci est un label un peu long mais pas trop</label>
|
||||
<select name="test-select" id="test-select">
|
||||
<option value="">
|
||||
1
|
||||
</option>
|
||||
<option value="">
|
||||
2
|
||||
</option>
|
||||
<option value="">
|
||||
3
|
||||
</option>
|
||||
</select>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Input text with info</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Commentaries</h2>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Components</h1>
|
||||
|
||||
<article>
|
||||
<h2>Images list</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Calendar</h2>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Modale</h2>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Way to vote</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Voted</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Graphics</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
|
||||
</article>
|
||||
</section>
|
||||
@ -0,0 +1,22 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
section {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 6px solid #000;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2rem 0;
|
||||
border-top: 3px solid #ffb92c;
|
||||
|
||||
h3 {
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user