catalog-ui/src/app/view-models/workspace/workspace.less

   1 @import '../../../assets/styles/variables.less';
   2
   3 .sdc-workspace-container {
   4     .bg_p;
   5
   6     .add-btn {
   7         .f-color.a;
   8         .f-type._12_m;
   9         .hand;
  10         float: right;
  11         margin-bottom: 15px;
  12
  13         &:before {
  14             .sprite-new;
  15             .plus-icon;
  16             margin-right: 5px;
  17             content: "";
  18
  19         }
  20         &:hover {
  21             .f-color.b;
  22             &:before {
  23                 .sprite-new;
  24                 .plus-icon-hover;
  25             }
  26         }
  27
  28     }
  29     .w-sdc-left-sidebar {
  30         padding: 0px;
  31         background-color: @tlv_color_t;
  32         box-shadow: none;
  33         z-index: 2;
  34         border-right: 1px solid @main_color_o;
  35         .menu-header{
  36             border-bottom: 1px solid @main_color_o;
  37             height: 53px;
  38             .f-type._16_m;
  39             font-weight: 700;
  40             line-height: 53px;
  41             padding-left: 40px;
  42             padding-right: 10px;
  43             width: 100%;
  44             overflow: hidden;
  45             text-overflow: ellipsis;
  46             display: inline-block;
  47             white-space: nowrap;
  48         }
  49         .i-sdc-designer-sidebar-section-content-item{
  50             .f-type._13_m;
  51             color: @main_color_m;
  52             margin-left: 20px;
  53             padding-left: 20px;
  54             margin-top: 20px;
  55             height: 17px;
  56             .hand;
  57             &:hover{
  58                 color: @func_color_s;
  59                 font-weight: 600;
  60             }
  61             &.selected{
  62                 border-left: 4px solid @main_color_a;
  63                 color: @main_color_a;
  64                 margin-left: 18px;
  65                 padding-left: 18px;
  66                 font-weight: 600;
  67
  68             }
  69         }
  70     }
  71
  72     .sdc-asset-creation-info {
  73         .n_12_r;
  74         float: right;
  75         margin: 8px 20px 0 0;
  76     }
  77
  78     .w-sdc-main-right-container {
  79
  80         padding: 0px 0px 0px 0px;
  81         background-color: @main_color_p;
  82         //z-index: 1;
  83
  84         .sdc-workspace-top-bar {
  85             height: @action_nav_height;
  86             padding: 12px 10px 0px 50px;
  87             border-bottom: 1px solid @main_color_o;
  88             display: flex;
  89             justify-content: space-between;
  90
  91             .version-container {
  92
  93             }
  94
  95             .progress-container {
  96                 flex-grow: 4;
  97                 z-index: 1;
  98
  99                 .general-view-top-progress {
 100                     width: 30%;
 101                     margin: 0 auto;
 102                     min-width: 200px;
 103                 }
 104             }
 105
 106             .not-latest {
 107                 position: absolute;
 108                 left: 24px;
 109                 top: 20px;
 110                 .sprite-new;
 111                 .asdc-warning;
 112             }
 113
 114             .sdc-workspace-top-bar-buttons {
 115
 116                 > button, > span:not(.delimiter) {
 117                     margin-right: 10px;
 118                     vertical-align: middle;
 119                     .hand;
 120
 121                     &.sprite-new {
 122                         text-indent: 100%;
 123                     }
 124                     &.disabled, &:hover.disabled {
 125                         pointer-events: none;
 126                     }
 127                 }
 128                 .delimiter {
 129                     height: 32px;
 130                     width: 1px;
 131                     background-color: #959595;
 132                     display: inline-block;
 133                     vertical-align: middle;
 134                     margin-right: 20px;
 135                 }
 136
 137             }
 138
 139             .lifecycle-state {
 140                 padding: 7px 0 0 10px;
 141                 margin: 2px 0 7px 10px;
 142                 border-left: 1px solid @main_color_o;
 143                 line-height: 15px;
 144                 font-family: @font-opensans-bold;
 145                 color: @main_color_m;
 146                 font-size:12px;
 147
 148                 .lifecycle-state-icon {
 149                     .sprite-new;
 150                 }
 151                 .lifecycle-state-text {
 152
 153                     font-weight: bold;
 154                     text-transform: uppercase;
 155                     vertical-align: top;
 156                     padding: 3px;
 157                 }
 158             }
 159
 160             .version-selector {
 161                 // float:left;
 162                 background-color: transparent;
 163                 border: none;
 164                 margin-top: 6px;
 165             }
 166         }
 167         .tab-title{
 168             height: 110px;
 169             padding-left: 100px;
 170             line-height: 110px;
 171             .f-type ._28;
 172         }
 173         &.composition, &.deployment{
 174             .w-sdc-main-container-body-content {
 175                 height: 100%;
 176             }
 177         }
 178         .w-sdc-main-container-body-content {
 179             // height:calc(~'100% - @{action_nav_height} - @{tab_title}');
 180             align-items: center;
 181             padding: 0 100px 20px 100px;
 182             &.third-party {
 183                 text-align: left;
 184                 padding: 0;
 185                 position: absolute;
 186                 top: @action_nav_height + @tab_title;
 187                 left: 0;
 188                 right: 0;
 189                 bottom: 0;
 190             }
 191         }
 192         .w-sdc-main-container-body-content-wrapper {
 193             overflow: auto;
 194             height: calc(~'100% - @{action_nav_height}')
 195         }
 196     }
 197 }
 198