From: Mark Otto Date: Sun, 8 Jan 2012 11:00:06 +0000 (-0800) Subject: move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap... X-Git-Tag: v2.0.0~6^2~324^2~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b7acbd8476060bc1f2da9837693b0b86b68423c5;p=thirdparty%2Fbootstrap.git move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap links with position absolute --- diff --git a/bootstrap.css b/bootstrap.css index 57acf87757..a9a104ccce 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Jan 8 02:30:05 PST 2012 + * Date: Sun Jan 8 02:58:37 PST 2012 */ html, body { margin: 0; @@ -3007,53 +3007,6 @@ a.thumbnail:hover { visibility: hidden; } @media (max-width: 480px) { - .modal { - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } - .horizontal-form .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .horizontal-form .controls { - margin-left: 0; - } - .horizontal-form .control-list { - padding-top: 0; - } - .horizontal-form .form-actions { - padding-left: 0; - } - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - } - .modal .close { - padding: 10px; - } -} -@media (max-width: 768px) { - .container { - width: auto; - padding: 0 20px; - } - .row { - margin-left: 0; - } - .row > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } .navbar .nav { position: absolute; top: 0; @@ -3109,6 +3062,59 @@ a.thumbnail:hover { .navbar .nav:hover > li > a:hover { background-color: #333; } + .modal { + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } + .horizontal-form .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .horizontal-form .controls { + margin-left: 0; + } + .horizontal-form .control-list { + padding-top: 0; + } + .horizontal-form .form-actions { + padding-left: 0; + } + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + } + .modal .close { + padding: 10px; + } +} +@media (max-width: 768px) { + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + .container { + width: auto; + padding: 0 20px; + } + .row { + margin-left: 0; + } + .row > [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } } @media (min-width: 768px) and (max-width: 940px) { .container { diff --git a/bootstrap.min.css b/bootstrap.min.css index 916a6b27b5..0159780a6c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;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:-ms-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);} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index 9f8f9ec6ca..e87b8495f4 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -18,6 +18,64 @@ // --------------------- @media (max-width: 480px) { + + // Make the nav work for small devices + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } + } + // Resize modals .modal { width: auto; @@ -63,6 +121,15 @@ // -------------------------------------------------- @media (max-width: 768px) { + + // Unfix the navbar + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + // Remove width from containers .container { width: auto; @@ -80,63 +147,6 @@ margin: 0; } - // Make the nav work for small devices - .navbar { - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - - .nav:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - }