skyquake/framework/widgets/skyquake_nav/skyquakeNav.scss

   1 @import '../../style/_colors.scss';
   2 .active {
   3         background-color: $brand-blue!important;
   4         border-color: $brand-blue!important;
   5         color: #fff!important
   6     }
   7     .skyquakeNav {
   8         display: -ms-flexbox;
   9         display: -webkit-box;
  10         display: flex;
  11         color:white;
  12         background:black;
  13         position:relative;
  14         z-index: 10;
  15         font-size:0.75rem;
  16         padding-right:1rem;
  17         .secondaryNav {
  18             -ms-flex: 1 1 auto;
  19             -webkit-box-flex: 1;
  20             flex: 1 1 auto;
  21             display: -ms-flexbox;
  22             display: -webkit-box;
  23             display: flex;
  24             -ms-flex-pack: end;
  25             -webkit-box-pack: end;
  26             justify-content: flex-end;
  27
  28             .username a{
  29                 text-transform: none;
  30             }
  31         }
  32         .app {
  33             display: -ms-flexbox;
  34             display: block;
  35             position:relative;
  36             margin: auto 0.5rem;
  37             h2 {
  38                 font-size:0.75rem;
  39                 border-right: 1px solid black;
  40                 display: -ms-flexbox;
  41                 display: -webkit-box;
  42                 display: flex;
  43                 -ms-flex-pack: start;
  44                 -ms-flex-pack: start;
  45                 -webkit-box-pack: start;
  46                         justify-content: flex-start;
  47                 -ms-flex-align: center;
  48                 -webkit-box-align: center;
  49                         align-items: center;
  50                 .oi {
  51                     padding-right: 0.5rem;
  52                 }
  53             }
  54             .menu {
  55                 position:absolute;
  56                 display:none;
  57                 z-index:2;
  58                 width: 100%;
  59                 li {
  60                     text-align:left;
  61                 }
  62             }
  63             &:first-child{
  64                 h2 {
  65                     border-left: 1px solid black;
  66                 }
  67             }
  68             &:hover {
  69                 a {
  70                     color:$brand-blue-light;
  71                     cursor:pointer;
  72                 }
  73                 .menu {
  74                     display:block;
  75                     background:black;
  76                     a {
  77                         color:white;
  78                     }
  79                     li:hover {
  80                         a {
  81                             color:$brand-blue-light;
  82                         }
  83                     }
  84                 }
  85             }
  86             &.active {
  87                 color:white;
  88                 background:black;
  89                 a {
  90                     color:white;
  91                 }
  92             }
  93         }
  94         a{
  95             display:block;
  96             padding:0.5rem 1rem;
  97             text-decoration:none;
  98             text-transform:uppercase;
  99             text-align:left;
 100             color:white;
 101         }
 102         &:before {
 103             content: '';
 104             min-width: 5.5rem;
 105             margin: 0.125rem 1rem;
 106             /*background: url('../../style/img/svg/riftio_logo_white.svg') no-repeat center center;*/
 107             background: url('../../style/img/svg/osm-logo_color_rgb_white_text.svg') no-repeat center center;
 108             background-size: contain;
 109         }
 110         .userSection {
 111             display:-ms-flexbox;
 112             display:-webkit-box;
 113             display:flex;
 114             -ms-flex-align:center;
 115             -webkit-box-align:center;
 116                     align-items:center;
 117             padding-left: 1rem;
 118             text-transform:uppercase;
 119             text-align: left;
 120             .projectSelect {
 121                 padding: 0 0.5rem;
 122                 font-size: 1rem;
 123                 /* min-width: 75%;*/
 124                 height: 25px;
 125             }
 126         }
 127     }