// organize css
This commit is contained in:
Kevin Granger
@@ -0,0 +1,299 @@
|
||||
#nav-sidebar
|
||||
float: left
|
||||
width: 240px
|
||||
height: 100%!important
|
||||
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
|
||||
padding: 0
|
||||
border-top: 1px black solid
|
||||
list-style: none
|
||||
li.maintab
|
||||
position: relative
|
||||
&.active
|
||||
a.title
|
||||
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, border, box-shadow)
|
||||
@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: 35px
|
||||
left: 80
|
||||
width: 100%
|
||||
z-index: 600
|
||||
background-color: white
|
||||
ul.menu
|
||||
height: 28px
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: block
|
||||
list-style: none
|
||||
> li
|
||||
height: 28px
|
||||
padding: 0
|
||||
margin: 0
|
||||
border-right: solid 1px #aaa
|
||||
list-style: none
|
||||
position: relative
|
||||
float: left
|
||||
> a
|
||||
display: block
|
||||
line-height: 28px
|
||||
color: $main-color
|
||||
padding: 0 6px
|
||||
margin: 0
|
||||
i
|
||||
margin: 0
|
||||
width: 15px
|
||||
background-color: transparent
|
||||
font-size: 18px
|
||||
&:hover
|
||||
text-decoration: none
|
||||
background-color: $main-color
|
||||
color: white
|
||||
i
|
||||
color: white!important
|
||||
&.active
|
||||
> a
|
||||
color: contrast-color($main-color, white, #333, 10%)
|
||||
background-color: $main-color
|
||||
i
|
||||
color: white
|
||||
.menu-collapse
|
||||
display: none
|
||||
ul.submenu
|
||||
display: none!important
|
||||
@include box-shadow(rgba(black,0.3) 0 2px 4px)
|
||||
> ul.menu > li.expanded
|
||||
ul.submenu
|
||||
display: block!important
|
||||
> ul.menu > li
|
||||
ul.submenu
|
||||
display: none!important
|
||||
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
|
||||
background-color: white
|
||||
border-bottom: solid 1px #eee
|
||||
&: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%)
|
||||
|
||||
.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: 63px
|
||||
#content
|
||||
margin-left: 0
|
||||
width: 100%
|
||||
.page-head h2.page-title
|
||||
padding: 0 0 0 20px
|
||||
|
||||
.page-sidebar-closed
|
||||
#nav-sidebar
|
||||
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
|
||||
Reference in New Issue
Block a user