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         .i-sdc-designer-sidebar-section-content-item-service-cat {
  71                 border: none;
  72                 background: transparent;
  73                 text-align: left;
  74                 padding: 0;
  75         }
  76     }
  77
  78     .sdc-asset-creation-info {
  79         .n_12_r;
  80         float: right;
  81         margin: 8px 20px 0 0;
  82     }
  83
  84     .w-sdc-main-right-container {
  85
  86         padding: 0px 0px 0px 0px;
  87         background-color: @main_color_p;
  88         //z-index: 1;
  89
  90         .sdc-workspace-top-bar {
  91             height: @action_nav_height;
  92             padding: 12px 10px 0px 50px;
  93             border-bottom: 1px solid @main_color_o;
  94             display: flex;
  95             justify-content: space-between;
  96             white-space: nowrap;
  97             overflow-x: auto;
  98             overflow-y: hidden;
  99
 100             .version-container {
 101
 102             }
 103
 104             .progress-container {
 105                 flex-grow: 4;
 106                 z-index: 1;
 107                 display: inline-block;
 108
 109                 .general-view-top-progress {
 110                     width: 30%;
 111                     margin: 0 auto;
 112                     min-width: 140px;
 113                 }
 114             }
 115
 116             .not-latest {
 117                 position: absolute;
 118                 left: 24px;
 119                 top: 20px;
 120                 .sprite-new;
 121                 .asdc-warning;
 122                 display: inline-block;
 123             }
 124
 125             .sdc-workspace-top-bar-buttons {
 126
 127                 > button, > span:not(.delimiter) {
 128                     margin-right: 10px;
 129                     vertical-align: middle;
 130                     .hand;
 131
 132                     &.sprite-new {
 133                         text-indent: 100%;
 134                     }
 135                     &.disabled, &:hover.disabled {
 136                         pointer-events: none;
 137                     }
 138                 }
 139                 .delimiter {
 140                     height: 32px;
 141                     width: 1px;
 142                     background-color: @main_color_o;
 143                     display: inline-block;
 144                     vertical-align: middle;
 145                     margin-right: 20px;
 146                 }
 147                 display: inline-block;
 148
 149             }
 150
 151             .archive-state-label {
 152                 padding: 7px 0 0 10px;
 153                 margin: 2px 0 7px 10px;
 154                 border-left: 1px solid @main_color_o;
 155                 line-height: 15px;
 156                 font-family: @font-opensans-bold;
 157                 color: @main_color_m;
 158                 font-size:12px;
 159                 display: inline-block;
 160             }
 161
 162             .lifecycle-state {
 163                 padding: 7px 0 0 10px;
 164                 margin: 2px 0 7px 10px;
 165                 border-left: 1px solid @main_color_o;
 166                 line-height: 15px;
 167                 font-family: @font-opensans-bold;
 168                 color: @main_color_m;
 169                 font-size:12px;
 170                 display: inline-block;
 171
 172                 .lifecycle-state-icon {
 173                     .sprite-new;
 174                 }
 175                 .lifecycle-state-text {
 176
 177                     font-weight: bold;
 178                     text-transform: uppercase;
 179                     vertical-align: top;
 180                     padding: 3px;
 181                 }
 182             }
 183
 184             .version-selector {
 185                 // float:left;
 186                 background-color: transparent;
 187                 border: none;
 188                 margin-top: 6px;
 189                 display: inline-block;
 190             }
 191         }
 192         .workspace-tab-title {
 193             height: 110px;
 194             padding-left: 100px;
 195             line-height: 110px;
 196             .f-type ._28;
 197         }
 198         &.composition, &.deployment{
 199             .w-sdc-main-container-body-content {
 200                 height: 100%;
 201             }
 202
 203             .w-sdc-main-container-body-content-wrapper {
 204                 height: 100%;
 205                 overflow:hidden;
 206             }
 207         }
 208         .w-sdc-main-container-body-content {
 209             // height:calc(~'100% - @{action_nav_height} - @{tab_title}');
 210             align-items: center;
 211             padding: 0 100px 20px 100px;
 212             &.third-party {
 213                 text-align: left;
 214                 padding: 0;
 215                 position: absolute;
 216                 top: @action_nav_height + @tab_title;
 217                 left: 0;
 218                 right: 0;
 219                 bottom: 0;
 220             }
 221         }
 222         .w-sdc-main-container-body-content-wrapper {
 223             overflow: auto;
 224             height: calc(~'100% - @{action_nav_height}');
 225             .w-sdc-main-container-body-content-header {
 226                 display: flex;
 227                 .workspace-tab-title {
 228                     flex-grow: 1;
 229                 }
 230                 .w-sdc-main-container-body-content-action-buttons {
 231                     margin:72px 100px 0 0;
 232                     > * {
 233                         display: inline-block;
 234                         vertical-align: middle;
 235                     }
 236                     .revert-btn {
 237                         text-indent: 100%;
 238                     }
 239                     .save-btn {
 240                         text-indent: 100%;
 241                     }
 242                 }
 243             }
 244         }
 245     }
 246 }
 247 // Fix till we remove everything to angular5 and fix all workspace style
 248 .composition{
 249     .sdc-workspace-container{
 250         .w-sdc-main-container{
 251             .w-sdc-main-right-container{
 252                 left:0;
 253                 //overflow-y: scroll;
 254                 .sdc-workspace-top-bar {
 255                     position: absolute;
 256                     left: 245px;
 257                     right: 0;
 258                     z-index: 1;
 259                     .not-latest{
 260                         left: 270px;
 261                     }
 262                 }
 263                 .w-sdc-main-container-body-content{
 264                     padding: 0 0 0 0;
 265                 }
 266
 267                 > div:first-child{
 268                     padding: 0;
 269                 }
 270             }
 271         }
 272     }
 273 }
 274
 275 .deployment {
 276
 277     .sdc-workspace-container{
 278         .w-sdc-main-container{
 279             .w-sdc-main-right-container{
 280                 left:0;
 281                 //overflow-y: scroll;
 282                 .sdc-workspace-top-bar {
 283                     position: absolute;
 284                     left: 245px;
 285                     right: 0;
 286                     z-index: 1;
 287                     .not-latest{
 288                         left: 270px;
 289                     }
 290                 }
 291
 292                 > div:first-child{
 293                     padding: 0;
 294                 }
 295                 .w-sdc-main-container-body-content-wrapper {
 296                     padding: 0px;
 297                 }
 298             }
 299         }
 300     }
 301 }