sdc-workflow-designer-ui/src/app/app.component.css

   1 /**
   2  * Copyright (c) 2017 ZTE Corporation.
   3  * All rights reserved. This program and the accompanying materials
   4  * are made available under the terms of the Eclipse Public License v1.0
   5  * and the Apache License 2.0 which both accompany this distribution,
   6  * and are available at http://www.eclipse.org/legal/epl-v10.html
   7  * and http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  * Contributors:
  10  *     ZTE - initial API and implementation and/or initial documentation
  11  */
  12 .authorized-div{
  13     height: 100%;
  14 }
  15
  16 .unauthorized-div{
  17     text-align: center;
  18     color: red;
  19 }
  20
  21 .loading-div{
  22     position: absolute;
  23     top: 0;
  24     width: 100%;
  25     height: 100%;
  26     background-color: white;
  27 }
  28
  29 .loading-div div{
  30     position: relative;
  31     top: calc(50% - 36px);
  32     left: calc(50% - 36px);
  33 }
  34
  35 .loading-div div:not(:required) {
  36     -moz-animation: three-quarters-loader 1.5s infinite linear;
  37     -webkit-animation: three-quarters-loader 1.5s infinite linear;
  38     animation: three-quarters-loader 1.5s infinite linear;
  39     box-sizing: border-box;
  40     display: inline-block;
  41     overflow: hidden;
  42     text-indent: -9999px;
  43     border: 5px solid #1dadfc;
  44     border-right-color: transparent;
  45     border-radius: 36px;
  46     width: 72px;
  47     height: 72px;
  48 }
  49
  50 @-moz-keyframes three-quarters-loader {
  51     0% {
  52         -moz-transform: rotate(0deg);
  53         transform: rotate(0deg)
  54     }
  55     to {
  56         -moz-transform: rotate(1turn);
  57         transform: rotate(1turn)
  58     }
  59 }
  60
  61 @-webkit-keyframes three-quarters-loader {
  62     0% {
  63         -webkit-transform: rotate(0deg);
  64         transform: rotate(0deg)
  65     }
  66     to {
  67         -webkit-transform: rotate(1turn);
  68         transform: rotate(1turn)
  69     }
  70 }
  71
  72 @keyframes three-quarters-loader {
  73     0% {
  74         -moz-transform: rotate(0deg);
  75         -ms-transform: rotate(0deg);
  76         -webkit-transform: rotate(0deg);
  77         transform: rotate(0deg)
  78     }
  79     to {
  80         -moz-transform: rotate(1turn);
  81         -ms-transform: rotate(1turn);
  82         -webkit-transform: rotate(1turn);
  83         transform: rotate(1turn)
  84     }
  85 }
  86
  87 .main-content-wrapper{
  88     height: 100%;
  89     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTEgMTEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7aXNvbGF0aW9uOmlzb2xhdGU7fS5jbHMtMntmaWxsOiNmYWZiZmQ7fS5jbHMtM3tmaWxsOiNlY2VkZWY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5iYWNrZ3JvdW5kLWltYWdlc192MjwvdGl0bGU+PGc+PGltYWdlIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBc0FBQUFMQ0FJQUFBQW16dUJ4QUFBQUNYQklXWE1BQUFzU0FBQUxFZ0hTM1g3OEFBQUFFMGxFUVZRWVYyUDRUd2d3RUZJd3FvSmtGUUF3eFdtbDRtUGRyd0FBQUFCSlJVNUVya0pnZ2c9PSIvPjwvZz48ZyBpZD0i55+p5b2iXzEiIGRhdGEtbmFtZT0i55+p5b2iIDEiIGNsYXNzPSJjbHMtMSI+PGcgaWQ9IuefqeW9ol8xLTIiIGRhdGEtbmFtZT0i55+p5b2iIDEiPjxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIi8+PC9nPjwvZz48ZyBjbGFzcz0iY2xzLTEiPjxnPjxwb2x5Z29uIGNsYXNzPSJjbHMtMyIgcG9pbnRzPSIxMCAwIDEwIDEwIDAgMTAgMCAxMSAxMCAxMSAxMC45MiAxMSAxMC45MiAwIDEwIDAiLz48L2c+PC9nPjwvc3ZnPg==);
  90     background-size: 11px;
  91 }
  92
  93 .tool-bar{
  94     position: fixed;
  95     top: 0px;
  96     left: 0px;
  97     width: 200px;
  98     height: 100%;
  99     background-color: white;
 100     overflow-y: auto;
 101 }
 102
 103 .design-area{
 104     position: relative;
 105     left: 200px;
 106     width: calc(100% - 200px);
 107     height: 100%;
 108     padding: 20px;
 109 }
 110
 111 .design-menus{
 112     display: block;
 113     height: 30px;
 114     margin-bottom: 10px;
 115 }
 116
 117 .design-container{
 118     display: block;
 119     height: calc(100% - 40px);
 120 }