jdvue
Version:
A Vue.js 2.0 Mobile UI components at JinDanLiCai
99 lines (95 loc) • 2.17 kB
text/less
.v-btn {
display: inline-block;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
line-height: 22px;
border: 1px solid transparent;
padding: 10px;
font-size: 16px;
color: #ffffff;
&-long {
width: 100%
} //字体大中小,默认中
&-large {
font-size: 18px;
}
&-default {
font-size: 16px;
}
&-small {
font-size: 14px;
line-height: 20px;
padding: 6px 10px;
border-radius: 15px;
}
&-mini {
font-size: 12px;
padding: 0 15px;
}
// 按钮主样式 'primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error',
&-primary {
background-image: linear-gradient(-90deg, #FE496B 0%, #FF5456 100%);
border: 1px solid #FE496B;
&:active{
background-image:none;
background-color: #DE4857;
}
}
&-sanbiao {
background-color: #D0A25B;
border: 1px solid #C7A45E;
&:active{
background-image:none;
background-color: #B98622;
}
}
&-ghost {
background-color: #fff;
border: 1px solid @red;
color: @red;
&:active{
background-color: rgba(254,74,105,0.15);
}
}
&-text {
background-color: #fff;
color: @master;
border-radius: 0 ;
}
&-disabled {
background-image: none;
border: 1px solid transparent;
background-color:#EBEBEF ;
color: #D2D2D2;
} //圆角平角小圆角,默认平角
&-circle {
border-radius: 22px;
}
&-circle-outline {
border-radius: 6px;
}
&-square {
border-radius: 0;
} //loading状态
&-loading {
}
&-btn-loading{
animation: v-load-loop 1s linear infinite;
margin-top: -4px;
}
}
@keyframes v-load-loop {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}