Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Theme updates. Draft of controls pages for each theme. Unfinished

  • Loading branch information...
commit 78c9b80a7cb16f1a8ec7ea26dfbb115d9ef9645b 1 parent 8ff6369
@Inviz authored
Showing with 1,179 additions and 686 deletions.
  1. +67 −0 Demos/Aristo/controls.html
  2. +278 −219 Demos/Assets/Styles/Themes/Aristo/screen.css
  3. +237 −210 Demos/Assets/Styles/Themes/HUD/screen.css
  4. +13 −13 Demos/Assets/Styles/Themes/Skeleton/screen.css
  5. +27 −0 Demos/Assets/Styles/controls.css
  6. +67 −0 Demos/HUD/controls.html
  7. +29 −0 Demos/Styles/controls.sass
  8. +149 −167 Demos/aristo.html
  9. +6 −27 Demos/index.html
  10. +1 −1  Styles/Themes/Aristo/Input/_Range.sass
  11. +32 −3 Styles/Themes/Aristo/Input/_Text.sass
  12. +2 −0  Styles/Themes/Aristo/Menu/_Context.sass
  13. +25 −0 Styles/Themes/Aristo/Menu/_Toolbar.sass
  14. +1 −0  Styles/Themes/Aristo/_Input.sass
  15. +1 −1  Styles/Themes/Aristo/_Section.sass
  16. +2 −1  Styles/Themes/Aristo/_Select.sass
  17. +11 −6 Styles/Themes/Aristo/screen.sass
  18. +7 −1 Styles/Themes/HUD/Input/_Text.sass
  19. +22 −0 Styles/Themes/HUD/Menu/_Toolbar.sass
  20. +1 −1  Styles/Themes/HUD/_Section.sass
  21. +1 −1  Styles/Themes/HUD/_Select.sass
  22. +1 −1  Styles/Themes/HUD/_Window.sass
  23. +2 −2 Styles/Themes/HUD/screen.sass
  24. +1 −1  Styles/Themes/Skeleton/_Section.sass
  25. +1 −1  Styles/Themes/Skeleton/screen.sass
  26. +65 −0 Views/Aristo/controls.haml
  27. +66 −0 Views/HUD/controls.haml
  28. +64 −30 Views/index.haml
View
67 Demos/Aristo/controls.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<head>
+ <title>Aristo Theme controls</title>
+ <script type='text/javascript'>
+ //<![CDATA[
+ window.prefix = '../../../lsd-examples/Demos/';
+ //]]>
+ </script>
+ <script src='../../../lsd-examples/Scripts/includes.js'></script>
+ <link href='../Assets/Styles/Themes/Aristo/screen.css' rel='stylesheet art' />
+ <link href='../Assets/Styles/controls.css' rel='stylesheet' />
+ <script type='text/javascript'>
+ //<![CDATA[
+ window.addEvent('domready', function() {
+ LSD.Sheet.decompile('lsd', function() {
+ new LSD.Document;
+ $$('li > button', 'select', 'input', 'menu').each(LSD.Layout.replace)
+ })
+ })
+ //]]>
+ </script>
+</head>
+<body>
+ <ul class='controls'><li>
+ <button>Cancel</button>
+ <span class='label'>Button</span>
+ </li><li>
+ <button class='default'>OK</button>
+ <span class='label'>Default button</span>
+ </li><li>
+ <select>
+ <option inherit='partial'>Pop up</option>
+ <option inherit='partial'>Item</option>
+ </select>
+ <span class='label'>Selectbox</span>
+ </li><li>
+ <select menu-position='bottom'>
+ <option inherit='partial'>Pop up</option>
+ <option inherit='partial'>Item</option>
+ </select>
+ <span class='label'>Dropdown selectbox</span>
+ </li><li>
+ <input />
+ <span class='label'>Standart text field</span>
+ </li><li>
+ <input class='round' />
+ <span class='label'>Rounded text field</span>
+ </li><li>
+ <input id='hello' type='checkbox' />
+ <label for='hello'>Hello friend!</label>
+ <span class='label'>Checkbox</span>
+ </li><li>
+ <input id='another' type='radio' />
+ <label for='another'>Another option</label>
+ <span class='label'>Radio button</span>
+ </li><li>
+ <menu class='segmented' type='toolbar'>
+ <button class='first'>Foo</button>
+ <button>Bar</button>
+ <button class='last'>1</button>
+ </menu>
+ <span class='label'>Segmented buttons</span>
+ </li><li>
+ <input type='range' />
+ <span class='label'>Range input</span>
+ </li></ul>
+</body>
View
497 Demos/Assets/Styles/Themes/Aristo/screen.css
@@ -1,87 +1,87 @@
-html > body .art.input[type=range].id-tint {
--art-fill-color: "[{0: hsb(301, 56, 62), 0.5: hsb(120, 5, 53), 1: hsb(120, 49, 57)}, 0]"; }
+html > body .lsd.input[type=range].id-tint {
+-lsd-fill-color: "[{0: hsb(301, 56, 62), 0.5: hsb(120, 5, 53), 1: hsb(120, 49, 57)}, 0]"; }
-.art.button {
+.lsd.button {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
--art-*display: inline;
+-lsd-*display: inline;
cursor: default;
--art-stroke-color: hsb(0, 5, 30, 0.5);
--art-stroke-width: 1px;
--art-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]"; }
-.art.button.is-active {
- -art-fill-color: "[{0: hsb(202, 35, 79), 0.934: hsb(202, 21, 96.04), 0.935: hsb(202, 10.5, 98), 1: hsb(202, 10.5, 98)}]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(202, 40.25, 58), hsb(202, 29.75, 72)]"; }
-.art.button.is-disabled {
+-lsd-stroke-color: hsb(0, 5, 30, 0.5);
+-lsd-stroke-width: 1px;
+-lsd-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]"; }
+.lsd.button.is-active {
+ -lsd-fill-color: "[{0: hsb(202, 35, 79), 0.934: hsb(202, 21, 96.04), 0.935: hsb(202, 10.5, 98), 1: hsb(202, 10.5, 98)}]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(202, 40.25, 58), hsb(202, 29.75, 72)]"; }
+.lsd.button.is-disabled {
opacity: 0.5; }
-.art.button .container {
+.lsd.button .container {
color: #1c4257; }
-.art.button.grey, .art.button.is-disabled {
- -art-fill-color: "[{0: hsb(0, 0, 98), 0.076: hsb(0, 0, 98), 0.0761: hsb(0, 0, 97), 1: hsb(0, 0, 79)}]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(0, 0, 72), hsb(0, 0, 58)]"; }
-.art.button.grey .container, .art.button.is-disabled .container {
+.lsd.button.grey, .lsd.button.is-disabled {
+ -lsd-fill-color: "[{0: hsb(0, 0, 98), 0.076: hsb(0, 0, 98), 0.0761: hsb(0, 0, 97), 1: hsb(0, 0, 79)}]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(0, 0, 72), hsb(0, 0, 58)]"; }
+.lsd.button.grey .container, .lsd.button.is-disabled .container {
color: #4f4f4f; }
-.art.button.grey.is-active {
- -art-fill-color: "[{0: hsb(0, 0, 79), 0.934: hsb(0, 0, 94.08), 0.935: hsb(0, 0, 96), 1: hsb(0, 0, 96)}]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(0, 0, 58), hsb(0, 0, 72)]"; }
+.lsd.button.grey.is-active {
+ -lsd-fill-color: "[{0: hsb(0, 0, 79), 0.934: hsb(0, 0, 94.08), 0.935: hsb(0, 0, 96), 1: hsb(0, 0, 96)}]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(0, 0, 58), hsb(0, 0, 72)]"; }
-.art.button.is-icon {
+.lsd.button.is-icon {
width: 16px;
height: 16px; }
-.art.button.is-text {
+.lsd.button.is-text {
letter-spacing: 0.02em;
width: auto;
--art-corner-radius-top-left: 3px;
--art-corner-radius-top-right: 3px;
--art-corner-radius-bottom-left: 3px;
--art-corner-radius-bottom-right: 3px; }
-.art.button.is-text .container {
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px; }
+.lsd.button.is-text .container {
height: 22px;
line-height: 23px;
font-family: Helvetica;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 0 #e5e5ee;
- -art-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px); }
+ -lsd-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px); }
-html > body .art.id-buttons .art.button {
+html > body .lsd.id-buttons .lsd.button {
width: 62px;
text-align: center;
--art-corner-radius-top-right: 0px;
--art-corner-radius-bottom-right: 0px;
--art-corner-radius-top-left: 0px;
+-lsd-corner-radius-top-right: 0px;
+-lsd-corner-radius-bottom-right: 0px;
+-lsd-corner-radius-top-left: 0px;
margin-right: -1px;
--art-corner-radius-bottom-left: 0px; }
-html > body .art.id-buttons .art.button.last {
+-lsd-corner-radius-bottom-left: 0px; }
+html > body .lsd.id-buttons .lsd.button.last {
margin-right: 0;
- -art-corner-radius-top-right: 3px;
- -art-corner-radius-bottom-right: 3px; }
-html > body .art.id-buttons .art.button.first {
- -art-corner-radius-top-left: 3px;
- -art-corner-radius-bottom-left: 3px; }
+ -lsd-corner-radius-top-right: 3px;
+ -lsd-corner-radius-bottom-right: 3px; }
+html > body .lsd.id-buttons .lsd.button.first {
+ -lsd-corner-radius-top-left: 3px;
+ -lsd-corner-radius-bottom-left: 3px; }
-.art.form.two-column .art.label, .art.form.two-column .art.input[type=range], .art.form.two-column .art.input[type=text], .art.form.two-column .art.select, .art.form.two-column .art.textarea {
+.lsd.form.two-column .lsd.label, .lsd.form.two-column .lsd.input[type=range], .lsd.form.two-column .lsd.input[type=text], .lsd.form.two-column .lsd.select, .lsd.form.two-column .lsd.textarea {
float: left; }
-.art.form.two-column .art.label {
+.lsd.form.two-column .lsd.label {
float: left;
clear: both;
text-align: right;
margin-right: 16px;
width: 85px;
color: #333333; }
-.art.form.two-column .art.label .container {
+.lsd.form.two-column .lsd.label .container {
line-height: 22px;
font-size: 14px;
font-weight: bold; }
-.art.form.two-column .art.label.inline {
+.lsd.form.two-column .lsd.label.inline {
float: none;
clear: none;
text-align: left;
@@ -89,98 +89,120 @@ color: #333333; }
display: inline;
display: -moz-inline-box;
display: inline-block;
- -art-*display: inline;
+ -lsd-*display: inline;
vertical-align: middle;
margin-right: 0;
margin-left: 5px;
width: auto; }
-.art.form.two-column .art.label.inline .container {
+.lsd.form.two-column .lsd.label.inline .container {
line-height: 16px; }
-.art.menu[type=context] {
--art-fill-color: hsb(0, 0, 96);
--art-shadow-blur: 10;
--art-shadow-color: hsb(0, 0, 10);
+.lsd.menu[type=toolbar] .lsd.button {
+height: 24px; }
+.lsd.menu[type=toolbar] .lsd.button > .container {
+ padding: 0 0.3em; }
+.lsd.menu[type=toolbar].segmented .lsd.button {
+-lsd-corner-radius-top-left: 0;
+-lsd-corner-radius-top-right: 0;
+-lsd-corner-radius-bottom-left: 0;
+-lsd-corner-radius-bottom-right: 0;
+margin-right: -2px; }
+.lsd.menu[type=toolbar].segmented .lsd.button > .container {
+ padding-left: 10px;
+ padding-right: 10px; }
+.lsd.menu[type=toolbar].segmented .lsd.button.first {
+ -lsd-corner-radius-top-left: 3px;
+ -lsd-corner-radius-bottom-left: 3px; }
+.lsd.menu[type=toolbar].segmented .lsd.button.last {
+ -lsd-corner-radius-top-right: 3px;
+ -lsd-corner-radius-bottom-right: 3px; }
+
+.lsd.menu[type=context] {
+-lsd-fill-color: hsb(0, 0, 96);
+-lsd-shadow-blur: 10;
+-lsd-shadow-color: hsb(0, 0, 10);
z-index: 500;
--art-corner-radius-top-left: 2px;
--art-corner-radius-top-right: 2px;
--art-corner-radius-bottom-left: 2px;
--art-corner-radius-bottom-right: 2px;
+-lsd-corner-radius-top-left: 2px;
+-lsd-corner-radius-top-right: 2px;
+-lsd-corner-radius-bottom-left: 2px;
+-lsd-corner-radius-bottom-right: 2px;
padding-top: 5px;
-padding-bottom: 5px; }
-.art.menu[type=context] .container {
+padding-bottom: 5px;
+margin-top: 4px;
+position: absolute; }
+.lsd.menu[type=context] .container {
font: bold 14px/22px Arial;
padding: 0 11px; }
-.art.menu[type=context] .art.option.is-chosen {
+.lsd.menu[type=context] .lsd.option.is-chosen {
background: #5f83b9; }
-.art.menu[type=context] .art.option.is-chosen .container {
+.lsd.menu[type=context] .lsd.option.is-chosen .container {
color: white;
text-shadow: 0 -1px 0 #374683;
- -art-filter: dropshadow(color=#374683, offX=0, offY=-1px); }
+ -lsd-filter: dropshadow(color=#374683, offX=0, offY=-1px); }
-.art.scrollbar {
+.lsd.scrollbar {
height: 17px;
width: 17px;
position: absolute;
--art-fill-color: "[[hsb(202, 31, 82), hsb(202, 25, 97)], 180]"; }
-.art.scrollbar .art.button {
+-lsd-fill-color: "[[hsb(202, 31, 82), hsb(202, 25, 97)], 180]"; }
+.lsd.scrollbar .lsd.button {
height: 17px;
- -art-stroke-width: 0;
+ -lsd-stroke-width: 0;
width: 17px;
- -art-glyph-scale: 0.8;
- -art-glyph-top: 3;
- -art-glyph-left: 5;
- -art-glyph-color: hsb(202, 61, 45);
- -art-fill-color: false; }
-.art.scrollbar .art.track {
- -art-corner-radius-top-left: 7;
- -art-corner-radius-top-right: 7;
- -art-corner-radius-bottom-left: 7;
- -art-corner-radius-bottom-right: 7; }
-.art.scrollbar .art.thumb {
- -art-fill-color: "[[hsb(0, 0, 96), hsb(0, 0, 92)], 180]";
- -art-corner-radius-top-left: 5;
- -art-corner-radius-top-right: 5;
- -art-corner-radius-bottom-left: 5;
- -art-corner-radius-bottom-right: 5;
- -art-shadow-offset-y: 1px;
- -art-shadow-blur: 1px;
- -art-shadow-color: hsb(0, 0, 0); }
-.art.scrollbar.is-horizontal .art.track {
+ -lsd-glyph-scale: 0.8;
+ -lsd-glyph-top: 3;
+ -lsd-glyph-left: 5;
+ -lsd-glyph-color: hsb(202, 61, 45);
+ -lsd-fill-color: false; }
+.lsd.scrollbar .lsd.track {
+ -lsd-corner-radius-top-left: 7;
+ -lsd-corner-radius-top-right: 7;
+ -lsd-corner-radius-bottom-left: 7;
+ -lsd-corner-radius-bottom-right: 7; }
+.lsd.scrollbar .lsd.thumb {
+ -lsd-fill-color: "[[hsb(0, 0, 96), hsb(0, 0, 92)], 180]";
+ -lsd-corner-radius-top-left: 5;
+ -lsd-corner-radius-top-right: 5;
+ -lsd-corner-radius-bottom-left: 5;
+ -lsd-corner-radius-bottom-right: 5;
+ -lsd-shadow-offset-y: 1px;
+ -lsd-shadow-blur: 1px;
+ -lsd-shadow-color: hsb(0, 0, 0); }
+.lsd.scrollbar.is-horizontal .lsd.track {
height: 17px;
margin-left: 17px; }
-.art.scrollbar.is-vertical {
+.lsd.scrollbar.is-vertical {
right: 0;
top: 0; }
-.art.scrollbar.is-vertical .art.button {
+.lsd.scrollbar.is-vertical .lsd.button {
height: 14px;
z-index: 100; }
-html > body .art.scrollbar.is-vertical .art.button.id-incrementor {
- -art-glyph: ART.Glyphs.triangleUp;
+html > body .lsd.scrollbar.is-vertical .lsd.button.id-incrementor {
+ -lsd-glyph: ART.Glyphs.triangleUp;
top: 0; }
-html > body .art.scrollbar.is-vertical .art.button.id-decrementor {
- -art-glyph: ART.Glyphs.triangleDown;
+html > body .lsd.scrollbar.is-vertical .lsd.button.id-decrementor {
+ -lsd-glyph: ART.Glyphs.triangleDown;
bottom: 0; }
-.art.scrollbar.is-vertical .art.track {
+.lsd.scrollbar.is-vertical .lsd.track {
z-index: 105;
width: 17px;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 17px;
- -art-fill-color: "[[hsb(0, 0, 69), hsb(0, 0, 80), hsb(0, 0, 69)], 180]"; }
-.art.scrollbar.is-vertical .art.thumb {
+ -lsd-fill-color: "[[hsb(0, 0, 69), hsb(0, 0, 80), hsb(0, 0, 69)], 180]"; }
+.lsd.scrollbar.is-vertical .lsd.thumb {
width: 13px;
margin-left: 2px;
margin-right: 2px; }
-.art.section {
+.lsd.section {
width: inherit; }
-html > body .art.section.id-buttons {
+html > body .lsd.section.id-buttons {
padding: 0 10px; }
-.art.section.centered, html > body .art.section.id-buttons {
+.lsd.section.centered, html > body .lsd.section.id-buttons {
text-align: center; }
-.art.section:after {
+.lsd.section:after {
content: ".";
display: block;
height: 0px;
@@ -189,186 +211,216 @@ visibility: hidden;
_display: block;
zoom: 1; }
-.art.form .art.section {
+.lsd.form .lsd.section {
border-top: 1px solid #e7e7e7;
height: auto;
padding-top: 8px;
padding-bottom: 8px; }
-.art.form .art.section.first {
+.lsd.form .lsd.section.first {
border-top: 0; }
-.art.select {
+.lsd.select {
+zoom: 1;
+display: inline;
+display: -moz-inline-box;
+display: inline-block;
+-lsd-*display: inline;
height: 22px;
width: auto;
--art-min-width: 70px;
--art-corner-radius-top-left: 3px;
--art-corner-radius-top-right: 3px;
--art-corner-radius-bottom-left: 3px;
--art-corner-radius-bottom-right: 3px;
--art-fill-color: "[{0: hsb(0, 0, 98), 0.076: hsb(0, 0, 98), 0.0761: hsb(0, 0, 97), 1: hsb(0, 0, 79)}]";
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 72), hsb(0, 0, 58)]"; }
-.art.select > .container {
+-lsd-min-width: 100px;
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px;
+-lsd-fill-color: "[{0: hsb(0, 0, 98), 0.076: hsb(0, 0, 98), 0.0761: hsb(0, 0, 97), 1: hsb(0, 0, 79)}]";
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 72), hsb(0, 0, 58)]"; }
+.lsd.select > .container {
font: bold 14px/22px Arial;
text-shadow: 0 1px 0 #e5e5ee;
- -art-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px);
+ -lsd-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px);
padding: 0 10px; }
-.art.select.is-focused {
- -art-shadow-color: hsb(212, 58, 93);
- -art-shadow-blur: 8;
- -art-shadow-offset-y: 0;
- -art-stroke-color: hsb(212, 58, 93); }
-.art.select .art.button {
+.lsd.select.is-focused {
+ -lsd-shadow-color: hsb(212, 58, 93);
+ -lsd-shadow-blur: 8;
+ -lsd-shadow-offset-y: 0;
+ -lsd-stroke-color: hsb(212, 58, 93); }
+.lsd.select .lsd.button {
width: 22px;
height: 22px;
margin-top: -1px;
- -art-margin-top-margin-right: -1px;
- -art-corner-radius-top-right: inherit;
- -art-corner-radius-bottom-right: inherit;
+ -lsd-margin-top-margin-right: -1px;
+ -lsd-corner-radius-top-right: inherit;
+ -lsd-corner-radius-bottom-right: inherit;
float: right;
- -art-glyph: ART.Glyphs.triangleDown;
- -art-glyph-scale: 0.75;
- -art-glyph-top: 8px;
- -art-glyph-left: 8px;
- -art-glyph-color: hsb(202, 48, 51); }
+ -lsd-glyph: ART.Glyphs.triangleDown;
+ -lsd-glyph-scale: 0.75;
+ -lsd-glyph-top: 8px;
+ -lsd-glyph-left: 8px;
+ -lsd-glyph-color: hsb(202, 48, 51); }
-.art.input[type=checkbox] {
+.lsd.input[type=checkbox] {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
--art-*display: inline;
+-lsd-*display: inline;
vertical-align: middle;
width: 15px;
height: 15px;
line-height: 16px;
--art-corner-radius: 3;
--art-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]";
--art-glyph-color: false; }
-.art.input[type=checkbox].is-active {
- -art-fill-color: "[{0: hsb(202, 35, 79), 0.934: hsb(202, 21, 96.04), 0.935: hsb(202, 10.5, 98), 1: hsb(202, 10.5, 98)}]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(202, 40.25, 58), hsb(202, 29.75, 72)]"; }
-.art.input[type=checkbox].is-focused {
- -art-shadow-color: hsb(212, 58, 93);
- -art-shadow-blur: 8;
- -art-shadow-offset-y: 0;
- -art-stroke-color: hsb(212, 58, 93); }
-.art.input[type=checkbox].is-checked {
- -art-glyph: ART.Glyphs.checkMark;
- -art-glyph-top: 1px;
- -art-glyph-left: 2px;
- -art-glyph-scale: 1.6;
- -art-glyph-color: hsb(201, 68, 34); }
+-lsd-corner-radius: 3;
+-lsd-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]";
+-lsd-glyph-color: false; }
+.lsd.input[type=checkbox].is-active {
+ -lsd-fill-color: "[{0: hsb(202, 35, 79), 0.934: hsb(202, 21, 96.04), 0.935: hsb(202, 10.5, 98), 1: hsb(202, 10.5, 98)}]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(202, 40.25, 58), hsb(202, 29.75, 72)]"; }
+.lsd.input[type=checkbox].is-focused {
+ -lsd-shadow-color: hsb(212, 58, 93);
+ -lsd-shadow-blur: 8;
+ -lsd-shadow-offset-y: 0;
+ -lsd-stroke-color: hsb(212, 58, 93); }
+.lsd.input[type=checkbox].is-checked {
+ -lsd-glyph: ART.Glyphs.checkMark;
+ -lsd-glyph-top: 1px;
+ -lsd-glyph-left: 2px;
+ -lsd-glyph-scale: 1.6;
+ -lsd-glyph-color: hsb(201, 68, 34); }
-.art.input[type="range"] {
+.lsd.input[type="range"] {
height: 3px;
margin-top: 9px;
margin-bottom: 6px;
--art-min-width: 93px;
+-lsd-min-width: 90px;
width: auto;
cursor: pointer;
--art-corner-radius: 1;
--art-fill-color: "[hsb(0, 0, 70), hsb(0, 0, 84)]";
--art-stroke-color: "[hsb(0, 0, 56), hsb(0, 0, 80)]";
--art-stroke-width: 1px; }
-.art.input[type="range"] .art.thumb {
+-lsd-corner-radius: 1;
+-lsd-fill-color: "[hsb(0, 0, 70), hsb(0, 0, 84)]";
+-lsd-stroke-color: "[hsb(0, 0, 56), hsb(0, 0, 80)]";
+-lsd-stroke-width: 1px; }
+.lsd.input[type="range"] .lsd.thumb {
height: 13px;
width: 13px;
margin-top: -6px;
- -art-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]";
- -art-corner-radius: 6;
- -art-glyph: ART.Glyphs.radio;
- -art-glyph-color: hsb(201, 56, 50);
- -art-glyph-top: 4px;
- -art-glyph-scale: 0.85;
- -art-glyph-left: 4px; }
-.art.input[type="range"].is-focused .art.thumb {
- -art-shadow-color: hsb(212, 58, 93);
- -art-shadow-blur: 8;
- -art-shadow-offset-y: 0;
- -art-stroke-color: hsb(212, 58, 93); }
+ -lsd-fill-color: "[{0: hsb(202, 10.5, 98), 0.076: hsb(202, 10.5, 98), 0.0761: hsb(202, 21, 97), 1: hsb(202, 35, 79)}]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(202, 29.75, 72), hsb(202, 40.25, 58)]";
+ -lsd-corner-radius: 6;
+ -lsd-glyph: ART.Glyphs.radio;
+ -lsd-glyph-color: hsb(201, 56, 50);
+ -lsd-glyph-top: 4px;
+ -lsd-glyph-scale: 0.85;
+ -lsd-glyph-left: 4px; }
+.lsd.input[type="range"].is-focused .lsd.thumb {
+ -lsd-shadow-color: hsb(212, 58, 93);
+ -lsd-shadow-blur: 8;
+ -lsd-shadow-offset-y: 0;
+ -lsd-stroke-color: hsb(212, 58, 93); }
-.art.input[type=text], .art.textarea {
-height: 18px;
-width: 170px; }
-.art.input[type=text].is-focused, .art.textarea.is-focused {
- -art-shadow-color: hsb(212, 58, 93);
- -art-shadow-blur: 8;
- -art-shadow-offset-y: 0;
- -art-stroke-color: hsb(212, 58, 93); }
+.lsd.input[type=text] {
+height: 18px; }
+
+.lsd.input[type=text], .lsd.textarea {
+width: auto;
+-lsd-min-width: 90px;
+-lsd-corner-radius: 1;
+-lsd-stroke-color: hsb(0, 0, 50);
+-lsd-stroke-width: 1;
+-lsd-fill-color: "[hsb(0, 0, 90), hsb(0, 0, 95)]";
+-lsd-reflection-color: "[hsb(0, 0, 100, 1), hsb(0, 0, 70, 0)]"; }
+.lsd.input[type=text].is-focused, .lsd.textarea.is-focused {
+ -lsd-shadow-color: hsb(212, 58, 93);
+ -lsd-shadow-blur: 8;
+ -lsd-shadow-offset-y: 0;
+ -lsd-stroke-color: hsb(212, 58, 93); }
+
+.lsd.textarea {
+-lsd-min-height: 88px; }
+.lsd.textarea textarea {
+ padding-top: 2px;
+ margin: 0px; }
+
+.lsd.input input, .lsd.textarea textarea {
+border: 0;
+line-height: 15px;
+font-size: 13px;
+padding-top: 3px;
+padding-left: 4px;
+font-family: Helvetica;
+background: none;
+display: block;
+outline: none; }
-.art.window {
--art-shadow-blur: 15;
--art-shadow-offset-y: 2;
--art-shadow-color: hsb(0, 0, 20);
+.lsd.window {
+-lsd-shadow-blur: 15;
+-lsd-shadow-offset-y: 2;
+-lsd-shadow-color: hsb(0, 0, 20);
display: inline-block;
vertical-align: top;
width: auto;
height: auto;
--art-corner-radius-top-right: 10px;
--art-corner-radius-top-left: 10px;
+-lsd-corner-radius-top-right: 10px;
+-lsd-corner-radius-top-left: 10px;
font-family: Arial; }
-html > body .art.window .art.id-header {
- -art-corner-radius-top-right: inherit;
- -art-corner-radius-top-left: inherit;
- -art-fill-color: "[hsb(0, 0, 92), hsb(0, 0, 76)]";
+html > body .lsd.window .lsd.id-header {
+ -lsd-corner-radius-top-right: inherit;
+ -lsd-corner-radius-top-left: inherit;
+ -lsd-fill-color: "[hsb(0, 0, 92), hsb(0, 0, 76)]";
border-bottom: 1px solid #979797;
line-height: 24px; }
-html > body .art.window .art.id-header .art.id-title {
+html > body .lsd.window .lsd.id-header .lsd.id-title {
float: left;
text-align: center;
z-index: 10;
width: 100%; }
-html > body .art.window .art.id-header .art.id-title .container {
+html > body .lsd.window .lsd.id-header .lsd.id-title .container {
font-size: 12px;
line-height: 24px;
font-weight: bold;
text-shadow: 0 1px 0 #e5e5ee;
- -art-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px); }
-html > body .art.window .art.id-header .art.id-buttons {
+ -lsd-filter: dropshadow(color=#e5e5ee, offX=0, offY=1px); }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons {
float: left;
padding: 0 10px;
z-index: 20;
line-height: 25px; }
-html > body .art.window .art.id-header .art.id-buttons.is-hover .art.button {
- -art-fill-color: "[hsb(0, 0, 54), hsb(0, 0, 52)]"; }
-html > body .art.window .art.id-header .art.id-buttons .art.button {
+html > body .lsd.window .lsd.id-header .lsd.id-buttons.is-hover .lsd.button {
+ -lsd-fill-color: "[hsb(0, 0, 54), hsb(0, 0, 52)]"; }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
- -art-*display: inline;
+ -lsd-*display: inline;
margin-right: 4px;
height: 12px;
width: 12px;
margin-top: 6px;
- -art-corner-radius: 6px;
+ -lsd-corner-radius: 6px;
vertical-align: top;
- -art-fill-color: "[hsb(0, 0, 54), hsb(0, 0, 72)]";
- -art-shadow-offset-y: 1px;
- -art-stroke-color: "[hsb(0, 0, 52), hsb(0, 0, 72)]";
- -art-shadow-color: hsb(0, 0, 96);
- -art-glyph-color: hsb(0, 0, 100, 0.8);
- -art-glyph-scale: 1;
- -art-glyph-top: 0;
- -art-glyph-left: 0; }
-html > body .art.window .art.id-header .art.id-buttons .art.button.id-close {
- -art-glyph: ART.Glyphs.smallCross; }
-html > body .art.window .art.id-header .art.id-buttons .art.button.id-minimize {
- -art-glyph: ART.Glyphs.smallMinus; }
-html > body .art.window .art.id-header .art.id-buttons .art.button.id-maximize {
- -art-glyph: ART.Glyphs.smallPlus; }
-html > body .art.window .art.id-header .art.id-toggler {
+ -lsd-fill-color: "[hsb(0, 0, 54), hsb(0, 0, 72)]";
+ -lsd-shadow-offset-y: 1px;
+ -lsd-stroke-color: "[hsb(0, 0, 52), hsb(0, 0, 72)]";
+ -lsd-shadow-color: hsb(0, 0, 96);
+ -lsd-glyph-color: hsb(0, 0, 100, 0.8);
+ -lsd-glyph-scale: 1;
+ -lsd-glyph-top: 0;
+ -lsd-glyph-left: 0; }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button.id-close {
+ -lsd-glyph: ART.Glyphs.smallCross; }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button.id-minimize {
+ -lsd-glyph: ART.Glyphs.smallMinus; }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button.id-maximize {
+ -lsd-glyph: ART.Glyphs.smallPlus; }
+html > body .lsd.window .lsd.id-header .lsd.id-toggler {
float: right; }
-html > body .art.window .art.id-content {
+html > body .lsd.window .lsd.id-content {
background: white; }
-html > body .art.window .art.id-handle {
- -art-glyph: ART.Glyphs.resize; }
+html > body .lsd.window .lsd.id-handle {
+ -lsd-glyph: ART.Glyphs.resize; }
svg {
display: block; }
@@ -376,10 +428,10 @@ display: block; }
v\:* {
background: transparent; }
-.art.* {
--art-shadow-blur: 0; }
+.lsd.* {
+-lsd-shadow-blur: 0; }
-.art:after {
+.lsd:after {
content: ".";
display: block;
height: 0px;
@@ -388,5 +440,12 @@ visibility: hidden;
_display: block;
zoom: 1; }
-.art.window svg ~ *, .art.window svg .container {
-position: relative; }
+.lsd {
+position: relative;
+text-align: left; }
+.lsd > svg {
+ position: absolute;
+ top: 0;
+ left: 0; }
+.lsd > svg ~ * {
+ position: relative; }
View
447 Demos/Assets/Styles/Themes/HUD/screen.css
@@ -1,64 +1,64 @@
-html > body .art.input[type=range].id-tint {
--art-fill-color: "[{0: hsb(301, 56, 62), 0.5: hsb(120, 5, 53), 1: hsb(120, 49, 57)}, 0]"; }
+html > body .lsd.input[type=range].id-tint {
+-lsd-fill-color: "[{0: hsb(301, 56, 62), 0.5: hsb(120, 5, 53), 1: hsb(120, 49, 57)}, 0]"; }
-.art.label {
+.lsd.label {
line-height: 16px; }
-.art.button {
+.lsd.button {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
--art-*display: inline;
+-lsd-*display: inline;
cursor: default;
--art-fill-color: hsb(0, 0, 22);
--art-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]"; }
-.art.button.is-active {
- -art-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
+-lsd-fill-color: hsb(0, 0, 22);
+-lsd-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]"; }
+.lsd.button.is-active {
+ -lsd-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
-.art.button.is-icon {
+.lsd.button.is-icon {
width: 16px;
height: 16px; }
-.art.button.is-text {
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+.lsd.button.is-text {
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
letter-spacing: 0.02em;
width: auto;
--art-corner-radius-top-left: 3px;
--art-corner-radius-top-right: 3px;
--art-corner-radius-bottom-left: 3px;
--art-corner-radius-bottom-right: 3px; }
-.art.button.is-text.is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.button.is-text .container {
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px; }
+.lsd.button.is-text.is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.button.is-text .container {
line-height: 16px;
font-family: Helvetica;
font-size: 11px;
color: white; }
-html > body .art.id-buttons .art.button {
--art-corner-radius-top-left: 8px;
--art-corner-radius-top-right: 8px;
--art-corner-radius-bottom-left: 8px;
--art-corner-radius-bottom-right: 8px;
+html > body .lsd.id-buttons .lsd.button {
+-lsd-corner-radius-top-left: 8px;
+-lsd-corner-radius-top-right: 8px;
+-lsd-corner-radius-bottom-left: 8px;
+-lsd-corner-radius-bottom-right: 8px;
width: 62px;
text-align: center; }
-.art.form.two-column .art.label, .art.form.two-column .art.input[type=range], .art.form.two-column .art.input[type=text], .art.form.two-column .art.select, .art.form.two-column .art.textarea {
+.lsd.form.two-column .lsd.label, .lsd.form.two-column .lsd.input[type=range], .lsd.form.two-column .lsd.input[type=text], .lsd.form.two-column .lsd.select, .lsd.form.two-column .lsd.textarea {
float: left; }
-.art.form.two-column .art.label {
+.lsd.form.two-column .lsd.label {
float: left;
clear: both;
text-align: right;
margin-right: 16px;
width: 85px;
text-shadow: 0 1px 1px black;
--art-filter: dropshadow(color=black, offX=1px, offY=1px);
+-lsd-filter: dropshadow(color=black, offX=1px, offY=1px);
color: #dbdbdb; }
-.art.form.two-column .art.label .container {
+.lsd.form.two-column .lsd.label .container {
line-height: 18px; }
-.art.form.two-column .art.label.inline {
+.lsd.form.two-column .lsd.label.inline {
float: none;
clear: none;
text-align: left;
@@ -66,91 +66,107 @@ color: #dbdbdb; }
display: inline;
display: -moz-inline-box;
display: inline-block;
- -art-*display: inline;
+ -lsd-*display: inline;
vertical-align: middle;
margin-right: 0;
margin-left: 5px;
width: auto; }
-.art.form.two-column .art.label.inline .container {
+.lsd.form.two-column .lsd.label.inline .container {
line-height: 16px; }
-.art.menu[type=context] {
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
--art-fill-color: hsb(0, 0, 22, 0.7);
--art-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
+.lsd.menu[type=toolbar] .lsd.button {
+height: 16px; }
+.lsd.menu[type=toolbar] .lsd.button > .container {
+ padding: 0 0.3em; }
+.lsd.menu[type=toolbar].segmented .lsd.button {
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px; }
+.lsd.menu[type=toolbar].segmented .lsd.button.first {
+ -lsd-corner-radius-top-left: 3px;
+ -lsd-corner-radius-bottom-left: 3px; }
+.lsd.menu[type=toolbar].segmented .lsd.button.last {
+ -lsd-corner-radius-top-right: 3px;
+ -lsd-corner-radius-bottom-right: 3px; }
+
+.lsd.menu[type=context] {
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+-lsd-fill-color: hsb(0, 0, 22, 0.7);
+-lsd-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
z-index: 250;
padding-top: 5px;
padding-bottom: 5px;
--art-corner-radius-top-left: 3px;
--art-corner-radius-top-right: 3px;
--art-corner-radius-bottom-left: 3px;
--art-corner-radius-bottom-right: 3px;
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px;
position: absolute; }
-.art.menu[type=context].is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.menu[type=context] .art.option > .container {
+.lsd.menu[type=context].is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.menu[type=context] .lsd.option > .container {
color: #eaeaea;
font-size: 11px;
padding: 0 5px;
line-height: 16px; }
-.art.menu[type=context] .art.option.is-chosen > .container, .art.menu[type=context] .art.option.is-selected > .container {
+.lsd.menu[type=context] .lsd.option.is-chosen > .container, .lsd.menu[type=context] .lsd.option.is-selected > .container {
color: white;
background: #cccccc; }
-.art.scrollbar {
+.lsd.scrollbar {
cursor: pointer;
--art-stroke-color: hsb(0, 0, 0, 0.3);
--art-glyph-color: hsb(82, 0, 100, 0.5);
--art-fill-color: hsb(0, 0, 40, 0.5);
--art-corner-radius: 6; }
-.art.scrollbar .art.button {
+-lsd-stroke-color: hsb(0, 0, 0, 0.3);
+-lsd-glyph-color: hsb(82, 0, 100, 0.5);
+-lsd-fill-color: hsb(0, 0, 40, 0.5);
+-lsd-corner-radius: 6; }
+.lsd.scrollbar .lsd.button {
display: none; }
-.art.scrollbar.is-horizontal .art.track {
+.lsd.scrollbar.is-horizontal .lsd.track {
height: 14px; }
-.art.scrollbar.is-vertical {
+.lsd.scrollbar.is-vertical {
width: 12px; }
-.art.scrollbar.is-vertical .art.track {
+.lsd.scrollbar.is-vertical .lsd.track {
width: 10px; }
-.art.scrollbar.is-vertical {
+.lsd.scrollbar.is-vertical {
height: 16px;
top: 0;
right: 0; }
-.art.scrollbar.is-horizontal {
+.lsd.scrollbar.is-horizontal {
bottom: 0;
left: 0; }
-.art.scrollbar .art.track .art.thumb {
- -art-fill-color: hsb(0, 0, 100, 0.3);
+.lsd.scrollbar .lsd.track .lsd.thumb {
+ -lsd-fill-color: hsb(0, 0, 100, 0.3);
width: 12px;
height: 12px;
- -art-corner-radius: 6; }
+ -lsd-corner-radius: 6; }
-.art.section {
+.lsd.section {
width: inherit; }
-html > body .art.section.id-buttons {
+html > body .lsd.section.id-buttons {
padding: 0 10px; }
-.art.section.centered {
+.lsd.section.centered {
text-align: center; }
-.art.form .art.section {
+.lsd.form .lsd.section {
border-top: 1px solid rgba(103, 103, 103, 0.5);
border-bottom: 1px solid rgba(36, 36, 36, 0.5);
height: auto;
padding-top: 8px;
padding-bottom: 8px; }
-.art.form .art.section.first {
+.lsd.form .lsd.section.first {
border-top: 0; }
-.art.form .art.section.last {
+.lsd.form .lsd.section.last {
border-bottom: 0; }
-html > body .art.form .art.section.id-tos {
+html > body .lsd.form .lsd.section.id-tos {
padding-top: 0;
padding-bottom: 0;
- -art-min-height: 50px;
- -art-overflow: hidden;
+ -lsd-min-height: 50px;
+ -lsd-overflow: hidden;
border-bottom: 0;
border-top: 0; }
-.art.section:after {
+.lsd.section:after {
content: ".";
display: block;
height: 0px;
@@ -159,213 +175,221 @@ visibility: hidden;
_display: block;
zoom: 1; }
-.art.select {
+.lsd.select {
height: 16px;
width: auto;
--art-min-width: 70px;
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
--art-fill-color: hsb(0, 0, 22, 0.7);
--art-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
--art-corner-radius-top-left: 3px;
--art-corner-radius-top-right: 3px;
--art-corner-radius-bottom-left: 3px;
--art-corner-radius-bottom-right: 3px; }
-.art.select.is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.select > .container {
+-lsd-min-width: 70px;
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+-lsd-fill-color: hsb(0, 0, 22, 0.7);
+-lsd-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
+-lsd-corner-radius-top-left: 3px;
+-lsd-corner-radius-top-right: 3px;
+-lsd-corner-radius-bottom-left: 3px;
+-lsd-corner-radius-bottom-right: 3px;
+text-align: left; }
+.lsd.select.is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.select > .container {
font-size: 11px;
line-height: 16px;
padding: 0 5px;
color: #eaeaea; }
-.art.select .art.button {
- -art-background-color: false;
- -art-reflection-color: false;
- -art-fill-color: false;
- -art-corner-radius-top-right: inherit;
- -art-corner-radius-bottom-right: inherit;
+.lsd.select .lsd.button {
+ -lsd-background-color: false;
+ -lsd-reflection-color: false;
+ -lsd-fill-color: false;
+ -lsd-corner-radius-top-right: inherit;
+ -lsd-corner-radius-bottom-right: inherit;
float: right;
width: 16px;
height: 16px;
- -art-glyph: ART.Glyphs.triangleDown;
- -art-glyph-scale: 0.5;
- -art-glyph-top: 6px;
- -art-glyph-left: 6px;
- -art-glyph-color: hsb(0, 0, 100); }
+ -lsd-glyph: ART.Glyphs.triangleDown;
+ -lsd-glyph-scale: 0.5;
+ -lsd-glyph-top: 6px;
+ -lsd-glyph-left: 6px;
+ -lsd-glyph-color: hsb(0, 0, 100); }
-.art.window {
+.lsd.window {
display: inline-block;
vertical-align: top;
width: auto;
--art-min-width: 200px;
+-lsd-min-width: 200px;
height: auto;
--art-corner-radius-top-left: 7px;
--art-corner-radius-top-right: 7px;
--art-corner-radius-bottom-left: 7px;
--art-corner-radius-bottom-right: 7px;
--art-stroke-color: "[{0: hsb(60, 0, 63), 0.05: hsb(0, 0, 30), 0.95: hsb(0, 0, 30), 1: hsb(0, 0, 28)}]";
--art-stroke-width: 1px;
--art-shadow-blur: 10px;
--art-shadow-offset-y: 2px;
--art-shadow-quality: best;
--art-shadow-color: hsb(0, 0, 0, 0.5);
+-lsd-corner-radius-top-left: 7px;
+-lsd-corner-radius-top-right: 7px;
+-lsd-corner-radius-bottom-left: 7px;
+-lsd-corner-radius-bottom-right: 7px;
+-lsd-stroke-color: "[{0: hsb(60, 0, 63), 0.05: hsb(0, 0, 30), 0.95: hsb(0, 0, 30), 1: hsb(0, 0, 28)}]";
+-lsd-stroke-width: 1px;
+-lsd-shadow-blur: 10px;
+-lsd-shadow-offset-y: 2px;
+-lsd-shadow-quality: best;
+-lsd-shadow-color: hsb(0, 0, 0, 0.5);
line-height: 16px;
font-family: Helvetica;
font-size: 11px; }
-.art.window[draggable] {
+.lsd.window[draggable] {
position: absolute; }
-.art.window .art.input, .art.window .art.textarea, .art.window .art.button, .art.window .art.select {
- -art-shadow-blur: 1px;
- -art-shadow-offset-y: 1px;
- -art-shadow-color: hsb(0, 0, 0); }
-.art.window .art.input[type=text].is-focused, .art.window .art.input[type=checkbox].is-focused, .art.window .art.input[type=range].is-focused, .art.window .art.select.is-focused {
- -art-shadow-color: hsb(212, 58, 93);
- -art-shadow-blur: 5;
- -art-shadow-offset-y: 0;
- -art-stroke-color: hsb(212, 58, 93); }
-.art.window .art.select .art.button {
- -art-shadow-color: false; }
-html > body .art.window.is-focused .art.id-header {
- -art-reflection-color: "[{0: hsb(0, 0, 75, 0.20), 0.5: hsb(0, 0, 75, 0.25), 0.55: hsb(0, 0, 0, 0), 1: hsb(0, 0, 0, 0)}]"; }
-html > body .art.window .art.id-header {
- -art-corner-radius-top-left: inherit;
- -art-corner-radius-top-right: inherit;
- -art-background-color: hsb(216, 0, 38, 0.8);
+.lsd.window .lsd.input, .lsd.window .lsd.textarea, .lsd.window .lsd.button, .lsd.window .lsd.select {
+ -lsd-shadow-blur: 1px;
+ -lsd-shadow-offset-y: 1px;
+ -lsd-shadow-color: hsb(0, 0, 0); }
+.lsd.window .lsd.input[type=text].is-focused, .lsd.window .lsd.input[type=checkbox].is-focused, .lsd.window .lsd.input[type=range].is-focused, .lsd.window .lsd.select.is-focused {
+ -lsd-shadow-color: hsb(212, 58, 93);
+ -lsd-shadow-blur: 5;
+ -lsd-shadow-offset-y: 0;
+ -lsd-stroke-color: hsb(212, 58, 93); }
+.lsd.window .lsd.select .lsd.button {
+ -lsd-shadow-color: false; }
+html > body .lsd.window.is-focused .lsd.id-header {
+ -lsd-reflection-color: "[{0: hsb(0, 0, 75, 0.20), 0.5: hsb(0, 0, 75, 0.25), 0.55: hsb(0, 0, 0, 0), 1: hsb(0, 0, 0, 0)}]"; }
+html > body .lsd.window .lsd.id-header {
+ -lsd-corner-radius-top-left: inherit;
+ -lsd-corner-radius-top-right: inherit;
+ -lsd-background-color: hsb(216, 0, 38, 0.8);
height: 18px;
line-height: 18px; }
-html > body .art.window .art.id-header .art.id-title {
+html > body .lsd.window .lsd.id-header .lsd.id-title {
float: left;
width: 100%;
font-size: 11.5px;
z-index: 10; }
-html > body .art.window .art.id-header .art.id-title .container {
+html > body .lsd.window .lsd.id-header .lsd.id-title .container {
padding-top: 2px;
line-height: 16px;
font-family: Helvetica;
color: white;
text-align: center; }
-html > body .art.window .art.id-header .art.id-buttons {
+html > body .lsd.window .lsd.id-header .lsd.id-buttons {
float: left;
padding: 0 4px;
z-index: 20; }
-html > body .art.window .art.id-header .art.id-buttons .art.button {
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
- -art-*display: inline;
+ -lsd-*display: inline;
margin-top: 2px;
margin-right: 5px;
height: 13px;
width: 13px;
- -art-corner-radius: 6px;
- -art-background-color: hsb(216, 0, 100, 0.75);
- -art-glyph-color: hsb(0, 0, 0, 0.6);
- -art-glyph-scale: 1.25;
- -art-glyph-top: -1px;
- -art-glyph-left: -1px; }
-html > body .art.window .art.id-header .art.id-buttons .art.button.id-close {
- -art-glyph: ART.Glyphs.smallCross; }
-html > body .art.window .art.id-content {
- -art-corner-radius-bottom-left: inherit;
- -art-corner-radius-bottom-right: inherit;
- -art-background-color: hsb(0, 0, 17, 0.55); }
-html > body .art.window .art.id-content .art.form {
+ -lsd-corner-radius: 6px;
+ -lsd-background-color: hsb(216, 0, 100, 0.75);
+ -lsd-glyph-color: hsb(0, 0, 0, 0.6);
+ -lsd-glyph-scale: 1.25;
+ -lsd-glyph-top: -1px;
+ -lsd-glyph-left: -1px; }
+html > body .lsd.window .lsd.id-header .lsd.id-buttons .lsd.button.id-close {
+ -lsd-glyph: ART.Glyphs.smallCross; }
+html > body .lsd.window .lsd.id-content {
+ -lsd-corner-radius-bottom-left: inherit;
+ -lsd-corner-radius-bottom-right: inherit;
+ -lsd-background-color: hsb(0, 0, 17, 0.55); }
+html > body .lsd.window .lsd.id-content .lsd.form {
padding: 10px 7px; }
-html > body .art.window .art.id-footer {
+html > body .lsd.window .lsd.id-footer {
display: none; }
-html > body .art.window .art.id-handle {
- -art-glyph: ART.Glyphs.resize;
+html > body .lsd.window .lsd.id-handle {
+ -lsd-glyph: ART.Glyphs.resize;
z-index: 10;
position: absolute;
- -art-glyph-color: hsb(0, 0, 50, 0.8);
- -art-glyph-top: 2;
- -art-glyph-left: 0;
+ -lsd-glyph-color: hsb(0, 0, 50, 0.8);
+ -lsd-glyph-top: 2;
+ -lsd-glyph-left: 0;
width: 13px;
height: 15px;
- -art-glyph-scale: 0.75;
- -art-shadow-color: hsb(0, 0, 0, 0.4);
+ -lsd-glyph-scale: 0.75;
+ -lsd-shadow-color: hsb(0, 0, 0, 0.4);
float: right;
cursor: se-resize; }
-html > body .art.window .art.id-handle.is-active {
- -art-glyph-color: hsb(0, 0, 100, 0.7);
- -art-shadow-color: hsb(0, 0, 0, 0.6); }
+html > body .lsd.window .lsd.id-handle.is-active {
+ -lsd-glyph-color: hsb(0, 0, 100, 0.7);
+ -lsd-shadow-color: hsb(0, 0, 0, 0.6); }
-.art.input[type=checkbox] {
+.lsd.input[type=checkbox] {
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
--art-*display: inline;
+-lsd-*display: inline;
vertical-align: middle;
width: 10px;
height: 10px;
line-height: 16px;
--art-corner-radius: 3;
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
--art-fill-color: hsb(0, 0, 22);
--art-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]";
--art-glyph-color: false; }
-.art.input[type=checkbox].is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.input[type=checkbox].is-active {
- -art-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
-.art.input[type=checkbox].is-checked {
- -art-glyph: ART.Glyphs.checkMark;
- -art-glyph-top: 0px;
- -art-glyph-left: 1px;
- -art-glyph-scale: 1.2;
- -art-glyph-color: hsb(0, 0, 100); }
+-lsd-corner-radius: 3;
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+-lsd-fill-color: hsb(0, 0, 22);
+-lsd-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]";
+-lsd-glyph-color: false; }
+.lsd.input[type=checkbox].is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.input[type=checkbox].is-active {
+ -lsd-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
+.lsd.input[type=checkbox].is-checked {
+ -lsd-glyph: ART.Glyphs.checkMark;
+ -lsd-glyph-top: 0px;
+ -lsd-glyph-left: 1px;
+ -lsd-glyph-scale: 1.2;
+ -lsd-glyph-color: hsb(0, 0, 100); }
-.art.input[type="range"] {
+.lsd.input[type="range"] {
height: 3px;
margin-top: 6px;
margin-bottom: 6px;
--art-min-width: 70px;
+-lsd-min-width: 70px;
width: auto;
cursor: pointer;
--art-corner-radius: 1;
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
--art-stroke-color: "[hsb(0, 0, 5, 0.5), hsb(0, 0, 45, 0.5)]"; }
-.art.input[type="range"].is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.input[type="range"] .art.thumb {
+-lsd-corner-radius: 1;
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+-lsd-stroke-color: "[hsb(0, 0, 5, 0.5), hsb(0, 0, 45, 0.5)]"; }
+.lsd.input[type="range"].is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.input[type="range"] .lsd.thumb {
height: 7px;
width: 8px;
margin-top: -3px;
- -art-fill-color: hsb(0, 0, 22);
- -art-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]";
- -art-stroke-width: 1px;
- -art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
- -art-arrow-width: 6;
- -art-arrow-height: 4;
- -art-corner-radius: 1;
- -art-arrow-side: bottom;
- -art-arrow-position: 5;
- -art-fill-color: hsb(0, 0, 41);
- -art-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0)]";
- -art-stroke-color: "[{0: hsb(0, 0, 79), 0.1: hsb(0, 0, 60), 1: hsb(0, 0, 38)}]"; }
-.art.input[type="range"] .art.thumb.is-active {
- -art-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
-.art.input[type="range"] .art.thumb.is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+ -lsd-fill-color: hsb(0, 0, 22);
+ -lsd-reflection-color: "[hsb(0, 0, 100, 0.23), hsb(0, 0, 100, 0)]";
+ -lsd-stroke-width: 1px;
+ -lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+ -lsd-arrow-width: 6;
+ -lsd-arrow-height: 4;
+ -lsd-corner-radius: 1;
+ -lsd-arrow-side: bottom;
+ -lsd-arrow-position: 5;
+ -lsd-fill-color: hsb(0, 0, 41);
+ -lsd-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0)]";
+ -lsd-stroke-color: "[{0: hsb(0, 0, 79), 0.1: hsb(0, 0, 60), 1: hsb(0, 0, 38)}]"; }
+.lsd.input[type="range"] .lsd.thumb.is-active {
+ -lsd-reflection-color: "[hsb(0, 0, 100, 0.2), hsb(0, 0, 100, 0.25)]"; }
+.lsd.input[type="range"] .lsd.thumb.is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+
+.lsd.input[type=text], .lsd.textarea {
+zoom: 1;
+display: inline;
+display: -moz-inline-box;
+display: inline-block;
+-lsd-*display: inline; }
-.art.input[type=text], .art.textarea {
+.lsd.input[type=text], .lsd.textarea {
height: 16px;
width: auto; }
-.art.input[type=text] {
--art-stroke-width: 1px;
--art-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
--art-fill-color: hsb(0, 0, 22, 0.7);
--art-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
+.lsd.input[type=text] {
+-lsd-stroke-width: 1px;
+-lsd-stroke-color: "[hsb(0, 0, 57), hsb(0, 0, 33)]";
+-lsd-fill-color: hsb(0, 0, 22, 0.7);
+-lsd-reflection-color: "[hsb(0, 0, 100, 0.20), hsb(0, 0, 100, 0)]";
width: 70px; }
-.art.input[type=text].is-active {
- -art-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
+.lsd.input[type=text].is-active {
+ -lsd-stroke-color: "[hsb(0, 0, 50), hsb(0, 0, 20)]"; }
-.art.input input, .art.textarea textarea {
+.lsd.input input, .lsd.textarea textarea {
border: 0;
line-height: 12px;
font-size: 11px;
@@ -377,16 +401,19 @@ display: block;
outline: none;
color: white; }
+.lsd.input.round {
+-lsd-corner-radius: 5px; }
+
svg {
display: block; }
v\:* {
background: transparent; }
-.art.* {
--art-shadow-blur: 0; }
+.lsd.* {
+-lsd-shadow-blur: 0; }
-.art:after {
+.lsd:after {
content: ".";
display: block;
height: 0px;
@@ -395,11 +422,11 @@ visibility: hidden;
_display: block;
zoom: 1; }
-.art {
+.lsd {
position: relative; }
-.art > svg {
+.lsd > svg {
position: absolute;
top: 0;
left: 0; }
-.art > svg ~ * {
+.lsd > svg ~ * {
position: relative; }
View
26 Demos/Assets/Styles/Themes/Skeleton/screen.css
@@ -1,23 +1,23 @@
-.art.form.two-column .art.label, .art.form.two-column .art.input {
+.lsd.form.two-column .lsd.label, .lsd.form.two-column .lsd.input {
float: left; }
-.art.scrollbar {
+.lsd.scrollbar {
height: 16px;
width: 16px; }
-.art.scrollbar.is-horizontal .art.track {
+.lsd.scrollbar.is-horizontal .lsd.track {
height: 14px;
margin-left: 16px; }
-.art.scrollbar.is-vertical .art.track {
+.lsd.scrollbar.is-vertical .lsd.track {
width: 14px;
margin-top: 16px; }
-.art.scrollbar .art.track .art.thumb {
+.lsd.scrollbar .lsd.track .lsd.thumb {
width: 12px;
height: 12px; }
-.art.section {
+.lsd.section {
width: inherit; }
-.art.section:after {
+.lsd.section:after {
content: ".";
display: block;
height: 0px;
@@ -26,14 +26,14 @@ visibility: hidden;
_display: block;
zoom: 1; }
-.art.select {
+.lsd.select {
height: 18px;
width: auto; }
-.art.select .art.button {
+.lsd.select .lsd.button {
width: 18px;
height: 18px; }
-.art.input, .art.textarea {
+.lsd.input, .lsd.textarea {
height: 18px;
width: 170px; }
@@ -43,10 +43,10 @@ display: block; }
v\:* {
background: transparent; }
-.art.* {
--art-shadow-blur: 0; }
+.lsd.* {
+-lsd-shadow-blur: 0; }
-.art:after {
+.lsd:after {
content: ".";
display: block;
height: 0px;
View
27 Demos/Assets/Styles/controls.css
@@ -0,0 +1,27 @@
+ul.controls > li {
+ zoom: 1;
+ display: inline;
+ display: -moz-inline-box;
+ display: inline-block;
+ *display: inline;
+ vertical-align: top;
+ width: 8em;
+ height: 8em;
+ padding: 1em;
+ background: #eeeeee;
+ border: 2px solid #cccccc;
+ position: relative;
+ border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -webkit-border-radius: 0.5em;
+ margin: 0.5em;
+ text-align: center; }
+ ul.controls > li span.label {
+ position: absolute;
+ width: 10em;
+ margin-left: -5em;
+ left: 50%;
+ bottom: 1em;
+ font: bold 0.8em Helvetica;
+ text-shadow: 0 1px 0 #e5e5ee;
+ filter: dropshadow(color=#e5e5ee, offX=0, offY=1px); }
View
67 Demos/HUD/controls.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<head>
+ <title>HUD Theme controls</title>
+ <script type='text/javascript'>
+ //<![CDATA[
+ window.prefix = '../../../lsd-examples/Demos/';
+ //]]>
+ </script>
+ <script src='../../../lsd-examples/Scripts/includes.js'></script>
+ <link href='../Assets/Styles/Themes/HUD/screen.css' rel='stylesheet art' />
+ <link href='../Assets/Styles/controls.css' rel='stylesheet' />
+ <script type='text/javascript'>
+ //<![CDATA[
+ window.addEvent('domready', function() {
+ LSD.Sheet.decompile('lsd', function() {
+ new LSD.Document;
+ $$('button', 'select', 'input', 'menu').each(LSD.Layout.replace)
+ });
+ })
+ //]]>
+ </script>
+</head>
+<body>
+ <ul class='controls'><li>
+ <button>Cancel</button>
+ <span class='label'>Button</span>
+ </li><li>
+ <button class='default'>OK</button>
+ <span class='label'>Default button</span>
+ </li><li>
+ <select>
+ <option inherit='partial'>Pop up</option>
+ <option inherit='partial'>Item</option>
+ </select>
+ <span class='label'>Selectbox</span>
+ </li><li>
+ <select menu-position='bottom'>
+ <option inherit='partial'>Pop up</option>
+ <option inherit='partial'>Item</option>
+ </select>
+ <span class='label'>Dropdown selectbox</span>
+ </li><li>
+ <input />
+ <span class='label'>Standart text field</span>
+ </li><li>
+ <input class='round' />
+ <span class='label'>Rounded text field</span>
+ </li><li>
+ <input id='hello' type='checkbox' />
+ <label for='hello'>Hello friend!</label>
+ <span class='label'>Checkbox</span>
+ </li><li>
+ <input id='another' type='radio' />
+ <label for='another'>Another option</label>
+ <span class='label'>Radio button</span>
+ </li><li>
+ <menu class='segmented' type='toolbar'>
+ <button class='first'>Foo</button>
+ <button>Bar</button>
+ <button class='last'>1</button>
+ </menu>
+ <span class='label'>Segmented buttons</span>
+ </li><li>
+ <input type='range' />
+ <span class='label'>Range input</span>
+ </li></ul>
+</body>
View
29 Demos/Styles/controls.sass
@@ -0,0 +1,29 @@
+@import ../../Styles/Mixin/Base
+
+body, html, body > ul
+ :padding 0
+ :margin 0
+
+ul.controls
+ > li
+ +inline-block
+ :vertical-align top
+ :width 8em
+ :height 8em
+ :padding 1em
+ :background #eee
+ :border 2px solid #ccc
+ :position relative
+ :border-radius 0.5em
+ :-moz-border-radius 0.5em
+ :-webkit-border-radius 0.5em
+ :margin 0.5em
+ :text-align center
+ span.label
+ :position absolute
+ :width 10em
+ :margin-left -5em
+ :left 50%
+ :bottom 1em
+ :font bold 0.8em Helvetica
+ +dark-emboss
View
316 Demos/aristo.html
@@ -1,21 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>ART Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <script>
- window.prefix = '../../lsd-examples/Demos/';
- if (location.host.indexOf('github') > -1) {
- window.loader = function(src) {
- src = src.replace(/^.*(lsd|lsd-base|lsd-examples|mootools-ext)\//, 'http://inviz.github.com/$1/').
- replace(/^.*(qfocuser|cssparser)\//, 'http://github.com/inviz/$1/raw/master/').
- replace(/^.*(..\/..\/..\/Source)\//, 'http://inviz.github.com/lsd/Source/').
- replace(/^.*(..\/..\/Source)\//, 'http://inviz.github.com/lsd-examples/Source/').
- replace(/^.*(mootools-core|mootools-more)\//, 'http://github.com/mootools/$1/raw/master/').
- replace(/^.*(mootools-color|mootools-touch|art)\//, 'http://github.com/kamicane/$1/raw/master/')
-
- document.write('<scr' + 'ipt src="' + (prefix || '') + src + '"></sc' + 'ript>');
- }
+ <title>LSD Demo</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <script>
+ window.prefix = '../../lsd-examples/Demos/';
+ if (location.host.indexOf('github') > -1) {
+ window.loader = function(src) {
+ src = src.replace(/^.*(lsd|lsd-base|lsd-examples|mootools-ext)\//, 'http://inviz.github.com/$1/').
+ replace(/^.*(qfocuser|cssparser)\//, 'http://github.com/inviz/$1/raw/master/').
+ replace(/^.*(..\/..\/..\/Source)\//, 'http://inviz.github.com/lsd/Source/').
+ replace(/^.*(..\/..\/Source)\//, 'http://inviz.github.com/lsd-examples/Source/').
+ replace(/^.*(mootools-core|mootools-more)\//, 'http://github.com/mootools/$1/raw/master/').
+ replace(/^.*(mootools-color|mootools-touch|art)\//, 'http://github.com/kamicane/$1/raw/master/')
+
+ document.write('<scr' + 'ipt src="' + (prefix || '') + src + '"></sc' + 'ript>');
+ }
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18508300-1']);
@@ -27,165 +27,147 @@
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
- }
- </script>
- <script src="../../lsd-examples/Scripts/includes.js"></script>
- <!-- <script src="../Scripts/lsd.js"></script> -->
+ }
+ </script>
+ <script src="../../lsd-examples/Scripts/includes.js"></script>
+ <!-- <script src="../Scripts/lsd.js"></script> -->
- <link rel="art stylesheet" href="./Assets/Styles/Themes/Aristo/screen.css">
- <!-- <link rel="art stylesheet" href="./Assets/Styles/Themes/Aristo/screen.css"> -->
+ <link rel="lsd stylesheet" href="./Assets/Styles/Themes/Aristo/screen.css">
+ <!-- <link rel="lsd stylesheet" href="./Assets/Styles/Themes/Aristo/screen.css"> -->
<!--
- <link rel="art stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
- <link rel="art stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
- <link rel="art stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
- -->
-
- <style>
- html, body {
- background: url(hztp://img.skitch.com/20100913-cddxp3qi29bphck9iuartyce8b.png);
- }
- </style>
- <script>
- window.addEvent('domready', function() {
-
- ART.Sheet.decompile('art', function() {
-
- //ART.Sheet.compile();
-
-
-
+ <link rel="lsd stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
+ <link rel="lsd stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
+ <link rel="lsd stylesheet" href="../../lsd-examples/Demos/Assets/Styles/Widgets.css">
+ -->
+
+ <style>
+ html, body {
+ background: url(hztp://img.skitch.com/20100913-cddxp3qi29bphck9iuartyce8b.png);
+ }
+ </style>
+ <script>
+ window.addEvent('domready', function() {
+
+ LSD.Sheet.decompile('lsd', function() {
+
+ //LSD.Sheet.compile();
+
+
+
if (window.$d) return;
- $d = new ART.Document
-
- var counter = {}
- counter.old = {
- redraws: ART.Widget.Paint.redraws,
- widgets: ART.Widget.count
- }
-
-
-
- var Aristo = new Class({
- Includes: [
- ART.Application,
- ART.Widget.Trait.Draggable.Stateful,
- Widget.Trait.Focus.Stateful,
- ART.Widget.Trait.Fitting
- ],
-
- events: {
- element: {
- mousedown: 'retain'
- }
- },
-
- expression: "window.aristo",
-
- layout: {
- 'section#header': {
- 'menu[type=toolbar][hoverable][shy]#buttons': {
- 'button#close': {},
- 'button#minimize': {},
- 'button#maximize': {}
- },
- '#title[container]': {}
- },
- 'section#content[container][scrollable]': {
- 'form.two-column#appearance': {
- 'section#first.first': [
- {'label[for=appearance]': 'Text input:'},
- 'input#appearance',
- ],
- 'section#firstandhalf': [
- {'label[for=appearance]': 'Slider:'},
- 'input[type=range]#count'
- ],
- 'section#third': [
- {'label[for=selectbox]': 'Selectbox:'},
- 'select#selectbox'
- ],
- 'section#fourth.centered': [
- 'input[type=checkbox]#checkbox',
- {'label.inline[for=checkbox]': 'You\'re feeiling alright?'}
- ],
- 'section#buttons.last[hoverable]': {
- 'button#reset.first': 'Reset',
- 'button#revert.grey': 'Revert',
- 'button#apply:disabled.last': 'Apply'
- }
- }
- }
- }
+ $d = new LSD.Document
+
+ var counter = {}
+ counter.old = {
+ redraws: LSD.Widget.Paint.redraws,
+ widgets: LSD.Widget.count
+ }
+
+
+
+ var Aristo = new Class({
+ Includes: [
+ LSD.Application,
+ LSD.Widget.Trait.Draggable.Stateful,
+ Widget.Trait.Focus.Stateful,
+ LSD.Widget.Trait.Fitting
+ ],
+
+ options: {
+ events: {
+ element: {
+ mousedown: 'retain'
+ }
+ },
+ layout: {
+ self: "window.aristo",
+ children: {
+ 'section#header': {
+ 'menu[type=toolbar][hoverable][shy]#buttons': {
+ 'button#close': {},
+ 'button#minimize': {},
+ 'button#maximize': {}
+ },
+ '#title[container]': {}
+ },
+ 'section#content[container][scrollable]': {
+ 'form.two-column#appearance': {
+ 'section#first.first': [
+ {'label[for=appearance]': 'Text input:'},
+ 'input#appearance',
+ ],
+ 'section#firstandhalf': [
+ {'label[for=appearance]': 'Slider:'},
+ 'input[type=range]#count'
+ ],
+ 'section#third': [
+ {'label[for=selectbox]': 'Selectbox:'},
+ 'select#selectbox'
+ ],
+ 'section#fourth.centered': [
+ 'input[type=checkbox]#checkbox',
+ {'label.inline[for=checkbox]': 'You\'re feeiling alright?'}
+ ],
+ 'section#buttons.last[hoverable]': {
+ 'button#reset.first': 'Reset',
+ 'button#revert.grey': 'Revert',
+ 'button#apply:disabled.last': 'Apply'
+ }
+ }
+ }
+ }
+ }
+ },
+
+
});
-
-
- if (window.console && console.profile) console.profile('Aristo render')
- $a = new Aristo();
- $a.content.setStyles({minHeight: 205, width: 300})
- $a.inject($d);
- $a.setStyles({top: 50, left: 50, zIndex: 400})
- $a.header.title.setContent('Aristo')
- if (window.console && console.profile) console.profileEnd('Aristo render')
-
-
-
- var Scrollable = new Class({
- Includes: [
- ART.Application,
- ART.Widget.Trait.Draggable.Stateful,
- Widget.Trait.Focus.Stateful,
- ART.Widget.Trait.Fitting
- ],
-
- events: {
- element: {
- mousedown: 'retain'
- }
- },
-
- expression: "window.aristo",
-
- layout: {
- 'section#header': {
- 'menu[type=toolbar][hoverable][shy]#buttons': {
- 'button#close': {},
- 'button#minimize': {},
- 'button#maximize': {}
- },
- '#title[container]': {}
- },
- 'section#content[container][scrollable]': {
- 'glyph[name=drag-handle][at=bottom right]#handle': {}
- }
- }
-
+ var Scrollable = new Class({
+ Includes: [
+ LSD.Application,
+ LSD.Widget.Trait.Draggable.Stateful,
+ Widget.Trait.Focus.Stateful,
+ LSD.Widget.Trait.Fitting
+ ],
+
+ options: {
+ events: {
+ element: {
+ mousedown: 'retain'
+ }
+ },
+ layout: {
+ self: "window.aristo",
+ children: {
+ 'section#header': {
+ 'menu[type=toolbar][hoverable][shy]#buttons': {
+ 'button#close': {},
+ 'button#minimize': {},
+ 'button#maximize': {}
+ },
+ '#title[container]': {}
+ },
+ 'section#content[container][scrollable]': {
+ 'glyph[name=drag-handle][at=bottom right]#handle': {}
+ }
+ }
+ }
+ }
});
-
- $b = new Scrollable
- $b.content.setStyles({minHeight: 55, width: 300})
- $b.inject($d);
- $b.setStyles({top: 50, left: 400, zIndex: 400})
- $b.header.title.setContent('Scrollbars example')
- $b.content.setContent(new Element('div', {'html': 'Orange box of truth (245x100)<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>', 'styles': {'background': 'orange', width: 245, height: 100, minHeight: 50}}))
- $b.fit()
-
- counter.current = {
- redraws: ART.Widget.Paint.redraws,
- widgets: ART.Widget.count
- }
- counter.delta = {
- redraws: counter.current.redraws - counter.old.redraws,
- widgets: counter.current.widgets - counter.old.widgets,
- }
-
- console.info('Widgets: ', counter.delta.widgets, 'Redraws: ', counter.delta.redraws)
-
- });
-
- });
- </script>
+
+ $b = new Scrollable
+ $b.content.setStyles({minHeight: 55, width: 300})
+ $b.inject($d);
+ $b.setStyles({top: 50, left: 400, zIndex: 400})
+ $b.header.title.setContent('Scrollbars example')
+ $b.content.setContent(new Element('div', {'html': 'Orange box of truth (245x100)<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>Resize<br>', 'styles': {'background': 'orange', width: 245, height: 100, minHeight: 50}}))
+ $b.fit()
+
+ });
+
+ });
+ </script>
</head>
<body>
</body>
View
33 Demos/index.html
@@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>ART Demo</title>
+ <title>LSD Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script>
window.prefix = '../../lsd-examples/Demos/';
@@ -36,45 +36,24 @@
<script src="../../lsd-examples/Scripts/includes.js"></script>
<!-- <script src="../Scripts/lsd.js"></script> -->
- <link rel="art stylesheet" href="./Assets/Styles/Themes/HUD/screen.css">
+ <link rel="lsd stylesheet" href="./Assets/Styles/Themes/HUD/screen.css">
<script>
window.addEvent('domready', function() {
- ART.Sheet.decompile('art', function() {
+ LSD.Sheet.decompile('lsd', function() {
- //ART.Sheet.compile();
+ //LSD.Sheet.compile();
if (window.$d) return;
- $d = new ART.Document
-
- var counter = {}
- counter.old = {
- redraws: ART.Widget.Paint.redraws,
- widgets: ART.Widget.count
- }
+ $d = new LSD.Document
if (window.console && console.profile) console.profile('HUD render')
- $z = ART.Layout.replace(document.getElement('window.hud'));
+ $z = LSD.Layout.replace(document.getElement('window.hud'));
if (window.console && console.profile) console.profileEnd('HUD render')
-
-
-
-
- counter.current = {
- redraws: ART.Widget.Paint.redraws,
- widgets: ART.Widget.count
- }
- counter.delta = {
- redraws: counter.current.redraws - counter.old.redraws,
- widgets: counter.current.widgets - counter.old.widgets,
- }
-
- console.info('Widgets: ', counter.delta.widgets, 'Redraws: ', counter.delta.redraws)
-
});
});
View
2  Styles/Themes/Aristo/Input/_Range.sass
@@ -2,7 +2,7 @@ input[type="range"]
:height 3px
:margin-top 9px
:margin-bottom 6px
- :min-width 93px
+ :min-width 90px
:width auto
:cursor pointer