_styles.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /* #ifndef APP-NVUE */
  2. $-color-white:#fff;
  3. $-color-black:#000;
  4. @mixin base-style($color) {
  5. color: #fff;
  6. background-color: $color;
  7. border-color: mix($-color-black, $color, 8%);
  8. &:not([hover-class]):active {
  9. background: mix($-color-black, $color, 10%);
  10. border-color: mix($-color-black, $color, 20%);
  11. color: $-color-white;
  12. outline: none;
  13. }
  14. }
  15. @mixin is-color($color) {
  16. @include base-style($color);
  17. &[loading] {
  18. @include base-style($color);
  19. &::before {
  20. margin-right:5px;
  21. }
  22. }
  23. &[disabled] {
  24. &,
  25. &[loading],
  26. &:not([hover-class]):active {
  27. color: $-color-white;
  28. border-color: mix(darken($color,10%), $-color-white);
  29. background-color: mix($color, $-color-white);
  30. }
  31. }
  32. }
  33. @mixin base-plain-style($color) {
  34. color:$color;
  35. background-color: mix($-color-white, $color, 90%);
  36. border-color: mix($-color-white, $color, 70%);
  37. &:not([hover-class]):active {
  38. background: mix($-color-white, $color, 80%);
  39. color: $color;
  40. outline: none;
  41. border-color: mix($-color-white, $color, 50%);
  42. }
  43. }
  44. @mixin is-plain($color){
  45. &[plain] {
  46. @include base-plain-style($color);
  47. &[loading] {
  48. @include base-plain-style($color);
  49. &::before {
  50. margin-right:5px;
  51. }
  52. }
  53. &[disabled] {
  54. &,
  55. &:active {
  56. color: mix($-color-white, $color, 40%);
  57. background-color: mix($-color-white, $color, 90%);
  58. border-color: mix($-color-white, $color, 80%);
  59. }
  60. }
  61. }
  62. }
  63. .uni-btn {
  64. margin: 5px;
  65. color: #393939;
  66. border:1px solid #ccc;
  67. font-size: 16px;
  68. font-weight: 200;
  69. background-color: #F9F9F9;
  70. // TODO 暂时处理边框隐藏一边的问题
  71. overflow: visible;
  72. &::after{
  73. border: none;
  74. }
  75. &:not([type]),&[type=default] {
  76. color: #999;
  77. &[loading] {
  78. background: none;
  79. &::before {
  80. margin-right:5px;
  81. }
  82. }
  83. &[disabled]{
  84. color: mix($-color-white, #999, 60%);
  85. &,
  86. &[loading],
  87. &:active {
  88. color: mix($-color-white, #999, 60%);
  89. background-color: mix($-color-white,$-color-black , 98%);
  90. border-color: mix($-color-white, #999, 85%);
  91. }
  92. }
  93. &[plain] {
  94. color: #999;
  95. background: none;
  96. border-color: $uni-border-1;
  97. &:not([hover-class]):active {
  98. background: none;
  99. color: mix($-color-white, $-color-black, 80%);
  100. border-color: mix($-color-white, $-color-black, 90%);
  101. outline: none;
  102. }
  103. &[disabled]{
  104. &,
  105. &[loading],
  106. &:active {
  107. background: none;
  108. color: mix($-color-white, #999, 60%);
  109. border-color: mix($-color-white, #999, 85%);
  110. }
  111. }
  112. }
  113. }
  114. &:not([hover-class]):active {
  115. color: mix($-color-white, $-color-black, 50%);
  116. }
  117. &[size=mini] {
  118. font-size: 16px;
  119. font-weight: 200;
  120. border-radius: 8px;
  121. }
  122. &.uni-btn-small {
  123. font-size: 14px;
  124. }
  125. &.uni-btn-mini {
  126. font-size: 12px;
  127. }
  128. &.uni-btn-radius {
  129. border-radius: 999px;
  130. }
  131. &[type=primary] {
  132. @include is-color($uni-primary);
  133. @include is-plain($uni-primary)
  134. }
  135. &[type=success] {
  136. @include is-color($uni-success);
  137. @include is-plain($uni-success)
  138. }
  139. &[type=error] {
  140. @include is-color($uni-error);
  141. @include is-plain($uni-error)
  142. }
  143. &[type=warning] {
  144. @include is-color($uni-warning);
  145. @include is-plain($uni-warning)
  146. }
  147. &[type=info] {
  148. @include is-color($uni-info);
  149. @include is-plain($uni-info)
  150. }
  151. }
  152. /* #endif */