Merge lp:~abreu-alexandre/ubuntu-html5-theme/bug-fix-meta-package into lp:ubuntu-html5-theme

[Alexandre Abreu]

Meta branch that contains those bug fixes (easier to land):

lp:~daker/ubuntu-html5-theme/fix.1243396
lp:~daker/ubuntu-html5-theme/fix.1294779
lp:~daker/ubuntu-html5-theme/fix.1294993
lp:~daker/ubuntu-html5-theme/fix.1294986
lp:~daker/ubuntu-html5-theme/fix.1216874
lp:~daker/ubuntu-html5-theme/fix.slider

Meta branch that contains those bug fixes (easier to land):

lp:~daker/ubuntu-html5-theme/fix.1243396
lp:~daker/ubuntu-html5-theme/fix.1294779
lp:~daker/ubuntu-html5-theme/fix.1294993
lp:~daker/ubuntu-html5-theme/fix.1294986
lp:~daker/ubuntu-html5-theme/fix.1216874
lp:~daker/ubuntu-html5-theme/fix.slider

=== modified file '0.1/ambiance/css/appTemplate.css'
--- 0.1/ambiance/css/appTemplate.css	2014-05-25 18:51:21 +0000
+++ 0.1/ambiance/css/appTemplate.css	2015-01-14 19:02:01 +0000
@@ -48,6 +48,9 @@
  * Font family
  */
 /*
+ * Slider
+ */
+/*
  * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
  * License granted by Canonical Limited
  *
@@ -221,7 +224,7 @@
   display: block;
 }
 [data-role="header"] .active {
-  color: #484647;
+  color: #888888;
   padding-left: 15px;
   -webkit-opacity: 1;
   opacity: 1;
@@ -245,8 +248,8 @@
 
 [data-role="tabitem"] {
   display: inline-block;
-  font: 35px "Ubuntu";
-  letter-spacing: -1px;
+  font: 33px "Ubuntu";
+  font-weight: 100;
   line-height: 60px;
   padding-right: 35px;
   text-decoration: none;
@@ -442,7 +445,7 @@
 }
 
 .textfield.clear:focus {
-  background: url(artwork/[e-mail]) no-repeat 97% center white;
+  background: url(artwork/[e-mail]) no-repeat 97% center #fff;
   background-size: 12%;
 }
 
@@ -555,7 +558,6 @@
   from {
     -webkit-transform: rotate(1deg);
   }
-
   to {
     -webkit-transform: rotate(360deg);
   }
@@ -564,11 +566,9 @@
   0% {
     opacity: 0;
   }
-
   50% {
     opacity: 1;
   }
-
   100% {
     opacity: 0;
   }
@@ -698,43 +698,33 @@
     0% {
       -webkit-transform: translate3d(0, 0, 0);
     }
-
     10% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     20% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     30% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     40% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     50% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     60% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     70% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     80% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     90% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     100% {
       -webkit-transform: translate3d(0, 0, 0);
     }
@@ -743,43 +733,33 @@
     0% {
       -webkit-transform: translate3d(0, 0, 0);
     }
-
     10% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     20% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     30% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     40% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     50% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     60% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     70% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     80% {
       -webkit-transform: translate3d(20px, 0, 0);
     }
-
     90% {
       -webkit-transform: translate3d(-20px, 0, 0);
     }
-
     100% {
       -webkit-transform: translate3d(0, 0, 0);
     }
@@ -826,7 +806,7 @@
   background: #dd4814;
   border: 2px solid #dd4814;
   border-radius: 6px;
-  color: white;
+  color: #ffffff;
   font-family: "Ubuntu";
   font-size: 1rem;
   padding: 9px 25px;
@@ -836,21 +816,21 @@
 }
 [data-role="button"].positive {
   background: #38b44a;
-  color: white;
+  color: #ffffff;
   border-color: #38b44a;
 }
 [data-role="button"].information {
   background: #2ab7ec;
-  color: white;
+  color: #ffffff;
   border-color: #2ab7ec;
 }
 [data-role="button"].secondary {
-  background: white;
+  background: #ffffff;
   color: #888888;
 }
 [data-role="button"].negative {
   background: #b2b2b2;
-  color: white;
+  color: #ffffff;
   border-color: #b2b2b2;
 }
 
@@ -878,31 +858,81 @@
 /* ----------------------------------
  * Sliders
  * ---------------------------------- */
-/**
-   TODO: remove absolte values for w/h
- */
 input[type=range] {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  -webkit-appearance: none;
-  background-color: rgba(192, 192, 192, 0.1);
-  width: 200px;
-  height: 35px;
-  border-radius: 6px;
-  padding: 5px 0;
+  -webkit-appearance: none;
+  background: linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
+  background-position: center;
+  background-size: 99% 4px;
+  background-repeat: no-repeat;
+  -webkit-appearance: none;
+  width: auto;
+  height: 36px;
+  border-radius: 1px;
+  overflow: hidden;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  /*&::-moz-range-thumb:before {
+      position: absolute;
+      top: ($range-slider-height / 2) - ($range-track-height / 2);
+      left: -2000px;
+      width: 2000px;
+      height: $range-track-height;
+      background: $ubuntu_orange;
+      content: ' ';
+  }*/
 }
 input[type=range]::-webkit-slider-thumb {
-  -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-appearance: none;
-  background-color: #dd4814;
-  border-radius: 6px;
-  width: 30px;
-  height: 27px;
+  background-color: #fff;
+  pointer-events: none;
+  border-radius: 3px;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+input[type=range]::-webkit-slider-thumb:before {
+  /* what creates the colorful line on the left side of the slider */
+  position: absolute;
+  top: 6px;
+  left: -2000px;
+  width: 2000px;
+  height: 4px;
+  background: #dd4814;
+  content: ' ';
+}
+input[type=range]::-moz-range-track {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
+  background-position: center;
+  background-size: 99% 4px;
+  background-repeat: no-repeat;
+  width: auto;
+  height: 36px;
+  border: 0;
+  border-radius: 1px;
+  overflow: hidden;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+input[type=range]::-moz-range-thumb {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #fff;
+  pointer-events: none;
+  border: 0;
+  border-radius: 3px;
+  width: 16px;
+  height: 16px;
+  position: relative;
 }
 
 /*
@@ -1199,7 +1229,7 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
-  height: 3.5rem;
+  height: 3.1rem;
   border-bottom: solid 0.1rem #c7c7c7;
   color: #787878;
   position: relative;
@@ -1208,10 +1238,10 @@
   text-decoration: none;
   color: #787878;
   display: block;
-  height: 3.4rem;
+  height: 3rem;
   position: relative;
   border: none;
-  line-height: 3.4rem;
+  line-height: 3rem;
   padding-left: 1rem;
   padding-right: 1.5rem;
   border-top: 1px solid #ebebeb;
@@ -1229,7 +1259,7 @@
   height: 2rem;
   top: 50%;
   right: 0;
-  margin-top: -1rem;
+  margin-top: -1.2rem;
   z-index: 0;
 }
 [data-role="list"] ul li > a:active {
@@ -1249,7 +1279,12 @@
   line-height: 1rem;
 }
 [data-role="list"] ul li p:only-child, [data-role="list"] ul li p:first-of-type:last-of-type {
-  line-height: 2.5rem;
+  line-height: 2.1rem;
+}
+[data-role="list"] ul li p + p {
+  color: rgba(136, 136, 136, 0.8);
+  padding-top: 0.1rem;
+  font-size: 0.8rem;
 }
 [data-role="list"] ul li > label {
   z-index: 100;
@@ -1336,6 +1371,7 @@
 }
 [data-role="footer"] nav ul {
   list-style: none;
+  text-align: right;
 }
 [data-role="footer"] nav ul li,
 [data-role="footer"] nav ul li a {
@@ -1343,7 +1379,7 @@
   font-size: 0.6rem;
   text-align: center;
   width: 60px;
-  float: right;
+  display: inline-block;
   text-decoration: none;
 }
 [data-role="footer"] nav ul li {
@@ -1394,7 +1430,7 @@
   z-index: 100;
 }
 [data-role="shape"]:after {
-  background: url(../img/[e-mail]) no-repeat;
+  background: url(../img/ubuntushape.png) no-repeat;
   background-size: 100% 100%;
   content: ' ';
   width: 100%;
@@ -1406,14 +1442,14 @@
 [data-role="shape"] img {
   height: 100%;
   width: 100%;
-  border-radius: 1.5rem;
+  max-width: 100% !important;
   margin-bottom: 0;
   display: inline-block;
 }
 [data-role="shape"] div {
   height: 100%;
   width: 100%;
-  border-radius: 1.5rem;
+  border-radius: 1rem;
   margin-bottom: 0;
   display: inline-block;
 }
@@ -1496,8 +1532,8 @@
  * <http://www.gnu.org/licenses/>.
  */
 [data-role="option-selector"] {
-  -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5;
-  box-shadow: inset 0 2px 2px 0 #d5d5d5;
+  -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
+  box-shadow: inset 0 2px 2px 0 #D5D5D5;
   width: 100%;
   height: auto;
   margin: 0 auto;
@@ -1689,3 +1725,5 @@
   font-size: 8px;
   line-height: 1.3;
 }
+
+/*# sourceMappingURL=appTemplate.css.map */

=== modified file '0.1/ambiance/css/sass/constants.scss'
--- 0.1/ambiance/css/sass/constants.scss	2014-02-24 22:24:41 +0000
+++ 0.1/ambiance/css/sass/constants.scss	2015-01-14 19:02:01 +0000
@@ -20,9 +20,9 @@
  * <http://www.gnu.org/licenses/>
  */
 
- /*
-  * Colours
-  */
+/*
+ * Colours
+ */
 $ubuntu_orange: #dd4814;
 $text_color: #787878;
 $cream: #f3f3e7;
@@ -36,4 +36,13 @@
  * Font family
  */
 
-$font_family: "Ubuntu";
\ No newline at end of file
+$font_family: "Ubuntu";
+
+/*
+ * Slider
+ */
+
+$range-track-height:              4px !default;
+$range-slider-width:              16px !default;
+$range-slider-height:             16px !default;
+$range-slider-border-radius:      1px !default;

=== modified file '0.1/ambiance/css/sass/listitems.scss'
--- 0.1/ambiance/css/sass/listitems.scss	2014-02-24 17:08:30 +0000
+++ 0.1/ambiance/css/sass/listitems.scss	2015-01-14 19:02:01 +0000
@@ -42,7 +42,7 @@
         li {
             @include box_sizing (border-box);
             width: 100%;
-            height: 3.5rem;
+            height: 3.1rem;
             border-bottom: solid 0.1rem #c7c7c7;
             color: $text_color;
             position: relative;
@@ -51,10 +51,10 @@
                 text-decoration: none;
                 color: $text_color;
                 display: block;
-                height: 3.4rem;
+                height: 3rem;
                 position: relative;
                 border: none;
-                line-height: 3.4rem;
+                line-height: 3rem;
                 padding-left: 1rem;
                 padding-right: 1.5rem;
                 border-top: 1px solid #ebebeb;
@@ -72,7 +72,7 @@
                     height: 2rem;
                     top: 50%;
                     right: 0;
-                    margin-top: -1rem;
+                    margin-top: -1.2rem;
                     z-index: 0;
                 }
 
@@ -96,7 +96,13 @@
 
                 &:only-child,
                 &:first-of-type:last-of-type {
-                    line-height: 2.5rem;
+                    line-height: 2.1rem;
+                }
+
+                & + p {
+                    color: rgba(136, 136, 136, 0.8);
+                    padding-top: 0.1rem;
+                    font-size: 0.8rem
                 }
             }
 

=== modified file '0.1/ambiance/css/sass/shapes.scss'
--- 0.1/ambiance/css/sass/shapes.scss	2014-02-17 16:25:38 +0000
+++ 0.1/ambiance/css/sass/shapes.scss	2015-01-14 19:02:01 +0000
@@ -34,7 +34,7 @@
     z-index: 100;
 
     &:after {
-        background: url(../img/[e-mail]) no-repeat;
+        background: url(../img/ubuntushape.png) no-repeat;
         background-size: 100% 100%;
         content: ' ';
         width: 100%;
@@ -47,7 +47,7 @@
     img {
         height: 100%;
         width: 100%;
-        border-radius: 1.5rem;
+        max-width: 100%!important;
         margin-bottom: 0;
         display: inline-block;
     }
@@ -55,7 +55,7 @@
     div {
         height: 100%;
         width: 100%;
-        border-radius: 1.5rem;
+        border-radius: 1rem;
         margin-bottom: 0;
         display: inline-block;
     }

=== modified file '0.1/ambiance/css/sass/sliders.scss'
--- 0.1/ambiance/css/sass/sliders.scss	2014-02-17 16:25:38 +0000
+++ 0.1/ambiance/css/sass/sliders.scss	2015-01-14 19:02:01 +0000
@@ -24,27 +24,78 @@
  * Sliders
  * ---------------------------------- */
 
-/**
-   TODO: remove absolte values for w/h
- */
-
 input[type=range] {
     @include box_sizing (border-box);
-    @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1));
-    -webkit-appearance: none;
-    background-color: rgba(192, 192, 192, 0.1);
-    width: 200px;
-    height: 35px;
-    border-radius: 6px;
-    padding: 5px 0;
+    -webkit-appearance: none;
+    background: linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%);
+    background-position: center;
+    background-size: 99% 4px;
+    background-repeat: no-repeat;
+    -webkit-appearance: none;
+    width: auto;
+    height: $range-slider-height + 20;
+    border-radius: $range-slider-border-radius;
+    overflow: hidden;
+    margin-top: 5px;
+    margin-bottom: 5px;
 
     &::-webkit-slider-thumb {
-        @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));
+        @include box_shadow (inset 0 1px 0 rgba(0, 0, 0, 0.2));
         @include box_sizing (border-box);
         -webkit-appearance: none;
-        background-color: $ubuntu_orange;
-        border-radius: 6px;
-        width: 30px;
-        height: 27px;
-    }
+        background-color: #fff;
+        pointer-events: none;
+        border-radius: 3px;
+        width: $range-slider-width;
+        height: $range-slider-height;
+        position: relative;
+    }
+
+    &::-webkit-slider-thumb:before {
+        /* what creates the colorful line on the left side of the slider */
+        position: absolute;
+        top: ($range-slider-height / 2) - ($range-track-height / 2);
+        left: -2000px;
+        width: 2000px;
+        height: $range-track-height;
+        background: $ubuntu_orange;
+        content: ' ';
+    }
+
+    &::-moz-range-track {
+        @include box_sizing (border-box);
+        background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%);
+        background-position: center;
+        background-size: 99% 4px;
+        background-repeat: no-repeat;
+        width: auto;
+        height: $range-slider-height + 20;
+        border: 0;
+        border-radius: $range-slider-border-radius;
+        overflow: hidden;
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
+
+    &::-moz-range-thumb {
+        @include box_shadow (inset 0 1px 0 rgba(0, 0, 0, 0.2));
+        @include box_sizing (border-box);
+        background: #fff;
+        pointer-events: none;
+        border: 0;
+        border-radius: 3px;
+        width: $range-slider-width;
+        height: $range-slider-height;
+        position: relative;
+    }
+
+    /*&::-moz-range-thumb:before {
+        position: absolute;
+        top: ($range-slider-height / 2) - ($range-track-height / 2);
+        left: -2000px;
+        width: 2000px;
+        height: $range-track-height;
+        background: $ubuntu_orange;
+        content: ' ';
+    }*/
 }

=== modified file '0.1/ambiance/css/sass/tabs.scss'
--- 0.1/ambiance/css/sass/tabs.scss	2014-02-28 22:05:37 +0000
+++ 0.1/ambiance/css/sass/tabs.scss	2015-01-14 19:02:01 +0000
@@ -41,7 +41,7 @@
     }
 
     .active {
-        color: #484647;
+        color: #888888;
         padding-left: 15px;
         -webkit-opacity: 1;
         opacity: 1;
@@ -68,8 +68,8 @@
 
 [data-role="tabitem"] {
     display: inline-block;
-    font: 35px $font_family;
-    letter-spacing: -1px;
+    font: 33px $font_family;
+    font-weight: 100;
     line-height: 60px;
     padding-right: 35px;
     text-decoration: none;

=== modified file '0.1/ambiance/css/sass/toolbars.scss'
--- 0.1/ambiance/css/sass/toolbars.scss	2014-02-20 20:37:13 +0000
+++ 0.1/ambiance/css/sass/toolbars.scss	2015-01-14 19:02:01 +0000
@@ -49,6 +49,7 @@
 
         ul {
             list-style: none;
+            text-align: right;
 
             li,
             li a {
@@ -56,7 +57,7 @@
                 font-size: 0.6rem;
                 text-align: center;
                 width: 60px;
-                float: right;
+                display: inline-block;
                 text-decoration: none;
             }
             li {

=== added file '0.1/ambiance/img/ubuntushape.png'
Binary files 0.1/ambiance/img/ubuntushape.png	1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/ubuntushape.png	2015-01-14 19:02:01 +0000 differ
=== modified file '0.1/ambiance/js/list.js'
--- 0.1/ambiance/js/list.js	2014-02-28 20:29:07 +0000
+++ 0.1/ambiance/js/list.js	2015-01-14 19:02:01 +0000
@@ -78,7 +78,7 @@
          * Add or Set the List Header
          * @method setHeader
          * @param {String} text - The header text
-         */ 
+         */
         setHeader: function (text) {
             if (typeof (text) == 'string') {
                 var header = this._list.querySelectorAll('header');
@@ -96,7 +96,7 @@
                 if (!header)
                     header = document.createElement('header');
 
-                header.innerText = text;
+                header.textContent = text;
             }
         },
             /**
@@ -122,12 +122,12 @@
                 });
             }
             //FIXME: no real checks on text content
-            a.innerText = text;
+            a.textContent = text;
             li.appendChild(a);
 
             if (label && typeof (label) == 'string') {
                 var n = document.createElement('label');
-                n.innerText = label;
+                n.textContent = label;
                 li.appendChild(n);
             }
 
@@ -143,7 +143,7 @@
          * Gets a list item &lt;li&gt; by its index, where index counting starts from 1
          * @method at
          * @param {Number} index
-         * @return The list item, or null on failure 
+         * @return The list item, or null on failure
          */
         at: function (index) {
             if (typeof (index) != 'number')

=== modified file 'examples/html5-theme/widgets/ListItems.html'
--- examples/html5-theme/widgets/ListItems.html	2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/ListItems.html	2015-01-14 19:02:01 +0000
@@ -5,18 +5,18 @@
  This file is part of ubuntu-html5-ui-toolkit.
 
  This package is free software; you can redistribute it and/or modify
- it under the terms of the GNU Lesser General Public License as 
- published by the Free Software Foundation; either version 3 of the 
+ it under the terms of the GNU Lesser General Public License as
+ published by the Free Software Foundation; either version 3 of the
  License, or
  (at your option) any later version.
- 
+
  This package is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public 
- License along with this program. If not, see 
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this program. If not, see
  <http://www.gnu.org/licenses/>.
 -->
 
@@ -54,15 +54,15 @@
                 <ul data-role="listview">
                     <li>
                         <p>Label</p>
-                        <p class="small-font">Secondary Label</p>
-                    </li>
-                    <li>
-                        <p>Label</p>
-                        <p class="small-font">Secondary Label</p>
-                    </li>
-                    <li>
-                        <p>Label</p>
-                        <p class="small-font">Secondary Label</p>
+                        <p>Secondary Label</p>
+                    </li>
+                    <li>
+                        <p>Label</p>
+                        <p>Secondary Label</p>
+                    </li>
+                    <li>
+                        <p>Label</p>
+                        <p>Secondary Label</p>
                     </li>
                 </ul>
             </section>
@@ -72,19 +72,19 @@
                 <ul data-role="listview">
                     <li>
                         <p>Label</p>
-                        <p class="small-font">Value 1, Value 2</p>
-                    </li>
-                    <li>
-                        <p>Label</p>
-                        <p class="small-font">Value 1, Value 2</p>
-                    </li>
-                    <li>
-                        <p>Label</p>
-                        <p class="small-font">Value 1, Value 2</p>
-                    </li>
-                    <li>
-                        <p>Label</p>
-                        <p class="small-font">Value 1, Value 2</p>
+                        <p>Value 1, Value 2</p>
+                    </li>
+                    <li>
+                        <p>Label</p>
+                        <p>Value 1, Value 2</p>
+                    </li>
+                    <li>
+                        <p>Label</p>
+                        <p>Value 1, Value 2</p>
+                    </li>
+                    <li>
+                        <p>Label</p>
+                        <p>Value 1, Value 2</p>
                     </li>
                 </ul>
             </section>

=== modified file 'examples/html5-theme/widgets/Sliders.html'
--- examples/html5-theme/widgets/Sliders.html	2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/Sliders.html	2015-01-14 19:02:01 +0000
@@ -5,18 +5,18 @@
  This file is part of ubuntu-html5-ui-toolkit.
 
  This package is free software; you can redistribute it and/or modify
- it under the terms of the GNU Lesser General Public License as 
- published by the Free Software Foundation; either version 3 of the 
+ it under the terms of the GNU Lesser General Public License as
+ published by the Free Software Foundation; either version 3 of the
  License, or
  (at your option) any later version.
- 
+
  This package is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public 
- License along with this program. If not, see 
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this program. If not, see
  <http://www.gnu.org/licenses/>.
 -->
 
@@ -36,14 +36,14 @@
         <div data-role="content">
 
             <div class="inset">
-                <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber">
+                <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber;">
                     <input name="jim" id="jim" type="range" min="0" max="100" value="0">
                     <output for="jim" name="ojim">0</output>
                 </form>
             </div>
 
             <div class="inset">
-                <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber">
+                <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber;">
                     <input id="bob" name="bob" type="range" min="23" max="109" value="0">
                     <output for="bob" name="obob">23</output>
                 </form>

=== modified file 'examples/html5-theme/widgets/UbuntuShape.html'
--- examples/html5-theme/widgets/UbuntuShape.html	2014-02-13 19:54:08 +0000
+++ examples/html5-theme/widgets/UbuntuShape.html	2015-01-14 19:02:01 +0000
@@ -33,48 +33,46 @@
 <body>
     <div data-role="mainview">
 
-      <div class="large-font" style="padding-bottom: 40px">
-	Ubuntu Shape
-      </div>
-
-      <div class="medium-font">
-	<span>Color</span>
-	<div data-role="content" style="display: inline">
-          <div data-role="shape">
-            <div style="background-color: #dd4814"/>
-          </div>
-	</div>
-	<div data-role="content" style="display: inline">
-          <div data-role="shape">
-            <div style="background-color: violet"/>
-          </div>
-	</div>
-	<div data-role="content" style="display: inline">
-          <div data-role="shape">
-            <div style="background-color: gray"/>
-          </div>
-	</div>
-      </div>
-
-      <div class="medium-font">
-	<span>Image</span>
-	<div data-role="content" style="display: inline">
-          <div data-role="shape">
-            <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png">
-          </div>
-	</div>
-      </div>
-
-
-      <div class="medium-font">
-	<span>Radius</span>
-	<div data-role="content" style="display: inline">
-          <div data-role="shape">
-	    <div style="display: table;"> <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span></div>
-          </div>
-	</div>
-      </div>
+        <div class="large-font" style="padding-bottom: 40px">Ubuntu Shape</div>
+
+        <div class="medium-font">
+            <span>Color</span>
+            <div data-role="content" style="display: inline">
+                <div data-role="shape">
+                    <div style="background-color: #dd4814"/>
+                </div>
+            </div>
+            <div data-role="content" style="display: inline">
+                <div data-role="shape">
+                    <div style="background-color: violet"/>
+                </div>
+            </div>
+            <div data-role="content" style="display: inline">
+                <div data-role="shape">
+                    <div style="background-color: gray"/>
+                </div>
+            </div>
+        </div>
+
+        <div class="medium-font">
+            <span>Image</span>
+            <div data-role="content" style="display: inline">
+                <div data-role="shape">
+                    <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png"></div>
+            </div>
+        </div>
+
+        <div class="medium-font">
+            <span>Radius</span>
+            <div data-role="content" style="display: inline">
+                <div data-role="shape">
+                    <div style="display: table;">
+                        <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span>
+                    </div>
+                </div>
+            </div>
+        </div>
 
     </div>
 </body>
-</html>
+</html>
\ No newline at end of file