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.

213 lines
3.7 KiB

  1. .control {
  2. & + .control {
  3. margin-top: 15px;
  4. }
  5. // ===============================================================
  6. // TEXTBOX
  7. // ===============================================================
  8. input[type=text], input[type=password] {
  9. background-color: #FFF;
  10. display: flex;
  11. height: 30px;
  12. align-items: center;
  13. padding: 0 12px;
  14. border: 1px solid mc('grey', '400');
  15. border-radius: 3px;
  16. font-family: $core-font-standard;
  17. font-size: 14px;
  18. color: mc('grey', '700');
  19. transition: all .4s ease;
  20. box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
  21. &:focus {
  22. outline: none;
  23. border-color: mc('light-blue', '500');
  24. box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3);
  25. }
  26. &:disabled {
  27. background-color: mc('grey', '100');
  28. }
  29. &.is-dirty.is-invalid {
  30. border-color: mc('red', '500');
  31. box-shadow: inset 0 0 5px 0 mc('red', '100');
  32. }
  33. }
  34. &.is-fullwidth {
  35. input[type=text], input[type=password], select, textarea {
  36. width: 100%;
  37. }
  38. }
  39. // ===============================================================
  40. // DROPDOWN
  41. // ===============================================================
  42. select {
  43. background-color: #FFF;
  44. display: flex;
  45. height: 30px;
  46. align-items: center;
  47. padding: 0 12px;
  48. border: 1px solid mc('grey', '400');
  49. border-radius: 3px;
  50. font-family: $core-font-standard;
  51. font-size: 14px;
  52. color: mc('grey', '700');
  53. transition: all .4s ease;
  54. box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
  55. cursor: pointer;
  56. &:focus {
  57. outline: none;
  58. border-color: mc('light-blue', '500');
  59. box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3);
  60. }
  61. &:disabled {
  62. background-color: mc('grey', '100');
  63. }
  64. }
  65. // ===============================================================
  66. // CHECKBOX / RADIO BUTTONS
  67. // ===============================================================
  68. input[type=radio], input[type=checkbox] {
  69. position: absolute;
  70. left: -9999px;
  71. opacity: 0;
  72. & + label {
  73. position: relative;
  74. padding: 0 15px 0 25px;
  75. cursor: pointer;
  76. display: inline-block;
  77. height: 25px;
  78. line-height: 25px;
  79. font-size: 14px;
  80. transition: .28s ease;
  81. @include prefix('user-select', none);
  82. &:before, &:after {
  83. content: '';
  84. position: absolute;
  85. left: 0;
  86. top: 0;
  87. margin: 4px;
  88. border: 2px solid mc($primary, '600');
  89. margin: 4px;
  90. width: 16px;
  91. height: 16px;
  92. border-radius: 50%;
  93. z-index: 0;
  94. transition: .28s ease;
  95. }
  96. }
  97. &:checked + label {
  98. &:before, &:after {
  99. border-color: mc($primary, '600');
  100. }
  101. &:after {
  102. @include prefix('transform', scale(0.5));
  103. background-color: mc($primary, '600');
  104. }
  105. }
  106. }
  107. input[type=checkbox] + label {
  108. &:before, &:after {
  109. border-radius: 0;
  110. }
  111. }
  112. .help {
  113. font-size: 12px;
  114. &.is-red {
  115. color: mc('red','600');
  116. }
  117. }
  118. & + label {
  119. margin-top: 20px;
  120. }
  121. > i:first-child {
  122. margin-right: 8px;
  123. }
  124. }
  125. .label {
  126. margin-bottom: 5px;
  127. font-size: 14px;
  128. font-weight: 500;
  129. display: block;
  130. }
  131. .form-sections {
  132. section {
  133. border-top: 1px solid mc('grey', '200');
  134. padding: 20px;
  135. @include prefix(animation-duration, .6s);
  136. &:first-child {
  137. border-top: none;
  138. }
  139. .button + .button {
  140. margin-left: 10px;
  141. }
  142. .desc {
  143. display: inline-block;
  144. padding: 10px 0 0 0px;
  145. font-size: 12px;
  146. color: mc('grey', '500');
  147. }
  148. .section-block {
  149. padding-left: 20px;
  150. font-size: 14px;
  151. color: mc('blue-grey', '800');
  152. h6 {
  153. font-size: 14px;
  154. font-weight: 500;
  155. color: mc('blue-grey', '600');
  156. margin-top: 15px;
  157. border-bottom: 1px dotted mc('blue-grey', '200');
  158. }
  159. p {
  160. padding: 5px 0;
  161. &.is-small {
  162. font-size: 13px;
  163. }
  164. }
  165. }
  166. }
  167. }