85 lines
5.3 KiB
Twig
85 lines
5.3 KiB
Twig
{% extends '@ChillMain/layout.html.twig' %}
|
|
|
|
{% block title %}
|
|
SASS Assets Tests - page 1
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<style media="screen">
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="col-md-8">
|
|
<h1>CSS Tests - page 1 : float-button</h1>
|
|
|
|
<h2>1) avec des li</h2>
|
|
<div class="float-button bottom debug">
|
|
<div class="box">
|
|
<div class="action">
|
|
<ul class="record_actions">
|
|
<li><button type="button" name="button">Annuler</button></li>
|
|
<li><button type="button" name="button">Voir</button></li>
|
|
<li><button type="button" name="button">Enregistrer</button></li>
|
|
</ul>
|
|
</div>
|
|
<ul class="list-content fa-ul">
|
|
<li><i class="fa fa-li fa-file-text-o"></i>Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus.</li>
|
|
<li><i class="fa fa-li fa-map-marker"></i>
|
|
<div class="chill-entity entity-address my-3" data-v-8b2170ec="">
|
|
<div class="address multiline" data-v-8b2170ec="">
|
|
<p class="street" data-v-8b2170ec="">97, chemin Franck Julien, </p>
|
|
<p class="postcode" data-v-8b2170ec="">1000 Bruxelles</p>
|
|
<p class="country" data-v-8b2170ec="">Belgique</p>
|
|
</div>
|
|
<div class="address-more" data-v-8b2170ec="">
|
|
<div data-v-8b2170ec="">
|
|
<span class="corridor" data-v-8b2170ec="">
|
|
<b data-v-8b2170ec="">Couloir</b>: 3
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li><i class="fa fa-li fa-mobile"></i><a href="tel: +33 8 27 17 12 19">+33 8 27 17 12 19</a></li>
|
|
<li><i class="fa fa-li fa-envelope-o"></i><a href="mailto: gusikowski.yesenia@hotmail.com">gusikowski.yesenia@hotmail.com</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h2>2) avec des p</h2>
|
|
|
|
<div class="float-button bottom debug">
|
|
<div class="box">
|
|
<div class="action">
|
|
<ul class="record_actions">
|
|
<li><button type="button" name="button">Annuler</button></li>
|
|
<li><button type="button" name="button">Voir</button></li>
|
|
<li><button type="button" name="button">Enregistrer</button></li>
|
|
</ul>
|
|
</div>
|
|
<p>Voir <a href="https://css-tricks.com/float-an-element-to-the-bottom-corner/">trick</a>.</p>
|
|
<p>Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus. Proin lacinia, sapien in pharetra ultricies, justo urna fermentum lectus, non tempor ipsum leo a ante. Aenean porta, ipsum in fringilla hendrerit, nisi justo vestibulum ex, non lacinia risus felis vitae diam. Curabitur sem eros, consectetur a auctor vel, facilisis sit amet sem.</p>
|
|
<p>Aenean finibus a nisl a scelerisque. Donec bibendum facilisis odio id euismod. Pellentesque luctus justo ligula, eget dictum ligula ultrices quis. Pellentesque at nunc est. Aenean luctus, tortor in lacinia porta, ex nisl dignissim magna, non vehicula elit risus at elit. Suspendisse in velit non augue egestas laoreet. Etiam blandit lacus at semper aliquam. Integer leo nunc, condimentum sagittis accumsan sit amet, consectetur vel massa. Aenean convallis nibh vel augue ullamcorper tempus. Integer eu laoreet sapien.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>3) avec des div</h2>
|
|
<div class="float-button bottom debug">
|
|
<div class="box">
|
|
<div class="action">
|
|
<ul class="record_actions">
|
|
<li><button type="button" name="button">Annuler</button></li>
|
|
<li><button type="button" name="button">Voir</button></li>
|
|
<li><button type="button" name="button">Enregistrer</button></li>
|
|
</ul>
|
|
</div>
|
|
<div>Voir <a href="https://css-tricks.com/float-an-element-to-the-bottom-corner/">trick</a>.</div>
|
|
<div>Sed efficitur magna vel massa efficitur venenatis. Sed odio massa, scelerisque sit amet mauris eu, tristique dictum arcu. Sed posuere, elit eget cursus rhoncus, arcu ligula blandit nisi, in vulputate eros massa non risus. Proin lacinia, sapien in pharetra ultricies, justo urna fermentum lectus, non tempor ipsum leo a ante. Aenean porta, ipsum in fringilla hendrerit, nisi justo vestibulum ex, non lacinia risus felis vitae diam.
|
|
<a href="#">Curabitur</a> sem eros, consectetur a auctor vel, facilisis sit amet sem.</div>
|
|
<div>Aenean finibus a nisl a scelerisque. Donec bibendum facilisis odio id euismod. Pellentesque luctus justo ligula, eget dictum ligula ultrices quis. Pellentesque at nunc est. Aenean luctus, tortor in lacinia porta, ex nisl dignissim magna, non vehicula elit risus at elit. Suspendisse in velit non augue egestas laoreet. Etiam blandit lacus at semper aliquam. Integer leo nunc, condimentum sagittis accumsan sit amet, consectetur vel massa. Aenean convallis nibh vel augue ullamcorper tempus. Integer eu laoreet sapien.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|