mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
styl refactor + touch styles
This commit is contained in:
George Michael Brower
parent
c31ddef69f
commit
a5fa1bb98d
30
TODO
30
TODO
@ -2,21 +2,6 @@ BUILD
|
|||||||
|
|
||||||
- [x] single import
|
- [x] single import
|
||||||
|
|
||||||
DOCS
|
|
||||||
|
|
||||||
- [ ] table of contents ( is going to be really long )
|
|
||||||
|
|
||||||
STYLE
|
|
||||||
|
|
||||||
- [ ] touch styles: bigger please!
|
|
||||||
- [ ] kill hover behavior if touch
|
|
||||||
|
|
||||||
- [x] sharing more styles
|
|
||||||
|
|
||||||
CLEANLINESS
|
|
||||||
|
|
||||||
- [ ] can gui-row be baked into base-controller somehow?
|
|
||||||
|
|
||||||
PARITY
|
PARITY
|
||||||
|
|
||||||
- [ ] folders
|
- [ ] folders
|
||||||
@ -32,6 +17,21 @@ NEW FEATURES
|
|||||||
|
|
||||||
- [ ] save server
|
- [ ] save server
|
||||||
|
|
||||||
|
DOCS
|
||||||
|
|
||||||
|
- [ ] table of contents ( is going to be really long )
|
||||||
|
|
||||||
|
STYLE
|
||||||
|
|
||||||
|
- [x] touch styles: bigger please!
|
||||||
|
- [x] kill hover behavior if touch
|
||||||
|
- [x] sharing more styles
|
||||||
|
|
||||||
|
STRUCTURE
|
||||||
|
|
||||||
|
- [ ] can gui-row be baked into base-controller somehow?
|
||||||
|
|
||||||
|
|
||||||
NICE TO HAVES
|
NICE TO HAVES
|
||||||
|
|
||||||
- [ ] css linter?
|
- [ ] css linter?
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
10
build/gui.js
10
build/gui.js
File diff suppressed because one or more lines are too long
109
docs/style.styl
109
docs/style.styl
@ -1,78 +1,67 @@
|
|||||||
@import '../elements/shared/shared';
|
@import '../elements/shared/shared'
|
||||||
|
|
||||||
unit = 18px
|
unit = 18px
|
||||||
body-padding = unit * 2;
|
body-padding = unit * 2
|
||||||
|
|
||||||
readme-margin = panel-width + body-padding;
|
readme-margin = panel-width + body-padding
|
||||||
|
|
||||||
* {
|
*
|
||||||
margin: 0;
|
margin 0
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body
|
||||||
margin: body-padding;
|
margin body-padding
|
||||||
line-height: 24px;
|
line-height 24px
|
||||||
}
|
|
||||||
|
|
||||||
.disable-hover,
|
.disable-hover,
|
||||||
.disable-hover * {
|
.disable-hover *
|
||||||
pointer-events: none !important;
|
pointer-events none !important
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, p, pre {
|
h1, h2, h3, h4, p, pre
|
||||||
margin-bottom: unit;
|
margin-bottom unit
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
pre
|
||||||
width: 100%;
|
width 100%
|
||||||
margin-bottom: unit * 2;
|
margin-bottom unit * 2
|
||||||
line-height: 20px;
|
line-height 20px
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1
|
||||||
margin-bottom: unit * 3;
|
margin-bottom unit * 3
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3
|
||||||
|
|
||||||
padding: unit 0;
|
padding unit 0
|
||||||
margin-bottom: unit * 2;
|
margin-bottom unit * 2
|
||||||
|
|
||||||
border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
|
border-bottom 1px solid rgba( 0, 0, 0, 0.2 )
|
||||||
transition: border-color 0.2s linear, color 0.2s linear;
|
transition border-color 0.2s linear, color 0.2s linear
|
||||||
|
|
||||||
&.sticky {
|
&.sticky
|
||||||
|
|
||||||
left: body-padding;
|
left body-padding
|
||||||
right: body-padding + readme-margin;
|
right body-padding + readme-margin
|
||||||
top: 0;
|
top 0
|
||||||
background: #fff;
|
background #fff
|
||||||
|
|
||||||
&.sticky-prev {
|
&.sticky-prev
|
||||||
color: #eee;
|
color #eee
|
||||||
border-bottom: 1px solid rgba( 0, 0, 0, 0 );
|
border-bottom 1px solid rgba( 0, 0, 0, 0 )
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
#readme
|
||||||
|
margin-right readme-margin
|
||||||
#readme {
|
|
||||||
margin-right: readme-margin;
|
gui-panel
|
||||||
}
|
position fixed
|
||||||
|
width panel-width
|
||||||
gui-panel {
|
top 0px
|
||||||
position: fixed;
|
right unit
|
||||||
width: panel-width;
|
z-index 9999
|
||||||
top: 0px;
|
transition transform 0.4s cubic-bezier(.5,1,0,1)
|
||||||
right: unit;
|
transform translate3d( 0, -200px, 0 )
|
||||||
z-index: 9999;
|
&.sticky
|
||||||
transition: transform 0.4s cubic-bezier(.5,1,0,1);
|
transform translate3d( 0, 0, 0 )
|
||||||
transform: translate3d( 0, -200px, 0 );
|
transition-delay 400ms
|
||||||
&.sticky {
|
|
||||||
transform: translate3d( 0, 0, 0 );
|
|
||||||
transition-delay: 400ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../shared/controller.css">
|
<link rel="stylesheet" href="../shared/input.css">
|
||||||
<link rel="stylesheet" href="controller-boolean.css">
|
<link rel="stylesheet" href="controller-boolean.css">
|
||||||
|
|
||||||
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
|
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
|
||||||
|
|||||||
@ -1,54 +1,48 @@
|
|||||||
@import '../shared';
|
@import '../shared/shared'
|
||||||
|
|
||||||
height = 8px;
|
height = 0.8em
|
||||||
width = round( height * 2.5 );
|
width = round( height * 2.5 )
|
||||||
border-radius = height;
|
border-radius = height
|
||||||
|
|
||||||
#container {
|
#container
|
||||||
height: 100%;
|
height 100%
|
||||||
cursor: pointer;
|
cursor pointer
|
||||||
padding-left: padding
|
padding-left padding
|
||||||
|
|
||||||
}
|
#switch-track
|
||||||
|
width width
|
||||||
|
height height
|
||||||
|
background light
|
||||||
|
border-radius 999px
|
||||||
|
transition background 0.1s linear
|
||||||
|
|
||||||
#switch-track {
|
#switch-knob
|
||||||
width: width;
|
height height
|
||||||
height: height;
|
width height
|
||||||
background: light;
|
border-radius 100%
|
||||||
border-radius: border-radius;
|
background color-font
|
||||||
transition: background 0.1s linear;
|
transition transform 0.15s ease
|
||||||
}
|
|
||||||
|
|
||||||
#switch-knob {
|
.value-true
|
||||||
height: height;
|
#switch-track
|
||||||
width: height;
|
background color-boolean
|
||||||
border-radius: border-radius;
|
#switch-knob
|
||||||
background: font-color;
|
transform translate3d( width - height, 0, 0 )
|
||||||
transition: transform 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-true {
|
.value-false
|
||||||
#switch-track {
|
+hover()
|
||||||
background: boolean-color;
|
#switch-knob
|
||||||
}
|
transform scale( 1.5 )
|
||||||
#switch-knob {
|
|
||||||
transform: translate3d( width - height, 0, 0 );
|
|
||||||
}
|
|
||||||
&:hover #switch-knob {
|
|
||||||
transform: translate3d( width - height, 0, 0 ) scale( 1.5 );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-false:hover #switch-knob {
|
.value-true
|
||||||
transform: scale( 1.5 );
|
+hover()
|
||||||
}
|
#switch-knob
|
||||||
|
transform translate3d( width - height, 0, 0 ) scale( 1.5 )
|
||||||
|
|
||||||
|
#text
|
||||||
|
margin-left padding
|
||||||
|
.value-true &
|
||||||
|
// color color-boolean
|
||||||
|
.value-false &
|
||||||
|
color light
|
||||||
|
|
||||||
#text {
|
|
||||||
margin-left: padding;
|
|
||||||
.value-true & {
|
|
||||||
// color: boolean-color;
|
|
||||||
}
|
|
||||||
.value-false & {
|
|
||||||
color: light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../shared/controller.css">
|
<link rel="stylesheet" href="../shared/input.css">
|
||||||
<link rel="stylesheet" href="controller-function.css">
|
<link rel="stylesheet" href="controller-function.css">
|
||||||
|
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
@import '../shared/shared';
|
@import '../shared/shared'
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../shared/controller.css">
|
<link rel="stylesheet" href="../shared/input.css">
|
||||||
<link rel="stylesheet" href="controller-number.css">
|
<link rel="stylesheet" href="controller-number.css">
|
||||||
|
|
||||||
<div id="container" class="transition slider-{{ slider }}" horizontal layout center>
|
<div id="container" class="transition slider-{{ slider }}" horizontal layout center>
|
||||||
|
|||||||
@ -1,103 +1,88 @@
|
|||||||
@import '../shared/shared';
|
@import '../shared/shared'
|
||||||
|
|
||||||
track-size = 1px;
|
track-size = 1px
|
||||||
fill-size = 1px;
|
fill-size = 1px
|
||||||
knob-size = 6px
|
knob-size = 0.6em
|
||||||
|
|
||||||
#container {
|
#container
|
||||||
height: 100%;
|
height 100%
|
||||||
}
|
|
||||||
|
|
||||||
#track-container {
|
#track-container
|
||||||
height: 100%;
|
height 100%
|
||||||
padding: 0 padding;
|
padding 0 padding
|
||||||
}
|
|
||||||
|
|
||||||
#track {
|
#track
|
||||||
width: 100%;
|
width 100%
|
||||||
height: track-size;
|
height track-size
|
||||||
border-radius: track-size;
|
border-radius track-size
|
||||||
display: inline-block;
|
display inline-block
|
||||||
position: relative;
|
position relative
|
||||||
background: light;
|
background light
|
||||||
}
|
|
||||||
|
|
||||||
#fill {
|
#fill
|
||||||
height: fill-size;
|
height fill-size
|
||||||
margin-top: ( ( track-size - fill-size ) / 2 );
|
margin-top ( ( track-size - fill-size ) / 2 )
|
||||||
margin-left: 1px;
|
margin-left 1px
|
||||||
border-radius: fill-size;
|
border-radius 100%
|
||||||
position: absolute;
|
position absolute
|
||||||
background: number-color;
|
background color-number
|
||||||
pointer-events: none;
|
pointer-events none
|
||||||
}
|
|
||||||
|
#knob
|
||||||
|
|
||||||
|
width knob-size
|
||||||
|
height knob-size
|
||||||
|
|
||||||
|
margin-left -( knob-size / 2 )
|
||||||
|
margin-top -( knob-size / 2 )
|
||||||
|
|
||||||
|
transition transform 0.1s ease
|
||||||
|
|
||||||
|
pointer-events none
|
||||||
|
position absolute
|
||||||
|
|
||||||
|
background-color color-number
|
||||||
|
border-radius 100%
|
||||||
|
|
||||||
|
#track-container
|
||||||
|
+hover()
|
||||||
|
#knob
|
||||||
|
transform scale( 2 )
|
||||||
|
|
||||||
|
#track-container:active #knob
|
||||||
|
transform scale( 1.5 )
|
||||||
|
|
||||||
|
// .transition #knob
|
||||||
|
// transition left 0.2s ease, transform 0.1s ease
|
||||||
|
//
|
||||||
|
|
||||||
|
// .transition #fill
|
||||||
|
// transition left 0.2s ease, right 0.2s ease, width 0.2s ease
|
||||||
|
//
|
||||||
|
|
||||||
|
input
|
||||||
|
|
||||||
|
color color-number
|
||||||
|
|
||||||
|
&::selection
|
||||||
|
background-color light
|
||||||
|
|
||||||
|
|
||||||
#knob {
|
.slider-true &
|
||||||
|
|
||||||
width: knob-size;
|
text-align center
|
||||||
height: knob-size;
|
width 26%
|
||||||
|
transition width 0.2s ease
|
||||||
|
padding 0
|
||||||
|
|
||||||
margin-left: -( knob-size / 2 );
|
+hover()
|
||||||
margin-top: -( knob-size / 2 );
|
width 35%
|
||||||
|
|
||||||
transition: transform 0.1s ease;
|
&:focus
|
||||||
|
width 50%
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
background-color: number-color;
|
|
||||||
border-radius: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#track-container:hover #knob {
|
|
||||||
transform: scale( 2 )
|
|
||||||
}
|
|
||||||
|
|
||||||
#track-container:active #knob {
|
|
||||||
transform: scale( 1.5 )
|
|
||||||
}
|
|
||||||
|
|
||||||
// .transition #knob {
|
|
||||||
// transition: left 0.2s ease, transform 0.1s ease;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .transition #fill {
|
|
||||||
// transition: left 0.2s ease, right 0.2s ease, width 0.2s ease;
|
|
||||||
// }
|
|
||||||
|
|
||||||
input {
|
|
||||||
|
|
||||||
color: number-color;
|
|
||||||
|
|
||||||
.slider-true & {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
width: 33%;
|
|
||||||
transition: width 0.2s ease;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
.slider-false &
|
||||||
width: 40%;
|
// border-bottom 1px solid color-number
|
||||||
}
|
padding-left padding
|
||||||
|
|
||||||
&:focus {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.slider-false & {
|
|
||||||
// border-bottom: 1px solid number-color;
|
|
||||||
padding-left: padding
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
input::selection {
|
|
||||||
background-color: light;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../shared/controller.css">
|
<link rel="stylesheet" href="../shared/input.css">
|
||||||
<link rel="stylesheet" href="controller-string.css">
|
<link rel="stylesheet" href="controller-string.css">
|
||||||
|
|
||||||
<input id="input" type="text" value="{{ value }}"
|
<input id="input" type="text" value="{{ value }}"
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
@import '../shared/shared';
|
@import '../shared/shared'
|
||||||
|
|
||||||
input
|
input
|
||||||
color: string-color;
|
color color-string
|
||||||
width: 100%;
|
padding-left padding
|
||||||
height: 100%;
|
|
||||||
padding-left: padding
|
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="gui-panel.css">
|
<link rel="stylesheet" href="gui-panel.css">
|
||||||
|
|
||||||
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }}">
|
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}">
|
||||||
|
|
||||||
<div id="controllers">
|
<div id="controllers">
|
||||||
<content></content>
|
<content></content>
|
||||||
|
|||||||
@ -5,6 +5,7 @@ Polymer('gui-panel', {
|
|||||||
|
|
||||||
docked: false,
|
docked: false,
|
||||||
open: true,
|
open: true,
|
||||||
|
touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch,
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
|
|
||||||
|
|||||||
@ -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 );
|
|
||||||
|
|
||||||
&.autoplace-true {
|
|
||||||
|
|
||||||
width: panel-width;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&.docked-false {
|
|
||||||
|
|
||||||
right: 20px;
|
|
||||||
|
|
||||||
&.open-true {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open-false {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&.docked-true {
|
|
||||||
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
#controllers {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open-true {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open-false {
|
|
||||||
transform: translate3d( panel-width, 0, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#closeButton {
|
// redefine touch because we are the host ...
|
||||||
|
|
||||||
|
touch( val = true )
|
||||||
|
{ '.touch-' + val } &
|
||||||
|
{ block }
|
||||||
|
|
||||||
|
|
||||||
|
#container
|
||||||
|
|
||||||
|
background color-panel
|
||||||
|
transition transform 0.4s cubic-bezier( 0, 0.8, 0, 1 )
|
||||||
|
|
||||||
|
&.autoplace-true
|
||||||
|
|
||||||
|
width panel-width
|
||||||
|
|
||||||
|
&.touch-true
|
||||||
|
width panel-width-touch
|
||||||
|
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
|
||||||
|
&.docked-false
|
||||||
|
right 20px
|
||||||
|
|
||||||
|
&.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
|
||||||
|
|
||||||
panel-font()
|
panel-font()
|
||||||
|
|
||||||
user-select: none;
|
user-select none
|
||||||
cursor: pointer;
|
cursor pointer
|
||||||
text-align: center;
|
text-align center
|
||||||
padding: padding * 0.75 padding;
|
padding padding * 0.75 padding
|
||||||
background: black;
|
background black
|
||||||
|
|
||||||
&:hover {
|
+hover()
|
||||||
background: panel-color;
|
background color-panel
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#closeButtonDocked {
|
#closeButtonDocked
|
||||||
|
|
||||||
position: absolute;
|
position absolute
|
||||||
right: panel-width;
|
right 100%
|
||||||
|
|
||||||
cursor: pointer;
|
cursor pointer
|
||||||
|
|
||||||
top: 0;
|
top 0
|
||||||
color: black;
|
color black
|
||||||
|
|
||||||
width: 60px;
|
width 60px
|
||||||
height: 60px;
|
height 60px
|
||||||
|
|
||||||
padding: 10px;
|
padding 10px
|
||||||
box-sizing: border-box;
|
box-sizing border-box
|
||||||
|
|
||||||
}
|
#closeButtonDockedInner
|
||||||
|
|
||||||
#closeButtonDockedInner {
|
border-radius 3px
|
||||||
|
background #fff
|
||||||
|
|
||||||
border-radius: 3px;
|
width 100%
|
||||||
background: #fff;
|
height 100%
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,18 +1,10 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
[ ] comment hover behavior
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
Polymer('gui-row', {
|
Polymer('gui-row', {
|
||||||
|
|
||||||
comment: null,
|
comment: null,
|
||||||
|
|
||||||
commentOpen: false,
|
commentOpen: false,
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
openComment: function() {
|
openComment: function() {
|
||||||
|
|||||||
@ -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()
|
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;
|
opacity 0
|
||||||
transition: background-color 0.2s linear;
|
transform translate3d( 0, 20px, 0 )
|
||||||
border-bottom: 1px solid lighter;
|
|
||||||
|
|
||||||
}
|
transition all 0.2s ease
|
||||||
|
|
||||||
#controller {
|
#comment.open-true
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#name {
|
opacity 1
|
||||||
|
transform translate3d( 0, 0, 0 )
|
||||||
|
+touch( false )
|
||||||
|
transition-delay 200ms
|
||||||
|
|
||||||
debug( magenta )
|
#commentInner
|
||||||
|
padding padding
|
||||||
|
|
||||||
// overflow: hidden;
|
.comment-true #nameInner
|
||||||
padding: 0 padding;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 40%;
|
|
||||||
cursor: default;
|
|
||||||
|
|
||||||
.comment-true & {
|
display inline-block
|
||||||
cursor: pointer;
|
border-bottom 1px dotted light
|
||||||
}
|
|
||||||
|
|
||||||
}
|
&:after
|
||||||
|
// content ' ?'
|
||||||
#nameInner {
|
// color light
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
17
elements/shared/input.styl
Normal file
17
elements/shared/input.styl
Normal file
@ -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
|
||||||
@ -1,39 +1,53 @@
|
|||||||
@import 'nib';
|
@import 'nib'
|
||||||
|
|
||||||
// config
|
/* sizes */
|
||||||
|
|
||||||
support-for-ie ?= true
|
font-size = 10px
|
||||||
use-debug = false
|
touch-scale = 1.25
|
||||||
|
|
||||||
debug( color )
|
|
||||||
if use-debug
|
|
||||||
border: 1px solid color
|
|
||||||
|
|
||||||
// constants
|
|
||||||
|
|
||||||
panel-width = 245px
|
panel-width = 245px
|
||||||
|
panel-width-touch = 300px
|
||||||
|
|
||||||
row-height = 29px
|
row-height = 2.9em
|
||||||
// row-height-touch = 44px
|
row-name-width = 38%
|
||||||
|
|
||||||
font-color = #ECEBE0
|
padding = 8px
|
||||||
panel-color = rgba( 30, 30, 30, 0.95 );
|
|
||||||
|
|
||||||
number-color = #25A0D8
|
/* colors */
|
||||||
boolean-color = #864694
|
|
||||||
string-color = #1EBD6E
|
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 )
|
light = rgba( 255, 255, 255, 0.25 )
|
||||||
lighter = rgba( 255, 255, 255, 0.05 )
|
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 )
|
ease = cubic-bezier( .25, .25, 0, 1 )
|
||||||
// common
|
|
||||||
|
|
||||||
panel-font( color = font-color )
|
/* mixins */
|
||||||
font: 10px 'Lucida Grande', sans-serif;
|
|
||||||
color: color;
|
panel-font( color = color-font )
|
||||||
if ( color == font-color )
|
font font-size 'Lucida Grande', sans-serif
|
||||||
-webkit-font-smoothing: antialiased;
|
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 }
|
||||||
Loading…
Reference in New Issue
Block a user