313 lines
6.8 KiB
Sass
313 lines
6.8 KiB
Sass
#nav-sidebar
|
|
position: fixed
|
|
width: 240px
|
|
height: 100%!important
|
|
overflow-y: auto
|
|
z-index: 500
|
|
background-color: $main-color
|
|
border-right: 1px solid black
|
|
li.maintab > a > i
|
|
display: inline-block
|
|
height: 30px
|
|
width: 30px
|
|
font-size: 20px
|
|
line-height: 30px
|
|
color: white
|
|
text-align: center
|
|
@include border-radius(40px)
|
|
li:not(.active)
|
|
ul
|
|
display: none
|
|
li.active
|
|
span.submenu_expand
|
|
display: none
|
|
ul.menu
|
|
margin: 0 0 100px 0
|
|
padding: 0
|
|
border-top: 1px black solid
|
|
list-style: none
|
|
li.maintab
|
|
position: relative
|
|
&.active
|
|
a.title, a.title:hover
|
|
color: contrast-color($brand-primary, white, #333, 10%)
|
|
background-color: $brand-primary
|
|
i
|
|
color: black
|
|
background-color: white
|
|
&.active
|
|
a.title:hover
|
|
color: contrast-color($main-color, white, #333, 10%)
|
|
&.expanded
|
|
a.title
|
|
color: white
|
|
background-color: darken($main-color,10%)
|
|
border-bottom: solid 1px darken($main-color,25%)
|
|
&:hover
|
|
background-color: lighten($main-color,10%)
|
|
i
|
|
color: white
|
|
span.submenu_expand
|
|
@extend .icon-angle-up
|
|
ul.submenu
|
|
display: block
|
|
a
|
|
color: lighten($main-color,30%)
|
|
background-color: darken($main-color,15%)
|
|
border-bottom: solid 1px darken($main-color,25%)
|
|
&:hover
|
|
color: white
|
|
background-color: darken($main-color,5%)
|
|
a.title
|
|
display: block
|
|
position: relative
|
|
padding: 2px 0 2px 8px
|
|
border-bottom: 1px solid darken($main-color,10%)
|
|
font-size: 12px
|
|
line-height: 28px
|
|
$color: contrast-color($main-color, white, #333, 10%)
|
|
color: mix($main-color, $color, 30%)
|
|
background-color: $main-color
|
|
text-transform: uppercase
|
|
text-decoration: none
|
|
@include transition-property(background-color)
|
|
@include transition-duration(0.4s)
|
|
@include transition-timing-function(ease-out)
|
|
i
|
|
color: lighten($main-color,25%)
|
|
background-color: darken($main-color,25%)
|
|
@include transition-property(color)
|
|
@include transition-duration(0.4s)
|
|
@include transition-timing-function(ease-out)
|
|
&:hover
|
|
background-color: lighten($main-color,10%)
|
|
color: white
|
|
i
|
|
color: white
|
|
span.submenu_expand
|
|
position: absolute
|
|
right: 10px
|
|
top: 2px
|
|
cursor: pointer
|
|
font-family: FontAwesome
|
|
font-size: 24px
|
|
font-weight: 100
|
|
color: black
|
|
background-color: transparent
|
|
@extend .icon-angle-down
|
|
@include text-shadow(lighten($main-color,10%) 1px 1px 0)
|
|
&:hover
|
|
color: white
|
|
@include text-shadow(darken($main-color,20%) -1px -1px 0)
|
|
ul.submenu
|
|
list-style: none
|
|
padding: 0
|
|
li
|
|
a
|
|
display: block
|
|
padding: 4px 5px 4px 10px
|
|
font-size: 12px
|
|
border: none
|
|
border-bottom: solid 1px #eee
|
|
background-color: white
|
|
&:hover
|
|
color: $main-color
|
|
background-color: mix(white, $main-color, 90%)
|
|
text-decoration: none
|
|
&:last-child a
|
|
border-bottom: none
|
|
&.active a
|
|
color: contrast-color($brand-primary, white, #333, 10%)
|
|
background-color: $brand-primary
|
|
border-bottom: solid 1px darken($brand-primary,10%)
|
|
@media (max-width: $screen-tablet)
|
|
display: none
|
|
|
|
#nav-topbar
|
|
position: fixed
|
|
height: 28px
|
|
top: 38px
|
|
left: 80
|
|
width: 100%
|
|
padding: 0 40px 0 0
|
|
z-index: 600
|
|
background-color: white
|
|
ul.menu
|
|
margin: 0
|
|
padding: 0
|
|
display: block
|
|
list-style: none
|
|
li.maintab, li.subtab
|
|
height: 28px
|
|
padding: 0
|
|
margin: 0
|
|
list-style: none
|
|
position: relative
|
|
float: left
|
|
> a
|
|
display: block
|
|
line-height: 30px
|
|
color: $main-color
|
|
padding: 0 6px
|
|
margin: 0
|
|
font-size: 12px
|
|
i
|
|
margin: 0
|
|
width: 15px
|
|
background-color: transparent
|
|
font-size: 14px
|
|
&.active, &:hover
|
|
background-color: $brand-primary
|
|
> a
|
|
text-decoration: none
|
|
color: contrast-color($main-color, white, #333, 10%)
|
|
i
|
|
color: white
|
|
|
|
li.expanded > ul.submenu
|
|
display: block
|
|
ul.submenu
|
|
background-color: white
|
|
@include box-shadow(rgba(black,0.3) 0 2px 4px)
|
|
display: none
|
|
position: absolute
|
|
margin: 0
|
|
padding: 0
|
|
left: 0
|
|
top: 28px
|
|
width: 200px!important
|
|
> li
|
|
width: 200px
|
|
padding: 0
|
|
list-style: none
|
|
> a
|
|
display: block
|
|
padding: 4px 5px 4px 10px
|
|
font-size: 12px
|
|
border-bottom: solid 1px #eee
|
|
&:hover
|
|
color: white
|
|
background-color: $brand-primary
|
|
text-decoration: none
|
|
&.active a
|
|
color: contrast-color($brand-primary, white, #333, 10%)
|
|
background-color: $brand-primary
|
|
border-bottom: solid 1px darken($brand-primary,10%)
|
|
#ellipsistab
|
|
display: block
|
|
width: 40px
|
|
height: 28px
|
|
padding: 0
|
|
margin: 0
|
|
position: absolute
|
|
right: 0
|
|
> a
|
|
text-align: center
|
|
font-size: 15px
|
|
line-height: 30px
|
|
color: $main-color
|
|
cursor: pointer
|
|
ul#ellipsis_submenu
|
|
right: 0
|
|
left: inherit
|
|
a.title
|
|
padding: 0 8px
|
|
text-align: left
|
|
li.subtab.expanded > ul
|
|
left: -200px
|
|
top: 0
|
|
.menu-collapse
|
|
display: none
|
|
|
|
.menu-collapse
|
|
height: 54px
|
|
width: 100%
|
|
font-size: 2em
|
|
text-align: center
|
|
line-height: 55px
|
|
display: block
|
|
background-color: $main-color
|
|
border-bottom: 3px solid darken($main-color,10%)
|
|
color: darken($main-color,30%)
|
|
|
|
.page-topbar
|
|
#main
|
|
padding-top: 64px
|
|
#nav-sidebar
|
|
display: none
|
|
.page-head
|
|
top: 66px
|
|
#content
|
|
margin-left: 0
|
|
width: 100%
|
|
.page-head h2.page-title
|
|
padding: 0 0 0 20px
|
|
|
|
.page-sidebar-closed
|
|
#nav-sidebar
|
|
overflow: visible
|
|
width: 50px
|
|
@include transition-property(width)
|
|
@include transition-duration(0.4s)
|
|
@include transition-timing-function(ease-out)
|
|
span.title
|
|
display: none
|
|
ul.submenu
|
|
display: none!important
|
|
padding-top: 37px
|
|
position: relative
|
|
top: 0
|
|
@include box-shadow(rgba(black,0.2) 1px 1px 0,rgba(black,0.3) 2px 2px 4px)
|
|
> ul > li:hover
|
|
width: 250px!important
|
|
position: relative
|
|
span.title
|
|
display: inline-block
|
|
ul.submenu
|
|
display: block!important
|
|
position: absolute
|
|
left: 50px
|
|
width: 200px!important
|
|
#content
|
|
margin-left: 50px
|
|
.page-head h2.page-title
|
|
padding: 0 0 0 70px
|
|
@media (max-width: $screen-tablet)
|
|
padding: 0 0 0 20px
|
|
@media (max-width: $screen-tablet)
|
|
margin-left: 0
|
|
width: 100%
|
|
.submenu_expand
|
|
display: none
|
|
|
|
//icons
|
|
.icon-AdminDashboard
|
|
@extend .icon-dashboard
|
|
.icon-AdminCatalog
|
|
@extend .icon-book
|
|
.icon-AdminParentOrders
|
|
@extend .icon-credit-card
|
|
.icon-AdminParentCustomer
|
|
@extend .icon-group
|
|
.icon-AdminPriceRule
|
|
@extend .icon-tags
|
|
.icon-AdminParentShipping
|
|
@extend .icon-truck
|
|
.icon-AdminParentLocalization
|
|
@extend .icon-globe
|
|
.icon-AdminParentModules
|
|
@extend .icon-puzzle-piece
|
|
.icon-AdminParentPreferences
|
|
@extend .icon-wrench
|
|
.icon-AdminTools
|
|
@extend .icon-cogs
|
|
.icon-AdminAdmin
|
|
@extend .icon-cog
|
|
.icon-AdminParentStats
|
|
@extend .icon-bar-chart
|
|
.icon-AdminStock
|
|
@extend .icon-archive
|
|
|
|
[class^="icon-Admin"]
|
|
margin-right: 6px
|