diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-01-27 18:15:31 +0100 |
---|---|---|
committer | Simo Sorce <simo@redhat.com> | 2014-02-17 09:46:38 -0500 |
commit | 05a4b2436e2aa51ba8b197ce38059163faa928ae (patch) | |
tree | cb1c5ae3ca420ffc66781aabcacd9b70e6f9073f /less/patternfly/navbar.less | |
parent | fa5bb8dca04e2876d9def529a77b5273b5243169 (diff) | |
download | ipsilon-05a4b2436e2aa51ba8b197ce38059163faa928ae.tar.gz ipsilon-05a4b2436e2aa51ba8b197ce38059163faa928ae.tar.xz ipsilon-05a4b2436e2aa51ba8b197ce38059163faa928ae.zip |
Add PatternFly files
Signed-off-by: Petr Vobornik <pvoborni@redhat.com>
Reviewed-by: Simo Sorce <simo@redhat.com>
Diffstat (limited to 'less/patternfly/navbar.less')
-rw-r--r-- | less/patternfly/navbar.less | 431 |
1 files changed, 431 insertions, 0 deletions
diff --git a/less/patternfly/navbar.less b/less/patternfly/navbar.less new file mode 100644 index 0000000..71539b0 --- /dev/null +++ b/less/patternfly/navbar.less @@ -0,0 +1,431 @@ +// +// 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 |