skyquake/plugins/launchpad/src/recordViewer/recordNavigator.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import "style/_colors.scss";
  20
  21 .recordNavigator{
  22   .catalogItems {
  23     display:flex;
  24     flex-wrap:wrap;
  25     justify-content:flex-start;
  26     flex-direction:row;
  27     font-family: Roboto, Helvetica, Arial, sans-serif;
  28
  29     &.-is-scaled {
  30       margin: 0.25rem 0;
  31       background: $gray;
  32       border-radius: 8px;
  33       padding: 0 0 0.25rem 0;
  34       color: $black !important;
  35       &_title {
  36         padding: 0.5rem;
  37         &:hover {
  38           font-style: normal;
  39         }
  40       }
  41     }
  42
  43     &_item {
  44       flex: 1 1 100%;
  45       // background-color:$darker-gray;
  46       background-color: #fff;
  47       margin: 0.3rem 1rem;
  48       // flex: 0 1 49%;
  49       position: relative;
  50       height: 4pc;
  51       overflow: hidden;
  52       border-radius: 8px;
  53       padding:0.5rem;
  54       color: #d9d9d9;
  55       font-weight: 100;
  56       font-style: normal;
  57       -webkit-user-select: none;
  58       display:flex;
  59       cursor:pointer;
  60
  61       h1 {
  62         font-size: 1.125rem;
  63         max-width: 260px;
  64         overflow: hidden;
  65         text-overflow: ellipsis;
  66       }
  67
  68       &:hover{
  69           background-color: #7e9bc1;
  70           cursor: pointer;
  71           color: white;
  72           h2 {
  73               color: #000;
  74           }
  75           abbr, span {
  76             color: white;
  77           }
  78         }
  79
  80       >div {
  81         display:flex;
  82         flex-direction:column;
  83       }
  84       &.-is-selected {
  85         outline: 2px dashed $brand-blue;
  86         outline-offset: 2px;
  87
  88         background-color: #7e9bc1;
  89         cursor: pointer;
  90         color: white;
  91         span, abbr {
  92           color:white;
  93         }
  94       }
  95       img {
  96         width: 50px;
  97         height: 50px;
  98         align-self: center;
  99       }
 100       section {
 101         padding-left:0.5rem;
 102         display:flex;
 103         flex-direction:column;
 104         flex: 1 1 95%;
 105         justify-content: center;
 106         padding: 0.125rem 0.75rem;
 107         abbr {
 108           font-weight:bold;
 109         }
 110         abbr,span {
 111               display: block;
 112       color: $gray-dark;
 113       border: 0;
 114       // color: #ef8354;
 115       font-family: monospace,serif;
 116       font-size: .7rem;
 117       white-space: nowrap;
 118         }
 119       }
 120       section, h2 {
 121         margin: 0 0 4px;
 122         font-weight: normal;
 123         font-size: .8125rem;
 124         color:black;
 125         white-space: nowrap;
 126       }
 127     }
 128   }
 129
 130 }