diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js
index f1d8ca3..8d23360 100644
--- a/elements/gui-panel/gui-panel.js
+++ b/elements/gui-panel/gui-panel.js
@@ -5,6 +5,7 @@ Polymer('gui-panel', {
docked: false,
open: true,
+ touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch,
ready: function() {
diff --git a/elements/gui-panel/gui-panel.styl b/elements/gui-panel/gui-panel.styl
index 80f189f..d9d79c1 100644
--- a/elements/gui-panel/gui-panel.styl
+++ b/elements/gui-panel/gui-panel.styl
@@ -1,98 +1,84 @@
-@import '../shared/shared';
+@import '../shared/shared'
-#container {
- background: panel-color;
- transition: transform 0.4s cubic-bezier( 0, 0.8, 0, 1 );
+// redefine touch because we are the host ...
- &.autoplace-true {
+touch( val = true )
+ { '.touch-' + val } &
+ { block }
- width: panel-width;
- position: fixed;
- top: 0;
- &.docked-false {
+#container
- right: 20px;
+ background color-panel
+ transition transform 0.4s cubic-bezier( 0, 0.8, 0, 1 )
- &.open-true {
-
- }
+ &.autoplace-true
+
+ width panel-width
+
+ &.touch-true
+ width panel-width-touch
+
+ position fixed
+ top 0
- &.open-false {
-
- }
-
- }
-
- &.docked-true {
-
- right: 0;
- bottom: 0;
-
- #controllers {
- position: absolute;
- width: 100%;
- bottom: 0;
- top: 0;
- overflow: auto;
- }
-
- &.open-true {
-
- }
+ &.docked-false
+ right 20px
- &.open-false {
- transform: translate3d( panel-width, 0, 0 );
- }
+ &.docked-true
+ right 0
+ bottom 0
+
+ #controllers
+ position absolute
+ width 100%
+ bottom 0
+ top 0
+ overflow auto
+
+ &.open-false
+ transform translate3d( panel-width, 0, 0 )
- }
-
- }
-
-}
+ &.touch-true
+ transform translate3d( panel-width-touch, 0, 0 )
-#closeButton {
+#closeButton
panel-font()
- user-select: none;
- cursor: pointer;
- text-align: center;
- padding: padding * 0.75 padding;
- background: black;
+ user-select none
+ cursor pointer
+ text-align center
+ padding padding * 0.75 padding
+ background black
- &:hover {
- background: panel-color;
- }
-
-}
-
-#closeButtonDocked {
+ +hover()
+ background color-panel
- position: absolute;
- right: panel-width;
+
+#closeButtonDocked
- cursor: pointer;
+ position absolute
+ right 100%
+
+ cursor pointer
- top: 0;
- color: black;
+ top 0
+ color black
- width: 60px;
- height: 60px;
+ width 60px
+ height 60px
- padding: 10px;
- box-sizing: border-box;
+ padding 10px
+ box-sizing border-box
-}
+#closeButtonDockedInner
-#closeButtonDockedInner {
+ border-radius 3px
+ background #fff
- border-radius: 3px;
- background: #fff;
+ width 100%
+ height 100%
- width: 100%;
- height: 100%;
-
-}
diff --git a/elements/gui-row/gui-row.js b/elements/gui-row/gui-row.js
index 31fec8a..70e1ef2 100644
--- a/elements/gui-row/gui-row.js
+++ b/elements/gui-row/gui-row.js
@@ -1,18 +1,10 @@
-/*
-
-[ ] comment hover behavior
-
-*/
-
Polymer('gui-row', {
comment: null,
-
commentOpen: false,
ready: function() {
-
},
openComment: function() {
diff --git a/elements/gui-row/gui-row.styl b/elements/gui-row/gui-row.styl
index 2c4ad84..af00789 100644
--- a/elements/gui-row/gui-row.styl
+++ b/elements/gui-row/gui-row.styl
@@ -1,97 +1,68 @@
-@import '../shared/shared';
+@import '../shared/shared'
-:host {
+#row
+ panel-font()
+ height row-height
+ user-select none
+ transition background-color 0.2s linear
+ border-bottom 1px solid lighter
+
+#controller
+ height 100%
+
+#name
+ // overflow hidden
+ padding 0 padding
+ box-sizing border-box
+ width row-name-width
+ cursor default
+ .comment-true &
+ cursor pointer
+
+#nameInner
+ overflow hidden
+ text-overflow ellipsis
+ // word-wrap break-word
+
+#comment
+
panel-font()
-}
+ line-height 1.6em
+ background color-comment
+ color #333
-#row {
+ box-sizing border-box
+ overflow hidden
+ transition height 0.15s ease
- debug( blue )
+ position absolute
+ z-index 999
+ pointer-events none
- height: row-height;
- transition: background-color 0.2s linear;
- border-bottom: 1px solid lighter;
+ opacity 0
+ transform translate3d( 0, 20px, 0 )
-}
+ transition all 0.2s ease
-#controller {
- height: 100%;
-}
+#comment.open-true
+
+ opacity 1
+ transform translate3d( 0, 0, 0 )
+ +touch( false )
+ transition-delay 200ms
-#name {
+#commentInner
+ padding padding
- debug( magenta )
+.comment-true #nameInner
- // overflow: hidden;
- padding: 0 padding;
- box-sizing: border-box;
- width: 40%;
- cursor: default;
-
- .comment-true & {
- cursor: pointer;
- }
-
-}
-
-#nameInner {
-
- debug( red );
-
- overflow: hidden;
- text-overflow: ellipsis;
- // word-wrap: break-word;
-
-}
-
-#comment {
-
- line-height: 16px;
- user-select: text;
-
- background: #E0CF99;
- color: #333;
- // box-shadow: inset 0 2px 0 dark;
-
-
- box-sizing: border-box;
- overflow: hidden;
- transition: height 0.15s ease;
+ display inline-block
+ border-bottom 1px dotted light
+
+ &:after
+ // content ' ?'
+ // color light
- position: absolute;
- z-index: 999;
- pointer-events: none;
-
- opacity: 0;
- transform: translate3d( 0, 20px, 0 );
-
- transition: all 0.2s ease;
-
-}
-
-#comment.open-true {
-
- opacity: 1;
- transition-delay: 200ms;
- transform: translate3d( 0, 0, 0 );
-
-}
-
-#commentInner {
- padding: padding;
-}
-
-.comment-true #nameInner {
-
- display: inline-block;
- border-bottom: 1px dotted light;
-
- &:after {
- // content: ' ?';
- // color: light;
- }
-
-}
\ No newline at end of file
diff --git a/elements/shared/controller.styl b/elements/shared/controller.styl
deleted file mode 100644
index c49e454..0000000
--- a/elements/shared/controller.styl
+++ /dev/null
@@ -1,13 +0,0 @@
-@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
\ No newline at end of file
diff --git a/elements/shared/input.styl b/elements/shared/input.styl
new file mode 100644
index 0000000..7dadd0d
--- /dev/null
+++ b/elements/shared/input.styl
@@ -0,0 +1,17 @@
+@import 'shared'
+
+input
+ panel-font()
+ height 100%
+ width 100%
+ display inline-block
+ background-color transparent
+ border 0
+ padding 0
+ outline none
+ transition background-color 0.15s linear
+ box-sizing border-box
+ &:focus
+ background lighter
+ +hover()
+ background lighter
\ No newline at end of file
diff --git a/elements/shared/shared.styl b/elements/shared/shared.styl
index f20642d..4302344 100644
--- a/elements/shared/shared.styl
+++ b/elements/shared/shared.styl
@@ -1,39 +1,53 @@
-@import 'nib';
+@import 'nib'
-// config
+/* sizes */
-support-for-ie ?= true
-use-debug = false
-
-debug( color )
- if use-debug
- border: 1px solid color
-
-// constants
+font-size = 10px
+touch-scale = 1.25
panel-width = 245px
+panel-width-touch = 300px
-row-height = 29px
-// row-height-touch = 44px
+row-height = 2.9em
+row-name-width = 38%
-font-color = #ECEBE0
-panel-color = rgba( 30, 30, 30, 0.95 );
+padding = 8px
-number-color = #25A0D8
-boolean-color = #864694
-string-color = #1EBD6E
+/* colors */
+
+color-font = #ECEBE0
+color-panel = rgba( 30, 30, 30, 0.95 )
+
+color-comment = #E0CF99
+
+color-number = #25A0D8
+color-boolean = #864694
+color-string = #1EBD6E
light = rgba( 255, 255, 255, 0.25 )
lighter = rgba( 255, 255, 255, 0.05 )
-dark = rgba( 0, 0, 0, 0.1 );
+dark = rgba( 0, 0, 0, 0.1 )
+
+/* other */
-padding = 8px
ease = cubic-bezier( .25, .25, 0, 1 )
-// common
-panel-font( color = font-color )
- font: 10px 'Lucida Grande', sans-serif;
- color: color;
- if ( color == font-color )
- -webkit-font-smoothing: antialiased;
+/* mixins */
+
+panel-font( color = color-font )
+ font font-size 'Lucida Grande', sans-serif
+ color color
+ if ( color == color-font )
+ -webkit-font-smoothing antialiased
+ +touch()
+ font-size font-size * touch-scale
+
+touch( val = true )
+ :host-context({ '.touch-' + val }) &
+ { block }
+
+hover()
+ +touch( false )
+ &:hover
+ { block }
\ No newline at end of file