/sass/bootstrap/_forms.scss

https://bitbucket.org/decore/my-svadba.ru · Sass · 482 lines · 325 code · 73 blank · 84 comment · 0 complexity · f8e73a8befa8593d7a962e27ed7bbec7 MD5 · raw file

  1. // Forms.less
  2. // Base styles for various input types, form layouts, and states
  3. // -------------------------------------------------------------
  4. // GENERAL STYLES
  5. // --------------
  6. // Make all forms have space below them
  7. form {
  8. margin: 0 0 $baseLineHeight;
  9. }
  10. fieldset {
  11. padding: 0;
  12. margin: 0;
  13. border: 0;
  14. }
  15. // Groups of fields with labels on top (legends)
  16. legend {
  17. display: block;
  18. width: 100%;
  19. padding: 0;
  20. margin-bottom: $baseLineHeight * 1.5;
  21. font-size: $baseFontSize * 1.5;
  22. line-height: $baseLineHeight * 2;
  23. color: $grayDark;
  24. border: 0;
  25. border-bottom: 1px solid #e5e5e5;
  26. // Small
  27. small {
  28. font-size: $baseLineHeight * .75;
  29. color: $grayLight;
  30. }
  31. }
  32. // Set font for forms
  33. label, input, button, select, textarea {
  34. @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
  35. }
  36. input, button, select, textarea {
  37. font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
  38. }
  39. // Identify controls by their labels
  40. label {
  41. display: block;
  42. margin-bottom: 5px;
  43. }
  44. // Form controls
  45. // -------------------------
  46. // Shared size and type resets
  47. select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
  48. input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
  49. input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  50. display: inline-block;
  51. height: $baseLineHeight;
  52. padding: 4px;
  53. margin-bottom: 9px;
  54. font-size: $baseFontSize;
  55. line-height: $baseLineHeight;
  56. color: $gray;
  57. }
  58. // Reset appearance properties for textual inputs and textarea
  59. // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
  60. input, textarea {
  61. width: 210px;
  62. }
  63. // Reset height since textareas have rows
  64. textarea {
  65. height: auto;
  66. }
  67. // Everything else
  68. textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
  69. input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"],
  70. input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  71. background-color: $inputBackground;
  72. border: 1px solid $inputBorder;
  73. @include border-radius($inputBorderRadius);
  74. @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  75. @include transition(#{border linear .2s, box-shadow linear .2s});
  76. // Focus state
  77. &:focus {
  78. border-color: rgba(119,90,78,.8);
  79. outline: 0;
  80. outline: thin dotted \9; /* IE6-9 */
  81. @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(119,90,78,.6)});
  82. }
  83. }
  84. // 0 0 8px rgba(82,168,236,.6)});
  85. // Position radios and checkboxes better
  86. input[type="radio"], input[type="checkbox"] {
  87. margin: 3px 0;
  88. *margin-top: 0; /* IE7 */
  89. line-height: normal;
  90. cursor: pointer;
  91. }
  92. // Reset width of input buttons, radios, checkboxes
  93. input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
  94. width: auto; // Override of generic input selector
  95. }
  96. // Make uneditable textareas behave like a textarea
  97. .uneditable-textarea {
  98. width: auto;
  99. height: auto;
  100. }
  101. // Set the height of select and file controls to match text inputs
  102. select, input[type="file"] {
  103. height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  104. *margin-top: 4px; /* For IE7, add top margin to align select with labels */
  105. line-height: 28px;
  106. }
  107. // Make select elements obey height by applying a border
  108. select {
  109. width: 220px; // default input width + 10px of padding that doesn't get applied
  110. border: 1px solid #bbb;
  111. }
  112. // Make multiple select elements height not fixed
  113. select[multiple], select[size] {
  114. height: auto;
  115. }
  116. // Focus for select, file, radio, and checkbox
  117. select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
  118. @include tab-focus();
  119. }
  120. // CHECKBOXES & RADIOS
  121. // -------------------
  122. // Indent the labels to position radios/checkboxes as hanging
  123. .radio, .checkbox {
  124. min-height: 18px; // clear the floating input if there is no label text
  125. padding-left: 18px;
  126. }
  127. .radio input[type="radio"], .checkbox input[type="checkbox"] {
  128. float: left;
  129. margin-left: -18px;
  130. }
  131. // Move the options list down to align with labels
  132. .controls > .radio:first-child, .controls > .checkbox:first-child {
  133. padding-top: 5px; // has to be padding because margin collaspes
  134. }
  135. // Radios and checkboxes on same line
  136. // TODO v3: Convert .inline to .control-inline
  137. .radio.inline, .checkbox.inline {
  138. display: inline-block;
  139. padding-top: 5px;
  140. margin-bottom: 0;
  141. vertical-align: middle;
  142. }
  143. .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
  144. margin-left: 10px; // space out consecutive inline controls
  145. }
  146. // INPUT SIZES
  147. // -----------
  148. // General classes for quick sizes
  149. .input-mini { width: 60px; }
  150. .input-small { width: 90px; }
  151. .input-medium { width: 150px; }
  152. .input-large { width: 210px; }
  153. .input-xlarge { width: 270px; }
  154. .input-xxlarge { width: 530px; }
  155. // Grid style input sizes
  156. input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
  157. // Redeclare since the fluid row class is more specific
  158. .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
  159. float: none;
  160. margin-left: 0;
  161. }
  162. // Ensure input-prepend/append never wraps
  163. .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"],
  164. .input-prepend .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] {
  165. display: inline-block;
  166. }
  167. // GRID SIZING FOR INPUTS
  168. // ----------------------
  169. @include gridInput($gridColumnWidth, $gridGutterWidth);
  170. // DISABLED STATE
  171. // --------------
  172. // Disabled and read-only inputs
  173. input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
  174. cursor: not-allowed;
  175. background-color: $inputDisabledBackground;
  176. border-color: #ddd;
  177. }
  178. // Explicitly reset the colors here
  179. input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
  180. background-color: transparent;
  181. }
  182. // FORM FIELD FEEDBACK STATES
  183. // --------------------------
  184. // Warning
  185. .control-group.warning {
  186. @include formFieldState($warningText, $warningText, $warningBackground);
  187. }
  188. // Error
  189. .control-group.error {
  190. @include formFieldState($errorText, $errorText, $errorBackground);
  191. }
  192. // Success
  193. .control-group.success {
  194. @include formFieldState($successText, $successText, $successBackground);
  195. }
  196. // HTML5 invalid states
  197. // Shares styles with the .control-group.error above
  198. input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
  199. color: #b94a48;
  200. border-color: #ee5f5b;
  201. &:focus {
  202. border-color: darken(#ee5f5b, 10%);
  203. @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
  204. }
  205. }
  206. // FORM ACTIONS
  207. // ------------
  208. .form-actions {
  209. padding: ($baseLineHeight - 1) 20px $baseLineHeight;
  210. margin-top: $baseLineHeight;
  211. margin-bottom: $baseLineHeight;
  212. background-color: $formActionsBackground;
  213. border-top: 1px solid #e5e5e5;
  214. @include clearfix(); // Adding clearfix to allow for .pull-right button containers
  215. }
  216. // For text that needs to appear as an input but should not be an input
  217. .uneditable-input {
  218. overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
  219. white-space: nowrap;
  220. cursor: not-allowed;
  221. background-color: $inputBackground;
  222. border-color: #eee;
  223. @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
  224. }
  225. // Placeholder text gets special styles; can't be bundled together though for some reason
  226. // (sass-edit) - need special mixin
  227. @include rootPlaceholder();
  228. // HELP TEXT
  229. // ---------
  230. .help-block, .help-inline {
  231. color: $gray; // lighten the text some for contrast
  232. }
  233. .help-block {
  234. display: block; // account for any element using help-block
  235. margin-bottom: $baseLineHeight / 2;
  236. }
  237. .help-inline {
  238. display: inline-block;
  239. @include ie7-inline-block();
  240. vertical-align: middle;
  241. padding-left: 5px;
  242. }
  243. // INPUT GROUPS
  244. // ------------
  245. // Allow us to put symbols and text within the input field for a cleaner look
  246. .input-prepend, .input-append {
  247. margin-bottom: 5px;
  248. input, select, .uneditable-input {
  249. position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
  250. margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
  251. *margin-left: 0;
  252. vertical-align: middle;
  253. @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
  254. // Make input on top when focused so blue border and shadow always show
  255. &:focus {
  256. z-index: 2;
  257. }
  258. }
  259. .uneditable-input {
  260. border-left-color: #ccc;
  261. }
  262. .add-on {
  263. display: inline-block;
  264. width: auto;
  265. height: $baseLineHeight;
  266. min-width: 16px;
  267. padding: 4px 5px;
  268. font-weight: normal;
  269. line-height: $baseLineHeight;
  270. text-align: center;
  271. text-shadow: 0 1px 0 $white;
  272. vertical-align: middle;
  273. background-color: $grayLighter;
  274. border: 1px solid #ccc;
  275. }
  276. .add-on, .btn {
  277. margin-left: -1px;
  278. @include border-radius(0);
  279. }
  280. .active {
  281. background-color: lighten($green, 30);
  282. border-color: $green;
  283. }
  284. }
  285. .input-prepend {
  286. .add-on, .btn {
  287. margin-right: -1px;
  288. }
  289. .add-on:first-child, .btn:first-child {
  290. @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
  291. }
  292. }
  293. .input-append {
  294. input, select, .uneditable-input {
  295. @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
  296. }
  297. .uneditable-input {
  298. border-right-color: #ccc;
  299. border-left-color: #eee;
  300. }
  301. .add-on:last-child, .btn:last-child {
  302. @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
  303. }
  304. }
  305. // Remove all border-radius for inputs with both prepend and append
  306. .input-prepend.input-append {
  307. input, select, .uneditable-input {
  308. @include border-radius(0);
  309. }
  310. .add-on:first-child, .btn:first-child {
  311. margin-right: -1px;
  312. @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
  313. }
  314. .add-on:last-child, .btn:last-child {
  315. margin-left: -1px;
  316. @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
  317. }
  318. }
  319. // SEARCH FORM
  320. // -----------
  321. .search-query {
  322. padding-right: 14px;
  323. padding-right: 4px \9;
  324. padding-left: 14px;
  325. padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
  326. margin-bottom: 0; // remove the default margin on all inputs
  327. @include border-radius(14px);
  328. }
  329. // HORIZONTAL & VERTICAL FORMS
  330. // ---------------------------
  331. // Common properties
  332. // -----------------
  333. .form-search, .form-inline, .form-horizontal {
  334. input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
  335. display: inline-block;
  336. @include ie7-inline-block();
  337. margin-bottom: 0;
  338. }
  339. // Re-hide hidden elements due to specifity
  340. .hide {
  341. display: none;
  342. }
  343. }
  344. .form-search label, .form-inline label {
  345. display: inline-block;
  346. }
  347. // Remove margin for input-prepend/-append
  348. .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
  349. margin-bottom: 0;
  350. }
  351. // Inline checkbox/radio labels (remove padding on left)
  352. .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
  353. padding-left: 0;
  354. margin-bottom: 0;
  355. vertical-align: middle;
  356. }
  357. // Remove float and margin, set to inline-block
  358. .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"],
  359. .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
  360. float: left;
  361. margin-right: 3px;
  362. margin-left: 0;
  363. }
  364. // Margin to space out fieldsets
  365. .control-group {
  366. margin-bottom: $baseLineHeight / 2;
  367. }
  368. // Legend collapses margin, so next element is responsible for spacing
  369. legend + .control-group {
  370. margin-top: $baseLineHeight;
  371. -webkit-margin-top-collapse: separate;
  372. }
  373. // Horizontal-specific styles
  374. // --------------------------
  375. .form-horizontal {
  376. // Increase spacing between groups
  377. .control-group {
  378. margin-bottom: $baseLineHeight;
  379. @include clearfix();
  380. }
  381. // Float the labels left
  382. .control-label {
  383. float: left;
  384. width: 140px;
  385. padding-top: 5px;
  386. text-align: right;
  387. }
  388. // Move over all input controls and content
  389. .controls {
  390. // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
  391. // don't inherit the margin of the parent, in this case .controls
  392. *display: inline-block;
  393. *padding-left: 20px;
  394. margin-left: 160px;
  395. *margin-left: 0;
  396. &:first-child {
  397. *padding-left: 160px;
  398. }
  399. }
  400. // Remove bottom margin on block level help text since that's accounted for on .control-group
  401. .help-block {
  402. margin-top: $baseLineHeight / 2;
  403. margin-bottom: 0;
  404. }
  405. // Move over buttons in .form-actions to align with .controls
  406. .form-actions {
  407. padding-left: 160px;
  408. }
  409. }