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

   1 .sdc-dashboard-container {
   2     .tlv-loader {
   3         top: -110px;
   4         left: 80px;
   5     }
   6     .sdc-hide-popover {
   7         .popover {
   8             display: none !important;
   9         }
  10     }
  11 }
  12
  13 .w-sdc-left-sidebar-nav {
  14     margin-top: 46px;
  15 }
  16
  17 .w-sdc-main-right-container-element {
  18     float: left;
  19     height: 217px;
  20     width: 217px;
  21     margin: 10px;
  22     position: relative;
  23 }
  24
  25 .w-sdc-main-right-container-element-details-container {
  26     position: absolute;
  27     top: 165px;
  28     left: 50px;
  29 }
  30
  31 .w-sdc-main-right-container-element-name {
  32     font-weight: bold;
  33 }
  34
  35 .w-sdc-main-right-container-element-owner {
  36
  37 }
  38
  39 //////////////////////////////Cards////////////////////
  40 .w-sdc-dashboard-card-new {
  41     border: 2px dashed @color_m;
  42     .border-radius(2px);
  43     cursor: pointer;
  44     display: inline-block;
  45     height: 198px;
  46     margin: 11px;
  47     position: relative;
  48     vertical-align: middle;
  49     width: 202px;
  50 }
  51
  52 .w-sdc-dashboard-card-new-content {
  53     display: flex;
  54     justify-content: center;
  55     align-items: center;
  56     flex-direction: column;
  57     height: 100%;
  58 }
  59
  60 .w-sdc-dashboard-card-new-content-plus {
  61     .sprite-new;
  62     .add-icon;
  63     position: relative;
  64     margin-bottom: 20px;
  65
  66     &:after {
  67         .n_14_m;
  68         content: 'ADD';
  69         position: absolute;
  70         top: 25px;
  71         left: -3px;
  72         vertical-align: -50%;
  73     }
  74 }
  75
  76 .w-sdc-dashboard-card-import-content-plus {
  77     .sprite-new;
  78     .import-icon;
  79     position: relative;
  80     margin-bottom: 20px;
  81
  82     &:after {
  83         .n_14_m;
  84         content: 'IMPORT';
  85         position: absolute;
  86         top: 25px;
  87         left: -16px;
  88         vertical-align: -50%;
  89     }
  90 }
  91
  92 .sdc-dashboard-create-element-container,
  93 .sdc-dashboard-import-element-container {
  94
  95     width: 140px;
  96
  97     .tlv-btn.import-dcae {
  98         padding: 0;
  99     }
 100
 101     .tlv-btn {
 102         position: relative;
 103         width: 100%;
 104         margin-bottom: 10px;
 105
 106         &:last-child {
 107             margin-bottom: 0;
 108         }
 109     }
 110
 111     input[type="file"] {
 112         cursor: inherit;
 113         filter: alpha(opacity=0);
 114         opacity: 0;
 115         position: absolute;
 116         top: 0;
 117         left: 0;
 118         width: 138px;
 119         height: 30px;
 120     }
 121 }
 122
 123 .w-sdc-dashboard-card {
 124     width: 204px;
 125     height: 200px;
 126     background-color:  @main_color_p;
 127     .border-radius(2px);
 128     .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05));
 129     display: inline-block;
 130     margin: 10px;
 131     position: relative;
 132     vertical-align: middle;
 133     border: solid 1px @main_color_p;
 134
 135     &:hover {
 136         border: solid 1px @main_color_o;
 137         .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
 138     }
 139
 140     &:active {
 141         border: solid 1px @main_color_c;
 142         .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
 143     }
 144 }
 145
 146 .w-sdc-dashboard-card-body {
 147     .hand;
 148     border-bottom: 1px solid @color_j;
 149     height: 155px;
 150     position: relative;
 151     text-align: center;
 152 }
 153
 154 .w-sdc-dashboard-card-description {
 155     .c_3;
 156     .hand;
 157     background-color: rgba(57, 73, 84, 0.9);
 158     border-radius: 4px 4px 0 0;
 159     bottom: 0;
 160     left: 0;
 161     opacity: 0;
 162     padding: 10px;
 163     position: absolute;
 164     right: 0;
 165     text-align: left;
 166     top: 0;
 167     word-wrap: break-word;
 168     z-index: 4;
 169     min-height: 100px;
 170     overflow: hidden;
 171 }
 172
 173
 174 .w-sdc-dashboard-card-schema {
 175     margin-top: 30px;
 176 }
 177
 178 .w-sdc-dashboard-card-edit {
 179     .hand;
 180     position: absolute;
 181     right: 13px;
 182     top: 15px;
 183     z-index: 2;
 184 }
 185
 186 .w-sdc-dashboard-card-footer {
 187     padding: 3px 12px 10px 12px;
 188     position: relative;
 189 }
 190
 191 .w-sdc-dashboard-card-avatar {
 192     .uppercase;
 193     border-radius: 50%;
 194     display: inline-block;
 195     position: absolute;
 196     left: -6px;
 197     text-align: center;
 198     top: -6px;
 199
 200     span {
 201
 202         background-color: @main_color_p;
 203         .border-radius(15px);
 204         color: @color_c;
 205         content: '';
 206         height: 30px;
 207         text-align: center;
 208         display: block;
 209         border: solid 2px #ECEFF3;
 210         padding: 3px 10px 2px 10px;
 211
 212         &.VF {
 213             .j_14_m;
 214             &::before {
 215                 content: 'VF';
 216             }
 217         }
 218
 219         &.VFC {
 220             .j_14_m;
 221             &::before {
 222                 content: 'VFC';
 223             }
 224         }
 225
 226         &.CP {
 227             .j_14_m;
 228             &::before {
 229                 content: 'CP';
 230             }
 231         }
 232
 233         &.VL {
 234             .j_14_m;
 235             &::before {
 236                 content: 'VL';
 237             }
 238         }
 239
 240         &.SERVICE {
 241             .c_14_m;
 242             &::before {
 243                 content: 'S';
 244             }
 245         }
 246
 247         &.green {
 248             .d_12;
 249             &::before {
 250                 content: 'R';
 251             }
 252         }
 253         &.red {
 254             .r_12;
 255             &::before {
 256                 content: 'S';
 257             }
 258         }
 259         &.dblack {
 260             .s_12;
 261             &::before {
 262                 content: 'P';
 263             }
 264         }
 265     }
 266 }
 267
 268 .w-sdc-dashboard-card-info {
 269     display: inline-block;
 270     vertical-align: middle;
 271     max-width: 165px;
 272     overflow: hidden;
 273     text-overflow: ellipsis;
 274     white-space: nowrap;
 275 }
 276
 277 .w-sdc-dashboard-card-info-name-container{
 278     position: absolute;
 279     bottom: 0;
 280     left: 0;
 281     margin: 0 0 2px 10px;
 282 }
 283 .w-sdc-dashboard-card-info-name {
 284     .m_14_m;
 285     display: inline-block;
 286     vertical-align: middle;
 287     max-width: 165px;
 288     overflow: hidden;
 289     text-overflow: ellipsis;
 290     white-space: nowrap;
 291 }
 292
 293 .w-sdc-dashboard-card-info-lifecycleState {
 294     .m_13_m;
 295     display: inline-block;
 296     vertical-align: middle;
 297     max-width: 165px;
 298     overflow: hidden;
 299     text-overflow: ellipsis;
 300     white-space: nowrap;
 301 }
 302
 303 .w-sdc-dashboard-card-info-user {
 304     .n_13_r;
 305     line-height: 18px;
 306     overflow: hidden;
 307     text-overflow: ellipsis;
 308     white-space: nowrap;
 309     width: 100%;
 310 }
 311
 312 .w-sdc-dashboard-card-menu-button {
 313     display: inline-block;
 314     padding: 12px 0 0 10px;
 315     position: absolute;
 316     right: 12px;
 317     top: 8px;
 318     border-left: solid 1px @color_k;
 319     height: 42px;
 320
 321     &:hover {
 322         .w-sdc-dashboard-card-menu {
 323             display: block;
 324         }
 325     }
 326 }
 327
 328 .w-sdc-dashboard-card-menu {
 329     .bg_c;
 330     border-radius: 0 0 4px 4px;
 331     border-top: 3px solid @color_a;
 332     box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
 333     color: @color_s;
 334     display: none;
 335     min-height: 30px;
 336     padding: 9px 0;
 337     position: absolute;
 338     right: -27px;
 339     width: 208px;
 340     z-index: 9;
 341     max-height: 164px;
 342
 343     &::before {
 344         //TODO: Missing image for small blue triangle.
 345         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
 346         content: '';
 347         display: block;
 348         height: 21px;
 349         position: absolute;
 350         right: 24px;
 351         top: -24px;
 352         width: 184px;
 353         background-repeat: no-repeat;
 354         background-position: 175px 16px;
 355     }
 356 }
 357
 358 .i-sdc-dashboard-card-menu-item {
 359     .hand;
 360     line-height: 24px;
 361     padding: 0 10px;
 362     &:hover { .a_7; }
 363 }
 364
 365 .w-sdc-dashboard-card-info-lifecycleState-icon{
 366     position:absolute;
 367     bottom:18px;
 368     right:10px;
 369 }
 370
 371 // Same for dashboard and catalog view.
 372 .w-sdc-dashboard-card-schema-image {
 373     position: absolute;
 374     top: 41%;
 375
 376     //TODO: Israel - remove this after getting the services sprite.
 377     height: 45px;
 378     width: 53px;
 379     background-repeat: no-repeat;
 380
 381     // Center the icon vertical and horizontal.
 382     margin: auto;
 383     left: 0;
 384     right: 0;
 385     top: -10px;
 386     bottom: 0;
 387 }
 388
 389 /* dashboard card main icons */
 390 .w-sdc-dashboard-card-schema-image.service      { .s-sdc-service }
 391 .w-sdc-dashboard-card-schema-image.resource     { .s-sdc-resource }
 392
 393 /* dashboard card statuses icons */
 394 .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN        { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN; }
 395 .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT       { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT; }
 396 .w-sdc-dashboard-card-edit.CERTIFIED                    { .sprite; .s-sdc-state.CERTIFIED; }
 397 .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION      { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION; }
 398 .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS    { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS; }
 399 .w-sdc-dashboard-card-edit.DISTRIBUTED                  { .sprite; .s-sdc-state.DISTRIBUTED; }
 400
 401 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN   { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.green; }
 402 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT  { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; }
 403 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFIED               { .sprite; .s-sdc-state.CERTIFIED.green; }
 404 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.green; }
 405 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.green; }
 406 .w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.DISTRIBUTED             { .sprite; .s-sdc-state.DISTRIBUTED.green; }
 407
 408 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN     { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.red; }
 409 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT    { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; }
 410 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFIED                 { .sprite; .s-sdc-state.CERTIFIED.red; }
 411 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION   { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.red; }
 412 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.red; }
 413 .w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.DISTRIBUTED               { .sprite; .s-sdc-state.DISTRIBUTED.red; }