vue.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. &__text {
  19. white-space: nowrap;
  20. line-height: 1;
  21. }
  22. &:before {
  23. position: absolute;
  24. top:$u-button-before-top;
  25. left:$u-button-before-left;
  26. width:$u-button-before-width;
  27. height:$u-button-before-height;
  28. border: inherit;
  29. border-radius: inherit;
  30. transform:$u-button-before-transform;
  31. opacity:$u-button-before-opacity;
  32. content: " ";
  33. background-color:$u-button-before-background-color;
  34. border-color:$u-button-before-border-color;
  35. }
  36. &--active {
  37. &:before {
  38. opacity: .15
  39. }
  40. }
  41. &__icon+&__text:not(:empty),
  42. &__loading-text {
  43. margin-left:$u-button-icon-margin-left;
  44. }
  45. &--plain {
  46. &.u-button--primary {
  47. color: $u-primary;
  48. }
  49. }
  50. &--plain {
  51. &.u-button--info {
  52. color:$u-button-plain-u-button-info-color;
  53. }
  54. }
  55. &--plain {
  56. &.u-button--success {
  57. color:$u-button-plain-u-button-success-color;
  58. }
  59. }
  60. &--plain {
  61. &.u-button--error {
  62. color:$u-button-plain-u-button-error-color;
  63. }
  64. }
  65. &--plain {
  66. &.u-button--warning {
  67. color:$u-button-plain-u-button-warning-color;
  68. }
  69. }
  70. }