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