_forms.scss 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. $form-range-track-width: 100%;
  2. $form-range-track-height: .25rem;
  3. $form-range-track-cursor: pointer;
  4. $form-range-track-bg: $color-border;
  5. $form-range-track-border-radius: 1rem;
  6. $form-range-track-box-shadow: none;
  7. $form-range-thumb-width: 1rem;
  8. $form-range-thumb-height: $form-range-thumb-width;
  9. $form-range-thumb-bg: $color-primary;
  10. $form-range-thumb-border: 0;
  11. $form-range-thumb-border-radius: 1rem;
  12. $form-range-thumb-box-shadow: 0 0 0 .125rem $color-background;
  13. $form-range-thumb-focus-box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba($color-primary, .2);
  14. $form-range-thumb-focus-box-shadow-width: .25rem;
  15. $form-range-thumb-active-bg: darken($form-range-thumb-bg, 10%);
  16. $form-range-thumb-disabled-bg: #eee;
  17. $form-range-thumb-transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
  18. %form-common {
  19. appearance: none;
  20. border-radius: $border-radius;
  21. border: 1px solid $color-border;
  22. background: $color-white;
  23. color: inherit;
  24. &:focus {
  25. border-color: $color-primary;
  26. box-shadow: 0 0 0 3px rgba($color-primary, .2);
  27. }
  28. }
  29. .form-control {
  30. @extend %form-common;
  31. display: block;
  32. width: 100%;
  33. height: $form-btn-height;
  34. padding: subtract($gap-2, 1px) $gap-3;
  35. &::placeholder {
  36. color: rgba($color-muted, .75);
  37. }
  38. @at-root textarea#{&} {
  39. resize: vertical;
  40. min-height: add(4rem, 2px);
  41. &[rows] {
  42. height: auto;
  43. }
  44. }
  45. &[type="search"] {
  46. background: $color-white url-svg('<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#{$color-muted}" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>') no-repeat .75rem center/1.25rem;
  47. padding-left: 2.5rem;
  48. }
  49. &[type="search"]::-webkit-search-cancel-button {
  50. -webkit-appearance: none;
  51. height: 2rem;
  52. width: 2rem;
  53. margin-right: -.5rem;
  54. background: url-svg('<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#{$color-text}" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>') no-repeat center/1.25rem;
  55. opacity: .64;
  56. cursor: pointer;
  57. &:hover {
  58. opacity: 1;
  59. }
  60. }
  61. }
  62. .form-check {
  63. @extend %form-common;
  64. width: $form-check-size;
  65. height: $form-check-size;
  66. cursor: pointer;
  67. &:checked,
  68. &.checked {
  69. background-image: url-svg('<svg viewBox="0 0 16 16"><polyline points="3 7 7 11 13 4" fill="none" stroke="#{$form-focus-color}" stroke-width="3" /></svg>');
  70. background-repeat: no-repeat;
  71. &:disabled,
  72. &.disabled {
  73. background-image: url-svg('<svg viewBox="0 0 16 16"><polyline points="3 7 7 11 13 4" fill="none" stroke="#{rgba($color-muted, .64)}" stroke-width="3" /></svg>');
  74. }
  75. }
  76. &[type="radio"] {
  77. border-radius: 50%;
  78. &:checked,
  79. &.checked {
  80. background-image: url-svg('<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="4" fill="#{$form-focus-color}" /></svg>');
  81. &:disabled,
  82. &.disabled {
  83. background-image: url-svg('<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="4" fill="#{rgba($color-muted, .64)}" /></svg>');
  84. }
  85. }
  86. }
  87. }
  88. .form-check-label {
  89. display: inline-flex;
  90. align-items: center;
  91. user-select: none;
  92. cursor: pointer;
  93. }
  94. .form-check-text {
  95. margin-left: $gap-2;
  96. @include text-truncate(100%);
  97. }
  98. .form-check-list {
  99. display: flex;
  100. flex-direction: column;
  101. >:not(:first-child) {
  102. margin-top: $gap-1;
  103. }
  104. .form-check-text {
  105. color: $color-muted;
  106. transition: .3s color;
  107. }
  108. .form-check:checked + .form-check-text {
  109. color: $color-text;
  110. }
  111. }
  112. .form-range {
  113. width: 100%;
  114. height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
  115. padding: 0;
  116. background-color: transparent;
  117. appearance: none;
  118. vertical-align: bottom;
  119. &:focus {
  120. outline: none;
  121. &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  122. &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  123. &::-ms-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  124. }
  125. &::-moz-focus-outer {
  126. border: 0;
  127. }
  128. &::-webkit-slider-thumb {
  129. width: $form-range-thumb-width;
  130. height: $form-range-thumb-height;
  131. margin-top: ($form-range-track-height - $form-range-thumb-height) * .5;
  132. background: $form-range-thumb-bg;
  133. border: $form-range-thumb-border;
  134. border-radius: $form-range-thumb-border-radius;
  135. box-shadow: $form-range-thumb-box-shadow;
  136. transition: $form-range-thumb-transition;
  137. appearance: none;
  138. &:active {
  139. background: $form-range-thumb-active-bg;
  140. }
  141. }
  142. &::-webkit-slider-runnable-track {
  143. width: $form-range-track-width;
  144. height: $form-range-track-height;
  145. color: transparent;
  146. cursor: $form-range-track-cursor;
  147. background-color: $form-range-track-bg;
  148. border-color: transparent;
  149. border-radius: $form-range-track-border-radius;
  150. box-shadow: $form-range-track-box-shadow;
  151. }
  152. &::-moz-range-thumb {
  153. width: $form-range-thumb-width;
  154. height: $form-range-thumb-height;
  155. background: $form-range-thumb-bg;
  156. border: $form-range-thumb-border;
  157. border-radius: $form-range-thumb-border-radius;
  158. box-shadow: $form-range-thumb-box-shadow;
  159. transition: $form-range-thumb-transition;
  160. cursor: $form-range-track-cursor;
  161. appearance: none;
  162. &:active {
  163. background: $form-range-thumb-active-bg;
  164. }
  165. }
  166. &::-moz-range-progress {
  167. background-color: $form-range-thumb-bg;
  168. }
  169. &::-moz-range-track {
  170. width: $form-range-track-width;
  171. height: $form-range-track-height;
  172. color: transparent;
  173. cursor: $form-range-track-cursor;
  174. background-color: $form-range-track-bg;
  175. border-color: transparent;
  176. border-radius: $form-range-track-border-radius;
  177. box-shadow: $form-range-track-box-shadow;
  178. }
  179. &::-ms-thumb {
  180. width: $form-range-thumb-width;
  181. height: $form-range-thumb-height;
  182. margin-top: 0;
  183. margin-right: $form-range-thumb-focus-box-shadow-width;
  184. margin-left: $form-range-thumb-focus-box-shadow-width;
  185. background: $form-range-thumb-bg;
  186. border: $form-range-thumb-border;
  187. border-radius: $form-range-thumb-border-radius;
  188. box-shadow: $form-range-thumb-box-shadow;
  189. transition: $form-range-thumb-transition;
  190. appearance: none;
  191. &:active {
  192. background: $form-range-thumb-active-bg;
  193. }
  194. }
  195. &::-ms-track {
  196. width: $form-range-track-width;
  197. height: $form-range-track-height;
  198. color: transparent;
  199. cursor: $form-range-track-cursor;
  200. background-color: transparent;
  201. border-color: transparent;
  202. border-width: $form-range-thumb-height * .5;
  203. box-shadow: $form-range-track-box-shadow;
  204. }
  205. &::-ms-fill-lower {
  206. background-color: $form-range-track-bg;
  207. border-radius: $form-range-track-border-radius;
  208. }
  209. &::-ms-fill-upper {
  210. margin-right: 15px;
  211. background-color: $form-range-track-bg;
  212. border-radius: $form-range-track-border-radius;
  213. }
  214. &:disabled {
  215. pointer-events: none;
  216. &::-webkit-slider-thumb {
  217. background-color: $form-range-thumb-disabled-bg;
  218. }
  219. &::-moz-range-thumb {
  220. background-color: $form-range-thumb-disabled-bg;
  221. }
  222. &::-ms-thumb {
  223. background-color: $form-range-thumb-disabled-bg;
  224. }
  225. }
  226. }
  227. .form-value {
  228. text-align: center;
  229. font-weight: $font-weight-bold;
  230. width: 3rem;
  231. }
  232. .form-color {
  233. display: inline-block;
  234. width: 1.75rem;
  235. height: 1.75rem;
  236. border-radius: $border-radius;
  237. }
  238. .form-selector {
  239. position: relative;
  240. select {
  241. position: absolute;
  242. top: 0;
  243. left: 0;
  244. right: 0;
  245. bottom: 0;
  246. width: 100%;
  247. display: block;
  248. background: transparent;
  249. }
  250. }
  251. .input-color {
  252. display: inline-block;
  253. width: 1.25rem;
  254. height: 1.25rem;
  255. border-radius: $border-radius;
  256. background: $color-muted;
  257. border: 1px solid $color-border;
  258. cursor: pointer;
  259. &.checked {
  260. background-image: url-svg('<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="3" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"></path></svg>');
  261. background-size: 1rem 1rem;
  262. background-position: center;
  263. }
  264. }
  265. .input-icon {
  266. display: inline-flex;
  267. align-items: center;
  268. justify-content: center;
  269. width: 2rem;
  270. height: 2rem;
  271. border-radius: $border-radius;
  272. background: $color-white;
  273. color: $color-text;
  274. border: 1px solid $color-border;
  275. cursor: pointer;
  276. .icon {
  277. width: 1.25rem;
  278. height: 1.25rem;
  279. }
  280. &:hover {
  281. border-color: $color-border-hover;
  282. color: $color-text;
  283. }
  284. &.checked {
  285. border-color: $color-primary;
  286. }
  287. }