_forms.scss 16 KB

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