Merge lp:~whosdaz/ubuntu-html5-theme/googlecodein into lp:ubuntu-html5-theme

[Matthew Allen]

[Alexandre Abreu (abreu-alexandre)]

Thank you for working on that ! :)

A few comments:

- the checkboxes appear to be slightly bigger than the qml version,
- for checkboxes, the tick images are not properly aligned in the box, and they are a bit smaller than the qml version,
- the back color should not be orange but green,
- the switch ticks are a bit bolder than the checkbox versions,
- the back color for the uncheck is not the right grey,

review: Needs Fixing

[lp:~whosdaz/ubuntu-html5-theme/googlecodein]

218. By Matthew Allen on 2015-12-12

Fixed background colour of button, fixed Orange accents to Green, fixed sizing of tickboxes

Unmerged revisions

=== modified file '0.1/ambiance/css/appTemplate.css'
--- 0.1/ambiance/css/appTemplate.css	2015-01-29 15:14:59 +0000
+++ 0.1/ambiance/css/appTemplate.css	2015-12-12 11:57:23 +0000
@@ -672,7 +672,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%;
 }
 
@@ -785,7 +785,6 @@
   from {
     -webkit-transform: rotate(1deg);
   }
-
   to {
     -webkit-transform: rotate(360deg);
   }
@@ -794,11 +793,9 @@
   0% {
     opacity: 0;
   }
-
   50% {
     opacity: 1;
   }
-
   100% {
     opacity: 0;
   }
@@ -928,43 +925,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);
     }
@@ -973,43 +960,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);
     }
@@ -1056,7 +1033,7 @@
   background: #dd4814;
   border: 2px solid #dd4814;
   border-radius: 6px;
-  color: white;
+  color: #ffffff;
   font-family: "Ubuntu";
   font-size: 1rem;
   padding: 9px 25px;
@@ -1066,21 +1043,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: #929292;
-  color: white;
+  color: #ffffff;
   border-color: #929292;
 }
 
@@ -1205,14 +1182,16 @@
  * 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/>.
+ * BOXES SCALED BY A FACTOR OF 0.65
  */
 label:not([for]) {
   display: inline-block;
   vertical-align: middle;
-  width: 4.5rem;
+  width: 2.925rem;
   height: 2.2rem;
   position: relative;
   background: none;
+  margin-top: 15px;
 }
 label:not([for]) input[type="checkbox"] {
   margin: 0;
@@ -1230,92 +1209,92 @@
   left: 50%;
   top: 50%;
   margin: -1.1rem 0 0 -1.1rem;
-  width: 2rem;
-  height: 2rem;
+  width: 1.25rem;
+  height: 1.15rem;
   pointer-events: none;
   border-radius: 6px;
-  background: rgba(0, 0, 0, 0.4);
-  background-position-y: 30px;
+  background: transparent;
+  background-position-y: 5px;
   -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
   transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
 }
 label:not([for]) input[type="checkbox"]:checked + span {
-  background: #dd4814 url(../img/[e-mail]) no-repeat 0.3rem 0.3rem;
-  background-size: 75% 75%;
+  background: #00a132 url(../img/[e-mail]) no-repeat 0.2rem 0.2rem;
+  background-size: 70% 70%;
   background-position-y: 5px;
   -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
   transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
 }
 label:not([for]) input[type="checkbox"]:disabled + span {
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: rgba(0, 0, 0, 0.025) !important;
 }
 label:not([for]) input[type="checkbox"]:disabled:checked + span {
-  background: rgba(221, 72, 20, 0.5) url(../img/[e-mail]) no-repeat 0.3rem 0.3rem !important;
-  background-size: 75% 75% !important;
+  background: rgba(0, 161, 50, 0.5) url(../img/[e-mail]) no-repeat 0.2em 0.2rem !important;
+  background-size: 70% 70% !important;
 }
 
 label input[type="checkbox"][data-type="switch"] + span.toggle {
   position: absolute;
   left: 50%;
   top: 50%;
-  margin: -1.1rem 0 0 -2.2rem;
-  width: 4.5rem;
-  height: 2.2rem;
+  margin: -1.1rem 0 0 -1.2rem;
+  width: 2.925rem;
+  height: 1.43rem;
   pointer-events: none;
   overflow: hidden;
-  background: rgba(136, 136, 136, 0.3);
+  background: rgba(136, 136, 136, 0.2);
 }
 label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {
-  background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
-  background-size: 90% 75%;
+  background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem;
+  background-size: 90% 80%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
-  width: 4.5rem;
-  height: 2.1rem;
+  width: 2.925rem;
+  height: 1.365rem;
   -webkit-transition: background-image 0.3s ease-in-out;
   transition: background-image 0.3s ease-in-out;
 }
 label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
   position: absolute;
-  top: 2px;
-  left: 2px;
+  top: 3px;
+  left: 3px;
   z-index: 2;
-  width: 2rem;
-  height: 2rem;
+  width: 1.1rem;
+  height: 1.1rem;
   border-radius: 6px;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.2);
   -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
   transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
 }
 label input[type="checkbox"][data-type="switch"]:checked + span.toggle {
-  background: rgba(136, 136, 136, 0.3) !important;
+  background: rgba(136, 136, 136, 0.2) !important;
 }
 label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {
-  background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
-  background-size: 90% 75%;
+  background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem;
+  background-size: 90% 80%;
 }
 label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {
-  background: #dd4814;
-  -webkit-transform: translate3d(38px, 0, 0);
-  transform: translate3d(38px, 0, 0);
+  background: #00a132;
+  -webkit-transform: translate3d(24.7px, 0, 0);
+  transform: translate3d(24.7px, 0, 0);
 }
 
 label input[data-type="switch"]:disabled + span.toggle {
-  background: rgba(136, 136, 136, 0.3) !important;
+  background: rgba(136, 136, 136, 0.03) !important;
 }
 label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {
   opacity: 0.4;
 }
 label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle {
   opacity: 0.4;
-  -webkit-transform: translate3d(38px, 0, 0);
-  transform: translate3d(38px, 0, 0);
+  -webkit-transform: translate3d(24.7px, 0, 0);
+  transform: translate3d(24.7px, 0, 0);
 }
 
 /*
@@ -1862,8 +1841,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;
@@ -2043,6 +2022,8 @@
 }
 
 .medium-font {
+  width: 100px;
+  display: inline-block;
   font-size: 14px;
   line-height: 1.3;
 }
@@ -2061,3 +2042,5 @@
   font-size: 8px;
   line-height: 1.3;
 }
+
+/*# sourceMappingURL=appTemplate.css.map */

=== modified file '0.1/ambiance/css/sass/default.scss'
--- 0.1/ambiance/css/sass/default.scss	2014-08-29 00:33:51 +0000
+++ 0.1/ambiance/css/sass/default.scss	2015-12-12 11:57:23 +0000
@@ -120,6 +120,8 @@
 }
 
 .medium-font {
+    width: 100px;
+    display: inline-block;
     font-size: 14px;
     line-height: 1.3;
 }
@@ -137,4 +139,4 @@
 .xxsmall-font {
     font-size: 8px;
     line-height: 1.3;
-}
\ No newline at end of file
+}

=== modified file '0.1/ambiance/css/sass/toggles.scss'
--- 0.1/ambiance/css/sass/toggles.scss	2014-02-19 22:25:29 +0000
+++ 0.1/ambiance/css/sass/toggles.scss	2015-12-12 11:57:23 +0000
@@ -18,15 +18,17 @@
  * 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/>.
+ * BOXES SCALED BY A FACTOR OF 0.65
  */
 
 label:not([for])  {
     display: inline-block;
     vertical-align: middle;
-    width: 4.5rem;
+    width: 2.925rem;
     height: 2.2rem;
     position: relative;
     background: none;
+    margin-top: 15px;
 
     input[type="checkbox"] {
         margin: 0;
@@ -35,6 +37,7 @@
         top: 0;
         left: 0;
 
+
         & + span {
             @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
             @include box_sizing (border-box);
@@ -42,20 +45,20 @@
             left: 50%;
             top: 50%;
             margin: -1.1rem 0 0 -1.1rem;
-            width: 2rem;
-            height: 2rem;
+            width: 1.25rem;
+            height: 1.15rem;
             pointer-events: none;
             border-radius: 6px;
-            background: rgba(0, 0, 0, 0.4);
-            background-position-y: 30px;
+            background: rgba(0, 0, 0, 0.0);
+            background-position-y: 5px;
             -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
             transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
         }
 
 
         &:checked + span {
-            background: $ubuntu_orange url(../img/[e-mail]) no-repeat 0.3rem 0.3rem;
-            background-size: 75% 75%;
+            background: rgba(0,161,50, 255) url(../img/[e-mail]) 		    no-repeat 0.2rem 0.2rem;
+            background-size: 70% 70%;
             background-position-y: 5px;
             -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
             transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
@@ -63,12 +66,12 @@
 
         &:disabled {
             + span {
-                background: rgba(0, 0, 0, 0.25)!important;
+                background: rgba(0, 0, 0, 0.025)!important;
             }
 
             &:checked + span {
-                background: rgba(221, 72, 20, 0.5) url(../img/[e-mail]) no-repeat 0.3rem 0.3rem!important;
-                background-size: 75% 75%!important;
+                background: rgba(0,161,50, 0.5) url(../img/[e-mail]) no-repeat 0.2em 0.2rem!important;
+                background-size: 70% 70%!important;
             }
         }
     }
@@ -79,61 +82,61 @@
         position: absolute;
         left: 50%;
         top: 50%;
-        margin: -1.1rem 0 0 -2.2rem;
-        width: 4.5rem;
-        height: 2.2rem;
+        margin: -1.1rem 0 0 -1.2rem;
+        width: 2.925rem;
+        height: 1.43rem;
         pointer-events: none;
         overflow: hidden;
-        background: rgba(136, 136, 136, 0.3);
+        background: rgba(136, 136, 136, 0.2);
 
         > span.toggle-bg {
-            background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
-            background-size: 90% 75%;
+            background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem;
+            background-size: 90% 80%;
             position: absolute;
             top: 0;
             left: 0;
             z-index: 10;
-            width: 4.5rem;
-            height: 2.1rem;
+            width: 2.925rem;
+            height: 1.365rem;
             -webkit-transition: background-image 0.3s ease-in-out;
             transition: background-image 0.3s ease-in-out;
         }
 
         > span.toggle-handle {
             @include box_sizing (border-box);
-            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
+            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.2));
             position: absolute;
-            top: 2px;
-            left: 2px;
+            top: 3px;
+            left: 3px;
             z-index: 2;
-            width: 2rem;
-            height: 2rem;
+            width: 1.1rem;
+            height: 1.1rem;
             border-radius: 6px;
-            background: rgba(0, 0, 0, 0.4);
+            background: rgba(0, 0, 0, 0.2);
             -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
             transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
         }
     }
 
     &:checked + span.toggle {
-        background: rgba(136, 136, 136, 0.3) !important;
+        background: rgba(136, 136, 136, 0.2) !important;
 
         > span.toggle-bg {
-            background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
-            background-size: 90% 75%;
+            background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem;
+            background-size: 90% 80%;	
         }
 
         > span.toggle-handle {
-            background: rgb(221, 72, 20);
-            -webkit-transform: translate3d(38px, 0, 0);
-            transform: translate3d(38px, 0, 0);
+            background: rgba(0,161,50, 255);
+            -webkit-transform: translate3d(24.7px, 0, 0);
+            transform: translate3d(24.7px, 0, 0);
         }
     }
 }
 
 label input[data-type="switch"]:disabled {
     + span.toggle {
-        background: rgba(136, 136, 136, 0.3) !important;
+        background: rgba(136, 136, 136, 0.03) !important;
 
         > span.toggle-handle {
             opacity: 0.4;
@@ -142,7 +145,7 @@
 
     &:checked + span.toggle > span.toggle-handle {
         opacity: 0.4;
-        -webkit-transform: translate3d(38px, 0, 0);
-        transform: translate3d(38px, 0, 0);
+        -webkit-transform: translate3d(24.7px, 0, 0);
+        transform: translate3d(24.7px, 0, 0);
     }
-}
\ No newline at end of file
+}

=== modified file 'examples/html5-theme/widgets/Toggles.html'
--- examples/html5-theme/widgets/Toggles.html	2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/Toggles.html	2015-12-12 11:57:23 +0000
@@ -44,14 +44,14 @@
 
             <div class="inset">
 	      <span  class="medium-font">Unchecked</span>
-                <label>
+                <label class="checkbox">
                     <input type="checkbox">
-                    <span></span>
+                    <span class="checkbox"></span>
                 </label>
             </div>
-            <div>
+            <div class="inset">
 	      <span  class="medium-font">Checked</span>
-                <label>
+                <label class="checkbox">
                     <input type="checkbox" checked="">
                     <span></span>
                 </label>
@@ -60,7 +60,7 @@
 	    <div>
 	      <span  class="medium-font">Disabled</span>
               <div class="inset" style="display:inline">
-                <label>
+                <label class="checkbox">
                   <input type="checkbox" checked="" disabled="">
                   <span></span>
                 </label>
@@ -131,3 +131,4 @@
     </div>
 </body>
 </html>
+