_forms.scss 16 KB

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