Adds travel distance for shadow, removes shadow by default

server/documents/elements/button.html.eco

@@ -36,7 +36,7 @@ type        : 'UI Element'
     <div class="ui animated button">
       <div class="visible content">Next</div>
       <div class="hidden content">
-        <i class="right arrow icon"></i>
+        <i class="right icon"></i>
       </div>
     </div>
     <div class="ui vertical animated button">

server/documents/elements/header.html.eco

@@ -34,10 +34,8 @@ type        : 'UI Element'
       Account Settings
       <div class="sub header">Manage your account settings and set e-mail preferences.</div>
     </h2>
-    <h2 class="ui header">
-      <i class="settings icon"></i>
-      Account Settings
-    </h2>
+  </div>
+  <div class="another example">
     <h2 class="ui header">
       <i class="settings icon"></i>
       <div class="content">

server/files/javascript/semantic.js

@@ -257,7 +257,6 @@ semantic.ready = function() {
           leadingSpaces = line.length - line.replace(/^\s*/g, '').length;
           if(leadingSpaces !== 0) {
             indent = leadingSpaces - spacesPerIndent;
-            console.log('returning' + indent);
             return false;
           }
         });
@@ -270,7 +269,7 @@ semantic.ready = function() {
         $example    = $(this).closest('.example'),
         $annotation = $example.find('.annotation'),
         $code       = $annotation.find('.code'),
-        $header     = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
+        $header     = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
         $demo       = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
         code        = ''
       ;

server/files/stylesheets/reset.css

@@ -1,12 +1,12 @@
-/*******************************
-          CSS Reset
-*******************************/
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
 
-html, body, div, form, fieldset, legend, label, ul, li, menu, button {
-  margin: 0px;
-  padding: 0px;
-  background: none;
-}
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
 
 article,
 aside,
@@ -16,44 +16,391 @@ figure,
 footer,
 header,
 hgroup,
+main,
 nav,
-section {
-  display: block
+section,
+summary {
+    display: block;
 }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0px;
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
 }
-th, td {
-  text-align: left;
-  vertical-align: top;
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
 }
-th, td, caption { 
-  font-weight:normal; 
-  margin: 0px;
-  padding: 0px;
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
 }
-img,
-iframe { 
-  border: 0px; 
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
 }
-:focus, input:focus, button:focus, button:active, button:hover {
-  outline: 0px;
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
 }
-button {
-  display: block;
-  outline: 0px;
-  border: 0px;  
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
 }
-ul, li {
-  list-style-type: none;  
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
 }
-p {
-  margin: 0px;
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
 }
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
 }

server/layouts/default.html.eco

@@ -28,6 +28,7 @@
   <meta name="keywords" content="<%= @getPreparedKeywords() %>" />
 
   <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
 
   <% if 'development' in @getEnvironments(): %>
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/basic.icon.css">

src/elements/button.less

@@ -35,7 +35,7 @@
 @textColor: rgba(0, 0, 0, 0.6);
 
 @borderRadius: 0.25em;
-@shadowDistance: 0.133em;
+@shadowDistance: 0em;
 
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.5em;
@@ -161,8 +161,6 @@
 .ui.active.button:active {
   background-color: @downBackgroundColor;
   background-image: @downBackgroundImage;
-  padding-top: (@verticalPadding + (@shadowDistance / 2));
-  padding-bottom: (@verticalPadding + (@shadowDistance / 2));
   color: @selectedTextColor;
   box-shadow: @downBoxShadow;
 }
@@ -171,16 +169,12 @@
      Active
 ---------------*/
 
-.ui.buttons .active.button,
 .ui.active.button {
   background-color: @activeBackgroundColor;
   background-image: @activeBackgroundImage;
-  padding-top: (@verticalPadding + (@shadowDistance / 2));
-  padding-bottom: (@verticalPadding + (@shadowDistance / 2));
   box-shadow: @activeBoxShadow;
   color: @textColor;
 }
-
 .ui.button.active:hover {
   background-color: @activeBackgroundColor;
   background-image: @activeBackgroundImage;
@@ -266,7 +260,7 @@
   top: 50%;
   left: auto;
   right: -100%;
-  margin-top: -0.55em;
+  margin-top: -0.5em;
 }
 .ui.animated.button:hover .visible.content {
   left: auto;
@@ -543,6 +537,12 @@
 .ui.compact.buttons .icon.button {
   padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowDistance );
 }
+.ui.compact.buttons .button:active,
+.ui.compact.buttons .button.active {
+  padding-top: (@compactVerticalPadding + (@shadowDistance / 2)) !important;
+  padding-bottom: (@compactVerticalPadding + (@shadowDistance / 2)) !important;
+}
+
 
 
 /*-------------------
@@ -760,6 +760,15 @@
   box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
 }
 
+/* Hover */
+
+.ui.labeled.icon.buttons > .button:active > .icon,
+.ui.buttons > .labeled.icon.button:active > .icon,
+.ui.labeled.icon.buttons > .button.active > .icon,
+.ui.buttons > .labeled.icon.button.active > .icon {
+  padding-top: (@verticalPadding + (@shadowDistance / 2) + 0.05em);
+}
+
 
 /*--------------
      Toggle
@@ -771,12 +780,10 @@
 .ui.button.toggle.active {
   background-color: @positiveColor !important;
   color: #FFFFFF !important;
-  box-shadow: none !important;
 }
 .ui.button.toggle.active:hover {
   background-color: @positiveColorHover !important;
   color: #FFFFFF !important;
-  box-shadow: none !important;
 }
 
 /*--------------
@@ -1354,6 +1361,13 @@
   border-bottom-right-radius: @borderRadius;
 }
 
+/* Hover */
+.ui.buttons .button:active,
+.ui.buttons .button.active {
+  padding-top: (@verticalPadding + (@shadowDistance / 2)) !important;
+  padding-bottom: (@verticalPadding + (@shadowDistance / 2)) !important;
+}
+
 /* Vertical  Style */
 .ui.vertical.buttons {
   display: inline-block;