I approved the task in GoogleCodeIn. Well done, and thanks for your
contribution Matthew !

On Sat, Dec 12, 2015 at 1:02 PM, MatthewAllen <email address hidden> wrote:

> MatthewAllen has proposed merging
> lp:~whosdaz/ubuntu-html5-theme/googlecodein into lp:ubuntu-html5-theme.
>
> Requested reviews:
>   Ubuntu HTML5 Theme Developers (ubuntu-html5-theme-devs)
> Related bugs:
>   Bug #1522819 in Ubuntu HTML5 UI SDK: "HTML5 Gallery - Toggles section"
>   https://bugs.launchpad.net/ubuntu-html5-theme/+bug/1522819
>
> For more details, see:
>
> https://code.launchpad.net/~whosdaz/ubuntu-html5-theme/googlecodein/+merge/280386
> --
> Your team Ubuntu HTML5 Theme Developers is requested to review the
> proposed merge of lp:~whosdaz/ubuntu-html5-theme/googlecodein into
> lp:ubuntu-html5-theme.
>
> === 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 12:01:25 +0000
> @@ -672,7 +672,7 @@
>  }
>
>  .textfield.clear:focus {
> -  background: url(artwork/icon_clear@20.png) no-repeat 97% center white;
> +  background: url(artwork/icon_clear@20.png) 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/tick-white@30.png) no-repeat 0.3rem
> 0.3rem;
> -  background-size: 75% 75%;
> +  background: #00a132 url(../img/tick-white@30.png) 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/tick-white@30.png)
> no-repeat 0.3rem 0.3rem !important;
> -  background-size: 75% 75% !important;
> +  background: rgba(0, 161, 50, 0.5) url(../img/tick-white@30.png)
> 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 12:01:25 +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 12:01:25 +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/tick-white@30.png)
> no-repeat 0.3rem 0.3rem;
> -            background-size: 75% 75%;
> +            background: rgba(0,161,50, 255) url(../img/tick-white@30.png)
>                 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/tick-white@30.png) no-repeat 0.3rem 0.3rem!important;
> -                background-size: 75% 75%!important;
> +                background: rgba(0,161,50, 0.5)
> url(../img/tick-white@30.png) 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 12:01:25 +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>
> +
>
>
>