bri-components 1.1.6 → 1.2.1

package/src/styles/common/control.less

@@ -1,95 +1,103 @@
-// 表格展示
-.unit-show () {
+// 单元格标签式展示 -非全部类型通用
+.bri-unit-show () {
     background-color: @theme-focus;
     color: @themeColor;
     border-radius: @borderRadius;
     padding: 3px 8px;
-    text-align: center;
     line-height: 24px;
+    display: inline;
 }
 
-// // 表单模式
-// .control {
-//     &-show {
-//         border: none;
-//         background-color: transparent;
-//     }
-
-//     &-edit {
-//         height: 32px;
-//         border: 1px solid @borderColor;
-//         border-radius: @borderRadius;
-//         background: @inputBg;
-//         line-height: 32px;
-//         color: @textColor;
-//         cursor: pointer;
-//     }
-
-//     &-placeholder {
-//         color: @placeholderColor;
-//     }
-
-//     &-readonly {
-//         border: 1px solid @border-readonly;
-//         border-radius: @borderRadius;
-//         background: @inputBg-readonly;
-//         line-height: 32px;
-//         color: @textColor-readonly;
-//     }
-
-//     &-disabled {
-//         color: @textColor-disabled;
-//         border: 1px solid @border-disabled;
-//         background: @inputBg-disabled;
-//         border-radius: @borderRadius;
-//         cursor: not-allowed;
-//     }
-
-//     &-notext {
-//         color: @placeholderColor;
-//     }
-// }
-
-// 表单模式
-.control-edit {
-    height: 32px;
+// 表单控件共用样式
+.bri-control-edit {
     border: 1px solid @borderColor;
     border-radius: @borderRadius;
     background: @inputBg;
-    line-height: 32px;
     cursor: pointer;
     color: @textColor;
+
+    &.bri-control-nodata {
+        .bri-control-nodata();
+    }
 }
-.control-disabled {
-    height: 32px;
+.bri-control-disabled {
     border: 1px solid @border-disabled;
     border-radius: @borderRadius;
     background: @inputBg-disabled;
-    line-height: 32px;
-    cursor: not-allowed;
-    color: @textColor-disabled;
-}
-.control-readonly {
-    height: 32px;
-    border: 1px solid @border-readonly;
-    border-radius: @borderRadius;
-    background: @inputBg-readonly;
-    line-height: 32px;
     cursor: not-allowed;
-    color: @textColor-readonly;
+    color: @textColor;
+
+    &.bri-control-nodata {
+        .bri-control-disabled-placeholder();
+    }
 }
-.control-show {
+// .bri-control-readonly {
+//     border: 1px solid @border-readonly;
+//     border-radius: @borderRadius;
+//     background: @inputBg-readonly;
+//     cursor: not-allowed;
+//     color: @textColor-readonly;
+// }
+.bri-control-show {
     border: none;
     background-color: transparent;
+
+    &.bri-control-nodata {
+        .bri-control-nodata();
+    }
 }
-.control-unit {
+.bri-control-unit {
     border: none;
     background-color: transparent;
-}
 
-.control-placeholder {
-    color: @placeholderColor;
+    // unit 模式下不用特殊处理颜色
+    &.bri-control-nodata {
+        color: @text-color;
+    }
 }
-.control-notext {
+// 无数据
+.bri-control-nodata {
     color: @placeholderColor;
 }
+// 编辑disabled模式下无数据
+.bri-control-disabled-placeholder {
+    color: @textColor-disabled;
+}
+
+// 展示为tag标签公共样式
+#bri-control-wrap () {
+    .dsh-flex-row-between-center();
+    height: 32px;
+    padding: 4px 0 4px 4px;
+    line-height: 24px;
+
+    .text {
+        .dsh-ellipsis();
+    }
+
+    .overflow {
+        overflow: auto;
+        .bri-scrollbar3();
+    }
+
+    .icon {
+        &-default {
+            padding: 5px;
+        }
+
+        &-close {
+            padding: 5px;
+            display: none;
+        }
+    }
+
+    &:hover {
+        .icon-close {
+            display: block;
+        }
+    }
+
+    &.bri-control-nodata {
+        padding-left: 7px;
+    }
+}

package/src/styles/components/controls/base/BriUpload/BriUpload.less

@@ -0,0 +1,167 @@
+.BriUpload {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid @borderColor;
+    border-radius: @borderRadius;
+    background-color: @white;
+
+    // 外围
+    &-old {
+        overflow: hidden;
+        display: flex;
+
+        &-wrapper {
+            min-width: 120px;
+            height: 100%;
+            margin: 16px 0px 16px 16px;
+            border-radius: 0px;
+            border: none;
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            .dsh-flex-col-center-center();
+            width: 120px;
+            height: 120px;
+            position: relative;
+            border: 1px @borderColor dashed;
+            color: @themeColor;
+            border-radius: @borderRadius;
+            cursor: pointer;
+            &:hover {
+                border-color: @themeColor;
+                background-color: @theme-focus;
+            }
+        }
+
+        &-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 50px !important;
+            height: 50px !important;
+            margin-top: -25px;
+            margin-left: -25px;
+            border-radius: 50%;
+            background-color: @inputBg-readonly;
+
+            i {
+                color: @scuess-color;
+                font-size: 40px;
+            }
+        }
+    }
+
+    &-new,
+    &-inline {
+        display: flex;
+
+        &-wrapper {
+            min-width: 30px;
+            background-color: @border-readonly;
+            height: 30px;
+            line-height: 30px;
+            border: none;
+            border-radius: 0px !important;
+            &:hover {
+                border: none
+            }
+        }
+
+        &-imageadd {
+            .dsh-flex-row-center-center();
+            height: 30px;
+            background-color: @btn-hover;
+            color: @textColor;
+            border: none;
+            border-radius: 0px;
+            &:hover {
+                color: @themeColor;
+                background-color: @theme-focus;
+            }
+        }
+
+        &-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 24px !important;
+            height: 24px !important;
+            margin-top: -12px;
+            margin-left: -12px;
+            background-color: #f4f5fa;
+            border-radius: 50%;
+            i {
+                color: @scuess-color;
+                font-size: 24px;
+            }
+        }
+    }
+
+    &-readonly {
+        border: none;
+        border-radius: 0px;
+        background-color: transparent;
+    
+        .uploadList {
+            &-old {
+                margin: 0px;
+            }
+    
+            &-list {
+                .item {
+                    flex: 0 0 80px;
+                    height: 80px;  
+                }
+            }
+    
+            &-inline {
+                .bri-scrollbar6();
+                height: 48px;
+                line-height: 48px;
+    
+                .item {
+                    flex: 0 0 48px
+                }
+            }
+        }
+    }
+    
+    &-disabled {
+        .bri-control-disabled();
+    
+        .uploadList {
+            &-old {
+                margin: 0px;
+            }
+    
+            &-list {
+                .item {
+                    flex: 0 0 80px;
+                    height: 80px;  
+                }
+            }
+
+            &-nodata {
+                .bri-control-disabled-placeholder();
+                text-indent: 7px;
+                text-align: left;
+            }
+            &-inline-nodata {
+                .bri-control-disabled-placeholder();
+            }
+        }
+    }
+
+    &-unit {
+        .uploadList {
+            &-inline-nodata {
+                color: @text-color;
+            }
+        }
+    }
+}

package/src/styles/components/controls/base/BriUpload/BriUploadImage.less

@@ -0,0 +1,81 @@
+.BriUploadImage {
+    position: relative;
+
+    &-set {
+        width: 100%;
+
+        &-img {
+            width: 100px;
+            height: 100px;
+            float: left;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            background-color: #fff;
+            border: 1px solid @borderColor;
+            border-radius: 0px;
+            position: relative;
+            overflow: hidden;
+
+            &-action {
+                color: @themeColor;
+                cursor: pointer;
+            }
+
+            &-circle {
+                position: absolute;
+                top: 0px;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                background-color: #f4f5fa;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .circle {
+                    width: 50px !important;
+                    height: 50px !important;
+                }
+
+                i {
+                    color: #5cb85c;
+                    font-size: 40px;
+                }
+            }
+        }
+
+        &-avatar {
+            background-size: cover;
+        }
+
+        .wrap {
+            width: 100px;
+            height: 32px;
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+            line-height: 18px;
+            text-align: center;
+            vertical-align: middle;
+            cursor: pointer;
+
+            button {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+            }
+
+            .file {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                margin: 0;
+                border: solid transparent;
+                opacity: 0;
+                filter: alpha(opacity=0);
+                cursor: pointer;
+            }
+        }
+    }
+}

package/src/styles/components/controls/base/BriUpload/index.less

@@ -0,0 +1,3 @@
+@import "./BriUpload.less";
+@import "./BriUploadImage.less";
+@import "./uploadList.less";

package/src/styles/components/controls/base/BriUpload/uploadList.less

@@ -0,0 +1,164 @@
+// 列表样式
+.uploadList {
+    width: 100%;
+    overflow: auto;
+
+    // 普通文件
+    &-old {
+        margin: 16px;
+    }
+
+    &-nodata {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        line-height: 120px;
+        color: @placeholderColor;
+        white-space: nowrap;
+
+        span {
+            margin-left: 5px;
+        }
+    }
+
+    &-list {
+        display: flex;
+        flex-wrap: nowrap;
+
+        .item {
+            flex: 0 0 120px;
+            height: 120px;
+            margin-right: 10px;
+            border-radius: @borderRadius;
+            background: #f4f5fa;
+            text-align: center;
+            overflow: hidden;
+            display: inline-flex;
+            flex-direction: column;
+            justify-content: space-between;
+            position: relative;
+    
+            &:hover {
+                .item-action {
+                    display: flex !important;
+                }
+            }
+    
+            &-show {
+                display: flex;
+                overflow: hidden;
+                align-items: center;
+                justify-content: center;
+                flex: 2;
+                min-height: 50px;
+    
+                img {
+                    max-width: 100%;
+                    max-height: 100%;
+                }
+            }
+    
+            &-name {
+                flex: 1;
+                display: flex;
+                max-height: 32px;
+    
+                &-title {
+                    padding: 0 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color: @themeColor;
+                }
+            }
+    
+            &-action {
+                background-color: @placeholderColor;
+                display: none !important;
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                left: 0px;
+                bottom: 0px;
+                align-items: center;
+                justify-content: center;
+    
+                &-icon {
+                    width: 22px;
+                    height: 22px;
+                    line-height: 22px;
+                    color: #fff;
+                    margin-left: 2px;
+                }
+            }
+        }
+    }
+
+    // 内部表格inline模式
+    &-inline {
+        height: 30px;
+        line-height: 30px;
+
+        &-list {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding-left: 3px;
+
+            .item {
+                flex: 0 0 48px;
+                background: #f4f5fa;
+                margin-right: 3px;
+                position: relative;
+                border-radius: @borderRadius;
+
+                &:hover {
+                    .item-action {
+                        display: flex !important;
+                        animation: toTop 0.1s;
+                    }
+                }
+
+                img {
+                    max-width: 100%;
+                    max-height: 100%;
+                    margin: auto;
+                }
+    
+                &-action {
+                    display: none !important;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    background-color: @placeholderColor;
+                    color: #fff;
+                    align-items: center;
+                    justify-content: center;
+                    i {
+                        margin: 0px;
+                    }
+                }
+    
+                @keyframes toTop {
+                    from {
+                        top: 100%;
+                    }
+    
+                    to {
+                        top: 0;
+                    }
+                }
+            }
+        }
+
+        &-nodata {
+            padding-left: 7px;
+            color: @placeholderColor;
+        }
+    }
+}

package/src/styles/components/controls/base/DshCascader/DshCascader.less

@@ -0,0 +1,71 @@
+.DshCascader {
+    width: 100%;
+
+    &-edit {
+        // 多选
+        &-multiple {
+            width: 100%;
+            
+            &-edit {
+                #bri-control-wrap();
+            }
+        }
+
+        // 单选 -新模式
+        &-custom {
+            width: 100%;
+            #bri-control-wrap();
+        }
+        // 单选 -默认模式
+        &-single {
+            width: 100%;
+        }
+    }
+
+    // 查看
+    &-show {
+        &-multiple {
+            #bri-control-wrap();
+
+            .overflow {
+                &-unit {
+                    .dsh-ellipsis();
+                }
+            }
+        }
+
+        &-single {
+
+        }
+    }
+
+    // 多选类型且独自一行时
+    &-row {
+        height: 68px;
+        
+        .overflow {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.ivu-cascader {
+    &-rel {
+        display: block;
+    }
+
+    &-label {
+        padding-right: 24px;
+    }
+
+    &-transfer {
+        max-height: 400px !important;
+
+        .ivu-cascader-menu {
+            max-height: 400px;
+            height: auto;
+            max-width: 300px;
+        }
+    }
+}

package/src/styles/components/controls/base/DshCascader/index.less

@@ -0,0 +1,2 @@
+@import "./DshCascader.less";
+@import "./InfoCascader.less";