Commit 9e57c8a1 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki

add listbox-snippet.html.

parent b1831e3d
<html>
<head>
<style>
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
.facture__container {
margin: 1em;
}
.facture__header_row {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-weight: bold;
}
.facture__header_column {
padding: 0.5em;
}
.facture__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.facture__column {
padding: 0.5em;
}
.facture__column--highlighted {
background: #ccc;
}
@media (min-width: 800px) {
.facture__header_row {
border-bottom: 1px solid #999;
}
.facture__header_column--highlighted {
background: #ccc;
border-radius: 0.5em 0.5em 0 0;
}
.facture__row:last-child .facture__column--highlighted {
border-radius: 0 0 0.5em 0.5em;
}
.facture__header {
display: none;
}
}
@media (max-width: 800px) {
.facture__header_row {
display: none;
}
.facture__row {
grid-template-columns: 1fr;
border: 1px solid #999;
margin-bottom: 1em;
}
.facture__header {
font-weight: bold;
}
}
</style>
</head>
<body>
<!--
This is an example of listbox HTML snippet.
* 'facture' is the name of the listbox. For generic case, you can use 'listbox'.
* '--highlighted' is a modifier class for which you can differentiate the appearance of a certain column.
* You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below.
-->
<div class="facture__container">
<div class="facture__header_row">
<div class="facture__header_column">Header 1</div>
<div class="facture__header_column facture__header_column--highlighted">Header 2</div>
<div class="facture__header_column">Header 3</div>
</div>
<div class="facture__row">
<div class="facture__column"><div class="facture__header">Header 1</div><div class="facture__data">Value 1-1</div></div>
<div class="facture__column facture__column--highlighted"><div class="facture__header">Header 2</div><div class="facture__data">Value 1-2</div></div>
<div class="facture__column"><div class="facture__header">Header 3</div><div class="facture__data">Value 1-3</div></div>
</div>
<div class="facture__row">
<div class="facture__column"><div class="facture__header">Header 1</div><div class="facture__data">Value 2-1</div></div>
<div class="facture__column facture__column--highlighted"><div class="facture__header">Header 2</div><div class="facture__data">Value 2-2</div></div>
<div class="facture__column"><div class="facture__header">Header 3</div><div class="facture__data">Value 2-3</div></div>
</div>
</div>
</body>
</html>
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