vue.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // nvue下hover-class无效
  2. $u-button-before-top:50% !default;
  3. $u-button-before-left:50% !default;
  4. $u-button-before-width:100% !default;
  5. $u-button-before-height:100% !default;
  6. $u-button-before-transform:translate(-50%, -50%) !default;
  7. $u-button-before-opacity:0 !default;
  8. $u-button-before-background-color:#000 !default;
  9. $u-button-before-border-color:#000 !default;
  10. $u-button-active-before-opacity:.15 !default;
  11. $u-button-icon-margin-left:4px !default;
  12. $u-button-plain-u-button-info-color:$u-info;
  13. $u-button-plain-u-button-success-color:$u-success;
  14. $u-button-plain-u-button-error-color:$u-error;
  15. $u-button-plain-u-button-warning-color:$u-error;
  16. .u-button {
  17. width: 100%;
  18. &:before {
  19. position: absolute;
  20. top:$u-button-before-top;
  21. left:$u-button-before-left;
  22. width:$u-button-before-width;
  23. height:$u-button-before-height;
  24. border: inherit;
  25. border-radius: inherit;
  26. transform:$u-button-before-transform;
  27. opacity:$u-button-before-opacity;
  28. content: " ";
  29. background-color:$u-button-before-background-color;
  30. border-color:$u-button-before-border-color;
  31. }
  32. &--active {
  33. &:before {
  34. opacity: .15
  35. }
  36. }
  37. &__icon+&__text:not(:empty),
  38. &__loading-text {
  39. margin-left:$u-button-icon-margin-left;
  40. }
  41. &--plain {
  42. &.u-button--primary {
  43. color: $u-primary;
  44. }
  45. }
  46. &--plain {
  47. &.u-button--info {
  48. color:$u-button-plain-u-button-info-color;
  49. }
  50. }
  51. &--plain {
  52. &.u-button--success {
  53. color:$u-button-plain-u-button-success-color;
  54. }
  55. }
  56. &--plain {
  57. &.u-button--error {
  58. color:$u-button-plain-u-button-error-color;
  59. }
  60. }
  61. &--plain {
  62. &.u-button--warning {
  63. color:$u-button-plain-u-button-warning-color;
  64. }
  65. }
  66. }