From 29e2f5b99e486726c3616f2ec83aaa9f5749bb40 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Wed, 10 Sep 2014 15:40:55 -0700 Subject: [PATCH] add build css files --- .gitignore | 1 - build/gui.html | 17 +-- build/gui.js | 17 +-- docs/style.css | 79 ++++++++++++ elements/dat-gui-boolean/dat-gui-boolean.css | 57 +++++++++ .../dat-gui-function/dat-gui-function.css | 0 elements/dat-gui-number/dat-gui-number.css | 81 +++++++++++++ elements/dat-gui-option/dat-gui-option.css | 8 ++ elements/dat-gui-string/dat-gui-string.css | 4 + elements/dat-gui/dat-gui.css | 112 ++++++++++++++++++ elements/gui-button/gui-button.css | 95 +++++++++++++++ elements/gui-row/gui-row.css | 102 ++++++++++++++++ elements/shared.css | 0 elements/shared/input.css | 31 +++++ elements/shared/shared.css | 4 + 15 files changed, 591 insertions(+), 17 deletions(-) create mode 100644 docs/style.css create mode 100644 elements/dat-gui-boolean/dat-gui-boolean.css create mode 100644 elements/dat-gui-function/dat-gui-function.css create mode 100644 elements/dat-gui-number/dat-gui-number.css create mode 100644 elements/dat-gui-option/dat-gui-option.css create mode 100644 elements/dat-gui-string/dat-gui-string.css create mode 100644 elements/dat-gui/dat-gui.css create mode 100644 elements/gui-button/gui-button.css create mode 100644 elements/gui-row/gui-row.css create mode 100644 elements/shared.css create mode 100644 elements/shared/input.css create mode 100644 elements/shared/shared.css diff --git a/.gitignore b/.gitignore index 2ad2b67..3c3629e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ node_modules -*.css \ No newline at end of file diff --git a/build/gui.html b/build/gui.html index e000965..eaffc09 100755 --- a/build/gui.html +++ b/build/gui.html @@ -1,12 +1,13 @@ - + - + diff --git a/build/gui.js b/build/gui.js index c7ab2ed..86a807f 100755 --- a/build/gui.js +++ b/build/gui.js @@ -1,12 +1,13 @@ -document.write(['', +document.write(['', '', -'', +'', '', '', '', diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..0657c5a --- /dev/null +++ b/docs/style.css @@ -0,0 +1,79 @@ +* { + margin: 0; +} +body { + margin: 36px; + line-height: 24px; +} +.disable-hover, +.disable-hover * { + pointer-events: none !important; +} +h1, +h2, +h3, +h4, +p, +pre { + margin-bottom: 18px; +} +pre { + width: 100%; + margin-bottom: 36px; + line-height: 20px; +} +h1 { + margin-bottom: 54px; +} +h3 { + padding: 18px 0; + margin-bottom: 36px; + border-bottom: 1px solid rgba(0,0,0,0.2); + -webkit-transition: border-color 0.2s linear, color 0.2s linear; + -moz-transition: border-color 0.2s linear, color 0.2s linear; + -o-transition: border-color 0.2s linear, color 0.2s linear; + -ms-transition: border-color 0.2s linear, color 0.2s linear; + transition: border-color 0.2s linear, color 0.2s linear; +} +h3.sticky { + left: 36px; + right: 317px; + top: 0; + background: #fff; +} +h3.sticky.sticky-prev { + color: #eee; + border-bottom: 1px solid rgba(0,0,0,0); +} +#readme { + margin-right: 281px; +} +dat-gui { + position: fixed; + width: 245px; + top: 0px; + right: 18px; + z-index: 9999; + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -moz-transition: -moz-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -o-transition: -o-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -ms-transition: -ms-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + transition: transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -webkit-transform: translate3d(0, -200px, 0); + -moz-transform: translate3d(0, -200px, 0); + -o-transform: translate3d(0, -200px, 0); + -ms-transform: translate3d(0, -200px, 0); + transform: translate3d(0, -200px, 0); +} +dat-gui.sticky { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-delay: 400ms; + -moz-transition-delay: 400ms; + -o-transition-delay: 400ms; + -ms-transition-delay: 400ms; + transition-delay: 400ms; +} diff --git a/elements/dat-gui-boolean/dat-gui-boolean.css b/elements/dat-gui-boolean/dat-gui-boolean.css new file mode 100644 index 0000000..5abaf07 --- /dev/null +++ b/elements/dat-gui-boolean/dat-gui-boolean.css @@ -0,0 +1,57 @@ +#container { + height: 100%; + cursor: pointer; + padding-left: 8px; +} +#switch-track { + width: 2em; + height: 0.8em; + background: rgba(255,255,255,0.25); + border-radius: 999px; + -webkit-transition: background 0.1s linear; + -moz-transition: background 0.1s linear; + -o-transition: background 0.1s linear; + -ms-transition: background 0.1s linear; + transition: background 0.1s linear; +} +#switch-knob { + height: 0.8em; + width: 0.8em; + border-radius: 100%; + background: #ecebe0; + -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: -moz-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: -o-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: -ms-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + transition: transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); +} +.value-true #switch-track { + background: #864694; +} +.value-true #switch-knob { + -webkit-transform: translate3d(1.2em, 0, 0); + -moz-transform: translate3d(1.2em, 0, 0); + -o-transform: translate3d(1.2em, 0, 0); + -ms-transform: translate3d(1.2em, 0, 0); + transform: translate3d(1.2em, 0, 0); +} +:host-context(.touch-false) .value-false:hover #switch-knob { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -o-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); +} +:host-context(.touch-false) .value-true:hover #switch-knob { + -webkit-transform: translate3d(1.2em, 0, 0) scale(1.5); + -moz-transform: translate3d(1.2em, 0, 0) scale(1.5); + -o-transform: translate3d(1.2em, 0, 0) scale(1.5); + -ms-transform: translate3d(1.2em, 0, 0) scale(1.5); + transform: translate3d(1.2em, 0, 0) scale(1.5); +} +#text { + margin-left: 8px; +} +.value-false #text { + color: rgba(255,255,255,0.25); +} diff --git a/elements/dat-gui-function/dat-gui-function.css b/elements/dat-gui-function/dat-gui-function.css new file mode 100644 index 0000000..e69de29 diff --git a/elements/dat-gui-number/dat-gui-number.css b/elements/dat-gui-number/dat-gui-number.css new file mode 100644 index 0000000..c323ff3 --- /dev/null +++ b/elements/dat-gui-number/dat-gui-number.css @@ -0,0 +1,81 @@ +#container { + height: 100%; +} +#track-container { + height: 100%; + padding: 0 8px; +} +#track { + width: 100%; + height: 1px; + -webkit-border-radius: 1px; + border-radius: 1px; + display: inline-block; + position: relative; + background: rgba(255,255,255,0.25); +} +#fill { + height: 1px; + margin-top: 0px; + margin-left: 1px; + -webkit-border-radius: 100%; + border-radius: 100%; + position: absolute; + background: #25a0d8; + pointer-events: none; +} +#knob { + width: 0.6em; + height: 0.6em; + margin-left: -0.3em; + margin-top: -0.3em; + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: -o-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: -ms-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + transition: transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + pointer-events: none; + position: absolute; + background-color: #25a0d8; + -webkit-border-radius: 100%; + border-radius: 100%; +} +:host-context(.touch-false) #track-container:hover #knob { + -webkit-transform: scale(2); + -moz-transform: scale(2); + -o-transform: scale(2); + -ms-transform: scale(2); + transform: scale(2); +} +#track-container:active #knob { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -o-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); +} +input { + color: #25a0d8; +} +input::selection { + background-color: rgba(255,255,255,0.25); +} +.slider-true input { + text-align: center; + width: 26%; + -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + padding: 0; +} +:host-context(.touch-false) .slider-true input:hover { + width: 35%; +} +.slider-true input:focus { + width: 50%; +} +.slider-false input { + padding-left: 8px; +} diff --git a/elements/dat-gui-option/dat-gui-option.css b/elements/dat-gui-option/dat-gui-option.css new file mode 100644 index 0000000..3cc1d9a --- /dev/null +++ b/elements/dat-gui-option/dat-gui-option.css @@ -0,0 +1,8 @@ +#container { + height: 100%; + cursor: pointer; + padding-left: 8px; +} +select { + outline: none; +} diff --git a/elements/dat-gui-string/dat-gui-string.css b/elements/dat-gui-string/dat-gui-string.css new file mode 100644 index 0000000..0bdc77b --- /dev/null +++ b/elements/dat-gui-string/dat-gui-string.css @@ -0,0 +1,4 @@ +input { + color: #1ebd6e; + padding-left: 8px; +} diff --git a/elements/dat-gui/dat-gui.css b/elements/dat-gui/dat-gui.css new file mode 100644 index 0000000..6cf2342 --- /dev/null +++ b/elements/dat-gui/dat-gui.css @@ -0,0 +1,112 @@ +#panel { + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -o-transition: -o-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -ms-transition: -ms-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + transition: transform 0.4s cubic-bezier(0, 0.8, 0, 1); + background: #282828; +} +.autoplace-true #panel { + width: 245px; + position: fixed; + top: 0; +} +.autoplace-true.touch-true #panel { + width: 320px; +} +.docked-false #panel { + right: 20px; +} +.docked-true #panel { + right: 0; + bottom: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.docked-true.open-false #panel { + -webkit-transform: translate3d(245px, 0, 0); + -moz-transform: translate3d(245px, 0, 0); + -o-transform: translate3d(245px, 0, 0); + -ms-transform: translate3d(245px, 0, 0); + transform: translate3d(245px, 0, 0); + overflow: visible; +} +.docked-true.open-false.touch-true #panel { + -webkit-transform: translate3d(320px, 0, 0); + -moz-transform: translate3d(320px, 0, 0); + -o-transform: translate3d(320px, 0, 0); + -ms-transform: translate3d(320px, 0, 0); + transform: translate3d(320px, 0, 0); +} +#controllers { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; +} +.touch-true #controllers { + font-size: 13.5px; +} +.docked-true #controllers { + position: absolute; + width: 100%; + top: 4.35em; +} +#closeButton { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + text-align: center; + padding: 6px 8px; +} +.touch-true #closeButton { + font-size: 13.5px; +} +gui-button { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + background: #282828; + height: 2.9em; + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -o-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -ms-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); +} +.touch-true gui-button { + font-size: 13.5px; +} +.docked-true gui-button { + top: 0; + right: 0; + width: 4.35em; + height: 4.35em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: #282828; +} +.docked-true.open-false gui-button { + -webkit-transform: translate3d(-245px, 0, 0); + -moz-transform: translate3d(-245px, 0, 0); + -o-transform: translate3d(-245px, 0, 0); + -ms-transform: translate3d(-245px, 0, 0); + transform: translate3d(-245px, 0, 0); +} +.docked-true.open-false.touch-true gui-button { + -webkit-transform: translate3d(-320px, 0, 0); + -moz-transform: translate3d(-320px, 0, 0); + -o-transform: translate3d(-320px, 0, 0); + -ms-transform: translate3d(-320px, 0, 0); + transform: translate3d(-320px, 0, 0); +} +.docked-false gui-button { + right: 0; + left: 0; +} diff --git a/elements/gui-button/gui-button.css b/elements/gui-button/gui-button.css new file mode 100644 index 0000000..50a681a --- /dev/null +++ b/elements/gui-button/gui-button.css @@ -0,0 +1,95 @@ +#container { + height: 100%; + cursor: pointer; +} +#button { + width: 21px; + height: 21px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0; + padding: 4px 0px; + position: relative; + background: transparent; + margin: 0 auto; +} +#button.open-true .one { + -webkit-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -moz-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -o-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -ms-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + width: 11px; +} +#button.open-true .three { + -webkit-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -moz-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -o-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -ms-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + width: 11px; +} +#button.open-true .two { + width: 0; +} +#button.open-true .slider:before { + width: 0; + height: 0; +} +.slider { + width: 21px; + border-radius: 2px; + height: 1px; + background: #ecebe0; + position: absolute; + -webkit-transform-origin: 0.5px 0.5px; + -moz-transform-origin: 0.5px 0.5px; + -o-transform-origin: 0.5px 0.5px; + -ms-transform-origin: 0.5px 0.5px; + transform-origin: 0.5px 0.5px; + -webkit-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -moz-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -o-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -ms-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); +} +.slider:before { + width: 5px; + height: 5px; + margin-top: -2px; + margin-left: -2.5px; + border-radius: 5px; + background: #ecebe0; + display: inline-block; + content: ' '; + position: absolute; + left: 70%; + -webkit-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -moz-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -o-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -ms-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; +} +.slider.two { + margin-top: 6px; +} +.slider.two:before { + left: 30%; + -webkit-transition-delay: 0ms, 200ms, 200ms; + -moz-transition-delay: 0ms, 200ms, 200ms; + -o-transition-delay: 0ms, 200ms, 200ms; + -ms-transition-delay: 0ms, 200ms, 200ms; + transition-delay: 0ms, 200ms, 200ms; +} +.slider.three { + margin-top: 12px; +} +.slider.three:before { + left: 70%; + -webkit-transition-delay: 0ms, 200ms, 200ms; + -moz-transition-delay: 0ms, 200ms, 200ms; + -o-transition-delay: 0ms, 200ms, 200ms; + -ms-transition-delay: 0ms, 200ms, 200ms; + transition-delay: 0ms, 200ms, 200ms; +} diff --git a/elements/gui-row/gui-row.css b/elements/gui-row/gui-row.css new file mode 100644 index 0000000..44f4e4e --- /dev/null +++ b/elements/gui-row/gui-row.css @@ -0,0 +1,102 @@ +#row { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + height: 2.9em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: background-color 0.2s linear; + -moz-transition: background-color 0.2s linear; + -o-transition: background-color 0.2s linear; + -ms-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + border-bottom: 1px solid rgba(255,255,255,0.05); +} +:host-context(.touch-true) #row { + font-size: 13.5px; +} +#controller { + height: 100%; +} +#name { + padding: 0 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 38%; + cursor: default; +} +.comment-true #name { + cursor: pointer; +} +:host-context(.touch-true) #name { + font-size: 11px; + width: 30%; +} +#nameInner { + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +#comment { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + line-height: 1.6em; + background: #e0cf99; + color: #333; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + -webkit-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + position: absolute; + z-index: 999; + pointer-events: none; + -webkit-transform: translate3d(0, 20px, 0); + -moz-transform: translate3d(0, 20px, 0); + -o-transform: translate3d(0, 20px, 0); + -ms-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); +} +:host-context(.touch-true) #comment { + font-size: 13.5px; +} +#comment.open-true { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +:host-context(.touch-false) #comment.open-true { + -webkit-transition-delay: 200ms; + -moz-transition-delay: 200ms; + -o-transition-delay: 200ms; + -ms-transition-delay: 200ms; + transition-delay: 200ms; +} +#commentInner { + padding: 8px; +} +.comment-true #nameInner { + display: inline-block; + border-bottom: 1px dotted rgba(255,255,255,0.25); +} diff --git a/elements/shared.css b/elements/shared.css new file mode 100644 index 0000000..e69de29 diff --git a/elements/shared/input.css b/elements/shared/input.css new file mode 100644 index 0000000..16b056a --- /dev/null +++ b/elements/shared/input.css @@ -0,0 +1,31 @@ +input { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + height: 100%; + width: 100%; + display: inline-block; + background-color: transparent; + border: 0; + -webkit-border-radius: 0; + border-radius: 0; + padding: 0; + outline: none; + -webkit-transition: background-color 0.15s linear; + -moz-transition: background-color 0.15s linear; + -o-transition: background-color 0.15s linear; + -ms-transition: background-color 0.15s linear; + transition: background-color 0.15s linear; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +:host-context(.touch-true) input { + font-size: 13.5px; +} +input:focus { + background: rgba(255,255,255,0.05); +} +:host-context(.touch-false) input:hover { + background: rgba(255,255,255,0.05); +} diff --git a/elements/shared/shared.css b/elements/shared/shared.css new file mode 100644 index 0000000..e3db1a2 --- /dev/null +++ b/elements/shared/shared.css @@ -0,0 +1,4 @@ +/* sizes */ +/* colors */ +/* other */ +/* mixins */