Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / launchpad / src / recordViewer / recordNavigator.scss

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.scss b/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.scss
new file mode 100644 (file)
index 0000000..dfc993c
--- /dev/null
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordNavigator.scss
@@ -0,0 +1,130 @@
+
+/*
+ * 
+ *   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";
+
+.recordNavigator{
+  .catalogItems {
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:flex-start;
+    flex-direction:row;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+
+    &.-is-scaled {
+      margin: 0.25rem 0;
+      background: $gray;
+      border-radius: 8px;
+      padding: 0 0 0.25rem 0;
+      color: $black !important;
+      &_title {
+        padding: 0.5rem;
+        &:hover {
+          font-style: normal;
+        }
+      }
+    }
+
+    &_item {
+      flex: 1 1 100%;
+      // background-color:$darker-gray;
+      background-color: #fff;
+      margin: 0.3rem 1rem;
+      // flex: 0 1 49%;
+      position: relative;
+      height: 4pc;
+      overflow: hidden;
+      border-radius: 8px;
+      padding:0.5rem;
+      color: #d9d9d9;
+      font-weight: 100;
+      font-style: normal;
+      -webkit-user-select: none;
+      display:flex;
+      cursor:pointer;
+
+      h1 {
+        font-size: 1.125rem;
+        max-width: 260px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &:hover{
+          background-color: #7e9bc1;
+          cursor: pointer;
+          color: white;
+          h2 {
+              color: #000;
+          }
+          abbr, span {
+            color: white;
+          }
+        }
+
+      >div {
+        display:flex;
+        flex-direction:column;
+      }
+      &.-is-selected {
+        outline: 2px dashed $brand-blue;
+        outline-offset: 2px;
+
+        background-color: #7e9bc1;
+        cursor: pointer;
+        color: white;
+        span, abbr {
+          color:white;
+        }
+      }
+      img {
+        width: 50px;
+        height: 50px;
+        align-self: center;
+      }
+      section {
+        padding-left:0.5rem;
+        display:flex;
+        flex-direction:column;
+        flex: 1 1 95%;
+        justify-content: center;
+        padding: 0.125rem 0.75rem;
+        abbr {
+          font-weight:bold;
+        }
+        abbr,span {
+              display: block;
+      color: $gray-dark;
+      border: 0;
+      // color: #ef8354;
+      font-family: monospace,serif;
+      font-size: .7rem;
+      white-space: nowrap;
+        }
+      }
+      section, h2 {
+        margin: 0 0 4px;
+        font-weight: normal;
+        font-size: .8125rem;
+        color:black;
+        white-space: nowrap;
+      }
+    }
+  }
+
+}