vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss

   1
   2 .last {
   3   position: sticky;
   4   background: #f8f8f8;
   5   right: 0;
   6   padding-left: 15px;
   7   padding-right: 15px;
   8   width: 100px !important;
   9   max-width: 100px !important;
  10   min-width: 85px;
  11 }
  12
  13 div.dataTables_wrapper {
  14   width: 800px;
  15   margin: 0 auto;
  16 }
  17
  18 .row {
  19   margin-left: 15px;
  20   margin-right: 15px;
  21 }
  22
  23 .instantiation-status-header {
  24   margin-top: 30px;
  25   .title {
  26     font-family: OpenSans-Semibold;
  27     font-size: 24px;
  28     color: #4A4A4A;
  29     float: left;
  30   }
  31
  32   .info {
  33     width: 18px;
  34     height: 18px;
  35     border: 0;
  36     background-size: auto 100%;
  37     cursor: pointer;
  38     float: left;
  39     margin: 10px;
  40   }
  41
  42   .refresh-btn {
  43     float: left;
  44     margin-top: 6px;
  45     margin-left: 10px;
  46     cursor: pointer;
  47   }
  48
  49   .lastUpdate {
  50     margin-top: 5px;
  51     padding-top: 0px;
  52     font-size: 15px;
  53     border-left: 1px solid black;
  54     float: left;
  55     padding-left: 10px;
  56     color: gray;
  57     height: 26px;
  58   }
  59
  60   .refreshBtn {
  61     width: 18px;
  62     height: 18px;
  63     border: 0;
  64     background-size: auto 100%;
  65     outline: none;
  66     margin-left: 10px;
  67     background: transparent;
  68   }
  69
  70   svg-icon use {
  71     fill: #0000ff !important;
  72   }
  73
  74   .sub-title {
  75     font-family: OpenSans-Semibold;
  76     font-size: 14px;
  77     color: #4A4A4A;
  78     margin-left: 0;
  79   }
  80 }
  81
  82 .instantiation-status-data {
  83   table {
  84     width: 100%;
  85     margin-top: 30px;
  86     font-family: OpenSans-Semibold;
  87     font-size: 12px;
  88     overflow-x: auto;
  89     display: block;
  90     color: #5A5A5A;
  91
  92   }
  93
  94   thead {
  95     position: sticky;
  96     top: 0;
  97     z-index: 100;
  98     display: block;
  99   }
 100
 101   thead th.normal, tbody td.normal {
 102     min-width: 200px !important;
 103     max-width: 200px;
 104   }
 105
 106   thead th.smallTd ,tbody td.smallTd {
 107     max-width: 100px !important;
 108     min-width: 100px !important;
 109   }
 110
 111   thead th.mediumTd ,tbody td.mediumTd {
 112     max-width: 150px !important;
 113     min-width: 150px !important;
 114   }
 115
 116   tbody {
 117     border: none !important;
 118     max-height: 500px;
 119     display: block;
 120   }
 121
 122   th {
 123     background: #f2f2f2;
 124     font-family: OpenSans-Semibold;
 125     color: #5A5A5A;
 126     font-weight: bold;
 127   }
 128   .menu-div {
 129     float: right;
 130     border-left: 1px solid gray;
 131     height: 23px;
 132   }
 133
 134   tr.odd {
 135     background-color: rgb(242, 242, 242);
 136   }
 137
 138   tr:hover {
 139     background: #e1e1e1;
 140   }
 141
 142   thead {
 143     background: rgb(242, 242, 242);
 144   }
 145
 146   td#jobStatus {
 147     cursor: pointer;
 148     box-shadow: -2px 1px 5px -2px #aaa;
 149   }
 150 }
 151
 152
 153 .loader {
 154   border: 5px solid #f3f3f3;
 155   border-radius: 50%;
 156   border-top: 5px solid #3498db;
 157   width: 170px;
 158   height: 170px;
 159   -webkit-animation: spin 2s linear infinite;
 160   animation: spin 2s linear infinite;
 161   position: absolute;
 162   left: 50%;
 163   right: 50%;
 164   top: 50%;
 165 }
 166
 167 /* Safari */
 168 @-webkit-keyframes spin {
 169   0% { -webkit-transform: rotate(0deg); }
 170   100% { -webkit-transform: rotate(360deg); }
 171 }
 172
 173 @keyframes spin {
 174   0% { transform: rotate(0deg); }
 175   100% { transform: rotate(360deg); }
 176 }
 177
 178
 179 .spin {
 180   -webkit-animation: spin .4s infinite linear;
 181   -moz-animation: spin .4s infinite linear;
 182   -o-animation: spin .4s infinite linear;
 183   animation: spin .4s infinite linear;
 184   -webkit-transform-origin: 50% 44%;
 185   transform-origin:50% 44%;
 186   -ms-transform-origin:50% 44% /* IE 9 */
 187 }
 188
 189 @-moz-keyframes spin {
 190   from {
 191     -moz-transform: rotate(0deg);
 192   }
 193   to {
 194     -moz-transform: rotate(360deg);
 195   }
 196 }
 197
 198 @-webkit-keyframes spin {
 199   from {
 200     -webkit-transform: rotate(0deg);
 201   }
 202   to {
 203     -webkit-transform: rotate(360deg);
 204   }
 205 }
 206
 207 @keyframes spin {
 208   from {
 209     transform: rotate(0deg);
 210   }
 211   to {
 212     transform: rotate(360deg);
 213   }
 214 }
 215
 216 .icon-refresh:before {
 217   font-family: icomoon;
 218   content: '\e936';
 219 }
 220
 221 .icon-info {
 222   float: left;
 223   margin-top: 10px;
 224   margin-left: 10px;
 225   font-size: 17px;
 226   margin-right: 10px
 227 }
 228
 229 .icon-info:before {
 230   font-family: icomoon;
 231   content: '\e91f';
 232 }
 233
 234 .context-menu-icon{
 235   width: 25px;
 236   float: left;
 237 }
 238
 239 .icon-x:before {
 240   font-family: icomoon;
 241   content: '\e93d';
 242 }
 243
 244 .icon-inprogress:before {
 245   font-family: icomoon;
 246   content: '\e899';
 247 }
 248
 249 .icon-success_o:before {
 250   font-family: icomoon;
 251   content: '\e934';
 252 }
 253
 254 .icon-menu:before {
 255   font-family: icomoon;
 256   content: '\e924';
 257   font-size: 22px;
 258 }
 259
 260 .icon-X_o:before {
 261   font-family: icomoon;
 262   content: '\e93d';
 263   color: #D02B2B;
 264 }
 265
 266
 267 .icon-inprogress:before {
 268   font-family: icomoon;
 269   content: '\e941';
 270   color: #009FDB;
 271 }
 272
 273 .status-icon {
 274   font-size: 20px;
 275   margin-top: 0px;
 276   height: 0;
 277 }
 278
 279 .instantiationStatusFilter {
 280   position: absolute;
 281   right: 20px;
 282   width: 22%;
 283 }