diff options
Diffstat (limited to 'simplex/bootswatch.less')
-rwxr-xr-x | simplex/bootswatch.less | 344 |
1 files changed, 239 insertions, 105 deletions
diff --git a/simplex/bootswatch.less b/simplex/bootswatch.less index eb4c4d72..39ee8b87 100755 --- a/simplex/bootswatch.less +++ b/simplex/bootswatch.less @@ -3,12 +3,14 @@ // Version: 2.0.4 // ----------------------------------------------------- -@boxShadow: 0 1px 1px rgba(0, 0, 0, 0.3); +@import url('http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700'); + +@boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2); // TYPOGRAPHY // ----------------------------------------------------- -h6, .hero-unit { +h6 { color: @headingsColor; } @@ -19,32 +21,30 @@ h6, .hero-unit { .navbar-inner { .box-shadow(inset 0 -1px #CFCACA); - border-bottom: 1px solid #FFF; - border-bottom: none; } .brand { - padding-top: 10px; - color: @headingsColor; + padding: 13px 20px 10px; + font-weight: bold; + + &:hover { + color: @orange; + } } .navbar-text { - padding: 14px 10px 11px; - text-shadow: none; - font-weight: normal; - font-size: 11px; + padding: 15px 20px 9px; line-height: 19px; + color: @grayLight; } .nav > li > a { - padding-top: 14px; + padding: 15px 20px 9px; text-shadow: none; - font-weight: normal; - font-size: 11px; - } - .nav > li > a:hover { - text-decoration: underline; + &:hover { + text-decoration: none; + } } .nav .active > a, @@ -52,24 +52,33 @@ h6, .hero-unit { background-color: transparent; } - .nav-collapse .nav li.dropdown > .dropdown-toggle:hover { - color: @textColor; + .nav li.dropdown.open > .dropdown-toggle, + .nav li.dropdown.active > .dropdown-toggle:hover { + color: @linkColor; } - .nav li.dropdown .dropdown-toggle .caret, - .nav li.open.dropdown .dropdown-toggle .caret { + .nav li.dropdown .dropdown-toggle .caret { border-top-color: @textColor; + border-bottom-color: @textColor; + opacity: 1; } - .nav-collapse .nav li > a { - color: @headingsColor; - font-weight: normal; + .nav li.dropdown:hover .dropdown-toggle .caret, + .nav li.dropdown.active > .dropdown-toggle .caret, + .nav li.dropdown.open .dropdown-toggle .caret { + border-top-color: @linkColor; + border-bottom-color: @linkColor; } - .nav-collapse .nav li > a:hover { - background-color: transparent; - color: @black; - text-decoration: underline; + .nav-collapse.collapse { + + .nav li > a { + color: @textColor; + + &:hover { + background-color: @grayLighter; + } + } } } @@ -85,21 +94,50 @@ div.subnav { } .nav > li > a { - padding-top: 12px; + padding: 14px 12px 10px; color: @navbarText; - font-weight: normal; - font-size: 11px; + border-left-color: transparent; + border-right-color: transparent; &:hover { - text-decoration: underline; + background-color: transparent; + color: @linkColor; } } - .nav > li.open > a, - .nav > li.open > a:hover { + .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; - border-left: 1px solid whiteSmoke; - border-right: 1px solid #E5E5E5; + color: @linkColor; + } + + .nav li.dropdown .dropdown-toggle .caret { + border-top-color: @textColor; + border-bottom-color: @textColor; + opacity: 1; + } + + .nav li.dropdown:hover .dropdown-toggle .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-menu a:hover { + background-color: @dropdownLinkBackgroundHover; } } @@ -114,49 +152,142 @@ div.subnav { // ----------------------------------------------------- .nav .nav-header { + font-size: 13px; font-weight: normal; text-transform: none; } -.nav > li > a { - font-size: 11px; - border-width: 1px; -} +.nav-tabs { -.dropdown-menu { - .border-radius(0); - font-size: 11px; -} + & > li > a { + background-color: darken(@bodyBackground, 3%); + border: 1px solid #ccc; + color: @textColor; -.dropdown.open .dropdown-toggle { - color: @headingsColor; -} + &:hover { + border: 1px solid #ccc; + background-color: @dropdownLinkBackgroundHover; + color: @linkColor; + } + } -.nav-tabs > li > a, -.nav-tabs > li > a:hover, -.tabbable > .nav-tabs > li > a, -.tabbable > .nav-tabs > li > a:hover { - background-color: darken(@bodyBackground, 3%); - border: 1px solid #ccc; -} + & > li.active > a, + & > li.active > a:hover { + background-color: @bodyBackground; + } -.tabbable > .nav-tabs > li.active > a { - border-bottom: 1px solid transparent; + .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.tabs-below > .nav-tabs > li.active > a, -.tabbable.tabs-left > .nav-tabs > li.active > a, -.tabbable.tabs-right > .nav-tabs > li.active > a { - border-bottom: 1px solid #ccc; +.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:hover { - background-color: transparent; +.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:hover .dropdown-toggle .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-tabs > li.active > a, -.nav-tabs > li.active > a:hover { - background-color: @bodyBackground; +.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 @@ -174,7 +305,7 @@ legend { } .help-inline, .help-block { - font-size: 11px; + font-size: 13px; } // TABLES @@ -185,44 +316,24 @@ legend { // ----------------------------------------------------- .btn { - .border-radius(2px); - font-weight: bold; - #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); -} - -.btn-primary { - .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground); -} - -.btn-warning { - .buttonBackground(lighten(@orange, 5%), @orange); -} - -.btn-danger { - .buttonBackground(lighten(@red, 5%), @red); + padding: 6px 10px 2px; } -.btn-success { - .buttonBackground(lighten(@green, 5%), @green); +.btn-large { + padding: 11px 14px 8px; } -.btn-info { - .buttonBackground(lighten(#5bc0de, 5%), #5bc0de); +.btn-small { + padding: 5px 9px 3px; } -.btn-inverse { - .buttonBackground(lighten(@purple, 5%), @purple); +.btn-micro { + padding: 3px 6px 1px; } // MODALS // ----------------------------------------------------- -.modal, -.modal-header, -.modal-footer { - .border-radius(0); -} - .modal-header { border-bottom: none; } @@ -240,40 +351,63 @@ legend { // ----------------------------------------------------- i[class^="icon-"]{ - opacity: 0.6; + opacity: 0.5; vertical-align: -2px; } -.alert, .alert p, .alert-heading { - font-size: 11px; -} - .progress { #gradient > .vertical(#e0e0e0, #e8e8e8); } .label { - font-size: 11px; + padding: 4px 4px 3px; font-weight: normal; } .hero-unit { - background-color: @white; - .box-shadow(@boxShadow); + background-color: @navbarBackground; + .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); } .well { - .box-shadow(@boxShadow); + .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); background-color: @white; border: none; } .breadcrumb { - .box-shadow(@boxShadow); + .box-shadow(@boxShadow~", "-1px -1px 0 rgba(0, 0, 0, 0.1)); border: 0px solid transparent; - font-size: 11px; + + li { + padding-top: 5px; + text-shadow: none; + } + + a { + text-shadow: none; + } + + a:hover { + text-decoration: none; + } } -footer.footer p { - font-size: 11px; +.pagination { + + li > a { + padding: 4px 14px 0; + color: @textColor; + + &:hover { + background-color: @dropdownLinkBackgroundHover; + color: @linkColor; + } + } + + li.active > a { + background-color: @dropdownLinkBackgroundHover; + color: @linkColor; + } + } |