ad52b6a8bf3500e13bcfb81c34b8ed0f264a89cf212505d513fa9bc39363c09abe74919c69e0188d6b084a1c86f5e3d6d9cf9948a80ae5c208847521a741e8 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. @charset "UTF-8";
  2. @import "common/var";
  3. @import "mixins/button";
  4. @import "mixins/mixins";
  5. @import "mixins/utils";
  6. @include b(button) {
  7. display: inline-block;
  8. line-height: 1;
  9. white-space: nowrap;
  10. cursor: pointer;
  11. background: $--button-default-background-color;
  12. border: $--border-base;
  13. border-color: $--button-default-border-color;
  14. color: $--button-default-font-color;
  15. -webkit-appearance: none;
  16. text-align: center;
  17. box-sizing: border-box;
  18. outline: none;
  19. margin: 0;
  20. transition: .1s;
  21. font-weight: $--button-font-weight;
  22. @include utils-user-select(none);
  23. & + & {
  24. margin-left: 10px;
  25. }
  26. @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
  27. &:hover,
  28. &:focus {
  29. color: $--color-primary;
  30. border-color: $--color-primary-light-7;
  31. background-color: $--color-primary-light-9;
  32. }
  33. &:active {
  34. color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  35. border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  36. outline: none;
  37. }
  38. &::-moz-focus-inner {
  39. border: 0;
  40. }
  41. & [class*="el-icon-"] {
  42. & + span {
  43. margin-left: 5px;
  44. }
  45. }
  46. @include when(plain) {
  47. &:hover,
  48. &:focus {
  49. background: $--color-white;
  50. border-color: $--color-primary;
  51. color: $--color-primary;
  52. }
  53. &:active {
  54. background: $--color-white;
  55. border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  56. color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  57. outline: none;
  58. }
  59. }
  60. @include when(active) {
  61. color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  62. border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  63. }
  64. @include when(disabled) {
  65. &,
  66. &:hover,
  67. &:focus {
  68. color: $--button-disabled-font-color;
  69. cursor: not-allowed;
  70. background-image: none;
  71. background-color: $--button-disabled-background-color;
  72. border-color: $--button-disabled-border-color;
  73. }
  74. &.el-button--text {
  75. background-color: transparent;
  76. }
  77. &.is-plain {
  78. &,
  79. &:hover,
  80. &:focus {
  81. background-color: $--color-white;
  82. border-color: $--button-disabled-border-color;
  83. color: $--button-disabled-font-color;
  84. }
  85. }
  86. }
  87. @include when(loading) {
  88. position: relative;
  89. pointer-events: none;
  90. &:before {
  91. pointer-events: none;
  92. content: '';
  93. position: absolute;
  94. left: -1px;
  95. top: -1px;
  96. right: -1px;
  97. bottom: -1px;
  98. border-radius: inherit;
  99. background-color: rgba(255,255,255,.35);
  100. }
  101. }
  102. @include when(round) {
  103. border-radius: 20px;
  104. padding: 12px 23px;
  105. }
  106. @include when(circle) {
  107. border-radius: 50%;
  108. padding: $--button-padding-vertical;
  109. }
  110. @include m(primary) {
  111. @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
  112. }
  113. @include m(success) {
  114. @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
  115. }
  116. @include m(warning) {
  117. @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
  118. }
  119. @include m(danger) {
  120. @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
  121. }
  122. @include m(info) {
  123. @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
  124. }
  125. @include m(medium) {
  126. @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
  127. @include when(circle) {
  128. padding: $--button-medium-padding-vertical;
  129. }
  130. }
  131. @include m(small) {
  132. @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
  133. @include when(circle) {
  134. padding: $--button-small-padding-vertical;
  135. }
  136. }
  137. @include m(mini) {
  138. @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
  139. @include when(circle) {
  140. padding: $--button-mini-padding-vertical;
  141. }
  142. }
  143. @include m(text) {
  144. border-color: transparent;
  145. color: $--color-primary;
  146. background: transparent;
  147. padding-left: 0;
  148. padding-right: 0;
  149. &:hover,
  150. &:focus {
  151. color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
  152. border-color: transparent;
  153. background-color: transparent;
  154. }
  155. &:active {
  156. color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  157. border-color: transparent;
  158. background-color: transparent;
  159. }
  160. &.is-disabled,
  161. &.is-disabled:hover,
  162. &.is-disabled:focus {
  163. border-color: transparent;
  164. }
  165. }
  166. }
  167. @include b(button-group) {
  168. @include utils-clearfix;
  169. display: inline-block;
  170. vertical-align: middle;
  171. & > .el-button {
  172. float: left;
  173. position: relative;
  174. & + .el-button {
  175. margin-left: 0;
  176. }
  177. &.is-disabled {
  178. z-index: 1;
  179. }
  180. &:first-child {
  181. border-top-right-radius: 0;
  182. border-bottom-right-radius: 0;
  183. }
  184. &:last-child {
  185. border-top-left-radius: 0;
  186. border-bottom-left-radius: 0;
  187. }
  188. &:first-child:last-child {
  189. border-top-right-radius: $--button-border-radius;
  190. border-bottom-right-radius: $--button-border-radius;
  191. border-top-left-radius: $--button-border-radius;
  192. border-bottom-left-radius: $--button-border-radius;
  193. &.is-round {
  194. border-radius: 20px;
  195. }
  196. &.is-circle {
  197. border-radius: 50%;
  198. }
  199. }
  200. &:not(:first-child):not(:last-child) {
  201. border-radius: 0;
  202. }
  203. &:not(:last-child) {
  204. margin-right: -1px;
  205. }
  206. &:not(.is-disabled) {
  207. &:hover,
  208. &:focus,
  209. &:active {
  210. z-index: 1;
  211. }
  212. }
  213. @include when(active) {
  214. z-index: 1;
  215. }
  216. }
  217. & > .el-dropdown {
  218. & > .el-button {
  219. border-top-left-radius: 0;
  220. border-bottom-left-radius: 0;
  221. border-left-color: rgba($--color-white, 0.5);
  222. }
  223. }
  224. @each $type in (primary, success, warning, danger, info) {
  225. .el-button--#{$type} {
  226. &:first-child {
  227. border-right-color: rgba($--color-white, 0.5);
  228. }
  229. &:last-child {
  230. border-left-color: rgba($--color-white, 0.5);
  231. }
  232. &:not(:first-child):not(:last-child) {
  233. border-left-color: rgba($--color-white, 0.5);
  234. border-right-color: rgba($--color-white, 0.5);
  235. }
  236. }
  237. }
  238. }