_forms.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. // Forms
  2. .form-group {
  3. &:not(:last-child) {
  4. margin-bottom: $layout-spacing;
  5. }
  6. }
  7. fieldset {
  8. margin-bottom: $layout-spacing-lg;
  9. }
  10. legend {
  11. font-size: $font-size-lg;
  12. font-weight: 500;
  13. margin-bottom: $layout-spacing-lg;
  14. }
  15. // Form element: Label
  16. .form-label {
  17. display: block;
  18. line-height: $line-height;
  19. padding: $control-padding-y + $border-width 0;
  20. &.label-sm {
  21. font-size: $font-size-sm;
  22. padding: $control-padding-y-sm + $border-width 0;
  23. }
  24. &.label-lg {
  25. font-size: $font-size-lg;
  26. padding: $control-padding-y-lg + $border-width 0;
  27. }
  28. }
  29. // Form element: Input
  30. .form-input {
  31. appearance: none;
  32. background: $bg-color-light;
  33. background-image: none;
  34. border: $border-width solid $border-color-dark;
  35. border-radius: $border-radius;
  36. color: $body-font-color;
  37. display: block;
  38. font-size: $font-size;
  39. height: $control-size;
  40. line-height: $line-height;
  41. max-width: 100%;
  42. outline: none;
  43. padding: $control-padding-y $control-padding-x;
  44. position: relative;
  45. transition: background .2s, border .2s, box-shadow .2s, color .2s;
  46. width: 100%;
  47. &:focus {
  48. @include control-shadow();
  49. border-color: $primary-color;
  50. }
  51. &::placeholder {
  52. color: $gray-color;
  53. }
  54. // Input sizes
  55. &.input-sm {
  56. font-size: $font-size-sm;
  57. height: $control-size-sm;
  58. padding: $control-padding-y-sm $control-padding-x-sm;
  59. }
  60. &.input-lg {
  61. font-size: $font-size-lg;
  62. height: $control-size-lg;
  63. padding: $control-padding-y-lg $control-padding-x-lg;
  64. }
  65. &.input-inline {
  66. display: inline-block;
  67. vertical-align: middle;
  68. width: auto;
  69. }
  70. // Input types
  71. &[type="file"] {
  72. height: auto;
  73. }
  74. }
  75. // Form element: Textarea
  76. textarea.form-input {
  77. &,
  78. &.input-lg,
  79. &.input-sm {
  80. height: auto;
  81. }
  82. }
  83. // Form element: Input hint
  84. .form-input-hint {
  85. color: $gray-color;
  86. font-size: $font-size-sm;
  87. margin-top: $unit-1;
  88. .has-success &,
  89. .is-success + & {
  90. color: $success-color;
  91. }
  92. .has-error &,
  93. .is-error + & {
  94. color: $error-color;
  95. }
  96. }
  97. // Form element: Select
  98. .form-select {
  99. appearance: none;
  100. border: $border-width solid $border-color-dark;
  101. border-radius: $border-radius;
  102. color: inherit;
  103. font-size: $font-size;
  104. height: $control-size;
  105. line-height: $line-height;
  106. outline: none;
  107. padding: $control-padding-y $control-padding-x;
  108. vertical-align: middle;
  109. width: 100%;
  110. background: $bg-color-light;
  111. &:focus {
  112. @include control-shadow();
  113. border-color: $primary-color;
  114. }
  115. &::-ms-expand {
  116. display: none;
  117. }
  118. // Select sizes
  119. &.select-sm {
  120. font-size: $font-size-sm;
  121. height: $control-size-sm;
  122. padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
  123. }
  124. &.select-lg {
  125. font-size: $font-size-lg;
  126. height: $control-size-lg;
  127. padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
  128. }
  129. // Multiple select
  130. &[size],
  131. &[multiple] {
  132. height: auto;
  133. padding: $control-padding-y $control-padding-x;
  134. option {
  135. padding: $unit-h $unit-1;
  136. }
  137. }
  138. &:not([multiple]):not([size]) {
  139. background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
  140. padding-right: $control-icon-size + $control-padding-x;
  141. }
  142. }
  143. // Form Icons
  144. .has-icon-left,
  145. .has-icon-right {
  146. position: relative;
  147. .form-icon {
  148. height: $control-icon-size;
  149. margin: 0 $control-padding-y;
  150. position: absolute;
  151. top: 50%;
  152. transform: translateY(-50%);
  153. width: $control-icon-size;
  154. z-index: $zindex-0 + 1;
  155. }
  156. }
  157. .has-icon-left {
  158. .form-icon {
  159. left: $border-width;
  160. }
  161. .form-input {
  162. padding-left: $control-icon-size + $control-padding-y * 2;
  163. }
  164. }
  165. .has-icon-right {
  166. .form-icon {
  167. right: $border-width;
  168. }
  169. .form-input {
  170. padding-right: $control-icon-size + $control-padding-y * 2;
  171. }
  172. }
  173. // Form element: Checkbox and Radio
  174. .form-checkbox,
  175. .form-radio,
  176. .form-switch {
  177. display: block;
  178. line-height: $line-height;
  179. margin: ($control-size - $control-size-sm) / 2 0;
  180. min-height: $control-size-sm;
  181. padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
  182. position: relative;
  183. input {
  184. clip: rect(0, 0, 0, 0);
  185. height: 1px;
  186. margin: -1px;
  187. overflow: hidden;
  188. position: absolute;
  189. width: 1px;
  190. &:focus + .form-icon {
  191. @include control-shadow();
  192. border-color: $primary-color;
  193. }
  194. &:checked + .form-icon {
  195. background: $primary-color;
  196. border-color: $primary-color;
  197. }
  198. }
  199. .form-icon {
  200. border: $border-width solid $border-color-dark;
  201. cursor: pointer;
  202. display: inline-block;
  203. position: absolute;
  204. transition: background .2s, border .2s, box-shadow .2s, color .2s;
  205. }
  206. // Input checkbox, radio and switch sizes
  207. &.input-sm {
  208. font-size: $font-size-sm;
  209. margin: 0;
  210. }
  211. &.input-lg {
  212. font-size: $font-size-lg;
  213. margin: ($control-size-lg - $control-size-sm) / 2 0;
  214. }
  215. }
  216. .form-checkbox,
  217. .form-radio {
  218. .form-icon {
  219. background: $bg-color-light;
  220. height: $control-icon-size;
  221. left: 0;
  222. top: ($control-size-sm - $control-icon-size) / 2;
  223. width: $control-icon-size;
  224. }
  225. input {
  226. &:active + .form-icon {
  227. background: $bg-color-dark;
  228. }
  229. }
  230. }
  231. .form-checkbox {
  232. .form-icon {
  233. border-radius: $border-radius;
  234. }
  235. input {
  236. &:checked + .form-icon {
  237. &::before {
  238. background-clip: padding-box;
  239. border: $border-width-lg solid $light-color;
  240. border-left-width: 0;
  241. border-top-width: 0;
  242. content: "";
  243. height: 9px;
  244. left: 50%;
  245. margin-left: -3px;
  246. margin-top: -6px;
  247. position: absolute;
  248. top: 50%;
  249. transform: rotate(45deg);
  250. width: 6px;
  251. }
  252. }
  253. &:indeterminate + .form-icon {
  254. background: $primary-color;
  255. border-color: $primary-color;
  256. &::before {
  257. background: $bg-color-light;
  258. content: "";
  259. height: 2px;
  260. left: 50%;
  261. margin-left: -5px;
  262. margin-top: -1px;
  263. position: absolute;
  264. top: 50%;
  265. width: 10px;
  266. }
  267. }
  268. }
  269. }
  270. .form-radio {
  271. .form-icon {
  272. border-radius: 50%;
  273. }
  274. input {
  275. &:checked + .form-icon {
  276. &::before {
  277. background: $bg-color-light;
  278. border-radius: 50%;
  279. content: "";
  280. height: 6px;
  281. left: 50%;
  282. position: absolute;
  283. top: 50%;
  284. transform: translate(-50%, -50%);
  285. width: 6px;
  286. }
  287. }
  288. }
  289. }
  290. // Form element: Switch
  291. .form-switch {
  292. padding-left: ($unit-8 + $control-padding-x);
  293. .form-icon {
  294. background: $gray-color;
  295. background-clip: padding-box;
  296. border-radius: $unit-2 + $border-width;
  297. height: $unit-4 + $border-width * 2;
  298. left: 0;
  299. top: ($control-size-sm - $unit-4) / 2 - $border-width;
  300. width: $unit-8;
  301. &::before {
  302. background: $bg-color-light;
  303. border-radius: 50%;
  304. content: "";
  305. display: block;
  306. height: $unit-4;
  307. left: 0;
  308. position: absolute;
  309. top: 0;
  310. transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
  311. width: $unit-4;
  312. }
  313. }
  314. input {
  315. &:checked + .form-icon {
  316. &::before {
  317. left: 14px;
  318. }
  319. }
  320. &:active + .form-icon {
  321. &::before {
  322. background: $bg-color;
  323. }
  324. }
  325. }
  326. }
  327. // Form element: Input groups
  328. .input-group {
  329. display: flex;
  330. .input-group-addon {
  331. background: $bg-color;
  332. border: $border-width solid $border-color-dark;
  333. border-radius: $border-radius;
  334. line-height: $line-height;
  335. padding: $control-padding-y $control-padding-x;
  336. white-space: nowrap;
  337. &.addon-sm {
  338. font-size: $font-size-sm;
  339. padding: $control-padding-y-sm $control-padding-x-sm;
  340. }
  341. &.addon-lg {
  342. font-size: $font-size-lg;
  343. padding: $control-padding-y-lg $control-padding-x-lg;
  344. }
  345. }
  346. .form-input,
  347. .form-select {
  348. flex: 1 1 auto;
  349. width: 1%;
  350. }
  351. .input-group-btn {
  352. z-index: $zindex-0;
  353. }
  354. .form-input,
  355. .form-select,
  356. .input-group-addon,
  357. .input-group-btn {
  358. &:first-child:not(:last-child) {
  359. border-bottom-right-radius: 0;
  360. border-top-right-radius: 0;
  361. }
  362. &:not(:first-child):not(:last-child) {
  363. border-radius: 0;
  364. margin-left: -$border-width;
  365. }
  366. &:last-child:not(:first-child) {
  367. border-bottom-left-radius: 0;
  368. border-top-left-radius: 0;
  369. margin-left: -$border-width;
  370. }
  371. &:focus {
  372. z-index: $zindex-0 + 1;
  373. }
  374. }
  375. .form-select {
  376. width: auto;
  377. }
  378. &.input-inline {
  379. display: inline-flex;
  380. }
  381. }
  382. // Form validation states
  383. .form-input,
  384. .form-select {
  385. .has-success &,
  386. &.is-success {
  387. background: lighten($success-color, 53%);
  388. border-color: $success-color;
  389. &:focus {
  390. @include control-shadow($success-color);
  391. }
  392. }
  393. .has-error &,
  394. &.is-error {
  395. background: lighten($error-color, 53%);
  396. border-color: $error-color;
  397. &:focus {
  398. @include control-shadow($error-color);
  399. }
  400. }
  401. }
  402. .form-checkbox,
  403. .form-radio,
  404. .form-switch {
  405. .has-error &,
  406. &.is-error {
  407. .form-icon {
  408. border-color: $error-color;
  409. }
  410. input {
  411. &:checked + .form-icon {
  412. background: $error-color;
  413. border-color: $error-color;
  414. }
  415. &:focus + .form-icon {
  416. @include control-shadow($error-color);
  417. border-color: $error-color;
  418. }
  419. }
  420. }
  421. }
  422. .form-checkbox {
  423. .has-error &,
  424. &.is-error {
  425. input {
  426. &:indeterminate + .form-icon {
  427. background: $error-color;
  428. border-color: $error-color;
  429. }
  430. }
  431. }
  432. }
  433. // validation based on :placeholder-shown (Edge doesn't support it yet)
  434. .form-input {
  435. &:not(:placeholder-shown) {
  436. &:invalid {
  437. border-color: $error-color;
  438. &:focus {
  439. @include control-shadow($error-color);
  440. background: lighten($error-color, 53%);
  441. }
  442. & + .form-input-hint {
  443. color: $error-color;
  444. }
  445. }
  446. }
  447. }
  448. // Form disabled and readonly
  449. .form-input,
  450. .form-select {
  451. &:disabled,
  452. &.disabled {
  453. background-color: $bg-color-dark;
  454. cursor: not-allowed;
  455. opacity: .5;
  456. }
  457. }
  458. .form-input {
  459. &[readonly] {
  460. background-color: $bg-color;
  461. }
  462. }
  463. input {
  464. &:disabled,
  465. &.disabled {
  466. & + .form-icon {
  467. background: $bg-color-dark;
  468. cursor: not-allowed;
  469. opacity: .5;
  470. }
  471. }
  472. }
  473. .form-switch {
  474. input {
  475. &:disabled,
  476. &.disabled {
  477. & + .form-icon::before {
  478. background: $bg-color-light;
  479. }
  480. }
  481. }
  482. }
  483. // Form horizontal
  484. .form-horizontal {
  485. padding: $layout-spacing 0;
  486. .form-group {
  487. display: flex;
  488. flex-wrap: wrap;
  489. }
  490. }
  491. // Form inline
  492. .form-inline {
  493. display: inline-block;
  494. }