add listbox-snippet.html.

9e57c8a1 · Kazuhiko Shiozaki · b1831e3d · 9e57c8a1
Commit 9e57c8a1 authored Feb 27, 2023 by Kazuhiko Shiozaki
Hide whitespace changes
Inline Side-by-side

Showing with 83 additions and 0 deletions

listbox-snippet.html listbox-snippet.html +83 -0

No files found.
--- a/listbox-snippet.html
+++ b/listbox-snippet.html
+<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>