Semantic-Org/Semantic-UI

View on GitHub
src/themes/classic/elements/button.variables

Summary

Maintainability
Test Coverage
/*******************************
            Button
*******************************/

/*-------------------
       Element
--------------------*/

/* Shadow */
@shadowDistance: 0em;
@shadowOffset: (@shadowDistance / 2);
@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
@boxShadow:
  0px 0px 0px 1px @borderColor inset,
  @shadowBoxShadow
;

/* Padding */
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;


/*-------------------
        Group
--------------------*/

@groupBoxShadow: none;
@groupButtonBoxShadow:
  0px 0px 0px 1px @borderColor inset,
  @shadowBoxShadow
;
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
@groupButtonOffset: 0px 0px 0px -1px;
@verticalGroupOffset: 0px 0px -1px 0px;

/*-------------------
        States
--------------------*/

/* Hovered */
@hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
@hoverBoxShadow: '';
@hoverColor: @hoveredTextColor;
@iconHoverOpacity: 0.85;

/* Focused */
@focusBackgroundColor: '';
@focusBackgroundImage: '';
@focusBoxShadow:
  0px 0px 1px rgba(81, 167, 232, 0.8) inset,
  0px 0px 3px 2px rgba(81, 167, 232, 0.8)
;
@focusColor: @hoveredTextColor;
@iconFocusOpacity: 0.85;

/* Pressed Down */
@downBackgroundColor: #F1F1F1;
@downBackgroundImage: '';
@downBoxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
;
@downColor: @pressedTextColor;

/* Active */
@activeBackgroundColor: #DADADA;
@activeBackgroundImage: none;
@activeColor: @selectedTextColor;
@activeBoxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
;

/* Active + Hovered */
@activeHoverBackgroundColor: #DADADA;
@activeHoverBackgroundImage: none;
@activeHoverBoxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
;
@activeHoverColor: @selectedTextColor;

/* Loading */
@loadingBackgroundColor: #FFFFFF;

/*-------------------
        Types
--------------------*/

/* Labeled Icon */
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;