1
0

forms.less 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. //
  2. // Forms
  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;
  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,
  34. input,
  35. button,
  36. select,
  37. textarea {
  38. #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
  39. }
  40. input,
  41. button,
  42. select,
  43. textarea {
  44. font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
  45. }
  46. // Identify controls by their labels
  47. label {
  48. display: block;
  49. margin-bottom: 5px;
  50. }
  51. // Form controls
  52. // -------------------------
  53. // Shared size and type resets
  54. select,
  55. textarea,
  56. input[type="text"],
  57. input[type="password"],
  58. input[type="datetime"],
  59. input[type="datetime-local"],
  60. input[type="date"],
  61. input[type="month"],
  62. input[type="time"],
  63. input[type="week"],
  64. input[type="number"],
  65. input[type="email"],
  66. input[type="url"],
  67. input[type="search"],
  68. input[type="tel"],
  69. input[type="color"],
  70. .uneditable-input {
  71. display: inline-block;
  72. height: @baseLineHeight;
  73. padding: 4px 6px;
  74. margin-bottom: @baseLineHeight / 2;
  75. font-size: @baseFontSize;
  76. line-height: @baseLineHeight;
  77. color: @gray;
  78. .border-radius(@inputBorderRadius);
  79. vertical-align: middle;
  80. }
  81. // Reset appearance properties for textual inputs and textarea
  82. // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
  83. input,
  84. textarea,
  85. .uneditable-input {
  86. width: 206px; // plus 12px padding and 2px border
  87. }
  88. // Reset height since textareas have rows
  89. textarea {
  90. height: auto;
  91. }
  92. // Everything else
  93. textarea,
  94. input[type="text"],
  95. input[type="password"],
  96. input[type="datetime"],
  97. input[type="datetime-local"],
  98. input[type="date"],
  99. input[type="month"],
  100. input[type="time"],
  101. input[type="week"],
  102. input[type="number"],
  103. input[type="email"],
  104. input[type="url"],
  105. input[type="search"],
  106. input[type="tel"],
  107. input[type="color"],
  108. .uneditable-input {
  109. background-color: @inputBackground;
  110. border: 1px solid @inputBorder;
  111. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  112. .transition(~"border linear .2s, box-shadow linear .2s");
  113. // Focus state
  114. &:focus {
  115. border-color: rgba(82,168,236,.8);
  116. outline: 0;
  117. outline: thin dotted \9; /* IE6-9 */
  118. .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
  119. }
  120. }
  121. // Position radios and checkboxes better
  122. input[type="radio"],
  123. input[type="checkbox"] {
  124. margin: 4px 0 0;
  125. *margin-top: 0; /* IE7 */
  126. margin-top: 1px \9; /* IE8-9 */
  127. line-height: normal;
  128. }
  129. // Reset width of input images, buttons, radios, checkboxes
  130. input[type="file"],
  131. input[type="image"],
  132. input[type="submit"],
  133. input[type="reset"],
  134. input[type="button"],
  135. input[type="radio"],
  136. input[type="checkbox"] {
  137. width: auto; // Override of generic input selector
  138. }
  139. // Set the height of select and file controls to match text inputs
  140. select,
  141. input[type="file"] {
  142. height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  143. *margin-top: 4px; /* For IE7, add top margin to align select with labels */
  144. line-height: @inputHeight;
  145. }
  146. // Make select elements obey height by applying a border
  147. select {
  148. width: 220px; // default input width + 10px of padding that doesn't get applied
  149. border: 1px solid @inputBorder;
  150. background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
  151. }
  152. // Make multiple select elements height not fixed
  153. select[multiple],
  154. select[size] {
  155. height: auto;
  156. }
  157. // Focus for select, file, radio, and checkbox
  158. select:focus,
  159. input[type="file"]:focus,
  160. input[type="radio"]:focus,
  161. input[type="checkbox"]:focus {
  162. .tab-focus();
  163. }
  164. // Uneditable inputs
  165. // -------------------------
  166. // Make uneditable inputs look inactive
  167. .uneditable-input,
  168. .uneditable-textarea {
  169. color: @grayLight;
  170. background-color: darken(@inputBackground, 1%);
  171. border-color: @inputBorder;
  172. .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
  173. cursor: not-allowed;
  174. }
  175. // For text that needs to appear as an input but should not be an input
  176. .uneditable-input {
  177. overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
  178. white-space: nowrap;
  179. }
  180. // Make uneditable textareas behave like a textarea
  181. .uneditable-textarea {
  182. width: auto;
  183. height: auto;
  184. }
  185. // Placeholder
  186. // -------------------------
  187. // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
  188. input,
  189. textarea {
  190. .placeholder();
  191. }
  192. // CHECKBOXES & RADIOS
  193. // -------------------
  194. // Indent the labels to position radios/checkboxes as hanging
  195. .radio,
  196. .checkbox {
  197. min-height: @baseLineHeight; // clear the floating input if there is no label text
  198. padding-left: 20px;
  199. }
  200. .radio input[type="radio"],
  201. .checkbox input[type="checkbox"] {
  202. float: left;
  203. margin-left: -20px;
  204. }
  205. // Move the options list down to align with labels
  206. .controls > .radio:first-child,
  207. .controls > .checkbox:first-child {
  208. padding-top: 5px; // has to be padding because margin collaspes
  209. }
  210. // Radios and checkboxes on same line
  211. // TODO v3: Convert .inline to .control-inline
  212. .radio.inline,
  213. .checkbox.inline {
  214. display: inline-block;
  215. padding-top: 5px;
  216. margin-bottom: 0;
  217. vertical-align: middle;
  218. }
  219. .radio.inline + .radio.inline,
  220. .checkbox.inline + .checkbox.inline {
  221. margin-left: 10px; // space out consecutive inline controls
  222. }
  223. // INPUT SIZES
  224. // -----------
  225. // General classes for quick sizes
  226. .input-mini { width: 60px; }
  227. .input-small { width: 90px; }
  228. .input-medium { width: 150px; }
  229. .input-large { width: 210px; }
  230. .input-xlarge { width: 270px; }
  231. .input-xxlarge { width: 530px; }
  232. // Grid style input sizes
  233. input[class*="span"],
  234. select[class*="span"],
  235. textarea[class*="span"],
  236. .uneditable-input[class*="span"],
  237. // Redeclare since the fluid row class is more specific
  238. .row-fluid input[class*="span"],
  239. .row-fluid select[class*="span"],
  240. .row-fluid textarea[class*="span"],
  241. .row-fluid .uneditable-input[class*="span"] {
  242. float: none;
  243. margin-left: 0;
  244. }
  245. // Ensure input-prepend/append never wraps
  246. .input-append input[class*="span"],
  247. .input-append .uneditable-input[class*="span"],
  248. .input-prepend input[class*="span"],
  249. .input-prepend .uneditable-input[class*="span"],
  250. .row-fluid input[class*="span"],
  251. .row-fluid select[class*="span"],
  252. .row-fluid textarea[class*="span"],
  253. .row-fluid .uneditable-input[class*="span"],
  254. .row-fluid .input-prepend [class*="span"],
  255. .row-fluid .input-append [class*="span"] {
  256. display: inline-block;
  257. }
  258. // GRID SIZING FOR INPUTS
  259. // ----------------------
  260. // Grid sizes
  261. #grid > .input(@gridColumnWidth, @gridGutterWidth);
  262. // Control row for multiple inputs per line
  263. .controls-row {
  264. .clearfix(); // Clear the float from controls
  265. }
  266. // Float to collapse white-space for proper grid alignment
  267. .controls-row [class*="span"],
  268. // Redeclare the fluid grid collapse since we undo the float for inputs
  269. .row-fluid .controls-row [class*="span"] {
  270. float: left;
  271. }
  272. // Explicity set top padding on all checkboxes/radios, not just first-child
  273. .controls-row .checkbox[class*="span"],
  274. .controls-row .radio[class*="span"] {
  275. padding-top: 5px;
  276. }
  277. // DISABLED STATE
  278. // --------------
  279. // Disabled and read-only inputs
  280. input[disabled],
  281. select[disabled],
  282. textarea[disabled],
  283. input[readonly],
  284. select[readonly],
  285. textarea[readonly] {
  286. cursor: not-allowed;
  287. background-color: @inputDisabledBackground;
  288. }
  289. // Explicitly reset the colors here
  290. input[type="radio"][disabled],
  291. input[type="checkbox"][disabled],
  292. input[type="radio"][readonly],
  293. input[type="checkbox"][readonly] {
  294. background-color: transparent;
  295. }
  296. // FORM FIELD FEEDBACK STATES
  297. // --------------------------
  298. // Warning
  299. .control-group.warning {
  300. .formFieldState(@warningText, @warningText, @warningBackground);
  301. }
  302. // Error
  303. .control-group.error {
  304. .formFieldState(@errorText, @errorText, @errorBackground);
  305. }
  306. // Success
  307. .control-group.success {
  308. .formFieldState(@successText, @successText, @successBackground);
  309. }
  310. // Success
  311. .control-group.info {
  312. .formFieldState(@infoText, @infoText, @infoBackground);
  313. }
  314. // HTML5 invalid states
  315. // Shares styles with the .control-group.error above
  316. input:focus:invalid,
  317. textarea:focus:invalid,
  318. select:focus:invalid {
  319. color: #b94a48;
  320. border-color: #ee5f5b;
  321. &:focus {
  322. border-color: darken(#ee5f5b, 10%);
  323. @shadow: 0 0 6px lighten(#ee5f5b, 20%);
  324. .box-shadow(@shadow);
  325. }
  326. }
  327. // FORM ACTIONS
  328. // ------------
  329. .form-actions {
  330. padding: (@baseLineHeight - 1) 20px @baseLineHeight;
  331. margin-top: @baseLineHeight;
  332. margin-bottom: @baseLineHeight;
  333. background-color: @formActionsBackground;
  334. border-top: 1px solid #e5e5e5;
  335. .clearfix(); // Adding clearfix to allow for .pull-right button containers
  336. }
  337. // HELP TEXT
  338. // ---------
  339. .help-block,
  340. .help-inline {
  341. color: lighten(@textColor, 15%); // lighten the text some for contrast
  342. }
  343. .help-block {
  344. display: block; // account for any element using help-block
  345. margin-bottom: @baseLineHeight / 2;
  346. }
  347. .help-inline {
  348. display: inline-block;
  349. .ie7-inline-block();
  350. vertical-align: middle;
  351. padding-left: 5px;
  352. }
  353. // INPUT GROUPS
  354. // ------------
  355. // Allow us to put symbols and text within the input field for a cleaner look
  356. .input-append,
  357. .input-prepend {
  358. display: inline-block;
  359. margin-bottom: @baseLineHeight / 2;
  360. vertical-align: middle;
  361. font-size: 0; // white space collapse hack
  362. white-space: nowrap; // Prevent span and input from separating
  363. // Reset the white space collapse hack
  364. input,
  365. select,
  366. .uneditable-input,
  367. .dropdown-menu,
  368. .popover {
  369. font-size: @baseFontSize;
  370. }
  371. input,
  372. select,
  373. .uneditable-input {
  374. 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
  375. margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
  376. *margin-left: 0;
  377. vertical-align: top;
  378. .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  379. // Make input on top when focused so blue border and shadow always show
  380. &:focus {
  381. z-index: 2;
  382. }
  383. }
  384. .add-on {
  385. display: inline-block;
  386. width: auto;
  387. height: @baseLineHeight;
  388. min-width: 16px;
  389. padding: 4px 5px;
  390. font-size: @baseFontSize;
  391. font-weight: normal;
  392. line-height: @baseLineHeight;
  393. text-align: center;
  394. text-shadow: 0 1px 0 @white;
  395. background-color: @grayLighter;
  396. border: 1px solid #ccc;
  397. }
  398. .add-on,
  399. .btn,
  400. .btn-group > .dropdown-toggle {
  401. vertical-align: top;
  402. .border-radius(0);
  403. }
  404. .active {
  405. background-color: lighten(@green, 30);
  406. border-color: @green;
  407. }
  408. }
  409. .input-prepend {
  410. .add-on,
  411. .btn {
  412. margin-right: -1px;
  413. }
  414. .add-on:first-child,
  415. .btn:first-child {
  416. // FYI, `.btn:first-child` accounts for a button group that's prepended
  417. .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  418. }
  419. }
  420. .input-append {
  421. input,
  422. select,
  423. .uneditable-input {
  424. .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  425. + .btn-group .btn:last-child {
  426. .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  427. }
  428. }
  429. .add-on,
  430. .btn,
  431. .btn-group {
  432. margin-left: -1px;
  433. }
  434. .add-on:last-child,
  435. .btn:last-child,
  436. .btn-group:last-child > .dropdown-toggle {
  437. .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  438. }
  439. }
  440. // Remove all border-radius for inputs with both prepend and append
  441. .input-prepend.input-append {
  442. input,
  443. select,
  444. .uneditable-input {
  445. .border-radius(0);
  446. + .btn-group .btn {
  447. .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  448. }
  449. }
  450. .add-on:first-child,
  451. .btn:first-child {
  452. margin-right: -1px;
  453. .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
  454. }
  455. .add-on:last-child,
  456. .btn:last-child {
  457. margin-left: -1px;
  458. .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
  459. }
  460. .btn-group:first-child {
  461. margin-left: 0;
  462. }
  463. }
  464. // SEARCH FORM
  465. // -----------
  466. input.search-query {
  467. padding-right: 14px;
  468. padding-right: 4px \9;
  469. padding-left: 14px;
  470. padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
  471. margin-bottom: 0; // Remove the default margin on all inputs
  472. .border-radius(15px);
  473. }
  474. /* Allow for input prepend/append in search forms */
  475. .form-search .input-append .search-query,
  476. .form-search .input-prepend .search-query {
  477. .border-radius(0); // Override due to specificity
  478. }
  479. .form-search .input-append .search-query {
  480. .border-radius(14px 0 0 14px);
  481. }
  482. .form-search .input-append .btn {
  483. .border-radius(0 14px 14px 0);
  484. }
  485. .form-search .input-prepend .search-query {
  486. .border-radius(0 14px 14px 0);
  487. }
  488. .form-search .input-prepend .btn {
  489. .border-radius(14px 0 0 14px);
  490. }
  491. // HORIZONTAL & VERTICAL FORMS
  492. // ---------------------------
  493. // Common properties
  494. // -----------------
  495. .form-search,
  496. .form-inline,
  497. .form-horizontal {
  498. input,
  499. textarea,
  500. select,
  501. .help-inline,
  502. .uneditable-input,
  503. .input-prepend,
  504. .input-append {
  505. display: inline-block;
  506. .ie7-inline-block();
  507. margin-bottom: 0;
  508. vertical-align: middle;
  509. }
  510. // Re-hide hidden elements due to specifity
  511. .hide {
  512. display: none;
  513. }
  514. }
  515. .form-search label,
  516. .form-inline label,
  517. .form-search .btn-group,
  518. .form-inline .btn-group {
  519. display: inline-block;
  520. }
  521. // Remove margin for input-prepend/-append
  522. .form-search .input-append,
  523. .form-inline .input-append,
  524. .form-search .input-prepend,
  525. .form-inline .input-prepend {
  526. margin-bottom: 0;
  527. }
  528. // Inline checkbox/radio labels (remove padding on left)
  529. .form-search .radio,
  530. .form-search .checkbox,
  531. .form-inline .radio,
  532. .form-inline .checkbox {
  533. padding-left: 0;
  534. margin-bottom: 0;
  535. vertical-align: middle;
  536. }
  537. // Remove float and margin, set to inline-block
  538. .form-search .radio input[type="radio"],
  539. .form-search .checkbox input[type="checkbox"],
  540. .form-inline .radio input[type="radio"],
  541. .form-inline .checkbox input[type="checkbox"] {
  542. float: left;
  543. margin-right: 3px;
  544. margin-left: 0;
  545. }
  546. // Margin to space out fieldsets
  547. .control-group {
  548. margin-bottom: @baseLineHeight / 2;
  549. }
  550. // Legend collapses margin, so next element is responsible for spacing
  551. legend + .control-group {
  552. margin-top: @baseLineHeight;
  553. -webkit-margin-top-collapse: separate;
  554. }
  555. // Horizontal-specific styles
  556. // --------------------------
  557. .form-horizontal {
  558. // Increase spacing between groups
  559. .control-group {
  560. margin-bottom: @baseLineHeight;
  561. .clearfix();
  562. }
  563. // Float the labels left
  564. .control-label {
  565. float: left;
  566. width: @horizontalComponentOffset - 20;
  567. padding-top: 5px;
  568. text-align: right;
  569. }
  570. // Move over all input controls and content
  571. .controls {
  572. // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
  573. // don't inherit the margin of the parent, in this case .controls
  574. *display: inline-block;
  575. *padding-left: 20px;
  576. margin-left: @horizontalComponentOffset;
  577. *margin-left: 0;
  578. &:first-child {
  579. *padding-left: @horizontalComponentOffset;
  580. }
  581. }
  582. // Remove bottom margin on block level help text since that's accounted for on .control-group
  583. .help-block {
  584. margin-bottom: 0;
  585. }
  586. // And apply it only to .help-block instances that follow a form control
  587. input,
  588. select,
  589. textarea,
  590. .uneditable-input,
  591. .input-prepend,
  592. .input-append {
  593. + .help-block {
  594. margin-top: @baseLineHeight / 2;
  595. }
  596. }
  597. // Move over buttons in .form-actions to align with .controls
  598. .form-actions {
  599. padding-left: @horizontalComponentOffset;
  600. }
  601. }