Commit 08858a53 authored by Mickael Mao's avatar Mickael Mao Committed by Jonathan Sacksick

Update theming for admin toolbar.

Change-Id: Ib97b364d857614278429bcb50cce369b50c7caa2
Reviewed-on: https://code.drupalcommerce.org/577Tested-by: 's avatarJenkins <jenkins@commerceguys.com>
Reviewed-by: 's avatarJonathan Sacksick <jonathan.sacksick@gmail.com>
parent 25fe44c9
#toolbar #toolbar-home,
#toolbar #toolbar-user {
float: left; /* LTR */
}
body.toolbar #toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper ul.menu ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper ul.menu ul.menu {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu ul.menu {
float: right;
}
#toolbar #toolbar-user,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 ul.group-0 {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-advanced-store-settings {
float: left;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 ul.group-1 {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-products {
clear: right;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li {
......@@ -24,3 +25,20 @@ body.toolbar #toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu,
#toolbar div.toolbar-menu .toolbar-menu-wrapper {
padding-right: 175px;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-advanced-store-settings {
float: none;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-products {
clear: both;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu li {
float: none;
clear: both;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper {
width: auto;
}
.responsive-layout-mobile #toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-product-settings {
float: none;
}
......@@ -19,14 +19,13 @@ body.toolbar #toolbar div.toolbar-menu {
margin: 0 auto;
min-height: 50px;
padding: 3px 0;
width: 88%;
width: 90%;
}
#toolbar a {
color: #fff;
text-shadow: 0 1px 1px #18466b;
}
#toolbar #toolbar-home {
float: left; /* LTR */
padding: 3px 0;
}
#toolbar-home li,
......@@ -40,7 +39,7 @@ body.toolbar #toolbar div.toolbar-menu {
body.toolbar #toolbar-home a span {
background: transparent url("images/logo-menu.png") no-repeat 0 0;
display: block;
height: 40px;
min-height: 40px;
text-indent: -9999px;
width: 130px;
margin: 0;
......@@ -57,7 +56,6 @@ body.toolbar #toolbar-home a:hover {
/* User Menu */
#toolbar #toolbar-user {
float: right; /* LTR */
padding-top: 11px;
}
#toolbar #toolbar-user li.account a {
color: #fddb84;
......@@ -65,7 +63,7 @@ body.toolbar #toolbar-home a:hover {
}
/* Main Menu */
#toolbar div.toolbar-menu .toolbar-menu-wrapper {
padding-top: 11px;
padding-top: 6px;
}
#toolbar div.toolbar-menu ul li a {
font: normal 500 15px/1.75em "Open Sans",Arial,sans-serif;
......@@ -141,31 +139,31 @@ body.toolbar #toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu
width: 100%;
}
/* Wider Mega Menu */
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-1 div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-1 div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-1 li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-2 div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-2 div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-2 li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-3 div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-3 div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-3 li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 li:hover div.toolbar-menu-wrapper ul.menu li a {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-products div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-products div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-products li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-orders div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-orders div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-orders li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-content div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-content div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-content li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings li:hover div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu li:hover a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings li:hover div.toolbar-menu-wrapper ul.menu li a {
font-size: 15px;
color: #57b3fc;
font-size: 15px;
font-weight: 500;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-1 div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-2 div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-3 div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper ul.menu ul.menu li a {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-products div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-orders div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-content div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu ul.menu li a,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu ul.menu li a {
font-weight: 100;
color: #fff;
font-weight: 100;
......@@ -183,18 +181,18 @@ body.toolbar #toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
-webkit-box-shadow: none;
box-shadow: none;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper ul.menu ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper ul.menu ul.menu {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper ul.menu ul.menu,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper ul.menu ul.menu {
float: left; /* LTR */
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 ul.group-1 {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.toolbar-menu-products {
clear: left; /* LTR */
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 ul.group-0 {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings ul.group-0 {
float: right; /* LTR */
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-4 div.toolbar-menu-wrapper,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.group-5 div.toolbar-menu-wrapper {
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-store-settings div.toolbar-menu-wrapper,
#toolbar div.toolbar-menu div.toolbar-menu-wrapper ul.toolbar-menu-site-settings div.toolbar-menu-wrapper {
width: 385px;
}
#toolbar div.toolbar-menu div.toolbar-menu-wrapper div.toolbar-menu-wrapper ul.menu ul.menu {
......@@ -228,3 +226,34 @@ body.toolbar #toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
clip: inherit !important;
}
}
/* Responsive quick fix */
/*body.toolbar.responsive-layout-mobile #toolbar-home a span,
body.toolbar.responsive-layout-default #toolbar-home a span,
body.toolbar.responsive-layout-narrow #toolbar-home a span {
background-position: -100px 0;
margin-top: 7px;
min-height: 23px;
width: 25px;
}*/
body.toolbar.responsive-layout-mobile #toolbar .toolbar-menu-wrapper,
body.toolbar.responsive-layout-default #toolbar .toolbar-menu-wrapper,
body.toolbar.responsive-layout-narrow #toolbar .toolbar-menu-wrapper {
clear: both;
}
.responsive-layout-mobile #toolbar div.toolbar-menu-wrapper > ul.toolbar-menu-products > li > div.toolbar-menu-wrapper,
.responsive-layout-mobile #toolbar div.toolbar-menu-wrapper > ul.toolbar-menu-orders > li > div.toolbar-menu-wrapper,
.responsive-layout-mobile #toolbar div.toolbar-menu-wrapper > ul.toolbar-menu-content > li > div.toolbar-menu-wrapper {
margin-top: 20px;
}
.responsive-layout-mobile #toolbar div.toolbar-menu-wrapper > ul.toolbar-menu-site-settings > li > div.toolbar-menu-wrapper {
width: auto;
}
.responsive-layout-mobile #toolbar div.toolbar-menu-wrapper > ul.toolbar-menu-site-settings > li > div.toolbar-menu-wrapper ul.toolbar-menu-advanced-settings {
clear: both;
margin-bottom: 20px;
}
.responsive-layout-default #toolbar div.toolbar-menu-wrapper > ul.menu > li > div.toolbar-menu-wrapper,
.responsive-layout-narrow #toolbar div.toolbar-menu-wrapper > ul.menu > li > div.toolbar-menu-wrapper {
margin-top: -5px;
}
......@@ -19,7 +19,9 @@
}
#toolbar > div.toolbar-menu > div.toolbar-menu-wrapper > ul.group > li {
margin-bottom: -1px;
height: 40px;
}
#toolbar div.toolbar-menu-wrapper {
position: relative;
}
#toolbar div.toolbar-menu-wrapper div.toolbar-menu-wrapper {
position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment