vid-webpack-master/src/app/components/vnf-popup/vnf-popup.scss

   1 $grid-border: 1px #d2d2d2 solid;
   2
   3 #instance-popup {
   4   color: #191919;
   5
   6   .left-panel {
   7     background: #f2f2f2;
   8     border-right: $grid-border;
   9   }
  10
  11   .header-common {
  12     height: 100%;
  13     align-items: center;
  14     display: flex;
  15     font-family: OpenSans-Semibold;
  16     font-size: 12px;
  17   }
  18
  19   .header-text {
  20     padding-left: 30px;
  21     @extend .header-common;
  22   }
  23
  24   .header-left {
  25     grid-area: header-left;
  26     @extend .header-text;
  27     @extend .left-panel;
  28     border-bottom: $grid-border;
  29
  30     span {
  31       font-family: OpenSans-Regular;
  32       font-size: 14px;
  33     };
  34   }
  35
  36   .header-right {
  37     grid-area: header-right;
  38
  39     @extend .header-text;
  40     border-bottom: $grid-border;
  41   }
  42
  43   .quantity-label {
  44     grid-area: quantity-label;
  45     @extend .header-common;
  46     border-bottom: $grid-border;
  47     height: 100%;
  48     font-family: OpenSans-Regular;
  49   }
  50
  51   .quantity {
  52     grid-area: quantity;
  53     border-left: $grid-border;
  54     border-bottom: $grid-border;
  55     border-top-style: none;
  56     font-family: OpenSans-Semibold;
  57     text-align: start;
  58     text-indent: 10px;
  59   }
  60
  61   .quantity-select {
  62     width: 78px;
  63     height: 100%;
  64     border: 0;
  65     background: white;
  66     outline: none;
  67     -webkit-appearance: none;
  68     -moz-appearance: none;
  69     appearance: none;
  70     background: url('../../../assets/img/chevron.svg') 0 0 no-repeat;
  71     background-size: 24px;
  72     background-position-x: right;
  73     background-position-y: center;
  74   }
  75   input[type="number"]:hover::-webkit-inner-spin-button {
  76     height: 20px;
  77   }
  78
  79   .model-information {
  80     grid-area: model-information;
  81
  82     padding: 30px;
  83     overflow: auto;
  84     @extend .left-panel;
  85   }
  86
  87   .instance-form {
  88     grid-area: instance-form;
  89   }
  90
  91   .popup-content {
  92     display: grid;
  93     grid-template-columns: 400px auto 30px 93px;
  94     grid-template-rows: 50px calc(100vh - 180px);
  95     grid-template-areas:
  96       "header-left header-right header-right header-right"
  97       "model-information instance-form instance-form instance-form";
  98     padding: 0;
  99   }
 100 }
 101
 102 .modal {
 103   background-color: #191919;
 104   opacity: 0.8;
 105 }
 106
 107 .modal-dialog {
 108   position: relative;
 109   width: auto;
 110   margin: 0;
 111 }
 112 @media (min-width: 1150px) {
 113   .popup-content {
 114     grid-template-rows: 30px 680px;
 115   }
 116 }
 117
 118 .modal-content {
 119   border-radius: 0;
 120   box-shadow: none;
 121   border: none;
 122 }
 123
 124 .modal-footer {
 125   .cancel {
 126     width: 120px;
 127     height: 36px;
 128     background: #ffffff;
 129     border: 1px solid  #009fdb;
 130     border-radius: 2px;
 131     span {
 132       font-family: OpenSans-Regular;
 133       font-size: 14px;
 134       color: #009fdb;
 135       line-height: 16px;
 136     }
 137   }
 138
 139   .submit {
 140     width: 120px;
 141     height: 36px;
 142     background: #009fdb;
 143     border-radius: 2px;
 144     border-color: #009fdb;
 145     span {
 146       font-family: OpenSans-Regular;
 147       font-size: 14px;
 148       color: #FFFFFF;
 149       line-height: 16px;
 150     }
 151   }
 152 }
 153
 154 .modal-header {
 155   background-color: #009fdb;
 156
 157   padding-bottom: 13px;
 158   padding-top: 13px;
 159   padding-left: 29px;
 160   padding-right: 21px;
 161
 162   .close {
 163     font-size: 32px;
 164     font-weight: 200;
 165     color: #d8d8d8;
 166     text-shadow: none;
 167     filter: none;
 168     opacity: 1;
 169   }
 170
 171   .modal-title {
 172     font-family: OpenSans-Regular;
 173     font-size: 24px;
 174     color: #fff;
 175     line-height: 34px;
 176   }
 177 }
 178 //
 179 //@media (min-width: 1200px) {
 180 //  .service-model,
 181 //  .service-instance {
 182 //    width: 1050px;
 183 //    margin: 30px auto;
 184 //  }
 185 //}