From d4e7d3f04894d308c2278002012fccb6de09b610 Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Thu, 30 Aug 2012 10:29:07 -0400 Subject: all: change how nav-collapse is styled to use a media query --- amelia/bootstrap.css | 61 +++++++++++++++++++++++++----------------------- amelia/bootstrap.min.css | 11 ++------- amelia/bootswatch.less | 33 +++++++++++++++----------- 3 files changed, 53 insertions(+), 52 deletions(-) (limited to 'amelia') diff --git a/amelia/bootstrap.css b/amelia/bootstrap.css index 9c7576c4..82351240 100644 --- a/amelia/bootstrap.css +++ b/amelia/bootstrap.css @@ -4836,41 +4836,44 @@ hr { .navbar .btn-group { padding: 4px; } -.navbar .nav-collapse.collapse .nav li > a { - color: rgba(255, 255, 255, 0.9); - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -.navbar .nav-collapse.collapse .nav li > a:hover { - background-color: #d92432; -} -.navbar .nav-collapse.collapse .dropdown-menu li > a:hover, -.navbar .nav-collapse.collapse .dropdown-menu li > a:focus, -.navbar .nav-collapse.collapse .dropdown-submenu:hover > a { - background-image: none; -} -.navbar .nav-collapse.collapse .navbar-form, -.navbar .nav-collapse.collapse .navbar-search { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - border: none; -} -.navbar .nav-collapse.collapse .navbar-search .search-query { - border: 2px solid rgba(255, 255, 255, 0.9); -} -.navbar .nav-collapse.collapse .nav-header { - color: rgba(255, 255, 255, 0.5); -} .navbar-inverse .dropdown-menu li > a:hover, .navbar-inverse .dropdown-menu li > a:focus, .navbar-inverse .dropdown-submenu:hover > a { background-image: none; background-color: #debb27; } -.navbar-inverse .nav-collapse.collapse .nav li > a:hover { - background-color: #e5c953; +@media (max-width: 979px) { + .navbar .nav-collapse .nav li > a { + color: rgba(255, 255, 255, 0.9); + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } + .navbar .nav-collapse .nav li > a:hover { + background-color: #d92432; + } + .navbar .nav-collapse .dropdown-menu li > a:hover, + .navbar .nav-collapse .dropdown-menu li > a:focus, + .navbar .nav-collapse .dropdown-submenu:hover > a { + background-image: none; + } + .navbar .nav-collapse .navbar-form, + .navbar .nav-collapse .navbar-search { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border: none; + } + .navbar .nav-collapse .navbar-search .search-query { + border: 2px solid rgba(255, 255, 255, 0.9); + } + .navbar .nav-collapse .nav-header { + color: rgba(255, 255, 255, 0.5); + } + .navbar-inverse .nav-collapse .nav li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: #e5c953 !important; + } } div.subnav { background-color: rgba(42, 99, 105, 0.9); diff --git a/amelia/bootstrap.min.css b/amelia/bootstrap.min.css index a24d391b..46c28ed5 100644 --- a/amelia/bootstrap.min.css +++ b/amelia/bootstrap.min.css @@ -819,14 +819,8 @@ hr{border-bottom:1px solid rgba(255, 255, 255, 0.3);} .navbar .navbar-search .search-query{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;padding-top:5px;padding-bottom:5px;} .navbar .navbar-text{margin:17px 15px 14px;line-height:20px;} .navbar .btn,.navbar .btn-group{padding:4px;} -.navbar .nav-collapse.collapse .nav li>a{color:rgba(255, 255, 255, 0.9);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.navbar .nav-collapse.collapse .nav li>a:hover{background-color:#d92432;} -.navbar .nav-collapse.collapse .dropdown-menu li>a:hover,.navbar .nav-collapse.collapse .dropdown-menu li>a:focus,.navbar .nav-collapse.collapse .dropdown-submenu:hover>a{background-image:none;} -.navbar .nav-collapse.collapse .navbar-form,.navbar .nav-collapse.collapse .navbar-search{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:none;} -.navbar .nav-collapse.collapse .navbar-search .search-query{border:2px solid rgba(255, 255, 255, 0.9);} -.navbar .nav-collapse.collapse .nav-header{color:rgba(255, 255, 255, 0.5);} .navbar-inverse .dropdown-menu li>a:hover,.navbar-inverse .dropdown-menu li>a:focus,.navbar-inverse .dropdown-submenu:hover>a{background-image:none;background-color:#debb27;} -.navbar-inverse .nav-collapse.collapse .nav li>a:hover{background-color:#e5c953;} -div.subnav{background-color:rgba(42, 99, 105, 0.9);background-image:none;border:0px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}div.subnav .nav>li.open>a{border-color:transparent;background-color:rgba(255, 255, 255, 0.4);} +@media (max-width:979px){.navbar .nav-collapse .nav li>a{color:rgba(255, 255, 255, 0.9);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.navbar .nav-collapse .nav li>a:hover{background-color:#d92432;} .navbar .nav-collapse .dropdown-menu li>a:hover,.navbar .nav-collapse .dropdown-menu li>a:focus,.navbar .nav-collapse .dropdown-submenu:hover>a{background-image:none;} .navbar .nav-collapse .navbar-form,.navbar .nav-collapse .navbar-search{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:none;} .navbar .nav-collapse .navbar-search .search-query{border:2px solid rgba(255, 255, 255, 0.9);} .navbar .nav-collapse .nav-header{color:rgba(255, 255, 255, 0.5);} .navbar-inverse .nav-collapse .nav li>a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:hover{background-color:#e5c953 !important;}}div.subnav{background-color:rgba(42, 99, 105, 0.9);background-image:none;border:0px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}div.subnav .nav>li.open>a{border-color:transparent;background-color:rgba(255, 255, 255, 0.4);} div.subnav .nav>li>a{color:rgba(255, 255, 255, 0.9);border-color:transparent;} div.subnav .nav>li:first-child>a,div.subnav .nav>li:first-child>a:hover{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} div.subnav .nav>.active>a{background-color:transparent;border-color:transparent;color:rgba(255, 255, 255, 0.9);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} @@ -925,8 +919,7 @@ input,textarea,.search-query,.uneditable-input,.input-append input,.input-append .progress-success.progress-striped .bar{background-color:#48ca3b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-info .bar{background-image:none;background-color:#00bce1;} .progress-info.progress-striped .bar{background-color:#00bce1;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.modal{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} -.modal-header{background-color:#ad1d28;color:#ffffff;} +.modal{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.modal-header{background-color:#ad1d28;color:#ffffff;} .modal-body{color:#444444;}.modal-body h1,.modal-body h2,.modal-body h3,.modal-body h4,.modal-body h5,.modal-body h6,.modal-body legend{color:#ad1d28;} .modal-body label,.modal-body .input-file{color:#444444;} .modal-body .help-block,.modal-body .help-inline{color:#aaaaaa;} diff --git a/amelia/bootswatch.less b/amelia/bootswatch.less index 2aec417c..e319468c 100755 --- a/amelia/bootswatch.less +++ b/amelia/bootswatch.less @@ -104,9 +104,23 @@ hr { padding: 4px; } - .nav-collapse.collapse { + &-inverse { + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus, + .dropdown-submenu:hover > a { + background-image: none; + background-color: @yellow; + } + } +} + +@media (max-width: @navbarCollapseWidth) { + + .navbar .nav-collapse { .nav li > a { + color: @textColor; .border-radius(0); @@ -136,20 +150,11 @@ hr { } } - &-inverse { + .navbar-inverse .nav-collapse { - .dropdown-menu li > a:hover, - .dropdown-menu li > a:focus, - .dropdown-submenu:hover > a { - background-image: none; - background-color: @yellow; - } - - .nav-collapse.collapse { - - .nav li > a:hover { - background-color: lighten(@navbarInverseBackground, 10%); - } + .nav li > a:hover, + .dropdown-menu a:hover { + background-color: lighten(@navbarInverseBackground, 10%) !important; } } } -- cgit v1.2.3