comfort-ui2/src/styles/index.styl

A Vue.js project for UI

@import "./common/index";

// 公共样式
.com-view{
    h2{
        margin-bottom:50px;
    }
    h3{
        margin-bottom: 20px;
    }
    h5{
        margin-bottom: 10px;
        color:#666;
    }
    
}

// 按钮
.cf-button {
    display: inline-block;
    border: solid 1px $border-color-base;
    border-radius: 3px;
    background: #FFF;
    color:#333; 
    cursor: pointer;
    padding:8px 16px; 
    margin:0;
    font-size:12px; 
    transition: all .1s;
    line-height:1;
    outline: none;
    text-align: center;
    white-space: nowrap;
}

.cf-button-primary {
    background-color: #1E9FFF; color:#FFF; border-color: #1E9FFF;
}
.cf-button-submit {
    background-color: #009688; color:#FFF; border-color: #009688;
}
.cf-button-warning {
    background-color: #e6a23c; color:#FFF; border-color: #e6a23c;
}
.cf-button-danger {
    background-color: #f4516c; color:#FFF; border-color: #f4516c;
}
.is-round {
    border-radius: 20px;
    padding:8px 20px;
}
.cf-button-primary.is-plain {
    background-color: transparent;
    color: #1e9fff;
}
.cf-button-submit.is-plain {
    background-color: transparent;
    color: #009688;
}
.cf-button-warning.is-plain {
    background-color: transparent;
    color: #e6a23c;
}
.cf-button-danger.is-plain {
    background-color: transparent;
    color: #f4516c;
}


// input 输入框
.cf-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
.cf-input-base {
    display:inline-block;
    border:solid 1px $border-color-base;
    border-radius: 3px;
    color:#212121;
    padding:6px 6px;
    width:100%;
}