| author | stetrabby <info@trabucchi.de> |
| Fri, 20 Dec 2013 22:49:16 +0100 | |
| changeset 54 | 0ded9d7748b7 |
| permissions | -rwxr-xr-x |
| info@54 | 1 |
// |
| info@54 | 2 |
// Responsive: Utility classes |
| info@54 | 3 |
// -------------------------------------------------- |
| info@54 | 4 |
|
| info@54 | 5 |
|
| info@54 | 6 |
// IE10 in Windows (Phone) 8 |
| info@54 | 7 |
// |
| info@54 | 8 |
// Support for responsive views via media queries is kind of borked in IE10, for |
| info@54 | 9 |
// Surface/desktop in split view and for Windows Phone 8. This particular fix |
| info@54 | 10 |
// must be accompanied by a snippet of JavaScript to sniff the user agent and |
| info@54 | 11 |
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at |
| info@54 | 12 |
// our Getting Started page for more information on this bug. |
| info@54 | 13 |
// |
| info@54 | 14 |
// For more information, see the following: |
| info@54 | 15 |
// |
| info@54 | 16 |
// Issue: https://github.com/twbs/bootstrap/issues/10497 |
| info@54 | 17 |
// Docs: http://getbootstrap.com/getting-started/#browsers |
| info@54 | 18 |
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ |
| info@54 | 19 |
|
| info@54 | 20 |
@-ms-viewport {
|
| info@54 | 21 |
width: device-width; |
| info@54 | 22 |
} |
| info@54 | 23 |
|
| info@54 | 24 |
|
| info@54 | 25 |
// Visibility utilities |
| info@54 | 26 |
|
| info@54 | 27 |
.visible-xs {
|
| info@54 | 28 |
.responsive-invisibility(); |
| info@54 | 29 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 30 |
.responsive-visibility(); |
| info@54 | 31 |
} |
| info@54 | 32 |
&.visible-sm {
|
| info@54 | 33 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 34 |
.responsive-visibility(); |
| info@54 | 35 |
} |
| info@54 | 36 |
} |
| info@54 | 37 |
&.visible-md {
|
| info@54 | 38 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 39 |
.responsive-visibility(); |
| info@54 | 40 |
} |
| info@54 | 41 |
} |
| info@54 | 42 |
&.visible-lg {
|
| info@54 | 43 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 44 |
.responsive-visibility(); |
| info@54 | 45 |
} |
| info@54 | 46 |
} |
| info@54 | 47 |
} |
| info@54 | 48 |
.visible-sm {
|
| info@54 | 49 |
.responsive-invisibility(); |
| info@54 | 50 |
&.visible-xs {
|
| info@54 | 51 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 52 |
.responsive-visibility(); |
| info@54 | 53 |
} |
| info@54 | 54 |
} |
| info@54 | 55 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 56 |
.responsive-visibility(); |
| info@54 | 57 |
} |
| info@54 | 58 |
&.visible-md {
|
| info@54 | 59 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 60 |
.responsive-visibility(); |
| info@54 | 61 |
} |
| info@54 | 62 |
} |
| info@54 | 63 |
&.visible-lg {
|
| info@54 | 64 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 65 |
.responsive-visibility(); |
| info@54 | 66 |
} |
| info@54 | 67 |
} |
| info@54 | 68 |
} |
| info@54 | 69 |
.visible-md {
|
| info@54 | 70 |
.responsive-invisibility(); |
| info@54 | 71 |
&.visible-xs {
|
| info@54 | 72 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 73 |
.responsive-visibility(); |
| info@54 | 74 |
} |
| info@54 | 75 |
} |
| info@54 | 76 |
&.visible-sm {
|
| info@54 | 77 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 78 |
.responsive-visibility(); |
| info@54 | 79 |
} |
| info@54 | 80 |
} |
| info@54 | 81 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 82 |
.responsive-visibility(); |
| info@54 | 83 |
} |
| info@54 | 84 |
&.visible-lg {
|
| info@54 | 85 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 86 |
.responsive-visibility(); |
| info@54 | 87 |
} |
| info@54 | 88 |
} |
| info@54 | 89 |
} |
| info@54 | 90 |
.visible-lg {
|
| info@54 | 91 |
.responsive-invisibility(); |
| info@54 | 92 |
&.visible-xs {
|
| info@54 | 93 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 94 |
.responsive-visibility(); |
| info@54 | 95 |
} |
| info@54 | 96 |
} |
| info@54 | 97 |
&.visible-sm {
|
| info@54 | 98 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 99 |
.responsive-visibility(); |
| info@54 | 100 |
} |
| info@54 | 101 |
} |
| info@54 | 102 |
&.visible-md {
|
| info@54 | 103 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 104 |
.responsive-visibility(); |
| info@54 | 105 |
} |
| info@54 | 106 |
} |
| info@54 | 107 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 108 |
.responsive-visibility(); |
| info@54 | 109 |
} |
| info@54 | 110 |
} |
| info@54 | 111 |
|
| info@54 | 112 |
.hidden-xs {
|
| info@54 | 113 |
.responsive-visibility(); |
| info@54 | 114 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 115 |
.responsive-invisibility(); |
| info@54 | 116 |
} |
| info@54 | 117 |
&.hidden-sm {
|
| info@54 | 118 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 119 |
.responsive-invisibility(); |
| info@54 | 120 |
} |
| info@54 | 121 |
} |
| info@54 | 122 |
&.hidden-md {
|
| info@54 | 123 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 124 |
.responsive-invisibility(); |
| info@54 | 125 |
} |
| info@54 | 126 |
} |
| info@54 | 127 |
&.hidden-lg {
|
| info@54 | 128 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 129 |
.responsive-invisibility(); |
| info@54 | 130 |
} |
| info@54 | 131 |
} |
| info@54 | 132 |
} |
| info@54 | 133 |
.hidden-sm {
|
| info@54 | 134 |
.responsive-visibility(); |
| info@54 | 135 |
&.hidden-xs {
|
| info@54 | 136 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 137 |
.responsive-invisibility(); |
| info@54 | 138 |
} |
| info@54 | 139 |
} |
| info@54 | 140 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 141 |
.responsive-invisibility(); |
| info@54 | 142 |
} |
| info@54 | 143 |
&.hidden-md {
|
| info@54 | 144 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 145 |
.responsive-invisibility(); |
| info@54 | 146 |
} |
| info@54 | 147 |
} |
| info@54 | 148 |
&.hidden-lg {
|
| info@54 | 149 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 150 |
.responsive-invisibility(); |
| info@54 | 151 |
} |
| info@54 | 152 |
} |
| info@54 | 153 |
} |
| info@54 | 154 |
.hidden-md {
|
| info@54 | 155 |
.responsive-visibility(); |
| info@54 | 156 |
&.hidden-xs {
|
| info@54 | 157 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 158 |
.responsive-invisibility(); |
| info@54 | 159 |
} |
| info@54 | 160 |
} |
| info@54 | 161 |
&.hidden-sm {
|
| info@54 | 162 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 163 |
.responsive-invisibility(); |
| info@54 | 164 |
} |
| info@54 | 165 |
} |
| info@54 | 166 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 167 |
.responsive-invisibility(); |
| info@54 | 168 |
} |
| info@54 | 169 |
&.hidden-lg {
|
| info@54 | 170 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 171 |
.responsive-invisibility(); |
| info@54 | 172 |
} |
| info@54 | 173 |
} |
| info@54 | 174 |
} |
| info@54 | 175 |
.hidden-lg {
|
| info@54 | 176 |
.responsive-visibility(); |
| info@54 | 177 |
&.hidden-xs {
|
| info@54 | 178 |
@media (max-width: @screen-xs-max) {
|
| info@54 | 179 |
.responsive-invisibility(); |
| info@54 | 180 |
} |
| info@54 | 181 |
} |
| info@54 | 182 |
&.hidden-sm {
|
| info@54 | 183 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
| info@54 | 184 |
.responsive-invisibility(); |
| info@54 | 185 |
} |
| info@54 | 186 |
} |
| info@54 | 187 |
&.hidden-md {
|
| info@54 | 188 |
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
| info@54 | 189 |
.responsive-invisibility(); |
| info@54 | 190 |
} |
| info@54 | 191 |
} |
| info@54 | 192 |
@media (min-width: @screen-lg-min) {
|
| info@54 | 193 |
.responsive-invisibility(); |
| info@54 | 194 |
} |
| info@54 | 195 |
} |
| info@54 | 196 |
|
| info@54 | 197 |
// Print utilities |
| info@54 | 198 |
.visible-print {
|
| info@54 | 199 |
.responsive-invisibility(); |
| info@54 | 200 |
} |
| info@54 | 201 |
|
| info@54 | 202 |
@media print {
|
| info@54 | 203 |
.visible-print {
|
| info@54 | 204 |
.responsive-visibility(); |
| info@54 | 205 |
} |
| info@54 | 206 |
.hidden-print {
|
| info@54 | 207 |
.responsive-invisibility(); |
| info@54 | 208 |
} |
| info@54 | 209 |
} |