skyquake/plugins/logging/src/logging.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 @import '../node_modules/open-iconic/font/css/open-iconic.css';
  21
  22 /*
  23 .dashboardCard {
  24   height: auto;
  25 }*/
  26
  27 // Defaults for grid elements. TBD where we place this on completion of task
  28
  29 .grid.categorySeverityGrid {
  30   display: flex;
  31   flex: 1;
  32   flex-direction: column;
  33
  34   .gridCell {
  35     display: flex;
  36     flex: 1 0 auto;
  37     // top right bottom left
  38     padding: 0.1rem 0 0.1rem 0.5rem;
  39   }
  40   .gridRow {
  41     display: flex;
  42     flex: 0 0 auto;
  43     flex-direction: row;
  44     padding-top: 1px;
  45   }
  46   .gridHead {
  47     display: flex;
  48     flex: 0 0 auto;
  49     flex-direction: row;
  50     background-color: $gray;
  51     text-transform: uppercase;
  52     .gridCell {
  53       border: 1px solid black;
  54       //flex: 1 0 auto;
  55     }
  56   }
  57   .gridBody {
  58     display: flex;
  59     flex-direction: column;
  60     overflow-y: scroll;
  61   }
  62   .gridBody .gridRow:nth-child(odd) {
  63     background-color: $gray-lighter;
  64   }
  65   .gridBody .gridRow:nth-child(even) {
  66     background-color: $gray-lightest;
  67   }
  68   .noRows {
  69     text-align: center;
  70     font-style: italic;
  71     font-size: large;
  72     padding-top: 1rem;
  73   }
  74   .gridCell.category {
  75     width: 150px;
  76   }
  77   .gridCell.severity {
  78     width: 100px;
  79   }
  80 } // .gird.categorySeverityGrid
  81
  82 .cardSection {
  83   //margin: 0 0.5rem 0.5rem;
  84 }
  85 .cardSectionHeader {
  86   text-decoration-line: underline;
  87   text-transform: uppercase;
  88   border-bottom: 1px solid black;
  89   margin-top: 0.5rem;
  90   margin-bottom: 0.5rem;
  91
  92 }
  93
  94 .textBox {
  95   margin-right: 0.5rem;
  96   // https://css-tricks.com/almanac/selectors/p/placeholder/
  97   font-size: medium;
  98   flex: 1;
  99   &::-webkit-input-placeholder {
 100     font-style: italic;
 101   }
 102 }
 103
 104 // .app-body should be promoted to a higher level
 105 .app-body {
 106   display: flex;
 107   flex-direction: column;
 108   align-items: stretch;
 109   height: 100%;
 110 }
 111
 112 .loggingPage {
 113   display: flex;
 114   flex: 1;
 115   flex-direction: column;
 116   height: auto;
 117   &.loggingGeneral {
 118
 119   }
 120 }
 121 .panelContainer {
 122   display: flex;
 123   flex: 1;
 124   flex-direction: row;
 125
 126 }
 127
 128 .loggingPanel {
 129   display: flex;
 130   flex: 1 100%;
 131   height: auto !important;
 132   header {
 133     background-color: white;
 134     display: block;
 135   }
 136 }
 137
 138 .defaultCategorySeverityPanel {
 139   @extend .loggingPanel;
 140   min-width: 20rem;
 141   max-width: 20rem;
 142 }
 143
 144 .loggingEventsPanel {
 145   @extend .loggingPanel;
 146   .textBox {
 147     &.invalidValue {
 148       border: 1px solid red;
 149     }
 150   }
 151   &-body {
 152     display: flex;
 153     flex: 1;
 154     flex-direction: column;
 155     overflow-y: scroll;
 156     padding: 0.5rem;
 157   }
 158   .radioButtonGroupHeader {
 159     text-transform: uppercase;
 160   }
 161   .radioButtonGroup {
 162     display: flex;
 163     flex-direction: row;
 164     .radioItem {
 165       margin-left: 1rem;
 166       margin-top: 0.2rem;
 167
 168     }
 169   }
 170 }
 171
 172 .loggingGeneralDetailsPanel {
 173   @extend .loggingPanel;
 174   .syslogViewer {
 175     display: flex;
 176     flex: 0;
 177     flex-direction: column;
 178   }
 179   &-body {
 180     // top right bottom left
 181     //padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 182     padding: 0.5rem;
 183   }
 184   .section.syslogViewerSection {
 185     .sectionLabel {
 186
 187     }
 188     .syslogViewerControls {
 189       display: flex;
 190       flex: 1;
 191       flex-direction: row;
 192       margin-top: 0.25rem;
 193     }
 194   }
 195   .goButton {
 196     cursor: pointer;
 197     border: 1px solid $gray-dark;
 198     background-color: $gray-dark;
 199     margin: 2px;
 200     border-radius: 3px;
 201     span {
 202       padding-left: 3px;
 203       padding-right: 3px;
 204     }
 205   }
 206 }
 207
 208 .loggingPageFooter {
 209   display: flex;
 210 }
 211
 212 .loggingFormButtonGroup {
 213   justify-content: center;
 214   align-items: center;
 215   display:flex;
 216   flex: 1;
 217   padding: 1rem;
 218 }
 219
 220 .denyEventsEditGroup {
 221   display: flex;
 222   flex-direction: column;
 223
 224   .eventEditRow {
 225     display: flex;
 226     flex: 1 1 auto;
 227     flex-direction: row;
 228     margin-top: 0.2rem;
 229     margin-bottom: 0.2rem;
 230   }
 231   .removeButton {
 232     flex: 0;
 233     cursor: pointer;
 234     border: 1px solid black;
 235     border-radius: 5px;
 236     background-color: black;
 237     margin-top: 0.2rem;
 238     margin-bottom: 0.2rem;
 239     padding-left: 2px;
 240     padding-right: 2px;
 241     color: white;
 242     span {
 243       //margin-top: 2px;
 244       vertical-align: middle;
 245     }
 246   }
 247 }
 248
 249 .plusButton {
 250   flex: 0;
 251   cursor: pointer;
 252   //padding: 2px;
 253   margin-top: 0.5rem;
 254   color: white;
 255   span {
 256     border: 1px solid black;
 257     background-color: black;
 258     border-radius: 4px;
 259     padding-top: 2px;
 260     padding-left: 2px;
 261     padding-right: 2px;
 262   }
 263 }
 264