benmanley
254ac3d510
Consolidate styles from menu.styl into global-modules.styl Mobile: Remove glyphicons to give more space Mobile: Fix notif scrolling behaviour Mobile: Move subscribe button from toolbar to menu modal
126 lines
3.2 KiB
Stylus
126 lines
3.2 KiB
Stylus
// Custom styles for the menu aka toolbar aka navbar
|
||
.toolbar
|
||
width:100%;
|
||
top:0
|
||
left:0
|
||
z-index:998
|
||
background-color: $color-toolbar
|
||
border-bottom: 1px solid darken($color-herobox, 12%)
|
||
> 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:768px)
|
||
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
|
||
float:left;
|
||
padding: 0.618em
|
||
@media screen and (max-width:768px)
|
||
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)
|
||
.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:768px)
|
||
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.382em
|
||
.toolbar-currency
|
||
padding-top: 0.236em
|
||
padding-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:768px)
|
||
.toolbar-options
|
||
> li
|
||
padding-left:0em
|
||
margin-left:0em
|
||
margin-right: 0.618em
|
||
.toolbar-sync, .toolbar-settings
|
||
@extend $hrpg-button
|
||
hrpg-button-color-mixin($color-toolbar)
|
||
@media screen and (min-width:768px)
|
||
.toolbar
|
||
position:fixed
|
||
// 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
|
||
div
|
||
padding-bottom: 1em
|
||
width: 300px
|
||
@media screen and (max-width:768px)
|
||
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
|
||
@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-call-to-action
|
||
@media screen and (max-width:768px)
|
||
.toolbar-mobile, .toolbar-settings
|
||
.toolbar-submenu
|
||
padding-left: 1em
|
||
display: block
|
||
li
|
||
display:inline-block
|
||
a
|
||
padding-left: 0em
|
||
.toolbar-subscribe
|
||
display:none |