summaryrefslogtreecommitdiffstats
path: root/css/bootstrap/responsive-utilities.less
diff options
context:
space:
mode:
authorArun Persaud <arun@nubati.net>2014-03-08 22:02:34 -0800
committerArun Persaud <arun@nubati.net>2014-03-08 22:26:07 -0800
commit72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 (patch)
treeaf2457b688e17c1709b5d2d45826a8379393abf1 /css/bootstrap/responsive-utilities.less
parent742ba18eaf36386d2d0e0936975b3f2545afc59e (diff)
downloade-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.tar.gz
e-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.tar.bz2
e-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.zip
updated css/js libraries
* bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc.
Diffstat (limited to 'css/bootstrap/responsive-utilities.less')
-rw-r--r--css/bootstrap/responsive-utilities.less115
1 files changed, 82 insertions, 33 deletions
diff --git a/css/bootstrap/responsive-utilities.less b/css/bootstrap/responsive-utilities.less
index 2c3f6c1..027a264 100644
--- a/css/bootstrap/responsive-utilities.less
+++ b/css/bootstrap/responsive-utilities.less
@@ -3,41 +3,90 @@
// --------------------------------------------------
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
- display: none;
- visibility: hidden;
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#browsers
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@-ms-viewport {
+ width: device-width;
}
+
// Visibility utilities
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+ .responsive-invisibility();
+}
+
+.visible-xs {
+ @media (max-width: @screen-xs-max) {
+ .responsive-visibility();
+ }
+}
+.visible-sm {
+ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+ .responsive-visibility();
+ }
+}
+.visible-md {
+ @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+ .responsive-visibility();
+ }
+}
+.visible-lg {
+ @media (min-width: @screen-lg-min) {
+ .responsive-visibility();
+ }
+}
+
+.hidden-xs {
+ @media (max-width: @screen-xs-max) {
+ .responsive-invisibility();
+ }
+}
+.hidden-sm {
+ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+ .responsive-invisibility();
+ }
+}
+.hidden-md {
+ @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+ .responsive-invisibility();
+ }
+}
+.hidden-lg {
+ @media (min-width: @screen-lg-min) {
+ .responsive-invisibility();
+ }
+}
+
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+.visible-print {
+ .responsive-invisibility();
+
+ @media print {
+ .responsive-visibility();
+ }
+}
-// For desktops
-.visible-phone { display: none !important; }
-.visible-tablet { display: none !important; }
-.hidden-phone { }
-.hidden-tablet { }
-.hidden-desktop { display: none !important; }
-.visible-desktop { display: inherit !important; }
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
- // Hide everything else
- .hidden-desktop { display: inherit !important; }
- .visible-desktop { display: none !important ; }
- // Show
- .visible-tablet { display: inherit !important; }
- // Hide
- .hidden-tablet { display: none !important; }
-}
-
-// Phones only
-@media (max-width: 767px) {
- // Hide everything else
- .hidden-desktop { display: inherit !important; }
- .visible-desktop { display: none !important; }
- // Show
- .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
- // Hide
- .hidden-phone { display: none !important; }
+.hidden-print {
+ @media print {
+ .responsive-invisibility();
+ }
}