bri-components 1.0.0

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

@@ -0,0 +1,278 @@
+.briGantt {
+    width: 100%;
+    height: 100%;
+    color: #656565;
+    font-size: @tipTextSize;
+    line-height: 28px;
+    position: relative;
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+    &-top {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        justify-content: space-between;
+        position: absolute;
+    }
+    &-bottom {
+        width: 100%;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        margin-top: 38px;
+        background: @white;
+        &-title {
+            text-align: center;
+            border: 1px solid #EDEDED;
+            border-bottom: none;
+            line-height: 27px;
+            // margin: 10px 14px 0 14px;
+        }
+        &-content {
+            flex: 1;
+            display: flex;
+            overflow: auto;
+        }
+    }
+    // 表格渲染
+    &-tableBox {
+       width:100%;
+       text-align:center;
+       border-collapse:collapse;
+       border-spacing:0;
+       td, th {
+            word-break: break-all;
+            word-wrap:break-word;
+            min-width: 50px;
+            height: 29px;
+            text-align: center;
+            // overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 200px;
+        }
+        .briGantt-chart-td {
+            height: 40px;
+        }
+        .briGantt-table-th-now{
+            color: @themeColor;
+        }
+    }
+    &-table {
+        &-tr {
+            border: 1px solid #EDEDED;
+        }
+        &-tr:nth-child(2n) {
+            background: rgba(244,246,249,0.5119);
+        }
+        &-th {
+            // background: @ghostBg;
+            font-weight:400;
+            color:rgba(101,101,101,1);
+        }
+        &-td {
+            border-right: 1px solid #EDEDED;
+            font-weight:400;
+            color:rgba(111,111,111,1);
+            &-main {
+                height: 28px;
+                background:rgba(238,238,238,0.5);
+                border:1px solid #f6f6f6;
+            }
+        }
+        &-td:last-of-type {
+            border: none;
+        }
+    }
+    &-chart {
+        &-td {
+            overflow: visible;
+            &-greyLine {
+                border-top: 1px dashed #D5D5D5;
+            }
+            &-main {
+                display: flex;
+                width: 100%;
+                height: 100%;
+                align-items: center;
+                justify-content: center;
+                &-left, &-right {
+                    height: 100%;
+                    overflow: hidden;
+                }
+                &-right-auto {
+                    height: 100%;
+                    overflow: hidden;
+                    flex: 1;
+                }
+                &-center {
+                    height: 30px;
+                    border-radius: 4px;
+                    background: #f6f6f6;
+                    z-index: 1;
+                    min-width: 2px;
+                    .ms-ellipsis {
+                        border-radius: 4px;
+                        height: 100%;
+                        color: @white;
+                        text-align: left;
+                        padding-left: 10px;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                    &-tooltip {
+                        white-space: normal;
+                        &-select {
+                            height: 5px;
+                            display: inline-block;
+                            vertical-align: middle;
+                            width: 5px;
+                            border-radius: 50%;
+                        }
+                    }
+                }
+                &-line {
+                    width: 100%;
+                    border-bottom: 1px solid #D5D5D5;
+                    font-weight:400;
+                    color:rgba(74,74,74,1);
+                    padding: 0 10px;
+                    transform: translateY(15px);
+                    text-align: left;
+                    height: 29px;
+                    font-size: @tipTextSize;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    &-circle {
+                        display: block;
+                        width: 10px;
+                        height: 100%;
+                        min-width: 10px;
+                        .circle {
+                            display: block;
+                            width: 10px;
+                            height: 10px;
+                            border-radius: 50%;
+                            min-width: 10px;
+                            margin-top: 38px;
+                            background: #D5D5D5;
+                        }
+                    }
+                };
+            }
+        }
+    }
+    // 蓝色虚线
+    &-line-now {
+        z-index: 9;
+        text-align: center;
+        background: transparent;
+        &::before {
+            content: "";
+            border-left: 1px dashed @themeColor;
+            position: absolute;
+            top: 25px;
+            bottom: 0px;
+            z-index: 9;
+        }
+        &::after {
+            content: "";
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+            background: @themeColor;
+            position: absolute;
+            top: 25px;
+            margin-left: -3px;
+        }
+    }
+    // 时间轴
+    &-timer {
+        align-items: center;
+        position: relative;
+        float: right;
+        overflow: hidden;
+        &-main {
+            overflow: auto;
+            flex: 1;
+            height: 100%;
+            position: relative;
+        }
+        &-bg {
+            position: absolute;
+            background: @ghostBg;
+            left: 0px;
+            right: 0px;
+            height: 28px;
+            border-radius: 28px;
+        }
+        &-icon {
+            background: @ghostBg;
+            color: #fff;
+            width: 28px;
+            height: 28px;
+            min-width: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            z-index: 2;
+            top: 0px;
+            background: #F2F8FF;
+            i {
+                display: block;
+                width: 16px;
+                height: 16px;
+                border-radius: 16px;
+                font-size: 13px;
+                background: @themeColor;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            &-left {
+                left: -1px;
+                border-top-left-radius: 28px;
+                border-bottom-left-radius: 28px;
+            }
+            &-right {
+                right: -1px;
+                border-top-right-radius: 28px;
+                border-bottom-right-radius: 28px;
+            }
+        }
+    }
+    // 区域映射
+    &-data {
+        flex: 1;
+        overflow: auto;
+        position: relative;
+        &-table {
+        }
+        &-chart {
+        }
+        &::-webkit-scrollbar {
+            height: 0px;
+        }
+    }
+    // table 列表映射
+    &-tabledata {
+        overflow-y: auto;
+        border-right: none;
+    }
+    // 滚动条设置
+    &-scrollbar {
+        width: 100%;
+        &-main {
+            float: right;
+            overflow: auto;
+            div {
+                height: 2px;
+            }
+        }
+
+    }
+}

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

@@ -0,0 +1,36 @@
+.ZLoading {
+    &-fix {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 8;
+        width: 100%;
+        height: 100%;
+
+        .ZLoading-main {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    &-center {
+        width: 100%;
+        height: 100%;
+
+        .ZLoading-main {
+            width: 100%;
+            height: 100%;
+
+            img {
+                width: auto;
+                height: auto;
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .dsh-flex();
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+.Ctooltip {
+    .ivu-tooltip-rel {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,40 @@
+.DshButtons {
+    &-flex {
+        width: 100%;
+        height: 100%;
+        .dsh-flex-row-between-center();
+
+        // 更多
+        .DshButtons-dropdown {
+            margin: 0 15px 0 0;
+            font-size: 16px;
+            font-weight: 400;
+            color: @themeColor;
+
+            &-more {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+
+                &-name {
+
+                }
+            }
+        }
+    }
+
+    &-item {
+        > span {
+            width: 100%;
+            .dsh-ellipsis();
+        }
+
+        &-name {}
+    }
+
+    .ivu-btn-text {
+        background-color: transparent;
+        color: @formFocusBorderColor;
+    }
+}

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

@@ -0,0 +1,64 @@
+.dsh-control-define {
+    height: 32px;
+    padding: 2px 6px;
+    border: 1px solid @formBorderColor;
+    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;
+    //     }
+    // }
+
+    &-multiplerow {
+        height: 70px;
+
+        .dsh-control-define-text {
+            .DshTags {
+                flex-wrap: wrap;
+            }
+        }
+    }
+
+    &-disabled {
+        border-color: @readonlyBorderColor !important;
+    }
+
+    &-text {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .DshTags {
+            max-width: 100%;
+            display: flex;
+            .ivu-tag {
+                display: flex;
+                height: 24px;
+                .ivu-tag-text {
+                    .dsh-ellipsis();
+                }
+                .ivu-icon {
+                    line-height: 22px;
+                }
+            }
+        }
+    }
+    
+    &-nodata {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: #b7b7b7;
+    }
+}

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

@@ -0,0 +1,61 @@
+.DshDropdown {
+    &-rel {
+        color: #aaaaaa!important;
+        cursor: pointer;
+    }
+
+    &-list {
+        &-search {
+            width: 100%;
+            height: 40px;
+            padding: 0px 8px;
+            line-height: 40px;
+        }
+        
+        &-data {
+            width: 100%;
+            // max-height: 300px;
+            overflow: auto;
+
+            .list {
+                .item {
+                    padding: 7px 16px 5px 10px;
+                    color: #979797;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    
+                    &:hover {
+                        background-color: #FFF;
+                        color: @tabTextActiveColor;
+                    }
+        
+                    &-disabled {
+                        background-color: #f5f5f5!important;
+                        color: #979797!important;
+                    }
+                    &-icon {
+                        margin-right: 3px;
+                    }
+                    &-name {
+                        
+                    }
+                }
+        
+                .ivu-dropdown-item-divided:before {
+                    margin: 0px;
+                    // content: '';
+                    // height: 5px;
+                    // display: block;
+                    // background-color: #fff;
+                    // position: relative;
+                    // top: -7px;
+                }
+            }
+
+            .nodata {
+                #dsh-nodata();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+.DshPage {
+    width: 100%;
+    text-align: right;
+    font-size: 14px;
+    color: #666;
+    height: 24px;
+    line-height: 24px;
+    .ivu-page-total{
+        float: left;
+    }
+    .ivu-select-selection{
+        border: 0px !important;
+    }
+    .ivu-page-item-active {
+        a,
+        &:hover a {
+            color: @themeColor!important;
+        }
+    }
+    .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
+    .ivu-select-single .ivu-select-selection,
+    .ivu-page-simple-pager input,
+    .ivu-page-options-elevator input,
+    .ivu-page-item-jump-next,
+    .ivu-page-item-jump-prev,
+    .ivu-page-next,
+    .ivu-page-prev,
+    .ivu-page-total,
+    .ivu-page-item {
+        height: 24px!important;
+        line-height: 24px!important;
+        // background: @white;
+        background: transparent;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
+        height: 24px!important;
+        line-height: 24px!important;
+    }
+    .ivu-page-next,
+    .ivu-page-prev {
+        background: @white;
+        min-width: 26px;
+        border: 1px solid @borderGrey;
+        a {
+            color: #000;
+            font-weight: bold;
+            // font-size: 14px;
+        }
+    }
+    .ivu-page-item {
+        min-width: 24px;
+        &:hover {
+            color: @themeColor;
+        }
+    }
+    .ivu-page-options {
+        margin-left: 4px;
+    }
+    .ivu-select-visible .ivu-select-selection{
+        box-shadow: unset;
+    }
+    .ivu-select-item-selected,
+    .ivu-select-item-selected:hover {
+        color: @themeColor;
+    }
+    .ivu-icon {
+        vertical-align: baseline;
+    }
+
+    &-small,
+    &-simple.ivu-page-simple{
+        a {
+            &:hover {
+                color: @themeColor !important;
+            }
+        }
+        .ivu-page-next,
+        .ivu-page-prev {
+           background: transparent;
+           border-color: transparent;
+            &:hover {
+                border-color: transparent;
+            }
+       }
+    }
+
+    &-small {
+        .ivu-icon {
+           vertical-align: -.125em;
+       }
+    }
+}

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

@@ -0,0 +1,58 @@
+.DshSteps {
+    &-item {
+        cursor: pointer;
+    }
+}
+
+
+.DshSteps {
+    .ivu-steps-vertical {
+        .ivu-steps-item {
+            padding-bottom: 30px;
+            &:last-child {
+                margin-bottom: 0px;
+            }
+
+            .ivu-steps-tail {
+                position: absolute;
+                left: 13px;
+                top: 0;
+                height: 100%;
+                width: 1px;
+                padding: 35px 0 5px 0;
+                & > i {
+                    background-color: #e8eaec;
+                }
+            }
+
+            &.ivu-steps-status-process,
+            &.ivu-steps-status-finish {
+                .ivu-steps-head-inner {
+                    background-color: @themeColor;
+                    border-color: @themeColor;
+                    span,
+                    & > .ivu-steps-icon {
+                        color: #ffffff;
+                    }
+                }
+            }
+
+            &.ivu-steps-status-finish {
+                .ivu-steps-head-inner {
+                    background-color: #ffffff;
+                    border-color: @themeColor;
+                    span,
+                    & > .ivu-steps-icon {
+                        color: @themeColor;
+                    }
+                }
+
+                .ivu-steps-tail {
+                    & > i:after {
+                        background: @themeColor;
+                    }
+                }
+            }
+        }
+    }
+}