shared style

TODO

@@ -8,19 +8,15 @@ DOCS
 
 STYLE
 
-- [ ] sharing more styles
-- [ ] css linter?
-
 - [ ] touch styles: bigger please!
 - [ ] kill hover behavior if touch
 
+- [x] sharing more styles
+
 CLEANLINESS
 
 - [ ] can gui-row be baked into base-controller somehow? 
 
-- [ ] strip component-slider from number-controller
-- [ ] strip component-input from number-controller, unify with string-controller
-
 PARITY
 
 - [ ] folders
@@ -34,4 +30,10 @@ PARITY
 
 NEW FEATURES
 
-- [ ] save server
+- [ ] save server
+
+NICE TO HAVES
+
+- [ ] css linter?
+- [ ] strip component-slider from number-controller
+- [ ] strip component-input from number-controller, unify with string-controller

docs/style.styl

@@ -1,4 +1,4 @@
-@import '../elements/shared.styl';
+@import '../elements/shared/shared';
 
 unit = 18px
 body-padding = unit * 2;

elements/controller-boolean/controller-boolean.html

@@ -7,6 +7,7 @@
 
 <template>
 
+<link rel="stylesheet" href="../shared/controller.css">
 <link rel="stylesheet" href="controller-boolean.css">
 
 <div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">

elements/controller-function/controller-function.html

@@ -10,6 +10,7 @@
 
 <template>
 
+<link rel="stylesheet" href="../shared/controller.css">
 <link rel="stylesheet" href="controller-function.css">
 
 <div id="container"></div>

elements/controller-function/controller-function.styl

@@ -0,0 +1 @@
+@import '../shared/shared';

elements/controller-number/controller-number.html

@@ -11,6 +11,7 @@
 
 <template>
 
+<link rel="stylesheet" href="../shared/controller.css">
 <link rel="stylesheet" href="controller-number.css">
 
 <div id="container" class="transition slider-{{ slider }}" horizontal layout center>

elements/controller-number/controller-number.js

@@ -150,6 +150,14 @@ Polymer( 'controller-number', {
 
     },
 
+    keydown: function( e ) {
+
+        if ( e.keyCode == 13 ) {
+            this.$.input.blur();
+        }
+
+    },
+    
     down: function( e ) {
 
         e.preventDefault();
@@ -204,13 +212,6 @@ Polymer( 'controller-number', {
 
     },
 
-    keydown: function( e ) {
-
-        if ( e.keyCode == 13 ) {
-            this.$.input.blur();
-        }
-
-    },
 
 
     // Filters

elements/controller-number/controller-number.styl

@@ -1,4 +1,4 @@
-@import '../shared';
+@import '../shared/shared';
 
 track-size = 1px;
 fill-size = 1px;
@@ -69,7 +69,7 @@ knob-size = 6px
 
 input { 
     
-    input( number-color );
+    color: number-color;
 
     .slider-true & {
     

elements/controller-string/controller-string.html

@@ -10,9 +10,12 @@
 
 <template>
 
+<link rel="stylesheet" href="../shared/controller.css">
 <link rel="stylesheet" href="controller-string.css">
 
-<input id="input" type="text" value="{{ value }}">
+<input id="input" type="text" value="{{ value }}" 
+    on-click="{{ click }}"
+    on-keydown="{{ keydown }}">
 
 </template>
 

elements/controller-string/controller-string.js

@@ -6,5 +6,18 @@ Gui.register( 'controller-string', function( value ) {
 
 Polymer( 'controller-string', {
 
+    click: function( e ) {
 
+        this.$.input.select();
+
+    },
+
+    keydown: function( e ) {
+
+        if ( e.keyCode == 13 ) {
+            this.$.input.blur();
+        }
+
+    }
+    
 });

elements/controller-string/controller-string.styl

@@ -1,10 +1,7 @@
-@import '../shared';
-
-:host
-    height: 100%;
+@import '../shared/shared';
 
 input
-    input( string-color );
+    color: string-color;
     width: 100%;
     height: 100%;
     padding-left: padding

elements/gui-panel/gui-panel.styl

@@ -1,8 +1,4 @@
-@import '../shared';
-
-#controllers { 
-    overflow: auto;
-}
+@import '../shared/shared';
 
 #container { 
 
@@ -33,6 +29,14 @@
             
             right: 0;
             bottom: 0;
+            
+            #controllers { 
+                position: absolute;
+                width: 100%;
+                bottom: 0;
+                top: 0;
+                overflow: auto;
+            }
 
             &.open-true {
 
@@ -75,8 +79,8 @@
     top: 0;
     color: black;
 
-    width: 50px;
-    height: 50px;
+    width: 60px;
+    height: 60px;
 
     padding: 10px;
     box-sizing: border-box;

elements/gui-row/gui-row.styl

@@ -1,4 +1,4 @@
-@import '../shared';
+@import '../shared/shared';
 
 :host {
 

elements/shared/controller.styl

@@ -0,0 +1,13 @@
+@import 'shared';
+
+input
+    height: 100%;
+    display: inline-block;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    outline: none;
+    transition: background-color 0.15s linear;
+    box-sizing: border-box;
+    &:hover, &:focus
+        background: lighter

elements/shared/shared.styl

@@ -37,16 +37,3 @@ panel-font( color = font-color )
     color: color;
     if ( color == font-color )
         -webkit-font-smoothing: antialiased;
-
-input( color )
-    panel-font( color )
-    height: 100%;
-    display: inline-block;
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-    outline: none;
-    transition: background-color 0.15s linear;
-    box-sizing: border-box;
-    &:hover, &:focus
-        background: lighter

gulpfile.js

@@ -53,7 +53,7 @@ gulp.task( 'vulcanize', [ 'css' ], function() {
 
 gulp.task( 'css', function() {
 
-    return css( 'elements/*/*.styl', 'elements' );
+    return css( 'elements/**/*.styl', 'elements' );
 
 } );