kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

clean up some css for github issues: input prepend z-index, modals revamped for responsive

This commit is contained in:
Mark Otto 2011-12-27 15:40:58 -06:00
parent 5801c4d766
commit fec02f5045
7 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
bootstrap.css vendored
View File

@ -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: Tue Dec 27 12:39:01 CST 2011
* Date: Tue Dec 27 15:23:07 CST 2011
*/
html, body {
margin: 0;
@ -602,6 +602,7 @@ select, input[type=file] {
}
select {
background-color: #ffffff;
vertical-align: middle;
}
select[multiple] {
height: inherit;
@ -904,17 +905,12 @@ textarea[readonly] {
display: block;
max-width: 600px;
}
.input-prepend, .input-append {
overflow: hidden;
}
.input-prepend input, .input-append input {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-prepend .add-on, .input-append .add-on {
position: relative;
z-index: 2;
float: left;
display: block;
width: auto;
@ -2574,6 +2570,16 @@ a.thumbnail:hover {
.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 {

8
bootstrap.min.css vendored
View File

@ -100,7 +100,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;
input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;}
select{background-color:#ffffff;}
select{background-color:#ffffff;vertical-align:middle;}
select[multiple]{height:inherit;}
input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
textarea{height:auto;}
@ -146,8 +146,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;}
.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;}
.help-block{display:block;max-width:600px;}
.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
@ -339,4 +339,4 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.thumbnail>img{display:block;max-width:100%;}
.thumbnail .caption{padding:9px;}
.hidden{display:none;visibility:hidden;}
@media (max-width: 480px){.modal{width:auto;margin:0;} .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;}}@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;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.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;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .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:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@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){.modal{width:auto;margin:0;} .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;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.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;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .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:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@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;}}

2
docs/base-css.html
View File

@ -894,7 +894,7 @@ Form states
<span class="add-on">@</span>
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
</div>
<span class="help-block">Here's some help text</span>
<p class="help-block">Here's some help text</p>
</div>
</fieldset>
<fieldset class="control-group">

2
docs/components.html
View File

@ -716,7 +716,7 @@
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript &raquo;</a></p>
</div>
<div class="span9">
<div class="well" style="background-color: #888; border: none; padding: 40px;">
<div class="well" style="background-color: #888; border: none; ">
<!-- Modal -->
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">

4
lib/forms.less
View File

@ -96,6 +96,7 @@ input[type=file] {
// Chrome on Linux and Mobile Safari need background-color
select {
background-color: @white;
vertical-align: middle;
}
// Make multiple select elements height not fixed
@ -304,13 +305,10 @@ textarea[readonly] {
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
overflow: hidden;
input {
.border-radius(0 3px 3px 0);
}
.add-on {
position: relative;
z-index: 2;
float: left;
display: block;
width: auto;

3
lib/modals.less
View File

@ -13,7 +13,8 @@
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.modal-backdrop,
.modal-backdrop.fade.in {
.opacity(80);
}

12
lib/responsive.less
View File

@ -43,6 +43,18 @@
.horizontal-form .form-actions {
padding-left: 0;
}
// Modals
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
.close {
padding: 10px;
}
}
}