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

     1  /*******************************
     2               Form
     3  *******************************/
     4  
     5  /*-------------------
     6         Elements
     7  --------------------*/
     8  
     9  /* Form */
    10  @gutterWidth: 1em;
    11  @rowDistance: 1em;
    12  
    13  /* Text */
    14  @paragraphMargin: @rowDistance 0em;
    15  
    16  /* Field */
    17  @fieldMargin: 0em 0em @rowDistance;
    18  
    19  /* Form Label */
    20  @labelDistance: 0.2857rem;
    21  @labelMargin: 0em 0em @labelDistance 0em;
    22  @labelFontSize: 0.9285em;
    23  @labelFontWeight: bold;
    24  @labelTextTransform: none;
    25  @labelColor: @textColor;
    26  
    27  /* Input */
    28  @inputFont: @pageFont;
    29  @inputWidth: 100%;
    30  @inputFontSize: 1em;
    31  @inputVerticalPadding: 0.78571em;
    32  @inputHorizontalPadding: 1em;
    33  @inputLineHeight: 1.2142em;
    34  @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
    35  @inputBackground: #FFFFFF;
    36  @inputBorder: 1px solid @borderColor;
    37  @inputBorderRadius: @absoluteBorderRadius;
    38  @inputColor: @textColor;
    39  @inputTransition:
    40    background-color 0.2s ease,
    41    color 0.2s ease,
    42    box-shadow 0.2s ease,
    43    border-color 0.2s ease
    44  ;
    45  @inputBoxShadow: 0em 0em 0em 0em transparent inset;
    46  
    47  /* Select */
    48  @selectBackground: @white;
    49  @selectBorderRadius: @inputBorderRadius;
    50  @selectBorder: @inputBorder;
    51  @selectPadding: 0.62em @inputHorizontalPadding;
    52  @selectBoxShadow: @inputBoxShadow;
    53  @selectTransition: @inputTransition;
    54  @selectColor: @inputColor;
    55  
    56  /* Text Area */
    57  @textAreaPadding: @inputVerticalPadding @inputHorizontalPadding;
    58  @textAreaHeight: 12em;
    59  @textAreaResize: vertical;
    60  @textAreaLineHeight: 1.2857;
    61  @textAreaMinHeight: 8em;
    62  @textAreaMaxHeight: 24em;
    63  @textAreaBackground: @inputBackground;
    64  @textAreaBorder: @inputBorder;
    65  @textAreaFontSize: @inputFontSize;
    66  @textAreaTransition: @inputTransition;
    67  
    68  /* Checkbox */
    69  @checkboxVerticalAlign: top;
    70  @checkboxLabelFontSize: 1em;
    71  @checkboxLabelTextTransform: @labelTextTransform;
    72  
    73  /* Divider */
    74  @dividerMargin: @rowDistance 0em;
    75  
    76  /* Inline Validation Prompt */
    77  @inlineValidationMargin: -0.5em 0em -0.5em @rowDistance;
    78  @inlineValidationArrowOffset: -0.3em;
    79  
    80  /*-------------------
    81          States
    82  --------------------*/
    83  
    84  /* Disabled */
    85  
    86  /* Focus */
    87  @inputFocusPointerSize: 1px;
    88  
    89  /* Input Focus */
    90  @inputFocusBackground: @inputBackground;
    91  @inputFocusBorderColor: @selectedBorderColor;
    92  @inputFocusColor: rgba(0, 0, 0, 0.85);
    93  @inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
    94  @inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
    95  
    96  /* Text Area Focus */
    97  @textAreaFocusBackground: @inputFocusBackground;
    98  @textAreaFocusBorderColor: @inputFocusBorderColor;
    99  @textAreaFocusColor: @inputFocusColor;
   100  @textAreaFocusBoxShadow: @inputFocusBoxShadow;
   101  @textAreaFocusBorderRadius: @inputFocusBorderRadius;
   102  
   103  /* Error */
   104  @formErrorColor: @negativeColor;
   105  @formErrorBorder: @negativeBorderColor;
   106  @formErrorBackground: @negativeBackgroundColor;
   107  
   108  /* Input Error */
   109  @inputErrorPointerSize: 2px;
   110  @inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
   111  @inputErrorBoxShadow: @inputErrorPointerSize 0em 0em 0em @formErrorColor inset;
   112  
   113  /* Dropdown Error */
   114  @dropdownErrorHoverBackground: #FBE7E7;
   115  @dropdownErrorActiveBackground: #FDCFCF;
   116  
   117  /* Focused Error */
   118  @inputErrorFocusBackground: @negativeBackgroundColor;
   119  @inputErrorFocusColor: @negativeColorHover;
   120  @inputErrorFocusBorder: @negativeBorderColor;
   121  @inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;
   122  
   123  /* Placeholder */
   124  @inputPlaceholderColor: lighten(@inputColor, 55);
   125  @inputPlaceholderFocusColor: lighten(@inputColor, 35);
   126  @inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
   127  @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
   128  
   129  
   130  /* Loading Dimmer */
   131  @loaderDimmerColor: rgba(255, 255, 255, 0.8);
   132  @loaderDimmerZIndex: 100;
   133  
   134  /* Loading Spinner */
   135  @loaderSize: 3em;
   136  @loaderOffset: -(@loaderSize / 2);
   137  @loaderMargin: @loaderOffset 0em 0em @loaderOffset;
   138  @loaderLineZIndex: 101;
   139  
   140  /*-------------------
   141          Types
   142  --------------------*/
   143  
   144  /* Required */
   145  @requiredContent: '*';
   146  @requiredColor: @negativeColor;
   147  @requiredVerticalOffset: -0.2em;
   148  @requiredDistance: 0.2em;
   149  @requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;
   150  
   151  /* Inverted */
   152  @invertedLabelColor: @invertedTextColor;
   153  
   154  /*-------------------
   155        Variations
   156  --------------------*/
   157  
   158  /* Grouped Fields */
   159  @groupedMargin: @fieldMargin;
   160  @groupedFieldMargin: 0.5em 0em;
   161  
   162  @groupedLabelDistance: @labelDistance;
   163  @groupedLabelColor: @labelColor;
   164  @groupedLabelMargin: @labelMargin;
   165  @groupedLabelFontSize: @labelFontSize;
   166  @groupedLabelFontWeight: @labelFontWeight;
   167  @groupedLabelTextTransform: @labelTextTransform;
   168  
   169  
   170  /* Inline */
   171  @inlineLabelFontSize: @labelFontSize;
   172  @inlineLabelVerticalAlign: middle;
   173  @inlineGroupedFieldLabelDistance: 0.5rem;
   174  @inlineCheckboxLabelDistance: 1.75em;
   175  
   176  @inlineLabelMargin: 0em 1em 0em 0em;
   177  @inlineLabelDistance: @labelDistance;
   178  @inlineLabelColor: @labelColor;
   179  @inlineLabelFontSize: @labelFontSize;
   180  @inlineLabelFontWeight: @labelFontWeight;
   181  @inlineLabelTextTransform: @labelTextTransform;
   182  
   183  /* Sizes */
   184  @small: 0.875em;
   185  @medium: auto;
   186  @large: 1.125em;
   187  @huge: 1.2em;
   188  
   189  /*-------------------
   190         Groups
   191  --------------------*/
   192  
   193  @inlineFieldsMargin: 0em 1em 0em 0em;