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
|
||||
|
||||
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
|
||||
|
||||
- [ ] folders
|
||||
@ -32,6 +17,21 @@ NEW FEATURES
|
||||
|
||||
- [ ] 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
|
||||
|
||||
- [ ] 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
|
||||
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 {
|
||||
margin: body-padding;
|
||||
line-height: 24px;
|
||||
}
|
||||
body
|
||||
margin body-padding
|
||||
line-height 24px
|
||||
|
||||
.disable-hover,
|
||||
.disable-hover * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.disable-hover *
|
||||
pointer-events none !important
|
||||
|
||||
h1, h2, h3, h4, p, pre {
|
||||
margin-bottom: unit;
|
||||
}
|
||||
h1, h2, h3, h4, p, pre
|
||||
margin-bottom unit
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
margin-bottom: unit * 2;
|
||||
line-height: 20px;
|
||||
}
|
||||
pre
|
||||
width 100%
|
||||
margin-bottom unit * 2
|
||||
line-height 20px
|
||||
|
||||
h1 {
|
||||
margin-bottom: unit * 3;
|
||||
}
|
||||
h1
|
||||
margin-bottom unit * 3
|
||||
|
||||
h3 {
|
||||
h3
|
||||
|
||||
padding: unit 0;
|
||||
margin-bottom: unit * 2;
|
||||
padding unit 0
|
||||
margin-bottom unit * 2
|
||||
|
||||
border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
|
||||
transition: border-color 0.2s linear, color 0.2s linear;
|
||||
border-bottom 1px solid rgba( 0, 0, 0, 0.2 )
|
||||
transition border-color 0.2s linear, color 0.2s linear
|
||||
|
||||
&.sticky {
|
||||
&.sticky
|
||||
|
||||
left: body-padding;
|
||||
right: body-padding + readme-margin;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
left body-padding
|
||||
right body-padding + readme-margin
|
||||
top 0
|
||||
background #fff
|
||||
|
||||
&.sticky-prev {
|
||||
color: #eee;
|
||||
border-bottom: 1px solid rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#readme {
|
||||
margin-right: readme-margin;
|
||||
}
|
||||
|
||||
gui-panel {
|
||||
position: fixed;
|
||||
width: panel-width;
|
||||
top: 0px;
|
||||
right: unit;
|
||||
z-index: 9999;
|
||||
transition: transform 0.4s cubic-bezier(.5,1,0,1);
|
||||
transform: translate3d( 0, -200px, 0 );
|
||||
&.sticky {
|
||||
transform: translate3d( 0, 0, 0 );
|
||||
transition-delay: 400ms;
|
||||
}
|
||||
}
|
||||
&.sticky-prev
|
||||
color #eee
|
||||
border-bottom 1px solid rgba( 0, 0, 0, 0 )
|
||||
|
||||
|
||||
|
||||
|
||||
#readme
|
||||
margin-right readme-margin
|
||||
|
||||
gui-panel
|
||||
position fixed
|
||||
width panel-width
|
||||
top 0px
|
||||
right unit
|
||||
z-index 9999
|
||||
transition transform 0.4s cubic-bezier(.5,1,0,1)
|
||||
transform translate3d( 0, -200px, 0 )
|
||||
&.sticky
|
||||
transform translate3d( 0, 0, 0 )
|
||||
transition-delay 400ms
|
||||
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/controller.css">
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-boolean.css">
|
||||
|
||||
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
|
||||
|
||||
@ -1,54 +1,48 @@
|
||||
@import '../shared';
|
||||
@import '../shared/shared'
|
||||
|
||||
height = 8px;
|
||||
width = round( height * 2.5 );
|
||||
border-radius = height;
|
||||
height = 0.8em
|
||||
width = round( height * 2.5 )
|
||||
border-radius = height
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
padding-left: padding
|
||||
#container
|
||||
height 100%
|
||||
cursor pointer
|
||||
padding-left padding
|
||||
|
||||
}
|
||||
#switch-track
|
||||
width width
|
||||
height height
|
||||
background light
|
||||
border-radius 999px
|
||||
transition background 0.1s linear
|
||||
|
||||
#switch-track {
|
||||
width: width;
|
||||
height: height;
|
||||
background: light;
|
||||
border-radius: border-radius;
|
||||
transition: background 0.1s linear;
|
||||
}
|
||||
#switch-knob
|
||||
height height
|
||||
width height
|
||||
border-radius 100%
|
||||
background color-font
|
||||
transition transform 0.15s ease
|
||||
|
||||
#switch-knob {
|
||||
height: height;
|
||||
width: height;
|
||||
border-radius: border-radius;
|
||||
background: font-color;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.value-true
|
||||
#switch-track
|
||||
background color-boolean
|
||||
#switch-knob
|
||||
transform translate3d( width - height, 0, 0 )
|
||||
|
||||
.value-true {
|
||||
#switch-track {
|
||||
background: boolean-color;
|
||||
}
|
||||
#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
|
||||
transform scale( 1.5 )
|
||||
|
||||
.value-false:hover #switch-knob {
|
||||
transform: scale( 1.5 );
|
||||
}
|
||||
.value-true
|
||||
+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>
|
||||
|
||||
<link rel="stylesheet" href="../shared/controller.css">
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-function.css">
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
@ -1 +1 @@
|
||||
@import '../shared/shared';
|
||||
@import '../shared/shared'
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<template>
|
||||
|
||||
<link rel="stylesheet" href="../shared/controller.css">
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-number.css">
|
||||
|
||||
<div id="container" class="transition slider-{{ slider }}" horizontal layout center>
|
||||
|
||||
@ -1,103 +1,88 @@
|
||||
@import '../shared/shared';
|
||||
@import '../shared/shared'
|
||||
|
||||
track-size = 1px;
|
||||
fill-size = 1px;
|
||||
knob-size = 6px
|
||||
track-size = 1px
|
||||
fill-size = 1px
|
||||
knob-size = 0.6em
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
}
|
||||
#container
|
||||
height 100%
|
||||
|
||||
#track-container {
|
||||
height: 100%;
|
||||
padding: 0 padding;
|
||||
}
|
||||
#track-container
|
||||
height 100%
|
||||
padding 0 padding
|
||||
|
||||
#track {
|
||||
width: 100%;
|
||||
height: track-size;
|
||||
border-radius: track-size;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: light;
|
||||
}
|
||||
#track
|
||||
width 100%
|
||||
height track-size
|
||||
border-radius track-size
|
||||
display inline-block
|
||||
position relative
|
||||
background light
|
||||
|
||||
#fill {
|
||||
height: fill-size;
|
||||
margin-top: ( ( track-size - fill-size ) / 2 );
|
||||
margin-left: 1px;
|
||||
border-radius: fill-size;
|
||||
position: absolute;
|
||||
background: number-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
#fill
|
||||
height fill-size
|
||||
margin-top ( ( track-size - fill-size ) / 2 )
|
||||
margin-left 1px
|
||||
border-radius 100%
|
||||
position absolute
|
||||
background color-number
|
||||
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;
|
||||
height: knob-size;
|
||||
text-align center
|
||||
width 26%
|
||||
transition width 0.2s ease
|
||||
padding 0
|
||||
|
||||
margin-left: -( knob-size / 2 );
|
||||
margin-top: -( knob-size / 2 );
|
||||
+hover()
|
||||
width 35%
|
||||
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
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;
|
||||
&:focus
|
||||
width 50%
|
||||
|
||||
|
||||
&:hover {
|
||||
width: 40%;
|
||||
}
|
||||
.slider-false &
|
||||
// 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>
|
||||
|
||||
<link rel="stylesheet" href="../shared/controller.css">
|
||||
<link rel="stylesheet" href="../shared/input.css">
|
||||
<link rel="stylesheet" href="controller-string.css">
|
||||
|
||||
<input id="input" type="text" value="{{ value }}"
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
@import '../shared/shared';
|
||||
@import '../shared/shared'
|
||||
|
||||
input
|
||||
color: string-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: padding
|
||||
color color-string
|
||||
padding-left padding
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<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">
|
||||
<content></content>
|
||||
|
||||
@ -5,6 +5,7 @@ Polymer('gui-panel', {
|
||||
|
||||
docked: false,
|
||||
open: true,
|
||||
touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch,
|
||||
|
||||
ready: function() {
|
||||
|
||||
|
||||
@ -1,98 +1,84 @@
|
||||
@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 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@import '../shared/shared'
|
||||
|
||||
|
||||
#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()
|
||||
|
||||
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;
|
||||
}
|
||||
+hover()
|
||||
background color-panel
|
||||
|
||||
}
|
||||
|
||||
#closeButtonDocked {
|
||||
#closeButtonDocked
|
||||
|
||||
position: absolute;
|
||||
right: panel-width;
|
||||
position absolute
|
||||
right 100%
|
||||
|
||||
cursor: pointer;
|
||||
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%;
|
||||
|
||||
}
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
/*
|
||||
|
||||
[ ] comment hover behavior
|
||||
|
||||
*/
|
||||
|
||||
Polymer('gui-row', {
|
||||
|
||||
comment: null,
|
||||
|
||||
commentOpen: false,
|
||||
|
||||
ready: 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()
|
||||
|
||||
}
|
||||
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
|
||||
|
||||
#name {
|
||||
opacity 1
|
||||
transform translate3d( 0, 0, 0 )
|
||||
+touch( false )
|
||||
transition-delay 200ms
|
||||
|
||||
debug( magenta )
|
||||
#commentInner
|
||||
padding padding
|
||||
|
||||
// overflow: hidden;
|
||||
padding: 0 padding;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
cursor: default;
|
||||
.comment-true #nameInner
|
||||
|
||||
.comment-true & {
|
||||
cursor: pointer;
|
||||
}
|
||||
display inline-block
|
||||
border-bottom 1px dotted light
|
||||
|
||||
}
|
||||
|
||||
#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;
|
||||
&:after
|
||||
// content ' ?'
|
||||
// color light
|
||||
|
||||
|
||||
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
|
||||
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 }
|
||||
Loading…
Reference in New Issue
Block a user