123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- .zan-btn {
- position: relative;
- color: #333;
- background-color: #fff;
- margin-bottom: 10px;
- padding-left: 15px;
- padding-right: 15px;
- border-radius: 2px;
- border: 1rpx solid #e5e5e5;
- font-size: 16px;
- line-height: 45px;
- height: 45px;
- box-sizing: border-box;
- text-decoration: none;
- text-align: center;
- vertical-align: middle;
- }
- .zan-btn::after {
- display: none;
- }
- .zan-btns {
- margin: 15px;
- }
- /* type */
- .zan-btn--primary {
- color: #fff;
- background-color: #4b0;
- border-color: #0a0;
- }
- .zan-btn--warn {
- color: #fff;
- background-color: #f85;
- border-color: #f85;
- }
- .zan-btn--danger {
- color: #fff;
- background-color: #f44;
- border-color: #e33;
- }
- /* size */
- .zan-btn--small {
- display: inline-block;
- height: 30px;
- line-height: 30px;
- font-size: 12px;
- margin-right: 5px;
- margin-bottom: 0;
- }
- .zan-btn--mini {
- display: inline-block;
- line-height: 21px;
- height: 22px;
- font-size: 10px;
- margin-right: 5px;
- margin-bottom: 0;
- padding-left: 5px;
- padding-right: 5px;
- }
- .zan-btn--large {
- border-radius: 0;
- margin-bottom: 0;
- border: none;
- line-height: 50px;
- height: 50px;
- }
- /* plain */
- .zan-btn--plain.zan-btn {
- background-color: transparent;
- }
- .zan-btn--plain.zan-btn--primary {
- color: #06BF04;
- }
- .zan-btn--plain.zan-btn--warn {
- color: #FF6600;
- }
- .zan-btn--plain.zan-btn--danger {
- color: #FF4444;
- }
- /* 重写button组件的button-hover样式 */
- .button-hover {
- opacity: 0.9;
- }
- /* loading */
- .zan-btn--loading {
- color: transparent;
- opacity: 1;
- }
- .zan-btn--loading::before {
- position: absolute;
- left: 50%;
- top: 50%;
- content: ' ';
- width: 16px;
- height: 16px;
- margin-left: -8px;
- margin-top: -8px;
- border: 3px solid #e5e5e5;
- border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
- border-radius: 8px;
- box-sizing: border-box;
- animation: btn-spin 0.6s linear;
- animation-iteration-count: infinite;
- }
- .zan-btn--primary.zan-btn--loading::before,
- .zan-btn--warn.zan-btn--loading::before,
- .zan-btn--danger.zan-btn--loading::before {
- border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
- }
- @keyframes btn-spin {
- 0% {
- transform: rotate(0);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- /* disabled */
- .zan-btn.zan-btn--disabled {
- /* 防止样式被 button[disabled] 的规则覆盖,所以使用了important */
- color: #999 ! important;
- background: #f8f8f8 ! important;
- border-color: #e5e5e5 ! important;
- cursor: not-allowed ! important;
- opacity: 1 ! important;
- }
- /* :last-child */
- .zan-btn--last-child,
- .zan-btn:last-child {
- margin-bottom: 0;
- margin-right: 0;
- }
|