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