mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

Browse Source 
Conflicts:
	dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto
2013-08-11 20:45:42 -07:00
parent 2ae8be3b31 f47a1905e2
commit c52a3508c6
11 changed files with 1709 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/footer.html
View File

@@ -9,6 +9,14 @@
<script src="{{ page.base_url }}assets/js/application.js"></script> <script src="{{ page.base_url }}assets/js/application.js"></script>
{% if page.slug == "customize" %}
<script src="{{ page.base_url }}assets/js/less.js"></script>
<script src="{{ page.base_url }}assets/js/jszip.js"></script>
<script src="{{ page.base_url }}assets/js/uglify.js"></script>
<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
<script src="{{ page.base_url }}assets/js/customizer.js"></script>
{% endif %}
<!-- Analytics <!-- Analytics
================================================== --> ================================================== -->
<script> <script>

2
_includes/nav-main.html
View File

@@ -1,4 +1,4 @@
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav role="banner""> <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container"> <div class="container">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>

52
_layouts/customize.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
<!-- Place anything custom after this. -->
</head>
<body data-spy="scroll" data-target=".bs-sidebar">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
{% include nav-main.html %}
<!-- Docs page layout -->
<div class="bs-header" id="content" role="banner">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p>
{% include ads.html %}
</div>
</div>
<!-- Callout for the old docs link -->
{% include old-bs-docs.html %}
<div class="container bs-docs-container">
<div class="col-lg-12">
{{ content }}
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer">
{% include social-buttons.html %}
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li><a href="{{ site.blog }}">Blog</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}
</body>
</html>

175
assets/js/customizer.js Normal file
View File

@@ -0,0 +1,175 @@
window.onload = function () { // wait for load in a dumb way because B-0
var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
function generateUrl() {
var vars = {}
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
var data = {
vars: vars,
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
}
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
window.location = jQuery.param.querystring('/customize/', data)
}
function parseUrl() {
var data = jQuery.deparam.querystring()
if (data.js) {
for (var i = 0; i < data.js.length; i++) {
var input = $('input[value="'+data.js[i]+'"]')
input && input.prop('checked', false)
}
}
if (data.css) {
for (var i = 0; i < data.css.length; i++) {
var input = $('input[value="'+data.css[i]+'"]')
input && input.prop('checked', false)
}
}
if (data.vars) {
// todo (fat): vars
}
}
function generateZip(css, js, complete) {
if (!css && !js) return alert('you want to build nothing… o_O')
var zip = new JSZip()
if (css) {
var cssFolder = zip.folder('css')
for (var fileName in css) {
cssFolder.file(fileName, css[fileName])
}
}
if (js) {
var jsFolder = zip.folder('js')
for (var fileName in js) {
jsFolder.file(fileName, js[fileName])
}
}
var content = zip.generate()
location.href = 'data:application/zip;base64,' + content
complete()
}
function generateCustomCSS(vars) {
var result = ''
for (var key in vars) {
result += key + ': ' + vars[key] + ';\n'
}
return result + '\n\n'
}
function generateCSS() {
var $checked = $('#less-section input:checked')
if (!$checked.length) return false
var result = {}
var vars = {}
var css = ''
$('#less-variables-section input')
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
css += __less['variables.less']
if (vars) css += generateCustomCSS(vars)
css += __less['mixins.less']
css += $checked
.map(function () { return __less[this.value] })
.toArray()
.join('\n')
css = css.replace(/@import[^\n]*/gi, '') //strip any imports
try {
var parser = new less.Parser({
paths: ['variables.less', 'mixins.less']
, optimization: 0
, filename: 'bootstrap.css'
}).parse(css, function (err, tree) {
if (err) return alert(err)
result = {
'bootstrap.css' : cw + tree.toCSS(),
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
}
})
} catch (err) {
return alert(err)
}
return result
}
function generateJavascript() {
var $checked = $('#plugin-section input:checked')
if (!$checked.length) return false
var js = $checked
.map(function () { return __js[this.value] })
.toArray()
.join('\n')
return {
'bootstrap.js': js,
'bootstrap.min.js': cw + uglify(js)
}
}
var $downloadBtn = $('#btn-download').on('click', function (e) {
e.preventDefault()
$downloadBtn.addClass('loading')
generateZip(generateCSS(), generateJavascript(), function () {
$downloadBtn.removeClass('loading')
setTimeout(function () {
generateUrl()
}, 1)
})
})
var inputsComponent = $('#less-section input')
var inputsPlugin = $('#plugin-section input')
var inputsVariables = $('#less-variables-section input')
$('#less-section .toggle').on('click', function (e) {
e.preventDefault()
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
})
$('#plugin-section .toggle').on('click', function (e) {
e.preventDefault()
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
})
$('#less-variables-section .toggle').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
try {
parseUrl()
} catch (e) {
// maybe alert user that we can't parse their url
}
}

1287
assets/js/jquery.bbq.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

30
components.html
View File

@@ -532,7 +532,7 @@ base_url: "../"
</div> </div>
<h2 id="input-groups-basic">Basic input group</h2> <h2 id="input-groups-basic">Basic input group</h2>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form" role="form">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
@@ -569,7 +569,7 @@ base_url: "../"
<h2 id="input-groups-sizes">Optional sizes</h2> <h2 id="input-groups-sizes">Optional sizes</h2>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p> <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form" role="form">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon input-lg">@</span> <span class="input-group-addon input-lg">@</span>
<input type="text" class="form-control input-lg" placeholder="Username"> <input type="text" class="form-control input-lg" placeholder="Username">
@@ -692,7 +692,7 @@ base_url: "../"
<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2> <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
<p></p> <p></p>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form" role="form">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@@ -762,7 +762,7 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2> <h2 id="input-groups-buttons-segmented">Segmented dropdown groups</h2>
<form class="bs-example bs-example-form"> <form class="bs-example bs-example-form" role="form">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="input-group"> <div class="input-group">
@@ -1083,14 +1083,14 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
</nav> </nav>
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left" role="form">
<select name="" id="" class="form-control" style="width: 200px;"> <select name="" id="" class="form-control" style="width: 200px;">
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
@@ -1102,7 +1102,7 @@ base_url: "../"
</nav> </nav>
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<input type="checkbox"> <input type="checkbox">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
@@ -1110,7 +1110,7 @@ base_url: "../"
</nav> </nav>
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@@ -1121,7 +1121,7 @@ base_url: "../"
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="navbar-form pull-left"> <form class="navbar-form pull-left" role="form">
<input type="text" class="form-control" style="width: 200px;"> <input type="text" class="form-control" style="width: 200px;">
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form> </form>
@@ -1285,8 +1285,8 @@ body { padding-bottom: 70px; }
</ul> </ul>
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search"> <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@@ -1355,8 +1355,8 @@ body { padding-bottom: 70px; }
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search"> <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form> </form>
</div><!-- /.nav-collapse --> </div><!-- /.nav-collapse -->
</div><!-- /.container --> </div><!-- /.container -->
@@ -1405,8 +1405,8 @@ body { padding-bottom: 70px; }
</ul> </ul>
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="" role="form">
<input type="text" class="form-control col-lg-8" placeholder="Search"> <input type="text" class="form-control col-lg-8" placeholder="Search" role="search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>

14
css.html
View File

@@ -1242,7 +1242,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2> <h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p> <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<form class="bs-example"> <form class="bs-example" role="form">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div class="form-group"> <div class="form-group">
@@ -1267,7 +1267,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset> </fieldset>
</form><!-- /example --> </form><!-- /example -->
{% highlight html %} {% highlight html %}
<form> <form role="form">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div class="form-group"> <div class="form-group">
@@ -1304,7 +1304,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Always add labels</h4> <h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div> </div>
<form class="bs-example form-inline"> <form class="bs-example form-inline" role="form">
<label class="sr-only" for="exampleInputEmail">Email address</label> <label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email"> <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label> <label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1317,7 +1317,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example --> </form><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail">Email address</label> <label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email"> <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
<label class="sr-only" for="exampleInputPassword">Password</label> <label class="sr-only" for="exampleInputPassword">Password</label>
@@ -1362,7 +1362,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<form class="form-horizontal"> <form class="form-horizontal" role="form">
<div class="form-group"> <div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label> <label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10"> <div class="col-lg-10">
@@ -1544,7 +1544,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<form class="form-horizontal"> <form class="form-horizontal" role="form">
<div class="form-group"> <div class="form-group">
<label for="inputEmail2" class="col-lg-2 control-label">Email</label> <label for="inputEmail2" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10"> <div class="col-lg-10">
@@ -1616,7 +1616,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</fieldset> </fieldset>
</form> </form>
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline" role="form">
<fieldset disabled> <fieldset disabled>
<div class="form-group"> <div class="form-group">
<label for="disabledInput">Disabled input</label> <label for="disabledInput">Disabled input</label>

132
customize.html
View File

File diff suppressed because one or more lines are too long

230
dist/css/bootstrap.css vendored
View File

@@ -4652,6 +4652,32 @@ td.visible-sm {
display: table-cell !important; display: table-cell !important;
} }
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
}
@media (min-width: 992px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
}
.visible-md { .visible-md {
display: none !important; display: none !important;
} }
@@ -4665,6 +4691,32 @@ td.visible-md {
display: none !important; display: none !important;
} }
@media (min-width: 768px) and (max-width: 991px) {
.visible-md {
display: block !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 992px) {
.visible-md {
display: none !important;
}
tr.visible-md {
display: none !important;
}
th.visible-md,
td.visible-md {
display: none !important;
}
}
.visible-lg { .visible-lg {
display: none !important; display: none !important;
} }
@@ -4678,6 +4730,32 @@ td.visible-lg {
display: none !important; display: none !important;
} }
@media (min-width: 768px) and (max-width: 991px) {
.visible-lg {
display: none !important;
}
tr.visible-lg {
display: none !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
}
}
@media (min-width: 992px) {
.visible-lg {
display: block !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
.hidden-sm { .hidden-sm {
display: none !important; display: none !important;
} }
@@ -4691,6 +4769,32 @@ td.hidden-sm {
display: none !important; display: none !important;
} }
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) {
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
}
.hidden-md { .hidden-md {
display: block !important; display: block !important;
} }
@@ -4704,6 +4808,32 @@ td.hidden-md {
display: table-cell !important; display: table-cell !important;
} }
@media (min-width: 768px) and (max-width: 991px) {
.hidden-md {
display: none !important;
}
tr.hidden-md {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
}
.hidden-lg { .hidden-lg {
display: block !important; display: block !important;
} }
@@ -4718,56 +4848,6 @@ td.hidden-lg {
} }
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
.visible-md {
display: block !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
.visible-lg {
display: none !important;
}
tr.visible-lg {
display: none !important;
}
th.visible-lg,
td.visible-lg {
display: none !important;
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
.hidden-md {
display: none !important;
}
tr.hidden-md {
display: none !important;
}
th.hidden-md,
td.hidden-md {
display: none !important;
}
.hidden-lg { .hidden-lg {
display: block !important; display: block !important;
} }
@@ -4781,56 +4861,6 @@ td.hidden-lg {
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.visible-sm {
display: none !important;
}
tr.visible-sm {
display: none !important;
}
th.visible-sm,
td.visible-sm {
display: none !important;
}
.visible-md {
display: none !important;
}
tr.visible-md {
display: none !important;
}
th.visible-md,
td.visible-md {
display: none !important;
}
.visible-lg {
display: block !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
.hidden-sm {
display: block !important;
}
tr.hidden-sm {
display: table-row !important;
}
th.hidden-sm,
td.hidden-sm {
display: table-cell !important;
}
.hidden-md {
display: block !important;
}
tr.hidden-md {
display: table-row !important;
}
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
.hidden-lg { .hidden-lg {
display: none !important; display: none !important;
} }

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

76
less/responsive-utilities.less
View File

@@ -35,70 +35,58 @@
// Visibility utilities // Visibility utilities
// For Phones
.visible-sm { .visible-sm {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-invisibility();
}
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-sm { .hidden-sm {
.responsive-invisibility(); .responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
} @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-visibility(); .responsive-visibility();
} }
.visible-lg { @media (min-width: @screen-desktop) {
.responsive-invisibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
.responsive-invisibility();
}
.hidden-lg {
.responsive-visibility();
}
}
// For desktops
@media (min-width: @screen-desktop) {
.visible-sm {
.responsive-invisibility();
}
.visible-md {
.responsive-invisibility();
}
.visible-lg {
.responsive-visibility();
}
.hidden-sm {
.responsive-visibility();
}
.hidden-md {
.responsive-visibility();
}
.hidden-lg {
.responsive-invisibility(); .responsive-invisibility();
} }
} }