--- /dev/null
+html {
+ font-size: 100%;
+}
+
+body {
+ font-family: "Trebuchet MS", Tahoma, Geneva, Helvetica, Arial, sans-serif;
+ font-size: 62.5%; /* Scale down to 10px */
+ line-height: 1.8em;
+ color: #5c666a;
+ background: #e9eced url(../img/body-bg.gif) repeat-x;
+}
+
+.clearer {
+ height: 0;
+ overflow: hidden;
+ clear: both;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+ font-size: 1em;
+}
+
+a {
+ text-decoration: none;
+}
+
+a:link {
+ color: #4696d0;
+}
+
+a:visited {
+ color: #7d9bb2;
+}
+
+a:hover {
+ color: #59b6fa;
+}
+
+a:active {
+ color: #ff581e;
+}
+
+a.more {
+ padding-right: 10px;
+ background: transparent url(../img/link-arrow.png) no-repeat center right;
+}
+
+a.more span {
+ color: #5c666a;
+}
+
+
+/* page furniture */
+
+#container {
+ width: 759px;
+ margin: 60px auto;
+}
+
+#container .header {
+ height: 81px;
+ background: transparent url(../img/header.png);
+}
+
+#container .content {
+ background: #fff url(../img/content-bg.png);
+ padding: 10px 27px 10px 27px;
+ width: 705px; /* for IE hasLayout, fixes beekaboo-bug */
+}
+
+#container .footer {
+ height: 72px;
+ background: transparent url(../img/footer.png) no-repeat;
+ position: relative;
+}
+
+#container .footer a {
+ display: block;
+ width: 95px;
+ height: 15px;
+ text-indent: -90000px;
+ position: absolute;
+ left: 27px;
+ bottom: 3px;
+ background: transparent url(../img/itmill-logo.png);
+ border: none;
+ overflow: hidden; /* IE6 fix */
+}
+
+#container .footer em {
+ display: block;
+ width: 111px;
+ height: 18px;
+ text-indent: -90000px;
+ position: absolute;
+ right: 27px;
+ bottom: 0;
+ background: transparent url(../img/itmill-slogan.png);
+}
+
+#container .header h1,
+#container .header em {
+ display: none;
+}
+
+#container .header a {
+ color: #5c666a;
+ float: right;
+ padding-right: 10px;
+ background: transparent url(../img/link-arrow2.png) no-repeat center right;
+ margin: 30px 27px 0 0;
+ border: none;
+ font-size: 1.2em;
+}
+
+
+
+/* content area */
+
+.content h2 {
+ font-size: 18px;
+ color: #f14c1a;
+ height: 18px;
+ padding: 4px 0 6px 34px;
+ letter-spacing: -0.02em;
+}
+
+#demos h2 {
+ background: transparent url(../img/icon-eye.png) no-repeat;
+}
+
+#demos {
+ font-size: 1.3em;
+}
+
+#demos {
+ width: 705px;
+ font-size: 1.2em;
+}
+
+#demos h4 {
+ font-weight: bold;
+ margin: 1em 0 0.2em 0;
+}
+
+
+/* demo icons */
+
+#demos ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#demos li {
+ float: left;
+ width: 160px;
+ height: 135px;
+ margin: 14px 15px 0 0;
+}
+
+#demos li a {
+ display: block;
+ padding-top: 115px;
+ height: 20px;
+ width: 160px;
+ text-align: center;
+}
+
+#demos #windowed-demos {
+ background: #fff url(../img/demos/windowed.png) no-repeat;
+}
+
+#demos #reservr {
+ background: #fff url(../img/demos/reservr.png) no-repeat;
+}
+
+#demos #feature-browser {
+ background: #fff url(../img/demos/features.png) no-repeat;
+}
+
+#demos #notifications {
+ background: #fff url(../img/demos/notifications.png) no-repeat;
+}
+
+
+/* additional demos */
+
+#additional {
+ width: 300px;
+ padding: 0 17px 0 17px;
+ margin-top: 20px;
+ background: #ecf0f3 url(../img/package-bg.png);
+ overflow: hidden;
+ font-size: 1.1em;
+ clear: left;
+}
+
+#additional .top {
+ height: 5px;
+ width: 334px;
+ margin: 0 -17px 0 -17px;
+ background: transparent url(../img/package-top.png);
+ overflow: hidden;
+}
+
+#additional .bottom {
+ height: 5px;
+ width: 334px;
+ margin: 0 -17px 0 -17px;
+ background: transparent url(../img/package-bottom.png);
+ overflow: hidden;
+}
+
+#additional-content {
+ margin: 13px 0 17px 0;
+}
+
+#additional ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#additional h3 {
+ font-size: 1.1em;
+ margin: 4px 0 5px 0;
+ color: #5b7b93;
+}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>IT Mill Toolkit 5 Demos</title>
+ <link rel="stylesheet" type="text/css" href="demo/css/demos.css" />
+ <!--[if IE]>
+ <link rel="stylesheet" type="text/css" href="demo/css/ie.css" />
+ <![endif]-->
+ <script type="text/javascript">
+
+ window.onload = function() {
+ itmill.init();
+ }
+
+ var itmill = function() {
+
+ var isIE = /MSIE/.test(navigator.userAgent) && !window.opera;
+ var packageOpen = false;
+ var packageContent;
+ var package;
+ var demoArea;
+
+ return {
+
+ init : function() {
+ // Fetch references
+ packageContent = document.getElementById("additional-content");
+ package = document.getElementById("additional");
+ demoArea = document.getElementById("demos");
+
+ // Hide package contents initially
+ packageContent.style.display = "none";
+
+ // Enable package contents panel hiding/showing
+ var toggle = package.getElementsByTagName("h3")[0];
+ toggle.style.cursor = "pointer";
+ toggle.title = "Show/hide package contents";
+ // Use the quick-n-dirty way to attach event listeners
+ toggle.onclick = this.togglePackage;
+
+ // TODO enable demo button hovers
+ var demos = demoArea.getElementsByTagName("li");
+ for(var i=0; i < demos.length; i++) {
+ demos[i].onmouseover = this.focusDemo;
+ //demos[i].onmouseout = this.blurDemos;
+ }
+ demoArea.onmouseout = this.blurDemos;
+
+
+ // TODO implement feedback popup
+ },
+
+ togglePackage : function() {
+ if(packageOpen) {
+ packageContent.style.display = "none";
+ packageOpen = false;
+ } else {
+ packageContent.style.display = "block";
+ packageOpen = true;
+ }
+ },
+
+ focusDemo : function(e) {
+ var evt = e ? e : window.event;
+ var target = evt.target ? evt.target.parentNode : evt.srcElement.parentNode; // Should be the LI element
+ if(target.nodeType != 1 || target.nodeName != "LI")
+ return;
+
+ var demos = document.getElementById("demos").getElementsByTagName("li");
+ for(var i=0; i < demos.length; i++) {
+ var demo = demos[i];
+ if(demo != target) {
+ if(isIE)
+ demo.style.filter = "alpha(opacity=60)";
+ else
+ demo.style.opacity = "0.6";
+
+ } else {
+ if(isIE)
+ demo.style.filter = "";
+ else
+ demo.style.opacity = "1";
+ }
+ }
+ },
+
+ blurDemos : function(e) {
+ var evt = e ? e : window.event;
+ var target = evt.toElement || evt.relatedTarget;
+ if((target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) && target.nodeName != "H2")
+ return;
+ var demos = demoArea.getElementsByTagName("li");
+ for(var i=0; i < demos.length; i++) {
+ if(isIE)
+ demos[i].style.filter = "";
+ else
+ demos[i].style.opacity = "1";
+ }
+ }
+
+ };
+ }();
+
+ </script>
+ </head>
+ <body>
+
+ <div id="container">
+
+ <div class="header">
+ <h1>Introducing IT Mill Toolkit 5</h1>
+ <em>Effortless web application development for Java-programmers.</em>
+ <a href="http://www.itmill.com" title="Open www.itmill.com">Visit itmill.com</a>
+ </div> <!-- /Header -->
+
+ <div class="content">
+
+ <div id="demos">
+ <h2>Demos</h2>
+ <ul>
+ <li id="feature-browser"><a href="feature-browser">Feature browser</a></li>
+ <li id="notifications"><a href="notification-demo">Notifications</a></li>
+ <li id="reservr"><a href="reservr">Reservation application</a></li>
+ <li id="windowed-demos"><a href="windowed-demo">Windowed demos</a></li>
+ </ul>
+ <div class="clearer"></div>
+ </div> <!-- /demos -->
+
+ <div class="clearer"></div>
+
+ <div id="additional">
+ <div class="top"></div>
+
+ <h3>» Additional demos</h3>
+
+ <div id="additional-content"> <!-- For JavaScript hooking -->
+
+ <ul>
+ <li><a href="table-demo">Table Demo</a></li>
+ <li><a href="select-demo">Select Demo</a></li>
+ </ul>
+
+ </div>
+
+ <div class="bottom"></div>
+ </div> <!-- /package-contents -->
+
+ <div class="clearer"></div>
+ </div> <!-- /content-->
+
+ <div class="footer">
+ <a href="http://www.itmill.com">IT Mill Ltd.</a>
+ <em>Interfacing IT</em>
+ </div> <!-- /footer -->
+
+ </div> <!-- /container -->
+
+ </body>
+</html>
projects / vaadin-framework.git / commitdiff