github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/themes/shipyard/elements/button.variables (about)

     1  /*******************************
     2              Button
     3  *******************************/
     4  
     5  /*-------------------
     6         Element
     7  --------------------*/
     8  
     9  @verticalMargin: 0em;
    10  @horizontalMargin: 0.25em;
    11  
    12  /* Style */
    13  @backgroundColor: #E0E0E0;
    14  @backgroundImage: none;
    15  @verticalPadding: 0.78571em;
    16  @horizontalPadding: 1.5em;
    17  
    18  /* Text */
    19  @textTransform: none;
    20  @tapColor: transparent;
    21  @fontFamily: @pageFont;
    22  @fontWeight: bold;
    23  @textColor: rgba(0, 0, 0, 0.6);
    24  @textShadow: none;
    25  @invertedTextShadow: none;
    26  @borderRadius: @defaultBorderRadius;
    27  @verticalAlign: baseline;
    28  
    29  /* Internal Shadow */
    30  @shadowDistance: 0em;
    31  @shadowOffset: (@shadowDistance / 2);
    32  @shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset;
    33  
    34  /* Box Shadow */
    35  @borderBoxShadowColor: transparent;
    36  @borderBoxShadowWidth: 1px;
    37  @borderBoxShadow: 0px 0px 0px @borderBoxShadowWidth @borderBoxShadowColor inset;
    38  @boxShadow:
    39    @borderBoxShadow,
    40    @shadowBoxShadow
    41  ;
    42  
    43  /* Icon */
    44  @iconOpacity: 0.8;
    45  @iconDistance: 0.4em;
    46  @iconColor: '';
    47  @iconTransition: opacity @transitionDuration @transitionEasing;
    48  @iconVerticalAlign: baseline;
    49  
    50  @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
    51  @rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
    52  
    53  /* Loader */
    54  @loaderSize: 1.2857em;
    55  @loaderOffset: -(@loaderSize / 2);
    56  @loaderMargin: @loaderOffset 0em 0em @loaderOffset;
    57  @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
    58  
    59  @transition:
    60    opacity 0.1s @transitionEasing,
    61    background-color 0.1s @transitionEasing,
    62    color 0.1s @transitionEasing,
    63    box-shadow 0.1s @transitionEasing,
    64    background 0.1s @transitionEasing
    65  ;
    66  /*
    67  @willChange: box-shadow, transform, opacity, color, background;
    68  */
    69  @willChange: '';
    70  
    71  /*-------------------
    72          Group
    73  --------------------*/
    74  
    75  @groupBoxShadow: none;
    76  @groupButtonBoxShadow: @boxShadow;
    77  @verticalBoxShadow: none;
    78  @groupButtonOffset: 0px 0px 0px 0px;
    79  @verticalGroupOffset: 0px 0px 0px 0px;
    80  
    81  /*-------------------
    82          States
    83  --------------------*/
    84  
    85  /* Hovered */
    86  @hoverBackgroundColor: #E8E8E8;
    87  @hoverBackgroundImage: none;
    88  @hoverBoxShadow: '';
    89  @hoverColor: @hoveredTextColor;
    90  @iconHoverOpacity: 0.85;
    91  
    92  /* Focused */
    93  @focusBackgroundColor: '';
    94  @focusBackgroundImage: '';
    95  @focusBoxShadow:
    96    @borderBoxShadow,
    97    0px 0px 1px rgba(81, 167, 232, 0.8) inset,
    98    0px 0px 3px 2px rgba(81, 167, 232, 0.8)
    99  ;
   100  @focusColor: @hoveredTextColor;
   101  @iconFocusOpacity: 0.85;
   102  
   103  /* Pressed Down */
   104  @downBackgroundColor: #CCCCCC;
   105  @downBackgroundImage: '';
   106  @downPressedShadow: 0px 1px 4px 0px @borderColor inset !important;
   107  @downBoxShadow:
   108    @borderBoxShadow,
   109    @downPressedShadow
   110  ;
   111  @downColor: @pressedTextColor;
   112  
   113  /* Active */
   114  @activeBackgroundColor: #D0D0D0;
   115  @activeBackgroundImage: none;
   116  @activeColor: @selectedTextColor;
   117  @activeBoxShadow: @borderBoxShadow;
   118  
   119  /* Active + Hovered */
   120  @activeHoverBackgroundColor: @activeBackgroundColor;
   121  @activeHoverBackgroundImage: none;
   122  @activeHoverColor: @activeColor;
   123  @activeHoverBoxShadow: @activeBoxShadow;
   124  
   125  /* Loading */
   126  @loadingOpacity: 1;
   127  @loadingPointerEvents: none;
   128  @loadingTransition:
   129    all 0s linear,
   130    opacity @transitionDuration @defaultEasing
   131  ;
   132  
   133  /*-------------------
   134          Types
   135  --------------------*/
   136  
   137  /* Or */
   138  @orText: 'or';
   139  
   140  @orGap: 0.3em;
   141  @orHeight: (@verticalPadding * 2) + 1em;
   142  
   143  @orCircleDistanceToEdge: (@verticalPadding);
   144  @orCircleSize: @orHeight - @orCircleDistanceToEdge;
   145  @orLineHeight: (@orCircleSize);
   146  @orBoxShadow: @borderBoxShadow;
   147  
   148  @orVerticalOffset: -(@orCircleSize / 2);
   149  @orHorizontalOffset: -(@orCircleSize / 2);
   150  
   151  @orBackgroundColor: @white;
   152  @orTextShadow: @invertedTextShadow;
   153  @orTextStyle: normal;
   154  @orTextWeight: bold;
   155  @orTextColor: @lightTextColor;
   156  
   157  
   158  @orSpacerHeight: @verticalPadding;
   159  @orSpacerColor: transparent;
   160  
   161  /* Icon */
   162  @iconButtonOpacity: 0.9;
   163  
   164  /* Labeled Icon */
   165  @labeledIconWidth: 1em + (@verticalPadding * 2);
   166  @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
   167  @labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
   168  @labeledIconBorder: transparent;
   169  @labeledIconColor: '';
   170  
   171  @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
   172  @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
   173  
   174  /* Inverted */
   175  @invertedBorderSize: 2px;
   176  @invertedTextColor: @white;
   177  @invertedTextHoverColor: @hoverColor;
   178  @invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize);
   179  @invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px;
   180  
   181  /* Basic */
   182  @basicBorderRadius: @borderRadius;
   183  @basicBorderSize: 1px;
   184  @basicTextColor: @textColor;
   185  @basicColoredBorderSize: 2px;
   186  
   187  @basicBackground: transparent;
   188  @basicFontWeight: normal;
   189  @basicBoxShadow: 0px 0px 0px @basicBorderSize @borderColor inset;
   190  @iconOffset: 0.05em;
   191  @basicLoadingColor: @offWhite;
   192  @basicTextTransform: none;
   193  
   194  /* Basic Hover */
   195  @basicHoverBackground: #FAFAFA;
   196  @basicHoverTextColor: @hoveredTextColor;
   197  @basicHoverBoxShadow:
   198    0px 0px 0px @basicBorderSize @borderColor inset,
   199    0px 0px 0px 0px @borderColor inset
   200  ;
   201  /* Basic Down */
   202  @basicDownBackground: #F8F8F8;
   203  @basicDownTextColor: @pressedTextColor;
   204  @basicDownBoxShadow:
   205    0px 0px 0px @basicBorderSize rgba(0, 0, 0, 0.15) inset,
   206    0px 1px 4px 0px @borderColor inset
   207  ;
   208  /* Basic Active */
   209  @basicActiveBackground: @transparentBlack;
   210  @basicActiveBoxShadow: '';
   211  @basicActiveTextColor: @selectedTextColor;
   212  
   213  /* Basic Inverted */
   214  @basicInvertedBackground: transparent;
   215  @basicInvertedHoverBackground: transparent;
   216  @basicInvertedDownBackground: @transparentWhite;
   217  @basicInvertedActiveBackground: @transparentWhite;
   218  
   219  @basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.5) inset;
   220  @basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 1) inset;
   221  @basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.9) inset;
   222  @basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize rgba(255, 255, 255, 0.7) inset;
   223  
   224  @basicInvertedColor: @darkWhite;
   225  @basicInvertedHoverColor: @darkWhiteHover;
   226  @basicInvertedDownColor: @darkWhiteActive;
   227  @basicInvertedActiveColor: @invertedTextColor;
   228  
   229  
   230  /* Basic Group */
   231  @basicGroupBorder: @basicBorderSize solid @borderColor;
   232  @basicGroupBoxShadow: 0px 0px 0px @basicBorderSize @borderColor;
   233  
   234  /*-------------------
   235        Variations
   236  --------------------*/
   237  
   238  /* Colors */
   239  @coloredBackgroundImage: none;
   240  @coloredBoxShadow: @shadowBoxShadow;
   241  
   242  /* Inverted by default for solids */
   243  @blueTextColor: @invertedTextColor;
   244  @blueTextShadow: @invertedTextShadow;
   245  @greenTextColor: @invertedTextColor;
   246  @greenTextShadow: @invertedTextShadow;
   247  @greyTextColor: @invertedTextColor;
   248  @greyTextShadow: @invertedTextShadow;
   249  @orangeTextColor: @invertedTextColor;
   250  @orangeTextShadow: @invertedTextShadow;
   251  @pinkTextColor: @invertedTextColor;
   252  @pinkTextShadow: @invertedTextShadow;
   253  @purpleTextColor: @invertedTextColor;
   254  @purpleTextShadow: @invertedTextShadow;
   255  @redTextColor: @invertedTextColor;
   256  @redTextShadow: @invertedTextShadow;
   257  @tealTextColor: @invertedTextColor;
   258  @tealTextShadow: @invertedTextShadow;
   259  @yellowTextColor: @invertedTextColor;
   260  @yellowTextShadow: @invertedTextShadow;
   261  
   262  @blackTextColor: @invertedTextColor;
   263  @blackTextShadow: @invertedTextShadow;
   264  
   265  
   266  /* Ordinality */
   267  @primaryBackgroundImage: @coloredBackgroundImage;
   268  @primaryTextColor: @invertedTextColor;
   269  @primaryTextShadow: @invertedTextShadow;
   270  @primaryBoxShadow: @coloredBoxShadow;
   271  
   272  @secondaryBackgroundImage: @coloredBackgroundImage;
   273  @secondaryTextColor: @invertedTextColor;
   274  @secondaryTextShadow: @invertedTextShadow;
   275  @secondaryBoxShadow: @coloredBoxShadow;
   276  
   277  /* Compact */
   278  @compactVerticalPadding: (@verticalPadding * 0.75);
   279  @compactHorizontalPadding: (@horizontalPadding * 0.75);
   280  
   281  /* Attached */
   282  @attachedOffset: -1px;
   283  @attachedBoxShadow: 0px 0px 0px 1px @borderColor;
   284  @attachedHorizontalPadding: 0.75em;
   285  
   286  /* Floated */
   287  @floatedMargin: 0.25em;
   288  
   289  /* Animated */
   290  @animatedVerticalAlign: middle;
   291  @animationDuration: 0.3s;
   292  @animationEasing: ease;
   293  @fadeScaleHigh: 1.5;
   294  @fadeScaleLow: 0.75;