Skip to content

B
bootstrap-multiselect
Commit 5dac19ee authored by David Stutz's avatar David Stutz
Browse files
Options

#168 and updated docs.

parent 1a450ee7
Hide whitespace changes
Inline Side-by-side
Showing with 7825 additions and 697 deletions
css/bootstrap-3.0.0.min.css 100755 → 100644
View file @ 5dac19ee
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap-multiselect.css
View file @ 5dac19ee
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
}
.multiselect-container .input-group {
margin: 5px;
}
.multiselect-container > li {
padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
font-weight: bold;
}
.multiselect-container > li > label.multiselect-group {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: normal;
}
.multiselect-container > li > a > label.radio,
.multiselect-container > li > a > label.checkbox {
margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
margin-bottom: 5px;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:bold}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:bold}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:normal}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type="checkbox"]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}
\ No newline at end of file
index.html
View file @ 5dac19ee
......@@ -18,14 +18,32 @@
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="jumbotron">
<div class="container">
<h1>Bootstrap Multiselect</h1>
<p>Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.</p>
</div>
</div>
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="well well-sm" style="margin-top:12px;">
<ul class="nav nav-list">
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li>
<li class="divider"></li>
<li><a href="tests.html">Tests</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="page-header">
<h1>Bootstrap Multiselect</h1>
</div>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
</div>
<script>
$('.dropdown input, .dropdown label').click(function (event) {
event.stopPropagation();
......@@ -37,9 +55,13 @@
</p>
<div class="page-header">
<h1>Getting Started</h1>
<h1><a id="getting-started"></a>Getting Started</h1>
</div>
<p>
The following code snippet will help you getting started.
</p>
<pre class="prettyprint linenums">
&lt;!-- Include Twitter Bootstrap and jQuery: --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;/&gt;
......@@ -69,7 +91,7 @@
</pre>
<div class="page-header">
<h1>Examples</h1>
<h1><a id="examples"></a>Examples</h1>
</div>
<script type="text/javascript">
......@@ -128,7 +150,9 @@
$('#example16').multiselect({
onChange: function(option, checked) {
$('#example16').multiselect('select', option.val());
if (checked == false) {
$('#example16').multiselect('select', option.val());
}
}
});
......@@ -279,8 +303,6 @@
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</td>
<td>
......@@ -492,409 +514,187 @@
</tr>
</table>
<div class="page-header">
<h1>Methods</h1>
<div class="page-header">
<h1><a id="options"></a>Options</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example8').multiselect();
$('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy');
});
$('#example10').multiselect();
$('#example10-select').on('click', function() {
$('option[value="tomatoes"]', $('#example10')).prop('selected', true);
$('option[value="tomatoes"]', $('#example10')).attr('selected', 'selected');
$('option[value="mushrooms"]', $('#example10')).prop('selected', true);
$('option[value="mushrooms"]', $('#example10')).attr('selected', 'selected');
$('option[value="onions"]', $('#example10')).prop('selected', true);
$('option[value="onions"]', $('#example10')).attr('selected', 'selected');
alert('Selected Tomatoes, Mushrooms and Onions.');
});
$('#example10-deselect').on('click', function() {
$('option', $('#example10')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
$('#example10-refresh').on('click', function() {
$('#example10').multiselect('refresh');
});
$('#example12').multiselect({
enableFiltering: true
});
$('#example12-rebuild').on('click', function() {
$('#example12').multiselect('rebuild');
});
$('#example12-add').on('click', function() {
$('#example12').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
});
$('#example12-delete').on('click', function() {
$('option[value="add1"]', $('#example12')).remove();
$('option[value="add2"]', $('#example12')).remove();
$('option[value="add3"]', $('#example12')).remove();
});
$('#example17').multiselect();
$('#example17-cheese').on('click', function() {
$('#example17').multiselect('select', 'cheese');
});
$('#example17-mushrooms').on('click', function() {
$('#example17').multiselect('select', 'mushrooms');
});
$('#example18').multiselect();
$('#example18-cheese').on('click', function() {
$('#example18').multiselect('deselect', 'cheese');
});
$('#example18-mushrooms').on('click', function() {
$('#example18').multiselect('deselect', 'mushrooms');
});
});
</script>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th width="30%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"><code>.multiselect('destroy')</code></td>
<td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options and the select are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td>
<div class="btn-group">
<select id="example8" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
</div>
</td>
<td style="width:300px">
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonText: function(options, select) {
if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>.multiselect('refresh')</code></td>
<tr>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<td>
<div class="btn-group">
<select id="example10" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example10-select" class="btn btn-default">Select some options</button>
<button id="example10-deselect" class="btn btn-default">Deselect all</button>
<button id="example10-refresh" class="btn btn-primary">Refresh</button>
</div>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&apos;.multiselect&apos;).multiselect({
buttonTitle: function(options, select) {
var selected = &apos;&apos;;
options.each(function () {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length - 2);
},
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>buttonClass</code></td>
<td>The class of the dropdown button. Default: <code>btn</code>.</td>
<td>
This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click &apos;Select some options&apos; so select some of the options (meaning added the <code>selected</code> attribute to some of the options). Then click refresh. The plugin will update the checkboxes accordingly.
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn-primary btn-lg&apos;
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>.multiselect('rebuild')</code></td>
<td><code>buttonWidth</code></td>
<td>
<div class="btn-group">
<select id="example12" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example12-add" class="btn btn-default">Add some options</button>
<button id="example12-delete" class="btn btn-default">Delete some options</button>
<button id="example12-rebuild" class="btn btn-primary">Rebuild</button>
</div>
The width of the dropdown button. Default: <code>auto</code>.
Allowed formats:
<ul>
<li><code>100px</code></li>
<li><code>50%</code></li>
<li><code>auto</code></li>
</ul>
If the width is defined using CSS the option should be set to <code>false</code>.
</td>
<td>
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonWidth: &apos;300px&apos;
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>.multiselect('select', value)</code></td>
<td><code>buttonContainer</code></td>
<td>
<div class="btn-group">
<select id="example17" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example17-cheese" class="btn btn-default">Select cheese</button>
<button id="example17-mushrooms" class="btn btn-default">Select Mushrooms</button>
</div>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td>
<td>
Selects an option by its value. Works also using an array of values.
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>.multiselect('deselect', value)</code></td>
<td><code>selectedClass</code></td>
<td>The class applied to the parent &lt;li&gt; of selected items. Default: <code>active</code>.</td>
<td>
<div class="btn-group">
<select id="example18" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example18-cheese" class="btn btn-default">Deselect cheese</button>
<button id="example18-mushrooms" class="btn btn-default">Deselect Mushrooms</button>
</div>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectedClass: null
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td>
Deselect an option by its value. Works also using an array of values.
This event handler is triggered when the selected options are changed.
</td>
</tr>
<tr>
<td><code>.multiselect('dataprovider', data)</code></td>
<td colspan="2">
Provides data for building the select's options the following way:
<pre class="prettyprint linenums">
var data = [
{label: &quot;ACNP&quot;, value: &quot;ACNP&quot;},
{label: &quot;test&quot;, value: &quot;test&quot;}
];
$(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</pre>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;);
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Further Examples</h1>
</div>
<script type="text/javascript">
// Example 21: select all and deselect all buttons.
/**
* Gets whether all the options are selected
* @param {jQuery} $el
* @returns {bool}
*/
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).attr('selected')) {
ret = false;
}
});
return ret;
}
/**
* Selects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
console.log($('option[selected]', $el).length)
}
/**
* Deselects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
});
console.log($('option[selected]', $el).length)
}
/**
* Clears all the selected options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text("Select All");
}
else {
multiselect_selectAll($el);
$btn.text("Deselect All");
}
}
$(document).ready(function() {
// Example 21: confirm a prompt to uncheck an option.
$('#example21').multiselect();
$("#example21-toggle").click(function(e) {
e.preventDefault();
multiselect_toggle($("#example21"), $(this));
});
$('#example22').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 6) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
onChange: function(element, checked) {
if(checked == true) {
//action taken here if true
}
else if(checked == false) {
if(confirm('Do you wish to deselect the element?')) {
//action taken here
}
else {
$("#example22").multiselect('select', element.val());
}
}
}
});
var firstConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: false,
enableCasInsensitiveFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: true,
enableFiltering: true,
enableCasInsensitiveFiltering: true
};
var set = 1;
$('#example33').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example33').multiselect('setOptions', options);
$('#example33').multiselect('rebuild');
}
$('#example33-configuration-set').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td style="width:350px">
<div class="btn-group">
<select id="example21" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example21-toggle" class="btn btn-primary">Select All</button>
</div>
<td><code>maxHeight</code></td>
<td>
Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
/**
* Gets whether all the options are selected
* @param {jQuery} $el
* @returns {bool}
*/
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).attr('selected')) {
ret = false;
}
});
return ret;
}
/**
* Selects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
console.log($('option[selected]', $el).length)
}
/**
* Deselects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
maxHeight: 400
});
console.log($('option[selected]', $el).length)
}
/**
* Clears all the selected options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text(&quot;Select All&quot;);
}
else {
multiselect_selectAll($el);
$btn.text(&quot;Deselect All&quot;);
}
}
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllOption</code></td>
<td>
If set to <code>true</code> a 'Select all' option will be added.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example21').multiselect();
$(&quot;#example21-toggle&quot;).click(function(e) {
e.preventDefault();
multiselect_toggle($(&quot;#example21&quot;), $(this));
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true
});
});
&lt;/script&gt;
......@@ -902,166 +702,50 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td>
</tr>
<tr>
<td><code>selectAllText</code></td>
<td>
<select id="example22" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
The label for the 'Select all' option.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example22').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
else if (options.length &gt; 6) {
return options.length + ' selected &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
},
onChange: function(element, checked) {
if(checked == true) {
// action taken here if true
}
else if (checked == false) {
if (confirm('Do you wish to deselect the element?')) {
// action taken here
}
else {
$(&quot;#example22&quot;).multiselect('select', element.val());
return false;
}
}
}
$(&#39;.multiselect&#39;).multiselect({
selectAllText: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example33" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example33-configuration-set" class="btn btn-primary">Configuration Set 2</button>
</div>
</td>
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
var set = 1;
$('#example33').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example33').multiselect('setOptions', options);
$('#example33').multiselect('rebuild');
}
$('#example33-configuration-set').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Options</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th width="30%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options and the select are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td><code>selectAllValue</code></td>
<td>
The value by which the select all option is identified.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonText: function(options, select) {
if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
}
selectAllValue: 'multiselect-all',
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<tr>
<td><code>enableFiltering</code></td>
<td>
If set to <code>true</code> a search field will be added to filter the visible options.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&apos;.multiselect&apos;).multiselect({
buttonTitle: function(options, select) {
var selected = &apos;&apos;;
options.each(function () {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length - 2);
},
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true
});
});
&lt;/script&gt;
......@@ -1069,14 +753,16 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td>
</tr>
<tr>
<td><code>buttonClass</code></td>
<td>The class of the dropdown button. Default: <code>btn</code>.</td>
<td><code>filterPlaceholder</code></td>
<td>
The placeholder used in the search field if filtering is enabled.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn-primary btn-lg&apos;
filterPlaceholder: &apos;Search&apos;
});
});
&lt;/script&gt;
......@@ -1084,159 +770,493 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td>
</tr>
<tr>
<td><code>buttonWidth</code></td>
<td><code>dropRight</code></td>
<td>
The width of the dropdown button. Default: <code>auto</code>.
Allowed formats:
<ul>
<li><code>100px</code></li>
<li><code>50%</code></li>
<li><code>auto</code></li>
</ul>
If the width is defined using CSS the option should be set to <code>false</code>.
Will make the menu drop right if set to <code>true</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonWidth: &apos;300px&apos;
dropRight: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1><a id="methods"></a>Methods</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example8').multiselect();
$('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy');
});
$('#example10').multiselect();
$('#example10-select').on('click', function() {
$('option[value="tomatoes"]', $('#example10')).prop('selected', true);
$('option[value="tomatoes"]', $('#example10')).attr('selected', 'selected');
$('option[value="mushrooms"]', $('#example10')).prop('selected', true);
$('option[value="mushrooms"]', $('#example10')).attr('selected', 'selected');
$('option[value="onions"]', $('#example10')).prop('selected', true);
$('option[value="onions"]', $('#example10')).attr('selected', 'selected');
alert('Selected Tomatoes, Mushrooms and Onions.');
});
$('#example10-deselect').on('click', function() {
$('option', $('#example10')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
$('#example10-refresh').on('click', function() {
$('#example10').multiselect('refresh');
});
$('#example12').multiselect({
enableFiltering: true
});
$('#example12-rebuild').on('click', function() {
$('#example12').multiselect('rebuild');
});
$('#example12-add').on('click', function() {
$('#example12').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
});
$('#example12-delete').on('click', function() {
$('option[value="add1"]', $('#example12')).remove();
$('option[value="add2"]', $('#example12')).remove();
$('option[value="add3"]', $('#example12')).remove();
});
$('#example17').multiselect();
$('#example17-cheese').on('click', function() {
$('#example17').multiselect('select', 'cheese');
});
$('#example17-mushrooms').on('click', function() {
$('#example17').multiselect('select', 'mushrooms');
});
$('#example18').multiselect();
$('#example18-cheese').on('click', function() {
$('#example18').multiselect('deselect', 'cheese');
});
$('#example18-mushrooms').on('click', function() {
$('#example18').multiselect('deselect', 'mushrooms');
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td><code>buttonContainer</code></td>
<td width="20%"><code>.multiselect('destroy')</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
<div class="btn-group">
<select id="example8" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
</div>
</td>
<td style="width:300px">
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
</td>
</tr>
<tr>
<td><code>.multiselect('refresh')</code></td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;
});
});
&lt;/script&gt;
</pre>
<div class="btn-group">
<select id="example10" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example10-select" class="btn btn-default">Select some options</button>
<button id="example10-deselect" class="btn btn-default">Deselect all</button>
<button id="example10-refresh" class="btn btn-primary">Refresh</button>
</div>
</td>
<td>
This method is used to refresh the checked checkboxes based on the currently selected options within the select. Click &apos;Select some options&apos; so select some of the options (meaning added the <code>selected</code> attribute to some of the options). Then click refresh. The plugin will update the checkboxes accordingly.
</td>
</tr>
<tr>
<td><code>selectedClass</code></td>
<td>The class applied to the parent &lt;li&gt; of selected items. Default: <code>active</code>.</td>
<td><code>.multiselect('rebuild')</code></td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectedClass: null
});
});
&lt;/script&gt;
</pre>
<div class="btn-group">
<select id="example12" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example12-add" class="btn btn-default">Add some options</button>
<button id="example12-delete" class="btn btn-default">Delete some options</button>
<button id="example12-rebuild" class="btn btn-primary">Rebuild</button>
</div>
</td>
<td>
Rebuilds the whole dropdown menu. All selected options will remain selected (if still existent!).
</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td><code>.multiselect('select', value)</code></td>
<td>
This event handler is triggered when the selected options are changed.
<div class="btn-group">
<select id="example17" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example17-cheese" class="btn btn-default">Select cheese</button>
<button id="example17-mushrooms" class="btn btn-default">Select Mushrooms</button>
</div>
</td>
<td>
Selects an option by its value. Works also using an array of values.
</td>
</tr>
<tr>
<td><code>.multiselect('deselect', value)</code></td>
<td>
<div class="btn-group">
<select id="example18" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example18-cheese" class="btn btn-default">Deselect cheese</button>
<button id="example18-mushrooms" class="btn btn-default">Deselect Mushrooms</button>
</div>
</td>
<td>
Deselect an option by its value. Works also using an array of values.
</td>
</tr>
<tr>
<td><code>.multiselect('dataprovider', data)</code></td>
<td colspan="2">
<p>
Provides data for building the select's options the following way:
</p>
<pre class="prettyprint linenums">
var data = [
{label: &quot;ACNP&quot;, value: &quot;ACNP&quot;},
{label: &quot;test&quot;, value: &quot;test&quot;}
];
$(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</pre>
</td>
</tr>
<tr>
<td><code>.multiselect('setOptions', options)</code></td>
<td colspan="2">
<p>
Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>.
</p>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1><a id="further-examples"></a>Further Examples</h1>
</div>
<script type="text/javascript">
/**
* Gets whether all the options are selected
* @param {jQuery} $el
* @returns {bool}
*/
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).prop('selected')) {
ret = false;
}
});
return ret;
}
/**
* Selects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
}
/**
* Deselects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
});
}
/**
* Clears all the selected options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text("Select All");
}
else {
multiselect_selectAll($el);
$btn.text("Deselect All");
}
}
$(document).ready(function() {
$('#example21').multiselect();
$("#example21-toggle").click(function(e) {
e.preventDefault();
multiselect_toggle($("#example21"), $(this));
});
$('#example22').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else if (options.length > 6) {
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
onChange: function(element, checked) {
if(checked == true) {
//action taken here if true
}
else if(checked == false) {
if(confirm('Do you wish to deselect the element?')) {
//action taken here
}
else {
$("#example22").multiselect('select', element.val());
}
}
}
});
var firstConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: false,
enableCasInsensitiveFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: true,
enableFiltering: true,
enableCasInsensitiveFiltering: true
};
var set = 1;
$('#example33').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example33').multiselect('setOptions', options);
$('#example33').multiselect('rebuild');
}
$('#example33-configuration-set').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
$('#example34').multiselect();
$('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes');
});
$('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes');
});
$('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td style="width:400px">
<p>
Use "Select" and "Deselect" to select or deselectcheese and tomatoes. Use "Values" to display the currently selected elements by using <code>$('.multiselect').val()</code>.
</p>
<div class="btn-group">
<select id="example34" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example34-select" class="btn btn-primary">Select</button>
<button id="example34-deselect" class="btn btn-primary">Deselect</button>
<button id="example34-values" class="btn btn-primary">Values</button>
</div>
<div id="example34-text" style="margin-top:6px;"></div>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;);
}
});
$('#example34').multiselect();
$('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes');
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>maxHeight</code></td>
<td>
Used for a long list of options this option defines the maximum height of the dropdown menu. If the size is exceeded a scrollbar will appear.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
maxHeight: 400
});
$('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes');
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllOption</code></td>
<td>
If set to <code>true</code> a 'Select all' option will be added.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true
});
$('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>selectAllText</code></td>
<td>
The label for the 'Select all' option.
<p>
Use the button to toggle the selection.
</p>
<div class="btn-group">
<select id="example21" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example21-toggle" class="btn btn-primary">Select All</button>
</div>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectAllText: true
/**
* Gets whether all the options are selected
* @param {jQuery} $el
* @returns {bool}
*/
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).prop('selected')) {
ret = false;
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>selectAllValue</code></td>
<td>
The value by which the select all option is identified.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectAllValue: 'multiselect-all',
return ret;
}
/**
* Selects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>enableFiltering</code></td>
<td>
If set to <code>true</code> a search field will be added to filter the visible options.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
}
/**
* Deselects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
});
}
/**
* Clears all the selected options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text(&quot;Select All&quot;);
}
else {
multiselect_selectAll($el);
$btn.text(&quot;Deselect All&quot;);
}
}
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true
$('#example21').multiselect();
$(&quot;#example21-toggle&quot;).click(function(e) {
e.preventDefault();
multiselect_toggle($(&quot;#example21&quot;), $(this));
});
});
&lt;/script&gt;
......@@ -1244,43 +1264,129 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td>
</tr>
<tr>
<td><code>filterPlaceholder</code></td>
<td>
The placeholder used in the search field if filtering is enabled.
<p>
When deselecting an option you will be asked for confirmation.
</p>
<select id="example22" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
filterPlaceholder: &apos;Search&apos;
$('#example22').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
else if (options.length &gt; 6) {
return options.length + ' selected &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;';
}
},
onChange: function(element, checked) {
if(checked == true) {
// action taken here if true
}
else if (checked == false) {
if (confirm('Do you wish to deselect the element?')) {
// action taken here
}
else {
$(&quot;#example22&quot;).multiselect('select', element.val());
return false;
}
}
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>dropRight</code></td>
<td>
Will make the menu drop right if set to <code>true</code>.
</td>
<td>
<pre class="prettyprint linenums">
<tr>
<td>
<p>
Switching between different configuration sets is possible using a combination of <code>.multiselect('setOptions', options)</code> and <code>.multiselect('rebuild')</code>.
</p>
<div class="btn-group">
<select id="example33" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button id="example33-configuration-set" class="btn btn-primary">Configuration Set 2</button>
</div>
</td>
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
dropRight: true
var firstConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: false,
enableCasInsensitiveFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: true,
enableFiltering: true,
enableCasInsensitiveFiltering: true
};
var set = 1;
$('#example33').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example33').multiselect('setOptions', options);
$('#example33').multiselect('rebuild');
}
$('#example33-configuration-set').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Additional Styling</h1>
<h1><a id="additional-styling"></a>Additional Styling</h1>
</div>
<p>For additionaly styling of the multiselect button the CSS class <code>multiselect</code> can be used.</p>
<style media="screen" type="text/css">
......@@ -1392,7 +1498,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</tr>
</table>
</div>
</p>
</div>
<div class="container">
<hr>
......
js/bootstrap-multiselect.js
View file @ 5dac19ee
......@@ -80,11 +80,16 @@
},
// Like the buttonText option to update the title of the button.
buttonTitle: function(options, select) {
var selected = '';
options.each(function () {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length - 2);
if (options.length == 0) {
return this.nonSelectedText;
}
else {
var selected = '';
options.each(function () {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length - 2);
}
},
// Is triggered on change of the selected options.
onChange : function(option, checked) {
......@@ -222,11 +227,11 @@
}
if (checked) {
$option.attr('selected', true);
$option.prop('selected', true);
if (this.options.multiple) {
// Simply select additional option.
$option.attr('selected', 'selected');
$option.prop('selected', 'selected');
}
else {
// Unselect all other options and corresponding checkboxes.
......@@ -235,7 +240,7 @@
}
$($checkboxesNotThis).prop('checked', false);
$optionsNotThis.removeAttr('selected').attr('selected', false);
$optionsNotThis.prop('selected', false);
// It's a single selection, so close.
this.$button.click();
......@@ -247,13 +252,13 @@
}
else {
// Unselect option.
$option.removeAttr('selected').attr('selected', false);
$option.prop('selected', false);
}
this.updateButtonText();
this.options.onChange($option, checked);
this.$select.change();
this.options.onChange($option, checked);
if(this.options.preventInputChangeEvent) {
return false;
}
......@@ -313,7 +318,7 @@
// Will build an dropdown element for the given option.
createOptionValue: function(element) {
if ($(element).is(':selected')) {
$(element).attr('selected', 'selected').attr('selected', true);
$(element).prop('selected', 'selected').prop('selected', true);
}
// Support the label attribute on options.
......@@ -469,7 +474,7 @@
$input.attr('disabled', 'disabled').prop('disabled', true).parents('li').addClass('disabled');
}
else {
$input.removeAttr('disabled').prop('disabled', false).parents('li').removeClass('disabled');
$input.prop('disabled', false).parents('li').removeClass('disabled');
}
}, this));
......@@ -494,8 +499,7 @@
}
$checkbox.prop('checked', true);
$option.attr('selected', 'selected').attr('selected', true);
$option.prop('selected', true);
this.options.onChange($option, true);
}
......@@ -520,8 +524,7 @@
}
$checkbox.prop('checked', false);
$option.removeAttr('selected').attr('selected', false);
$option.prop('selected', false);
this.options.onChange($option, false);
}
......@@ -568,7 +571,7 @@
// Update button text and button title.
updateButtonText: function() {
var options = this.getSelected();
console.log(options);
// First update the displayed button text.
$('button', this.$container).html(this.options.buttonText(options, this.$select));
......@@ -579,8 +582,8 @@
// Get all selected options.
getSelected: function() {
return $('option[value!="' + this.options.selectAllValue + '"]', this.$select).filter(function() {
return $(this).attr('selected');
return $('option[value!="' + this.options.selectAllValue + '"]:selected', this.$select).filter(function() {
return $(this).prop('selected');
});
},
......
less/alerts.less 0 → 100644
View file @ 5dac19ee
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
less/badges.less 0 → 100644
View file @ 5dac19ee
//
// Badges
// --------------------------------------------------
// Base classes
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
border-radius: @badge-border-radius;
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
}
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: @badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Quick fix for labels/badges in buttons
.btn .badge {
position: relative;
top: -1px;
}
// Account for counters in navs
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: @badge-active-color;
background-color: @badge-active-bg;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
less/bootstrap.less 0 → 100644
View file @ 5dac19ee
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "print.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
less/breadcrumbs.less 0 → 100644
View file @ 5dac19ee
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: 8px 15px;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
border-radius: @border-radius-base;
> li {
display: inline-block;
&+li:before {
content: "/\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
}
}
> .active {
color: @breadcrumb-active-color;
}
}
less/button-groups.less 0 → 100644
View file @ 5dac19ee
//
// Button groups
// --------------------------------------------------
// Button carets
//
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret {
.btn-default & {
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-top-color: #fff;
}
}
.dropup {
& .btn-default .caret {
border-bottom-color: @btn-default-color;
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
.caret {
border-bottom-color: #fff;
}
}
}
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
.clearfix();
.btn-group {
float: left;
}
// Space out series of button groups
> .btn,
> .btn-group {
+ .btn,
+ .btn-group {
margin-left: 5px;
}
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { .btn-xs(); }
.btn-group-sm > .btn { .btn-sm(); }
.btn-group-lg > .btn { .btn-lg(); }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
.btn-group-vertical {
> .btn,
> .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
.clearfix();
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
.btn {
float: none;
display: table-cell;
width: 1%;
}
}
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}
less/buttons.less 0 → 100644
View file @ 5dac19ee
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core styles
.btn {
display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: @btn-font-weight;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: @border-radius-base;
white-space: nowrap;
.user-select(none);
&:focus {
.tab-focus();
}
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: @link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
.box-shadow(none);
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
}
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
background-color: transparent;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @btn-link-disabled-color;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
.btn-sm,
.btn-xs {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.btn-xs {
padding: 1px 5px;
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
less/carousel.less 0 → 100644
View file @ 5dac19ee
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
.img-responsive();
line-height: 1;
}
}
> .active,
> .next,
> .prev { display: block; }
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
// We can't have this transition here because webkit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
}
// Hover/focus state
&:hover,
&:focus {
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
}
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
font-family: serif;
}
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
}
.active {
margin: 0;
width: 12px;
height: 12px;
background-color: @carousel-indicator-active-bg;
}
}
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}
less/close.less 0 → 100644
View file @ 5dac19ee
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.2);
&:hover,
&:focus {
color: @close-color;
text-decoration: none;
cursor: pointer;
.opacity(.5);
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button& {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
}
less/code.less 0 → 100644
View file @ 5dac19ee
//
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
pre {
font-family: @font-family-monospace;
}
// Inline code
code {
padding: 2px 4px;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
white-space: nowrap;
border-radius: @border-radius-base;
}
// Blocks of code
pre {
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: @line-height-computed;
}
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}
less/component-animations.less 0 → 100644
View file @ 5dac19ee
//
// Component animations
// --------------------------------------------------
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
display: none;
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
}
less/dropdowns.less 0 → 100644
View file @ 5dac19ee
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this.
border-bottom: 0 dotted;
content: "";
}
// The dropdown wrapper (div)
.dropdown {
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: not-allowed;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: @font-size-small;
line-height: @line-height-base;
color: @dropdown-header-color;
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: @zindex-dropdown - 10;
}
// Right aligned dropdowns
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`.
border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.pull-right > .dropdown-menu();
}
}
}
less/forms.less 0 → 100644
View file @ 5dac19ee
//
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
// Normalize form controls
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Set the height of select and file controls to match text inputs
input[type="file"] {
display: block;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
select optgroup {
font-size: inherit;
font-style: inherit;
font-family: inherit;
}
// Focus for select, file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Fix for Chrome number input
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
// See https://github.com/twbs/bootstrap/issues/8350 for more.
input[type="number"] {
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
height: auto;
}
}
// Placeholder
//
// Placeholder text gets special styles because when browsers invalidate entire
// lines if it doesn't understand a selector/
.form-control {
.placeholder();
}
// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
.form-control {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
vertical-align: middle;
background-color: @input-bg;
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
// Disabled and read-only inputs
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
// Reset height for `textarea`s
textarea& {
height: auto;
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: 15px;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
label {
display: inline;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
}
}
// Form control sizing
.input-sm {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.input-lg {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
// Warning
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
// Error
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Success
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: (@padding-base-vertical + 1);
}
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-tablet) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Make form groups behave like rows
.form-group {
.make-row();
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.control-label {
text-align: right;
}
}
}
less/glyphicons.less 0 → 100644
View file @ 5dac19ee
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-briefcase { &:before { content: "\1f4bc"; } }
.glyphicon-calendar { &:before { content: "\1f4c5"; } }
.glyphicon-pushpin { &:before { content: "\1f4cc"; } }
.glyphicon-paperclip { &:before { content: "\1f4ce"; } }
.glyphicon-camera { &:before { content: "\1f4f7"; } }
.glyphicon-lock { &:before { content: "\1f512"; } }
.glyphicon-bell { &:before { content: "\1f514"; } }
.glyphicon-bookmark { &:before { content: "\1f516"; } }
.glyphicon-fire { &:before { content: "\1f525"; } }
.glyphicon-wrench { &:before { content: "\1f527"; } }
less/grid.less 0 → 100644
View file @ 5dac19ee
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
}
// mobile first defaults
.row {
.make-row();
}
// Common styles for small and large grid columns
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
// Extra small grid
//
// Grid classes for extra small devices like smartphones. No offset, push, or
// pull classes are present here due to the size of the target.
//
// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
// it's full-width.
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-desktop) {
.container {
max-width: @container-desktop;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes
.col-md-push-0 { left: auto; }
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
less/input-groups.less 0 → 100644
View file @ 5dac19ee
//
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&.col {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
width: 100%;
margin-bottom: 0;
}
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); }
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-sm(); }
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
// Sizing
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
white-space: nowrap;
}
.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;
}
}
less/jumbotron.less 0 → 100644
View file @ 5dac19ee
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
}
p {
line-height: 1.4;
}
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@media screen and (min-width: @screen-tablet) {
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1 {
font-size: (@font-size-base * 4.5);
}
}
}
less/labels.less 0 → 100644
View file @ 5dac19ee
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: @label-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// Empty labels collapse automatically (not available in IE8)
&:empty {
display: none;
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
}
.label-primary {
.label-variant(@label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
}
less/list-group.less 0 → 100644
View file @ 5dac19ee
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
// Individual list items
// -------------------------
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items
&:first-child {
.border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
// Linked list items
a& {
color: @list-group-link-color;
.list-group-item-heading {
color: @list-group-link-heading-color;
}
// Hover state
&:hover,
&:focus {
text-decoration: none;
background-color: @list-group-hover-bg;
}
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: lighten(@list-group-active-bg, 40%);
}
}
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
less/media.less 0 → 100644
View file @ 5dac19ee
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media {
> .pull-left {
margin-right: 10px;
}
> .pull-right {
margin-left: 10px;
}
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
padding-left: 0;
list-style: none;
}
less/mixins.less 0 → 100644
View file @ 5dac19ee
//
// Mixins
// --------------------------------------------------
// Utilities
// -------------------------
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
// Webkit-style focus
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Placeholder text
.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
}
// Text overflow
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Single side border-radius
.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;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.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;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9+
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9+
transform: scale(@ratio);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
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);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
-o-user-select: @select;
user-select: @select;
}
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
// GRADIENTS
// --------------------------------------------------
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: #555; @angle: 45deg) {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Retina images
//
// Short retina mixin for setting background-image and -size
.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;
}
}
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.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
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse .panel-body {
border-top-color: @border;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: @border;
}
}
}
// Alerts
// -------------------------
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
// Tables
// -------------------------
.table-row-variant(@state; @background; @border) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.@{state},
> th.@{state},
&.@{state} > td,
&.@{state} > th {
background-color: @background;
border-color: @border;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td {
background-color: darken(@background, 5%);
border-color: darken(@border, 5%);
}
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle& {
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border
}
}
}
// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
// Pagination
// -------------------------
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}
// Labels
// -------------------------
.label-variant(@color) {
background-color: @color;
&[href] {
&:hover,
&:focus {
background-color: darken(@color, 10%);
}
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// Progress bars
// -------------------------
.progress-bar-variant(@color) {
background-color: @color;
.progress-striped & {
#gradient > .striped(@color);
}
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
tr& { display: none !important; }
th&,
td& { display: none !important; }
}
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.clearfix();
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
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);
}
// 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) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
// 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) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
// 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) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns));
}
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea& {
height: auto;
}
}
less/modals.less 0 → 100644
View file @ 5dac19ee
//
// Modals
// --------------------------------------------------
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
// Account for hiding of scrollbar
body&,
.navbar-fixed-top,
.navbar-fixed-bottom {
margin-right: 15px
}
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}
}
// Shell div to position the modal with bottom padding
.modal-dialog {
margin-left: auto;
margin-right: auto;
width: auto;
padding: 10px;
z-index: (@zindex-modal-background + 10);
}
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: (@zindex-modal-background - 10);
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(.5); }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
margin-top: 15px;
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
// Scale up the modal
@media screen and (min-width: @screen-tablet) {
.modal-dialog {
left: 50%;
right: auto;
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
}
less/navbar.less 0 → 100644
View file @ 5dac19ee
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
// Prevent floats from breaking the navbar
.clearfix();
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
max-height: 340px;
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
.clearfix();
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
// Account for first and last children spacing
.navbar-nav.navbar-left:first-child {
margin-left: -@navbar-padding-horizontal;
}
.navbar-nav.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
.navbar-text:last-child {
margin-right: 0;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirity of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
border-width: 0 0 1px;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// Brand/project name
.navbar-brand {
float: left;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
&:hover,
&:focus {
text-decoration: none;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
margin-left: -@navbar-padding-horizontal;
}
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
border: 1px solid transparent;
border-radius: @border-radius-base;
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a {
line-height: @line-height-computed;
&:hover,
&:focus {
background-image: none;
}
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}
}
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specifity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @screen-xs-max) {
margin-bottom: 5px;
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.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
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
float: left;
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-default-bg, 7%);
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-default-link-hover-color;
border-bottom-color: @navbar-default-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
.caret {
border-top-color: @navbar-default-link-active-color;
border-bottom-color: @navbar-default-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-default-link-color;
border-bottom-color: @navbar-default-link-color;
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
> .dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
> .open > a {
&,
&:hover,
&:focus {
.caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
}
less/navs.less 0 → 100644
View file @ 5dac19ee
//
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
.nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
.clearfix();
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: @nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
background-color: @nav-link-hover-bg;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @nav-disabled-link-color;
&:hover,
&:focus {
color: @nav-disabled-link-hover-color;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
}
}
// Dividers (basically an hr) within the dropdown
.nav-divider {
.nav-divider();
}
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
// NAV LIST
// --------
.nav-list {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color;
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
// Actual tabs (as links)
> a {
margin-right: 2px;
line-height: @line-height-base;
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
// Active state, and it's :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified();
.nav-tabs-justified();
}
}
// Pills
// -------------------------
.nav-pills {
> li {
float: left;
// Links rendered as pills
> a {
border-radius: 5px;
}
+ li {
margin-left: 2px;
}
// Active state
&.active > a {
&,
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
}
}
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
> a {
text-align: center;
}
}
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;
}
}
}
// Move borders to anchors instead of bottom of list
.nav-tabs-justified {
border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
// Tabbable tabs
// -------------------------
// Clear any floats
.tabbable {
.clearfix();
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content,
.pill-content {
> .active {
display: block;
}
}
// Dropdowns
// -------------------------
// Make dropdown carets use link color in navs
.nav .caret {
border-top-color: @link-color;
border-bottom-color: @link-color;
}
.nav a:hover .caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}
less/normalize.less 0 → 100644
View file @ 5dac19ee
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// Correct `inline-block` display not defined in IE 8/9.
//
audio,
canvas,
video {
display: inline-block;
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
[hidden] {
display: none;
}
// ==========================================================================
// Base
// ==========================================================================
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// ==========================================================================
// Links
// ==========================================================================
//
// Address `outline` inconsistency between Chrome and other browsers.
//
a:focus {
outline: thin dotted;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// ==========================================================================
// Typography
// ==========================================================================
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Correct font family set oddly in Safari 5 and Chrome.
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
//
// Improve readability of pre-formatted text in all browsers.
//
pre {
white-space: pre-wrap;
}
//
// Set consistent quote types.
//
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// ==========================================================================
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// ==========================================================================
// Figures
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 0;
}
// ==========================================================================
// Forms
// ==========================================================================
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 2
margin: 0; // 3
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
button,
input {
line-height: normal;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 1. Address box sizing set to `content-box` in IE 8/9.
// 2. Remove excess padding in IE 8/9.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//
textarea {
overflow: auto; // 1
vertical-align: top; // 2
}
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}
less/pager.less 0 → 100644
View file @ 5dac19ee
//
// Pager pagination
// --------------------------------------------------
.pager {
padding-left: 0;
margin: @line-height-computed 0;
list-style: none;
text-align: center;
.clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-radius: @pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pagination-hover-bg;
}
}
.next {
> a,
> span {
float: right;
}
}
.previous {
> a,
> span {
float: left;
}
}
.disabled {
> a,
> a:hover,
> a:focus,
> span {
color: @pager-disabled-color;
background-color: @pagination-bg;
cursor: not-allowed;
}
}
}
less/pagination.less 0 → 100644
View file @ 5dac19ee
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
padding-left: 0;
margin: @line-height-computed 0;
border-radius: @border-radius-base;
> li {
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
margin-left: -1px;
}
&:first-child {
> a,
> span {
margin-left: 0;
.border-left-radius(@border-radius-base);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-base);
}
}
}
> li > a,
> li > span {
&:hover,
&:focus {
background-color: @pagination-hover-bg;
}
}
> .active > a,
> .active > span {
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-bg;
cursor: default;
}
}
> .disabled {
> span,
> a,
> a:hover,
> a:focus {
color: @pagination-disabled-color;
background-color: @pagination-bg;
border-color: @pagination-border;
cursor: not-allowed;
}
}
}
// Sizing
// --------------------------------------------------
// Large
.pagination-lg {
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
}
// Small
.pagination-sm {
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
}
less/panels.less 0 → 100644
View file @ 5dac19ee
//
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table {
margin-bottom: 0;
}
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
}
// Optional heading
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1);
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil((@font-size-base * 1.125));
> a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-inner-border;
.border-bottom-radius(@panel-border-radius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: @panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-inner-border;
}
}
// New subcomponent for wrapping collapsable content for proper animations
.panel-collapse {
}
}
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
less/popovers.less 0 → 100644
View file @ 5dac19ee
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover .arrow {
border-width: @popover-arrow-outer-width;
}
.popover .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}
less/print.less 0 → 100644
View file @ 5dac19ee
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2cm .5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap components
.navbar {
display: none;
}
.table {
td,
th {
background-color: #fff !important;
}
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
}
less/progress-bars.less 0 → 100644
View file @ 5dac19ee
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// Webkit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Firefox
@-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
color: @progress-bar-color;
text-align: center;
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease);
}
// Striped bars
.progress-striped .progress-bar {
#gradient > .striped(@progress-bar-bg);
background-size: 40px 40px;
}
// Call animation for the active one
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
// Variations
// -------------------------
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}
less/responsive-utilities.less 0 → 100644
View file @ 5dac19ee
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
@media screen and (max-width: 400px) {
@-ms-viewport{
width: 320px;
}
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// Visibility utilities
.visible-xs {
.responsive-invisibility();
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-sm {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-md {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-lg {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-xs {
.responsive-visibility();
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-sm {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-md {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-lg {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
// Print utilities
.visible-print {
.responsive-invisibility();
}
@media print {
.visible-print {
.responsive-visibility();
}
.hidden-print {
.responsive-invisibility();
}
}
less/scaffolding.less 0 → 100644
View file @ 5dac19ee
//
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
*,
*:before,
*:after {
.box-sizing(border-box);
}
// Body reset
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
background-image: none;
}
// Links
a {
color: @link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
}
&:focus {
.tab-focus();
}
}
// Images
img {
vertical-align: middle;
}
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
.img-responsive();
}
// Rounded corners
.img-rounded {
border-radius: @border-radius-large;
}
// Image thumbnails
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
// Keep them at most 100% wide
.img-responsive(inline-block);
}
// Perfect circle
.img-circle {
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
border: 0;
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
less/tables.less 0 → 100644
View file @ 5dac19ee
//
// Tables
// --------------------------------------------------
table {
max-width: 100%;
background-color: @table-bg;
}
th {
text-align: left;
}
// Baseline styles
.table {
width: 100%;
margin-bottom: @line-height-computed;
// Cells
thead,
tbody,
tfoot {
> tr {
> th,
> td {
padding: @table-cell-padding;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
}
}
}
// Bottom align for column headings
thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
caption + thead,
colgroup + thead,
thead:first-child {
tr:first-child {
th, td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
}
// Condensed table w/ half padding
.table-condensed {
thead,
tbody,
tfoot {
> tr {
> th,
> td {
padding: @table-condensed-cell-padding;
}
}
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid @table-border-color;
}
}
}
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
}
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
}
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
float: none;
display: table-column;
}
table {
td,
th {
&[class*="col-"] {
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.active,
> th.active,
&.active > td,
&.active > th {
background-color: @table-bg-active;
}
}
// Generate the contextual variants
.table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
less/theme.less 0 → 100644
View file @ 5dac19ee
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
&:active,
&.active {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
background-color: @navbar-default-bg;
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
.navbar-nav > .active > a {
background-color: @navbar-inverse-bg;
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
.alert-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
border-color: darken(@color, 15%);
}
// Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;)
}
// Mixin for generating new styles
.progress-bar-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
// Mixin for generating new styles
.panel-heading-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
}
less/thumbnails.less 0 → 100644
View file @ 5dac19ee
//
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
.img-thumbnail();
display: block; // Override the inline-block from `.img-thumbnail`
> img {
.img-responsive();
}
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
border-color: @link-color;
}
// Images and captions
.thumbnail > img {
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}
less/tooltip.less 0 → 100644
View file @ 5dac19ee
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: 1.4;
.opacity(0);
&.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
right: 5px;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}
less/type.less 0 → 100644
View file @ 5dac19ee
//
// Typography
// --------------------------------------------------
// Body text
// -------------------------
p {
margin: 0 0 (@line-height-computed / 2);
}
.lead {
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.15);
font-weight: 200;
line-height: 1.4;
@media (min-width: 768px) {
font-size: (@font-size-base * 1.5);
}
}
// Emphasis & misc
// -------------------------
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
// Undo browser default styling
cite { font-style: normal; }
// Contextual emphasis
.text-muted { color: @text-muted; }
.text-primary { color: @brand-primary; }
.text-warning { color: @state-warning-text; }
.text-danger { color: @state-danger-text; }
.text-success { color: @state-success-text; }
.text-info { color: @state-info-text; }
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
color: @headings-small-color;
}
}
h1,
h2,
h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
}
h4,
h5,
h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
// Page header
// -------------------------
.page-header {
padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @page-header-border-color;
}
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul,
ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
ul,
ol{
margin-bottom: 0;
}
}
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
padding-left: 0;
list-style: none;
}
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
dl {
margin-bottom: @line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0; // Undo browser default
}
// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).
@media (min-width: @grid-float-breakpoint) {
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @component-offset-horizontal;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
}
}
// MISC
// ----
// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
border-left: 5px solid @blockquote-border-color;
p {
font-size: (@font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
p:last-child {
margin-bottom: 0;
}
small {
display: block;
line-height: @line-height-base;
color: @blockquote-small-color;
&:before {
content: '\2014 \00A0';// EM DASH, NBSP
}
}
// Float right with text-align: right
&.pull-right {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;
border-left: 0;
p,
small {
text-align: right;
}
small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014';// NBSP, EM DASH
}
}
}
}
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
address {
display: block;
margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
}
less/utilities.less 0 → 100644
View file @ 5dac19ee
//
// Utility classes
// --------------------------------------------------
// Floats
// -------------------------
.clearfix {
.clearfix();
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
// Toggling content
// -------------------------
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
.hide-text();
}
// For Affix plugin
// -------------------------
.affix {
position: fixed;
}
less/variables.less 0 → 100644
View file @ 5dac19ee
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@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
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding
// -------------------------
@body-bg: #fff;
@text-color: @gray-dark;
// Links
// -------------------------
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Typography
// -------------------------
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, 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
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Iconography
// -------------------------
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
// Tables
// -------------------------
@table-cell-padding: 8px;
@table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@btn-default-border: #ccc;
@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%);
@btn-warning-color: #fff;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: #fff;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: @gray-light;
// Forms
// -------------------------
@input-bg: #fff;
@input-bg-disabled: @gray-lighter;
@input-color: @gray;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border;
// Dropdowns
// -------------------------
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-caret-color: #000;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@nav-link-padding: 4px 6px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff;
// Pagination
// -------------------------
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-hover-bg: @gray-lighter;
@pagination-active-bg: @brand-primary;
@pagination-active-color: #fff;
@pagination-disabled-color: @gray-light;
// Pager
// -------------------------
@pager-border-radius: 15px;
@pager-disabled-color: @gray-light;
// Jumbotron
// -------------------------
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
// Form states and alerts
// -------------------------
@state-warning-text: #c09853;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-success-text: #468847;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Tooltips
// -------------------------
@tooltip-max-width: 200px;
@tooltip-color: #fff;
@tooltip-bg: #000;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// -------------------------
@popover-bg: #fff;
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2);
@popover-fallback-border-color: #ccc;
@popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
// Labels
// -------------------------
@label-default-bg: @gray-light;
@label-primary-bg: @brand-primary;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
@modal-content-bg: #fff;
@modal-content-border-color: rgba(0,0,0,.2);
@modal-content-fallback-border-color: #999;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts
// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-color: #fff;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@list-group-border: #ddd;
@list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5;
@list-group-active-color: #fff;
@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;
// Panels
// -------------------------
@panel-bg: #fff;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@well-bg: #f5f5f5;
// Badges
// -------------------------
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: @gray-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc;
@breadcrumb-active-color: @gray-light;
// Carousel
// ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-color: #000;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
// Type
// ------------------------
@text-muted: @gray-light;
@abbr-border-color: @gray-light;
@headings-small-color: @gray-light;
@blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter;
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width));
less/wells.less 0 → 100644
View file @ 5dac19ee
//
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @well-bg;
border: 1px solid darken(@well-bg, 7%);
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-lg {
padding: 24px;
border-radius: @border-radius-large;
}
.well-sm {
padding: 9px;
border-radius: @border-radius-small;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment