weui-button.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @import "../../base/fn.less";
  2. .weui-btn{
  3. margin-top: @weuiBtnDefaultGap;
  4. &:first-child{
  5. margin-top: 0;
  6. }
  7. }
  8. .weui-btn-area{
  9. margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em;
  10. }
  11. button {
  12. @colorButton: #FE6A0F;
  13. display: flex;
  14. justify-content:center;
  15. align-content:center;
  16. align-items:center;
  17. line-height: initial;
  18. border-radius: 4em;
  19. background-image: -webkit-gradient(
  20. linear,
  21. 5% 0%,
  22. 80% 100%,
  23. from(#FE6A0F),
  24. to(#FE6A0F)
  25. // from(#4AF3F9),
  26. // to(#2475F1)
  27. );
  28. color: #fff;
  29. font-weight: bold;
  30. &:not([size='mini']){
  31. font-weight: bold;
  32. height: 80rpx;
  33. }
  34. // box-shadow: 2rpx 2rpx 10rpx 0 rgba(#2475F1, .53);
  35. // 取除微信默认描边
  36. &:after{ border: none; }
  37. &,
  38. &[type=primary]{
  39. &[plain] {
  40. color: #F16E24;
  41. border: 1rpx solid currentColor;
  42. background-color: transparent;
  43. }
  44. }
  45. &[type=default]{
  46. color: #fff;
  47. &[plain] {
  48. color: #33393E;
  49. border: 1rpx solid #B9BEC2;
  50. background: transparent;
  51. &.button-hover{
  52. // border-color: darken( #B9BEC2, 10% )
  53. border-color: lighten(#B9BEC2, 5% )
  54. }
  55. }
  56. }
  57. // &[size=mini]{
  58. // font-size: 12px;
  59. // font-weight: lighter;
  60. // }
  61. &[disabled]{
  62. background-image: -webkit-gradient(
  63. linear,
  64. 22% 0%,
  65. 30% 100%,
  66. from(#edeff3),
  67. to(#d6dbe2)
  68. );
  69. &:not([plain]){
  70. color: #fff!important;
  71. }
  72. &[plain] {
  73. color: #B9BEC2;
  74. border-color: lighten(#B9BEC2, 5% )
  75. }
  76. // box-shadow: 2rpx 2rpx 10rpx 0 rgba(214, 219, 226, .53);
  77. }
  78. &.button-hover{
  79. border-color: currentColor;
  80. opacity: .5;
  81. &[plain]{
  82. color: @colorButton;
  83. border-color: currentColor;
  84. }
  85. }
  86. &[plain]{
  87. background: transparent;
  88. }
  89. }