Adds travel distance to button active state, fixing issues with uneven padding

server/documents/modules/dropdown.html.eco

@@ -76,7 +76,7 @@ type        : 'UI Module'
       <p>A dropdown menu can appear to be floating below an element.</p>
       <div class="ui teal buttons">
         <div class="ui button">Save</div>
-        <div class="ui teal floating dropdown icon button">
+        <div class="ui floating dropdown icon button">
           <i class="dropdown icon"></i>
           <div class="menu">
             <div class="item"><i class="edit icon"></i>Edit Post</div>
@@ -413,7 +413,7 @@ type        : 'UI Module'
       <p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown</p>
       <div class="ui teal buttons">
         <div class="ui button">Update Post</div>
-        <div class="ui teal dropdown icon button">
+        <div class="ui dropdown icon button">
           <i class="dropdown icon"></i>
           <div class="menu">
             <div class="item"><i class="edit icon"></i>Edit Post</div>
@@ -524,7 +524,7 @@ type        : 'UI Module'
       <p>A dropdown can have different <a href="/modules/transition.html">transitions</a>.</p>
       <div class="ui teal buttons">
         <div class="ui button">Toggle</div>
-        <div class="ui teal floating dropdown icon button">
+        <div class="ui floating dropdown icon button">
           <i class="dropdown icon"></i>
           <div class="menu">
             <div class="item" data-value="horizontal flip">Horizontal Flip</div>

server/layouts/default.html.eco

@@ -61,7 +61,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/accordion.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dropdown.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/popup.css">
-  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/reveal.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/reveal.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/rating.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/sidebar.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/shape.css">

src/elements/button.less

@@ -34,18 +34,18 @@
 @fontWeight: bold;
 @textColor: rgba(0, 0, 0, 0.6);
 
+@borderRadius: 0.25em;
+@shadowDistance: 0.133em;
+
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.5em;
 
 @compactVerticalPadding: (@verticalPadding * 0.75);
 @compactHorizontalPadding: (@horizontalPadding * 0.75);
 
-@borderRadius: 0.25em;
-
 @backgroundColor: #FAFAFA;
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
 
-@shadowDistance: 0.133em;
 @boxShadow:
   0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
   0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
@@ -106,7 +106,7 @@
   color: @textColor;
 
   margin: 0em;
-  padding: @verticalPadding @horizontalPadding ( @verticalPadding + (@shadowDistance / 2) );
+  padding: @verticalPadding @horizontalPadding ( @verticalPadding + @shadowDistance );
 
   font-size: 1rem;
   text-transform: @textTransform;
@@ -161,6 +161,8 @@
 .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;
 }
@@ -173,6 +175,8 @@
 .ui.active.button {
   background-color: @activeBackgroundColor;
   background-image: @activeBackgroundImage;
+  padding-top: (@verticalPadding + (@shadowDistance / 2));
+  padding-bottom: (@verticalPadding + (@shadowDistance / 2));
   box-shadow: @activeBoxShadow;
   color: @textColor;
 }
@@ -533,11 +537,11 @@
 
 .ui.compact.buttons .button,
 .ui.compact.button {
-  padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
+  padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowDistance );
 }
 .ui.compact.icon.buttons .button,
 .ui.compact.buttons .icon.button {
-  padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + (@shadowDistance / 2) );
+  padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowDistance );
 }
 
 
@@ -631,7 +635,7 @@
 
 .ui.icon.buttons .button,
 .ui.icon.button {
-  padding: @verticalPadding @verticalPadding ( @verticalPadding + (@shadowDistance / 2) );
+  padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowDistance );
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {

src/global.variables

@@ -251,44 +251,44 @@
 --------------------*/
 
 /*---  Standard  ---*/
-@primaryColorActive    : lighten(@primaryColor, 10);
-@secondaryColorActive  : lighten(@secondaryColor, 10);
-@tertiaryColorActive   : lighten(@tertiaryColor, 10);
-
-@blueActive            : lighten(@blue, 10);
-@greenActive           : lighten(@green, 10);
-@orangeActive          : lighten(@orange, 10);
-@pinkActive            : lighten(@pink, 10);
-@purpleActive          : lighten(@purple, 10);
-@redActive             : lighten(@red, 10);
-@tealActive            : lighten(@teal, 10);
-@yellowActive          : lighten(@yellow, 10);
+@primaryColorActive    : darken(@primaryColor, 10);
+@secondaryColorActive  : darken(@secondaryColor, 10);
+@tertiaryColorActive   : darken(@tertiaryColor, 10);
+
+@blueActive            : darken(@blue, 10);
+@greenActive           : darken(@green, 10);
+@orangeActive          : darken(@orange, 10);
+@pinkActive            : darken(@pink, 10);
+@purpleActive          : darken(@purple, 10);
+@redActive             : darken(@red, 10);
+@tealActive            : darken(@teal, 10);
+@yellowActive          : darken(@yellow, 10);
 
 /*---  Emotive  ---*/
-@positiveColorActive   : lighten(@positiveColor, 10);
-@negativeColorActive   : lighten(@negativeColor, 10);
+@positiveColorActive   : darken(@positiveColor, 10);
+@negativeColorActive   : darken(@negativeColor, 10);
 
-@infoColorActive       : lighten(@infoColor, 10);
-@warningColorActive    : lighten(@warningColor, 10);
-@errorColorActive      : lighten(@errorColor, 10);
+@infoColorActive       : darken(@infoColor, 10);
+@warningColorActive    : darken(@warningColor, 10);
+@errorColorActive      : darken(@errorColor, 10);
 
 /*---  Neutrals  ---*/
-@darkBlackActive       : lighten(@darkBlack, 10);
-@blackActive           : lighten(@black, 10);
-@lightBlackActive      : lighten(@lightBlack, 10);
-
-@lightGreyActive       : lighten(@lightGrey, 10);
-@greyActive            : lighten(@grey, 10);
-@darkGreyActive        : lighten(@darkGrey, 10);
-
-@whiteActive           : lighten(@white, 10);
-@offWhiteActive        : lighten(@offWhite, 10);
-@darkWhiteActive       : lighten(@darkWhite, 10);
-
-@facebookActiveColor   : lighten(@facebookColor, 10);
-@twitterActiveColor    : lighten(@twitterColor, 10);
-@googlePlusActiveColor : lighten(@googlePlusColor, 10);
-@linkedInActiveColor   : lighten(@linkedInColor, 10);
-@youtubeActiveColor    : lighten(@youtubeColor, 10);
-@instagramActiveColor  : lighten(@instagramColor, 10);
-@pinterestActiveColor  : lighten(@pinterestColor, 10);
+@darkBlackActive       : darken(@darkBlack, 10);
+@blackActive           : darken(@black, 10);
+@lightBlackActive      : darken(@lightBlack, 10);
+
+@lightGreyActive       : darken(@lightGrey, 10);
+@greyActive            : darken(@grey, 10);
+@darkGreyActive        : darken(@darkGrey, 10);
+
+@whiteActive           : darken(@white, 10);
+@offWhiteActive        : darken(@offWhite, 10);
+@darkWhiteActive       : darken(@darkWhite, 10);
+
+@facebookActiveColor   : darken(@facebookColor, 10);
+@twitterActiveColor    : darken(@twitterColor, 10);
+@googlePlusActiveColor : darken(@googlePlusColor, 10);
+@linkedInActiveColor   : darken(@linkedInColor, 10);
+@youtubeActiveColor    : darken(@youtubeColor, 10);
+@instagramActiveColor  : darken(@instagramColor, 10);
+@pinterestActiveColor  : darken(@pinterestColor, 10);