From b65b974ad06b154d758ed09eb26d7a5bd6afe5ca Mon Sep 17 00:00:00 2001 From: Lukas Bachschwell Date: Mon, 13 Nov 2017 17:22:56 +0100 Subject: [PATCH] Adding funny colors --- examples/gui/data/css/style.css | 908 ++++++++++++++++--------------- examples/gui/data/js/controls.js | 8 +- 2 files changed, 473 insertions(+), 443 deletions(-) diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css index 6157ca3..fb47e3e 100644 --- a/examples/gui/data/css/style.css +++ b/examples/gui/data/css/style.css @@ -1,24 +1,64 @@ - body{ - background-color: #F4F3EF; + body { + font-family: 'Open Sans', sans-serif; + background-color: #ecf0f1; } + .container { position: relative; width: 79%; margin: 20px; - box-sizing: border-box; } - .column, - .columns { - width: 100%; - float: left; } + box-sizing: border-box; + } - .card{ + .column, .columns { + width: 100%; + float: left; + } + + .card { margin-top: 2%; border-radius: 6px; - box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); + box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5); padding-left: 20px; padding-right: 20px; margin-bottom: 10px; min-width: 150px; + color: #fff; + } + + .turquoise { + background: #1abc9c; + border-bottom: #16a085 3px solid; + } + + .emerald { + background: #2ecc71; + border-bottom: #27ae60 3px solid; + } + + .peterriver { + background: #3498db; + border-bottom: #2980b9 3px solid; + } + + .wetasphalt { + background: #34495e; + border-bottom: #2c3e50 3px solid; + } + + .sunflower { + background: #f1c40f; + border-bottom: #E6BB0F 3px solid; + } + + .carrot { + background: #e67e22; + border-bottom: #d35400 3px solid; + } + + .alizarin { + background: #e74c3c; + border-bottom: #c0392b 3px solid; } .label { @@ -37,521 +77,511 @@ position: relative; top: -0.15em; background-color: #999999; - margin-bottom: 10px;} + margin-bottom: 10px; + } - .label.color-blue { background-color: #6f9ad1; } - .label.color-red { background-color: #d37c7c; } - .label.color-green { background-color: #9bc268; } - .label.color-orange { background-color: #dea154; } - .label.color-yellow { background-color: #e9d641; } - .label.color-purple { background-color: #9f83d1; } + .label.color-blue { + background-color: #6f9ad1; + } + + .label.color-red { + background-color: #d37c7c; + } + + .label.color-green { + background-color: #9bc268; + } + + .label.color-orange { + background-color: #dea154; + } + + .label.color-yellow { + background-color: #e9d641; + } + + .label.color-purple { + background-color: #9f83d1; + } /* For devices larger than 400px */ + @media (min-width: 400px) { .container { - width: 84%;} - + width: 84%; + } } /* For devices larger than 550px */ + @media (min-width: 630px) { .container { - width: 98%; } - .column, - .columns { - margin-right: 2%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - + width: 98%; + } + .column, .columns { + margin-right: 2%; + } + .column:first-child, .columns:first-child { + margin-left: 0; + } + .one.column, .one.columns { + width: 4.66666666667%; + } + .two.columns { + width: 13.3333333333%; + } + .three.columns { + width: 22%; + } + .four.columns { + width: 30.6666666667%; + } + .five.columns { + width: 39.3333333333%; + } + .six.columns { + width: 48%; + } + .seven.columns { + width: 56.6666666667%; + } + .eight.columns { + width: 65.3333333333%; + } + .nine.columns { + width: 74.0%; + } + .ten.columns { + width: 82.6666666667%; + } + .eleven.columns { + width: 91.3333333333%; + } + .twelve.columns { + width: 100%; + margin-left: 0; + } + .one-third.column { + width: 30.6666666667%; + } + .two-thirds.column { + width: 65.3333333333%; + } + .one-half.column { + width: 48%; + } /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - + .offset-by-one.column, .offset-by-one.columns { + margin-left: 8.66666666667%; + } + .offset-by-two.column, .offset-by-two.columns { + margin-left: 17.3333333333%; + } + .offset-by-three.column, .offset-by-three.columns { + margin-left: 26%; + } + .offset-by-four.column, .offset-by-four.columns { + margin-left: 34.6666666667%; + } + .offset-by-five.column, .offset-by-five.columns { + margin-left: 43.3333333333%; + } + .offset-by-six.column, .offset-by-six.columns { + margin-left: 52%; + } + .offset-by-seven.column, .offset-by-seven.columns { + margin-left: 60.6666666667%; + } + .offset-by-eight.column, .offset-by-eight.columns { + margin-left: 69.3333333333%; + } + .offset-by-nine.column, .offset-by-nine.columns { + margin-left: 78.0%; + } + .offset-by-ten.column, .offset-by-ten.columns { + margin-left: 86.6666666667%; + } + .offset-by-eleven.column, .offset-by-eleven.columns { + margin-left: 95.3333333333%; + } + .offset-by-one-third.column, .offset-by-one-third.columns { + margin-left: 34.6666666667%; + } + .offset-by-two-thirds.column, .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; + } + .offset-by-one-half.column, .offset-by-one-half.columns { + margin-left: 52%; + } } - /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ - /* NOTE - html is set to 62.5% so that all the REM measurements throughout Skeleton - are based on 10px sizing. So basically 1.5rem = 15px :) */ + html { - font-size: 62.5%; } + font-size: 62.5%; + } + body { margin: 0; - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.0; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - + color: #222; + } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ + h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; - font-weight: 300; } - h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} - h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } - h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } - h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } - h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } - h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + font-weight: 300; + } + + h1 { + font-size: 4.0rem; + line-height: 1.2; + letter-spacing: -.1rem; + } + + h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; + } + + h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; + } + + h4 { + font-size: 2.4rem; + line-height: 1.35; + letter-spacing: -.08rem; + } + + h5 { + font-size: 1.8rem; + line-height: 1.5; + letter-spacing: -.05rem; + } + + h6 { + font-size: 1.5rem; + line-height: 1.6; + letter-spacing: 0; + } /* Larger than phablet */ + @media (min-width: 630px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.0rem; } - h6 { font-size: 1.5rem; } + h1 { + font-size: 5.0rem; + } + h2 { + font-size: 4.2rem; + } + h3 { + font-size: 3.6rem; + } + h4 { + font-size: 3.0rem; + } + h5 { + font-size: 2.0rem; + } + h6 { + font-size: 1.5rem; + } } p { - margin-top: 0; } - + margin-top: 0; + } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ - a { - color: #1EAEDB; } - a:hover { - color: #0FA0CE; } + a { + color: #1EAEDB; + } + + a:hover { + color: #0FA0CE; + } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ - .button, - button, - input[type="submit"], - input[type="reset"], - input[type="button"] { + + button { display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - border: 1px solid #bbb; - cursor: pointer; - box-sizing: border-box; } - .button:hover, - button:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - .button:focus, - button:focus, - input[type="submit"]:focus, - input[type="reset"]:focus, - input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } - .button.button-primary, - button.button-primary, - input[type="submit"].button-primary, - input[type="reset"].button-primary, - input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } - .button.button-primary:hover, - button.button-primary:hover, - input[type="submit"].button-primary:hover, - input[type="reset"].button-primary:hover, - input[type="button"].button-primary:hover, - .button.button-primary:focus, - button.button-primary:focus, - input[type="submit"].button-primary:focus, - input[type="reset"].button-primary:focus, - input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } - - /* Forms - –––––––––––––––––––––––––––––––––––––––––––––––––– */ - input[type="email"], - input[type="number"], - input[type="search"], - input[type="text"], - input[type="tel"], - input[type="url"], - input[type="password"], - textarea, - select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } - /* Removes awkward default styles on some inputs for iOS */ - input[type="email"], - input[type="number"], - input[type="search"], - input[type="text"], - input[type="tel"], - input[type="url"], - input[type="password"], - textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } - input[type="email"]:focus, - input[type="number"]:focus, - input[type="search"]:focus, - input[type="text"]:focus, - input[type="tel"]:focus, - input[type="url"]:focus, - input[type="password"]:focus, - textarea:focus, - select:focus { - border: 1px solid #33C3F0; - outline: 0; } - label, - legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } - fieldset { - padding: 0; - border-width: 0; } - input[type="checkbox"], - input[type="radio"] { - display: inline; } - label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - #mainHeader{ - display:inline-block; + padding: 10px; + border-radius: 3px; + color: #fff; } - #conStatus{ - position:inherit; + + #mainHeader { + display: inline-block; + } + + #conStatus { + position: inherit; font-size: 0.75em; } - /* Code - –––––––––––––––––––––––––––––––––––––––––––––––––– */ - code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } - pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ - th, - td { + + th, td { padding: 12px 15px; text-align: left; - border-bottom: 1px solid #E1E1E1; } - th:first-child, - td:first-child { - padding-left: 0; } - th:last-child, - td:last-child { - padding-right: 0; } + border-bottom: 1px solid #E1E1E1; + } + th:first-child, td:first-child { + padding-left: 0; + } + + th:last-child, td:last-child { + padding-right: 0; + } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ - button, - .button { - margin-bottom: 1rem; } - input, - textarea, - select, - fieldset { - margin-bottom: 1.5rem; } - pre, - blockquote, - dl, - figure, - table, - p, - ul, - ol, - form { - margin-bottom: 2.5rem; } + button, .button { + margin-bottom: 1rem; + } + + input, textarea, select, fieldset { + margin-bottom: 1.5rem; + } + + pre, blockquote, dl, figure, table, p, ul, ol, form { + margin-bottom: 2.5rem; + } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .u-full-width { width: 100%; - box-sizing: border-box; } + box-sizing: border-box; + } + .u-max-full-width { max-width: 100%; - box-sizing: border-box; } - .u-pull-right { - float: right; } - .u-pull-left { - float: left; } + box-sizing: border-box; + } + .u-pull-right { + float: right; + } + + .u-pull-left { + float: left; + } + + .tcenter { + text-align: center; + } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ + hr { margin-top: 0.5rem; margin-bottom: 1.2rem; border-width: 0; - border-top: 1px solid #E1E1E1; } - + border-top: 1px solid #E1E1E1; + } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Self Clearing Goodness */ - .container:after, - .row:after, - .u-cf { + + .container:after, .row:after, .u-cf { content: ""; display: table; - clear: both; } + clear: both; + } /* ButtonPad –––––––––––––––––––––––––––––––––––––––––––––––––– */ .control { - background-color: #ddd; - background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); - border-radius: 50%; - box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5), - 0 0 1px 1px hsla(0,0%,100%,.75), - 0 0 1px 2px hsla(0,0%,100%,.25), - 0 0 1px 3px hsla(0,0%,100%,.25), - 0 0 1px 4px hsla(0,0%,100%,.25), - 0 0 1px 6px hsla(0,0%,0%,.75); - height: 9em; - margin: 3em auto; - position: relative; - width: 9em; -} -.control ul { - height: 100%; - padding: 0; - transform: rotate(45deg); -} -.control li { - border-radius: 100% 0 0 0; - box-shadow: inset -1px -1px 1px hsla(0,0%,100%,.5), - 0 0 1px hsla(0,0%,0%,.75); - display: inline-block; - height: 50%; - overflow: hidden; - width: 50%; -} -.control ul li:nth-child(2) { - transform: rotate(90deg); -} -.control ul li:nth-child(3) { - transform: rotate(-90deg); -} -.control ul li:nth-child(4) { - transform: rotate(180deg); -} -.control ul a { - height: 200%; - position: relative; - transform: rotate(-45deg); - width: 200%; -} -.control a:hover, -.control a:focus { - background-color: hsla(0,0%,100%,.25); -} -.control a { - border-radius: 50%; - color: #333; - display: block; - font: bold 1em/3 sans-serif; - text-align: center; - text-decoration: none; - text-shadow: 0 1px 1px hsla(0,0%,100%,.4); - transition: .15s; -} -.control .confirm { - background-color: #ddd; - background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,100%,.25)); - box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5), - 0 0 1px 1px hsla(0,0%,100%,.25), - 0 0 1px 2px hsla(0,0%,100%,.25), - 0 0 1px 3px hsla(0,0%,100%,.25), - 0 0 1px 4px hsla(0,0%,100%,.25), - 0 0 1px 6px hsla(0,0%,0%,.85); - left: 50%; - line-height: 3; - margin: -1.5em; - position: absolute; - top: 50%; - width: 3em; -} -.control .confirm:hover, -.control .confirm:focus { - background-color: #eee; -} + background-color: #ddd; + background-image: linear-gradient(hsla(0, 0%, 0%, .1), hsla(0, 0%, 100%, .1)); + border-radius: 50%; + box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .75), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(0, 0%, 0%, .75); + height: 9em; + margin: 3em auto; + position: relative; + width: 9em; + } + .control ul { + height: 100%; + padding: 0; + transform: rotate(45deg); + } + .control li { + border-radius: 100% 0 0 0; + box-shadow: inset -1px -1px 1px hsla(0, 0%, 100%, .5), 0 0 1px hsla(0, 0%, 0%, .75); + display: inline-block; + height: 50%; + overflow: hidden; + width: 50%; + } -/* Switch + .control ul li:nth-child(2) { + transform: rotate(90deg); + } + + .control ul li:nth-child(3) { + transform: rotate(-90deg); + } + + .control ul li:nth-child(4) { + transform: rotate(180deg); + } + + .control ul a { + height: 200%; + position: relative; + transform: rotate(-45deg); + width: 200%; + } + + .control a:hover, .control a:focus { + background-color: hsla(0, 0%, 100%, .25); + } + + .control a { + border-radius: 50%; + color: #333; + display: block; + font: bold 1em/3 sans-serif; + text-align: center; + text-decoration: none; + text-shadow: 0 1px 1px hsla(0, 0%, 100%, .4); + transition: .15s; + } + + .control .confirm { + background-color: #ddd; + background-image: linear-gradient(hsla(0, 0%, 0%, .15), hsla(0, 0%, 100%, .25)); + box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .25), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(0, 0%, 0%, .85); + left: 50%; + line-height: 3; + margin: -1.5em; + position: absolute; + top: 50%; + width: 3em; + } + + .control .confirm:hover, .control .confirm:focus { + background-color: #eee; + } + + /* Switch –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .switch { + display: inline-block !important; + background-color: #bebebe; + border-radius: 4px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + color: #fff; + cursor: pointer; + display: block; + font-size: 14px; + height: 26px; + margin-bottom: 12px; + position: relative; + width: 60px; + -webkit-transition: background-color 0.2s ease-in-out; + -moz-transition: background-color 0.2s ease-in-out; + -o-transition: background-color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + } -.switch { - background-color: #bebebe; - border-radius: 4px; - box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - color: #fff; - cursor: pointer; - display: block; - font-size: 14px; - height: 26px; - margin-bottom: 12px; - position: relative; - width: 60px; - -webkit-transition: background-color 0.2s ease-in-out; - -moz-transition: background-color 0.2s ease-in-out; - -o-transition: background-color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; -} -.switch.checked { - background-color: #76d21d; -} -.switch input[type="checkbox"] { - cursor: pointer; - height: 10px; - left: 12px; - position: absolute; - top: 8px; - -webkit-transition: left 0.05s ease-in-out; - -moz-transition: left 0.05s ease-in-out; - -o-transition: left 0.05s ease-in-out; - -ms-transition: left 0.05s ease-in-out; - transition: left 0.05s ease-in-out; - width: 10px; -} -.switch.checked input[type="checkbox"] { - left: 38px; -} -.switch input:before { - background: #fff; - background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0)); - background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%); - background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%); - background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%); - background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%); - border: 1px solid #fff; - border-radius: 2px; - box-shadow: 0 0 4px rgba(0,0,0,0.3); - content: ''; - height: 18px; - position: absolute; - top: -5px; - left: -9px; - width: 26px; -} -.switch input:after { - background: #f0f0f0; - background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#fff)); - background: -webkit-linear-gradient(top, #f0f0f0 0%,#fff 100%); - background: -o-linear-gradient(top, #f0f0f0 0%,#fff 100%); - background: -ms-linear-gradient(top, #f0f0f0 0%,#fff 100%); - background: linear-gradient(to bottom, #f0f0f0 0%,#fff 100%); - border-radius: 10px; - content: ''; - height: 12px; - margin: -1px 0 0 -1px; - position: absolute; - width: 12px; -} -.switch .icon-ok, -.switch .icon-remove { - line-height: 28px; - text-shadow: 0 -2px 0 rgba(0,0,0,0.2); - margin: 0 9px; -} -.switch .icon-ok { - float: left; -} -.switch .icon-remove { - float: right; -} + .switch.checked { + background-color: #76d21d; + } + + .switch input[type="checkbox"] { + cursor: pointer; + height: 10px; + left: 12px; + position: absolute; + top: 8px; + -webkit-transition: left 0.05s ease-in-out; + -moz-transition: left 0.05s ease-in-out; + -o-transition: left 0.05s ease-in-out; + -ms-transition: left 0.05s ease-in-out; + transition: left 0.05s ease-in-out; + width: 10px; + } + + .switch.checked input[type="checkbox"] { + left: 38px; + } + + .switch input:before { + background: #fff; + background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0)); + background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); + background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%); + border: 1px solid #fff; + border-radius: 2px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); + content: ''; + height: 18px; + position: absolute; + top: -5px; + left: -9px; + width: 26px; + } + + .switch input:after { + background: #f0f0f0; + background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff)); + background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%); + background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%); + background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%); + background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%); + border-radius: 10px; + content: ''; + height: 12px; + margin: -1px 0 0 -1px; + position: absolute; + width: 12px; + } + + .switch .icon-ok, .switch .icon-remove { + line-height: 28px; + text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2); + margin: 0 9px; + } + + .switch .icon-ok { + float: left; + } + + .switch .icon-remove { + float: right; + } diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index 3ac704d..c101846 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -45,10 +45,10 @@ function start() { $('#mainHeader').html(data.label); break; case UI_LABEL: - $('#row').append("
"+data.label+"
"+data.value+"
"); + $('#row').append("
"+data.label+"
"+data.value+"
"); break; case UI_BUTTON: - $('#row').append("
"+data.label+"
"); + $('#row').append("
"+data.label+"
"); $('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } }); $('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } }); break; @@ -60,7 +60,7 @@ function start() { input = ""; } $('#row').append( - "
"+data.label+"
" + + "
"+data.label+"
" + label + "" + "" + input + "" + @@ -71,7 +71,7 @@ function start() { //NO BREAK case UI_PAD: $('#row').append( - "
"+data.label+"
"+ + "
"+data.label+"
"+ "