benmanley
134 lines
3.3 KiB
Stylus
134 lines
3.3 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)
|
||
div.glyphicon
|
||
display:block
|
||
width: 2.618em
|
||
height: 1.618em
|
||
padding: 1.1em 1em 0em 1em
|
||
float:left
|
||
.toolbar-submenu
|
||
padding-left: 0.382em
|
||
display: block
|
||
// 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%
|
||
.toolbar-submenu
|
||
li
|
||
margin-right: 1em
|
||
display:inline-block
|
||
// 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-subscribe
|
||
padding-right: 0.618em
|
||
.toolbar-sync, .toolbar-settings
|
||
@extend $hrpg-button
|
||
hrpg-button-color-mixin($color-toolbar)
|
||
.toolbar-subscribe li
|
||
@extend $hrpg-button-call-to-action
|
||
@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
|
||
width:300px
|
||
@media screen and (max-width:768px)
|
||
width:96%
|
||
.toolbar-notifs-notifs
|
||
padding-bottom:1em
|
||
max-height: 63%
|
||
li
|
||
position: relative
|
||
.glyphicon
|
||
margin-right: 0.618em
|
||
height: 100%
|
||
a
|
||
display:inline-block
|
||
a:nth-of-type(1)
|
||
margin-right: 1.618em
|
||
a:nth-of-type(2)
|
||
position:absolute
|
||
right:0px
|
||
.glyphicon-remove-circle
|
||
margin-right: 0px
|
||
// Settings dropdown
|
||
.toolbar-settings
|
||
@extend $hrpg-modal-dropdown-left
|
||
.toolbar-controls
|
||
@extend $hrpg-modal-controls
|
||
li
|
||
@extend $hrpg-button
|
||
hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
|
||
.toolbar-settings .toolbar-controls
|
||
@media screen and (min-width:768px)
|
||
display:none |