VulpesOS/gaia/shared/style/input_areas/index.html

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">

  <title>Input areas</title>
  <link rel="stylesheet" href="../input_areas.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">

  <!--
    - These <style> and <script> elements are only used for the example code,
    - they are not needed for the real use case.
    -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #f4f4f4;
    }

    label.bb-docs {
      font-family: sans-serif;
      font-size: 1.2rem;
      margin-left: 1.5rem;
    }

    h2.bb-docs {
      font-family: sans-serif;
      padding: 0.4rem 3rem;
      margin: -0.1rem 0 0;
      border: solid 0.1rem #e8e8e8;
      color: #666;
      font-size: 1.8rem;
      font-weight: 300;
      background-color: #fff;
    }

    form { margin: 1rem 1.5rem; }

    form[role="search"] { margin: 1rem 0; }

    div.skin-dark {
      background: #000;
    }

    div.skin-dark.margins {
      margin: 1rem -1.5rem;
      padding: 1.5rem 1.5rem 0.5rem;
    }

    /**
     *  .bb-editable
     *  Added properties for this example, don't add on app.
     */
    .bb-editable {
      padding: 1.5rem 1rem 0.5rem;
      background: #bbb;
    }

    /**
     *  .icon-email:before
     *  Define the background-image with custom icon for App.
     *  Attention, the pseudo-element is required for compatibility with Building Blocks.
     *
     *  Example:
     *  .icon-mms:before { background-image: url(...); }
     */
    .icon-email:after {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASRJREFUeNrsl8ENgjAUhqlhAEfxQDyzgXdOjoCT0ClYg54Nu+gGtcRiAlJ5fQ9CDP+XFJOW+hlo6/uTBADw76hfg9ba0n0cBd//VErp6FlO3FgZDevn9pO50u4iEXPkn/ul4hj54L4lxBT51/hS4odrVUA62b+UOCSvfP+q4rE8KF1DTF5w3JPLio9Gx1T/Yauzen/idGb8Jv13QgEAAAAAyNJi27bitJhlmeYUAhfXcoHYuKY5pU/uJ3OluaTm4sjN3JOiFnsxckN5PTFVJkVuqGsitrw9hRaL7ycvxFhxt7WuE3Lt+1ct6MfyXhq131PmVukkpX+n5RYRhn24IC0iLQIAAABIi2/uRSFOi+e6RlpEWkRaRFpEWkRaRFoEYG+8BBgAvaeWTjgXDaoAAAAASUVORK5CYII=);
    }

  </style>
  <script>
    window.onload = function() {
      document.getElementById('dir').checked = false;
    };
  </script>
</head>

<body role="application">
  <p dir="ltr">
    <label class="bb-docs">
      <input id="dir" type="checkbox" checked="false"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>
  <h2 class="bb-docs">Default inputs</h2>
  <form>
    <p>
      <input dir="auto" type="text" placeholder="Placeholder">
      <button type="reset">Clear</button>
    </p>

    <p>
      <textarea placeholder="Placeholder in textarea"></textarea>
    </p>

    <p>
      <input dir="auto" type="text" placeholder="Placeholder" value="Some written text" required>
      <button type="reset">Clear</button>
    </p>

    <p>
      <input dir="auto" type="text" placeholder="Disabled" disabled required>
      <button type="reset">Clear</button>
    </p>

    <div class="skin-dark margins">
      <p>
        <input dir="auto" type="text" placeholder="Placeholder" value="Some written text">
        <button type="reset">Clear</button>
      </p>
    </div>
  </form>

  <h2 class="bb-docs">Required inputs</h2>
  <form>
    <p>
      <input dir="auto" type="text" placeholder="Placeholder" required>
      <button type="reset">Clear</button>
    </p>

    <p>
      <textarea placeholder="Placeholder in textarea" required></textarea>
    </p>
  </form>

  <h2 class="bb-docs">Date/time inputs</h2>
  <form>
    <p>
      <input dir="auto" disabled type="date" placeholder="YYYY-MM-DD">
    </p>

    <p>
      <input dir="auto" type="time" placeholder="hh:mm:ss">
    </p>
  </form>

  <h2 class="bb-docs">Fieldset</h2>
  <form>
    <fieldset>
      <legend class="action">Mobile</legend>
      <section>
        <p>
          <input dir="ltr" type="tel" placeholder="Phone number">
          <button type="reset">Clear</button>
        </p>
        <p>
          <input dir="auto" type="text" placeholder="Name" value="Jessy James">
          <button type="reset">Clear</button>
        </p>
      </section>
    </fieldset>

    <fieldset disabled>
      <legend>Work</legend>
      <section>
        <p>
          <input dir="ltr" type="tel" placeholder="Email">
          <button type="reset">Clear</button>
        </p>
      </section>
    </fieldset>
  </form>

  <h2 class="bb-docs">Forms: Input text</h2>
  <form role="search">
    <p>
      <input dir="auto" type="text" placeholder="Search…">
      <button type="reset">Clear</button>
    </p>
  </form>

  <form role="search">
    <button type="submit">Cancel</button>
    <p>
      <input dir="auto" type="text" placeholder="Search…" value="Some text here">
      <button type="reset">Clear</button>
    </p>
  </form>

  <div class="skin-dark">
  <h2 class="bb-docs">Skin dark</h2>
    <form role="search" class="skin-dark">
      <p>
        <input dir="auto" type="text" placeholder="Search…">
        <button type="reset">Clear</button>
      </p>
    </form>

    <form role="search" class="skin-dark">
      <button type="submit">Cancel</button>
      <p>
        <input dir="auto" type="text" placeholder="Search…" value="Some text here">
        <button type="reset">Clear</button>
      </p>
    </form>
  </div>

  <h2 class="bb-docs">Forms: Text area</h2>
  <form role="search" class="bottom">
    <!-- this button should be enabled after start typing in the input field-->
    <button type="submit" disabled>Send</button>
    <p>
      <textarea></textarea>
    </p>
  </form>

  <form role="search" class="bottom">
    <button type="submit">Send</button>
    <p>
      <textarea>Some text here</textarea>
    </p>
  </form>

  <form role="search" class="bottom">
    <button type="submit" class="icon" data-icon="send" aria-hidden="true">Send</button>
    <p>
      <textarea>Some text here</textarea>
    </p>
  </form>

  <h2 class="bb-docs">Content Editable</h2>
  <ul class="bb-editable">
    <li dir="auto" contenteditable="false">Travis Gray Travis Gray</li>
    <li dir="auto" contenteditable="false" class="invalid">Lucy B.</li>
    <li dir="auto" contenteditable="false" class="icon icon-email">Mary</li>
    <li dir="auto" contenteditable="false" class="invalid icon icon-email">Paul C.</li>
    <li dir="auto" contenteditable="true">John</li>
  </ul>

</body>
</html>