Omnimaga
/
bugs



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

  <title>Input areas</title>
  <link rel="stylesheet" href="../input_areas.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }
    body { background: none; }
    h2.bb-docs {
      padding: 0.4rem 3rem;
      margin: -0.1rem 0 0;
      border: solid 0.1rem #e8e8e8;
      color: #666;
      font-size: 1.8rem;
      font-weight: lighter;
      background-color: #f5f5f5;
    }
    form { margin: 1rem 2rem; }

    form[role="search"] button.icon-attachment:before {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjRDOEE3NkY5ODdEMTFFMjkwQTRGMjQ4RjZEMzhDQzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjRDOEE3NzA5ODdEMTFFMjkwQTRGMjQ4RjZEMzhDQzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNEM4QTc2RDk4N0QxMUUyOTBBNEYyNDhGNkQzOENDOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNEM4QTc2RTk4N0QxMUUyOTBBNEYyNDhGNkQzOENDOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkuOQLYAAAGRSURBVHja7JZNRERRGIbvVGYVERHRKiKG2kQZIibSKqZNi1mlNlGklCitZohI1KrlXI2GIRJRWqQYpUWrtGgbKVJE5PYe3sPnkvt3xpD78bjj3OM+3nO+c0zCcRyrHtVg1ali8f8XN/31IjWYDvqtZpAEb3Lw/uqyZokz4A58gFfwCLK1XupVcArawDbYBI3gECyHWmoftQY2wDUYBe8cXwcnfFcCTyYTS+mIkKr6AvPc76zJpdbSW1AFN+AC9Is5OmWHKbGWVplyjglTXN5WztNH4sGEWEqVbBgUQB+YoXQAtIMd8AnKUZtLSr/BEDt4hXs5zXlKdgY6wQR4iZLYLU0z6RKlBzzLNtgF3SAHKlGO0yKl6vr5YdKCSKqk4+AI9AqpHfrK5Ify4pyO8bdbWqHQt9RLPMlbKMe9KxElLVKqmqcnqNRLnOTz2TVW5MVQ5jHqCir1aq5zPvNM3sI7WEn3mDSU1Cuxaph9MEt0bYEFboUVRuqnq6fYPBl29bFYCduKUIn4720sjsWm6leAAQD4qmIfI9EPMQAAAABJRU5ErkJggg==);
    }
  </style>
</head>

<body role="application">
  <p dir="ltr">
    <label>
      <input type="checkbox"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>

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

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

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

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

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

    <h2 class="bb-docs">Forms: Input text</h2>

    <form role="search">
      <p>
        <input type="text" placeholder="Search..." required>
        <button type="reset">Clear</button>
      </p>
    </form>

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

    <form role="search" class="skin-dark">
      <p>
        <input type="text" placeholder="Search..." required>
        <button type="reset">Clear</button>
      </p>
    </form>

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

    <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 required></textarea>
      </p>
    </form>

    <form role="search" class="bottom">
      <button class="icon icon-attachment">Attachment</button>
      <button type="submit">Send</button>
      <p>
        <textarea required>Some text here</textarea>
      </p>
    </form>

</body>
</html>