skyquake/framework/widgets/skyquake_container/skyquakeApp.scss

   1 /*import a reset*/
   2 @import '../../style/_colors.scss';
   3 html, body {
   4     height:100%;
   5     width:100%;
   6 }
   7
   8
   9 .skyquakeApp {
  10     display: -ms-flexbox;
  11     display: flex;
  12     -ms-flex-direction: column;
  13         flex-direction: column;
  14     height: 100%;
  15     background: $gray-lightest;
  16     h1 {
  17         text-transform: uppercase;
  18     }
  19     .active {
  20         background-color: $brand-blue!important;
  21         border-color: $brand-blue!important;
  22         color: #fff!important
  23     }
  24     .skyquakeNav {
  25         display: -ms-flexbox;
  26         display: flex;
  27         color:white;
  28         background:black;
  29         position:relative;
  30         z-index: 10;
  31         font-size:0.75rem;
  32         .secondaryNav {
  33             -ms-flex: 1 1 auto;
  34                 flex: 1 1 auto;
  35             display: -ms-flexbox;
  36             display: flex;
  37             -ms-flex-pack: end;
  38                 justify-content: flex-end;
  39         }
  40         .app {
  41             position:relative;
  42             h2 {
  43                 font-size:0.75rem;
  44                 border-right: 1px solid black;
  45                 display: -ms-flexbox;
  46                 display: flex;
  47                 -ms-flex-align: center;
  48                     align-items: center;
  49                 .oi {
  50                     padding-right: 0.5rem;
  51                 }
  52             }
  53             .menu {
  54                 position:absolute;
  55                 display:none;
  56                 z-index:2;
  57                 width: 100%;
  58             }
  59             &:first-child{
  60                 h2 {
  61                     border-left: 1px solid black;
  62                 }
  63             }
  64             &:hover {
  65                 a {
  66                     color:$brand-blue-light;
  67                     cursor:pointer;
  68                 }
  69                 .menu {
  70                     display:block;
  71                     background:black;
  72                     a {
  73                         color:white;
  74                     }
  75                     li:hover {
  76                         a {
  77                             color:$brand-blue-light;
  78                         }
  79                     }
  80                 }
  81             }
  82             &.active {
  83                 color:white;
  84                 background:black;
  85                 a {
  86                     color:white;
  87                 }
  88             }
  89         }
  90         a{
  91             display:block;
  92             padding:0.5rem 1rem;
  93             text-decoration:none;
  94             text-transform:uppercase;
  95             color:white;
  96         }
  97         &:before {
  98             content: '';
  99             height:1.85rem;
 100             width:5.5rem;
 101             /*margin:0 1rem;*/
 102             /*padding:0 0.125rem;*/
 103             /*background: url('../../style/img/svg/riftio_logo_white.svg') no-repeat center center;*/
 104             background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
 105             background-size: contain;
 106         }
 107     }
 108     .skyquakeContainerWrapper {
 109     }
 110     .titleBar {
 111         padding: 1rem 0 0;
 112         h1 {
 113         /* background: url('../../style/img/header-logo.png') no-repeat;*/
 114         background-size:contain;
 115         height: 51px;
 116         line-height: 51px;
 117         margin-left: 20px;
 118         /* padding-left: 100px;*/
 119         left: 0;
 120         font-size: 1.625rem;
 121         font-weight: 400;
 122         text-align:left;
 123         position:relative;
 124         -ms-flex: 1 0 auto;
 125             flex: 1 0 auto;
 126         }
 127     }
 128     .corner-accent {
 129         border: 1px solid #000;
 130         display: block;
 131         height: 4px;
 132         position: absolute;
 133         width: 4px;
 134
 135         &.top {
 136             border-bottom: 0;
 137             top: -1px;
 138         }
 139         &.right {
 140             border-left: 0;
 141             right: -1px;
 142         }
 143         &.bottom {
 144             border-top: 0;
 145             bottom: -1px;
 146         }
 147         &.left {
 148             border-right: 0;
 149             left: -1px;
 150         }
 151     }
 152 }