vendor/toolkit/metro-ui/menus.less in metro-ui-rails-0.1.6 vs vendor/toolkit/metro-ui/menus.less in metro-ui-rails-0.15.8.3
- old
+ new
@@ -2,172 +2,19 @@
* Metro UI CSS
* Copyright 2012 Sergey Pimenov
* Licensed under the MIT Lilcense
*
* Menus.less
- *
+ * dropdown-menu, nav-bar
*/
-.navigation-bar {
- width: 100%;
- min-height: 40px;
- background: #464646;
- z-index: 10000;
-
- .navigation-bar-inner {
- padding: 5px 20px 5px 20px;
- color: #fff;
- font-size: 11pt;
- margin: auto;
- position: relative;
-
- & > .brand {
- position: relative;
- float: left;
- margin-right: 20px;
- margin-top: 3px;
-
- &:hover {
- background-color: transparent;
- }
-
- .icon {
- width: 24px;
- height: 24px;
- float: left;
- margin-right: 10px;
- margin-top: 3px;
-
- img {
- width: 100%;
- height: 100%;
- }
- }
-
- .name {
- #font > .subheader;
- font-size: 16pt;
- color: #fff;
- }
-
- &.sub-menu {
- cursor: pointer;
- .dropdown-menu {
- margin-top: -10px;
- }
- &:after {
- position: absolute;
- content: "\3009";
- display: inline-block;
- font-size: 10pt;
- left: 100%;
- top: 20px;
- margin-left: 5px;
- .rotate(90deg);
- }
- }
- }
-
- & > ul {
- .unstyled;
- padding-top: 5px;
- margin-top: 2px;
-
- & > li {
- display: inline-block;
- line-height: 32px;
- position: relative;
-
- &.sub-menu {
- padding-right: 20px;
- &:after {
- position: absolute;
- content: "\3009";
- display: inline-block;
- font-size: 10pt;
- font-family: Helvetica, sans-serif, sans;
- letter-spacing: 0px;
- top: 3px;
- right: 10px;
- .rotate(90deg);
- cursor: pointer;
- }
-
- &:hover {
- &:after {
- color: #1e1e1e;
- }
- }
- }
-
- & > a {
- color: #fff;
- #font > .navigation;
- padding: 5px 10px;
- cursor: pointer;
- }
-
- &.active, &:hover {
- background-color: #fff;
-
- a {
- color: #1e1e1e;
- }
- }
-
- & > .dropdown-menu {
- border: 0;
- }
-
- &.no-hover {
- &:hover {
- background-color: transparent;
- }
- }
- }
- }
-
- .clearfix;
- }
-
- &.fixed-top {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- }
-
- &.fixed-bottom {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- }
-
-}
-
-.menu-pull {
- position: absolute;
- right: 10px;
- top: 10px;
- display: none;
- cursor: pointer;
- z-index: 10001;
- background: image-url('metro-ui/row24.png') no-repeat;
- background-size: cover;
- height: 24px;
- width: 24px;
- margin: 0;
- padding: 0;
-}
-
.dropdown-menu {
position: absolute;
background-color: #fff;
.unstyled;
top: 100%;
- z-index: 1101;
+ z-index: 11010;
float: left;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
min-width: 160px;
padding-bottom: 5px;
@@ -210,167 +57,172 @@
&.open {
display: block !important;
}
}
+.nav-bar {
+ background-color: @blue;
+ position: relative;
+ top: 0;
+ width: 100%;
+ display: block;
+ margin: 0;
+ padding: 0;
-.popup-menu {
- .unstyled();
- position: absolute;
- top: 100%;
- left: -1px;
- z-index: 1;
- background-color: #fff;
- display: none;
- border: 1px #bababa solid;
+ .nav-bar-inner {
+ .element {
+ position: relative;
+ margin: 5px;
+ line-height: 20px;
+ height: 20px;
+ float: left;
+ display: inline-block;
+ padding: 0;
+ margin-right: 10px;
+ font-weight: normal;
+ font-size: 10pt;
+ color: #fff;
- li {
- float: none;
- display: block;
- border:1px transparent solid !important;
- min-width: 150px;
-
- a {
- display: block;
- white-space: nowrap;
- float: none;
- height: auto;
- #font > .tertiary;
- color: #1e1e1e;
- padding: 5px 10px;
-
- &:hover {
- color: #fff;
+ &.brand {
+ font-size: 1.15em;
}
}
- &:hover {
- background-color: #008287;
- }
+ & > ul.menu {
+ .unstyled;
+ padding: 0;
- &.divider {
- height: 1px !important;
- line-height: 1px !important;
- background-color: transparent !important;
- border-top: 1px #bababa solid !important;
+ & > li {
+ display: block;
+ float: left;
+ margin-right: 10px;
+ position: relative;
+ padding: 5px;
- &:hover {
- background-color: transparent !important;
- }
- }
+ a {
+ display: block;
+ float: left;
+ color: @white;
+ font-size: 10pt;
+ }
- &.sub-menu {
- &:after {
- position: absolute;
- content: "\3009";
- display: inline-block;
- font-size: 10pt;
- top: 5px;
- right: 10px;
- .rotate(0deg);
- }
- }
- }
-}
+ ul.dropdown-menu {
+ //margin-top: 5px;
+ border: 0;
+ li {
-.horizontal-menu {
- background-color: #f1f1f1;
- padding: 0px;
+ a {
+ display: block;
+ float: none;
+ color: #1e1e1e;
+ padding: 3px 20px;
+ }
+ }
- & > ul {
- .unstyled();
+ }
- li {
- float: left;
- position: relative;
- border: 1px transparent solid;
- display: block;
+ }
- &:hover {
- border: 1px #bababa solid;
- background-color: #fff;
+ &.open {
+ display: block !important;
}
+ }
- &.sub-menu {
- padding-right: 20px;
- &:after {
+ & > .divider, & > ul.menu > li.divider {
+ .element;
+ width: 1px;
+ border-right: 1px darken(@white, 10%) solid;
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
+ }
+
+ [data-role=dropdown] {
+ margin-right: 20px !important;
+ & > a {
+ cursor: pointer;
+ &:before {
position: absolute;
- content: "\3009";
- display: inline-block;
- font-size: 10pt;
- font-family: sans;
- top: 7px;
- right: 10px;
+ content: "\203A";
+ display: block;
+ font-size: 1.4em;
+ left: 100%;
+ margin-left: 3px;
+ top: 8px;
.rotate(90deg);
}
}
-
- a {
- float: left;
- padding: 5px 10px;
- display: block;
- z-index: 999;
- #font > .navigation;
- #state > .navigation;
- }
-
- ul {
- .popup-menu;
- }
-
- &:hover > ul {
- display: block;
- }
-
- ul li ul {
- position: absolute;
- left: 100%;
- top: -2px;
- }
}
- li.pull {
+ .pull-menu {
display: none;
float: right;
- margin-right: 5px;
- margin-top: 5px;
- a {
- width: 24px;
- height: 20px;
- background: image-url('metro-ui/pull24-dark.png') no-repeat;
- display: block;
- text-decoration: none;
- border: 0;
- cursor: pointer;
- }
+ color: #fff;
+ cursor: pointer;
+ font: 1.8em sans-serif;
+ margin-right: 0px;
+ position: relative;
+ height: 20px;
+ width: 20px;
+ line-height: 20px;
- &:hover {
- border: 1px transparent solid;
+ &:before {
+ content: "\2261";
+ position: absolute;
+ font-size: 20pt;
+ top: 5px;
+ left: 0;
}
}
+
+ .clearfix;
}
- .clearfix();
+ &.bg-color-blue .nav-bar-inner .menu li a:hover{background-color: @blue !important;}
+ &.bg-color-blueLight .nav-bar-inner .menu li a:hover{background-color: @blueLight !important;}
+ &.bg-color-blueDark .nav-bar-inner .menu li a:hover{background-color: @blueDark !important;}
+ &.bg-color-green .nav-bar-inner .menu li a:hover{background-color: @green !important;}
+ &.bg-color-greenLight .nav-bar-inner .menu li a:hover {background-color: @greenLight !important;}
+ &.bg-color-greenDark .nav-bar-inner .menu li a:hover {background-color: @greenDark !important;}
+ &.bg-color-red .nav-bar-inner .menu li a:hover {background-color: @red !important;}
+ &.bg-color-yellow .nav-bar-inner .menu li a:hover {background-color: @yellow !important;}
+ &.bg-color-orange .nav-bar-inner .menu li a:hover {background-color: @orange !important;}
+ &.bg-color-orangeDark .nav-bar-inner .menu li a:hover {background-color: @orangeDark !important;}
+ &.bg-color-pink .nav-bar-inner .menu li a:hover {background-color: @pink !important;}
+ &.bg-color-pinkDark .nav-bar-inner .menu li a:hover {background-color: @pinkDark !important;}
+ &.bg-color-purple .nav-bar-inner .menu li a:hover {background-color: @purple !important;}
+ &.bg-color-darken .nav-bar-inner .menu li a:hover {background-color: @darken !important;}
+ &.bg-color-lighten .nav-bar-inner .menu li a:hover {background-color: @lighten !important;}
+ &.bg-color-white .nav-bar-inner .menu li:hover {background-color: darken(@white, 10%) !important;}
+ &.bg-color-white .nav-bar-inner .menu li a:hover {background-color: darken(@white, 10%) !important;}
+ &.bg-color-white .nav-bar-inner .menu li a {color: @darken !important;}
+ &.bg-color-white .nav-bar-inner .element {color: @darken !important;}
+ &.bg-color-white .nav-bar-inner .pull-menu {color: @darken !important;}
+ &.bg-color-grayDark .nav-bar-inner .menu li a:hover {background-color: @grayDark !important;}
+
+ .clearfix;
}
-.page {
- .page-header {
- .page-header-content {
- h1[data-role=dropdown] {
- cursor: pointer;
- .dropdown-menu {
- margin-top: -10px;
- }
- &:after {
- position: absolute;
- content: "\3009";
- display: inline-block;
- font-size: 10pt;
- left: 100%;
- top: 20px;
- margin-left: 5px;
- .rotate(90deg);
- }
- }
+.nav-bar {
+ &.fixed-top, &.fixed-bottom {
+ position: fixed;
+ z-index: 10000;
+ left: 0;
+ }
+
+ &.fixed-top {
+ top: 0;
+ bottom: auto;
+ }
+ &.fixed-bottom {
+ bottom: 0;
+ top: auto;
+ }
+}
+
+.nav-bar {
+ .nav-bar-inner {
+ &.container {
+ width: 940px;
+ margin: auto;
}
}
}
+