You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

453 lines
11 KiB

  1. //
  2. // Textual form controls
  3. //
  4. .form-control {
  5. display: block;
  6. width: 100%;
  7. // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  8. // height: $input-height;
  9. padding: $input-padding-y $input-padding-x;
  10. font-size: $font-size-base;
  11. line-height: $line-height;
  12. color: $input-color;
  13. background-color: $input-bg;
  14. // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
  15. background-image: none;
  16. border: $input-btn-border-width solid $input-border-color;
  17. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  18. @include border-radius($input-border-radius);
  19. @include box-shadow($input-box-shadow);
  20. @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
  21. // Make inputs at least the height of their button counterpart (base line-height + padding + border).
  22. // Only apply the height to textual inputs and some selects.
  23. // &:not(textarea),
  24. // &:not(select[size]),
  25. // &:not(select[multiple]) {
  26. // height: $input-height;
  27. // }
  28. // Unstyle the caret on `<select>`s in IE10+.
  29. &::-ms-expand {
  30. background-color: transparent;
  31. border: 0;
  32. }
  33. // Customize the `:focus` state to imitate native WebKit styles.
  34. @include form-control-focus();
  35. // Placeholder
  36. &::placeholder {
  37. color: $input-color-placeholder;
  38. // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  39. opacity: 1;
  40. }
  41. // Disabled and read-only inputs
  42. //
  43. // HTML5 says that controls under a fieldset > legend:first-child won't be
  44. // disabled if the fieldset is disabled. Due to implementation difficulty, we
  45. // don't honor that edge case; we style them as disabled anyway.
  46. &:disabled,
  47. &[readonly] {
  48. background-color: $input-bg-disabled;
  49. // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  50. opacity: 1;
  51. }
  52. &:disabled {
  53. cursor: $cursor-disabled;
  54. }
  55. }
  56. // Make file inputs better match text inputs by forcing them to new lines.
  57. .form-control-file,
  58. .form-control-range {
  59. display: block;
  60. }
  61. //
  62. // Labels
  63. //
  64. // For use with horizontal and inline forms, when you need the label text to
  65. // align with the form controls.
  66. .form-control-label {
  67. padding: $input-padding-y $input-padding-x;
  68. margin-bottom: 0; // Override the `<label>` default
  69. }
  70. // Todo: clear this up
  71. // Special styles for iOS temporal inputs
  72. //
  73. // In Mobile Safari, setting `display: block` on temporal inputs causes the
  74. // text within the input to become vertically misaligned. As a workaround, we
  75. // set a pixel line-height that matches the given height of the input, but only
  76. // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
  77. //
  78. // Note that as of 8.3, iOS doesn't support `datetime` or `week`.
  79. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  80. input[type="date"],
  81. input[type="time"],
  82. input[type="datetime-local"],
  83. input[type="month"] {
  84. &.form-control {
  85. line-height: $input-height;
  86. }
  87. &.input-sm,
  88. .input-group-sm &.form-control {
  89. line-height: $input-height-sm;
  90. }
  91. &.input-lg,
  92. .input-group-lg &.form-control {
  93. line-height: $input-height-lg;
  94. }
  95. }
  96. }
  97. // Static form control text
  98. //
  99. // Apply class to an element to make any string of text align with labels in a
  100. // horizontal form layout.
  101. .form-control-static {
  102. min-height: $input-height;
  103. // Size it appropriately next to real form controls
  104. padding-top: $input-padding-y;
  105. padding-bottom: $input-padding-y;
  106. // Remove default margin from `p`
  107. margin-bottom: 0;
  108. &.form-control-sm,
  109. &.form-control-lg {
  110. padding-right: 0;
  111. padding-left: 0;
  112. }
  113. }
  114. // Form control sizing
  115. //
  116. // Build on `.form-control` with modifier classes to decrease or increase the
  117. // height and font-size of form controls.
  118. //
  119. // The `.form-group-* form-control` variations are sadly duplicated to avoid the
  120. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
  121. .form-control-sm {
  122. // height: $input-height-sm;
  123. padding: $input-padding-y-sm $input-padding-x-sm;
  124. font-size: $font-size-sm;
  125. line-height: $line-height-sm;
  126. @include border-radius($input-border-radius-sm);
  127. }
  128. .form-control-lg {
  129. // height: $input-height-lg;
  130. padding: $input-padding-y-lg $input-padding-x-lg;
  131. font-size: $font-size-lg;
  132. line-height: $line-height-lg;
  133. @include border-radius($input-border-radius-lg);
  134. }
  135. // Form groups
  136. //
  137. // Designed to help with the organization and spacing of vertical forms. For
  138. // horizontal forms, use the predefined grid classes.
  139. .form-group {
  140. margin-bottom: $form-group-margin-bottom;
  141. }
  142. // Checkboxes and radios
  143. //
  144. // Indent the labels to position radios/checkboxes as hanging controls.
  145. .radio,
  146. .checkbox {
  147. position: relative;
  148. display: block;
  149. // margin-top: ($spacer * .75);
  150. margin-bottom: ($spacer * .75);
  151. label {
  152. padding-left: 1.25rem;
  153. margin-bottom: 0;
  154. font-weight: normal;
  155. cursor: pointer;
  156. // When there's no labels, don't position the input.
  157. input:only-child {
  158. position: static;
  159. }
  160. }
  161. }
  162. .radio input[type="radio"],
  163. .radio-inline input[type="radio"],
  164. .checkbox input[type="checkbox"],
  165. .checkbox-inline input[type="checkbox"] {
  166. position: absolute;
  167. margin-top: .25rem;
  168. // margin-top: 4px \9;
  169. margin-left: -1.25rem;
  170. }
  171. .radio + .radio,
  172. .checkbox + .checkbox {
  173. // Move up sibling radios or checkboxes for tighter spacing
  174. margin-top: -.25rem;
  175. }
  176. // Radios and checkboxes on same line
  177. .radio-inline,
  178. .checkbox-inline {
  179. position: relative;
  180. display: inline-block;
  181. padding-left: 1.25rem;
  182. margin-bottom: 0;
  183. font-weight: normal;
  184. vertical-align: middle;
  185. cursor: pointer;
  186. }
  187. .radio-inline + .radio-inline,
  188. .checkbox-inline + .checkbox-inline {
  189. margin-top: 0;
  190. margin-left: .75rem;
  191. }
  192. // Apply same disabled cursor tweak as for inputs
  193. // Some special care is needed because <label>s don't inherit their parent's `cursor`.
  194. //
  195. // Note: Neither radios nor checkboxes can be readonly.
  196. input[type="radio"],
  197. input[type="checkbox"] {
  198. &:disabled,
  199. &.disabled {
  200. cursor: $cursor-disabled;
  201. }
  202. }
  203. // These classes are used directly on <label>s
  204. .radio-inline,
  205. .checkbox-inline {
  206. &.disabled {
  207. cursor: $cursor-disabled;
  208. }
  209. }
  210. // These classes are used on elements with <label> descendants
  211. .radio,
  212. .checkbox {
  213. &.disabled {
  214. label {
  215. cursor: $cursor-disabled;
  216. }
  217. }
  218. }
  219. // Form control feedback states
  220. //
  221. // Apply contextual and semantic states to individual form controls.
  222. .form-control-success,
  223. .form-control-warning,
  224. .form-control-danger {
  225. padding-right: ($input-padding-x * 3);
  226. background-repeat: no-repeat;
  227. background-position: center right ($input-height * .25);
  228. background-size: ($input-height * .65) ($input-height * .65);
  229. }
  230. // Form validation states
  231. .has-success {
  232. @include form-control-validation($brand-success);
  233. .form-control-success {
  234. background-image: url($form-icon-success);
  235. }
  236. }
  237. .has-warning {
  238. @include form-control-validation($brand-warning);
  239. .form-control-warning {
  240. background-image: url($form-icon-warning);
  241. }
  242. }
  243. .has-danger {
  244. @include form-control-validation($brand-danger);
  245. .form-control-danger {
  246. background-image: url($form-icon-danger);
  247. }
  248. }
  249. // .form-control-success {
  250. // background-image: url("#{$form-icon-success}");
  251. // border-color: $brand-success;
  252. // }
  253. //
  254. // .form-control-warning {
  255. // background-image: url("#{$form-icon-warning}");
  256. // border-color: $brand-warning;
  257. // }
  258. //
  259. // .form-control-error {
  260. // background-image: url("#{$form-icon-danger}");
  261. // border-color: $brand-danger;
  262. // }
  263. // .has-feedback {
  264. // // Enable absolute positioning
  265. // position: relative;
  266. //
  267. // // Ensure icons don't overlap text
  268. // .form-control {
  269. // padding-right: ($input-height * 1.25);
  270. // }
  271. // }
  272. // // Feedback icon
  273. // .form-control-feedback {
  274. // position: absolute;
  275. // top: 0;
  276. // right: 0;
  277. // z-index: 2; // Ensure icon is above input groups
  278. // display: block;
  279. // width: $input-height;
  280. // height: $input-height;
  281. // line-height: $input-height;
  282. // text-align: center;
  283. // pointer-events: none;
  284. // }
  285. // .input-lg + .form-control-feedback,
  286. // .input-group-lg + .form-control-feedback {
  287. // width: $input-height-lg;
  288. // height: $input-height-lg;
  289. // line-height: $input-height-lg;
  290. // }
  291. // .input-sm + .form-control-feedback,
  292. // .input-group-sm + .form-control-feedback {
  293. // width: $input-height-sm;
  294. // height: $input-height-sm;
  295. // line-height: $input-height-sm;
  296. // }
  297. //
  298. // // Form validation states
  299. // .has-success {
  300. // @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
  301. // }
  302. // .has-warning {
  303. // @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
  304. // }
  305. // .has-danger {
  306. // @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
  307. // }
  308. //
  309. // // Reposition feedback icon if input has visible label above
  310. // .has-feedback label {
  311. //
  312. // ~ .form-control-feedback {
  313. // // TODO: redo this since we nuked the `$line-height-computed`
  314. // top: 0; // Height of the `label` and its margin
  315. // }
  316. //
  317. // &.sr-only ~ .form-control-feedback {
  318. // top: 0;
  319. // }
  320. // }
  321. // Inline forms
  322. //
  323. // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
  324. // forms begin stacked on extra small (mobile) devices and then go inline when
  325. // viewports reach <768px.
  326. //
  327. // Requires wrapping inputs and labels with `.form-group` for proper display of
  328. // default HTML form controls and our custom form controls (e.g., input groups).
  329. .form-inline {
  330. // Kick in the inline
  331. @include media-breakpoint-up(sm) {
  332. // Inline-block all the things for "inline"
  333. .form-group {
  334. display: inline-block;
  335. margin-bottom: 0;
  336. vertical-align: middle;
  337. }
  338. // Allow folks to *not* use `.form-group`
  339. .form-control {
  340. display: inline-block;
  341. width: auto; // Prevent labels from stacking above inputs in `.form-group`
  342. vertical-align: middle;
  343. }
  344. // Make static controls behave like regular ones
  345. .form-control-static {
  346. display: inline-block;
  347. }
  348. .input-group {
  349. display: inline-table;
  350. vertical-align: middle;
  351. .input-group-addon,
  352. .input-group-btn,
  353. .form-control {
  354. width: auto;
  355. }
  356. }
  357. // Input groups need that 100% width though
  358. .input-group > .form-control {
  359. width: 100%;
  360. }
  361. .form-control-label {
  362. margin-bottom: 0;
  363. vertical-align: middle;
  364. }
  365. // Remove default margin on radios/checkboxes that were used for stacking, and
  366. // then undo the floating of radios and checkboxes to match.
  367. .radio,
  368. .checkbox {
  369. display: inline-block;
  370. margin-top: 0;
  371. margin-bottom: 0;
  372. vertical-align: middle;
  373. label {
  374. padding-left: 0;
  375. }
  376. }
  377. .radio input[type="radio"],
  378. .checkbox input[type="checkbox"] {
  379. position: relative;
  380. margin-left: 0;
  381. }
  382. // Re-override the feedback icon.
  383. .has-feedback .form-control-feedback {
  384. top: 0;
  385. }
  386. }
  387. }