/looplab/scss/bootstrap/_forms.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects · Sass · 333 lines · 205 code · 55 blank · 73 comment · 0 complexity · 7e5475cf760e7bf43cea437bf0af35fa MD5 · raw file

  1. // stylelint-disable selector-no-qualifying-type
  2. //
  3. // Textual form controls
  4. //
  5. .form-control {
  6. display: block;
  7. width: 100%;
  8. padding: $input-padding-y $input-padding-x;
  9. font-size: $font-size-base;
  10. line-height: $input-line-height;
  11. color: $input-color;
  12. background-color: $input-bg;
  13. background-clip: padding-box;
  14. border: $input-border-width solid $input-border-color;
  15. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
  16. @if $enable-rounded {
  17. // Manually use the if/else instead of the mixin to account for iOS override
  18. border-radius: $input-border-radius;
  19. } @else {
  20. // Otherwise undo the iOS default
  21. border-radius: 0;
  22. }
  23. @include box-shadow($input-box-shadow);
  24. @include transition($input-transition);
  25. // Unstyle the caret on `<select>`s in IE10+.
  26. &::-ms-expand {
  27. background-color: transparent;
  28. border: 0;
  29. }
  30. // Customize the `:focus` state to imitate native WebKit styles.
  31. @include form-control-focus();
  32. // Placeholder
  33. &::placeholder {
  34. color: $input-placeholder-color;
  35. // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
  36. opacity: 1;
  37. }
  38. // Disabled and read-only inputs
  39. //
  40. // HTML5 says that controls under a fieldset > legend:first-child won't be
  41. // disabled if the fieldset is disabled. Due to implementation difficulty, we
  42. // don't honor that edge case; we style them as disabled anyway.
  43. &:disabled,
  44. &[readonly] {
  45. background-color: $input-disabled-bg;
  46. // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  47. opacity: 1;
  48. }
  49. }
  50. select.form-control {
  51. &:not([size]):not([multiple]) {
  52. height: $input-height;
  53. }
  54. &:focus::-ms-value {
  55. // Suppress the nested default white text on blue background highlight given to
  56. // the selected option text when the (still closed) <select> receives focus
  57. // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
  58. // match the appearance of the native widget.
  59. // See https://github.com/twbs/bootstrap/issues/19398.
  60. color: $input-color;
  61. background-color: $input-bg;
  62. }
  63. }
  64. // Make file inputs better match text inputs by forcing them to new lines.
  65. .form-control-file,
  66. .form-control-range {
  67. display: block;
  68. width: 100%;
  69. }
  70. //
  71. // Labels
  72. //
  73. // For use with horizontal and inline forms, when you need the label (or legend)
  74. // text to align with the form controls.
  75. .col-form-label {
  76. padding-top: calc(#{$input-padding-y} + #{$input-border-width});
  77. padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
  78. margin-bottom: 0; // Override the `<label>/<legend>` default
  79. font-size: inherit; // Override the `<legend>` default
  80. line-height: $input-line-height;
  81. }
  82. .col-form-label-lg {
  83. padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
  84. padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
  85. font-size: $font-size-lg;
  86. line-height: $input-line-height-lg;
  87. }
  88. .col-form-label-sm {
  89. padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
  90. padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
  91. font-size: $font-size-sm;
  92. line-height: $input-line-height-sm;
  93. }
  94. // Readonly controls as plain text
  95. //
  96. // Apply class to a readonly input to make it appear like regular plain
  97. // text (without any border, background color, focus indicator)
  98. .form-control-plaintext {
  99. display: block;
  100. width: 100%;
  101. padding-top: $input-padding-y;
  102. padding-bottom: $input-padding-y;
  103. margin-bottom: 0; // match inputs if this class comes on inputs with default margins
  104. line-height: $input-line-height;
  105. background-color: transparent;
  106. border: solid transparent;
  107. border-width: $input-border-width 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. padding: $input-padding-y-sm $input-padding-x-sm;
  123. font-size: $font-size-sm;
  124. line-height: $input-line-height-sm;
  125. @include border-radius($input-border-radius-sm);
  126. }
  127. select.form-control-sm {
  128. &:not([size]):not([multiple]) {
  129. height: $input-height-sm;
  130. }
  131. }
  132. .form-control-lg {
  133. padding: $input-padding-y-lg $input-padding-x-lg;
  134. font-size: $font-size-lg;
  135. line-height: $input-line-height-lg;
  136. @include border-radius($input-border-radius-lg);
  137. }
  138. select.form-control-lg {
  139. &:not([size]):not([multiple]) {
  140. height: $input-height-lg;
  141. }
  142. }
  143. // Form groups
  144. //
  145. // Designed to help with the organization and spacing of vertical forms. For
  146. // horizontal forms, use the predefined grid classes.
  147. .form-group {
  148. margin-bottom: $form-group-margin-bottom;
  149. }
  150. .form-text {
  151. display: block;
  152. margin-top: $form-text-margin-top;
  153. }
  154. // Form grid
  155. //
  156. // Special replacement for our grid system's `.row` for tighter form layouts.
  157. .form-row {
  158. display: flex;
  159. flex-wrap: wrap;
  160. margin-right: -5px;
  161. margin-left: -5px;
  162. > .col,
  163. > [class*="col-"] {
  164. padding-right: 5px;
  165. padding-left: 5px;
  166. }
  167. }
  168. // Checkboxes and radios
  169. //
  170. // Indent the labels to position radios/checkboxes as hanging controls.
  171. .form-check {
  172. position: relative;
  173. display: block;
  174. padding-left: $form-check-input-gutter;
  175. }
  176. .form-check-input {
  177. position: absolute;
  178. margin-top: $form-check-input-margin-y;
  179. margin-left: -$form-check-input-gutter;
  180. &:disabled ~ .form-check-label {
  181. color: $text-muted;
  182. }
  183. }
  184. .form-check-label {
  185. margin-bottom: 0; // Override default `<label>` bottom margin
  186. }
  187. .form-check-inline {
  188. display: inline-flex;
  189. align-items: center;
  190. padding-left: 0; // Override base .form-check
  191. margin-right: $form-check-inline-margin-x;
  192. // Undo .form-check-input defaults and add some `margin-right`.
  193. .form-check-input {
  194. position: static;
  195. margin-top: 0;
  196. margin-right: $form-check-inline-input-margin-x;
  197. margin-left: 0;
  198. }
  199. }
  200. // Form validation
  201. //
  202. // Provide feedback to users when form field values are valid or invalid. Works
  203. // primarily for client-side validation via scoped `:invalid` and `:valid`
  204. // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
  205. // server side validation.
  206. @include form-validation-state("valid", $form-feedback-valid-color);
  207. @include form-validation-state("invalid", $form-feedback-invalid-color);
  208. // Inline forms
  209. //
  210. // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
  211. // forms begin stacked on extra small (mobile) devices and then go inline when
  212. // viewports reach <768px.
  213. //
  214. // Requires wrapping inputs and labels with `.form-group` for proper display of
  215. // default HTML form controls and our custom form controls (e.g., input groups).
  216. .form-inline {
  217. display: flex;
  218. flex-flow: row wrap;
  219. align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
  220. // Because we use flex, the initial sizing of checkboxes is collapsed and
  221. // doesn't occupy the full-width (which is what we want for xs grid tier),
  222. // so we force that here.
  223. .form-check {
  224. width: 100%;
  225. }
  226. // Kick in the inline
  227. @include media-breakpoint-up(sm) {
  228. label {
  229. display: flex;
  230. align-items: center;
  231. justify-content: center;
  232. margin-bottom: 0;
  233. }
  234. // Inline-block all the things for "inline"
  235. .form-group {
  236. display: flex;
  237. flex: 0 0 auto;
  238. flex-flow: row wrap;
  239. align-items: center;
  240. margin-bottom: 0;
  241. }
  242. // Allow folks to *not* use `.form-group`
  243. .form-control {
  244. display: inline-block;
  245. width: auto; // Prevent labels from stacking above inputs in `.form-group`
  246. vertical-align: middle;
  247. }
  248. // Make static controls behave like regular ones
  249. .form-control-plaintext {
  250. display: inline-block;
  251. }
  252. .input-group {
  253. width: auto;
  254. }
  255. // Remove default margin on radios/checkboxes that were used for stacking, and
  256. // then undo the floating of radios and checkboxes to match.
  257. .form-check {
  258. display: flex;
  259. align-items: center;
  260. justify-content: center;
  261. width: auto;
  262. padding-left: 0;
  263. }
  264. .form-check-input {
  265. position: relative;
  266. margin-top: 0;
  267. margin-right: $form-check-input-margin-x;
  268. margin-left: 0;
  269. }
  270. .custom-control {
  271. align-items: center;
  272. justify-content: center;
  273. }
  274. .custom-control-label {
  275. margin-bottom: 0;
  276. }
  277. }
  278. }