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

     1  /*******************************
     2              Input
     3  *******************************/
     4  
     5  /*-------------------
     6        Element
     7  --------------------*/
     8  
     9  @inputFont: @pageFont;
    10  @verticalPadding: 0.78571em;
    11  @horizontalPadding: 1em;
    12  
    13  @lineHeight: 1.2142em;
    14  @lineHeightOffset: ((@lineHeight - 1em) / 2);
    15  
    16  @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
    17  
    18  @textAlign: left;
    19  @background: #FFFFFF;
    20  @borderWidth: 1px;
    21  @border: @borderWidth solid rgba(0, 0, 0, 0.15);
    22  @boxShadow: none;
    23  
    24  @borderRadius: @defaultBorderRadius;
    25  @transition:
    26    background-color @transitionDuration @transitionEasing,
    27    box-shadow @transitionDuration @transitionEasing,
    28    border-color @transitionDuration @transitionEasing
    29  ;
    30  
    31  @inputColor: @textColor;
    32  
    33  /*-------------------
    34          Types
    35  --------------------*/
    36  
    37  /* Icon Input */
    38  @glyphWidth: 1.25em;
    39  
    40  @iconWidth: (@verticalPadding * 2) + @glyphWidth;
    41  @iconOpacity: 0.5;
    42  @iconFocusOpacity: 1;
    43  @iconOffset: -0.5em;
    44  
    45  @iconDistance: 0em;
    46  @iconMargin: @iconWidth + @iconDistance;
    47  @iconTransition: opacity 0.3s @defaultEasing;
    48  
    49  @transparentIconWidth: @glyphWidth;
    50  @transparentIconMargin: 2em;
    51  
    52  /* Circular Icon Input */
    53  @circularIconVerticalOffset: 0.35em;
    54  @circularIconHorizontalOffset: 0.5em;
    55  
    56  /* Labeled Input */
    57  @labelCornerTop: @borderWidth;
    58  @labelCornerRight: @borderWidth;
    59  @labelCornerSize: 0.75em;
    60  @labelSize: 1em;
    61  
    62  @labeledMargin: 2.5em;
    63  @labeledIconInputMargin: 3.25em;
    64  @labeledIconMargin: 1.25em;
    65  
    66  /*-------------------
    67          States
    68  --------------------*/
    69  
    70  /* Placeholder */
    71  @placeholderColor: @unselectedTextColor;
    72  @placeholderFocusColor: @textColor;
    73  
    74  @placeholderErrorColor: rgba(255, 80, 80, 0.4);
    75  @placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
    76  
    77  /* Down */
    78  @downBorderColor: rgba(0, 0, 0, 0.3);
    79  @downBackground: #FAFAFA;
    80  @downColor: @textColor;
    81  @downBoxShadow: none;
    82  
    83  /* Focus */
    84  @focusBorderColor: @selectedBorderColor;
    85  @focusBackground: @background;
    86  @focusColor: @hoveredTextColor;
    87  @focusBoxShadow: none;
    88  
    89  /* Error */
    90  @errorBackground: @negativeBackgroundColor;
    91  @errorBorder: @negativeBorderColor;
    92  @errorColor: @negativeColor;
    93  @errorBoxShadow: none;
    94  
    95  /* Loader */
    96  @loaderSize: 1.2857em;
    97  @loaderOffset: -(@loaderSize / 2);
    98  @loaderMargin: @loaderOffset 0em 0em @loaderOffset;
    99  @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
   100  
   101  /*-------------------
   102        Variations
   103  --------------------*/
   104  
   105  /* Inverted */
   106  @transparentInvertedPlaceholderColor: @invertedUnselectedTextColor;
   107  @transparentInvertedColor: @white;
   108  
   109  
   110  /* Sizing */
   111  @mini: 0.8125rem;
   112  @small: 0.875rem;
   113  @medium: 1rem;
   114  @large: 1.125rem;
   115  @big: 1.25rem;
   116  @huge: 1.375rem;
   117  @massive: 1.5rem;
   118