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