diff options
Diffstat (limited to 'preact/demo/style.scss')
-rw-r--r-- | preact/demo/style.scss | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/preact/demo/style.scss b/preact/demo/style.scss new file mode 100644 index 0000000..8466bbd --- /dev/null +++ b/preact/demo/style.scss @@ -0,0 +1,149 @@ +html, body { + height: 100%; + margin: 0; + background: #eee; + font: 400 16px/1.3 'Helvetica Neue',helvetica,sans-serif; + text-rendering: optimizeSpeed; + color: #444; +} + +.app { + display: block; + flex-direction: column; + height: 100%; + + > header { + flex: 0; + background: #f9f9f9; + box-shadow: inset 0 -.5px 0 0 rgba(0,0,0,0.2), 0 .5px 0 0 rgba(255,255,255,0.6); + + nav { + display: inline-block; + padding: 4px 7px; + + a { + display: inline-block; + margin: 2px; + padding: 4px 10px; + background-color: rgba(255,255,255,0); + border-radius: 1em; + color: #6b1d8f; + text-decoration: none; + // transition: all 250ms ease; + transition: all 250ms cubic-bezier(.2,0,.4,2); + &:hover { + background-color: rgba(255,255,255,1); + box-shadow: 0 0 0 2px #6b1d8f; + } + &.active { + background-color: #6b1d8f; + color: white; + } + } + } + } + + > main { + flex: 1; + padding: 10px; + } +} + + +h1 { + margin: 0; + color: #6b1d8f; + font-weight: 300; + font-size: 250%; +} + + +input, textarea { + box-sizing: border-box; + margin: 1px; + padding: .25em .5em; + background: #fff; + border: 1px solid #999; + border-radius: 3px; + font: inherit; + color: #000; + outline: none; + + &:focus { + border-color: #6b1d8f; + } +} + + +button, input[type="submit"], input[type="reset"], input[type="button"] { + box-sizing: border-box; + margin: 1px; + padding: .25em .8em; + background: #6b1d8f; + border: 1px solid #6b1d8f; + // border: none; + border-radius: 1.5em; + font: inherit; + color: white; + outline: none; + cursor: pointer; +} + + +.cursor { + position: absolute; + left: 0; + top: 0; + width: 8px; + height: 8px; + margin: -5px 0 0 -5px; + border: 2px solid #F00; + border-radius: 50%; + transform-origin: 50% 50%; + pointer-events: none; + overflow: hidden; + font-size: 9px; + line-height: 25px; + text-indent: 15px; + white-space: nowrap; + + &:not(.label) { + contain: strict; + } + + &.label { + overflow: visible; + } + + // &.big { + // transform: scale(2); + // // width: 24px; + // // height: 24px; + // // margin: -13px 0 0 -13px; + // } + + .label { + position: absolute; + left: 0; + top: 0; + //transform: translateZ(0); + // z-index: 10; + } +} + + +.animation-picker { + position: fixed; + display: inline-block; + right: 0; + top: 0; + padding: 10px; + background: #000; + color: #BBB; + z-index: 1000; + + select { + font-size: 100%; + margin-left: 5px; + } +} |