vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.scss

   1 .drawing-board-header {
   2   height: 60px;
   3   font-family: OpenSans-Regular;
   4   display: flex;
   5   justify-content: space-between;
   6   font-size: 14px;
   7   box-shadow: 2px 2px 6px #D2D2D2;
   8   color: #191919;
   9   z-index: 1;
  10   position: relative;
  11     [class^="icon-"] {
  12       height: 60px;
  13       width: 60px;
  14       display: flex;
  15       align-items: center;
  16       text-align: center;
  17       color: #5A5A5A;
  18       cursor: pointer;
  19       &:before {
  20         font-size: 18px;
  21         width: 100%;
  22       }
  23       &:hover:before {
  24         color: #009FDB;
  25       }
  26     }
  27   .left-header {
  28       display: flex;
  29       align-items: center;
  30       .icon-back {
  31         justify-content: center;
  32         border-right: 1px solid #EAEAEA;
  33       }
  34       .vid-logo-small{
  35         background: url('../../../../assets/img/vid-logo.jpg') no-repeat;
  36         width: 60px;
  37         height: 60px;
  38       }
  39       .status{
  40         background: url('../../../../assets/img/indesign.svg') no-repeat  center;
  41         width: 24px;
  42         height: 24px;
  43         margin-left: 20px;
  44       }
  45       .header-col {
  46         border-right: 1px solid #d2d2d2;
  47         padding-right: 15px;
  48         margin-left: 15px;
  49         span{
  50           display: block;
  51         }
  52         &:after{
  53           content: "";
  54           background: #D2D2D2;
  55           height: 35px;
  56           width: 1px;
  57         }
  58       }
  59       .service-instance-label {
  60         font-family: OpenSans-Semibold;
  61         font-size: 13px;
  62         color: #5A5A5A;
  63       }
  64       .quantity-instance-label {
  65         font-family: OpenSans-Regular;
  66         font-size: 13px;
  67         color: #5A5A5A;
  68       }
  69
  70       .labelPosition {
  71         margin-top: 4px;
  72         margin-bottom: 6px;
  73         font-size: 12px;
  74       }
  75       .service-instance-name {
  76         font-family: OpenSans-Semibold;
  77         color: #191919;
  78         background-color: white;
  79         font-size: 14px;
  80         &.deleted{
  81           text-decoration: line-through;
  82         }
  83       }
  84       .orch-status-value {
  85         font-family: OpenSans-Regular;
  86         font-size: 14px;
  87         color: #191919;
  88       }
  89       .scale-value {
  90         font-family: OpenSans-Regular;
  91         font-size: 14px;
  92         color: #191919;
  93       }
  94       .status {
  95         font-family: OpenSans-Semibold;
  96         line-height: 14px;
  97         font-size: 14px;
  98         text-align: center;
  99         width: 30px;
 100         margin-left: 13px;
 101         margin-right: 3px;
 102       }
 103
 104       .purple {
 105         color: #9063CD;
 106       }
 107
 108       .middleDetails {
 109         border-right: 1px solid #EAEAEA;
 110         margin-left: 0;
 111         height: 45px;
 112       }
 113     }
 114     .right-header {
 115       display: flex;
 116       align-items: center;
 117       .quantity-container {
 118         .quantity-label {
 119           padding-left: 10px;
 120           font-family: OpenSans-Semibold;
 121           font-size: 12px;
 122         }
 123         .quantity {
 124           padding: 5px 10px 5px 0;
 125           font-family: OpenSans-Semibold;
 126           font-size: 18px;
 127         }
 128       }
 129       .scale-container {
 130         .scale-label {
 131           padding-left: 10px;
 132           font-family: OpenSans-Semibold;
 133           font-size: 12px;
 134         }
 135         .scale {
 136           padding: 5px 10px 5px 0;
 137           font-family: OpenSans-Semibold;
 138           font-size: 18px;
 139         }
 140       }
 141       [class^="icon-"] {
 142         border-left: 1px solid #EAEAEA;
 143       }
 144       .menu-container {
 145         height: 100%;
 146         display: flex;
 147         background: none;
 148         border: none;
 149         padding: 0;
 150         outline: none;
 151         justify-content: center;
 152         flex-direction: column;
 153         text-align: center;
 154         cursor: pointer;
 155       }
 156       .icon-browse:before {
 157         content: '\e924';
 158         display: inline-block;
 159         font-size: 24px;
 160       }
 161       .deploy-btn {
 162         color: #FFFFFF ;
 163         background: #009fdb;
 164         width: 128px;
 165         height: 100%;
 166         border: none;
 167         &[disabled] {
 168           cursor: not-allowed;
 169           opacity: .65;
 170           color: #99d6ec;
 171         }
 172       }
 173     }
 174   }
 175
 176