forms.less 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  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;
  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. cursor: @cursor-disabled;
  125. background-color: @input-bg-disabled;
  126. opacity: 1; // iOS fix for unreadable disabled content
  127. }
  128. // Reset height for `textarea`s
  129. textarea& {
  130. height: auto;
  131. }
  132. }
  133. // Search inputs in iOS
  134. //
  135. // This overrides the extra rounded corners on search inputs in iOS so that our
  136. // `.form-control` class can properly style them. Note that this cannot simply
  137. // be added to `.form-control` as it's not specific enough. For details, see
  138. // https://github.com/twbs/bootstrap/issues/11586.
  139. input[type="search"] {
  140. -webkit-appearance: none;
  141. }
  142. // Special styles for iOS temporal inputs
  143. //
  144. // In Mobile Safari, setting `display: block` on temporal inputs causes the
  145. // text within the input to become vertically misaligned.
  146. // As a workaround, we set a pixel line-height that matches the
  147. // given height of the input. Since this fucks up everything else, we have to
  148. // appropriately reset it for Internet Explorer and the size variations.
  149. input[type="date"],
  150. input[type="time"],
  151. input[type="datetime-local"],
  152. input[type="month"] {
  153. line-height: @input-height-base;
  154. // IE8+ misaligns the text within date inputs, so we reset
  155. line-height: @line-height-base ~"\0";
  156. &.input-sm {
  157. line-height: @input-height-small;
  158. line-height: @line-height-small ~"\0";
  159. }
  160. &.input-lg {
  161. line-height: @input-height-large;
  162. line-height: @line-height-large ~"\0";
  163. }
  164. }
  165. // IE 11 hack to reverse the iOS temporal input hack.
  166. _:-ms-fullscreen, :root input[type="date"],
  167. _:-ms-fullscreen, :root input[type="time"],
  168. _:-ms-fullscreen, :root input[type="datetime-local"],
  169. _:-ms-fullscreen, :root input[type="month"] {
  170. line-height: @line-height-base;
  171. &.input-sm {
  172. line-height: @line-height-small;
  173. }
  174. &.input-lg {
  175. line-height: @line-height-large;
  176. }
  177. }
  178. // Form groups
  179. //
  180. // Designed to help with the organization and spacing of vertical forms. For
  181. // horizontal forms, use the predefined grid classes.
  182. .form-group {
  183. margin-bottom: 15px;
  184. }
  185. // Checkboxes and radios
  186. //
  187. // Indent the labels to position radios/checkboxes as hanging controls.
  188. .radio,
  189. .checkbox {
  190. position: relative;
  191. display: block;
  192. margin-top: 10px;
  193. margin-bottom: 10px;
  194. label {
  195. min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
  196. padding-left: 20px;
  197. margin-bottom: 0;
  198. font-weight: normal;
  199. cursor: pointer;
  200. }
  201. }
  202. .radio input[type="radio"],
  203. .radio-inline input[type="radio"],
  204. .checkbox input[type="checkbox"],
  205. .checkbox-inline input[type="checkbox"] {
  206. position: absolute;
  207. margin-left: -20px;
  208. margin-top: 4px \9;
  209. }
  210. .radio + .radio,
  211. .checkbox + .checkbox {
  212. margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
  213. }
  214. // Radios and checkboxes on same line
  215. .radio-inline,
  216. .checkbox-inline {
  217. display: inline-block;
  218. padding-left: 20px;
  219. margin-bottom: 0;
  220. vertical-align: middle;
  221. font-weight: normal;
  222. cursor: pointer;
  223. }
  224. .radio-inline + .radio-inline,
  225. .checkbox-inline + .checkbox-inline {
  226. margin-top: 0;
  227. margin-left: 10px; // space out consecutive inline controls
  228. }
  229. // Apply same disabled cursor tweak as for inputs
  230. // Some special care is needed because <label>s don't inherit their parent's `cursor`.
  231. //
  232. // Note: Neither radios nor checkboxes can be readonly.
  233. input[type="radio"],
  234. input[type="checkbox"] {
  235. &[disabled],
  236. &.disabled,
  237. fieldset[disabled] & {
  238. cursor: @cursor-disabled;
  239. }
  240. }
  241. // These classes are used directly on <label>s
  242. .radio-inline,
  243. .checkbox-inline {
  244. &.disabled,
  245. fieldset[disabled] & {
  246. cursor: @cursor-disabled;
  247. }
  248. }
  249. // These classes are used on elements with <label> descendants
  250. .radio,
  251. .checkbox {
  252. &.disabled,
  253. fieldset[disabled] & {
  254. label {
  255. cursor: @cursor-disabled;
  256. }
  257. }
  258. }
  259. // Static form control text
  260. //
  261. // Apply class to a `p` element to make any string of text align with labels in
  262. // a horizontal form layout.
  263. .form-control-static {
  264. // Size it appropriately next to real form controls
  265. padding-top: (@padding-base-vertical + 1);
  266. padding-bottom: (@padding-base-vertical + 1);
  267. // Remove default margin from `p`
  268. margin-bottom: 0;
  269. &.input-lg,
  270. &.input-sm {
  271. padding-left: 0;
  272. padding-right: 0;
  273. }
  274. }
  275. // Form control sizing
  276. //
  277. // Build on `.form-control` with modifier classes to decrease or increase the
  278. // height and font-size of form controls.
  279. .input-sm,
  280. .form-group-sm .form-control {
  281. .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
  282. }
  283. .input-lg,
  284. .form-group-lg .form-control {
  285. .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
  286. }
  287. // Form control feedback states
  288. //
  289. // Apply contextual and semantic states to individual form controls.
  290. .has-feedback {
  291. // Enable absolute positioning
  292. position: relative;
  293. // Ensure icons don't overlap text
  294. .form-control {
  295. padding-right: (@input-height-base * 1.25);
  296. }
  297. }
  298. // Feedback icon (requires .glyphicon classes)
  299. .form-control-feedback {
  300. position: absolute;
  301. top: 0;
  302. right: 0;
  303. z-index: 2; // Ensure icon is above input groups
  304. display: block;
  305. width: @input-height-base;
  306. height: @input-height-base;
  307. line-height: @input-height-base;
  308. text-align: center;
  309. pointer-events: none;
  310. }
  311. .input-lg + .form-control-feedback {
  312. width: @input-height-large;
  313. height: @input-height-large;
  314. line-height: @input-height-large;
  315. }
  316. .input-sm + .form-control-feedback {
  317. width: @input-height-small;
  318. height: @input-height-small;
  319. line-height: @input-height-small;
  320. }
  321. // Feedback states
  322. .has-success {
  323. .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
  324. }
  325. .has-warning {
  326. .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
  327. }
  328. .has-error {
  329. .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
  330. }
  331. // Reposition feedback icon if input has visible label above
  332. .has-feedback label {
  333. & ~ .form-control-feedback {
  334. top: (@line-height-computed + 5); // Height of the `label` and its margin
  335. }
  336. &.sr-only ~ .form-control-feedback {
  337. top: 0;
  338. }
  339. }
  340. // Help text
  341. //
  342. // Apply to any element you wish to create light text for placement immediately
  343. // below a form control. Use for general help, formatting, or instructional text.
  344. .help-block {
  345. display: block; // account for any element using help-block
  346. margin-top: 5px;
  347. margin-bottom: 10px;
  348. color: lighten(@text-color, 25%); // lighten the text some for contrast
  349. }
  350. // Inline forms
  351. //
  352. // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
  353. // forms begin stacked on extra small (mobile) devices and then go inline when
  354. // viewports reach <768px.
  355. //
  356. // Requires wrapping inputs and labels with `.form-group` for proper display of
  357. // default HTML form controls and our custom form controls (e.g., input groups).
  358. //
  359. // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
  360. .form-inline {
  361. // Kick in the inline
  362. @media (min-width: @screen-sm-min) {
  363. // Inline-block all the things for "inline"
  364. .form-group {
  365. display: inline-block;
  366. margin-bottom: 0;
  367. vertical-align: middle;
  368. }
  369. // In navbar-form, allow folks to *not* use `.form-group`
  370. .form-control {
  371. display: inline-block;
  372. width: auto; // Prevent labels from stacking above inputs in `.form-group`
  373. vertical-align: middle;
  374. }
  375. // Make static controls behave like regular ones
  376. .form-control-static {
  377. display: inline-block;
  378. }
  379. .input-group {
  380. display: inline-table;
  381. vertical-align: middle;
  382. .input-group-addon,
  383. .input-group-btn,
  384. .form-control {
  385. width: auto;
  386. }
  387. }
  388. // Input groups need that 100% width though
  389. .input-group > .form-control {
  390. width: 100%;
  391. }
  392. .control-label {
  393. margin-bottom: 0;
  394. vertical-align: middle;
  395. }
  396. // Remove default margin on radios/checkboxes that were used for stacking, and
  397. // then undo the floating of radios and checkboxes to match (which also avoids
  398. // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
  399. .radio,
  400. .checkbox {
  401. display: inline-block;
  402. margin-top: 0;
  403. margin-bottom: 0;
  404. vertical-align: middle;
  405. label {
  406. padding-left: 0;
  407. }
  408. }
  409. .radio input[type="radio"],
  410. .checkbox input[type="checkbox"] {
  411. position: relative;
  412. margin-left: 0;
  413. }
  414. // Re-override the feedback icon.
  415. .has-feedback .form-control-feedback {
  416. top: 0;
  417. }
  418. }
  419. }
  420. // Horizontal forms
  421. //
  422. // Horizontal forms are built on grid classes and allow you to create forms with
  423. // labels on the left and inputs on the right.
  424. .form-horizontal {
  425. // Consistent vertical alignment of radios and checkboxes
  426. //
  427. // Labels also get some reset styles, but that is scoped to a media query below.
  428. .radio,
  429. .checkbox,
  430. .radio-inline,
  431. .checkbox-inline {
  432. margin-top: 0;
  433. margin-bottom: 0;
  434. padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  435. }
  436. // Account for padding we're adding to ensure the alignment and of help text
  437. // and other content below items
  438. .radio,
  439. .checkbox {
  440. min-height: (@line-height-computed + (@padding-base-vertical + 1));
  441. }
  442. // Make form groups behave like rows
  443. .form-group {
  444. .make-row();
  445. }
  446. // Reset spacing and right align labels, but scope to media queries so that
  447. // labels on narrow viewports stack the same as a default form example.
  448. @media (min-width: @screen-sm-min) {
  449. .control-label {
  450. text-align: right;
  451. margin-bottom: 0;
  452. padding-top: (@padding-base-vertical + 1); // Default padding plus a border
  453. }
  454. }
  455. // Validation states
  456. //
  457. // Reposition the icon because it's now within a grid column and columns have
  458. // `position: relative;` on them. Also accounts for the grid gutter padding.
  459. .has-feedback .form-control-feedback {
  460. right: (@grid-gutter-width / 2);
  461. }
  462. // Form group sizes
  463. //
  464. // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  465. // inputs and labels within a `.form-group`.
  466. .form-group-lg {
  467. @media (min-width: @screen-sm-min) {
  468. .control-label {
  469. padding-top: ((@padding-large-vertical * @line-height-large) + 1);
  470. }
  471. }
  472. }
  473. .form-group-sm {
  474. @media (min-width: @screen-sm-min) {
  475. .control-label {
  476. padding-top: (@padding-small-vertical + 1);
  477. }
  478. }
  479. }
  480. }