diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f16cb7442e..e4dd2e966d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -118,19 +118,41 @@ hr.soften { line-height: 30px; margin-bottom: 30px; } -.jumbotron .btn-large { - font-size: 18px; - font-weight: normal; - padding: 13px 24px; - margin-right: 10px; + +/* Link styles (used on .masthead-links as well) */ +.jumbotron a { + color: #fff; + color: rgba(255,255,255,.5); + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.jumbotron a:hover { + color: #fff; + text-shadow: 0 0 10px rgba(255,255,255,.25); +} + +/* Download button */ +.masthead .btn { + padding: 14px 24px; + font-size: 24px; + font-weight: 200; + color: #fff; /* redeclare to override the `.jumbotron a` */ + border: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); } -.jumbotron .btn-large small { - font-size: 14px; +.masthead .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); } + /* Pattern overlay ------------------------- */ .jumbotron .container { @@ -167,22 +189,6 @@ hr.soften { line-height: 1.25; } -/* Drop borders on buttons, improve shadows */ -.masthead .btn { - font-size: 24px; - padding: 14px 24px; - font-weight: 200; - border: 0; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); -} -.masthead .btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); -} - /* Textual links in masthead */ .masthead-links { margin: 0; @@ -193,17 +199,6 @@ hr.soften { padding: 0 10px; color: rgba(255,255,255,.25); } -.masthead-links a { - color: #fff; - color: rgba(255,255,255,.5); - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; -} -.masthead-links a:hover { - color: #fff; - text-shadow: 0 0 10px rgba(255,255,255,.25); -} /* Social proof buttons from GitHub & Twitter */ .bs-docs-social { diff --git a/docs/base-css.html b/docs/base-css.html index a23008dd1a..8713a1b258 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -61,7 +61,7 @@ Javascript
An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.
+Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.
-<ul class="nav nav-pills"> - <li class="active"><a href="#">Regular link</a></li> - <li class="dropdown" id="menu1"> - <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> - Dropdown - <b class="caret"></b> - </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> - </ul> - </li> - ... -</ul>+<div class="dropdown"> + <!-- Link or button to toggle dropdown --> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li><a tabindex="-1" href="#">Separated link</a></li> + </ul> +</div> +
Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.
+Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.
- -Sleek, intuitive, and powerful front-end framework for faster and easier web development.
{{_i}}An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.{{/i}}
+{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.{{/i}}
-<ul class="nav nav-pills"> - <li class="active"><a href="#">Regular link</a></li> - <li class="dropdown" id="menu1"> - <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> - {{_i}}Dropdown{{/i}} - <b class="caret"></b> - </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> - <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> - <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </li> - ... -</ul>+<div class="dropdown"> + <!-- Link or button to toggle dropdown --> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> + <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> +</div> +
{{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}
+{{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}
- -Sleek, intuitive, and powerful front-end framework for faster and easier web development.
{{_i}}Download Bootstrap{{/i}}