From 30f0fbdf68b05a11de002bf26736979d29370f11 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Tue, 16 Apr 2013 01:33:44 -0400
Subject: [PATCH] added side menu

Former-commit-id: 5e391d5d4927d72d80c0893c9d210f35d6d72288
Former-commit-id: d6cfd05c8556215ffcb652e0df782fd7bef09eed
---
 examples/button.html   | 60 ++++++++++++++++++++++++++++++++++--------
 examples/example.css   | 43 +++++++++++++++++++-----------
 examples/module.html   | 51 ++++++++++++++++++++++++++++++++---
 examples/ui/button.css |  5 ++++
 examples/ui/form.css   |  2 +-
 examples/ui/panel.css  |  4 +++
 6 files changed, 135 insertions(+), 30 deletions(-)

diff --git a/examples/button.html b/examples/button.html
index ce173f7cc..85ca38fcf 100755
--- a/examples/button.html
+++ b/examples/button.html
@@ -31,18 +31,56 @@
 
 <div class="sidr" id="menu">
   <ul>
-    <li><a href="#">UI Library</a></li>
-    <li class="active"><a href="#">Button</a></li>
-    <li><a href="#">Shape</a></li>
+    <li><a href="module.html">Introduction</a></li>
+    <li><a>Download</a></li>
+    <li><a href="#">UI</a>
+      <ul>
+        <li class="active"><a href="#">Button</a></li>
+        <li><a>Text</a></li>
+        <li><a>Headers</a></li>
+        <li><a>Columns</a></li>
+        <li><a>Elements (Grid System)</a></li>
+        <li><a>Tags</a></li>
+        <li><a>Items (Lists of Content)</a></li>
+        <li><a>Panels (Type of Menu)</a></li>
+        <li><a>Forms</a></li>
+        <li><a>Fields</a></li>
+        <li><a>Checkboxes</a></li>
+        <li><a>Icons</a></li>
+        <li><a>Dividers</a></li>
+      </ul>
+    </li>
+    <li><a href="#">Modules</a>
+      <ul>
+        <li><a>Accordion</a></li>
+        <li><a>API</a></li>
+        <li><a>Animation</a></li>
+        <li><a>Chat Room</a></li>
+        <li><a>Form Validation</a></li>
+        <li><a>Placeholder Text</a></li>
+        <li><a>Modal</a></li>
+        <li><a>Nag</a></li>
+        <li><a>Popup</a></li>
+        <li><a>Search</a></li>
+        <li><a>Star Rating</a></li>
+        <li><a>Shape</a></li>
+        <li><a>State</a></li>
+        <li><a>Tabs</a></li>
+      </ul>
+    </li>
   </ul>
 </div>
+<div class="ui left attached vertical blue menu buttons">
+  <div class="ui menu button">Menu</div>
+</div>
 <div class="full container">
-  <div class="ui left attached vertical blue menu buttons">
-    <div class="ui menu button">Menu</div>
-    <div class="ui button">Source</div>
-  </div>
+<!--   <ul class="ui vertical panel sub menu">
+    <li>Standard</li>
+    <li>State</li>
+    <li>Plural</li>
+    <li>Variations</li>
+  </ul> -->
   <div class="container">
-
     <h1>Semantic UI Spec</h1>
 
     <p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
@@ -70,10 +108,10 @@
     <div class="ui loading button">Loading Button</div>
 
     <h4>Can alert to a succesful action:</h4>
-    <div class="ui success button">Succesful Button</div>
+    <div class="ui success button">Successful Button</div>
 
     <h4>Can alert user of an error:</h4>
-    <div class="ui error button">Succesful Button</div>
+    <div class="ui error button">Error Button</div>
 
     <h2>Standard Variations</h2>
 
@@ -186,7 +224,7 @@
 
     <h4>Can be attached to an input field</h4>
     <div class="ui form">
-      <input type="text">
+      <input type="text" class="attached">
       <div class="ui attached button">Search</div>
     </div>  
 
diff --git a/examples/example.css b/examples/example.css
index 4ab2560d3..021cf5e0c 100755
--- a/examples/example.css
+++ b/examples/example.css
@@ -12,11 +12,11 @@
   font-style: normal;
 }
 @font-face {
-  font-family: 'Neutraface Bold';
+  font-family: 'Neutraface';
   src:
     url("fonts/neutraface-bold.otf") format('opentype')
   ;
-  font-weight: normal;
+  font-weight: bold;
   font-style: normal;
 }
 
@@ -35,13 +35,23 @@ a:hover {
   color: #00BAFF;
 }
 
-#example h1,
-#example h2,
-#example h3,
-#example a,
-#example .ui {
-  font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif;
-  font-weight: normal
+#example .sidr {
+  font-weight: bold;
+}
+#example .sidr ul li ul {
+  font-weight: normal;
+}
+#example .sidr ul li ul li a {
+  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
+}
+#example .sidr .active {
+  background-color: #555555;
+}
+#example .sidr .active > a {
+  color: #FFFFFF;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 
 /* text and headers */
@@ -51,7 +61,8 @@ a:hover {
   border-bottom: 1px solid #DDDDDD;
 }
 #example h1:first-child {
-  margin-top: 20px;
+  margin-top: 0px;
+  padding-top: 20px;
 }
 #example h2 {
   margin: 40px 0px 20px;
@@ -62,6 +73,7 @@ a:hover {
 }
 #example h4 {
   font-size: 16px;
+  font-weight: normal;
   color: #555555;
 }
 #example pre {
@@ -102,15 +114,15 @@ a:hover {
 
 
 /* content */
-#example .container {
-  width: 700px;
-  margin: 0px auto;
-}
 #example .full.container {
   position: relative;
   width: 1000px;
 }
 
+#example .container {
+  width: 700px;
+  margin: 0px auto;
+}
 #example .shortcuts {
   float: right;
   clear: both;
@@ -118,7 +130,8 @@ a:hover {
 
 #example .menu.buttons {
   position: fixed;
-  
+  margin-top: 20px;
+  margin-left: -8px;
 }
 
 
diff --git a/examples/module.html b/examples/module.html
index 8bfe9eb5a..d8a197cac 100755
--- a/examples/module.html
+++ b/examples/module.html
@@ -9,15 +9,16 @@
   <link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" />
 
+  <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
+
   <link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" />
 
   <link rel="stylesheet" href="example.css" type="text/css" media="screen" />
 
   <script src="../dependencies/jquery.js" type="text/javascript"></script>
+  <script src="library/sidr.js" type="text/javascript"></script>
   <script src="ui/state.js" type="text/javascript"></script>
 
-  <script src="../dependencies/transform2d.js" type="text/javascript"></script>
-  <script src="../dependencies/transform3d.js" type="text/javascript"></script>
   <script src="../src/shape.js" type="text/javascript"></script>
 
   <script src="example.js" type="text/javascript"></script>
@@ -25,7 +26,51 @@
   </head>
 
 <body id="example">
-<div class="container">
+<div class="sidr" id="menu">
+  <ul>
+    <li class="active"><a href="module.html">Introduction</a></li>
+    <li><a>Download</a></li>
+    <li><a href="#">UI</a>
+      <ul>
+        <li><a href="button.html">Button</a></li>
+        <li><a>Text</a></li>
+        <li><a>Headers</a></li>
+        <li><a>Columns</a></li>
+        <li><a>Elements (Grid System)</a></li>
+        <li><a>Tags</a></li>
+        <li><a>Items (Lists of Content)</a></li>
+        <li><a>Panels (Type of Menu)</a></li>
+        <li><a>Forms</a></li>
+        <li><a>Fields</a></li>
+        <li><a>Checkboxes</a></li>
+        <li><a>Icons</a></li>
+        <li><a>Dividers</a></li>
+      </ul>
+    </li>
+    <li><a href="#">Modules</a>
+      <ul>
+        <li><a>Accordion</a></li>
+        <li><a>API</a></li>
+        <li><a>Animation</a></li>
+        <li><a>Chat Room</a></li>
+        <li><a>Form Validation</a></li>
+        <li><a>Placeholder Text</a></li>
+        <li><a>Modal</a></li>
+        <li><a>Nag</a></li>
+        <li><a>Popup</a></li>
+        <li><a>Search</a></li>
+        <li><a>Star Rating</a></li>
+        <li><a>Shape</a></li>
+        <li><a>State</a></li>
+        <li><a>Tabs</a></li>
+      </ul>
+    </li>
+  </ul>
+</div>
+<div class="ui left attached vertical blue menu buttons">
+  <div class="ui menu button">Menu</div>
+</div>
+<div class="full container">
 
   <h1>Semantic</h1>
   
diff --git a/examples/ui/button.css b/examples/ui/button.css
index 9119b1f4b..d876a2ff6 100755
--- a/examples/ui/button.css
+++ b/examples/ui/button.css
@@ -376,6 +376,11 @@ input + .ui.attached.button {
 
   vertical-align: top;
 }
+input + .ui.attached.button.down {
+  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset;
+}
 .ui.attached.button.loading,
 .ui.attached.button.loading.hover {
   opacity: 1;
diff --git a/examples/ui/form.css b/examples/ui/form.css
index 2f9db0dad..23760e0e4 100644
--- a/examples/ui/form.css
+++ b/examples/ui/form.css
@@ -134,7 +134,7 @@
 ---------------------*/
 
 .ui.form input.attached {
-  float: left;
+  width: auto;
 }
 
 .ui.form .date.field > label {
diff --git a/examples/ui/panel.css b/examples/ui/panel.css
index 9560d13c1..f85e404de 100755
--- a/examples/ui/panel.css
+++ b/examples/ui/panel.css
@@ -9,6 +9,8 @@
   border: 1px solid #DADADA;
   border: 1px solid rgba(0, 0, 0, 0.12);
 
+  padding: 0px;
+
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -27,6 +29,8 @@
   cursor: pointer;
   float: left;
 
+  list-style-type: none;
+
   line-height: 1;
   padding: 14px 35px;
   vertical-align: middle;