form.scss 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. /**Variable**/
  2. %ButtonHover {
  3. color: lighten($vxe-primary-color, 6%);
  4. border-color: lighten($vxe-primary-color, 10%);
  5. }
  6. .vxe-form {
  7. position: relative;
  8. font-size: $vxe-font-size;
  9. color: $vxe-font-color;
  10. font-family: $vxe-font-family;
  11. background-color: $vxe-form-background-color;
  12. text-align: left;
  13. }
  14. .vxe-form-slots {
  15. display: none;
  16. }
  17. .vxe-form--item-content,
  18. .vxe-form--item-trigger-node {
  19. display: inline-block;
  20. vertical-align: middle;
  21. }
  22. .vxe-form--item-title {
  23. display: flex;
  24. flex-direction: row;
  25. max-width: 320px;
  26. padding-right: 0.8em;
  27. &.is--ellipsis {
  28. .vxe-form--item-title-content {
  29. overflow: hidden;
  30. text-overflow: ellipsis;
  31. white-space: nowrap;
  32. }
  33. }
  34. .vxe-form--item-title-prefix,
  35. .vxe-form--item-title-suffix,
  36. .vxe-form--item-title-postfix {
  37. flex-shrink: 0;
  38. }
  39. .vxe-form--item-title-prefix,
  40. .vxe-form--item-title-suffix {
  41. cursor: help;
  42. vertical-align: middle;
  43. }
  44. .vxe-form--item-title-prefix {
  45. margin-right: 0.25em;
  46. }
  47. .vxe-form--item-title-suffix {
  48. margin-left: 0.2em;
  49. }
  50. .vxe-form--item-title-postfix {
  51. display: flex;
  52. align-items: center;
  53. }
  54. .vxe-form--item-title-content {
  55. flex-grow: 1;
  56. }
  57. .vxe-form--item-title-label {
  58. vertical-align: middle;
  59. }
  60. }
  61. .vxe-form--item-trigger-node {
  62. font-size: 12px;
  63. min-width: 100px;
  64. color: #909399;
  65. text-align: center;
  66. user-select: none;
  67. cursor: pointer;
  68. .vxe-form--item-trigger-icon {
  69. display: inline-block;
  70. margin: 0 0.25em;
  71. transition: all 0.1s;
  72. }
  73. }
  74. .vxe-form--item-valid {
  75. position: absolute;
  76. width: 100%;
  77. font-size: 12px;
  78. line-height: 1.2em;
  79. color: $vxe-form-validate-error-color;
  80. background-color: $vxe-form-validate-error-background-color;
  81. z-index: 1;
  82. opacity: 0;
  83. transform-origin: center top;
  84. transform: scaleY(0);
  85. transition: all 0.2s ease-in-out;
  86. }
  87. .vxe-form {
  88. .vxe-form--gather {
  89. display: inline-block;
  90. }
  91. .vxe-form--item {
  92. display: none;
  93. padding: 0.5em 0.8em 0.5em 0;
  94. &.is--active {
  95. &:not(.is--hidden) {
  96. display: inline-block;
  97. }
  98. }
  99. }
  100. }
  101. .vxe-form--item {
  102. &.is--colon {
  103. .vxe-form--item-title-postfix {
  104. &:after {
  105. content: ":";
  106. font-weight: normal;
  107. margin-left: 0.2em;
  108. }
  109. }
  110. }
  111. &.is--asterisk {
  112. &.is--required {
  113. .vxe-form--item-title-content {
  114. &:before {
  115. content: "*";
  116. color: $vxe-form-validate-error-color;
  117. font-family: Verdana,Arial,Tahoma;
  118. margin-right: 0.2em;
  119. font-weight: normal;
  120. vertical-align: middle;
  121. }
  122. }
  123. }
  124. }
  125. &.is--span {
  126. .vxe-default-input:not([type="submit"]):not([type="reset"]),
  127. .vxe-default-textarea,
  128. .vxe-default-select,
  129. .vxe-input,
  130. .vxe-textarea,
  131. .vxe-select {
  132. width: 100%;
  133. }
  134. }
  135. &.is--error {
  136. .vxe-input > .vxe-input--inner,
  137. .vxe-textarea > .vxe-textarea--inner,
  138. .vxe-select,
  139. .vxe-select.is--active > .vxe-input .vxe-input--inner,
  140. .vxe-default-input,
  141. .vxe-default-textarea,
  142. .vxe-default-select {
  143. border-color: $vxe-form-validate-error-color;
  144. }
  145. .vxe-input>.vxe-input--inner,
  146. .vxe-textarea>.vxe-textarea--inner,
  147. .vxe-default-input[type="text"],
  148. .vxe-default-input[type="search"],
  149. .vxe-default-textarea,
  150. .vxe-default-select {
  151. &:focus {
  152. border-color: $vxe-form-validate-error-color;
  153. }
  154. }
  155. .vxe-form--item-valid {
  156. opacity: 1;
  157. transform: scaleY(1);
  158. }
  159. }
  160. .vxe-form--item-inner {
  161. display: flex;
  162. flex-direction: row;
  163. align-items: center;
  164. .vxe-form--item-title {
  165. flex-shrink: 0;
  166. }
  167. .vxe-form--item-content {
  168. position: relative;
  169. flex-grow: 1;
  170. word-break: break-all;
  171. }
  172. }
  173. .vxe-default-input,
  174. .vxe-default-textarea,
  175. .vxe-default-select {
  176. outline: 0;
  177. border: 1px solid $vxe-input-border-color;
  178. border-radius: $vxe-border-radius;
  179. }
  180. .vxe-default-input,
  181. .vxe-default-select {
  182. height: $vxe-button-height-default;
  183. }
  184. .vxe-default-input {
  185. padding: 0 0.8em;
  186. }
  187. .vxe-default-textarea {
  188. padding: 0.3em 0.6em;
  189. }
  190. .vxe-default-input[type="number"] {
  191. padding-right: 0.2em;
  192. }
  193. .vxe-default-input[type="text"],
  194. .vxe-default-input[type="search"] {
  195. padding: 0 1em;
  196. }
  197. .vxe-default-input[type="text"],
  198. .vxe-default-input[type="search"],
  199. .vxe-default-textarea,
  200. .vxe-default-select {
  201. color: $vxe-font-color;
  202. &:focus {
  203. border: 1px solid $vxe-primary-color;
  204. }
  205. &[disabled] {
  206. cursor: not-allowed;
  207. background-color: $vxe-input-disabled-background-color;
  208. }
  209. }
  210. .vxe-default-input[type="submit"],
  211. .vxe-default-input[type="reset"] {
  212. line-height: $vxe-button-height-default - 2px;
  213. background-color: #fff;
  214. cursor: pointer;
  215. &:hover {
  216. @extend %ButtonHover;
  217. }
  218. &:active {
  219. color: darken($vxe-primary-color, 2%);
  220. border-color: darken($vxe-primary-color, 2%);
  221. }
  222. }
  223. .vxe-default-input {
  224. &[type="date"]::-webkit-inner-spin-button {
  225. margin-top: 6px;
  226. }
  227. &[type="date"]::-webkit-inner-spin-button,
  228. &[type="number"]::-webkit-inner-spin-button {
  229. height: 24px;
  230. }
  231. &::placeholder {
  232. color: $vxe-input-placeholder-color;
  233. }
  234. }
  235. .vxe-default-input[type="text"],
  236. .vxe-default-input[type="search"],
  237. .vxe-default-textarea,
  238. .vxe-default-select {
  239. width: 180px;
  240. }
  241. .vxe-default-textarea {
  242. resize: none;
  243. vertical-align: middle;
  244. &::placeholder {
  245. color: $vxe-input-placeholder-color;
  246. }
  247. }
  248. }
  249. .vxe-form {
  250. .vxe-form--item-inner {
  251. min-height: $vxe-form-item-min-height-default;
  252. & > .align--center {
  253. text-align: center;
  254. }
  255. & > .align--left {
  256. text-align: left;
  257. }
  258. & > .align--right {
  259. text-align: right;
  260. }
  261. }
  262. &.size--medium {
  263. font-size: $vxe-font-size-medium;
  264. .vxe-form--item-inner {
  265. min-height: $vxe-form-item-min-height-medium;
  266. }
  267. .vxe-default-input[type="submit"],
  268. .vxe-default-input[type="reset"] {
  269. line-height: $vxe-button-height-medium - 2px;
  270. }
  271. .vxe-default-input,
  272. .vxe-default-input,
  273. .vxe-default-select {
  274. height: $vxe-button-height-medium;
  275. }
  276. }
  277. &.size--small {
  278. font-size: $vxe-font-size-small;
  279. .vxe-form--item-inner {
  280. min-height: $vxe-form-item-min-height-small;
  281. }
  282. .vxe-default-input[type="submit"],
  283. .vxe-default-input[type="reset"] {
  284. line-height: $vxe-button-height-small - 2px;
  285. }
  286. .vxe-default-input,
  287. .vxe-default-input,
  288. .vxe-default-select {
  289. height: $vxe-button-height-small;
  290. }
  291. }
  292. &.size--mini {
  293. font-size: $vxe-font-size-mini;
  294. .vxe-form--item-inner {
  295. min-height: $vxe-form-item-min-height-mini;
  296. }
  297. .vxe-default-input[type="submit"],
  298. .vxe-default-input[type="reset"] {
  299. line-height: $vxe-button-height-mini - 2px;
  300. }
  301. .vxe-default-input,
  302. .vxe-default-input,
  303. .vxe-default-select {
  304. height: $vxe-button-height-mini;
  305. }
  306. }
  307. }