button.variables in less-rails-semantic_ui-2.0.0.0

- old
+ new

@@ -4,19 +4,23 @@
 
 /*-------------------
        Element
 --------------------*/
 
+/* Button */
 @verticalMargin: 0em;
 @horizontalMargin: 0.25em;
-
-/* Style */
-@backgroundColor: #E0E0E0;
+@backgroundColor: #E0E1E2;
 @backgroundImage: none;
-@verticalPadding: 0.78571em;
+@background: @backgroundColor @backgroundImage;
+@lineHeight: 1em;
+
+/* Button defaults to using same height as input globally */
+@verticalPadding: @inputVerticalPadding;
 @horizontalPadding: 1.5em;
 
+
 /* Text */
 @textTransform: none;
 @tapColor: transparent;
 @fontFamily: @pageFont;
 @fontWeight: bold;
@@ -39,31 +43,29 @@
   @borderBoxShadow,
   @shadowBoxShadow
 ;
 
 /* Icon */
+@iconHeight: @relativeSmall;
 @iconOpacity: 0.8;
-@iconDistance: 0.4em;
+@iconDistance: @relative6px;
 @iconColor: '';
-@iconTransition: opacity @transitionDuration @transitionEasing;
-@iconVerticalAlign: baseline;
+@iconTransition: opacity @defaultDuration @defaultEasing;
+@iconVerticalAlign: '';
 
 @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
 @rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
 
 /* Loader */
-@loaderSize: 1.2857em;
-@loaderOffset: -(@loaderSize / 2);
-@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
 @transition:
-  opacity 0.1s @transitionEasing,
-  background-color 0.1s @transitionEasing,
-  color 0.1s @transitionEasing,
-  box-shadow 0.1s @transitionEasing,
-  background 0.1s @transitionEasing
+  opacity @defaultDuration @defaultEasing,
+  background-color @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing
 ;
 /*
 @willChange: box-shadow, transform, opacity, color, background;
 */
 @willChange: '';
@@ -81,39 +83,35 @@
 /*-------------------
         States
 --------------------*/
 
 /* Hovered */
-@hoverBackgroundColor: #E8E8E8;
-@hoverBackgroundImage: none;
-@hoverBoxShadow: '';
+@hoverBackgroundColor: #CACBCD;
+@hoverBackgroundImage: @backgroundImage;
+@hoverBoxShadow: @boxShadow;
 @hoverColor: @hoveredTextColor;
 @iconHoverOpacity: 0.85;
 
 /* Focused */
-@focusBackgroundColor: '';
+@focusBackgroundColor: @hoverBackgroundColor;
 @focusBackgroundImage: '';
-@focusBoxShadow:
-  @borderBoxShadow,
-  0px 0px 1px rgba(81, 167, 232, 0.8) inset,
-  0px 0px 3px 2px rgba(81, 167, 232, 0.8)
-;
+@focusBoxShadow: '';
 @focusColor: @hoveredTextColor;
 @iconFocusOpacity: 0.85;
 
 /* Pressed Down */
-@downBackgroundColor: #CCCCCC;
+@downBackgroundColor: #BABBBC;
 @downBackgroundImage: '';
-@downPressedShadow: 0px 1px 4px 0px @borderColor inset !important;
+@downPressedShadow: none;
 @downBoxShadow:
   @borderBoxShadow,
   @downPressedShadow
 ;
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackgroundColor: #D0D0D0;
+@activeBackgroundColor: #C0C1C2;
 @activeBackgroundImage: none;
 @activeColor: @selectedTextColor;
 @activeBoxShadow: @borderBoxShadow;
 
 /* Active + Hovered */
@@ -122,14 +120,14 @@
 @activeHoverColor: @activeColor;
 @activeHoverBoxShadow: @activeBoxShadow;
 
 /* Loading */
 @loadingOpacity: 1;
-@loadingPointerEvents: none;
+@loadingPointerEvents: auto;
 @loadingTransition:
   all 0s linear,
-  opacity @transitionDuration @defaultEasing
+  opacity @defaultDuration @defaultEasing
 ;
 
 /*-------------------
         Types
 --------------------*/
@@ -137,10 +135,11 @@
 /* Or */
 @orText: 'or';
 
 @orGap: 0.3em;
 @orHeight: (@verticalPadding * 2) + 1em;
+@orZIndex: 3;
 
 @orCircleDistanceToEdge: (@verticalPadding);
 @orCircleSize: @orHeight - @orCircleDistanceToEdge;
 @orLineHeight: (@orCircleSize);
 @orBoxShadow: @borderBoxShadow;
@@ -182,24 +181,29 @@
 @basicBorderRadius: @borderRadius;
 @basicBorderSize: 1px;
 @basicTextColor: @textColor;
 @basicColoredBorderSize: 2px;
 
-@basicBackground: transparent;
+@basicBackground: transparent none;
 @basicFontWeight: normal;
+@basicBorder: 1px solid @borderColor;
 @basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset;
-@iconOffset: 0.05em;
 @basicLoadingColor: @offWhite;
 @basicTextTransform: none;
 
 /* Basic Hover */
-@basicHoverBackground: #FAFAFA;
+@basicHoverBackground: #FFFFFF;
 @basicHoverTextColor: @hoveredTextColor;
 @basicHoverBoxShadow:
-  0px 0px 0px @basicBorderSize @borderColor inset,
+  0px 0px 0px @basicBorderSize @selectedBorderColor inset,
   0px 0px 0px 0px @borderColor inset
 ;
+/* Basic Focus */
+@basicFocusBackground: @basicHoverBackground;
+@basicFocusTextColor: @basicHoverTextColor;
+@basicFocusBoxShadow: @basicHoverBoxShadow;
+
 /* Basic Down */
 @basicDownBackground: #F8F8F8;
 @basicDownTextColor: @pressedTextColor;
 @basicDownBoxShadow:
   0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,
@@ -210,16 +214,17 @@
 @basicActiveBoxShadow: '';
 @basicActiveTextColor: @selectedTextColor;
 
 /* Basic Inverted */
 @basicInvertedBackground: transparent;
-@basicInvertedHoverBackground: transparent;
+@basicInvertedFocusBackground: transparent;
 @basicInvertedDownBackground: @transparentWhite;
 @basicInvertedActiveBackground: @transparentWhite;
 
 @basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset;
 @basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset;
+@basicInvertedFocusBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset;
 @basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset;
 @basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset;
 
 @basicInvertedColor: @darkWhite;
 @basicInvertedHoverColor: @darkWhiteHover;
@@ -227,42 +232,75 @@
 @basicInvertedActiveColor: @invertedTextColor;
 
 
 /* Basic Group */
 @basicGroupBorder: @basicBorderSize solid @borderColor;
-@basicGroupBoxShadow: 0px 0px 0px @basicBorderSize @borderColor;
+@basicGroupBoxShadow: none;
 
 /*-------------------
       Variations
 --------------------*/
 
 /* Colors */
 @coloredBackgroundImage: none;
 @coloredBoxShadow: @shadowBoxShadow;
 
-/* Inverted by default for solids */
-@blueTextColor: @invertedTextColor;
-@blueTextShadow: @invertedTextShadow;
-@greenTextColor: @invertedTextColor;
-@greenTextShadow: @invertedTextShadow;
-@greyTextColor: @invertedTextColor;
-@greyTextShadow: @invertedTextShadow;
+/* Colored */
+@brownTextColor: @invertedTextColor;
+@brownTextShadow: @invertedTextShadow;
+@redTextColor: @invertedTextColor;
+@redTextShadow: @invertedTextShadow;
 @orangeTextColor: @invertedTextColor;
 @orangeTextShadow: @invertedTextShadow;
-@pinkTextColor: @invertedTextColor;
-@pinkTextShadow: @invertedTextShadow;
+@greenTextColor: @invertedTextColor;
+@greenTextShadow: @invertedTextShadow;
+@blueTextColor: @invertedTextColor;
+@blueTextShadow: @invertedTextShadow;
+@violetTextColor: @invertedTextColor;
+@violetTextShadow: @invertedTextShadow;
 @purpleTextColor: @invertedTextColor;
 @purpleTextShadow: @invertedTextShadow;
-@redTextColor: @invertedTextColor;
-@redTextShadow: @invertedTextShadow;
-@tealTextColor: @invertedTextColor;
-@tealTextShadow: @invertedTextShadow;
+@pinkTextColor: @invertedTextColor;
+@pinkTextShadow: @invertedTextShadow;
+@blackTextColor: @invertedTextColor;
+@blackTextShadow: @invertedTextShadow;
+@oliveTextColor: @invertedTextColor;
+@oliveTextShadow: @invertedTextShadow;
 @yellowTextColor: @invertedTextColor;
 @yellowTextShadow: @invertedTextShadow;
+@tealTextColor: @invertedTextColor;
+@tealTextShadow: @invertedTextShadow;
+@greyTextColor: @invertedTextColor;
+@greyTextShadow: @invertedTextShadow;
 
-@blackTextColor: @invertedTextColor;
-@blackTextShadow: @invertedTextShadow;
+/* Inverted */
+@lightBrownTextColor: @invertedTextColor;
+@lightBrownTextShadow: @invertedTextShadow;
+@lightRedTextColor: @invertedTextColor;
+@lightRedTextShadow: @invertedTextShadow;
+@lightOrangeTextColor: @invertedTextColor;
+@lightOrangeTextShadow: @invertedTextShadow;
+@lightGreenTextColor: @invertedTextColor;
+@lightGreenTextShadow: @invertedTextShadow;
+@lightBlueTextColor: @invertedTextColor;
+@lightBlueTextShadow: @invertedTextShadow;
+@lightVioletTextColor: @invertedTextColor;
+@lightVioletTextShadow: @invertedTextShadow;
+@lightPurpleTextColor: @invertedTextColor;
+@lightPurpleTextShadow: @invertedTextShadow;
+@lightPinkTextColor: @invertedTextColor;
+@lightPinkTextShadow: @invertedTextShadow;
+@lightBlackTextColor: @invertedTextColor;
+@lightBlackTextShadow: @invertedTextShadow;
+@lightOliveTextColor: @textColor;
+@lightOliveTextShadow: @textShadow;
+@lightYellowTextColor: @textColor;
+@lightYellowTextShadow: @textShadow;
+@lightTealTextColor: @textColor;
+@lightTealTextShadow: @textShadow;
+@lightGreyTextColor: @textColor;
+@lightGreyTextShadow: @textShadow;
 
 
 /* Ordinality */
 @primaryBackgroundImage: @coloredBackgroundImage;
 @primaryTextColor: @invertedTextColor;
@@ -280,15 +318,17 @@
 
 /* Attached */
 @attachedOffset: -1px;
 @attachedBoxShadow: 0px 0px 0px 1px @borderColor;
 @attachedHorizontalPadding: 0.75em;
+@attachedZIndex: 2;
 
 /* Floated */
 @floatedMargin: 0.25em;
 
 /* Animated */
 @animatedVerticalAlign: middle;
+@animatedZIndex: 1;
 @animationDuration: 0.3s;
 @animationEasing: ease;
 @fadeScaleHigh: 1.5;
 @fadeScaleLow: 0.75;