mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 21:49:09 +01:00
Merge branch 'master' into cover_template
This commit is contained in:
Mark Otto
commit
fd62247bf8
24
.travis.yml
24
.travis.yml
@ -1,10 +1,24 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.10
|
||||
before_script:
|
||||
- gem install jekyll
|
||||
- npm install -g grunt-cli
|
||||
before_install:
|
||||
- time sudo pip install --use-mirrors -r ./test-infra/requirements.txt
|
||||
install:
|
||||
- if [ "$TWBS_TEST" = validate-html ]; then time gem install jekyll; fi
|
||||
- time npm install -g grunt-cli
|
||||
- time ./test-infra/node_modules_cache.py download || time npm install
|
||||
after_script:
|
||||
- if [ "$TWBS_TEST" = core ]; then time ./test-infra/node_modules_cache.py upload; fi
|
||||
env:
|
||||
global:
|
||||
- SAUCE_USERNAME: bootstrap
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- SAUCE_USERNAME: bootstrap
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
|
||||
- secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
|
||||
- secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
|
||||
matrix:
|
||||
- TWBS_TEST=core
|
||||
- TWBS_TEST=validate-html
|
||||
- TWBS_TEST=sauce-js-unit
|
||||
matrix:
|
||||
fast_finish: true
|
||||
|
||||
22
Gruntfile.js
22
Gruntfile.js
@ -238,13 +238,13 @@ module.exports = function (grunt) {
|
||||
// See https://saucelabs.com/docs/platforms/webdriver
|
||||
{
|
||||
browserName: 'safari',
|
||||
version: '6',
|
||||
platform: 'OS X 10.8'
|
||||
version: '7',
|
||||
platform: 'OS X 10.9'
|
||||
},
|
||||
{
|
||||
browserName: 'chrome',
|
||||
version: '28',
|
||||
platform: 'OS X 10.6'
|
||||
version: '31',
|
||||
platform: 'OS X 10.9'
|
||||
},
|
||||
/* FIXME: currently fails 1 tooltip test
|
||||
{
|
||||
@ -331,9 +331,19 @@ module.exports = function (grunt) {
|
||||
grunt.registerTask('validate-html', ['jekyll', 'validation']);
|
||||
|
||||
// Test task.
|
||||
var testSubtasks = ['dist-css', 'jshint', 'jscs', 'qunit', 'validate-html'];
|
||||
var testSubtasks = [];
|
||||
// Skip core tests if running a different subset of the test suite
|
||||
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
|
||||
testSubtasks = testSubtasks.concat(['dist-css', 'jshint', 'jscs', 'qunit']);
|
||||
}
|
||||
// Skip HTML validation if running a different subset of the test suite
|
||||
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
|
||||
testSubtasks.push('validate-html');
|
||||
}
|
||||
// Only run Sauce Labs tests if there's a Sauce access key
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
|
||||
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
|
||||
// Skip Sauce if running a different subset of the test suite
|
||||
&& (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
|
||||
testSubtasks.push('connect');
|
||||
testSubtasks.push('saucelabs-qunit');
|
||||
}
|
||||
|
||||
@ -87,6 +87,8 @@
|
||||
<li>
|
||||
<a href="#helper-classes">Helper classes</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#helper-classes-colors">Contextual colors</a></li>
|
||||
<li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
|
||||
<li><a href="#helper-classes-close">Close icon</a></li>
|
||||
<li><a href="#helper-classes-carets">Carets</a></li>
|
||||
<li><a href="#helper-classes-floats">Quick floats</a></li>
|
||||
@ -105,3 +107,11 @@
|
||||
<li><a href="#responsive-utilities-tests">Test cases</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#less">Using LESS</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#less-variables">Variables</a></li>
|
||||
<li><a href="#less-mixins-vendor">Vendor mixins</a></li>
|
||||
<li><a href="#less-mixins-utility">Utility mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
<a href="#modals">Modal</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#modals-examples">Examples</a></li>
|
||||
<li><a href="#modals-sizes">Sizes</a></li>
|
||||
<li><a href="#modals-usage">Usage</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -902,9 +902,13 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="dropdowns-alignment">Alignment options</h3>
|
||||
<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Deprecated <code>.pull-right</code> alignment</h4>
|
||||
<p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
@ -1099,7 +1103,7 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="btn-groups-vertical">Vertical variation</h3>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
|
||||
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-group-vertical">
|
||||
<button type="button" class="btn btn-default">Button</button>
|
||||
|
||||
569
css.html
569
css.html
@ -635,27 +635,27 @@ base_url: "../"
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><h1>h1. Bootstrap heading</h1></td>
|
||||
<td class="info">Semibold 36px</td>
|
||||
<td class="type-info">Semibold 36px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h2>h2. Bootstrap heading</h2></td>
|
||||
<td class="info">Semibold 30px</td>
|
||||
<td class="type-info">Semibold 30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h3>h3. Bootstrap heading</h3></td>
|
||||
<td class="info">Semibold 24px</td>
|
||||
<td class="type-info">Semibold 24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>h4. Bootstrap heading</h4></td>
|
||||
<td class="info">Semibold 18px</td>
|
||||
<td class="type-info">Semibold 18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h5>h5. Bootstrap heading</h5></td>
|
||||
<td class="info">Semibold 14px</td>
|
||||
<td class="type-info">Semibold 14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>h6. Bootstrap heading</h6></td>
|
||||
<td class="info">Semibold 12px</td>
|
||||
<td class="type-info">Semibold 12px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -782,29 +782,6 @@ base_url: "../"
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||||
<div class="bs-example">
|
||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="text-muted">...</p>
|
||||
<p class="text-primary">...</p>
|
||||
<p class="text-success">...</p>
|
||||
<p class="text-info">...</p>
|
||||
<p class="text-warning">...</p>
|
||||
<p class="text-danger">...</p>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Abbreviations -->
|
||||
<h2 id="type-abbreviations">Abbreviations</h2>
|
||||
@ -2323,6 +2300,47 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<h1 id="helper-classes">Helper classes</h1>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-colors">Contextual colors</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||||
<div class="bs-example">
|
||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="text-muted">...</p>
|
||||
<p class="text-primary">...</p>
|
||||
<p class="text-success">...</p>
|
||||
<p class="text-info">...</p>
|
||||
<p class="text-warning">...</p>
|
||||
<p class="text-danger">...</p>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
|
||||
<div class="bs-example bs-example-bg-classes">
|
||||
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<p class="bg-muted">...</p>
|
||||
<p class="bg-primary">...</p>
|
||||
<p class="bg-success">...</p>
|
||||
<p class="bg-info">...</p>
|
||||
<p class="bg-warning">...</p>
|
||||
<p class="bg-danger">...</p>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3 id="helper-classes-close">Close icon</h3>
|
||||
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
||||
@ -2710,3 +2728,496 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Using Less
|
||||
================================================== -->
|
||||
<div class="bs-docs-section" id="less">
|
||||
<div class="page-header">
|
||||
<h1>Using LESS</h1>
|
||||
</div>
|
||||
<p class="lead">Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
|
||||
|
||||
<p>Grid variables and mixins are covered <a href="{{ page.base_url }}css/#grid-less">within the Grid system section</a>.</p>
|
||||
|
||||
|
||||
<h2 id="less-variables">Variables</h2>
|
||||
<p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ page.base_url }}customize/#less-variables-section">the Customizer</a>.</p>
|
||||
|
||||
<h3 id="less-variables-colors">Colors</h3>
|
||||
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
|
||||
<div class="bs-example">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch gray-darker"></div>
|
||||
<div class="color-swatch gray-dark"></div>
|
||||
<div class="color-swatch gray"></div>
|
||||
<div class="color-swatch gray-light"></div>
|
||||
<div class="color-swatch gray-lighter"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight css %}
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="color-swatches">
|
||||
<div class="color-swatch brand-primary"></div>
|
||||
<div class="color-swatch brand-success"></div>
|
||||
<div class="color-swatch brand-warning"></div>
|
||||
<div class="color-swatch brand-danger"></div>
|
||||
<div class="color-swatch brand-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight css %}
|
||||
@brand-primary: #428bca;
|
||||
@brand-success: #5cb85c;
|
||||
@brand-warning: #f0ad4e;
|
||||
@brand-danger: #d9534f;
|
||||
@brand-info: #5bc0de;
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
|
||||
{% highlight css %}
|
||||
// Use as-is
|
||||
.masthead {
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
|
||||
// Reassigned variables in LESS
|
||||
@alert-message-background: @brand-info;
|
||||
.alert {
|
||||
background-color: @alert-message-background;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-scaffolding">Scaffolding</h3>
|
||||
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
|
||||
{% highlight css %}
|
||||
// Scaffolding
|
||||
@body-bg: #fff;
|
||||
@text-color: @black-50;
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-links">Links</h3>
|
||||
<p>Easily style your links with the right color with only one value.</p>
|
||||
{% highlight css %}
|
||||
// Variables
|
||||
@link-color: @brand-primary;
|
||||
@link-color-hover: darken(@link-color, 15%);
|
||||
|
||||
// Usage
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @link-color-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
<p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
|
||||
|
||||
<h3 id="less-variables-typography">Typography</h3>
|
||||
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins as well.</p>
|
||||
{% highlight css %}
|
||||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@line-height-base: 1.428571429; // 20/14
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||
|
||||
@headings-font-family: inherit;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-variables-icons">Icons</h3>
|
||||
<p>Two quick variables for customizing the location and filename of your icons.</p>
|
||||
{% highlight css %}
|
||||
@icon-font-path: "../fonts/";
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
{% endhighlight %}}
|
||||
|
||||
<h3 id="less-variables-components">Components</h3>
|
||||
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
|
||||
{% highlight css %}
|
||||
@padding-base-vertical: 6px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 10px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
@component-active-color: #fff;
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
@caret-width-base: 4px;
|
||||
@caret-width-large: 5px;
|
||||
{% endhighlight %}}
|
||||
|
||||
|
||||
<h2 id="less-mixins-vendor">Vendor mixins</h2>
|
||||
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
|
||||
|
||||
|
||||
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
|
||||
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
|
||||
{% highlight css %}
|
||||
.box-sizing(@box-model) {
|
||||
-webkit-box-sizing: @box-model; // Safari <= 5
|
||||
-moz-box-sizing: @box-model; // Firefox <= 19
|
||||
box-sizing: @box-model;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-rounded-corners">Rounded corners</h3>
|
||||
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
|
||||
{% highlight css %}
|
||||
.border-top-radius(@radius) {
|
||||
border-top-right-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
.border-right-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
}
|
||||
.border-bottom-radius(@radius) {
|
||||
border-bottom-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
.border-left-radius(@radius) {
|
||||
border-bottom-left-radius: @radius;
|
||||
border-top-left-radius: @radius;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
|
||||
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
|
||||
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
|
||||
{% highlight css %}
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-transitions">Transitions</h3>
|
||||
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
|
||||
{% highlight css %}
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
.transition-property(@transition-property) {
|
||||
-webkit-transition-property: @transition-property;
|
||||
transition-property: @transition-property;
|
||||
}
|
||||
.transition-delay(@transition-delay) {
|
||||
-webkit-transition-delay: @transition-delay;
|
||||
transition-delay: @transition-delay;
|
||||
}
|
||||
.transition-duration(@transition-duration) {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
-o-transition: -o-transform @transition;
|
||||
transition: transform @transition;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-transformations">Transformations</h3>
|
||||
<p>Rorate, scale, translate (move), or skew any object.</p>
|
||||
{% highlight css %}
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@ratio; @ratio-y...) {
|
||||
-webkit-transform: scale(@ratio, @ratio-y);
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||
transform: scale(@ratio, @ratio-y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
-webkit-transform: skew(@x, @y);
|
||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||
transform: skew(@x, @y);
|
||||
}
|
||||
.translate3d(@x; @y; @z) {
|
||||
-webkit-transform: translate3d(@x, @y, @z);
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
-webkit-perspective: @perspective;
|
||||
-moz-perspective: @perspective;
|
||||
perspective: @perspective;
|
||||
}
|
||||
.perspective-origin(@perspective) {
|
||||
-webkit-perspective-origin: @perspective;
|
||||
-moz-perspective-origin: @perspective;
|
||||
perspective-origin: @perspective;
|
||||
}
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-animations">Animations</h3>
|
||||
<p>A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.</p>
|
||||
{% highlight css %}
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-opacity">Opacity</h3>
|
||||
<p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
|
||||
{% highlight css %}
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity;
|
||||
// IE8 filter
|
||||
@opacity-ie: (@opacity * 100);
|
||||
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-placeholder">Placeholder text</h3>
|
||||
<p>Provide context for form controls within each field.</p>
|
||||
{% highlight css %}
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
&:-moz-placeholder { color: @color; } // Firefox 4-18
|
||||
&::-moz-placeholder { color: @color; } // Firefox 19+
|
||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-columns">Columns</h3>
|
||||
<p>Generate columns via CSS within a single element.</p>
|
||||
{% highlight css %}
|
||||
.content-columns(@width; @count; @gap) {
|
||||
-webkit-column-width: @width;
|
||||
-moz-column-width: @width;
|
||||
column-width: @width;
|
||||
-webkit-column-count: @count;
|
||||
-moz-column-count: @count;
|
||||
column-count: @count;
|
||||
-webkit-column-gap: @gap;
|
||||
-moz-column-gap: @gap;
|
||||
column-gap: @gap;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-gradients">Gradients</h3>
|
||||
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
|
||||
{% highlight css %}
|
||||
#gradient > .vertical(#333; #000);
|
||||
#gradient > .horizontal(#333; #000);
|
||||
#gradient > .radial(#333; #000);
|
||||
{% endhighlight %}
|
||||
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
|
||||
{% highlight css %}
|
||||
#gradient > .directional(#333; #000; 45deg);
|
||||
{% endhighlight %}
|
||||
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
|
||||
{% highlight css %}
|
||||
#gradient > .striped(#333; #000; 45deg);
|
||||
{% endhighlight %}
|
||||
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
|
||||
{% highlight css %}
|
||||
#gradient > .vertical-three-colors(#777; #333; .25; #000);
|
||||
#gradient > .horizontal-three-colors(#777; #333; .25; #000);
|
||||
{% endhighlight %}
|
||||
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alignside <code>background-image: none;</code>.</p>
|
||||
|
||||
|
||||
<h2 id="less-mixins-utility">Utility mixins</h2>
|
||||
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
|
||||
|
||||
<h3 id="less-mixins-clearfix">Clearfix</h3>
|
||||
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
.container {
|
||||
.clearfix();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-centering">Horizontal centering</h3>
|
||||
<p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Usage
|
||||
.container {
|
||||
width: 940px;
|
||||
.center-block();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-sizing">Sizing helpers</h3>
|
||||
<p>Specify the dimensions of an object more easily.</p>
|
||||
{% highlight css %}
|
||||
// Mixins
|
||||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// Usage
|
||||
.image { .size(400px; 300px); }
|
||||
.avatar { .square(48px); }
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-resizable">Resizable textareas</h3>
|
||||
<p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
|
||||
{% highlight css %}
|
||||
.resizable(@direction: both) {
|
||||
// Options: horizontal, vertical, both
|
||||
resize: @direction;
|
||||
// Safari fix
|
||||
overflow: auto;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-truncating">Truncating text</h3>
|
||||
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
|
||||
{% highlight css %}
|
||||
// Mixin
|
||||
.text-truncate() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Usage
|
||||
.branch-name {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
.text-truncate();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-retina-images">Retina images</h3>
|
||||
<p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
|
||||
{% highlight css %}
|
||||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||
background-image: url("@{file-1x}");
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
background-image: url("@{file-2x}");
|
||||
background-size: @width-1x @height-1x;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
.jumbotron {
|
||||
.retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
|
||||
}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@ -1147,6 +1147,8 @@ base_url: "../"
|
||||
<h3>Wells</h3>
|
||||
<label>@well-bg</label>
|
||||
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
|
||||
<label>@well-border</label>
|
||||
<input type="text" class="form-control" placeholder="darken(@well-bg, 7%)" data-var="@well-border">
|
||||
|
||||
|
||||
<h2 id="variables-accordion">Accordion</h2>
|
||||
@ -1247,6 +1249,11 @@ base_url: "../"
|
||||
<input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
|
||||
<p class="help-block">Modal backdrop background color</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>@modal-backdrop-opacity</label>
|
||||
<input type="text" class="form-control" placeholder=".5" data-var="@modal-backdrop-opacity">
|
||||
<p class="help-block">Modal backdrop opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Modal header and footer</h3>
|
||||
|
||||
439
dist/css/bootstrap.css
vendored
439
dist/css/bootstrap.css
vendored
@ -450,6 +450,18 @@ small,
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
}
|
||||
@ -483,17 +495,36 @@ cite {
|
||||
.text-info:hover {
|
||||
color: #245269;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
.bg-primary {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
a.bg-primary:hover {
|
||||
background-color: #3071a9;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
.bg-warning {
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
a.bg-warning:hover {
|
||||
background-color: #f7ecb5;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
a.bg-danger:hover {
|
||||
background-color: #e4b9b9;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
a.bg-success:hover {
|
||||
background-color: #c1e2b3;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
a.bg-info:hover {
|
||||
background-color: #afd9ee;
|
||||
}
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
@ -2965,6 +2996,14 @@ input[type="button"].btn-block {
|
||||
.open > a {
|
||||
outline: 0;
|
||||
}
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
@ -3001,6 +3040,10 @@ input[type="button"].btn-block {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.navbar-right .dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
@ -3033,13 +3076,16 @@ input[type="button"].btn-block {
|
||||
.btn-group .btn-group + .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.btn-toolbar .btn-group {
|
||||
.btn-toolbar {
|
||||
margin-left: -5px;
|
||||
}
|
||||
.btn-toolbar .btn-group,
|
||||
.btn-toolbar .input-group {
|
||||
float: left;
|
||||
}
|
||||
.btn-toolbar > .btn + .btn,
|
||||
.btn-toolbar > .btn-group + .btn,
|
||||
.btn-toolbar > .btn + .btn-group,
|
||||
.btn-toolbar > .btn-group + .btn-group {
|
||||
.btn-toolbar > .btn,
|
||||
.btn-toolbar > .btn-group,
|
||||
.btn-toolbar > .input-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
@ -3193,6 +3239,7 @@ input[type="button"].btn-block {
|
||||
padding-left: 0;
|
||||
}
|
||||
.input-group .form-control {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -3312,9 +3359,15 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
}
|
||||
.input-group-btn > .btn:not(:first-of-type):not(:last-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group-btn > .btn + .btn {
|
||||
margin-left: -4px;
|
||||
}
|
||||
.input-group-btn > .btn + .btn:last-of-type {
|
||||
margin-left: -5px;
|
||||
}
|
||||
.input-group-btn > .btn:hover,
|
||||
.input-group-btn > .btn:active {
|
||||
z-index: 2;
|
||||
@ -3618,6 +3671,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
.navbar-brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-brand > .glyphicon {
|
||||
float: left;
|
||||
margin-top: -2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.navbar > .container .navbar-brand,
|
||||
.navbar > .container-fluid .navbar-brand {
|
||||
@ -3771,11 +3829,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.navbar-btn {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -4225,19 +4278,17 @@ a.list-group-item.active > .badge,
|
||||
.jumbotron {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 2.1428571435;
|
||||
color: inherit;
|
||||
background-color: #eee;
|
||||
}
|
||||
.jumbotron h1,
|
||||
.jumbotron .h1 {
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
}
|
||||
.jumbotron p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.container .jumbotron {
|
||||
border-radius: 6px;
|
||||
@ -4890,10 +4941,11 @@ button.close {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1040;
|
||||
z-index: 1050;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
outline: 0;
|
||||
}
|
||||
.modal.fade .modal-dialog {
|
||||
-webkit-transition: -webkit-transform .3s ease-out;
|
||||
@ -4911,7 +4963,6 @@ button.close {
|
||||
}
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
z-index: 1050;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
}
|
||||
@ -4932,7 +4983,7 @@ button.close {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
z-index: 1040;
|
||||
background-color: #000;
|
||||
}
|
||||
.modal-backdrop.fade {
|
||||
@ -4975,7 +5026,7 @@ button.close {
|
||||
.modal-footer .btn-block + .btn-block {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
@media (min-width: 768px) {
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
margin: 30px auto;
|
||||
@ -4984,6 +5035,12 @@ button.close {
|
||||
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.modal-sm {
|
||||
width: 300px;
|
||||
}
|
||||
.modal-lg {
|
||||
width: 900px;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
@ -5488,72 +5545,12 @@ td.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-xs.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-sm,
|
||||
td.visible-xs.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-xs.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-md,
|
||||
td.visible-xs.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-xs.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-xs.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-xs.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-xs.visible-lg,
|
||||
td.visible-xs.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-sm,
|
||||
tr.visible-sm,
|
||||
th.visible-sm,
|
||||
td.visible-sm {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-sm.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-xs,
|
||||
td.visible-sm.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-sm {
|
||||
display: block !important;
|
||||
@ -5569,72 +5566,12 @@ td.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-sm.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-md,
|
||||
td.visible-sm.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-sm.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-sm.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-sm.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-sm.visible-lg,
|
||||
td.visible-sm.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-md,
|
||||
tr.visible-md,
|
||||
th.visible-md,
|
||||
td.visible-md {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-md.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-xs,
|
||||
td.visible-md.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-md.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-sm,
|
||||
td.visible-md.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-md {
|
||||
display: block !important;
|
||||
@ -5650,72 +5587,12 @@ td.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-md.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-md.visible-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-md.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-md.visible-lg,
|
||||
td.visible-md.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.visible-lg,
|
||||
tr.visible-lg,
|
||||
th.visible-lg,
|
||||
td.visible-lg {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.visible-lg.visible-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-xs,
|
||||
td.visible-lg.visible-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.visible-lg.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-sm,
|
||||
td.visible-lg.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.visible-lg.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.visible-lg.visible-md {
|
||||
display: table;
|
||||
}
|
||||
tr.visible-lg.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.visible-lg.visible-md,
|
||||
td.visible-lg.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.visible-lg {
|
||||
display: block !important;
|
||||
@ -5731,19 +5608,6 @@ td.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.hidden-xs {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-xs {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-xs {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-xs,
|
||||
td.hidden-xs {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs,
|
||||
tr.hidden-xs,
|
||||
@ -5752,51 +5616,6 @@ td.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-xs.hidden-sm,
|
||||
tr.hidden-xs.hidden-sm,
|
||||
th.hidden-xs.hidden-sm,
|
||||
td.hidden-xs.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-xs.hidden-md,
|
||||
tr.hidden-xs.hidden-md,
|
||||
th.hidden-xs.hidden-md,
|
||||
td.hidden-xs.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-xs.hidden-lg,
|
||||
tr.hidden-xs.hidden-lg,
|
||||
th.hidden-xs.hidden-lg,
|
||||
td.hidden-xs.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-sm {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-sm,
|
||||
td.hidden-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-sm.hidden-xs,
|
||||
tr.hidden-sm.hidden-xs,
|
||||
th.hidden-sm.hidden-xs,
|
||||
td.hidden-sm.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-sm,
|
||||
tr.hidden-sm,
|
||||
@ -5805,51 +5624,6 @@ td.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-sm.hidden-md,
|
||||
tr.hidden-sm.hidden-md,
|
||||
th.hidden-sm.hidden-md,
|
||||
td.hidden-sm.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-sm.hidden-lg,
|
||||
tr.hidden-sm.hidden-lg,
|
||||
th.hidden-sm.hidden-lg,
|
||||
td.hidden-sm.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-md {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-md,
|
||||
td.hidden-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-md.hidden-xs,
|
||||
tr.hidden-md.hidden-xs,
|
||||
th.hidden-md.hidden-xs,
|
||||
td.hidden-md.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-md.hidden-sm,
|
||||
tr.hidden-md.hidden-sm,
|
||||
th.hidden-md.hidden-sm,
|
||||
td.hidden-md.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-md,
|
||||
tr.hidden-md,
|
||||
@ -5858,51 +5632,6 @@ td.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-md.hidden-lg,
|
||||
tr.hidden-md.hidden-lg,
|
||||
th.hidden-md.hidden-lg,
|
||||
td.hidden-md.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
display: block !important;
|
||||
}
|
||||
table.hidden-lg {
|
||||
display: table;
|
||||
}
|
||||
tr.hidden-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.hidden-lg,
|
||||
td.hidden-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hidden-lg.hidden-xs,
|
||||
tr.hidden-lg.hidden-xs,
|
||||
th.hidden-lg.hidden-xs,
|
||||
td.hidden-lg.hidden-xs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-lg.hidden-sm,
|
||||
tr.hidden-lg.hidden-sm,
|
||||
th.hidden-lg.hidden-sm,
|
||||
td.hidden-lg.hidden-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-lg.hidden-md,
|
||||
tr.hidden-lg.hidden-md,
|
||||
th.hidden-lg.hidden-md,
|
||||
td.hidden-lg.hidden-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-lg,
|
||||
tr.hidden-lg,
|
||||
|
||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/js/bootstrap.js
vendored
1
dist/js/bootstrap.js
vendored
@ -982,7 +982,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
||||
}
|
||||
|
||||
Modal.prototype.backdrop = function (callback) {
|
||||
var that = this
|
||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||
|
||||
if (this.isShown && this.options.backdrop) {
|
||||
|
||||
@ -597,6 +597,35 @@ h1[id] {
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Color swatches
|
||||
*
|
||||
* Color swatches and associated values for our grayscale and brand colors.
|
||||
*/
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; /* clearfix */
|
||||
}
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.color-swatches .gray-darker { background-color: #222; }
|
||||
.color-swatches .gray-dark { background-color: #333; }
|
||||
.color-swatches .gray { background-color: #555; }
|
||||
.color-swatches .gray-light { background-color: #999; }
|
||||
.color-swatches .gray-lighter { background-color: #eee; }
|
||||
.color-swatches .brand-primary { background-color: #428bca; }
|
||||
.color-swatches .brand-success { background-color: #5cb85c; }
|
||||
.color-swatches .brand-warning { background-color: #f0ad4e; }
|
||||
.color-swatches .brand-danger { background-color: #d9534f; }
|
||||
.color-swatches .brand-info { background-color: #5bc0de; }
|
||||
|
||||
|
||||
/*
|
||||
* Team members
|
||||
*
|
||||
@ -730,7 +759,7 @@ h1[id] {
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.bs-example-type .table .info {
|
||||
.bs-example-type .table .type-info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -750,6 +779,11 @@ h1[id] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contextual background colors */
|
||||
.bs-example-bg-classes p {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.bs-example > .img-circle,
|
||||
.bs-example > .img-rounded,
|
||||
@ -990,6 +1024,7 @@ h1[id] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="modals-sizes">Optional sizes</h2>
|
||||
<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
|
||||
<div class="bs-example">
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<!-- Large modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<!-- Modal content for the above example -->
|
||||
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title" id="myModalLabel">Large modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title" id="myModalLabel">Small modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<h2 id="modals-usage">Usage</h2>
|
||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return"],
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
|
||||
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||
"requireRightStickedOperators": ["!"],
|
||||
|
||||
@ -149,7 +149,6 @@
|
||||
}
|
||||
|
||||
Modal.prototype.backdrop = function (callback) {
|
||||
var that = this
|
||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||
|
||||
if (this.isShown && this.options.backdrop) {
|
||||
|
||||
@ -37,18 +37,17 @@
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
margin-left: -5px; // Offset the first child's margin
|
||||
&:extend(.clearfix all);
|
||||
|
||||
.btn-group {
|
||||
.btn-group,
|
||||
.input-group {
|
||||
float: left;
|
||||
}
|
||||
// Space out series of button groups
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
+ .btn,
|
||||
+ .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
> .btn-group,
|
||||
> .input-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -46,6 +46,8 @@
|
||||
background-clip: padding-box;
|
||||
|
||||
// Aligns the dropdown menu to right
|
||||
//
|
||||
// Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
|
||||
&.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@ -126,6 +128,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
right: 0;
|
||||
}
|
||||
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||
// aligned nav component. To enable the undoing of that, we provide an override
|
||||
// to restore the default dropdown menu alignment.
|
||||
//
|
||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||
// `.pull-right` nav component.
|
||||
.dropdown-menu-left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
@ -180,7 +201,12 @@
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar-right {
|
||||
.dropdown-menu {
|
||||
.pull-right > .dropdown-menu();
|
||||
.dropdown-menu-right();
|
||||
}
|
||||
// Necessary for overrides of the default right aligned menu.
|
||||
// Will remove come v4 in all likelihood.
|
||||
.dropdown-menu-left {
|
||||
.dropdown-menu-left();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
.container {
|
||||
.container-fixed();
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
width: @container-sm;
|
||||
}
|
||||
@media (min-width: @screen-md) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
width: @container-md;
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
|
||||
@ -17,6 +17,11 @@
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||
// select elements in input groups. To fix it, we float the input. Details:
|
||||
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||
float: left;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -121,16 +126,26 @@
|
||||
&:last-child > .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping
|
||||
+ .btn {
|
||||
margin-left: -4px;
|
||||
}
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Jankily prevent input button groups from wrapping
|
||||
+ .btn {
|
||||
margin-left: -4px;
|
||||
}
|
||||
+ .btn:last-of-type {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
// Bring the "active" button to the front
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,19 +6,17 @@
|
||||
.jumbotron {
|
||||
padding: @jumbotron-padding;
|
||||
margin-bottom: @jumbotron-padding;
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
line-height: (@line-height-base * 1.5);
|
||||
color: @jumbotron-color;
|
||||
background-color: @jumbotron-bg;
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
line-height: 1;
|
||||
color: @jumbotron-heading-color;
|
||||
}
|
||||
p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: (@jumbotron-padding / 2);
|
||||
font-size: @jumbotron-font-size;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.container & {
|
||||
|
||||
@ -79,7 +79,7 @@ a.list-group-item {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item-text {
|
||||
color: lighten(@list-group-active-bg, 40%);
|
||||
color: @list-group-active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,17 +147,17 @@
|
||||
// Transformations
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
-ms-transform: rotate(@degrees); // IE9+
|
||||
-ms-transform: rotate(@degrees); // IE9 only
|
||||
transform: rotate(@degrees);
|
||||
}
|
||||
.scale(@ratio; @ratio-y...) {
|
||||
-webkit-transform: scale(@ratio, @ratio-y);
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9+
|
||||
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||
transform: scale(@ratio, @ratio-y);
|
||||
}
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y); // IE9+
|
||||
-ms-transform: translate(@x, @y); // IE9 only
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x; @y) {
|
||||
@ -172,12 +172,12 @@
|
||||
|
||||
.rotateX(@degrees) {
|
||||
-webkit-transform: rotateX(@degrees);
|
||||
-ms-transform: rotateX(@degrees); // IE9+
|
||||
-ms-transform: rotateX(@degrees); // IE9 only
|
||||
transform: rotateX(@degrees);
|
||||
}
|
||||
.rotateY(@degrees) {
|
||||
-webkit-transform: rotateY(@degrees);
|
||||
-ms-transform: rotateY(@degrees); // IE9+
|
||||
-ms-transform: rotateY(@degrees); // IE9 only
|
||||
transform: rotateY(@degrees);
|
||||
}
|
||||
.perspective(@perspective) {
|
||||
@ -193,6 +193,7 @@
|
||||
.transform-origin(@origin) {
|
||||
-webkit-transform-origin: @origin;
|
||||
-moz-transform-origin: @origin;
|
||||
-ms-transform-origin: @origin; // IE9 only
|
||||
transform-origin: @origin;
|
||||
}
|
||||
|
||||
@ -201,6 +202,30 @@
|
||||
-webkit-animation: @animation;
|
||||
animation: @animation;
|
||||
}
|
||||
.animation-name(@name) {
|
||||
-webkit-animation-name: @name;
|
||||
animation-name: @name;
|
||||
}
|
||||
.animation-duration(@duration) {
|
||||
-webkit-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
}
|
||||
.animation-timing-function(@timing-function) {
|
||||
-webkit-animation-timing-function: @timing-function;
|
||||
animation-timing-function: @timing-function;
|
||||
}
|
||||
.animation-delay(@delay) {
|
||||
-webkit-animation-delay: @delay;
|
||||
animation-delay: @delay;
|
||||
}
|
||||
.animation-iteration-count(@iteration-count) {
|
||||
-webkit-animation-iteration-count: @iteration-count;
|
||||
animation-iteration-count: @iteration-count;
|
||||
}
|
||||
.animation-direction(@direction) {
|
||||
-webkit-animation-direction: @direction;
|
||||
animation-direction: @direction;
|
||||
}
|
||||
|
||||
// Backface visibility
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
@ -353,7 +378,7 @@
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
.img-responsive(@display: block;) {
|
||||
.img-responsive(@display: block) {
|
||||
display: @display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
@ -613,30 +638,39 @@
|
||||
position: relative;
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
}
|
||||
.make-xs-column-offset(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-push(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
left: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
.make-xs-column-pull(@columns) {
|
||||
@media (min-width: @screen-xs-min) {
|
||||
right: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the small columns
|
||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @screen-sm-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the small column offsets
|
||||
.make-sm-column-offset(@columns) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
@ -653,23 +687,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the medium columns
|
||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @screen-md-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the medium column offsets
|
||||
.make-md-column-offset(@columns) {
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
@ -686,23 +716,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate the large columns
|
||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: (@gutter / 2);
|
||||
padding-right: (@gutter / 2);
|
||||
|
||||
// Calculate width based on number of columns available
|
||||
@media (min-width: @screen-lg-min) {
|
||||
float: left;
|
||||
width: percentage((@columns / @grid-columns));
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the large column offsets
|
||||
.make-lg-column-offset(@columns) {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
margin-left: percentage((@columns / @grid-columns));
|
||||
|
||||
@ -22,7 +22,11 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-modal-background;
|
||||
z-index: @zindex-modal;
|
||||
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
@ -37,7 +41,6 @@
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 10px;
|
||||
z-index: (@zindex-modal-background + 10);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
@ -60,11 +63,11 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (@zindex-modal-background - 10);
|
||||
z-index: @zindex-modal-background;
|
||||
background-color: @modal-backdrop-bg;
|
||||
// Fade for backdrop
|
||||
&.fade { .opacity(0); }
|
||||
&.in { .opacity(.5); }
|
||||
&.in { .opacity(@modal-backdrop-opacity); }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
@ -116,8 +119,9 @@
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
margin: 30px auto;
|
||||
@ -126,4 +130,8 @@
|
||||
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Modal sizes
|
||||
.modal-sm { width: @modal-sm; }
|
||||
.modal-lg { width: @modal-lg; }
|
||||
|
||||
}
|
||||
|
||||
@ -161,6 +161,13 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Prevent Glyphicons from increasing height of navbar
|
||||
> .glyphicon {
|
||||
float: left;
|
||||
margin-top: -2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.navbar > .container &,
|
||||
.navbar > .container-fluid & {
|
||||
@ -329,13 +336,6 @@
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Right aligned menus need alt position
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
// Buttons in navbars
|
||||
//
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
// Panel contents
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
padding: @panel-body-padding;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
|
||||
@ -23,172 +23,51 @@
|
||||
|
||||
|
||||
// Visibility utilities
|
||||
|
||||
.visible-xs {
|
||||
.responsive-invisibility();
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-sm {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-md {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
&.visible-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-lg {
|
||||
.responsive-invisibility();
|
||||
&.visible-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
&.visible-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-visibility();
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
.responsive-visibility();
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-sm {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-md {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
&.hidden-lg {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
}
|
||||
.hidden-lg {
|
||||
.responsive-visibility();
|
||||
&.hidden-xs {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-sm {
|
||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
&.hidden-md {
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
}
|
||||
@media (min-width: @screen-lg-min) {
|
||||
.responsive-invisibility();
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
line-height: 1.4;
|
||||
.opacity(0);
|
||||
|
||||
&.in { .opacity(.9); }
|
||||
&.in { .opacity(@tooltip-opacity); }
|
||||
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
||||
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
||||
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
||||
|
||||
@ -81,7 +81,13 @@ small,
|
||||
// Undo browser default styling
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Contextual emphasis
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
// Contextual colors
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
@ -116,11 +122,42 @@ cite { font-style: normal; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
// Contextual backgrounds
|
||||
// For now we'll leave these alongside the text classes until v4 when we can
|
||||
// safely shift things around (per SemVer rules).
|
||||
.bg-primary {
|
||||
// Given the contrast here, this is the only class to have it's color inverted
|
||||
// automatically.
|
||||
color: #fff;
|
||||
background-color: @brand-primary;
|
||||
a&:hover {
|
||||
background-color: darken(@brand-primary, 10%);
|
||||
}
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @state-warning-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-warning-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @state-danger-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-danger-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @state-success-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-success-bg, 10%);
|
||||
}
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @state-info-bg;
|
||||
a&:hover {
|
||||
background-color: darken(@state-info-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Page header
|
||||
|
||||
@ -189,6 +189,9 @@
|
||||
|
||||
@dropdown-header-color: @gray-light;
|
||||
|
||||
// Note: Deprecated @dropdown-caret-color as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
// COMPONENT VARIABLES
|
||||
// --------------------------------------------------
|
||||
@ -402,6 +405,7 @@
|
||||
@tooltip-max-width: 200px;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: #000;
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
@tooltip-arrow-width: 5px;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@ -450,9 +454,13 @@
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
@modal-backdrop-bg: #000;
|
||||
@modal-backdrop-opacity: .5;
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
@ -491,24 +499,26 @@
|
||||
|
||||
// List group
|
||||
// -------------------------
|
||||
@list-group-bg: #fff;
|
||||
@list-group-border: #ddd;
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
@list-group-bg: #fff;
|
||||
@list-group-border: #ddd;
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
@list-group-active-color: @component-active-color;
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-heading-color: #333;
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
@list-group-active-color: @component-active-color;
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
// Panels
|
||||
// -------------------------
|
||||
@panel-bg: #fff;
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@ -550,6 +560,7 @@
|
||||
// Wells
|
||||
// -------------------------
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: @well-bg;
|
||||
border: 1px solid darken(@well-bg, 7%);
|
||||
border: 1px solid @well-border;
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||
blockquote {
|
||||
|
||||
96
package.json
96
package.json
@ -1,56 +1,56 @@
|
||||
{
|
||||
"name": "bootstrap"
|
||||
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
|
||||
, "version": "3.0.3"
|
||||
, "keywords": ["bootstrap", "css"]
|
||||
, "homepage": "http://getbootstrap.com"
|
||||
, "author": "Twitter, Inc."
|
||||
, "scripts": { "test": "grunt test" }
|
||||
, "repository": {
|
||||
"name": "bootstrap",
|
||||
"description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
|
||||
"version": "3.0.3",
|
||||
"keywords": ["bootstrap", "css"],
|
||||
"homepage": "http://getbootstrap.com",
|
||||
"author": "Twitter, Inc.",
|
||||
"scripts": { "test": "grunt test" },
|
||||
"repository": {
|
||||
"type": "git"
|
||||
, "url": "https://github.com/twbs/bootstrap.git"
|
||||
}
|
||||
, "bugs": {
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/twbs/bootstrap/issues"
|
||||
}
|
||||
, "licenses": [
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache-2.0"
|
||||
, "url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
"type": "Apache-2.0",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
}
|
||||
]
|
||||
, "devDependencies": {
|
||||
"btoa": "~1.1.1"
|
||||
, "grunt": "~0.4.1"
|
||||
, "grunt-banner": "~0.2.0"
|
||||
, "grunt-contrib-clean": "~0.5.0"
|
||||
, "grunt-contrib-concat": "~0.3.0"
|
||||
, "grunt-contrib-connect": "~0.5.0"
|
||||
, "grunt-contrib-copy": "~0.4.1"
|
||||
, "grunt-contrib-csslint": "~0.2.0"
|
||||
, "grunt-contrib-jshint": "~0.7.0"
|
||||
, "grunt-contrib-less": "~0.8.0"
|
||||
, "grunt-contrib-qunit": "~0.3.0"
|
||||
, "grunt-contrib-uglify": "~0.2.4"
|
||||
, "grunt-contrib-watch": "~0.5.3"
|
||||
, "grunt-csscomb": "~1.1.0"
|
||||
, "grunt-html-validation": "~0.1.6"
|
||||
, "grunt-jekyll": "~0.4.0"
|
||||
, "grunt-jscs-checker": "~0.2.5"
|
||||
, "grunt-saucelabs": "~4.1.2"
|
||||
, "grunt-sed": "~0.1.1"
|
||||
, "regexp-quote": "~0.0.0"
|
||||
, "load-grunt-tasks": "~0.2.0"
|
||||
}
|
||||
, "jspm": {
|
||||
"main": "js/bootstrap"
|
||||
, "directories": { "lib": "dist" }
|
||||
, "shim": {
|
||||
"js/bootstrap": {
|
||||
"imports": "jquery"
|
||||
, "exports": "$"
|
||||
}
|
||||
}
|
||||
, "buildConfig": { "uglify": true }
|
||||
],
|
||||
"devDependencies": {
|
||||
"btoa": "~1.1.1",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-banner": "~0.2.0",
|
||||
"grunt-contrib-clean": "~0.5.0",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-connect": "~0.5.0",
|
||||
"grunt-contrib-copy": "~0.4.1",
|
||||
"grunt-contrib-csslint": "~0.2.0",
|
||||
"grunt-contrib-jshint": "~0.7.0",
|
||||
"grunt-contrib-less": "~0.8.0",
|
||||
"grunt-contrib-qunit": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.2.4",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-csscomb": "~1.1.0",
|
||||
"grunt-html-validation": "~0.1.6",
|
||||
"grunt-jekyll": "~0.4.0",
|
||||
"grunt-jscs-checker": "~0.2.5",
|
||||
"grunt-saucelabs": "~4.1.2",
|
||||
"grunt-sed": "~0.1.1",
|
||||
"regexp-quote": "~0.0.0",
|
||||
"load-grunt-tasks": "~0.2.0"
|
||||
},
|
||||
"jspm": {
|
||||
"main": "js/bootstrap",
|
||||
"directories": { "lib": "dist" },
|
||||
"shim": {
|
||||
"js/bootstrap": {
|
||||
"imports": "jquery",
|
||||
"exports": "$"
|
||||
}
|
||||
},
|
||||
"buildConfig": { "uglify": true }
|
||||
}
|
||||
}
|
||||
|
||||
87
test-infra/node_modules_cache.py
Executable file
87
test-infra/node_modules_cache.py
Executable file
@ -0,0 +1,87 @@
|
||||
#!/usr/bin/env python2.7
|
||||
from __future__ import absolute_import, unicode_literals, print_function, division
|
||||
|
||||
from sys import argv
|
||||
from os import environ, stat, remove as _delete_file
|
||||
from os.path import isfile
|
||||
from hashlib import sha256
|
||||
from subprocess import check_call as run
|
||||
|
||||
from boto.s3.connection import S3Connection
|
||||
from boto.s3.key import Key
|
||||
from boto.exception import S3ResponseError
|
||||
|
||||
|
||||
NODE_MODULES_TARBALL = 'node_modules.tar.gz'
|
||||
NEED_TO_UPLOAD_MARKER = '.need-to-upload'
|
||||
BYTES_PER_MB = 1024 * 1024
|
||||
try:
|
||||
BUCKET_NAME = environ['TWBS_S3_BUCKET']
|
||||
except KeyError:
|
||||
raise SystemExit("TWBS_S3_BUCKET environment variable not set!")
|
||||
|
||||
|
||||
def _sha256_of_file(filename):
|
||||
hasher = sha256()
|
||||
with open(filename, 'rb') as input_file:
|
||||
hasher.update(input_file.read())
|
||||
return hasher.hexdigest()
|
||||
|
||||
|
||||
def _delete_file_quietly(filename):
|
||||
try:
|
||||
_delete_file(filename)
|
||||
except (OSError, IOError):
|
||||
pass
|
||||
|
||||
|
||||
def _tarball_size():
|
||||
kib = stat(NODE_MODULES_TARBALL).st_size // BYTES_PER_MB
|
||||
return "{} MiB".format(kib)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
# Uses environment variables:
|
||||
# AWS_ACCESS_KEY_ID - AWS Access Key ID
|
||||
# AWS_SECRET_ACCESS_KEY - AWS Secret Access Key
|
||||
argv.pop(0)
|
||||
if len(argv) != 1:
|
||||
raise SystemExit("USAGE: node_modules_cache.py <download | upload>")
|
||||
mode = argv.pop()
|
||||
|
||||
conn = S3Connection()
|
||||
bucket = conn.lookup(BUCKET_NAME)
|
||||
if bucket is None:
|
||||
raise SystemExit("Could not access bucket!")
|
||||
|
||||
package_json_hash = _sha256_of_file('package.json')
|
||||
print('sha256(package.json) = ' + package_json_hash)
|
||||
|
||||
key = Key(bucket, package_json_hash)
|
||||
key.storage_class = 'REDUCED_REDUNDANCY'
|
||||
|
||||
if mode == 'download':
|
||||
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||
try:
|
||||
print("Downloading tarball from S3...")
|
||||
key.get_contents_to_filename(NODE_MODULES_TARBALL)
|
||||
except S3ResponseError as err:
|
||||
open(NEED_TO_UPLOAD_MARKER, 'a').close()
|
||||
print(err)
|
||||
raise SystemExit("Cached node_modules download failed!")
|
||||
print("Downloaded {}.".format(_tarball_size()))
|
||||
print("Extracting tarball...")
|
||||
run(['tar', 'xzf', NODE_MODULES_TARBALL])
|
||||
print("node_modules successfully installed from cache.")
|
||||
elif mode == 'upload':
|
||||
if isfile(NEED_TO_UPLOAD_MARKER):
|
||||
print("Creating tarball...")
|
||||
run(['tar', 'czf', NODE_MODULES_TARBALL, 'node_modules'])
|
||||
print("Uploading tarball to S3... ({})".format(_tarball_size()))
|
||||
key.set_contents_from_filename(NODE_MODULES_TARBALL)
|
||||
print("node_modules cache successfully updated.")
|
||||
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||
else:
|
||||
print("No need to upload anything.")
|
||||
else:
|
||||
raise SystemExit("Unrecognized mode {!r}".format(mode))
|
||||
1
test-infra/requirements.txt
Normal file
1
test-infra/requirements.txt
Normal file
@ -0,0 +1 @@
|
||||
boto==2.20.0
|
||||
Loading…
x
Reference in New Issue
Block a user