catalog-ui/src/assets/styles/layout/main.less

   1 .full-height {
   2     height: 100%;
   3     background-color: @main_color_l
   4 }
   5
   6 .w-sdc-main-container {
   7     position: absolute;
   8     top: @header_height + @top_nav_height;
   9     left: 0;
  10     right: 0;
  11     bottom: 0;
  12
  13     .w-sdc-main-right-container {
  14         .bg_n;
  15         bottom: 0;
  16         padding: 22px 12px;
  17         position: absolute;
  18         left: 240px;
  19         right: 0;
  20         top: 0;
  21         overflow: hidden;
  22
  23         & > div:first-child {
  24             padding-bottom: 80px;
  25         }
  26
  27         .sdc-tile {
  28             margin: 10px;
  29             .sdc-tile-content {
  30                 overflow: visible;
  31
  32                 .sdc-tile-content-icon {
  33                     width: 100%;
  34                     margin-top: -1em;
  35                     text-align: right;
  36                 }
  37
  38                 .sdc-tile-content-info {
  39                     .sdc-tile-info-line {
  40                         display: inline-block;
  41
  42                         &.title {
  43                             line-height: 1.4em;
  44                             height: auto;
  45                         }
  46                     }
  47                 }
  48             }
  49         }
  50
  51     }
  52 }
  53
  54 .w-sdc-tile-multiline-ellipsis {
  55     .multiline-ellipsis-dots {
  56         background: linear-gradient(to right, transparent 0%, #ffffff 80%);
  57         padding-left: 1em;
  58     }
  59 }
  60
  61 .w-sdc-row-flex-items {
  62     display: flex;
  63     flex-wrap: wrap;
  64     flex-direction: row;
  65
  66 }
  67
  68 .sdc-loading-page {
  69     display: flex;
  70     align-items: center;
  71     justify-content: center;
  72     flex-direction: column;
  73     position: absolute;
  74     height: 100%;
  75     width: 100%;
  76
  77     .caption1 {
  78         .p_24;
  79         text-align: center;
  80     }
  81
  82     .caption2 {
  83         .p_16_m;
  84         display: block;
  85     }
  86 }
  87
  88 .main-loader {
  89     @green: #cccccc;
  90     @blue: #dddddd;
  91     @red: #eeeeee;
  92     @yellow: #bbbbbb;
  93     @white: #ffffff;
  94
  95     @width: 80px;
  96
  97     .loader {
  98         position: relative;
  99         margin: 0px auto;
 100         width: @width;
 101         &:before {
 102             content:'';
 103             display: block;
 104             padding-top: 100%;
 105         }
 106     }
 107
 108     .circular {
 109         animation: rotate 2s linear infinite;
 110         height: 100%;
 111         transform-origin: center center;
 112         width: 100%;
 113         position: absolute;
 114         top: 0; bottom: 0; left: 0; right: 0;
 115         margin: auto;
 116     }
 117
 118
 119     .path {
 120         stroke-dasharray: 1,200;
 121         stroke-dashoffset: 0;
 122         animation:
 123         dash 1.5s ease-in-out infinite,
 124         color 6s ease-in-out infinite;
 125         stroke-linecap: round;
 126     }
 127
 128     @keyframes rotate{
 129         100%{
 130             transform: rotate(360deg);
 131         }
 132     }
 133     @keyframes dash{
 134         0%{
 135             stroke-dasharray: 1,200;
 136             stroke-dashoffset: 0;
 137         }
 138         50%{
 139             stroke-dasharray: 89,200;
 140             stroke-dashoffset: -35px;
 141         }
 142         100%{
 143             stroke-dasharray: 89,200;
 144             stroke-dashoffset: -124px;
 145         }
 146     }
 147     @keyframes color{
 148         100%, 0%{
 149             stroke: @red;
 150         }
 151         40%{
 152             stroke: @blue;
 153         }
 154         66%{
 155             stroke: @green;
 156         }
 157         80%, 90%{
 158             stroke: @yellow;
 159         }
 160     }
 161
 162 }
 163 //temporary fix. should be removed after converting all the modals to onap-ui modals
 164 sdc-modal{
 165     .sdc-modal, .modal-background{
 166         z-index: 1050;
 167     }
 168 }