diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/dropdowns.less | 6 | ||||
| -rw-r--r-- | less/forms.less | 174 | ||||
| -rw-r--r-- | less/mixins.less | 25 | ||||
| -rw-r--r-- | less/navbar.less | 8 | ||||
| -rw-r--r-- | less/reset.less | 5 | ||||
| -rw-r--r-- | less/responsive-767px-max.less | 4 | ||||
| -rw-r--r-- | less/responsive-navbar.less | 11 | ||||
| -rw-r--r-- | less/tests/css-tests.css | 1 | ||||
| -rw-r--r-- | less/tests/css-tests.html | 67 | ||||
| -rw-r--r-- | less/tests/forms.html | 179 | ||||
| -rw-r--r-- | less/tests/navbar.html | 108 | ||||
| -rw-r--r-- | less/type.less | 5 | ||||
| -rw-r--r-- | less/variables.less | 3 |
13 files changed, 482 insertions, 114 deletions
diff --git a/less/dropdowns.less b/less/dropdowns.less index 6c60385e55..5e232556a6 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -71,7 +71,7 @@ // Dividers (basically an hr) within the dropdown .divider { - .nav-divider(); + .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); } // Links within the dropdown menu @@ -103,14 +103,14 @@ // make the menu appear below buttons that appeared later on the page *z-index: @zindexDropdown; - .dropdown-menu { + & > .dropdown-menu { display: block; } } // Right aligned dropdowns // --------------------------- -.pull-right .dropdown-menu { +.pull-right > .dropdown-menu { right: 0; left: auto; } diff --git a/less/forms.less b/less/forms.less index 7d967c6b3d..a7e525a761 100644 --- a/less/forms.less +++ b/less/forms.less @@ -27,7 +27,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; // Small small { @@ -55,72 +55,101 @@ textarea { label { display: block; margin-bottom: 5px; - color: @grayDark; } -// Inputs, Textareas, Selects -input, -textarea, +// Form controls +// ------------------------- + +// Shared size and type resets select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], .uneditable-input { display: inline-block; - width: 210px; height: @baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; - background-color: @inputBackground; - border: 1px solid @inputBorder; - .border-radius(@inputBorderRadius); } -.uneditable-textarea { - width: auto; + +// Reset appearance properties for textual inputs and textarea +// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) +input, +textarea { + width: 210px; +} +// Reset height since textareas have rows +textarea { height: auto; } +// Everything else +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: @inputBackground; + border: 1px solid @inputBorder; + .border-radius(@inputBorderRadius); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @transition: border linear .2s, box-shadow linear .2s; + .transition(@transition); -// Inputs within a label -label input, -label textarea, -label select { - display: block; + // Focus state + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } } -// Mini reset for unique input types -input[type="image"], -input[type="checkbox"], -input[type="radio"] { - width: auto; - height: auto; - padding: 0; +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; - background-color: transparent; - border: 0 \9; /* IE9 and down */ - .border-radius(0); -} -input[type="image"] { - border: 0; } -// Reset the file input to browser defaults -input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - background-color: @inputBackground; - background-color: initial; - border: initial; - .box-shadow(none); +// Reset width of input buttons, radios, checkboxes +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector } -// Help out input buttons -input[type="button"], -input[type="reset"], -input[type="submit"] { +// Make uneditable textareas behave like a textarea +.uneditable-textarea { width: auto; height: auto; } @@ -133,15 +162,10 @@ input[type="file"] { line-height: 28px; } -// Reset line-height for IE -input[type="file"] { - line-height: 18px \9; -} - -// Chrome on Linux and Mobile Safari need background-color +// Make select elements obey height by applying a border select { width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: @inputBackground; + border: 1px solid #bbb; } // Make multiple select elements height not fixed @@ -150,19 +174,12 @@ select[size] { height: auto; } -// Remove shadow from image inputs -input[type="image"] { - .box-shadow(none); -} - -// Make textarea height behave -textarea { - height: auto; -} - -// Hidden inputs -input[type="hidden"] { - display: none; +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); } @@ -204,32 +221,6 @@ input[type="hidden"] { -// FOCUS STATE -// ----------- - -input, -textarea { - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); -} -input:focus, -textarea:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); -} -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - .tab-focus(); - .box-shadow(none); // override for file inputs -} - - - // INPUT SIZES // ----------- @@ -260,8 +251,7 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- -#grid > .input (@gridColumnWidth, @gridGutterWidth); - +#grid > .input(@gridColumnWidth, @gridGutterWidth); @@ -329,7 +319,7 @@ select:focus:required:invalid { margin-top: @baseLineHeight; margin-bottom: @baseLineHeight; background-color: @formActionsBackground; - border-top: 1px solid #ddd; + border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers } @@ -344,7 +334,7 @@ select:focus:required:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(@grayLight); +.placeholder(); diff --git a/less/mixins.less b/less/mixins.less index b107955f57..c3b57ed142 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -81,10 +81,13 @@ // Placeholder text // ------------------------- .placeholder(@color: @placeholderText) { - :-moz-placeholder { + &:-moz-placeholder { color: @color; } - ::-webkit-input-placeholder { + &:-ms-input-placeholder { + color: @color; + } + &::-webkit-input-placeholder { color: @color; } } @@ -166,6 +169,8 @@ color: @textColor; } // Style inputs accordingly + .checkbox, + .radio, input, select, textarea { @@ -312,6 +317,16 @@ column-gap: @columnGap; } +// Optional hyphenation +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; + -o-hyphens: @mode; + hyphens: @mode; +} + // Opacity .opacity(@opacity) { opacity: @opacity / 100; @@ -417,7 +432,7 @@ // Horizontal dividers // ------------------------- // Dividers (basically an hr) within dropdowns and nav lists -.nav-divider() { +.nav-divider(@top: #e5e5e5, @bottom: @white) { // IE7 needs a set width since we gave a height. Restricting just // to IE7 to keep the 1px left/right space in other browsers. // It is unclear where IE is getting the extra space that we need @@ -427,8 +442,8 @@ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px *margin: -5px 0 5px; overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid @white; + background-color: @top; + border-bottom: 1px solid @bottom; } // Button backgrounds diff --git a/less/navbar.less b/less/navbar.less index 4faa7255b4..818f8a5a23 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -123,13 +123,7 @@ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); .transition(none); - // Placeholder text gets special styles; can't be a grouped selector - &:-moz-placeholder { - color: @navbarSearchPlaceholderColor; - } - &::-webkit-input-placeholder { - color: @navbarSearchPlaceholderColor; - } + .placeholder(@navbarSearchPlaceholderColor); // Focus states (we use .focused since IE7-8 and down doesn't support :focus) &:focus, diff --git a/less/reset.less b/less/reset.less index d9ce2b1107..2332e03c30 100644 --- a/less/reset.less +++ b/less/reset.less @@ -81,6 +81,11 @@ img { -ms-interpolation-mode: bicubic; } +// Prevent max-width from affecting Google Maps +#map_canvas img { + max-width: none; +} + // Forms // ------------------------- diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 614c6905c2..fc422d3a25 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -124,6 +124,10 @@ width: auto; margin-left: 0; } + .row-fluid .input-prepend [class*="span"], + .row-fluid .input-append [class*="span"] { + display: inline-block; + } // FORM FIELDS // ----------- diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index d49b8ae12d..8d31db5310 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -9,11 +9,18 @@ padding-top: 0; } // Unfix the navbar - .navbar-fixed-top { + .navbar-fixed-top, + .navbar-fixed-bottom { position: static; + } + .navbar-fixed-top { margin-bottom: @baseLineHeight; } - .navbar-fixed-top .navbar-inner { + .navbar-fixed-bottom { + margin-top: @baseLineHeight; + } + .navbar-fixed-top .navbar-inner, + .navbar-fixed-bottom .navbar-inner { padding: 5px; } .navbar .container { diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index ac764270aa..e0870be449 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -30,6 +30,7 @@ h4 { /* Fluid row inputs */ +#rowInputs .row > [class*=span], #fluidRowInputs .row-fluid > [class*=span] { background-color: rgba(255,0,0,.1); } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index b290186211..0e964e27f4 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -500,6 +500,73 @@ </div><!--/span--> </div><!--/row--> +<h4>Fixed row with inputs</h4> +<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p> + +<div class="rowInputs"> + <div class="row"> + <div class="span12"> + <input class="span1" placeholder="span1"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span2" placeholder="span2"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span3" placeholder="span3"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span4" placeholder="span4"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span5" placeholder="span5"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span6" placeholder="span6"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span7" placeholder="span7"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span8" placeholder="span8"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span9" placeholder="span9"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span10" placeholder="span10"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span11" placeholder="span11"> + </div><!--/span--> + </div><!--/row--> + <div class="row"> + <div class="span12"> + <input class="span12" placeholder="span12"> + </div><!--/span--> + </div><!--/row--> +</div> +<br> + <h4>Fluid row with inputs</h4> <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p> <div id="fluidRowInputs"> diff --git a/less/tests/forms.html b/less/tests/forms.html new file mode 100644 index 0000000000..a63d728a00 --- /dev/null +++ b/less/tests/forms.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + <style> + body { + padding-top: 30px; + padding-bottom: 30px; + } + </style> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <form class="container"> + + <div class="page-header"> + <h1>Form controls</h1> + </div> + + <div class="row"> + <div class="span4"> + + <label>Select</label> + <select> + <option>Select</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + + <hr> + + <label>textarea</label> + <textarea>Textarea</textarea> + + <hr> + + <label>text</label> + <input type="text" value="Text input"> + + <hr> + + <label>password</label> + <input type="password" value="Password input"> + + <hr> + + <label>checkbox</label> + <input type="checkbox" value=""> + + <hr> + + <label>radio</label> + <input type="radio" value=""> + + <hr> + + <label>button</label> + <input type="button" value="Button"> + + <hr> + + <label>submit</label> + <input type="submit" value="Submit"> + + <hr> + + <label>reset</label> + <input type="reset" value="Reset"> + + </div><!-- /span4 --> + <div class="span4"> + + <label>file</label> + <input type="file" value=""> + + <hr> + + <label>hidden</label> + <input type="hidden" value="hidden"> + + <hr> + + <label>image</label> + <input type="image" value=""> + + <hr> + + <label>datetime</label> + <input type="datetime" value=""> + + <hr> + + <label>datetime-local</label> + <input type="datetime-local" value=""> + + <hr> + + <label>date</label> + <input type="date" value=""> + + <hr> + + <label>month</label> + <input type="month" value=""> + + <hr> + + <label>time</label> + <input type="time" value=""> + + <hr> + + <label>week</label> + <input type="week" value=""> + + </div><!-- /span4 --> + <div class="span4"> + + <label>number</label> + <input type="number" value=""> + + <hr> + + <label>range</label> + <input type="range" value=""> + + <hr> + + <label>email</label> + <input type="email" value=""> + + <hr> + + <label>url</label> + <input type="url" value=""> + + <hr> + + <label>search</label> + <input type="search" value=""> + + <hr> + + <label>tel</label> + <input type="tel" value=""> + + <hr> + + <label>color</label> + <input type="color" value=""> + + </div><!-- /span4 --> + </div><!-- /row --> + + </form> <!-- /container --> + + </body> +</html> diff --git a/less/tests/navbar.html b/less/tests/navbar.html new file mode 100644 index 0000000000..17754bf6e8 --- /dev/null +++ b/less/tests/navbar.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <style> + body { + padding-top: 60px; + padding-bottom: 30px; + } + </style> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <!-- Fixed navbar --> + <div class="navbar navbar-fixed-top"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Project name</a> + <div class="nav-collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + </div> + + <div class="container"> + + <!-- Static navbar --> + <div class="navbar"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Project name</a> + <div class="nav-collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + </div> + + <!-- Main hero unit for a primary marketing message or call to action --> + <div class="hero-unit"> + <h1>Navbar example</h1> + <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> + <p> + <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a> + </p> + </div> + + </div> <!-- /container --> + + <!-- Le javascript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="../assets/js/jquery.js"></script> + <script src="../assets/js/bootstrap-transition.js"></script> + <script src="../assets/js/bootstrap-alert.js"></script> + <script src="../assets/js/bootstrap-modal.js"></script> + <script src="../assets/js/bootstrap-dropdown.js"></script> + <script src="../assets/js/bootstrap-scrollspy.js"></script> + <script src="../assets/js/bootstrap-tab.js"></script> + <script src="../assets/js/bootstrap-tooltip.js"></script> + <script src="../assets/js/bootstrap-popover.js"></script> + <script src="../assets/js/bootstrap-button.js"></script> + <script src="../assets/js/bootstrap-collapse.js"></script> + <script src="../assets/js/bootstrap-carousel.js"></script> + <script src="../assets/js/bootstrap-typeahead.js"></script> + + </body> +</html> diff --git a/less/type.less b/less/type.less index 0d56219340..bdf8e605e1 100644 --- a/less/type.less +++ b/less/type.less @@ -8,9 +8,6 @@ p { margin: 0 0 @baseLineHeight / 2; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; small { font-size: @baseFontSize - 2; color: @grayLight; @@ -171,7 +168,7 @@ em { // Abbreviations and acronyms abbr[title] { cursor: help; - border-bottom: 1px dotted #ddd; + border-bottom: 1px dotted @grayLight; } abbr.initialism { font-size: 90%; diff --git a/less/variables.less b/less/variables.less index d8825fb076..b931d3d2a2 100644 --- a/less/variables.less +++ b/less/variables.less @@ -107,7 +107,8 @@ @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; @dropdownLinkBackgroundHover: @linkColor; - +@dropdownDividerTop: #e5e5e5; +@dropdownDividerBottom: @white; |