vue.scss 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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. }