dat.gui/elements/gui-row/gui-row.styl

@import '../shared/shared'

#container.disabled-true
    opacity 0.4
    pointer-events none

#row 
    panel-font()
    height row-height
    user-select none
    transition background-color 0.2s linear
    border-bottom 1px solid lighter
    padding 0 padding
    // overflow hidden

#controller 
    height 100%

#name 
    // overflow hidden
    padding-right padding
    box-sizing border-box
    width row-name-width
    cursor default
    -webkit-font-smoothing antialiased
    .comment-true &  
        cursor pointer
    +touch()
        font-size 11px
        width 30%
    
#nameInner 
    overflow hidden
    text-overflow ellipsis
    // word-wrap break-word

#comment  
    
    panel-font()

    line-height 1.6em
    background color-comment
    color #333

    box-sizing border-box
    overflow hidden
    transition height 0.15s ease

    position absolute
    z-index 999
    pointer-events none
    transform translate3d( 0, 20px, 0 )
    
    opacity 0
    transition all 0.2s ease

#comment.open-true  
    
    opacity 1
    transform translate3d( 0, 0, 0 )
    +touch( false )
        transition-delay 200ms

#commentInner 
    padding padding

.comment-true #nameInner  

    display inline-block
    border-bottom 1px dotted light
    
    &:after  
        // content ' ?'
        // color light