Tweaking some variables for button themes

src/definitions/elements/button.less

@@ -26,12 +26,12 @@
 .ui.button {
   cursor: pointer;
   display: inline-block;
-  vertical-align: baseline;
 
   min-height: 1em;
 
   outline: none;
   border: none;
+  vertical-align: @verticalAlign;
   background-color: @backgroundColor;
   color: @textColor;
 
@@ -133,7 +133,7 @@
   position: relative;
   cursor: default;
 
-  background-color: @loadingBackgroundColor !important;
+  background: @loadingBackground !important;
   text-shadow: none !important;
   color: transparent !important;
   transition: all 0s linear;

src/themes/packages/default/collections/grid.variables

@@ -90,4 +90,3 @@
 @stackableMobileBorder: 1px solid @borderColor;
 @stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
 
-@doublingRowSpacing: @rowSpacing;

src/themes/packages/default/elements/button.variables

@@ -18,6 +18,7 @@
 @borderRadius: 0.25em;
 @borderBoxShadowColor: transparent;
 @borderBoxShadowWidth: 1px;
+@verticalAlign: baseline;
 
 /* Shadow */
 @shadowDistance: 0em;
@@ -113,7 +114,7 @@
 @activeHoverColor: @selectedTextColor;
 
 /* Loading */
-@loadingBackgroundColor: #FFFFFF;
+@loadingBackground: rgba(0, 0, 0, 0.04);
 
 /*-------------------
         Types

src/themes/packages/raised/elements/button.overrides

@@ -1,3 +1,9 @@
 /*******************************
            Overrides
 *******************************/
+
+.ui.button.active:not(.basic),
+.ui.button:active {
+  padding-top: @verticalPadding + (@shadowOffset / 2);
+  padding-bottom: @verticalPadding + (@shadowOffset / 2);
+}

src/themes/packages/raised/elements/button.variables

@@ -7,12 +7,21 @@
 --------------------*/
 
 /* Shadow */
+@verticalAlign: middle;
 @backgroundColor: #F8F8F8;
 @backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
-@shadowDistance: 0.25em;
+@shadowDistance: 0.3em;
 @borderBoxShadowColor: @borderColor;
 
-@verticalPadding: 0.9em;
+@verticalPadding: 1em;
 @horizontalPadding: 2em;
 
-@borderRadius: 0.4em;
+@borderRadius: 0.4em;
+/* transitions */
+@transition:
+  opacity @transitionDuration @transitionEasing,
+  background-color @transitionDuration @transitionEasing,
+  box-shadow @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing,
+  background @transitionDuration @transitionEasing
+;