Updates to sidebar in docs

server/documents/collections/grid.html.eco

@@ -86,7 +86,7 @@ themes      : ['Default', 'Fixed-width']
     <div class="highlighted example">
       <h4 class="ui header">Column Widths</h4>
       <p>Column widths can be specified using <code>(x) wide</code> class names, each row will add up to 16 columns, if a column cannot fit it will automatically flow to the next row</p>
-      <div class="ui info message">If you create a grid with only one column, you do not need to specify width, it will automatically be assumed to be a <code>sixteen wide column</code></div>
+      <div class="ui ignored info message">If you create a grid with only one column, you do not need to specify width, it will automatically be assumed to be a <code>sixteen wide column</code></div>
       <div class="ui grid">
         <div class="eight wide column"></div>
         <div class="eight wide column"></div>
@@ -432,7 +432,7 @@ themes      : ['Default', 'Fixed-width']
     <div class="example">
       <h4 class="ui header">Row and Column Backgrounds</h4>
       <p>If you need to specify colors on grid rows of columns, you can use a <b>color variation</b></p>
-      <div class="ui info message ignored">
+      <div class="ui ignored info message ignored">
         <p>Using colored variations on grid columns will require you to use a <code>padded grid</code> variation to avoid coloring in the negative margins of the grid body.</p>
       </div>
       <div class="ui padded grid">

server/documents/elements/button.html.eco

@@ -48,7 +48,8 @@ themes      : ['Default', 'Classic', 'Basic', 'Bootstrap3', 'Twitter', 'Raised',
     <div class="ui button">
       Discard
     </div>
-    <div class="ui ignored hidden divider"></div>
+  </div>
+  <div class="another example">
     <div class="ui secondary button">
       Okay
     </div>

server/documents/elements/header.html.eco

@@ -215,7 +215,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
   <div class="example">
     <h4 class="ui header">Inverted</h4>
     <p>A header can have its colors inverted for contrast</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background
     </div>
     <div class="ui inverted segment">

server/documents/elements/icon.html.eco

@@ -1136,7 +1136,7 @@ themes      : ['Default']
 
     <div class="example">
       <h4 class="ui header">Bordered</h4>
-      <div class="ui info message">
+      <div class="ui ignored info message">
         In <code>0.x.x</code> bordered was formally known as <code>squared</code>
       </div>
       <p>An icon can be formatted to appear bordered</p>

server/documents/elements/list.html.eco

@@ -455,7 +455,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Animated</h4>
     <p>A list can animate to set the current item apart from the list</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       Be sure content can fit on one line when using the animated variation, otherwise the content will create a new line break as the animated content adjusts to its new size.
     </div>
     <div class="ui animated list">

server/documents/globals/site.html.eco

@@ -181,7 +181,7 @@ themes      : ['Default', 'Material']
   <div class="example">
     <h4 class="ui header">Sizes</h4>
     <p>A site can define a root em size, used for providing relative sizes for the rest of a site's content</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <code>em</code> and <code>rem</code> are special units used to provide relative measurements for elements. <code>1em</code> defines what baseline size, <code>medium</code>, is for UI elements. Most elements are sized in <code>rem</code> which are affected by this value, however some UI can also be defined using <code>em</code> which will be based on the surrounding font size of the parent element.</p>
     </div>
 

server/documents/modules/checkbox.html.eco

@@ -98,7 +98,7 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Disabled</h4>
       <p>A checkbox can be read-only and unable to change states</p>
-      <div class="ui info message">
+      <div class="ui ignored info message">
         A checkbox can be disabled by either setting the disabled attribute on the hidden input, or class <code>disabled</code> on the <code>ui checkbox</code>
       </div>
       <div class="ui disabled checkbox">

server/documents/modules/dropdown.html.eco

@@ -884,7 +884,7 @@ themes      : ['Default']
       </div>
     </div>
     <div class="another button example">
-      <div class="ui info message ignored">Bottom pointing dropdown menus have sub-menus open upwards</div>
+      <div class="ui ignored info message">Bottom pointing dropdown menus have sub-menus open upwards</div>
       <div class="ui icon bottom left pointing dropdown button">
         <i class="wrench icon"></i>
         <div class="menu">
@@ -1191,7 +1191,7 @@ themes      : ['Default']
     <div class="dropdown example">
       <h4 class="ui header">Floated Content</h4>
       <p>A dropdown menu can contain floated content.</p>
-      <div class="ui info message">Floated content may stack to two lines without manually setting a width when or using a <code>fluid</code> dropdown
+      <div class="ui ignored info message">Floated content may stack to two lines without manually setting a width when or using a <code>fluid</code> dropdown
       </div>
       <div class="ui fluid selection dropdown">
         <i class="filter icon"></i>
@@ -1344,7 +1344,7 @@ themes      : ['Default']
     <div class="dropdown example">
       <h4 class="ui header">Menu Direction</h4>
       <p>A dropdown menu or sub-menu can specify the direction it should open</p>
-      <div class="ui info message">
+      <div class="ui ignored info message">
         Specifying <code>left</code> on a menu will make all child menus open in the same direction implicitly. To have a dropdown icon appear on the left side on a child menu, you will need to use <code>left dropdown example</code>
       </div>
       <div class="ui floating labeled icon dropdown button">
@@ -1440,7 +1440,7 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Active</h4>
       <p>An active dropdown has its menu open</p>
-      <div class="ui info message">An active state will only affect a simple dropdown. To activate a menu on a dropdown module use <code>$('.ui.dropdown').dropdown('show');</code></div>
+      <div class="ui ignored info message">An active state will only affect a simple dropdown. To activate a menu on a dropdown module use <code>$('.ui.dropdown').dropdown('show');</code></div>
       <div class="ui simple active dropdown">
         Dropdown <i class="dropdown icon"></i>
         <div class="menu">
@@ -1453,7 +1453,7 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Disabled</h4>
       <p>A disabled dropdown menu will not open or close</p>
-      <div class="ui info message">A disabled state will only affect a simple dropdown. To disable a dropdown module use <code>$('.ui.dropdown').dropdown('destroy');</code></div>
+      <div class="ui ignored info message">A disabled state will only affect a simple dropdown. To disable a dropdown module use <code>$('.ui.dropdown').dropdown('destroy');</code></div>
       <div class="ui simple disabled dropdown">
         Dropdown <i class="dropdown icon"></i>
         <div class="menu">
@@ -1749,7 +1749,7 @@ themes      : ['Default']
     <div class="no example">
       <h4 class="ui header">Initializing Existing HTML</h4>
       <p>Initializing a dropdown with pre-existing html allows for greater performance than initializing a dropdown directly on a <code>select</code> element.</p>
-      <div class="ui info message">Any select element initialized as dropdown will also be hidden until javascript can create html, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.</div>
+      <div class="ui ignored info message">Any select element initialized as dropdown will also be hidden until javascript can create html, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.</div>
       <div class="code" data-label="HTML" data-type="html">
         <div class="ui dropdown">
           <input type="hidden" name="gender">

server/documents/modules/modal.html.eco

@@ -378,7 +378,7 @@ themes      : ['Default', 'Material', 'Fixed-width']
     <div class="no example">
       <h4 class="ui header">Approve / Deny Callbacks</h4>
       <p>Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.
-      <div class="ui info message">
+      <div class="ui ignored info message">
         If <code>onDeny</code> or <code>onApprove</code> returns false it will prevent the modal from closing
       </div>
       <div class="code" data-demo="true">

server/documents/modules/popup.html.eco

@@ -458,10 +458,10 @@ themes      : ['Default']
     <div class="inline example">
       <h4 class="ui header">Inline or relative to page</h4>
       <p>A popup can either be inserted directly after an element, or added as a child element to the page's <code>body</code>.</p>
-      <div class="ui positive message">
+      <div class="ui ignored positive message">
         Using inline will allow your popups to go places other popups can't go, like inside <code>fixed</code> or <code>absolutely</code> positioned elements
       </div>
-      <div class="ui info message">
+      <div class="ui ignored info message">
         If you want to style each popup individually it makes sense to keep popup <code>inline: true</code>. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set <code>inline: false</code>.
       </div>
       <div class="code" data-type="css">

server/documents/modules/search.html.eco

@@ -59,7 +59,7 @@ type        : 'UI Module'
     <div class="local example">
       <h4 class="ui header">Local Search</h4>
       <p>A search can look for results inside static local content.</p>
-      <div class="ui info message">
+      <div class="ui ignored info message">
         By default, results will return content first that begin with the query text, but also afterward content that matches the query anywhere inside. To disable full text search modify the <code>searchFullText</code> setting.
       </div>
       <div class="ui search">

server/documents/modules/sidebar.html.eco

@@ -77,6 +77,36 @@ themes      : ['Default']
       </div>
     </div>
 
+    <h2 class="ui dividing header">States</h2>
+
+    <h3 class="ui header">Sidebar</h3>
+
+    <div class="no example">
+      <h4 class="ui header">Visible</h4>
+      <p>A sidebar can be visible on the page</p>
+      <div class="ui ignored info message">
+        To have a sidebar appear on page load simply add the class <code>visible</code> to the sidebar.
+      </div>
+      <div class="code" data-type="html">
+        <div class="ui visible sidebar"></div>
+      </div>
+    </div>
+
+    <h3>Pusher</h3>
+
+    <div class="no example">
+      <h4 class="ui header">Dimmed</h4>
+      <p>A pusher can be dimmed</p>
+      <div class="code" data-type="html">
+        <!--body class="pushable">
+          <div class="ui visible sidebar"></div>
+          <div class="dimmed pusher"></div>
+        </body!-->
+      </div>
+    </div>
+
+
+
     <h2 class="ui dividing header">Variations</h2>
 
     <div class="no left example">
@@ -213,7 +243,7 @@ themes      : ['Default']
       <h4 class="ui header">Width</h4>
       <p>A sidebar can specify its width</p>
       <div class="ui message">
-        By default a sidebar will automatically adjust to any arbitrary specified size
+        A sidebar will automatically adjust its animations to match any custom size specified in css
       </div>
       <div class="code" data-type="html">
         <div class="ui thin sidebar"></div>
@@ -251,7 +281,10 @@ themes      : ['Default']
 
     <div class="no example">
       <h4 class="ui header">Using Fixed Content</h4>
-      <p>Any fixed position content that should move with page content when your sidebar is visible, should receive the class name <code>fixed</code> and exist as a sibling element to your sidebar. Fixed content that is included outside of your <code>pusher</code> <b>will not lose its positioning</b> when a sidebar is shown.</p>
+      <p>Any fixed position content that should move with page content when your sidebar is visible, should receive the class name <code>fixed</code> and exist as a sibling element to your sidebar.
+      <div class="ui ignored message">
+        Fixed content that is included outside of your <code>pusher</code> <b>will not lose its positioning</b> when a sidebar is shown.
+      </div>
       <div class="code" data-type="html">
         <!--body-->
           <div class="ui sidebar">
@@ -281,31 +314,17 @@ themes      : ['Default']
     </div>
 
     <div class="no example">
-      <h4 class="ui header">Tablet/Mobile Sidebars</h4>
-      <p>Sidebars use a special fix for mobile and tablet views to make sure touch scrolling works correctly.</p>
+      <h4 class="ui header">iOS Sidebars</h4>
+      <p>Sidebars use a special fix for iOS</p>
       <div class="code" data-type="css">
       @media only screen and (max-width: @computerBreakpoint) {
-        html {
+        html.ios {
           overflow-x: hidden;
           -webkit-overflow-scrolling: touch;
         }
       }
       </div>
-      <p>Adding an overflow to <code>html</code> is necessary to make sure elements translated off-screen with 3d transformations do not cause mobile browsers to try to resize the page canvas (creating horizontal scrollbars or painting errors) when a sidebar is displayed. This is necessary even when setting viewport to <code>device-width</code> due to bugs in mobile rendering.
-      </p>
-      <div class="code" data-type="html">
-        <!--body-->
-          <div class="ui sidebar">
-            ...
-          </div>
-          <div class="ui top fixed menu">
-            ...
-          </div>
-          <div class="pusher">
-            Your site's actual content
-          </div>
-        <!--/body-->
-      </div>
+      <p>Adding an overflow to <code>html</code> is necessary to make sure elements translated off-screen with 3d transformations do not cause iOS to trigger native canvas resizing.</p>
     </div>
 
     <h2 class="ui dividing header">Behavior</h2>
@@ -692,111 +711,4 @@ themes      : ['Default']
     </table>
   </div>
 
-</div>
-
-<div class="ui right demo sidebar vertical inverted menu">
-  <a class="header item">File Permissions</a>
-  <a class="item">Share on Social</a>
-  <a class="item">Share by E-mail</a>
-  <a class="item">Edit Permissions</a>
-  <a class="item">Delete Permanently</a>
-</div>
-
-<div class="ui left demo vertical inverted labeled icon sidebar menu">
-  <a class="item">
-    <i class="home icon"></i>
-    Home
-  </a>
-  <a class="item">
-    <i class="block layout icon"></i>
-    Topics
-  </a>
-  <a class="item">
-    <i class="smile icon"></i>
-    Friends
-  </a>
-  <a class="item">
-    <i class="calendar icon"></i>
-    History
-  </a>
-  <a class="item">
-    <i class="mail icon"></i>
-    Messages
-  </a>
-  <a class="item">
-    <i class="chat icon"></i>
-    Discussions
-  </a>
-  <a class="item">
-    <i class="trophy icon"></i>
-    Achievements
-  </a>
-  <a class="item">
-    <i class="shop icon"></i>
-    Store
-  </a>
-  <a class="item">
-    <i class="settings icon"></i>
-    Settings
-  </a>
-</div>
-
-<div class="ui top demo sidebar ui segment">
-  <div class="ui center aligned page grid">
-    <div class="one column row">
-      <div class="sixteen wide column">
-        <h3 class="ui header">New Content Awaits</h3>
-      </div>
-    </div>
-    <div class="three column divided row">
-      <div class="column">
-        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
-      </div>
-      <div class="column">
-        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
-      </div>
-      <div class="column">
-        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="ui bottom demo inverted nine item labeled icon sidebar menu">
-  <a class="item">
-    <i class="home icon"></i>
-    Home
-  </a>
-  <a class="item">
-    <i class="block layout icon"></i>
-    Topics
-  </a>
-  <a class="item">
-    <i class="smile icon"></i>
-    Friends
-  </a>
-  <a class="item">
-    <i class="calendar icon"></i>
-    History
-  </a>
-  <a class="item">
-    <i class="mail icon"></i>
-    Messages
-  </a>
-  <a class="item">
-    <i class="chat icon"></i>
-    Discussions
-  </a>
-  <a class="item">
-    <i class="trophy icon"></i>
-    Achievements
-  </a>
-  <a class="item">
-    <i class="shop icon"></i>
-    Store
-  </a>
-  <a class="item">
-    <i class="settings icon"></i>
-    Settings
-  </a>
-</div>
+</div>

server/documents/views/card.html.eco

@@ -328,7 +328,7 @@ themes      : ['Default', 'Basic', 'Classic']
   <div class="example">
     <h4 class="ui header">Metadata</h4>
     <p>A card can contain content metadata</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <i class="info icon"></i>
       You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
     </div>
@@ -531,7 +531,7 @@ themes      : ['Default', 'Basic', 'Classic']
   <div class="example">
     <h4 class="ui header">Floated Content</h4>
     <p>Any content element can be floated left or right</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <i class="info icon"></i>
       You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
     </div>

server/documents/views/comment.html.eco

@@ -184,7 +184,7 @@ themes      : ['Default', 'Chubby']
   <div class="example">
     <h4 class="ui header">Reply Form</h4>
     <p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <p>If a comment form is located inside a <code> ui comment</code> it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.</p>
     </div>
     <div class="ui comments">

server/documents/views/item.html.eco

@@ -104,7 +104,7 @@ themes      : ['Default']
     <div class="ui warning message">
       Item images default to item <code>@imageWidth</code>, but you can also manually set the image width using a size variation of <code>ui image</code> for example <code>ui tiny image</code>
     </div>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       In addition, default image sizes will adjust for both tablet and mobile views. The default theme will force content to stack at mobile views
     </div>
     <div class="ui items">
@@ -129,7 +129,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Content</h4>
     <p>A item can contain a group of content</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       Grouping content in a wrapping div is necessary to make sure that content flow does not wrap below the item's image
     </div>
     <div class="ui divided items">
@@ -197,7 +197,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Metadata</h4>
     <p>A item can contain content metadata</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <i class="info icon"></i>
       You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
     </div>
@@ -291,7 +291,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Icons</h4>
     <p>A item can contain icons signifying a 'like' or 'favorite' action</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       It's recommended to use <code>ui rating</code>
     </div>
     <div class="ui items">
@@ -356,7 +356,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Divided</h4>
     <p>Items can be divided to better distinguish between grouped content</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <i class="info icon"></i>
       The following example uses <a href="/elements/segment.html">ui</a> for legibility only. This is not necessary for using <code>ui items</code>
     </div>
@@ -461,7 +461,7 @@ themes      : ['Default']
   <div class="example">
     <h4 class="ui header">Floated Content</h4>
     <p>Any content element can be floated left or right</p>
-    <div class="ui info message">
+    <div class="ui ignored info message">
       <i class="info icon"></i>
       You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
     </div>

server/files/javascript/docs.js

@@ -1008,7 +1008,7 @@ semantic.ready = function() {
   ;
   $('.launch.button, .view-ui, .launch.item')
     .on('click', function(event) {
-      $menu.sidebar('show');
+      $menu.sidebar('toggle');
       event.preventDefault();
     })
   ;

server/files/stylesheets/docs.css

@@ -699,7 +699,7 @@ body#example {
   margin-bottom: 0em;
 }
 #example .example .toggle.button {
-  min-width: 200px;
+  min-width: 100px;
 }
 
 
@@ -753,6 +753,12 @@ body#example {
   position: relative;
   margin: 5rem 0rem 3rem;
 }
+#example .main.container .examples > h3,
+#example .main.container > h3,
+#example .main.container > .tab > h3{
+  position: relative;
+  margin: 3rem 0rem 2rem;
+}
 #example .main.container .examples > .rail + h2,
 #example .main.container > .rail + h2,
 #example .main.container > .tab > .rail + h2,
@@ -1504,6 +1510,7 @@ body.progress.animated .ui.progress .bar {
 
 #example .main.container > .right.rail .sticky,
 #example .main.container > .tab > .right.rail .sticky {
+  width: 300px;
   padding: 2em 0em;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
@@ -1623,6 +1630,10 @@ body.progress.animated .ui.progress .bar {
     width: 200px;
     padding-left: 0em;
   }
+  #example .main.container > .right.rail .sticky,
+  #example .main.container > .tab > .right.rail .sticky {
+    width: 200px;
+  }
 }
 @media only screen and (min-width : 1200px) and (max-width: 1355px) {
   #example .container {

server/layouts/default.html.eco

@@ -8,10 +8,11 @@
   <%- @partial('transifex') %>
 </head>
 <body id="example" class="<%= @document.css %>" ontouchstart="">
-
+  <% if @document.element is 'sidebar': %>
+  <%- @partial('demo-sidebar') %>
+  <% end %>
   <%- @partial('sidebar') %>
   <%- @partial('fixed-menu') %>
-
   <div class="pusher">
     <div class="full height">
       <%- @content %>

server/partials/demo-sidebar.html

@@ -0,0 +1,106 @@
+<div class="ui right demo sidebar vertical inverted menu">
+  <a class="header item">File Permissions</a>
+  <a class="item">Share on Social</a>
+  <a class="item">Share by E-mail</a>
+  <a class="item">Edit Permissions</a>
+  <a class="item">Delete Permanently</a>
+</div>
+
+<div class="ui left demo vertical inverted labeled icon sidebar menu">
+  <a class="item">
+    <i class="home icon"></i>
+    Home
+  </a>
+  <a class="item">
+    <i class="block layout icon"></i>
+    Topics
+  </a>
+  <a class="item">
+    <i class="smile icon"></i>
+    Friends
+  </a>
+  <a class="item">
+    <i class="calendar icon"></i>
+    History
+  </a>
+  <a class="item">
+    <i class="mail icon"></i>
+    Messages
+  </a>
+  <a class="item">
+    <i class="chat icon"></i>
+    Discussions
+  </a>
+  <a class="item">
+    <i class="trophy icon"></i>
+    Achievements
+  </a>
+  <a class="item">
+    <i class="shop icon"></i>
+    Store
+  </a>
+  <a class="item">
+    <i class="settings icon"></i>
+    Settings
+  </a>
+</div>
+
+<div class="ui top demo sidebar ui segment">
+  <div class="ui center aligned page grid">
+    <div class="one column row">
+      <div class="sixteen wide column">
+        <h3 class="ui header">New Content Awaits</h3>
+      </div>
+    </div>
+    <div class="three column divided row">
+      <div class="column">
+        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
+      </div>
+      <div class="column">
+        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
+      </div>
+      <div class="column">
+        <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="ui bottom demo inverted nine item labeled icon sidebar menu">
+  <a class="item">
+    <i class="home icon"></i>
+    Home
+  </a>
+  <a class="item">
+    <i class="block layout icon"></i>
+    Topics
+  </a>
+  <a class="item">
+    <i class="smile icon"></i>
+    Friends
+  </a>
+  <a class="item">
+    <i class="calendar icon"></i>
+    History
+  </a>
+  <a class="item">
+    <i class="mail icon"></i>
+    Messages
+  </a>
+  <a class="item">
+    <i class="chat icon"></i>
+    Discussions
+  </a>
+  <a class="item">
+    <i class="trophy icon"></i>
+    Achievements
+  </a>
+  <a class="item">
+    <i class="shop icon"></i>
+    Store
+  </a>
+  <a class="item">
+    <i class="settings icon"></i>
+    Settings
+  </a>
+</div>