ocpview-plus 0.0.1

package/src/styles/components/approval.less

@@ -0,0 +1,136 @@
+.efutureapproval {
+    .ivu-drawer-header{
+        padding-left: 34px;
+        background-color:@input-disabled-bg !important;
+        .ivu-drawer-header-inner{
+            font-size: 18px;
+        }
+    }
+    .ivu-drawer-body{
+        padding: 0 34px;
+        display: flex;
+        flex-direction: column;
+    }
+    .drawer-box{
+        flex:1;
+        overflow-y: auto;
+    }
+    .work-head{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 0;
+    }
+    .title{
+        border-bottom: 1px solid @boder-color;
+        padding-bottom:16px;
+        .text{
+            font-size:16px;
+            padding-left: 10px;
+            border-left: 4px solid @primary-color;
+        }
+    }
+    .content{
+        padding:15px 0 60px;
+        // flex:1;
+        // overflow-y: auto;
+        .log-list{
+            display: flex;
+            position: relative;
+            .line-wrap{
+                position: absolute;
+                left: 21px;
+                width: 1px;
+                height: 100%;
+                padding-top: 42px;
+            }
+            .left, .user{
+                width:42px;
+                height:42px;
+                color:#fff;
+                line-height: 42px;
+                text-align: center;
+                margin-right:18px;
+                border-radius: 50%;
+                background-color: @primary-color;
+                position: relative;
+                .icon-wrap{
+                    position: absolute;
+                    right:-2px;
+                    bottom:-2px;
+                    width:16px;
+                    height: 16px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background-color: #fff;
+                    border-radius: 50%;
+                }
+            }
+            .right{
+                flex:1;
+                .top{
+                    display: flex;
+                    justify-content: space-between;
+                    margin: 10px 0 14px;
+                    .status{
+                        position: relative;
+                        color:@text-grey;
+                        padding-left: 14px;
+                        &::before{
+                            position: absolute;
+                            left: 0;
+                            top:50%;
+                            width:4px;
+                            height:4px;
+                            content: '';
+                            border-radius: 50%;
+                            background-color: @text-grey;
+                            transform: translateY(-50%);
+                            &.sucess{
+                                color:@success-color;
+                            }
+                            &.wranging{
+                                color:@warning-color;
+                            }
+                            &.err{
+                                color:@primary-color;
+                            }
+                        }
+                    }
+                }
+                .desc{
+                    margin-top:12px;
+                    padding-bottom: 40px;
+                }
+                .card{
+                    border-radius: 4px;
+                    background-color: @input-disabled-bg;
+                    padding: 0 20px;
+                    .title{
+                        height: 38px;
+                        line-height: 38px;
+                        border-bottom: 1px solid @boder-color;;
+                    }
+                    .main{
+                        padding: 14px 0;
+                        display: flex;
+                        .user-list{
+                            text-align: center;
+                            .user{
+                                margin-bottom: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .footer{
+        padding-top: 10px;
+        border-top: 1px solid @boder-color;
+    }
+    .btnbar{
+        padding:30px 0;
+    }
+}

package/src/styles/components/button.less

@@ -0,0 +1,208 @@
+@btn-prefix-cls: ~"@{css-prefix}btn";
+
+.@{btn-prefix-cls} {
+    .btn;
+    .btn-default;
+    &-long{
+        width: 100%;
+    }
+
+    & > .ivu-icon + span, & > span + .ivu-icon{
+        margin-left: 4px;
+        vertical-align:middle;
+    }
+
+    .ivu-icon{
+        font-size: @btn-icon-size;
+        vertical-align:middle;
+    }
+
+
+    &-primary {
+        .btn-primary;
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
+            border-right-color: @btn-group-border;
+            border-left-color: @btn-group-border;
+        }
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
+            &:not(:last-child) {
+                border-right-color: @btn-group-border;
+                &[disabled] {
+                    border-right-color: @btn-default-border;
+                }
+            }
+        }
+
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
+            border-left-color: @btn-group-border;
+            &[disabled] {
+                border-left-color: @btn-default-border;
+            }
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
+            border-top-color: @btn-group-border;
+            border-bottom-color: @btn-group-border;
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:first-child {
+            &:not(:last-child) {
+                border-bottom-color: @btn-group-border;
+                &[disabled] {
+                    border-top-color: @btn-default-border;
+                }
+            }
+        }
+
+        .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
+        .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
+            border-top-color: @btn-group-border;
+            &[disabled] {
+                border-bottom-color: @btn-default-border;
+            }
+        }
+    }
+
+    //&-ghost {
+    //    .btn-ghost;
+    //}
+
+    &-dashed{
+        .btn-dashed;
+    }
+
+    &-text{
+        .btn-text;
+    }
+
+    &-success {
+        .btn-color(@success-color);
+    }
+
+    &-warning {
+        .btn-color(@warning-color);
+    }
+
+    &-error {
+        .btn-color(@error-color);
+    }
+
+    &-info {
+        .btn-color(@info-color);
+    }
+    
+    &-circle,
+    &-circle-outline {
+        .btn-circle(@btn-prefix-cls);
+    }
+
+    &:before {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        bottom: -1px;
+        right: -1px;
+        background: #fff;
+        opacity: 0.35;
+        content: '';
+        border-radius: inherit;
+        z-index: 1;
+        transition: opacity @transition-time;
+        pointer-events: none;
+        display: none;
+    }
+
+    &&-loading {
+        pointer-events: none;
+        position: relative;
+
+        &:before {
+            display: block;
+        }
+    }
+
+    &-group {
+        .btn-group(@btn-prefix-cls);
+    }
+
+    &-group-vertical {
+        .btn-group-vertical(@btn-prefix-cls);
+    }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
+
+    &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+        border-color: @btn-disable-border;
+    }
+    &-ghost&-text[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+    }
+}
+
+a.@{btn-prefix-cls} {
+    padding-top: 0.1px;
+    line-height: @btn-height-base - 2px;
+
+    &-large {
+        line-height: @btn-height-large - 2px;
+    }
+    &-small {
+        line-height: @btn-height-small - 2px;
+    }
+}

package/src/styles/components/card.less

@@ -0,0 +1,51 @@
+@card-prefix-cls: ~"@{css-prefix}card";
+
+.@{card-prefix-cls}{
+    display: block;
+    background: #fff;
+    border-radius: @border-radius-small;
+    font-size: @font-size-base;
+    position: relative;
+    //overflow: hidden;
+    transition: all @transition-time @ease-in-out;
+
+    &-bordered {
+        border: 1px solid @border-color-base;
+        border-color: @border-color-split;
+    }
+
+    &-shadow{
+        box-shadow: @shadow-card;
+    }
+
+    &:hover {
+        box-shadow: @shadow-base;
+        border-color: #eee;
+    }
+    &&-dis-hover:hover{
+        box-shadow: none;
+        border-color: transparent;
+    }
+
+    &&-dis-hover&-bordered:hover{
+        border-color: @border-color-split;
+    }
+
+    &&-shadow:hover{
+        box-shadow: @shadow-card;
+    }
+
+    &-head {
+        .content-header(@card-header-border,@card-header-padding);
+    }
+
+    &-extra {
+        position: absolute;
+        right: 16px;
+        top: 14px;
+    }
+
+    &-body {
+        padding: 16px 30px;
+    }
+}

package/src/styles/components/content.less

@@ -0,0 +1,38 @@
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.content-header(@content-header-border:1px, @content-header-padding:14px 16px) {
+    border-bottom: @content-header-border solid @border-color-split;
+    padding: @content-header-padding;
+    line-height: 1;
+
+    p,
+    &-inner
+    {
+        display: inline-block;
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        font-size: @font-size-large;
+        color: @title-color;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    p i, p span{
+        //vertical-align: middle;
+    }
+}
+
+.content-close(@top: 0, @icon-font-size: 22px, @right:8px,@iconTop:8px) {
+    font-size: @font-size-small;
+    position: absolute;
+    right: @right;
+    top: @iconTop;
+    overflow: hidden;
+    cursor: pointer;
+
+    .@{icon-prefix-cls}-ios-close {
+        .close-base(@top, @icon-font-size);
+    }
+}