mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-03 12:40:00 +00:00
189 lines
4.7 KiB
Stylus
189 lines
4.7 KiB
Stylus
// 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:768px)
|
||
.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: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, .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
|
||
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-toggle
|
||
display: none
|
||
.toolbar-mobile, .toolbar-settings
|
||
.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)
|