123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- /*!
- * Bootstrap Responsive v2.0.2
- *
- * Copyright 2012 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 @twitter by @mdo and @fat.
- */
- // Responsive.less
- // For phone and tablet devices
- // -------------------------------------------------------------
- // REPEAT VARIABLES & MIXINS
- // -------------------------
- // Required since we compile the responsive stuff separately
- @import "variables.less"; // Modify this for custom colors, font-sizes, etc
- @import "mixins.less";
- // RESPONSIVE CLASSES
- // ------------------
- // Hide from screenreaders and browsers
- // Credit: HTML5 Boilerplate
- .hidden {
- display: none;
- visibility: hidden;
- }
- // Visibility utilities
- // For desktops
- .visible-phone { display: none; }
- .visible-tablet { display: none; }
- .visible-desktop { display: block; }
- .hidden-phone { display: block; }
- .hidden-tablet { display: block; }
- .hidden-desktop { display: none; }
- // Phones only
- @media (max-width: 767px) {
- // Show
- .visible-phone { display: block; }
- // Hide
- .hidden-phone { display: none; }
- // Hide everything else
- .hidden-desktop { display: block; }
- .visible-desktop { display: none; }
- }
- // Tablets & small desktops only
- @media (min-width: 768px) and (max-width: 979px) {
- // Show
- .visible-tablet { display: block; }
- // Hide
- .hidden-tablet { display: none; }
- // Hide everything else
- .hidden-desktop { display: block; }
- .visible-desktop { display: none; }
- }
- // UP TO LANDSCAPE PHONE
- // ---------------------
- @media (max-width: 480px) {
- // Smooth out the collapsing/expanding nav
- .nav-collapse {
- -webkit-transform: translate3d(0, 0, 0); // activate the GPU
- }
- // Block level the page header small tag for readability
- .page-header h1 small {
- display: block;
- line-height: @baseLineHeight;
- }
- // Update checkboxes for iOS
- input[type="checkbox"],
- input[type="radio"] {
- border: 1px solid #ccc;
- }
- // Remove the horizontal form styles
- .form-horizontal .control-group > label {
- float: none;
- width: auto;
- padding-top: 0;
- text-align: left;
- }
- // Move over all input controls and content
- .form-horizontal .controls {
- margin-left: 0;
- }
- // Move the options list down to align with labels
- .form-horizontal .control-list {
- padding-top: 0; // has to be padding because margin collaspes
- }
- // Move over buttons in .form-actions to align with .controls
- .form-horizontal .form-actions {
- padding-left: 10px;
- padding-right: 10px;
- }
- // Modals
- .modal {
- position: absolute;
- top: 10px;
- left: 10px;
- right: 10px;
- width: auto;
- margin: 0;
- &.fade.in { top: auto; }
- }
- .modal-header .close {
- padding: 10px;
- margin: -10px;
- }
- // Carousel
- .carousel-caption {
- position: static;
- }
- }
- // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
- // --------------------------------------------------
- @media (max-width: 767px) {
- // Padding to set content in a bit
- body {
- padding-left: 20px;
- padding-right: 20px;
- }
- .navbar-fixed-top {
- margin-left: -20px;
- margin-right: -20px;
- }
- // GRID & CONTAINERS
- // -----------------
- // Remove width from containers
- .container {
- width: auto;
- }
- // Fluid rows
- .row-fluid {
- width: 100%;
- }
- // Undo negative margin on rows
- .row {
- margin-left: 0;
- }
- // Make all columns even
- .row > [class*="span"],
- .row-fluid > [class*="span"] {
- float: none;
- display: block;
- width: auto;
- margin: 0;
- }
- // THUMBNAILS
- // ----------
- .thumbnails [class*="span"] {
- width: auto;
- }
- // FORM FIELDS
- // -----------
- // Make span* classes full width
- input[class*="span"],
- select[class*="span"],
- textarea[class*="span"],
- .uneditable-input {
- .input-block-level();
- }
- // But don't let it screw up prepend/append inputs
- .input-prepend input[class*="span"],
- .input-append input[class*="span"] {
- width: auto;
- }
- }
- // PORTRAIT TABLET TO DEFAULT DESKTOP
- // ----------------------------------
- @media (min-width: 768px) and (max-width: 979px) {
- // Fixed grid
- #grid > .core(42px, 20px);
- // Fluid grid
- #grid > .fluid(5.801104972%, 2.762430939%);
- // Input grid
- #grid > .input(42px, 20px);
- }
- // TABLETS AND BELOW
- // -----------------
- @media (max-width: 979px) {
- // UNFIX THE TOPBAR
- // ----------------
- // Remove any padding from the body
- body {
- padding-top: 0;
- }
- // Unfix the navbar
- .navbar-fixed-top {
- position: static;
- margin-bottom: @baseLineHeight;
- }
- .navbar-fixed-top .navbar-inner {
- padding: 5px;
- }
- .navbar .container {
- width: auto;
- padding: 0;
- }
- // Account for brand name
- .navbar .brand {
- padding-left: 10px;
- padding-right: 10px;
- margin: 0 0 0 -5px;
- }
- // Nav collapse clears brand
- .navbar .nav-collapse {
- clear: left;
- }
- // Block-level the nav
- .navbar .nav {
- float: none;
- margin: 0 0 (@baseLineHeight / 2);
- }
- .navbar .nav > li {
- float: none;
- }
- .navbar .nav > li > a {
- margin-bottom: 2px;
- }
- .navbar .nav > .divider-vertical {
- display: none;
- }
- .navbar .nav .nav-header {
- color: @navbarText;
- text-shadow: none;
- }
- // Nav and dropdown links in navbar
- .navbar .nav > li > a,
- .navbar .dropdown-menu a {
- padding: 6px 15px;
- font-weight: bold;
- color: @navbarLinkColor;
- .border-radius(3px);
- }
- .navbar .dropdown-menu li + li a {
- margin-bottom: 2px;
- }
- .navbar .nav > li > a:hover,
- .navbar .dropdown-menu a:hover {
- background-color: @navbarBackground;
- }
- // Dropdowns in the navbar
- .navbar .dropdown-menu {
- position: static;
- top: auto;
- left: auto;
- float: none;
- display: block;
- max-width: none;
- margin: 0 15px;
- padding: 0;
- background-color: transparent;
- border: none;
- .border-radius(0);
- .box-shadow(none);
- }
- .navbar .dropdown-menu:before,
- .navbar .dropdown-menu:after {
- display: none;
- }
- .navbar .dropdown-menu .divider {
- display: none;
- }
- // Forms in navbar
- .navbar-form,
- .navbar-search {
- float: none;
- padding: (@baseLineHeight / 2) 15px;
- margin: (@baseLineHeight / 2) 0;
- border-top: 1px solid @navbarBackground;
- border-bottom: 1px solid @navbarBackground;
- @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
- .box-shadow(@shadow);
- }
- // Pull right (secondary) nav content
- .navbar .nav.pull-right {
- float: none;
- margin-left: 0;
- }
- // Static navbar
- .navbar-static .navbar-inner {
- padding-left: 10px;
- padding-right: 10px;
- }
- // Navbar button
- .btn-navbar {
- display: block;
- }
- // Hide everything in the navbar save .brand and toggle button */
- .nav-collapse {
- overflow: hidden;
- height: 0;
- }
- }
- // DEFAULT DESKTOP
- // ---------------
- @media (min-width: 980px) {
- .nav-collapse.collapse {
- height: auto !important;
- overflow: visible !important;
- }
- }
- // LARGE DESKTOP & UP
- // ------------------
- @media (min-width: 1200px) {
- // Fixed grid
- #grid > .core(70px, 30px);
- // Fluid grid
- #grid > .fluid(5.982905983%, 2.564102564%);
- // Input grid
- #grid > .input(70px, 30px);
- // Thumbnails
- .thumbnails {
- margin-left: -30px;
- }
- .thumbnails > li {
- margin-left: 30px;
- }
- }
|