Commit 30ae3348 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki

fixup! fixup! update listbox snippet.

parent f4af6adc
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
.facture__column--highlighted { .facture__column--highlighted {
background: #ccc; background: #ccc;
} }
.facture__data--euro::before { .facture__data--figure {
content: "€ "; color: #333;
} }
.facture__download { .facture__download {
border-radius: 0.5em; border-radius: 0.5em;
...@@ -72,23 +72,23 @@ ...@@ -72,23 +72,23 @@
<!-- <!--
This is an example of listbox HTML snippet. This is an example of listbox HTML snippet.
* 'facture' is the name of the listbox. For generic case, you can use 'listbox'. * 'facture' is the name of the listbox. For generic case, you can use 'listbox'.
* '--euro' and '--highlighted' are modifier classes for which you can differentiate the appearance of a certain column (ex. the second column in this sample). * '--figure' and '--highlighted' are modifier classes for which you can differentiate the appearance of a certain column (ex. the second column in this sample).
* You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below (ex. the third column in this sample). * You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below (ex. the third column in this sample).
--> -->
<div class="facture__container"> <div class="facture__container">
<div class="facture__header_row"> <div class="facture__header_row">
<div class="facture__header_column">Reference</div> <div class="facture__header_column">Reference</div>
<div class="facture__header_column facture__header_column--euro facture__header_column--highlighted">Amount</div> <div class="facture__header_column facture__header_column--figure facture__header_column--highlighted">Amount</div>
<div class="facture__header_column">Action</div> <div class="facture__header_column">Action</div>
</div> </div>
<div class="facture__row"> <div class="facture__row">
<div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1234</div></div> <div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1234</div></div>
<div class="facture__column facture__column--euro facture__column--highlighted"><div class="facture__header facture__header--euro facture__header--highlighted">Amount</div><div class="facture__data facture__data--euro facture__data--highlighted">20.30</div></div> <div class="facture__column facture__column--figure facture__column--highlighted"><div class="facture__header facture__header--figure facture__header--highlighted">Amount</div><div class="facture__data facture__data--figure facture__data--highlighted">20.30</div></div>
<div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div> <div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div>
</div> </div>
<div class="facture__row"> <div class="facture__row">
<div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1235</div></div> <div class="facture__column"><div class="facture__header">Reference</div><div class="facture__data">SI-1235</div></div>
<div class="facture__column facture__column--euro facture__column--highlighted"><div class="facture__header facture__header--euro facture__header--highlighted">Amount</div><div class="facture__data facture__data--euro facture__data--highlighted">121.85</div></div> <div class="facture__column facture__column--figure facture__column--highlighted"><div class="facture__header facture__header--figure facture__header--highlighted">Amount</div><div class="facture__data facture__data--figure facture__data--highlighted">121.85</div></div>
<div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div> <div class="facture__column"><div class="facture__header">Action</div><div class="facture__data"><a href="#" class="facture__download">Download</a></div></div>
</div> </div>
</div> </div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment