// Bootswatch.less // Swatch: Simplex // Version: 2.1.0 // ----------------------------------------------------- @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700'); @boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2); // TYPOGRAPHY // ----------------------------------------------------- h6 { color: @headingsColor; } // NAVBAR // ----------------------------------------------------- .navbar { .navbar-inner { .box-shadow(inset 0 -1px #CFCACA); } .brand { padding: 12px 20px 8px; font-family: @headingsFontFamily; font-weight: bold; &:hover { color: @linkColor; } } .nav > li > a { padding: 13px 15px 6px; font-family: @headingsFontFamily; font-weight: bold; text-shadow: none; &:hover { text-decoration: none; } } .nav .active > a, .nav .active > a:hover { background-color: transparent; } .navbar-text { padding: 13px 15px 7px; line-height: 19px; font-family: @headingsFontFamily; color: @grayLight; } .divider-vertical { height: @navbarHeight - 1; background-color: @hrBorder; } .navbar-search { margin-top: 5px; input[type="text"] { margin-bottom: 5px; } } .dropdown-menu a { font-family: @headingsFontFamily; } .nav li.dropdown.open > .dropdown-toggle, .nav li.dropdown.active > .dropdown-toggle:hover { color: @linkColor; } .nav li.dropdown .dropdown-toggle .caret { border-top-color: @textColor; border-bottom-color: @textColor; opacity: 1; } .nav li.dropdown .dropdown-toggle:hover .caret, .nav li.dropdown.active > .dropdown-toggle .caret, .nav li.dropdown.open .dropdown-toggle .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; } .nav > .active > a, .nav > .active > a:hover, .nav > .active > a:focus { // .box-shadow(none); } .nav-collapse.collapse { .nav li > a { color: @textColor; &:hover { background-image: none; background-color: @dropdownLinkBackgroundHover; } } .navbar-form, .navbar-search { border-top: 1px solid rgba(128, 128, 128, 0.3); border-bottom: 1px solid rgba(128, 128, 128, 0.3); } } &-inverse { .navbar-inner { .box-shadow(none); } .brand:hover { color: @white; } .nav li.dropdown.open .dropdown-toggle { color: @white; } .nav li.dropdown .dropdown-toggle .caret, .nav li.dropdown .dropdown-toggle:hover .caret, .nav li.dropdown.active .dropdown-toggle .caret, .nav li.dropdown.open .dropdown-toggle .caret { border-top-color: @white; border-bottom-color: @white; } .nav-collapse.collapse { .nav li > a { color: @white; &:hover { background-color: rgba(255, 255, 255, 0.1); } } .nav-header { color: rgba(255, 255, 255, 0.7); } } } } div.subnav { background-image: none; background-color: @navbarBackground; border-bottom: 1px solid transparent; .box-shadow(@boxShadow); font-family: @headingsFontFamily; &.subnav-fixed { .box-shadow(inset 0 5px #fff~"," @boxShadow); } .nav > li > a { padding: 14px 12px 10px; color: @navbarText; border-left-color: transparent; border-right-color: transparent; &:hover { background-color: transparent; color: @linkColor; } } .nav > li.active > a, .nav > li.active > a:hover { border-left-color: transparent; border-right-color: transparent; background-color: transparent; .box-shadow(none); color: @linkColor; } .nav > li.dropdown.open > a, .nav > li.dropdown.open > a:hover { border-left-color: transparent; border-right-color: transparent; background-color: transparent; color: @linkColor; } .nav li.dropdown .dropdown-toggle .caret { border-top-color: @textColor; border-bottom-color: @textColor; opacity: 1; } .nav li.dropdown .dropdown-toggle:hover .caret, .nav li.dropdown.active .dropdown-toggle .caret, .nav li.dropdown.open .dropdown-toggle .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; opacity: 1; } .dropdown.open:hover .dropdown-toggle { background-color: transparent; } } // NAV // ----------------------------------------------------- .nav .nav-header { font-size: 13px; font-weight: normal; text-transform: none; } .nav-tabs { & > li > a { background-color: darken(@bodyBackground, 3%); border: 1px solid #ccc; color: @textColor; &:hover { border: 1px solid #ccc; background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } & > li.active > a, & > li.active > a:hover { background-color: @bodyBackground; } .dropdown { .dropdown-toggle .caret { border-top-color: @textColor; border-bottom-color: @textColor; opacity: 1; } &:hover .dropdown-toggle .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; } } .dropdown.open .dropdown-toggle { background-color: @dropdownLinkBackgroundHover; border-color: #ccc; color: @linkColor; .caret, &:hover .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; opacity: 1; } } .dropdown-menu { .border-radius(0); a { padding: 8px 15px 3px; } } } .tabbable { .nav-tabs > li > a, .nav-tabs > li > a:hover { border: 1px solid #ccc; } .nav-tabs > li.active > a { border-bottom: 1px solid transparent; } &.tabs-below > .nav-tabs > li.active > a, &.tabs-left > .nav-tabs > li.active > a, &.tabs-right > .nav-tabs > li.active > a { border-bottom: 1px solid #ccc; } } .nav-pills { li > a { color: @textColor; &:hover { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } li.active > a, li.active > a:hover { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } .dropdown .dropdown-toggle .caret { border-top-color: @textColor; border-bottom-color: @textColor; opacity: 1; } .dropdown .dropdown-toggle:hover .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; } .dropdown.open .dropdown-toggle, .dropdown.open:hover .dropdown-toggle { background-color: @dropdownLinkBackgroundHover; color: @linkColor; .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; } } } .nav-list { li > a { color: @textColor; &:hover { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } li.active > a, li.active > a:hover { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } // FORMS // ----------------------------------------------------- legend { border-bottom: 1px solid #ddd; font-family: @headingsFontFamily; } .navbar-search .search-query { border: 1px solid #ddd; .border-radius(0); background-color: @bodyBackground; color: @gray; } .help-inline, .help-block { font-size: 13px; } .input-append .btn, .input-prepend .btn { line-height: 16px; } // BUTTONS // ----------------------------------------------------- .btn { padding-top: .6em; font-family: @headingsFontFamily; font-weight: bold; } // MODALS // ----------------------------------------------------- .modal-header { border-bottom: none; } .modal-header, .modal-body { background-color: @navbarBackground; } .modal-footer { background-color: @bodyBackground; } // MISCELLANEOUS // ----------------------------------------------------- i[class^="icon-"]{ opacity: 0.5; vertical-align: -2px; } hr { border-bottom: none; } .progress { #gradient > .vertical(#e0e0e0, #e8e8e8); } .label { padding: 4px 4px 3px; margin-left: 1px; margin-right: 1px; line-height: 26px; font-weight: normal; } .hero-unit { background-color: @navbarBackground; .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); } .well { .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); border: none; } .thumbnail { padding: 10px; background-color: @white; } .breadcrumb { .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); border: 0px solid transparent; li { padding-top: 5px; text-shadow: none; } a { text-shadow: none; } a:hover { text-decoration: none; } } .pagination { li > a { padding: 4px 14px 0; color: @textColor; &:hover { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } li.active > a { background-color: @dropdownLinkBackgroundHover; color: @linkColor; } } @media (max-width: 979px) { .nav-collapse.collapse .navbar-form, .nav-collapse.collapse .navbar-search { border-top: 1px solid @grayLighter; border-bottom: 1px solid @grayLighter; } }