Merge pull request #23 from pebble/#22/css-issues

#22/css issues

dev/custom-fn.js

@@ -10,9 +10,9 @@ module.exports = function() {
    */
   function toggleBackground() {
     if (this.get()) {
-      Clay.getItemByAppKey('background').enable();
+      Clay.getItemByAppKey('colorTest').enable();
     } else {
-      Clay.getItemByAppKey('background').disable();
+      Clay.getItemByAppKey('colorTest').disable();
     }
   }
 

gulpfile.js

@@ -103,6 +103,7 @@ gulp.task('dev-js', ['js', 'sass'], function() {
     .transform(stringify(stringifyOptions))
     .transform('deamdify')
     .transform(sassify, sassifyOptions)
+    .transform(autoprefixify, autoprefixerOptions)
     .bundle()
     .pipe(source('dev.js'))
     .pipe(gulp.dest('./tmp/'));

src/scripts/components/select.js

@@ -15,8 +15,10 @@ module.exports = {
 
     var $value = self.$element.select('.value');
 
-    self.on('change', function(ev) {
-      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+    self.on('change', function() {
+      var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
+      var $options = self.$manipulatorTarget.select('option');
+      var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
       $value.set('innerHTML', value);
     });
   }

src/scripts/components/submit.js

@@ -3,6 +3,7 @@
 module.exports = {
   name: 'submit',
   template: require('../../templates/components/submit.tpl'),
+  style: require('../../styles/clay/components/submit.scss'),
   manipulator: 'html',
   defaults: {
     attributes: {}

src/styles/clay/_base.scss

@@ -83,9 +83,12 @@ label {
   }
 }
 
+.tap-highlight {
+  @include tap-highlight();
+}
+
 .component {
   padding-bottom: $item-spacing-v;
-  @include tap-highlight();
 
   &.disabled {
     opacity: 0.25;
@@ -108,10 +111,10 @@ label {
     &:last-child,
     &:first-child {
       padding-bottom: $item-spacing-v;
-      
-      &:after {
-        display: none;
-      }
+    }
+
+    &:last-child:after {
+      display: none;
     }
 
     &:after {
@@ -130,6 +133,10 @@ label {
   .component-heading:first-child {
     background: $color-gray-3;
     border-radius: $border-radius $border-radius 0 0;
+
+    &:after {
+      display: none;
+    }
   }
 
 }
@@ -160,7 +167,7 @@ a {
     .input {
       display: table-cell;
     }
-    
+
     .input {
       text-align: right;
     }

src/styles/clay/components/checkboxgroup.scss

@@ -3,10 +3,8 @@
 
 .component-checkbox {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
@@ -39,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       background: $color-orange;
       

src/styles/clay/components/color.scss

@@ -7,6 +7,7 @@
     height: $base-height;
     border-radius: $base-height / 2;
     box-shadow: $box-shadow-small-components;
+    display: block;
   }
 
   .picker-wrap {

src/styles/clay/components/radiogroup.scss

@@ -3,10 +3,8 @@
 
 .component-radio {
 
-  @include tap-highlight(rgba(0,0,0,0));
   display: block;
 
-
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -16,7 +14,6 @@
 
     label {
       padding: $item-spacing-v / 2 0;
-      @include tap-highlight();
     }
 
     .label {
@@ -39,7 +36,7 @@
       flex-shrink: 0;
     }
 
-    input:checked ~ i {
+    input:checked + i {
       border-color: $color-orange;
       
       &:after {

src/styles/clay/components/select.scss

@@ -8,6 +8,7 @@
     $triangle-size: 0.85rem;
     position: relative;
     padding-right: $triangle-size + 0.25rem;
+    display: block;
 
     &:after {
       content: "";

src/styles/clay/components/submit.scss

@@ -0,0 +1,3 @@
+.component-submit {
+  text-align: center;
+}

src/styles/clay/elements/_button.scss

@@ -9,7 +9,7 @@ button,
   font-size: 1rem;
   line-height: 1;
   border: none;
-  display: block;
+  display: inline-block;
 
   color: $color-white;
   min-width: 12rem;

src/templates/components/checkboxgroup.tpl

@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="checkbox-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="checkbox"

src/templates/components/color.tpl

@@ -1,4 +1,4 @@
-<div class="component component-color">
+<div class="component component-color tap-highlight">
   <label>
     <input
       data-manipulator-target

src/templates/components/input.tpl

@@ -1,4 +1,4 @@
-<label class="component component-input">
+<label class="component component-input tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input

src/templates/components/radiogroup.tpl

@@ -2,7 +2,7 @@
   <span class="label">{{{label}}}</span>
   <div class="radio-group">
     {{each options}}
-      <label>
+      <label class="tap-highlight">
         <span class="label">{{{this.label}}}</span>
         <input
           type="radio"

src/templates/components/select.tpl

@@ -1,4 +1,4 @@
-<label class="component component-select">
+<label class="component component-select tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="value"></span>
   <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>

src/templates/components/submit.tpl

@@ -1,4 +1,4 @@
-<div class="component component-button">
+<div class="component component-submit">
   <button
     data-manipulator-target
     type="submit"

src/templates/components/toggle.tpl

@@ -1,4 +1,4 @@
-<label class="component component-toggle">
+<label class="component component-toggle tap-highlight">
   <span class="label">{{{label}}}</span>
   <span class="input">
     <input