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

   1 .drawing-board-header {
   2   height: 56px;
   3   margin-bottom: 4px;
   4   position: relative;
   5   font-family: OpenSans-Regular;
   6   display: flex;
   7   justify-content: space-between;
   8   font-size: 14px;
   9   box-shadow: 2px 2px 6px #D2D2D2;
  10   color: #191919;
  11   [class^="icon-"] {
  12     height: 56px;
  13     width: 56px;
  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       border-right: 1px solid #EAEAEA;
  32       &:before {
  33         content: "\e906";
  34         font-size: 24px;
  35       }
  36     }
  37     .service-instance-label {
  38       padding: 0 5px;
  39       font-family: OpenSans-Regular;
  40       font-size: 13px;
  41       color: #191919;
  42     }
  43     .service-instance-name {
  44       padding-right: 20px;
  45       color: #191919;
  46       font-family: OpenSans-Semibold;
  47       background-color: white;
  48       font-size: 16px
  49     }
  50     .status {
  51       font-family: OpenSans-Semibold;
  52       line-height: 14px;
  53       font-size: 14px;
  54     }
  55   }
  56   .right-header {
  57     display: flex;
  58     align-items: center;
  59     .quantity-container {
  60       .quantity-label {
  61         padding-left: 10px;
  62         font-family: OpenSans-Semibold;
  63         font-size: 12px;
  64       }
  65       .quantity {
  66         padding: 5px 10px 5px 0;
  67         font-family: OpenSans-Semibold;
  68         font-size: 18px;
  69       }
  70     }
  71     [class^="icon-"] {
  72       border-left: 1px solid #EAEAEA;
  73     }
  74     .menu-container {
  75       height: 100%;
  76       display: flex;
  77       background: none;
  78       border: none;
  79       padding: 0;
  80       outline: none;
  81     }
  82     .icon-browse:before {
  83       content: '\e924';
  84       display: inline-block;
  85       font-size: 24px;
  86     }
  87     .deploy-btn {
  88       color: #FFFFFF ;
  89       background: #009fdb;
  90       width: 128px;
  91       height: 100%;
  92       border: none;
  93     }
  94   }
  95 }