skyquake/plugins/launchpad/src/topologyL2View/topologyL2View.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
  20 .app-body.topologyL2ViewAppBody {
  21         flex:1;
  22 }
  23 .topologyL2View {
  24         display: flex;
  25         flex-direction: row;
  26         justify-content: flex-start;
  27         align-items: stretch;
  28         align-content: stretch;
  29         flex: 1;
  30         position: relative;
  31         margin: 0.5rem;
  32         min-width: 1340px;
  33
  34         .dashboardCard {
  35                 flex: 0 1 auto;
  36                 width: auto;
  37                 height: auto;
  38                 margin: 0px;
  39
  40                 .corner-accent {
  41                         display: none;
  42                 }
  43                 header {
  44                         background-color: white;
  45                 }
  46                 &.recordDetails {
  47                         flex: 1 1 auto;
  48                         width: 400px;
  49
  50                         pre {
  51                                 margin: 0;
  52                                 white-space: pre-wrap;
  53                         }
  54                 }
  55                 .nodeAttr {
  56                         overflow: auto;
  57                         margin-top: 10px;
  58                         margin-left: 5px;
  59
  60                         .listy {
  61                                 //border: 1px solid red;
  62                                 flex: 1 1 auto;
  63                                 //max-height: 400px;
  64
  65                                 //.listyGroup {
  66                                 }
  67                                 .listyGroup .listyGroup {
  68                                         margin-left: 15px;
  69                                 }
  70                                 .listyItem {
  71                                         padding-top: 5px;
  72                                         list-style-type: none;
  73                                 }
  74                                 .listyGroupHeader {
  75                                         font-size: 1em;
  76                                 }
  77                                 .listyNoDataMessage {
  78                                         text-align: center;
  79                                         margin-top: 40px;
  80                                         color: gray;
  81                                         font-size: 2em;
  82                                         font-style: italic;
  83                                 }
  84                         }
  85                         .debugDetailBox {
  86                                 margin-top: 20px;
  87                         }
  88                 }
  89         }
  90         .topologyGraphDebugPanel {
  91                 margin: 5px;
  92                 background-color: #ECF1EF;
  93         }
  94         .topologyDebugRawJSON {
  95                 margin: 5px;
  96                 padding: 5px;
  97                 border: 1px dashed gray;
  98         }
  99         svg {
 100                 .gnode {
 101                         cursor: pointer;
 102
 103                         circle {
 104                                 stroke: steelblue;
 105                                 stroke-width: 1.5px;
 106                         }
 107                 }
 108                 .link {
 109                         fill: none;
 110                         stroke: gray;
 111                         stroke-width: 1.5px;
 112
 113                 }
 114         }
 115         svg.topology {
 116                 .gnode {
 117                         cursor: pointer;
 118
 119                         circle {
 120                                 fill: white;
 121                                 stroke: steelblue;
 122                                 stroke-width: 1.5px;
 123                         }
 124                 }
 125                 .node-group-1 {
 126                         circle {
 127                                 fill: green;
 128                         }
 129                 }
 130                 .node-group-2 {
 131                         circle {
 132                                 fill: yellow;
 133                         }
 134                 }
 135                 .node-group-3 {
 136                         circle {
 137                                 fill: red;
 138                         }
 139                 }
 140                 .node-group-4 {
 141                         circle {
 142                                 fill: blue;
 143                         }
 144                 }
 145                 .node-group-5 {
 146                         circle {
 147                                 fill: orange;
 148                         }
 149                 }
 150                 .link {
 151                         fill: none;
 152                         stroke: gray;
 153                         stroke-width: 1.5px;
 154                 }
 155                 .legend {
 156
 157                 }
 158         }
 159         .reloadButton {
 160                 //TODO: Style this button
 161         }