mall-web-ssr/assets/scss/commonComponent.scss

/*---------------------提示框样式 start---------------------*/
/*示例：
<div class="com-del-box">
    <div class="title">
        <i></i>
    </div>
    <div class="content">
        <p><i class="fa fa-exclamation-circle"></i>是否要删除此发票?</p>
        <div>
            <a>取消</a>
            <a>确认</a>
        </div>
    </div>
</div>
*/
.com-del-box{
    position: fixed;
    z-index: 10;
    min-height: 152px;
    opacity: 1;
    background-color: white;
    width: 310px;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    margin: -155px 0 0 -75px;
    top: 55%;
    left: 50%;
}
.com-del-box .title{
    height: 30px;
    background-color: #5078cb;
    text-align: right;
    padding-right: 15px;
    line-height: 30px;
}
.com-del-box .title i{
    background: url(/images/icon/close.png) no-repeat;
    display: inline-block;
    width: 9px;
    height: 9px;
    cursor: pointer;
    margin: 0;
}
.com-del-box .content{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.com-del-box .content p{
    line-height: 50px;
    font-size: 14px;
    padding-top: 10px;
}
.com-del-box .content p i{
    color: #5078cb;
    font-size: 16px;
    margin-right: 10px;
}
.com-del-box .content div{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.com-del-box .content div a{
    width: 55px;
    height: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
.com-del-box .content div a:first-child{
    background: #b4b5b9;
    color: #333;
    margin-right: 10px;
}
.com-del-box .content div a:last-child{
    background: #5078cb;
    color: #fff;
}
/*.com-del-box .content div a:hover{
    background: #3f7ae3;
    color: #fff;
}*/
/*---------------------提示框样式 end---------------------*/

/*---------------------btn样式 start---------------------*/
/*示例(size+type)：
<span class="com-btn-level1 com-btn-submit"></span>
*/
/*btnSize*/
.com-btn-level1 {
    display: inline-block;
    height: 25px;
    width:64px;
    text-align: center;
    line-height: 23px;
    font-size: 14px;
    cursor: pointer;
    vertical-align: middle;
}
.com-btn-level1[disabled] {
    cursor: not-allowed;
}
.com-btn-level2 {
    display: inline-block;
    padding: 0 11px;
    height: 25px;
    line-height: 23px;
    border-radius: 2px;
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
}
.com-btn-level2[disabled] {
    cursor: not-allowed;
}
/*btnType*/
.com-btn-submit {
    color: #fff;
    background: #5078cb;
    border: 1px solid #5078cb;
}
.com-btn-cancel {
    background: #c8c6c6;
    color: #fff;
    border: 1px solid #c8c6c6;
}
.com-btn-detail {
    color: #fff;
    background: #ff8522;
    border: 1px solid #ff8522;
}
.com-btn-detail-border {
    color: #ff8522;
    background: #fff;
    border: 1px solid #ff8522;
}
.com-btn-red {
    background: #f15601;
    color: #fff;
    border: 1px solid #f15601;
}
.com-btn-green {
    background: #33b401;
    color: #fff;
    border: 1px solid #33b401;
}
.com-btn-submit-border {
    border: 1px solid #5078cb;
    background: #fff;
    color: #5078cb;
}
/*---------------------btn样式 end-----------------------*/

/*---------------------标准控件-新增start---------------------*/
i.fa-plus-circle{
    font-size: 16px!important;
    color: #33b401!important;
    cursor: pointer;
}
/*---------------------标准控件-新增end---------------------*/

/*---------------------标准控件-删除start---------------------*/
i.fa-minus-circle{
    font-size: 16px!important;
    color: #f51c24!important;
    cursor: pointer;
}
/*---------------------标准控件-删除end---------------------*/

/*---------------------标准控件-单选框start---------------------*/
/** html代码
    <label class="com-check-radio">
        <input type="radio" id="effect" name="radio">
        <label for="effect"></label>
        生效
    </label>
    <label class="com-check-radio">
        <input type="radio" id="no-effect" name="radio" checked="checked">
        <label for="no-effect"></label>
        暂不生效
    </label>
**/
.com-check-radio input[type='radio']{
    display: none!important;
    margin: 7px 8px 0!important;
}
.com-check-radio input[type='radio'] + label{
    position: relative!important;
    top: 7px!important;
    margin-right: 5px!important;
    display: inline-block!important;
    width: 12px!important;
    height: 12px!important;
    font-weight: normal!important;
    background: url(/images/icon/check-rule.png) no-repeat;
}
.com-check-radio label{
    background-position: 0 0!important;
}
.com-check-radio input:checked + label{
    background-position: -15px 0!important;
}
/*---------------------标准控件-单选框end---------------------*/

/*---------------------标准控件-复选框start---------------------*/
/** html代码
    <label class="com-check-box">
        <input type="checkbox" id="1">
        <label for="1"></label>
    </label>
**/
.com-check-box,
.com-check-box label {
    margin-bottom: 0;
}
.com-check-box input {
    display: none!important;
}
.com-check-box input[type="checkbox"] + label{
    display: inline-block!important ;
    position: relative!important ;
    top: 2px!important ;
    width: 12px!important ;
    height: 12px!important ;
    background: url(/images/icon/check-rule.png) no-repeat ;
    background-position: -48px 0;
}
.com-check-box input:checked + label {
    background-position: -31px 0;
}
/*---------------------标准控件-复选框end---------------------*/

/*---------------------标准控件-开关（蓝色）start---------------------*/
/** html代码
    <div class="com-switch-blue">
        <span class="checkbox">
            <span><em></em></span>
        </span>
        <span class="checkbox active">
            <span><em></em></span>
        </span>
	</div>
**/
div.com-switch-blue .checkbox {
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: block;
}
div.com-switch-blue .checkbox span {
    width: 46px;
    height: 12px;
    display: inline-block;
    border-radius: 18px;
    border: #e4e4e4 1px solid;
    cursor: pointer;
    position: relative;
    box-shadow: 1px 1px 5px #eee;
    background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#E0E0E0), to(#E8E8E8), color-stop(0.5,#F2F2F2));
    transition: background-color .1s ease-out;
}
div.com-switch-blue .checkbox.active span{
    background: #b9cffa;
}
div.com-switch-blue .checkbox.active span em{
    left: 34px;
}
div.com-switch-blue .checkbox span em{
    position: absolute;
    width: 16px;
    top: -5px;
    left: 0;
    height: 16px;
    line-height: 16px;
    background-color: #fff;
    border: #eee 1px solid;
    border-radius: 50%;
    box-shadow: -1px 2px 1px #999;
    transition: background-color .1s ease-out;
    color: #666;
    font-size: 12px;
}
div.com-switch-blue .checkbox span em:after{
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #dedcdc;
    border-radius: 100%;
    position: absolute;
    top: 4px;
    left: 4px;
}
/*---------------------标准控件-开关（蓝色）end---------------------*/

/*---------------------标准控件-开关（绿色）start---------------------*/
/** html代码
    <div class="com-switch-green">
        <span class="checkbox">
            <span><em></em></span>
        </span>
        <span class="checkbox active">
            <span><em></em></span>
        </span>
	</div>
**/
div.com-switch-green .checkbox {
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: block;
}
div.com-switch-green .checkbox span {
    width: 34px;
    height: 18px;
    display: inline-block;
    border-radius: 18px;
    border: #e4e4e4 1px solid;
    cursor: pointer;
    position: relative;
    box-shadow: 1px 1px 5px #eee;
    background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#bbbcba), to(#bfc1be), color-stop(0.5,#c5c7c4));
    transition: background-color .1s ease-out;
}
div.com-switch-green .checkbox.active span{
    background: #3acb14;
}
div.com-switch-green .checkbox.active span em{
    left: 18px;
}
div.com-switch-green .checkbox span em{
    position: absolute;
    top: -2px;
    left: -3px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background-color: #fff;
    border: #eee 1px solid;
    border-radius: 50%;
    box-shadow: -1px 2px 1px #999;
    transition: background-color .1s ease-out;
    color: #666;
    font-size: 12px;
}
div.com-switch-green .checkbox span em:after{
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    background: #dedcdc;
    border-radius: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
}
/*---------------------标准控件-开关（绿色）end---------------------*/

/*---------------------信息提示框 start---------------------*/
/** html代码
    <div class="tip">
        XXXX
	</div>
**/
div.tip{
    display: none;
    padding: 13px 10px;
    font-size: 12px;
    color: #333;
    background-color: #fff;
    border: 1px solid #89aefa;
    border-radius: 2px;
    box-shadow: 2px 2px 5px #dedede;
    -webkit-box-shadow: 2px 2px 5px #dedede;
    -moz-box-shadow: 2px 2px 5px #dedede;
    -o-box-shadow: 2px 2px 5px #dedede;
}
/*---------------------信息提示框 end---------------------*/


/*---------------------提示浮层 start---------------------*/
.com-supernatant-box{
    max-width:360px;
    opacity:.6;
    border-radius:5px;
}
.com-supernatant-box div{
    position:fixed;
    top:59%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    color: #333;
}
.com-supernatant-box .success{
    background: #f00000;
}
.com-supernatant-box .defeat{
    background: #5078cb;
}
/*-------------------------提示浮层 end--------------------*/

/*------下拉选框的使用样式方法------------------------------*/
/*
<div class='com-select-option'>
    <input id="classesType" ng-blur="onBlur()"  ng-click="changeShowLogistics()" type="text" class="form-control" ng-model="message.classes"  placeholder="请选择消息类型" readonly="true" >
    <ul id="ulContent" ng-if="matchData && showContent" class="dropdown-menu">
     <li ng-click="showText(classes)" ng-repeat="classes in resultList" ng-class="{'active': $index==selectIndex}" ng-bind="classes" ng-bind="message.classes"></li>
    </ul>
 </div>
*/
/*-------------------------下拉选框 start-------------- --*/
.com-select-option {
    position: relative;
}
.com-select-option>input {
    vertical-align: middle;
    width: 190px;
    margin-top: -2px;
    background-color: white !important;
    height: 30px;
    background: url(/images/icon/icon-xiala.png) no-repeat 167px 11px;
    cursor: pointer;
}
.com-select-option .dropdown-menu{
    top: 90%;
    left: unset;
    line-height: 30px;
    max-height: 300px;
    overflow-y: auto;
    width: 190px;
    display: block;
    overflow-x: hidden;
    border-radius: 2px;
}
.com-select-option .dropdown-menu li{
    font-size: 14px;
    cursor: pointer;
    padding-left:10px;
    height: 30px;
}
.com-select-option .dropdown-menu li:hover, .dropdown-menu li.active{
    color: #fff;
    background: #5078cb;
}
/*-------------------------下拉选框 end--------------------*/

/*----------遮罩层 start-------------*/
.modal-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 99;
}
/*----------遮罩层 end-------------*/