skyquake/plugins/launchpad/src/topologyView/topologyView.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 @import 'style/_colors.scss';
  19 @import 'style/layout.scss';
  20 .app-body {
  21         display: flex;
  22         height: 100%;
  23         &.topologyAppBody {
  24                 flex: 1;
  25         }
  26 }
  27 .topologyView {
  28
  29         display: flex;
  30         flex-direction: row;
  31         justify-content: flex-start;
  32         align-items: stretch;
  33         align-content: stretch;
  34         flex: 1;
  35         position: relative;
  36         margin: 0.5rem;
  37         min-width: 1340px;
  38   height: auto;
  39         .dashboardCard {
  40                 display: flex;
  41                 //flex: 0 1 auto;
  42                 flex: 1;
  43                 width: auto;
  44                 height: auto;
  45                 margin: 0;
  46                 max-height: none;
  47                 .corner-accent {
  48                         display: none;
  49                 }
  50                 header {
  51                         background-color: white;
  52                         display: block;
  53                 }
  54         }
  55         .topologyTreeGraph {
  56                 flex-grow: 2;
  57         }
  58   .recordDetails {
  59           flex: 1 1 auto;
  60
  61                 pre {
  62                         flex: 1;
  63                         margin: 0;
  64                         white-space: pre-wrap;
  65                 }
  66                 &-body {
  67                         display: flex;
  68                         flex: 1;
  69                         min-width: 0;
  70                         min-height: 0;
  71                         overflow: auto;
  72                 }
  73         }
  74
  75
  76         svg {
  77                 .node {
  78                         cursor: pointer;
  79
  80                         circle {
  81                                 stroke: steelblue;
  82                                 stroke-width: 1.5px;
  83                         }
  84                 }
  85                 .link {
  86                         fill: none;
  87                         stroke: gray;
  88                         stroke-width: 1.5px;
  89                 }
  90         }
  91 }
  92 .reloadButton {
  93     // TODO: Style this button
  94 }