Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/old/app/design/frontend/Cnc/default/Kaliop_Styleguide/templates/ |
<?php
/**
* Copyright (c) 2019 Kaliop Digital Commerce (https://digitalcommerce.kaliop.com) All Rights Reserved.
* https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
* kaliop_styleguide_m2
* Julien TRAJMAN <[email protected]> <[email protected]>
*/
?>
<section class="styleguide">
<div class="styleguide__part">
<h2 class="title-2 section-title">Font Icon</h2>
<h3 class="title-3">=> Add "icon-" before the name of the icon to use in template
but it's not necessary for categories configuration in Back Office</h3>
<ul class="icons-grid">
<li><span class="icon-download2"></span><span>download2</span></li>
<li><span class="icon-transfert"></span><span>transfert</span></li>
<li><span class="icon-locator"></span><span>locator</span></li>
<li><span class="icon-shape"></span><span>shape</span></li>
<li><span class="icon-society"></span><span>society</span></li>
<li><span class="icon-transistor"></span><span>transistor</span></li>
<li><span class="icon-valid-3"></span><span>valid-3</span></li>
<li><span class="icon-alerte-round"></span><span>alerte-round</span></li>
<li><span class="icon-exclamation"></span><span>exclamation</span></li>
<li><span class="icon-exclamation-round"></span><span>exclamation-round</span></li>
<li><span class="icon-info"></span><span>info</span></li>
<li><span class="icon-info-round"></span><span>info-round</span></li>
<li><span class="icon-validate-round"></span><span>validate-round</span></li>
<li><span class="icon-security"></span><span>security</span></li>
<li><span class="icon-add"></span><span>add</span></li>
<li><span class="icon-engine"></span><span>engine</span></li>
<li><span class="icon-download"></span><span>download</span></li>
<li><span class="icon-desk"></span><span>desk</span></li>
<li><span class="icon-composition"></span><span>composition</span></li>
<li><span class="icon-cards-payment"></span><span>cards-payment</span></li>
<li><span class="icon-call"></span><span>call</span></li>
<li><span class="icon-cable"></span><span>cable</span></li>
<li><span class="icon-box"></span><span>box</span></li>
<li><span class="icon-battery"></span><span>battery</span></li>
<li><span class="icon-automate"></span><span>automate</span></li>
<li><span class="icon-alimentation"></span><span>alimentation</span></li>
<li><span class="icon-arrow"></span><span>arrow</span></li>
<li><span class="icon-basket"></span><span>basket</span></li>
<li><span class="icon-trash"></span><span>trash</span></li>
<li><span class="icon-chrono"></span><span>chrono</span></li>
<li><span class="icon-circuit"></span><span>circuit</span></li>
<li><span class="icon-contact"></span><span>contact</span></li>
<li><span class="icon-conversation"></span><span>conversation</span></li>
<li><span class="icon-cross"></span><span>cross</span></li>
<li><span class="icon-direction"></span><span>direction</span></li>
<li><span class="icon-electric"></span><span>electric</span></li>
<li><span class="icon-eyes"></span><span>eyes</span></li>
<li><span class="icon-facebook"></span><span>facebook</span></li>
<li><span class="icon-fan"></span><span>fan</span></li>
<li><span class="icon-follow-delivery"></span><span>follow-delivery</span></li>
<li><span class="icon-identity"></span><span>identity</span></li>
<li><span class="icon-instagram"></span><span>instagram</span></li>
<li><span class="icon-keyboard"></span><span>keyboard</span></li>
<li><span class="icon-language-earth"></span><span>language-earth</span></li>
<li><span class="icon-pin"></span><span>pin"></span</span></li>
<li><span class="icon-printing"></span><span>printing</span></li>
<li><span class="icon-robot"></span><span>robot</span></li>
<li><span class="icon-rules"></span><span>rules</span></li>
<li><span class="icon-screen"></span><span>screen</span></li>
<li><span class="icon-search"></span><span>search</span></li>
<li><span class="icon-security2"></span><span>security2</span></li>
<li><span class="icon-service"></span><span>service</span></li>
<li><span class="icon-sharing"></span><span>sharing</span></li>
<li><span class="icon-star"></span><span>star</span></li>
<li><span class="icon-stock"></span><span>stock</span></li>
<li><span class="icon-sun"></span><span>sun</span></li>
<li><span class="icon-truck"></span><span>truck</span></li>
<li><span class="icon-twitter"></span><span>twitter</span></li>
<li><span class="icon-user"></span><span>user</span></li>
<li><span class="icon-valid"></span><span>valid</span></li>
<li><span class="icon-valid2"></span><span>valid2</span></li>
<li><span class="icon-youtube"></span><span>youtube</span></li>
</ul>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Placeholder</h2>
<img src="<?= $block->escapeHtml(__($block->getViewFileUrl('images/placeholder/image.jpg'))) ?>" alt="">
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Niveaux de titres</h2>
<h2 class="title-1">Niveaux de titre 1 [.title-1]</h2>
<h2 class="title-2">Niveaux de titre 2 [.title-2]</h2>
<h3 class="title-3">Niveaux de titre 3 [.title-3]</h3>
<h4 class="subtitle">Niveaux de sous-titre [.subtitle]</h4>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Paragraphes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>exemple de texte graissé</strong>
dans le texte rutrum, vulputate lectus eu, elementum risus.
Pellentesque sollicitudin sed sem lacinia faucibus. Integer commodo vitae mauris ut aliquet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Quisque venenatis augue eget purus euismod efficitur. Phasellus tristique,
mauris nec molestie ultrices, risus sem accumsan risus, eget hendrerit mi turpis sit amet odio.
In dignissim a velit sit amet tempus. Morbi ut dui a est malesuada molestie.</p>
<p>Donec vel auctor eros. <a href="/">exemple de lien</a> sed ante ipsum,
malesuada vel odio quis, dignissim aliquam nisi.
Aenean auctor diam ac nunc aliquam aliquet. Ut ut neque neque.
Fusce ac euismod orci, eget porttitor ligula.
Nulla vitae justo at neque vehicula fermentum.
Suspendisse ut consectetur augue, quis rutrum libero.
Cras elit erat, convallis in efficitur eu, ullamcorper ac massa.</p>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Buttons</h2>
<ul class="styleguide-list">
<li>
<a href="#" class="btn">Bouton primary [.btn]</a>
</li>
<li>
<a href="#" class="btn--pink">Bouton primary [.btn--pink]</a>
</li>
<li>
<a href="#" class="btn--border">Bouton secondary [.btn--border]</a>
</li>
<li>
<div style="background-color: #000; padding: 10px;">
<a href="#" class="btn--border-white">Bouton secondary [.btn--border-white]</a>
</div>
</li>
</ul>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Liens</h2>
<ul class="styleguide-list">
<li>
<a href="#" class="link-1">Link 1 [.link-1]</a>
</li>
<li>
<a href="#" class="link-2">Link 2 [.link-2]</a>
</li>
</ul>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Liste 1 [.list-1]</h2>
<ul class="list-1">
<li>We spend a huge amount of our time at work.
So the more that time doesn’t feel like “work,” the better.</li>
<li>So the more that time <a href="#">doesn’t feel like</a></li>
<li><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Liste 2 [.list-2]</h2>
<ul class="list-2">
<li>We spend a huge amount of our time at work.
So the more that time doesn’t feel like “work,” the better.</li>
<li>So the more that time <a href="#">doesn’t feel like</a></li>
<li><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Liste 3 [.list-3]</h2>
<ol class="list-3">
<li>We spend a huge amount of our time at work.
So the more that time doesn’t feel like “work,” the better.</li>
<li>So the more that time <a href="#">doesn’t feel like</a></li>
<li><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit.</li>
</ol>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Notifications</h2>
<div class="page messages">
<div class="messages">
<div class="message-success success message">
Vous avez bien ajouté le produit à <a href="/">votre panier</a>.
</div>
</div>
<div class="messages">
<div class="message-info info message">
Vous n’avez pas encore commandé de produits téléchargeables.
</div>
</div>
<div class="messages">
<div class="message-warning warning message">
Vous devez sélectionner une option pour ce produit.
</div>
</div>
<div class="messages">
<div class="message-error error message">
Ce produit n'est pas disponible.
</div>
</div>
</div>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Composants UI</h2>
<h2 class="title-3">Pager</h2>
<div class="pages">
<ul class="items pages-items">
<li class="item current">
<strong class="page">
<span class="label">Vous lisez actuellement la page</span>
<span>1</span>
</strong>
</li>
<li class="item">
<a href="#" class="page">
<span class="label">Page</span>
<span>2</span>
</a>
</li>
<li class="item pages-item-next">
<a class="action next" href="#" title="Suivant">
<span class="label">Page</span>
<span>Suivant</span>
</a>
</li>
</ul>
</div>
<br /><br />
<h2 class="title-3">Toggle</h2>
<div class="toggle-menu" data-mage-init='{"collapsible":{ "saveState": true,"animate": 200}}'>
<div data-role="title">
Toggle menu
</div>
<div data-role="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem finibus nisi facilisis,
eget iaculis eros bibendum. Suspendisse vitae quam blandit, viverra tellus vel,
scelerisque sem. Etiam efficitur vehicula ullamcorper. In facilisis euismod odio,
sed cursus enim porttitor ut. Sed dictum lectus nec diam congue, quis aliquam tortor porta.
Proin rhoncus nulla nisi, non faucibus diam ultricies id. Aliquam ultricies ipsum at nunc auctor,
non elementum ligula varius. Quisque ac tempor metus.
Curabitur at facilisis est, a imperdiet nulla. Nulla non lacus aliquet ex eleifend blandit.
Cras fringilla tortor at nisi porttitor, nec convallis odio tristique.</p>
</div>
</div>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Elements de formulaires</h2>
<form action="/" method="POST">
<fieldset>
<h2 class="title-3">Input radio</h2>
<div class="choice">
<input id="radio_1" name="custom_radio" value="Radio 1" type="radio">
<label for="radio_1" name="custom_radio">Input radio 1</label>
<input id="radio_2" name="custom_radio" value="Radio 2" type="radio">
<label for="radio_2" name="custom_radio">Input radio 2</label>
</div>
<br /><br /><br />
<h2 class="title-3">Input checkbox</h2>
<div class="choice">
<input id="checkbox_1" name="custom_checkbox" value="checkbox 1" type="checkbox">
<label for="checkbox_1" name="custom_checkbox">Input checkbox 1</label>
<input id="checkbox_2" name="custom_checkbox" value="checkbox 2" type="checkbox">
<label for="checkbox_2" name="custom_checkbox">Input checkbox 2</label>
</div>
<br /><br /><br />
<h2 class="title-3">Input text</h2>
<label for="input_text">Input label</label>
<input id="input_text" placeholder="Texte de l'input" type="text">
<br /><br /><br />
<h2 class="title-3">Input text disabled</h2>
<label for="input_text">Input label disabled</label>
<input id="input_text" placeholder="Texte de l'input" type="text" disabled>
<br /><br /><br />
<h2 class="title-3">Input text error</h2>
<label for="input_text_error">Input label disabled</label>
<div class="control">
<input id="input_text_error" placeholder="Texte de l'input" type="text" class="mage-error">
<div for="customer-email" generated="true" class="mage-error">Ce champ est obligatoire.</div>
</div>
<br /><br /><br />
<h2 class="title-3">Input Email</h2>
<div class="field email">
<label for="input_email">Email</label>
<div class="control">
<input id="input_email" placeholder="Saisissez votre email" type="email">
</div>
</div>
<br /><br /><br />
<h2 class="title-3">Input Password</h2>
<div class="field password">
<label for="input_password">Mot de passe</label>
<div class="control">
<input id="input_password" placeholder="Saisissez votre mot de passe" type="password">
</div>
</div>
<br /><br /><br />
<h2 class="title-3">Input Phone</h2>
<div class="field telephone">
<label for="telephone">Numéro de téléphone</label>
<div class="control">
<input id="telephone" placeholder="Saisissez votre numéro de téléphone" type="text">
</div>
</div>
<br /><br /><br />
<h2 class="title-3">Input Search</h2>
<div class="field search">
<div class="control">
<input id="styleguide-search"
placeholder="Rechercher un produit, une référence, un fabricant …"
type="text"
>
</div>
</div>
<br /><br /><br />
<h2 class="title-3">Select</h2>
<select>
<option value="select_1">Select item 1</option>
<option value="select_2">Select item 2</option>
<option value="select_3">Select item 3</option>
<option value="select_4">Select item 4</option>
</select>
<br /><br /><br />
<h2 class="title-3">Select disable</h2>
<select disabled>
<option value="select_1">Select item 1</option>
<option value="select_2">Select item 2</option>
<option value="select_3">Select item 3</option>
<option value="select_4">Select item 4</option>
</select>
<br /><br /><br />
<h2 class="title-3">Select Custom</h2>
<select class="custom-select">
<option value="select_1">Select item 1</option>
<option value="select_2">Select item 2</option>
<option value="select_3">Select item 3</option>
<option value="select_4">Select item 4</option>
</select>
<br /><br /><br />
<h2 class="title-3">Textarea</h2>
<textarea name="textarea" id="" cols="30" rows="10">Type something here</textarea>
</fieldset>
</form>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Tableau</h2>
<h2 class="title-3">Tableau sans ligne d'en tête</h2>
<table>
<tr>
<th>En tête de ligne 1</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 2</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 3</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
</table>
<br><br><br>
<h2 class="title-3">Tableau avec bordure</h2>
<table>
<thead>
<tr>
<th>En tête de colonne 1</th>
<th>En tête de colonne 2</th>
<th>En tête de colonne 3</th>
<th>En tête de colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<th>En tête de ligne 1</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 2</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
</tbody>
</table>
<br><br><br>
<h2 class="title-3">Tableau sans bordure</h2>
<table class="no-border">
<thead>
<tr>
<th>En tête de colonne 1</th>
<th>En tête de colonne 2</th>
<th>En tête de colonne 3</th>
<th>En tête de colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<th>En tête de ligne 1</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 2</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 3</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
<tr>
<th>En tête de ligne 4</th>
<td>Contenu 1</td>
<td>Contenu 2</td>
<td>Contenu 3</td>
</tr>
</tbody>
</table>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Etats de produit</h2>
<h2 class="title-3">Item status</h2>
<div class="state-new"><span>Neuf</span></div>
<div class="state-refurbished"><span>Reconditonné</span></div>
<div class="state-used"><span>Occasion</span></div>
<div class="state-exchange"><span>Echange Standard</span></div>
<br /><br /><br />
<h2 class="title-3">Grid status</h2>
<div class="status-titles-grid">
<div class="state-new"><span>Neuf</span></div>
<div class="state-refurbished"><span>Reconditonné</span></div>
<div class="state-used"><span>Occasion</span></div>
<div class="state-exchange"><span>Echange Standard</span></div>
</div>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Bloc de catégorie</h2>
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Grille de catégorie</h2>
<div class="categories-grid">
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
<div class="category-item">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="styleguide__part">
<h2 class="title-2 section-title">Elément s'affichant au défilement de la page</h2>
<div class="displayed-on-scroll" data-displayed-on-scroll="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple de <strong>texte graissé</strong> dans le texte rutrum,
vulputate lectus eu, elementum risus.
Pellentesque sollicitudin sed sem lacinia faucibus. Integer commodo vitae mauris ut aliquet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Quisque venenatis augue eget purus euismod efficitur.
Phasellus tristique, mauris nec molestie ultrices, risus sem accumsan risus,
eget hendrerit mi turpis sit amet odio. In dignissim a velit sit amet tempus.
Morbi ut dui a est malesuada molestie.
</p>
<p>Donec vel auctor eros. <a href="#">exemple de lien</a>
sed ante ipsum, malesuada vel odio quis, dignissim aliquam nisi.
Aenean auctor diam ac nunc aliquam aliquet. Ut ut neque neque.
Fusce ac euismod orci, eget porttitor ligula. Nulla vitae justo at neque vehicula fermentum.
Suspendisse ut consectetur augue, quis rutrum libero.
Cras elit erat, convallis in efficitur eu, ullamcorper ac massa.
</p>
</div>
<br><br>
<div class="category-item displayed-on-scroll" data-displayed-on-scroll="">
<div class="category-item__header">
<span class="icon icon-alimentation"></span>
<h2 class="label title-2">Alimentations</h2>
</div>
<div class="category-item__content">
<ul>
<li><a href="#">Cartes NUM 1060</a></li>
<li><a href="#">Cartes MITSUBISHI MAZAK M2 M32</a></li>
<li><a href="#">Cartes MAZAK</a></li>
</ul>
</div>
</div>
<br><br>
<div class="displayed-on-scroll" data-displayed-on-scroll="">
<a href="" class="btn">Confirmer</a>
</div>
</div>
</section>