benmanley
128 lines
2.9 KiB
Stylus
128 lines
2.9 KiB
Stylus
// Custom styles for the menu aka toolbar aka navbar
|
||
.toolbar
|
||
width:100%;
|
||
top:0
|
||
left:0
|
||
z-index:998
|
||
color: #222
|
||
background-color: lighten($color-herobox, 60%)
|
||
border-bottom: 1px solid darken($color-herobox, 12%)
|
||
> ul > li
|
||
display: inline-block
|
||
// Mobile menu button
|
||
.toolbar-mobile-nav
|
||
float:left
|
||
@media screen and (min-width:768px)
|
||
display: none
|
||
.toolbar-mobile
|
||
@extend $hrpg-button
|
||
@extend $hrpg-modal-dropdown-right
|
||
// Top level menu items: Tasks – User – Social – Inventory
|
||
.toolbar-nav
|
||
float:left;
|
||
padding: 10px
|
||
@media screen and (max-width:768px)
|
||
display: none
|
||
> li
|
||
//border-right: 1px solid #ccc
|
||
margin-right: 10px
|
||
.toolbar-button-dropdown
|
||
@extend $hrpg-button-toggle
|
||
@extend $hrpg-modal-dropdown-right
|
||
.toolbar-button
|
||
@extend $hrpg-button
|
||
> a
|
||
display:inline-block
|
||
height:100%
|
||
&:link,&:visited
|
||
color: #222
|
||
&:hover
|
||
background-color: #eee
|
||
&:active
|
||
color:#000
|
||
@media screen and (max-width:768px)
|
||
padding: 10px 8px
|
||
.toolbar-submenu
|
||
ul
|
||
padding-left: 0px !important
|
||
li
|
||
margin-right: 16px
|
||
display:inline-block
|
||
.glyphicon
|
||
margin-right:8px
|
||
color:#ccc
|
||
// Information bar: Bailey – notifs – currency – subscribe button
|
||
.toolbar-bailey, .toolbar-wallet, .toolbar-options
|
||
float:right
|
||
padding: 10px 10px 10px 0
|
||
.toolbar-wallet
|
||
.gem-wallet
|
||
margin-left:8px
|
||
.Gems
|
||
margin-top: 3px
|
||
span
|
||
display:inline-block
|
||
vertical-align:top
|
||
padding-top:5px
|
||
.toolbar-currency
|
||
margin-left:16px
|
||
padding: 5px 8px !important
|
||
margin:0px
|
||
vertical-align:top
|
||
@media screen and (max-width:768px)
|
||
.toolbar
|
||
> ul
|
||
float: none
|
||
margin: 0px 4px 4px 4px
|
||
.toolbar-bailey
|
||
float:right
|
||
.toolbar-options
|
||
> li
|
||
margin-left: 8px
|
||
.toolbar-sync, .toolbar-settings
|
||
@extend $hrpg-button
|
||
.toolbar-subscribe
|
||
@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-heading
|
||
> a span.inactive
|
||
opacity: 0.236 !important
|
||
div
|
||
width:300px
|
||
@media screen and (max-width:768px)
|
||
width:96%
|
||
.toolbar-notifs-notifs
|
||
padding-bottom:16px
|
||
max-height: 63%
|
||
li
|
||
position: relative
|
||
.glyphicon
|
||
margin-right: 10px
|
||
height: 100%
|
||
a
|
||
display:inline-block
|
||
a:nth-of-type(1)
|
||
margin-right: 26px
|
||
a:nth-of-type(2)
|
||
position:absolute
|
||
right:0px
|
||
.glyphicon-remove-circle
|
||
margin-right: 0px
|
||
color:#9d9d9d
|
||
&:after
|
||
right:26px
|
||
// Settings dropdown
|
||
.toolbar-settings
|
||
@extend $hrpg-modal-dropdown-left-heading
|
||
.toolbar-controls
|
||
@extend $hrpg-modal-controls
|
||
li
|
||
@extend $hrpg-button
|
||
.toolbar-settings .toolbar-controls
|
||
@media screen and (min-width:768px)
|
||
display:none |