From cc3de8bd6eefe0c3edf3d3ef843276e0f4daae1e Mon Sep 17 00:00:00 2001 From: Mark Otto <markotto@twitter.com> Date: Tue, 18 Sep 2012 12:00:57 -0700 Subject: [PATCH] fixes #5177: remove color on .btn-large .caret, but keep sizing change; also start to add CSS tests for buttons --- docs/assets/css/bootstrap.css | 3 +- less/button-groups.less | 3 +- less/tests/buttons.html | 139 ++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 less/tests/buttons.html diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4c3da8f525..22ba91b454 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3667,8 +3667,7 @@ input[type="submit"].btn.btn-mini { } .dropup .btn-large .caret { - border-top: 0; - border-bottom: 5px solid #000000; + border-bottom-width: 5px; } .btn-primary .caret, diff --git a/less/button-groups.less b/less/button-groups.less index dcae11336c..46837e628a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -191,8 +191,7 @@ } // Upside down carets for .dropup .dropup .btn-large .caret { - border-bottom: 5px solid @black; - border-top: 0; + border-bottom-width: 5px; } diff --git a/less/tests/buttons.html b/less/tests/buttons.html new file mode 100644 index 0000000000..5fe7f664b7 --- /dev/null +++ b/less/tests/buttons.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Buttons · Bootstrap</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: 30px; + 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> + + <div class="container"> + + <h2>Dropups</h2> + <div class="btn-toolbar"> + <div class="btn-group dropup"> + <button class="btn">Dropup</button> + <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-primary">Dropup</button> + <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-danger">Dropup</button> + <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-warning">Dropup</button> + <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-success">Dropup</button> + <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-info">Dropup</button> + <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-inverse">Dropup</button> + <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /btn-toolbar --> + + + </div> <!-- /container --> + + <!-- Le javascript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="../../docs/assets/js/jquery.js"></script> + <script src="../../docs/assets/js/bootstrap-transition.js"></script> + <script src="../../docs/assets/js/bootstrap-alert.js"></script> + <script src="../../docs/assets/js/bootstrap-modal.js"></script> + <script src="../../docs/assets/js/bootstrap-dropdown.js"></script> + <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> + <script src="../../docs/assets/js/bootstrap-tab.js"></script> + <script src="../../docs/assets/js/bootstrap-tooltip.js"></script> + <script src="../../docs/assets/js/bootstrap-popover.js"></script> + <script src="../../docs/assets/js/bootstrap-button.js"></script> + <script src="../../docs/assets/js/bootstrap-collapse.js"></script> + <script src="../../docs/assets/js/bootstrap-carousel.js"></script> + <script src="../../docs/assets/js/bootstrap-typeahead.js"></script> + + </body> +</html> -- GitLab