@import "../public/public.less";
@import "../public/header.less";

//生成绑定二维码
.qrcodeHelp{
	margin: 30px 30px 0;
	li{
		color: @QRCODEHELP-TEXT-COLOR;
		font-size: @QRCODEHELP-TEXT-FONTSIZE;
        padding-left: 12px;
        text-indent: -12px;
        line-height: 18px;
    	margin-bottom: 28px;
        &:first-child{
        	color: inherit;
        	font-size: @QRCODEHELP-TITLE-FONTSIZE;
			margin-bottom: 18px;
        }
        &:last-child{
            padding-left: 0;
            text-indent: 0;
        }	
        p{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid;/*no*/
        }
	}
}

.u-button();

.custom-button{
	.button();
    .buttonPosition();
}

.mediaPosition();

//门锁管理
.grid-list{
    position: absolute;
    top: 44px;
    bottom: 138px;
    left: 0;
    width: 100%;
    overflow: auto;
}

.grid-list-scroll{
    .grid-list-row{
        margin: 10px;
        border: 1px solid @GRIDLIST-COMPONENT-ROW-BORDER;/*no*/
        border-radius: 5px;
        .grid-list-handle{
            height: 56px;
            position: relative;
            .display-box();
            .box-vertical-alignment();
            padding: 0 12px;
            .grid-list-left-image{
                width: 26px;
                height: 26px;
                margin-right: 5px;
            }
            div{
                .flex();
                min-width: 0;
            }
            .grid-list-title{
                font-size: @GRIDLIST-COMPONENT-TITLE-FONTSIZE;
                .text_oneRow_ellipsis();
            }
            .grid-list-right-icon{
                .iconfont(@GRIDLIST-COMPONENT-DEFAULTICON-FONTSIZE);
                .transform(rotate(180deg));
            } 
            &:after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;/*no*/
                .white_gradient_border();
            }   
        }
        .grid-list-content{
            height: 42px;
            display: table;
            width: 100%;
            table-layout: fixed;
            .grid-list-button{
                display: table-cell;
                vertical-align: middle;
                .grid-list-button-bg{
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    color: @GRIDLIST-COMPONENT-BUTTON-ICON-COLOR;
                    border: 1px solid;/*no*/
                    border-radius: 50%;
                    .iconfont(@GRIDLIST-COMPONENT-BUTTON-ICON-FONTSIZE,30px);
                    display: inline-block;
                }
                &:nth-child(1){
                    padding-left: 16px;
                }
                &:nth-child(2){
                    padding-left: 25px;
                }
                &:nth-child(3){
                    padding-left: 34px;
                }
                &:nth-child(4){
                    text-align: right;
                    padding-right: 16px;
                }
            }
        }
    }
}

.grid-list-load{
    .listLoad();
    text-align: center;
}

.grid-list-tip{
    .transformV_center(left,0);
    width: 100%;
    text-align: center;    
    .listNoCont();
}

//修改名称
.u-text();

.inputBox{
    margin: 0 42px;
    padding-bottom: 40px; 
}

.custom-editName-text{
    .textInput(0,17px,@CUSTOM-EDITTEXT-COMPONENT-INPUT-FONTSIZE);
}

.errorTip{
    position: absolute;
    left: 0;
    right: 0;
    .errorTip();
}

//门锁管理
.doorlockManage li{
    font-size: 16px;
    padding: 0 42px;
    position: relative;
    height: 55px;
    line-height: 55px;
    p{
        float: right;
        color: #A0A0A7;
        font-size: 12px;
    }
    // > icon 
    &.name{
        padding-right: 72px;
        &:before{
            content: '\e6a7';
            .transformV_center(right,35px);
            .iconfont(@USERINFOLINK-ICON-FONTSIZE);
        }
    }
    &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;/*no*/
        .white_gradient_border();
    }
}

.u-switch();

.custom-switch{
    position: absolute;
    top: 0;
    right: 0;
    width: 126px;
    height: 100%;
    .u-switch-handle{
        width: 40px;
        height: 24px;
        &:before{
            top: 0;
            width: 20px;
            height: 20px;
        }
    }
    //开关 开
    &.u-switch-on .u-switch-handle{
        border-color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-BORDER;
        background-color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-BG;
        &:before{
            left: 16px;
        }        
    }
    //开关 关
    &.u-switch-off .u-switch-handle{
        border-color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-BORDER;
        background-color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-BG;     
        &:before{
            left: 0;
        }            
    }   
}

.custom-isClearSwitch-switch {
  width: 5.333rem;
  height: auto;
  text-align: center;
  color: #00ffff;
  margin: 0.72rem auto 0;
  padding: 0.267rem 0;
}

.custom-isClearSwitch-switch .u-switch-handle {
  position: relative;
  top: auto;
  left: auto;
  -webkit-transform: none;
  transform: none;
  width: 0.453rem;
  height: 0.453rem;
  border: 0;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.16rem;
}

.custom-isClearSwitch-switch .u-switch-handle:before {
  font-family: iconfont;
  font-size: 0.453rem;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.custom-isClearSwitch-switch .u-switch-text {
  display: inline-block;
  vertical-align: middle;
}

.custom-isClearSwitch-switch.u-switch-on .u-switch-handle {
  background-color: transparent;
}

.custom-isClearSwitch-switch.u-switch-on .u-switch-handle:before {
    content: '\e6aa';
  left: 0;
}

.custom-isClearSwitch-switch.u-switch-off .u-switch-handle {
  background-color: transparent;
}

.custom-isClearSwitch-switch.u-switch-off .u-switch-handle:before {
  content: '\e6a9';
  left: 0;
}

.unbindState-dialog();

