forms.less 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. //
  2. // Forms
  3. // --------------------------------------------------
  4. // Normalize non-controls
  5. //
  6. // Restyle and baseline non-control form elements.
  7. fieldset {
  8. padding: 0;
  9. margin: 0;
  10. border: 0;
  11. // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
  12. // so we reset that to ensure it behaves more like a standard block element.
  13. // See https://github.com/twbs/bootstrap/issues/12359.
  14. min-width: 0;
  15. }
  16. legend {
  17. display: block;
  18. width: 100%;
  19. padding: 0;
  20. margin-bottom: @line-height-computed;
  21. font-size: (@font-size-base * 1.5);
  22. line-height: inherit;
  23. color: @legend-color;
  24. border: 0;
  25. border-bottom: 1px solid @legend-border-color;
  26. }
  27. label {
  28. display: inline-block;
  29. max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
  30. margin-bottom: 5px;
  31. font-weight: bold;
  32. }
  33. // Normalize form controls
  34. //
  35. // While most of our form styles require extra classes, some basic normalization
  36. // is required to ensure optimum display with or without those classes to better
  37. // address browser inconsistencies.
  38. // Override content-box in Normalize (* isn't specific enough)
  39. input[type="search"] {
  40. .box-sizing(border-box);
  41. }
  42. // Position radios and checkboxes better
  43. input[type="radio"],
  44. input[type="checkbox"] {
  45. margin: 4px 0 0;
  46. margin-top: 1px \9; // IE8-9
  47. line-height: normal;
  48. }
  49. input[type="file"] {
  50. display: block;
  51. }
  52. // Make range inputs behave like textual form controls
  53. input[type="range"] {
  54. display: block;
  55. width: 100%;
  56. }
  57. // Make multiple select elements height not fixed
  58. select[multiple],
  59. select[size] {
  60. height: auto;
  61. }
  62. // Focus for file, radio, and checkbox
  63. input[type="file"]:focus,
  64. input[type="radio"]:focus,
  65. input[type="checkbox"]:focus {
  66. .tab-focus();
  67. }
  68. // Adjust output element
  69. output {
  70. display: block;
  71. padding-top: (@padding-base-vertical + 1);
  72. font-size: @font-size-base;
  73. line-height: @line-height-base;
  74. color: @input-color;
  75. }
  76. // Common form controls
  77. //
  78. // Shared size and type resets for form controls. Apply `.form-control` to any
  79. // of the following form controls:
  80. //
  81. // select
  82. // textarea
  83. // input[type="text"]
  84. // input[type="password"]
  85. // input[type="datetime"]
  86. // input[type="datetime-local"]
  87. // input[type="date"]
  88. // input[type="month"]
  89. // input[type="time"]
  90. // input[type="week"]
  91. // input[type="number"]
  92. // input[type="email"]
  93. // input[type="url"]
  94. // input[type="search"]
  95. // input[type="tel"]
  96. // input[type="color"]
  97. .form-control {
  98. display: block;
  99. width: 100%;
  100. height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  101. padding: @padding-base-vertical @padding-base-horizontal;
  102. font-size: @font-size-base;
  103. line-height: @line-height-base;
  104. color: @input-color;
  105. background-color: @input-bg;
  106. background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  107. border: 1px solid @input-border;
  108. border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  109. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  110. .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
  111. // Customize the `:focus` state to imitate native WebKit styles.
  112. .form-control-focus();
  113. // Placeholder
  114. .placeholder();
  115. // Unstyle the caret on `<select>`s in IE10+.
  116. &::-ms-expand {
  117. border: 0;
  118. background-color: transparent;
  119. }
  120. // Disabled and read-only inputs
  121. //
  122. // HTML5 says that controls under a fieldset > legend:first-child won't be
  123. // disabled if the fieldset is disabled. Due to implementation difficulty, we
  124. // don't honor that edge case; we style them as disabled anyway.
  125. &[disabled],
  126. &[readonly],
  127. fieldset[disabled] & {
  128. background-color: @input-bg-disabled;
  129. opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  130. }
  131. &[disabled],
  132. fieldset[disabled] & {
  133. cursor: @cursor-disabled;
  134. }
  135. // Reset height for `textarea`s
  136. textarea& {
  137. height: auto;
  138. }
  139. }
  140. // Search inputs in iOS
  141. //
  142. // This overrides the extra rounded corners on search inputs in iOS so that our
  143. // `.form-control` class can properly style them. Note that this cannot simply
  144. // be added to `.form-control` as it's not specific enough. For details, see
  145. // https://github.com/twbs/bootstrap/issues/11586.
  146. input[type="search"] {
  147. -webkit-appearance: none;
  148. }
  149. // Special styles for iOS temporal inputs
  150. //
  151. // In Mobile Safari, setting `display: block` on temporal inputs causes the
  152. // text within the input to become vertically misaligned. As a workaround, we
  153. // set a pixel line-height that matches the given height of the input, but only
  154. // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
  155. //
  156. // Note that as of 8.3, iOS doesn't support `datetime` or `week`.
  157. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  158. input[type="date"],
  159. input[type="time"],
  160. input[type="datetime-local"],
  161. input[type="month"] {
  162. &.form-control {
  163. line-height: @input-height-base;
  164. }
  165. &.input-sm,
  166. .input-group-sm & {
  167. line-height: @input-height-small;
  168. }
  169. &.input-lg,
  170. .input-group-lg & {
  171. line-height: @input-height-large;
  172. }
  173. }
  174. }
  175. // Form groups
  176. //
  177. // Designed to help with the organization and spacing of vertical forms. For
  178. // horizontal forms, use the predefined grid classes.
  179. .form-group {
  180. margin-bottom: @form-group-margin-bottom;
  181. }
  182. // Checkboxes and radios
  183. //
  184. // Indent the labels to position radios/checkboxes as hanging controls.
  185. .radio,
  186. .checkbox {
  187. position: relative;
  188. display: block;
  189. margin-top: 10px;
  190. margin-bottom: 10px;
  191. label {
  192. min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
  193. padding-left: 20px;
  194. margin-bottom: 0;
  195. font-weight: normal;
  196. cursor: pointer;
  197. }
  198. }
  199. .radio input[type="radio"],
  200. .radio-inline input[type="radio"],
  201. .checkbox input[type="checkbox"],
  202. .checkbox-inline input[type="checkbox"] {
  203. position: absolute;
  204. margin-left: -20px;
  205. margin-top: 4px \9;
  206. }
  207. .radio + .radio,
  208. .checkbox + .checkbox {
  209. margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
  210. }
  211. // Radios and checkboxes on same line
  212. .radio-inline,
  213. .checkbox-inline {
  214. position: relative;
  215. display: inline-block;
  216. padding-left: 20px;
  217. margin-bottom: 0;
  218. vertical-align: middle;
  219. font-weight: normal;
  220. cursor: pointer;
  221. }
  222. .radio-inline + .radio-inline,
  223. .checkbox-inline + .checkbox-inline {
  224. margin-top: 0;
  225. margin-left: 10px; // space out consecutive inline controls
  226. }
  227. // Apply same disabled cursor tweak as for inputs
  228. // Some special care is needed because <label>s don't inherit their parent's `cursor`.
  229. //
  230. // Note: Neither radios nor checkboxes can be readonly.
  231. input[type="radio"],
  232. input[type="checkbox"] {
  233. &[disabled],
  234. &.disabled,
  235. fieldset[disabled] & {
  236. cursor: @cursor-disabled;
  237. }
  238. }
  239. // These classes are used directly on <label>s
  240. .radio-inline,
  241. .checkbox-inline {
  242. &.disabled,
  243. fieldset[disabled] & {
  244. cursor: @cursor-disabled;
  245. }
  246. }
  247. // These classes are used on elements with <label> descendants
  248. .radio,
  249. .checkbox {
  250. &.disabled,
  251. fieldset[disabled] & {
  252. label {
  253. cursor: @cursor-disabled;
  254. }
  255. }
  256. }
  257. // Static form control text
  258. //
  259. // Apply class to a `p` element to make any string of text align with labels in
  260. // a horizontal form layout.
  261. .form-control-static {
  262. // Size it appropriately next to real form controls
  263. padding-top: (@padding-base-vertical + 1);
  264. padding-bottom: (@padding-base-vertical + 1);
  265. // Remove default margin from `p`
  266. margin-bottom: 0;
  267. min-height: (@line-height-computed + @font-size-base);
  268. &.input-lg,
  269. &.input-sm {
  270. padding-left: 0;
  271. padding-right: 0;
  272. }
  273. }
  274. // Form control sizing
  275. //
  276. // Build on `.form-control` with modifier classes to decrease or increase the
  277. // height and font-size of form controls.
  278. //
  279. // The `.form-group-* form-control` variations are sadly duplicated to avoid the
  280. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
  281. .input-sm {
  282. .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
  283. }
  284. .form-group-sm {
  285. .form-control {
  286. height: @input-height-small;
  287. padding: @padding-small-vertical @padding-small-horizontal;
  288. font-size: @font-size-small;
  289. line-height: @line-height-small;
  290. border-radius: @input-border-radius-small;
  291. }
  292. select.form-control {
  293. height: @input-height-small;
  294. line-height: @input-height-small;
  295. }
  296. textarea.form-control,
  297. select[multiple].form-control {
  298. height: auto;
  299. }
  300. .form-control-static {
  301. height: @input-height-small;
  302. min-height: (@line-height-computed + @font-size-small);
  303. padding: (@padding-small-vertical + 1) @padding-small-horizontal;
  304. font-size: @font-size-small;
  305. line-height: @line-height-small;
  306. }
  307. }
  308. .input-lg {
  309. .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
  310. }
  311. .form-group-lg {
  312. .form-control {
  313. height: @input-height-large;
  314. padding: @padding-large-vertical @padding-large-horizontal;
  315. font-size: @font-size-large;
  316. line-height: @line-height-large;
  317. border-radius: @input-border-radius-large;
  318. }
  319. select.form-control {
  320. height: @input-height-large;
  321. line-height: @input-height-large;
  322. }
  323. textarea.form-control,
  324. select[multiple].form-control {
  325. height: auto;
  326. }
  327. .form-control-static {
  328. height: @input-height-large;
  329. min-height: (@line-height-computed + @font-size-large);
  330. padding: (@padding-large-vertical + 1) @padding-large-horizontal;
  331. font-size: @font-size-large;
  332. line-height: @line-height-large;
  333. }
  334. }
  335. // Form control feedback states
  336. //
  337. // Apply contextual and semantic states to individual form controls.
  338. .has-feedback {
  339. // Enable absolute positioning
  340. position: relative;
  341. // Ensure icons don't overlap text
  342. .form-control {
  343. padding-right: (@input-height-base * 1.25);
  344. }
  345. }
  346. // Feedback icon (requires .glyphicon classes)
  347. .form-control-feedback {
  348. position: absolute;
  349. top: 0;
  350. right: 0;
  351. z-index: 2; // Ensure icon is above input groups
  352. display: block;
  353. width: @input-height-base;
  354. height: @input-height-base;
  355. line-height: @input-height-base;
  356. text-align: center;
  357. pointer-events: none;
  358. }
  359. .input-lg + .form-control-feedback,
  360. .input-group-lg + .form-control-feedback,
  361. .form-group-lg .form-control + .form-control-feedback {
  362. width: @input-height-large;
  363. height: @input-height-large;
  364. line-height: @input-height-large;
  365. }
  366. .input-sm + .form-control-feedback,
  367. .input-group-sm + .form-control-feedback,
  368. .form-group-sm .form-control + .form-control-feedback {
  369. width: @input-height-small;
  370. height: @input-height-small;
  371. line-height: @input-height-small;
  372. }
  373. // Feedback states
  374. .has-success {
  375. .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
  376. }
  377. .has-warning {
  378. .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
  379. }
  380. .has-error {
  381. .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
  382. }
  383. // Reposition feedback icon if input has visible label above
  384. .has-feedback label {
  385. & ~ .form-control-feedback {
  386. top: (@line-height-computed + 5); // Height of the `label` and its margin
  387. }
  388. &.sr-only ~ .form-control-feedback {
  389. top: 0;
  390. }
  391. }
  392. // Help text
  393. //
  394. // Apply to any element you wish to create light text for placement immediately
  395. // below a form control. Use for general help, formatting, or instructional text.
  396. .help-block {
  397. display: block; // account for any element using help-block
  398. margin-top: 5px;
  399. margin-bottom: 10px;
  400. color: lighten(@text-color, 25%); // lighten the text some for contrast
  401. }
  402. // Inline forms
  403. //
  404. // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
  405. // forms begin stacked on extra small (mobile) devices and then go inline when
  406. // viewports reach <768px.
  407. //
  408. // Requires wrapping inputs and labels with `.form-group` for proper display of
  409. // default HTML form controls and our custom form controls (e.g., input groups).
  410. //
  411. // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
  412. .form-inline {
  413. // Kick in the inline
  414. @media (min-width: @screen-sm-min) {
  415. // Inline-block all the things for "inline"
  416. .form-group {
  417. display: inline-block;
  418. margin-bottom: 0;
  419. vertical-align: middle;
  420. }
  421. // In navbar-form, allow folks to *not* use `.form-group`
  422. .form-control {
  423. display: inline-block;
  424. width: auto; // Prevent labels from stacking above inputs in `.form-group`
  425. vertical-align: middle;
  426. }
  427. // Make static controls behave like regular ones
  428. .form-control-static {
  429. display: inline-block;
  430. }
  431. .input-group {
  432. display: inline-table;
  433. vertical-align: middle;
  434. .input-group-addon,
  435. .input-group-btn,
  436. .form-control {
  437. width: auto;
  438. }
  439. }
  440. // Input groups need that 100% width though
  441. .input-group > .form-control {
  442. width: 100%;
  443. }
  444. .control-label {
  445. margin-bottom: 0;
  446. vertical-align: middle;
  447. }
  448. // Remove default margin on radios/checkboxes that were used for stacking, and
  449. // then undo the floating of radios and checkboxes to match.
  450. .radio,
  451. .checkbox {
  452. display: inline-block;
  453. margin-top: 0;
  454. margin-bottom: 0;
  455. vertical-align: middle;
  456. label {
  457. padding-left: 0;
  458. }
  459. }
  460. .radio input[type="radio"],
  461. .checkbox input[type="checkbox"] {
  462. position: relative;
  463. margin-left: 0;
  464. }
  465. // Re-override the feedback icon.
  466. .has-feedback .form-control-feedback {
  467. top: 0;
  468. }
  469. }
  470. }
  471. // Horizontal forms
  472. //
  473. // Horizontal forms are built on grid classes and allow you to create forms with
  474. // labels on the left and inputs on the right.
  475. .form-horizontal {
  476. // Consistent vertical alignment of radios and checkboxes
  477. //
  478. // Labels also get some reset styles, but that is scoped to a media query below.
  479. .radio,
  480. .checkbox,
  481. .radio-inline,
  482. .checkbox-inline {
  483. margin-top: 0;
  484. margin-bottom: 0;
  485. padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  486. }
  487. // Account for padding we're adding to ensure the alignment and of help text
  488. // and other content below items
  489. .radio,
  490. .checkbox {
  491. min-height: (@line-height-computed + (@padding-base-vertical + 1));
  492. }
  493. // Make form groups behave like rows
  494. .form-group {
  495. .make-row();
  496. }
  497. // Reset spacing and right align labels, but scope to media queries so that
  498. // labels on narrow viewports stack the same as a default form example.
  499. @media (min-width: @screen-sm-min) {
  500. .control-label {
  501. text-align: right;
  502. margin-bottom: 0;
  503. padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  504. }
  505. }
  506. // Validation states
  507. //
  508. // Reposition the icon because it's now within a grid column and columns have
  509. // `position: relative;` on them. Also accounts for the grid gutter padding.
  510. .has-feedback .form-control-feedback {
  511. right: floor((@grid-gutter-width / 2));
  512. }
  513. // Form group sizes
  514. //
  515. // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  516. // inputs and labels within a `.form-group`.
  517. .form-group-lg {
  518. @media (min-width: @screen-sm-min) {
  519. .control-label {
  520. padding-top: (@padding-large-vertical + 1);
  521. font-size: @font-size-large;
  522. }
  523. }
  524. }
  525. .form-group-sm {
  526. @media (min-width: @screen-sm-min) {
  527. .control-label {
  528. padding-top: (@padding-small-vertical + 1);
  529. font-size: @font-size-small;
  530. }
  531. }
  532. }
  533. }