forms.less 15 KB

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