Input area 2.0 implementation

This section gives you all you need to implement v2.0 Gaia-style input areas in your own app.

Live sample

The following gives you an idea of what rendered input areas would look like, and how they would operate.

Code

Here is the code you'll need.

CSS

<link href="(your styles folder)/style/input_areas.css" rel="stylesheet" type="text/css">

The CSS can be found in the Gaia project 2.0 branch under shared/style/input_areas.css. Copy this into your own project, along with the associated resources.

HTML

Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

<!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/input_areas.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <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: lighter;
      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.
      * Atention, well need the pseudo-element 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=);
    }
    .icon-send {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABH0lEQVR42uXXPUtCURjAcTVx09ZsEhx0dInALyCUuTX7Bn4CHR2ckqDJ1SUiCESkbxDRV9BJBxGhIXoZQkHs8T84iV3uuYdz7uDwm/9c7j3neW5ARHxxwOFAv2+DY/gBBQRth1sQDFFGxFY4iT/I1hx1xMyGgTfIjm+0ETcZrkH+sUQXKRPhYywgDtYYIKsb3vUEcekVeQShHb6AKBqiiIhOOIx3iAcz1BFVDwN3EA1fuMGJavgME3xiDfFoiUvnsLM4znGNBjp4xtRFvKcSzmCMD6xsPvGtH+/4CHM/vuqcx3Nc0j3Hj4o31xW0b64Yfv24qysuplPaxHR62RP8QRunpuZxYs8G0rCxgTQhGKFqc+e6RwEhW1umDQf8C7MBVhE+F1rOxMAAAAAASUVORK5CYII=);
    }
  </style>
</head>
<body>
<!-- Basic form example -->
<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>
<!-- Fieldset example -->
<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>
</form>
<!-- Search form examples -->
<form role="search">
  <p>
    <input placeholder="Search..." type="text">
    <button type="reset">Clear</button>
  </p>
</form>
<form role="search">
  <button type="submit">Cancel</button>
  <p>
    <input placeholder="Search..." value="Some text here" type="text">
    <button type="reset">Clear</button>
  </p>
</form>
</body>
</html>

Live sample

Code

CSS

HTML

Document Tags and Contributors