bri-components 1.1.0 → 1.1.2

package/src/styles/common/box.less

@@ -41,6 +41,19 @@
     margin-right: 5px;
 }
 
+.dsh-margin-top8 {
+    margin-top: 8px;
+}
+.dsh-margin-bottom8 {
+    margin-bottom: 8px;
+}
+.dsh-margin-left8 {
+    margin-left: 8px;
+}
+.dsh-margin-right8 {
+    margin-right: 8px;
+}
+
 .dsh-margin-top10 {
     margin-top: 10px;
 }
@@ -115,6 +128,9 @@
 .dsh-padding20 {
     padding: 20px;
 }
+.dsh-padding24 {
+    padding: 24px;
+}
 .dsh-padding100 {
     padding: 100px;
 }
@@ -155,3 +171,16 @@
 .dsh-padding-right20 {
     padding-right: 20px;
 }
+.dsh-padding-top24 {
+    padding-top: 24px;
+}
+.dsh-padding-bottom24 {
+    padding-bottom: 24px;
+}
+.dsh-padding-left24 {
+    padding-left: 24px;
+}
+.dsh-padding-right24 {
+    padding-right: 24px;
+}
+

package/src/styles/common/control.less

@@ -14,10 +14,12 @@
     background-color: transparent;
 }
 .control-edit {
+    height: 32px;
     color: @textColor;
     border: 1px solid @borderColor;
     background: @inputBg;
     border-radius: @borderRadius;
+    line-height: 32px;
     cursor: pointer;
 }
 .control-placeholder {

package/src/styles/components/controls/BriLabels.less

@@ -4,9 +4,28 @@
     &-dropdown {
         width: 100%;
 
-        &-input {
-            input {
-                cursor: pointer;
+        &-show {
+            display: flex;
+            justify-content: space-between;
+            cursor: pointer;
+            border-radius: @borderRadius;
+            border: 1px solid @borderColor;
+            padding-left: 5px;
+
+            &-list {
+                display: flex;
+                align-items: center;
+            }
+
+            &-active {
+                border-color: #64c6d1;
+                box-shadow: 0 0 0 2px rgba(61, 184, 197, 0.2);
+            }
+
+            &-arrow {
+                display: flex;
+                align-items: center;
+                margin-right: 5px;
             }
         }
 
@@ -18,6 +37,97 @@
                 background-color: @theme-focus;
                 color: @themeColor;
             }
+
+            &-show {
+                // width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                &-icons {
+                    margin-left: 10px;
+
+                    i {
+                        padding: 3px;
+                        border-radius: @borderRadius;
+                        color: rgba(0, 0, 0, 0.4);
+
+                        &:hover {
+                            background-color: #fff;
+                        }
+                    }
+
+                    &-edit {
+                        &:hover {
+                            color: @themeColor;
+                        }
+                    }
+
+                    &-del {
+                        &:hover {
+                            color: @error-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-btnWrap {
+            border-top: 1px solid #E7E7E7;
+            margin: 12px 8px 0;
+            padding-top: 8px;
+        }
+
+        &-add {
+            width: 300px;
+            margin-bottom: 8px;
+        }
+    }
+
+    .ivu-select-dropdown {
+        width: fit-content;
+    }
+
+    .ivu-input-suffix {
+        display: flex;
+        align-items: center;
+
+        i {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+
+            &:hover {
+                background-color: @btn-hover;
+                border-radius: @borderRadius;
+            }
+        }
+    }
+
+    &-view {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        height: 32px;
+        overflow-y: hidden;
+        &-item{
+            .unit-show();
+            .dsh-ellipsis();
+            display: inline-flex;
+            max-width: 100%;
+            height: fit-content;
+            padding: 0 8px;
+            background-color: @borderColor;
+            color: rgba(0,0,0,0.9);
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 24px;
+            border-radius: @borderRadius;
+            margin-right: 8px;
+        }
+
+        &-nodata {
+            color: @textColor;
         }
     }
 }

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

@@ -18,18 +18,20 @@
 
             &-text {
                 .dsh-ellipsis();
+
                 &-disabled {
                     color: @borderColor;
                 }
             }
-            
+
             &-clear {
                 margin-left: 5px;
             }
         }
 
         &-placeholder {
-            color: @borderColor;
+            color: @placeholderColor;
+            padding: 0 7px;
         }
     }
 
@@ -57,6 +59,7 @@
             &-footer {
                 width: 100%;
                 padding: 10px;
+
                 .btn {
                     text-align: right;
                 }
@@ -66,7 +69,8 @@
 }
 
 .ivu-cascader-transfer {
-    max-height: 400px!important;
+    max-height: 400px !important;
+
     .ivu-cascader-menu {
         max-height: 400px;
         height: auto;

package/src/styles/components/controls/DshCoordinates.less

@@ -1,11 +1,13 @@
 .DshCoordinates {
+    width: 100%;
+    line-height: 32px;
     .textRight {
         text-align: right;
     }
 
     &-wrap {
         position: relative;
-        padding: 0 7px;
+        padding: 0 8px;
         .control-edit();
         &-zuobiao{
             color: #e5e5e5;
@@ -47,6 +49,9 @@
     &-readonly {
         cursor: not-allowed;
     }
+    &-show {
+        padding: 0 8px;
+    }
 }
 
 

package/src/styles/components/controls/DshInput.less

@@ -37,4 +37,10 @@
         width: 100%;
         display: flex;
     }
+}
+.ivu-input {
+    .control-edit();
+    &[disabled] {
+        .control-disabled(); 
+    }
 }

package/src/styles/components/controls/DshLabels.less

@@ -109,17 +109,17 @@
             }
         }
 
-        &-tag{
+        &-tag {
             width: fit-content;
             margin-right: 10px;
         }
 
-        &-nodata{
+        &-nodata {
             color: @textColor;
         }
     }
 
-    &-searchResult{
+    &-searchResult {
         position: fixed;
         z-index: 333;
         max-height: 150px;

package/src/styles/components/controls/controlShow.less

@@ -1,7 +1,5 @@
 .controlShow {
     &-val {
-        display: inline-block;
-        width: 100%;
         height: 100%;
     }
 

package/src/styles/components/index.less

@@ -25,7 +25,7 @@
 // list
 @import "./list/evTable.less";
 @import "./list/DshCascaderTable.less";
-@import "./list/DshFlatTable.less";
+// @import "./list/DshFlatTable.less";
 @import "./list/DshSingleData.less";
 @import "./list/DshCrossTable.less";
 @import "./list/ivu_reset.less";
@@ -53,7 +53,7 @@
 @import "./small/DshSteps.less";
 @import "./small/DshControlDefine.less";
 @import "./small/BriButton.less";
-@import "./small/BriTree.less";
+@import "./small/BriDrawer.less";
 
 // unit
 @import "./unit/DshFormItem.less";

package/src/styles/components/other/InfoCascader.less

@@ -52,4 +52,8 @@
             padding-right: 16px;
         }
     }
+
+    .ivu-tree-empty {
+        text-align: center;
+    }
 }

package/src/styles/components/other/ZLoading.less

@@ -19,18 +19,34 @@
         width: 100%;
         height: 100%;
 
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
         .ZLoading-main {
             width: 100%;
             height: 100%;
-
-            img {
-                width: auto;
-                height: auto;
-                max-width: 100%;
-                max-height: 100%;
+            .dsh-flex();
+            
+            &-content {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
             }
 
-            .dsh-flex();
+            &-loading {
+                border-radius: 50%;
+                background: conic-gradient(#5EC4CF 50%, white);
+                --mask: radial-gradient(closest-side, transparent 70%, black 71%);
+                -webkit-mask-image: var(--mask);
+                mask-image: var(--mask);
+                animation: spin 1s linear infinite;
+            }
+            &-loadingText {
+                margin-top: 8px;
+                color: @themeColor;
+            }
         }
     }
 }

package/src/styles/components/small/BriDrawer.less

@@ -0,0 +1,34 @@
+.BriDrawer {
+    .ivu-drawer-header {
+        padding: 16px 16px 15px;
+    }
+    .ivu-drawer-body {
+        padding: 0px;
+    }
+    .ivu-drawer-close {
+        top: 18px;
+        right: 18px
+    }
+    &-header {
+        color: @textColor;
+        font-weight: 500;
+        font-size: @smallTitleSize;
+        line-height: @smallTitleHeight;
+    }
+    &-close {
+        color: @contentColor;
+    }
+    &-main {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    &-body {
+        flex: 1;
+        overflow: auto;
+    }
+    &-footer {
+        border-top: 1px solid @borderColor;
+        padding: 11px 16px 12px;
+    }
+}

package/src/styles/components/small/DshControlDefine.less

@@ -1,22 +1,5 @@
 .dsh-control-define {
-    height: 32px;
-    padding: 2px 6px;
-    border: 1px solid @borderColor;
-    border-radius: 0px;
-    line-height: 22px;
-    text-align: left;
-    cursor: pointer;
-    overflow: auto;
-
-    // &::-webkit-scrollbar {
-    //     height: 4px;
-    //     width: 4px;
-    
-    //     &::-webkit-scrollbar-thumb {
-    //         border-radius: 4px;
-    //         background-clip: border-box;
-    //     }
-    // }
+    .control-edit();
 
     &-multiplerow {
         height: 70px;
@@ -29,36 +12,32 @@
     }
 
     &-disabled {
-        border-color: @border-disabled !important;
+        .control-disabled();
+    }
+
+    &-show {
+        .control-show();
     }
 
     &-text {
         width: 100%;
+        height: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 0 8px;
+        .bri-scrollbar6();
 
         .DshTags {
-            max-width: 100%;
             display: flex;
-            .ivu-tag {
-                display: flex;
-                height: 24px;
-                .ivu-tag-text {
-                    .dsh-ellipsis();
-                }
-                .ivu-icon {
-                    line-height: 22px;
-                }
-            }
+            white-space: nowrap;
         }
     }
-    
+
     &-nodata {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        color: #b7b7b7;
+        .control-notext();
+        padding: 0 7px;
     }
 }

package/src/styles/components/small/DshDropdown.less

@@ -1,6 +1,6 @@
 .DshDropdown {
     &-rel {
-        color: #aaaaaa!important;
+        color: @contentColor;
         cursor: pointer;
     }
 
@@ -18,21 +18,19 @@
             overflow: auto;
 
             .list {
-                .item {
-                    padding: 7px 16px 5px 10px;
-                    color: #979797;
+                .list-item {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    
+                    border-radius: @borderRadius;
+                    padding: 9px 8px;
                     &:hover {
-                        background-color: #FFF;
+                        background-color: @theme-focus;
                         color: @themeColor;
                     }
         
                     &-disabled {
-                        background-color: #f5f5f5!important;
-                        color: #979797!important;
+                        color: @textColor-disabled
                     }
                     &-icon {
                         margin-right: 3px;
@@ -58,4 +56,9 @@
             }
         }
     }
+}
+.ivu-select-dropdown {
+    border: 0.5px solid rgba(229,229,229,1);
+    box-shadow: 0 3px 14px 2px rgba(0,0,0,0.05), 0 8px 10px 1px rgba(0,0,0,0.06), 0 5px 5px -3px rgba(0,0,0,0.1);
+    padding: 8px;
 }

package/src/styles/components/small/DshTitle.less

@@ -3,11 +3,8 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    &-icon {
-        color: #666;
-    }
     &-name {
-        margin-left: 10px;
+        margin-left: 8px;
         font-size: @smallTitleSize;
     }
 }

package/src/styles/components/unit/DshFormItem.less

@@ -1,5 +1,5 @@
 .DshFormItem {
-    margin: 3px 6px;
+    margin: 5px 6px;
     padding: 3px 10px;
     overflow: hidden;
 
@@ -41,9 +41,13 @@
         }
 
         &-name {
-            color: @contentColor;
             font-size: @textSize;
-
+            &-edit {
+                color: @textColor;
+            }
+            &-show {
+                color: @contentColor
+            }
             &-sign {
                 #dsh-sign-change();
             }
@@ -115,8 +119,6 @@
         }
     }
 
-
-
     .ivu-tooltip {
         display: flex;
     }