SemanSemantic-UItic-UI/rtl/packaged/themes/default/elements/button.variables

/*-------------------
    Globals Used
--------------------*/

// (Color Variables)
// @transitionDuration
// @transitionEasing
// @iconWidth
// @borderColor
// @textColor, @invertedTextColor

/*-------------------
   Button Variables
--------------------*/

/* Button Variables */
@textTransform: uppercase;
@fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);

@textShadow: none;
@invertedTextShadow: none;

@borderRadius: 0.25em;

@shadowDistance: 0em;
@shadowOffset: (@shadowDistance / 2);

@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;

@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);

@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));

@boxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
;

@hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
@hoverBoxShadow: '';

@downBackgroundColor: #F1F1F1;
@downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;

@activeBackgroundColor: #EAEAEA;
@activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;

@iconMargin: 0.6em;
@iconHoverOpacity: 0.85;
@iconButtonOpacity: 0.9;

@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
@labeledIconBorder: rgba(0, 0, 0, 0.05);

@floatedMargin: 0.25em;

@animationDuration: 0.3s;
@animationEasing: ease;
@fadeScaleHigh: 1.5;
@fadeScaleLow: 0.75;

@mini: 0.7rem;
@tiny: 0.8rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@big: 1.25rem;
@huge: 1.375rem;
@massive: 1.5rem;