forms.less 13 KB

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