common.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. %boxSizing {
  2. box-sizing: border-box;
  3. }
  4. %TextEllipsis {
  5. overflow: hidden;
  6. text-overflow: ellipsis;
  7. white-space: nowrap;
  8. }
  9. [class*="vxe-"] {
  10. font-variant: tabular-nums;
  11. font-feature-settings: 'tnum';
  12. @extend %boxSizing;
  13. &:after, &:before,
  14. *:after, *:before {
  15. @extend %boxSizing;
  16. }
  17. }
  18. .vxe-primary-color {
  19. color: $vxe-primary-color;
  20. }
  21. .vxe-success-color {
  22. color: $vxe-success-color;
  23. }
  24. .vxe-info-color {
  25. color: $vxe-info-color;
  26. }
  27. .vxe-warning-color {
  28. color: $vxe-warning-color;
  29. }
  30. .vxe-danger-color {
  31. color: $vxe-danger-color;
  32. }
  33. .vxe-perfect-color {
  34. color: $vxe-table-header-background-color;
  35. }
  36. // 24 栅格布局
  37. .vxe-row {
  38. $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
  39. 37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
  40. 70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
  41. &:after {
  42. content: '';
  43. display: block;
  44. clear: both;
  45. height: 0;
  46. overflow: hidden;
  47. visibility: hidden;
  48. }
  49. @for $index from 0 to length($spans) {
  50. & > .vxe-col--#{$index + 1} {
  51. float: left;
  52. width: nth($spans, $index + 1);
  53. }
  54. }
  55. }
  56. /*animat*/
  57. .is--animat {
  58. .vxe-sort--asc-btn,
  59. .vxe-sort--desc-btn,
  60. .vxe-filter--btn {
  61. &:before,
  62. &:after {
  63. @include animatTransition(border);
  64. }
  65. }
  66. .vxe-input--wrapper {
  67. .vxe-input {
  68. @include animatTransition(border);
  69. }
  70. }
  71. .vxe-table--expand-btn,
  72. .vxe-tree--node-btn {
  73. @include animatTransition(transform);
  74. }
  75. .vxe-checkbox,
  76. .vxe-radio {
  77. > input {
  78. &:checked+span {
  79. @include animatTransition(background-color);
  80. }
  81. }
  82. }
  83. }