/* 基础样式，不涉及业务，属性命名 */
/* 页面上需要用到的小样式，不需要在该页面专门写一个类，可以使用这些公共属性类 */
/* 浮动 */
.floatL { float: left; }
.floatR { float: right; }
.clear { clear: both; }
/* 文字方向 */
.textL { text-align: left; }
.textR { text-align: right; }
.textC { text-align: center; }
/* 字体大小 */
.font0 { font-size: 0; }
.font12, .font12 *, .font-12, .font-12 *{ font-size: 12px !important; }
.font14, .font14 *, .font-14, .font-14 *{ font-size: 14px !important; }
.font16, .font16 *, .font-16, .font-16 *{ font-size: 16px !important; }
.font18, .font18 *, .font-18, .font-18 *{ font-size: 16px !important; }
.bold { font-weight: bold; }

/* margin */
.mar-10 { margin: 10px; }
.mar-20 { margin: 20px; }
.marH-2 { margin: 0 2px; }
.marT-5 { margin: 5px !important; }
.marT-10 { margin-top: 10px; }
.marT-20 { margin-top: 20px; }
.marT-30 { margin-top: 30px; }
.marT-40 { margin-top: 40px; }
.marR-5 { margin-right: 5px; }
.marR-10 { margin-right: 10px; }
.marR-20 { margin-right: 20px; }
.marR-30 { margin-right: 30px; }
.marR-40 { margin-right: 40px; }
.marB { margin-bottom: $space; }
.marB-5 { margin-bottom: 5px; }
.marB-10 { margin-bottom: 10px; }
.marB-20 { margin-bottom: 20px; }
.marB-30 { margin-bottom: 30px; }
.marB-40 { margin-bottom: 40px; }
.marL-5 { margin-left: 5px; }
.marL--3 { margin-left: -3px !important; }
.marL-10 { margin-left: 10px; }
.marL-15 { margin-left: 15px !important; }
.marL-20 { margin-left: 20px; }
.marL-30 { margin-left: 30px; }
.marL-40 { margin-left: 40px; }
/* padding */
.pad-0 { padding: 0!important; }
.pad-10 { padding: 10px; }
.pad-20 { padding: 20px; }
.padT-0 { padding-top: 0!important; }
.padT-10 { padding-top: 10px; }
.padT-20 { padding-top: 20px; }
.padT-30 { padding-top: 30px; }
.padT-40 { padding-top: 40px; }
.padR-0 { padding-right: 0!important; }
.padR-10 { padding-right: 10px; }
.padR-20 { padding-right: 20px; }
.padR-30 { padding-right: 30px; }
.padR-40 { padding-right: 40px; }
.padB-0 { padding-bottom: 0!important; }
.padB-10 { padding-bottom: 10px; }
.padB-20 { padding-bottom: 20px; }
.padB-30 { padding-bottom: 30px; }
.padB-40 { padding-bottom: 40px; }
.padB-52 { padding-bottom: 52px; }
.padL-0 { padding-left: 0!important; }
.padL-10 { padding-left: 10px; }
.padL-20 { padding-left: 20px; }
.padL-30 { padding-left: 30px; }
.padL-40 { padding-left: 40px; }
/* 常规色 */
.color3, .color3 *{ color: #333; }
.color6, .color6 *{ color: #666; }
.color9, .color9 *{ color: #999; }
.bg-white { background: #fff; }
.bg3 { background: #333; }
.bg6 { background: #666; }
.bg9 { background: #999; }
/* 块与内联 */
.d-b { display: block !important; }
.d-ib { display: inline-block; }
.d-f { display: flex; }
.none { display: none !important; }
.flex-1 { flex: 1; }
.o-hidden { overflow: hidden; }
.o-auto { overflow: auto; }
/* position */
.p-r { position: relative; }
.p-a { position: absolute; }
.p-f { position: fixed; }
/* vertical位置 */
.v-t { vertical-align: top; }
.v-m { vertical-align: middle; }
/* 透明度 */
.o-0 { opacity: 0; }
.o-1 { opacity: 1; }
/* 宽高 */
.w-per-100 { width: 100%; }
.h-per-100 { height: 100%; }
.per-100 { width: 100% !important; height: 100% !important; }
.h-auto { height: auto !important; }
.w-per-90 { width: 90%; }
.w-per-80 { width: 80%; }
.w-per-50 { width: 50%; }
.w-100 { width: 100px; }
.w-200 { width: 200px; }
// 文本
.w-break-a { word-break: break-all; }
// 文本换行符生效
.w-space-pre { white-space: pre-wrap; }
// 设置文本全部展示：不省略
.text-show-all { overflow: unset; }
.pointer-events-none { pointer-events: none; } 
// 文本溢出处理
@mixin t-o-line ($num) {
    // 不兼容safari，且只能处理一行
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $num; 
}
@for $i from 1 through 3 {
    .text-o-#{$i} {
        @include t-o-line($i)
    }
}
// 必填项 ---start
/** 
 * 必填小红点 作用于标签
 * 使用<span :class="[`${status}-required`]">姓名:</span>小明
 * status: boolean
 */
$point-width: 8px;
.true-required {
    padding-left: $point-width;
    display: inline-block;
    position: relative;
    &:before {
        content: '*';
        width: $point-width;
        height: 12px;
        font-size: 14px;
        color: $danger;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
}
.false-required {
    padding-left: $point-width;
}
// 必填项 ---end
