habitica/website/client-old/css/menu.styl

@require "./variables/screen-size.styl"

// Top level navigation bar – toolbar – menu – nav
.toolbar
  top:0
  right:0
  width: 100%
  z-index:998
  background-color: $color-toolbar
  border-bottom: 1px solid darken($color-herobox, 12%)
.toolbar.active
  width: auto
@media screen and (min-width: $sm-min-screen-width)
  .toolbar
    position:fixed
// Button to toggle toolbar visibility
.toolbar-toggle
  float:right
  padding: 0.9em 0.3em
  overflow: hidden
  width: 1.6em
  z-index:4000
  border:none
  border-left: 1px solid darken($color-toolbar, 16.18%)
  background:none
  background-color: darken($color-toolbar, 3.82%)
  span
    display: inline-block
    color: darken($color-toolbar, 38.2%)
  .glyphicon
    animation: toggle-open 0.382s linear both
  .toggle-text
    display: none
    padding-left: 0.382em
  &:focus, &:active
    outline:none
  &:hover, &.active, &:focus
    width: auto
    padding-left: 0.618em
    padding-right: 0.618em
    .toggle-text
      display: inline-block
      padding-left: 0.382em
    .toggle-open
      display:none
  &.active
    span
      color: darken($color-toolbar, 70%)
    .toggle-close
      display:none
    .toggle-open
      display: inline-block
  &:hover, &:focus
    background-color: darken($color-toolbar, 3.82%)
    border-left: 1px solid darken($color-toolbar, 16.18%)
  &.active, &:focus.active
    background-color: darken($color-herobox, 8%)
    .glyphicon
      animation: toggle-close 0.382s linear both
  &:focus.active
    border-left: 1px solid darken($color-toolbar, 38.2%)
    border-bottom: 1px solid darken($color-toolbar, 38.2%)
.toolbar-container
  > ul > li
    display: inline-block
// Mobile menu button
.toolbar-mobile-nav
  display: inline-block
  padding-left: 0.618em
  padding-right: 0.618em
  @media screen and (min-width: $sm-min-screen-width)
    display: none
.toolbar-mobile
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-right
  hrpg-button-color-mixin($color-toolbar)
// Top level menu items: Tasks – User – Social – Inventory
.toolbar-nav
  white-space: nowrap
  float:left;
  padding: 0.618em
  @media screen and (max-width: $xs-max-screen-width)
    display: none
  > li
    margin-right: 0.618em
  .toolbar-button-dropdown
    @extend $hrpg-button-toggle
    @extend $hrpg-modal-dropdown-right
    hrpg-button-color-mixin($color-toolbar)
    &.highlight
      > a span.glyphicon
        margin-right: 0.382em !important
  .toolbar-button
    @extend $hrpg-button
    hrpg-button-color-mixin($color-toolbar)
    > a
      display:inline-block
      height:100%
// Information bar: Bailey – notifs – currency – subscribe button
.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
  float:right
  padding: 0.618em 0.618em 0.618em 0
  @media screen and (max-width: $xs-max-screen-width)
    float: none
    display: inline-block
    padding: 0.618em 0.382em 0.618em 0
.toolbar-wallet
  .gem-wallet
    .Gems
      margin-top: 0em
    span
      display:inline-block
      vertical-align:top
      padding-top: 0.236em
.toolbar-currency
  margin-top: 0.236em
  margin-bottom: 0.236em
  vertical-align:top
.toolbar-currency.gold
  color: darken($neutral,61,8%)
.toolbar-currency.silver
  color: #999
.toolbar-options, .toolbar-wallet
  > li
    margin-left: 0.618em
@media screen and (max-width: $xs-max-screen-width)
  .toolbar-options
    > li
      padding-left:0em
      margin-left:0em
      margin-right: 0.618em
.toolbar-sync, .toolbar-settings, .toolbar-audio
  @extend $hrpg-button
  hrpg-button-color-mixin($color-toolbar)
// Notifications icon and dropdown
.toolbar-notifs
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-left
  hrpg-button-color-mixin($color-toolbar)
  > a span.inactive
    opacity: 0.236 !important
  > a span.notification-counter
    background: #428bca
    color: #fff
    position: absolute
    top: -5px
    right: -7px
    font: bold 12px/12px "Lato", sans-serif
    border-radius: 50px
    padding: 3px 6px
  div
    padding-bottom: 1em
    width: 300px
    @media screen and (max-width: $xs-max-screen-width)
      width: 96%
    .toolbar-notifs-notifs
      padding-bottom:1em
      li
        .glyphicon
          margin-right: 0.618em
          height: 100%
      a:nth-of-type(1)
        width: 84%
      a:nth-of-type(2)
        width: 16%
        text-align: center
        .glyphicon-remove-circle
          margin: 0px
.toolbar-notifs-no-messages
  padding: 0.382em 1em
// Settings dropdown
.toolbar-settings, .toolbar-audio
  @extend $hrpg-modal-dropdown-left
.toolbar-controls
  @extend $hrpg-modal-controls
  .toolbar-controls-button
    @extend $hrpg-button
    hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
.toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
  @extend $hrpg-button
  button
    min-width: 130px
@media screen and (max-width: $xs-max-screen-width)
  .toolbar-toggle
    display: none
  .toolbar-mobile, .toolbar-settings, .toolbar-audio
    .toolbar-submenu
      padding-left: 1em
      display: block
      li
        display:inline-block
        a
          padding-left: 0em
  .toolbar-subscribe
    display:none
//Animations
@keyframes toggle-close
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(45deg)
@keyframes toggle-open
  0%
    transform: rotate(45deg)
  100%
    transform: rotate(0deg)