Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / logging / src / logging.scss

diff --git a/skyquake/plugins/logging/src/logging.scss b/skyquake/plugins/logging/src/logging.scss
new file mode 100644 (file)
index 0000000..559b217
--- /dev/null
+++ b/skyquake/plugins/logging/src/logging.scss
@@ -0,0 +1,264 @@
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+@import "style/_colors.scss";
+@import "style/layout.scss";
+@import '../node_modules/open-iconic/font/css/open-iconic.css';
+
+/*
+.dashboardCard {
+  height: auto;
+}*/
+
+// Defaults for grid elements. TBD where we place this on completion of task
+
+.grid.categorySeverityGrid {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  .gridCell {
+    display: flex;
+    flex: 1 0 auto;
+    // top right bottom left
+    padding: 0.1rem 0 0.1rem 0.5rem;
+  }
+  .gridRow {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    padding-top: 1px;
+  }
+  .gridHead {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    background-color: $gray;
+    text-transform: uppercase;
+    .gridCell {
+      border: 1px solid black;
+      //flex: 1 0 auto;
+    }
+  }
+  .gridBody {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+  }
+  .gridBody .gridRow:nth-child(odd) {
+    background-color: $gray-lighter;
+  }
+  .gridBody .gridRow:nth-child(even) {
+    background-color: $gray-lightest;
+  }
+  .noRows {
+    text-align: center;
+    font-style: italic;
+    font-size: large;
+    padding-top: 1rem;
+  }
+  .gridCell.category {
+    width: 150px;
+  }
+  .gridCell.severity {
+    width: 100px;
+  }
+} // .gird.categorySeverityGrid
+
+.cardSection {
+  //margin: 0 0.5rem 0.5rem;  
+}
+.cardSectionHeader {
+  text-decoration-line: underline;
+  text-transform: uppercase;
+  border-bottom: 1px solid black;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  
+}
+
+.textBox {
+  margin-right: 0.5rem;
+  // https://css-tricks.com/almanac/selectors/p/placeholder/
+  font-size: medium;
+  flex: 1;
+  &::-webkit-input-placeholder {
+    font-style: italic;
+  }
+}
+
+// .app-body should be promoted to a higher level
+.app-body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+}
+
+.loggingPage {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: auto;
+  &.loggingGeneral {
+    
+  }
+}
+.panelContainer {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+
+}
+
+.loggingPanel {
+  display: flex;
+  flex: 1 100%;
+  height: auto !important;
+  header {
+    background-color: white;
+    display: block;
+  }
+}
+
+.defaultCategorySeverityPanel {
+  @extend .loggingPanel;
+  min-width: 20rem;
+  max-width: 20rem;
+}
+
+.loggingEventsPanel {
+  @extend .loggingPanel;
+  .textBox {
+    &.invalidValue {
+      border: 1px solid red;
+    }
+  }
+  &-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: scroll;
+    padding: 0.5rem;
+  }
+  .radioButtonGroupHeader {
+    text-transform: uppercase;
+  }
+  .radioButtonGroup {
+    display: flex;
+    flex-direction: row;
+    .radioItem {
+      margin-left: 1rem;
+      margin-top: 0.2rem;
+
+    }
+  }
+}
+
+.loggingGeneralDetailsPanel {
+  @extend .loggingPanel;
+  .syslogViewer {
+    display: flex;
+    flex: 0;
+    flex-direction: column;
+  }
+  &-body {
+    // top right bottom left
+    //padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    padding: 0.5rem;
+  }
+  .section.syslogViewerSection {
+    .sectionLabel {
+
+    }
+    .syslogViewerControls {
+      display: flex;
+      flex: 1;
+      flex-direction: row;
+      margin-top: 0.25rem;
+    } 
+  }
+  .goButton {
+    cursor: pointer;
+    border: 1px solid $gray-dark;
+    background-color: $gray-dark;
+    margin: 2px;
+    border-radius: 3px;
+    span {
+      padding-left: 3px;
+      padding-right: 3px;
+    }
+  }
+}
+
+.loggingPageFooter {
+  display: flex;
+}
+
+.loggingFormButtonGroup {
+  justify-content: center;
+  align-items: center;
+  display:flex;
+  flex: 1;
+  padding: 1rem;
+}  
+
+.denyEventsEditGroup {
+  display: flex;
+  flex-direction: column;
+
+  .eventEditRow {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+  }
+  .removeButton {
+    flex: 0;
+    cursor: pointer;
+    border: 1px solid black;
+    border-radius: 5px;
+    background-color: black;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    padding-left: 2px;
+    padding-right: 2px;
+    color: white;
+    span {
+      //margin-top: 2px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.plusButton {
+  flex: 0;
+  cursor: pointer;
+  //padding: 2px;
+  margin-top: 0.5rem;
+  color: white;
+  span {
+    border: 1px solid black;
+    background-color: black;
+    border-radius: 4px;
+    padding-top: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}
+