--- /dev/null
+//
+// Navbar
+// --------------------------------------------------
+
+.navbar-pf {
+ background: @navbar-pf-bg-color;
+ border: 0;
+ border-radius: 0;
+ border-top: 3px solid @navbar-pf-border-color;
+ margin-bottom: 0;
+ min-height: 0;
+ .navbar-brand {
+ color: @navbar-pf-active-color;
+ padding: 12px 0;
+ margin: 0 0 0 20px;
+ .ie8 & {
+ background: url('@{img-path}/@{img-brand-ie8}') no-repeat 0 49%;
+ min-width: @navbar-pf-navbar-navbar-brand-min-width;
+ }
+ img {
+ display: block;
+ .ie8 & {
+ height: 10px;
+ width: 0;
+ }
+ }
+ }
+ .navbar-collapse {
+ border-top: 0;
+ .box-shadow(none);
+ padding: 0;
+ }
+ .navbar-header {
+ border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
+ float: none;
+ }
+ .navbar-nav {
+ margin: 0;
+ > .active > a, > .active > a:hover, > .active > a:focus {
+ background-color: @navbar-pf-navbar-nav-active-bg-color;
+ color: @navbar-pf-active-color;
+ }
+ > li > a {
+ color: @navbar-pf-color;
+ line-height: 1;
+ padding: 10px 20px;
+ text-shadow: none;
+ &:hover, &:focus {
+ color: @navbar-pf-active-color;
+ }
+ }
+ > .open {
+ > a {
+ &, &:hover, &:focus {
+ background-color: @navbar-pf-navbar-nav-active-bg-color;
+ color: @navbar-pf-active-color;
+ }
+ }
+ }
+ @media (max-width: @grid-float-breakpoint-max) {
+ .active .navbar-persistent, .active .dropdown-menu, .open .dropdown-menu {
+ background-color: @navbar-pf-navbar-nav-active-active-bg-color !important;
+ margin-left: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+ > .active > a, .dropdown-submenu.open > a {
+ &, &:hover, &:focus {
+ background-color: @navbar-pf-navbar-nav-active-active-open-bg-color !important;
+ color: @navbar-pf-active-color;
+ }
+ }
+ > li > a {
+ background-color: transparent;
+ border: 0;
+ color: @navbar-pf-color;
+ outline: none;
+ padding-left: 30px;
+ &:hover {
+ color: @navbar-pf-active-color;
+ }
+ }
+ .divider {
+ background-color: @navbar-pf-navbar-header-border-color;
+ margin: 0 1px;
+ }
+ .dropdown-header {
+ padding-bottom: 0;
+ padding-left: 30px;
+ }
+ .dropdown-submenu {
+ &.open .dropdown-toggle {
+ color: @navbar-pf-active-color;
+ }
+ &.pull-left {
+ float: none !important;
+ }
+ > a:after {
+ display: none;
+ }
+ .dropdown-header {
+ padding-left: 45px;
+ }
+ .dropdown-menu {
+ border: 0;
+ bottom: auto;
+ .box-shadow(none);
+ display: block;
+ float: none;
+ margin: 0;
+ min-width: 0;
+ padding: 0;
+ position: relative;
+ left: auto;
+ right: auto;
+ top: auto;
+ > li > a {
+ padding: 5px 15px 5px 45px;
+ line-height: 20px;
+ }
+ .dropdown-menu > li > a {
+ padding-left: 60px;
+ }
+ }
+ }
+ }
+ .active .navbar-persistent {
+ .dropdown-submenu {
+ &.open .dropdown-menu {
+ display: block;
+ }
+ > a:after {
+ display: inline-block !important;
+ position: relative;
+ right: auto;
+ top: 1px;
+ }
+ .dropdown-menu {
+ display: none;
+ }
+ .dropdown-submenu > a:after {
+ display: none !important;
+ }
+ }
+ }
+ }
+ }
+ .navbar-persistent {
+ display: none;
+ }
+ .active > .navbar-persistent {
+ display: block;
+ }
+ .navbar-primary {
+ float: none;
+ .context {
+ border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
+ }
+ > li > .navbar-persistent > .dropdown-submenu > a {
+ position: relative;
+ &:after {
+ content: @fa-var-angle-down;
+ display: inline-block;
+ font-family: @icon-font-name-fa;
+ font-weight: normal;
+ @media (max-width: @grid-float-breakpoint-max) {
+ height: 10px;
+ margin-left: 4px;
+ vertical-align: baseline;
+ }
+ }
+ }
+ }
+ .navbar-toggle {
+ border: 0;
+ margin: 0;
+ padding: 10px 20px;
+ &:hover, &:focus {
+ background-color: transparent;
+ outline: none;
+ .icon-bar {
+ .box-shadow(0 0 3px rgba(255,255,255,1));
+ }
+ }
+ .icon-bar {
+ background-color: @navbar-pf-icon-bar-bg-color;
+ }
+ }
+ .navbar-utility {
+ border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
+ li.dropdown > .dropdown-toggle {
+ padding-left: 36px;
+ position: relative;
+ .pficon-user {
+ left: 20px;
+ position: absolute;
+ top: 10px;
+ }
+ }
+ @media (max-width: @grid-float-breakpoint-max) {
+ > li + li {
+ border-top: 1px solid @navbar-pf-navbar-header-border-color;
+ }
+ }
+ }
+}
+
+@media (min-width: @grid-float-breakpoint) {
+ .navbar-pf {
+ .navbar-brand {
+ padding: @navbar-pf-navbar-navbar-brand-padding;
+ }
+ .navbar-nav > li > a {
+ padding-bottom: 14px;
+ padding-top: 14px;
+ }
+ .navbar-persistent {
+ font-size: @font-size-large;
+ }
+ .navbar-primary {
+ font-size: @font-size-large;
+ #gradient .vertical(@navbar-pf-navbar-primary-bg-color-start, @navbar-pf-navbar-primary-bg-color-stop);
+ &.persistent-secondary {
+ .context {
+ .dropdown-menu {
+ top: auto;
+ }
+ }
+ .dropup .dropdown-menu {
+ bottom: -5px;
+ top: auto;
+ }
+ > li {
+ position: static;
+ &.active {
+ margin-bottom: 32px;
+ > .navbar-persistent {
+ display: block;
+ left: 0;
+ position: absolute;
+ }
+ }
+ > .navbar-persistent {
+ background: @navbar-pf-navbar-navbar-persistent-bg-color;
+ border-bottom: 1px solid @navbar-pf-navbar-navbar-persistent-border-color;
+ padding: 0;
+ width: 100%;
+ a {
+ text-decoration: none !important;
+ }
+ > li {
+ &.active {
+ &, &:hover {
+ .tab-indicator(@background: @nav-tabs-active-link-hover-color, @left: 20px, @right: 20px);
+ }
+ > a, > a:hover, &:hover > a {
+ color: @link-color !important;
+ }
+ .active > a {
+ color: @navbar-pf-active-color;
+ }
+ }
+ &.dropdown-submenu {
+ &:hover > .dropdown-menu {
+ display: none;
+ }
+ &.open {
+ > .dropdown-menu {
+ display: block;
+ left: 20px;
+ margin-top: 1px;
+ top: 100%;
+ }
+ > .dropdown-toggle {
+ color: @gray-darker;
+ &:after {
+ border-top-color: @gray-darker;
+ }
+ }
+ }
+ > .dropdown-toggle {
+ padding-right: 35px !important;
+ &:after {
+ position: absolute;
+ right: 20px;
+ top: 10px;
+ }
+ }
+ }
+ &:hover, &.open {
+ .tab-indicator(@left: 20px, @right: 20px);
+ > a {
+ color: @gray-darker;
+ &:after {
+ border-top-color: @gray-darker;
+ }
+ }
+ }
+ > a {
+ background-color: transparent;
+ display: block;
+ line-height: 1;
+ padding: 9px 20px;
+ &.dropdown-toggle {
+ padding-right: 35px;
+ &:after {
+ font-size: @font-size-large + 1;
+ position: absolute;
+ right: 20px;
+ top: 9px;
+ }
+ }
+ &:hover {
+ color: @gray-darker;
+ }
+ }
+ a {
+ color: @gray-pf;
+ }
+ }
+ }
+ }
+ }
+ > li > a {
+ border-bottom: 1px solid transparent;
+ border-top: 1px solid transparent;
+ position: relative;
+ margin: -1px 0 0;
+ &:hover {
+ background-color: @navbar-pf-navbar-primary-hover-bg-color-stop;
+ border-top-color: @navbar-pf-navbar-primary-hover-border-color;
+ color: @navbar-pf-color;
+ #gradient .vertical(@navbar-pf-navbar-primary-hover-bg-color-start, @navbar-pf-navbar-primary-hover-bg-color-stop);
+ }
+ }
+ > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
+ background-color: @navbar-pf-navbar-primary-active-bg-color-stop;
+ border-bottom-color: @navbar-pf-navbar-primary-active-bg-color-stop;
+ border-top-color: @navbar-pf-navbar-primary-active-border-color;
+ .box-shadow(none);
+ color: @navbar-pf-active-color;
+ #gradient .vertical(@navbar-pf-navbar-primary-active-bg-color-start, @navbar-pf-navbar-primary-active-bg-color-stop);
+ }
+ li.dropdown.context {
+ border-bottom: 0;
+ > a {
+ background-color: @navbar-pf-navbar-primary-context-bg-color-stop;
+ border-bottom-color: @navbar-pf-navbar-primary-context-border-color;
+ border-right: 1px solid @navbar-pf-navbar-primary-context-border-color;
+ border-top-color: @navbar-pf-navbar-primary-context-border-top-color;
+ font-weight: 600;
+ #gradient .vertical(@navbar-pf-navbar-primary-context-bg-color-start, @navbar-pf-navbar-primary-context-bg-color-stop);
+ &:hover {
+ background-color: @navbar-pf-navbar-primary-context-hover-bg-color-stop;
+ border-bottom-color: @navbar-pf-navbar-primary-context-hover-border-color;
+ border-right-color: @navbar-pf-navbar-primary-context-hover-border-color;
+ border-top-color: @navbar-pf-navbar-primary-context-hover-border-top-color;
+ #gradient .vertical(@navbar-pf-navbar-primary-context-hover-bg-color-start, @navbar-pf-navbar-primary-context-hover-bg-color-stop);
+ }
+ }
+ &.open > a {
+ background-color: @navbar-pf-navbar-primary-context-active-bg-color-stop;
+ border-bottom-color: @navbar-pf-navbar-primary-context-active-border-color;
+ border-right-color: @navbar-pf-navbar-primary-context-active-border-right-color;
+ border-top-color: @navbar-pf-navbar-primary-context-active-border-top-color;
+ #gradient .vertical(@navbar-pf-navbar-primary-context-active-bg-color-start, @navbar-pf-navbar-primary-context-active-bg-color-stop);
+ }
+ }
+ }
+ .navbar-utility {
+ border-bottom: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
+ background: @navbar-pf-navbar-utility-open-bg-color;
+ color: @navbar-pf-navbar-utility-color;
+ }
+ > li > a {
+ border-left: 1px solid @navbar-pf-navbar-utility-border-color;
+ color: @navbar-pf-navbar-utility-color !important;
+ padding: 7px 10px;
+ &:hover {
+ background: @navbar-pf-navbar-utility-hover-bg-color;
+ border-left-color: @navbar-pf-navbar-utility-hover-border-color;
+ }
+ }
+ > li.open > a {
+ border-left-color: @navbar-pf-navbar-utility-open-border-color;
+ color: @navbar-pf-active-color !important;
+ }
+ li.dropdown > .dropdown-toggle {
+ padding-left: 26px;
+ .pficon-user {
+ left: 10px;
+ top: 7px;
+ }
+ }
+ .open .dropdown-menu {
+ left: auto;
+ right: 0;
+ .dropdown-menu {
+ left: auto;
+ right: 100%;
+ }
+ }
+ }
+ .open {
+ .dropdown-menu {
+ border-top-width: 0 !important;
+ }
+ .dropdown-submenu > .dropdown-menu {
+ border-top-width: 1px !important;
+ }
+ }
+ }
+}
+@media (max-width: 360px) {
+ .navbar-pf {
+ .navbar-brand {
+ margin-left: 10px;
+ width: 75%;
+ img {
+ height: auto;
+ max-width: 100%;
+ }
+ }
+ .navbar-toggle {
+ padding-left: 0;
+ }
+ }
+}
\ No newline at end of file
projects / cascardo / ipsilon.git / blobdiff