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;