kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

First pass at updated responsive utilities to be mobile-first. Pulled from #7490 by @apotropaic

Browse source
This commit is contained in:
Mark Otto 2013-04-20 12:33:09 -07:00
parent 04d782efab
commit 510c9a6ad8
2 changed files with 54 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
docs/assets/css/bootstrap.css vendored
View file

@ -5310,47 +5310,67 @@ a.list-group-item.active > .badge,
} }
.visible-phone { .visible-phone {
display: none !important; display: inherit !important;
} }
.visible-tablet { .visible-tablet {
display: none !important; display: none !important;
} }
.hidden-desktop { .visible-desktop {
display: none !important; display: none !important;
} }
.visible-desktop { .hidden-phone {
display: none !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: inherit !important; display: inherit !important;
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop { .visible-phone {
display: none !important;
}
.visible-tablet {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none !important ; display: none !important;
} }
.visible-tablet { .hidden-phone {
display: inherit !important; display: inherit !important;
} }
.hidden-tablet { .hidden-tablet {
display: none !important; display: none !important;
} }
}
@media (max-width: 767px) {
.hidden-desktop { .hidden-desktop {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { }
@media (min-width: 980px) {
.visible-phone {
display: none !important; display: none !important;
} }
.visible-phone { .visible-tablet {
display: none !important;
}
.visible-desktop {
display: inherit !important; display: inherit !important;
} }
.hidden-phone { .hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: none !important; display: none !important;
} }
} }

42
less/responsive-utilities.less
View file

@ -19,34 +19,36 @@
// Visibility utilities // Visibility utilities
// For desktops // For Phones
.visible-phone { display: none !important; } .visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; } .visible-tablet { display: none !important; }
.hidden-phone { } .visible-desktop { display: none !important; }
.hidden-tablet { }
.hidden-desktop { display: none !important; } .hidden-phone { display: none !important; }
.visible-desktop { display: inherit !important; } .hidden-tablet { display: inherit !important; }
.hidden-desktop { display: inherit !important; }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
// Hide .visible-desktop { display: none !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; } .hidden-tablet { display: none !important; }
.hidden-desktop { display: inherit !important; }
} }
// Phones only // For desktops
@media (max-width: 767px) { @media (min-width: 980px) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; } .visible-tablet { display: none !important; }
.visible-desktop { display: none !important; } .visible-desktop { display: inherit !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior .hidden-phone { display: inherit !important; }
// Hide .hidden-tablet { display: inherit !important; }
.hidden-phone { display: none !important; } .hidden-desktop { display: none !important; }
} }
// Print utilities // Print utilities