updated to 2.0

Author: rnowm

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bb_input_areas",
-  "version": "1.4",
+  "version": "2.0",
   "homepage": "https://github.com/buildingfirefoxos/bb_input_areas",
   "authors": [
     "The gaia team"

input_areas.css

@@ -8,10 +8,10 @@ input[type="tel"],
 input[type="search"],
 input[type="url"],
 input[type="number"],
+input[type="date"],
 textarea {
   -moz-box-sizing: border-box;
   display: block;
-  overflow: hidden;
   width: 100%;
   height: 4rem;
   resize: none;
@@ -60,7 +60,9 @@ form p + p {
 }
 
 form p input + button[type="reset"],
-form p textarea + button[type="reset"] {
+form p textarea + button[type="reset"],
+form p input + button.reset,
+form p textarea + button.reset {
   position: absolute;
   top: 50%;
   right: 0;
@@ -75,18 +77,24 @@ form p textarea + button[type="reset"] {
 }
 
 form.skin-dark p input + button[type="reset"],
-form.skin-dark p textarea + button[type="reset"] {
+form.skin-dark p textarea + button[type="reset"],
+form.skin-dark p input + button.reset,
+form.skin-dark p textarea + button.reset {
   background-image: url(input_areas/images/icons/clear-dark.png);
 }
 
 /* To avoid colission with BB butons */
 li input + button[type="reset"]:after,
-li textarea + button[type="reset"]:after {
+li textarea + button[type="reset"]:after,
+li input + button.reset:after,
+li textarea + button.reset:after {
   background: none;
 }
 
 form p input + button[type="reset"],
-form p textarea + button[type="reset"] {
+form p textarea + button[type="reset"],
+form p input + button.reset,
+form p textarea + button.reset {
   top: 0;
   margin: 0;
 }
@@ -100,7 +108,9 @@ form p input:focus {
 }
 
 form p input:focus + button[type="reset"],
-form p textarea:focus + button[type="reset"] {
+form p textarea:focus + button[type="reset"],
+form p input:focus + button.reset,
+form p textarea:focus + button.reset {
   opacity: 1;
   pointer-events: all;
 }
@@ -151,6 +161,7 @@ fieldset section input[type="email"],
 fieldset section input[type="tel"],
 fieldset section input[type="search"],
 fieldset section input[type="number"],
+fieldset section input[type="date"],
 fieldset section textarea {
   height: 4rem;
   border: none;
@@ -258,7 +269,7 @@ form[role="search"] p input:focus {
   padding: 0 2rem 0 0;
 }
 
-form[role="search"] p input:invalid, 
+form[role="search"] p input:invalid,
 form[role="search"] p textarea:invalid {
   border: none;
 }
@@ -278,7 +289,6 @@ form[role="search"] button.icon {
               url(input_areas/images/ui/background.png) repeat-x 0 100%;
   background-size: auto 100%;
   border-radius: 0;
-  margin: 0;
   padding: 0;
   margin: 0;
   position: relative;
@@ -294,7 +304,8 @@ form[role="search"] button.icon:before {
   left: 0;
 }
 
-form[role="search"] p button[type="reset"] {
+form[role="search"] p button[type="reset"],
+form[role="search"] p button.reset {
   right: 0;
 }
 
@@ -310,7 +321,6 @@ form[role="search"] button[type="submit"] {
   line-height: 3.7rem;
   background: url(input_areas/images/ui/separator.png) no-repeat 0 50%;
   background-size: auto 100%;
-  border-radius: 0;
   width: auto;
   border-radius: 0;
   margin: 0;
@@ -363,33 +373,73 @@ form button::-moz-focus-inner {
  * Right-to-Left layout
  */
 
-html[dir="rtl"] form p input:valid,
-html[dir="rtl"] form p input:valid:focus {
-  padding: 0 1.2rem 0 3rem;
-}
-
 html[dir="rtl"] form p input + button[type="reset"],
-html[dir="rtl"] form p textarea + button[type="reset"] {
-  right: auto;
+form p textarea + button[type="reset"],
+html[dir="rtl"] form p input + button.reset,
+form p textarea + button.reset {
   left: 0;
+  right: auto;
 }
 
-html[dir="rtl"] fieldset legend.action:after {
-  margin: 0 0.5rem 0 0;
+html[dir="rtl"] form p input:focus {
+  padding-left: 3rem;
+  padding-right: inherit;
 }
 
 html[dir="rtl"] fieldset legend {
-  padding: 0 1.5rem 0 0.5rem;
+  padding-left: .5rem;
+  padding-right: 1.5rem;
 }
 
-html[dir="rtl"] form[role="search"] p input {
-  padding: 0;
+html[dir="rtl"] fieldset section {
+  border-left: none;
+  border-right: 0.1rem solid #ddd;
+  border-radius: 0.3rem 0 0 0.3rem;
+  margin-left: auto;
+  margin-right: 9.5rem;
+}
+
+html[dir="rtl"] form[role="search"]:before {
+  left: auto;
+  right: 1rem;
+}
+
+html[dir="rtl"] form[role="search"] p {
+  padding-left: 1.2rem;
+  padding-right: 3.2rem;
 }
 
 html[dir="rtl"] form[role="search"] p input:focus {
-  padding: 0 0 0 2rem;
+  padding-left: 2rem;
+  padding-right: 0;
+}
+
+html[dir="rtl"] form[role="search"] button.icon {
+  float: right;
+  background-position: 0 50%, 0 100%;
 }
 
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > button {
+html[dir="rtl"] form[role="search"] button.icon:before {
+  left: auto;
+  right: 0;
+}
+
+html[dir="rtl"] form[role="search"] p button[type="reset"],
+html[dir="rtl"] form[role="search"] p button.reset {
   left: 0;
+  right: auto;
+}
+
+html[dir="rtl"] form[role="search"] button[type="submit"] {
+  float: left;
+  background-position: 100% 50%;
+}
+
+html[dir="rtl"] fieldset legend.action {
+  background-position: 0 100%;
+}
+
+html[dir="rtl"] form[role="search"] button[type="submit"][disabled],
+html[dir="rtl"] form[role="search"].bottom button[type="submit"] {
+  background-position: 100% 50%, 0 100%;
 }

input_areas/images/icons/arrow-rtl@2.25x.png

@@ -35,6 +35,13 @@
 </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>
@@ -131,4 +138,4 @@ <h2 class="bb-docs">Forms: Text area</h2>
     </form>
 
 </body>
-</html>
+</html>