+++ /dev/null
-//
-// Navbars (Redux)
-// --------------------------------------------------
-
-
-// COMMON STYLES
-// -------------
-
-// Base class and wrapper
-.navbar {
- overflow: visible;
- margin-bottom: @baseLineHeight;
-
- // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
- *position: relative;
- *z-index: 2;
-}
-
-// Inner for background effects
-// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
-.navbar-inner {
- min-height: @navbarHeight;
- padding-left: 20px;
- padding-right: 20px;
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
- border: 1px solid @navbarBorder;
- .border-radius(@baseBorderRadius);
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
-
- // Prevent floats from breaking the navbar
- .clearfix();
-}
-
-// Set width to auto for default container
-// We then reset it for fixed navbars in the #gridSystem mixin
-.navbar .container {
- width: auto;
-}
-
-// Override the default collapsed state
-.nav-collapse.collapse {
- height: auto;
- overflow: visible;
-}
-
-
-// Brand: website or project name
-// -------------------------
-.navbar .brand {
- float: left;
- display: block;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
- margin-left: -20px; // negative indent to left-align the text down the page
- font-size: 20px;
- font-weight: 200;
- color: @navbarBrandColor;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
- &:hover,
- &:focus {
- text-decoration: none;
- }
-}
-
-// Plain text in topbar
-// -------------------------
-.navbar-text {
- margin-bottom: 0;
- line-height: @navbarHeight;
- color: @navbarText;
-}
-
-// Janky solution for now to account for links outside the .nav
-// -------------------------
-.navbar-link {
- color: @navbarLinkColor;
- &:hover,
- &:focus {
- color: @navbarLinkColorHover;
- }
-}
-
-// Dividers in navbar
-// -------------------------
-.navbar .divider-vertical {
- height: @navbarHeight;
- margin: 0 9px;
- border-left: 1px solid @navbarBackground;
- border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
- .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.navbar .btn-group .btn,
-.navbar .input-prepend .btn,
-.navbar .input-append .btn,
-.navbar .input-prepend .btn-group,
-.navbar .input-append .btn-group {
- margin-top: 0; // then undo the margin here so we don't accidentally double it
-}
-
-// Navbar forms
-// -------------------------
-.navbar-form {
- margin-bottom: 0; // remove default bottom margin
- .clearfix();
- input,
- select,
- .radio,
- .checkbox {
- .navbarVerticalAlign(30px); // Vertically center in navbar
- }
- input,
- select,
- .btn {
- display: inline-block;
- margin-bottom: 0;
- }
- input[type="image"],
- input[type="checkbox"],
- input[type="radio"] {
- margin-top: 3px;
- }
- .input-append,
- .input-prepend {
- margin-top: 5px;
- white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
- input {
- margin-top: 0; // remove the margin on top since it's on the parent
- }
- }
-}
-
-// Navbar search
-// -------------------------
-.navbar-search {
- position: relative;
- float: left;
- .navbarVerticalAlign(30px); // Vertically center in navbar
- margin-bottom: 0;
- .search-query {
- margin-bottom: 0;
- padding: 4px 14px;
- #font > .sans-serif(13px, normal, 1);
- .border-radius(15px); // redeclare because of specificity of the type attribute
- }
-}
-
-
-
-// Static navbar
-// -------------------------
-
-.navbar-static-top {
- position: static;
- margin-bottom: 0; // remove 18px margin for default navbar
- .navbar-inner {
- .border-radius(0);
- }
-}
-
-
-
-// Fixed navbar
-// -------------------------
-
-// Shared (top/bottom) styles
-.navbar-fixed-top,
-.navbar-fixed-bottom {
- position: fixed;
- right: 0;
- left: 0;
- z-index: @zindexFixedNavbar;
- margin-bottom: 0; // remove 18px margin for default navbar
-}
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
- border-width: 0 0 1px;
-}
-.navbar-fixed-bottom .navbar-inner {
- border-width: 1px 0 0;
-}
-.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
- padding-left: 0;
- padding-right: 0;
- .border-radius(0);
-}
-
-// Reset container width
-// Required here as we reset the width earlier on and the grid mixins don't override early enough
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- #grid > .core > .span(@gridColumns);
-}
-
-// Fixed to top
-.navbar-fixed-top {
- top: 0;
-}
-.navbar-fixed-top,
-.navbar-static-top {
- .navbar-inner {
- .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
- }
-}
-
-// Fixed to bottom
-.navbar-fixed-bottom {
- bottom: 0;
- .navbar-inner {
- .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
- }
-}
-
-
-
-// NAVIGATION
-// ----------
-
-.navbar .nav {
- position: relative;
- left: 0;
- display: block;
- float: left;
- margin: 0 10px 0 0;
-}
-.navbar .nav.pull-right {
- float: right; // redeclare due to specificity
- margin-right: 0; // remove margin on float right nav
-}
-.navbar .nav > li {
- float: left;
-}
-
-// Links
-.navbar .nav > li > a {
- float: none;
- // Vertically center the text given @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
- color: @navbarLinkColor;
- text-decoration: none;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-}
-.navbar .nav .dropdown-toggle .caret {
- margin-top: 8px;
-}
-
-// Hover/focus
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
- color: @navbarLinkColorHover;
- text-decoration: none;
-}
-
-// Active nav items
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
- color: @navbarLinkColorActive;
- text-decoration: none;
- background-color: @navbarLinkBackgroundActive;
- .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
-}
-
-// Navbar button for toggling navbar items in responsive layouts
-// These definitions need to come after '.navbar .btn'
-.navbar .btn-navbar {
- display: none;
- float: right;
- padding: 7px 10px;
- margin-left: 5px;
- margin-right: 5px;
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
-}
-.navbar .btn-navbar .icon-bar {
- display: block;
- width: 18px;
- height: 2px;
- background-color: #f5f5f5;
- .border-radius(1px);
- .box-shadow(0 1px 0 rgba(0,0,0,.25));
-}
-.btn-navbar .icon-bar + .icon-bar {
- margin-top: 3px;
-}
-
-
-
-// Dropdown menus
-// --------------
-
-// Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
- &:before {
- content: '';
- display: inline-block;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-bottom: 7px solid #ccc;
- border-bottom-color: @dropdownBorder;
- position: absolute;
- top: -7px;
- left: 9px;
- }
- &:after {
- content: '';
- display: inline-block;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid @dropdownBackground;
- position: absolute;
- top: -6px;
- left: 10px;
- }
-}
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
- &:before {
- border-top: 7px solid #ccc;
- border-top-color: @dropdownBorder;
- border-bottom: 0;
- bottom: -7px;
- top: auto;
- }
- &:after {
- border-top: 6px solid @dropdownBackground;
- border-bottom: 0;
- bottom: -6px;
- top: auto;
- }
-}
-
-// Caret should match text color on hover/focus
-.navbar .nav li.dropdown > a:hover .caret,
-.navbar .nav li.dropdown > a:focus .caret {
- border-top-color: @navbarLinkColorHover;
- border-bottom-color: @navbarLinkColorHover;
-}
-
-// Remove background color from open dropdown
-.navbar .nav li.dropdown.open > .dropdown-toggle,
-.navbar .nav li.dropdown.active > .dropdown-toggle,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarLinkBackgroundActive;
- color: @navbarLinkColorActive;
-}
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColor;
- border-bottom-color: @navbarLinkColor;
-}
-.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColorActive;
- border-bottom-color: @navbarLinkColorActive;
-}
-
-// Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
- left: auto;
- right: 0;
- &:before {
- left: auto;
- right: 12px;
- }
- &:after {
- left: auto;
- right: 13px;
- }
- .dropdown-menu {
- left: auto;
- right: 100%;
- margin-left: 0;
- margin-right: -1px;
- .border-radius(6px 0 6px 6px);
- }
-}
-
-
-// Inverted navbar
-// -------------------------
-
-.navbar-inverse {
-
- .navbar-inner {
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
- border-color: @navbarInverseBorder;
- }
-
- .brand,
- .nav > li > a {
- color: @navbarInverseLinkColor;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- &:hover,
- &:focus {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- .brand {
- color: @navbarInverseBrandColor;
- }
-
- .navbar-text {
- color: @navbarInverseText;
- }
-
- .nav > li > a:focus,
- .nav > li > a:hover {
- background-color: @navbarInverseLinkBackgroundHover;
- color: @navbarInverseLinkColorHover;
- }
-
- .nav .active > a,
- .nav .active > a:hover,
- .nav .active > a:focus {
- color: @navbarInverseLinkColorActive;
- background-color: @navbarInverseLinkBackgroundActive;
- }
-
- // Inline text links
- .navbar-link {
- color: @navbarInverseLinkColor;
- &:hover,
- &:focus {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- // Dividers in navbar
- .divider-vertical {
- border-left-color: @navbarInverseBackground;
- border-right-color: @navbarInverseBackgroundHighlight;
- }
-
- // Dropdowns
- .nav li.dropdown.open > .dropdown-toggle,
- .nav li.dropdown.active > .dropdown-toggle,
- .nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarInverseLinkBackgroundActive;
- color: @navbarInverseLinkColorActive;
- }
- .nav li.dropdown > a:hover .caret,
- .nav li.dropdown > a:focus .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
- }
- .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColor;
- border-bottom-color: @navbarInverseLinkColor;
- }
- .nav li.dropdown.open > .dropdown-toggle .caret,
- .nav li.dropdown.active > .dropdown-toggle .caret,
- .nav li.dropdown.open.active > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
- }
-
- // Navbar search
- .navbar-search {
- .search-query {
- color: @white;
- background-color: @navbarInverseSearchBackground;
- border-color: @navbarInverseSearchBorder;
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
- .transition(none);
- .placeholder(@navbarInverseSearchPlaceholderColor);
-
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
- &:focus,
- &.focused {
- padding: 5px 15px;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- background-color: @navbarInverseSearchBackgroundFocus;
- border: 0;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- outline: 0;
- }
- }
- }
-
- // Navbar collapse button
- .btn-navbar {
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
- }
-
-}
git://source.jalview.org / proteocache.git / blobdiff