/src/honeynet_web/honeywall/static/twitter-bootstrap/less/responsive.less
https://bitbucket.org/cpdean/pig · LESS · 323 lines · 204 code · 49 blank · 70 comment · 0 complexity · b7ea4b057706aa03bd946e23d3722433 MD5 · raw file
- /*!
- * Bootstrap Responsive v2.0.0
- *
- * 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;
- }
- // 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;
- }
- // Make span* classes full width
- input[class*="span"],
- select[class*="span"],
- textarea[class*="span"],
- .uneditable-input {
- display: block;
- width: 100%;
- height: 28px; /* Make inputs at least the height of their button counterpart */
- /* Makes inputs behave like true block-level elements */
- -webkit-box-sizing: border-box; /* Older Webkit */
- -moz-box-sizing: border-box; /* Older FF */
- -ms-box-sizing: border-box; /* IE8 */
- box-sizing: border-box; /* CSS3 spec*/
- }
- // But don't let it screw up prepend/append inputs
- .input-prepend input[class*="span"],
- .input-append input[class*="span"] {
- width: auto;
- }
- // 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: 768px) {
- // GRID & CONTAINERS
- // -----------------
- // Remove width from containers
- .container {
- width: auto;
- padding: 0 20px;
- }
- // 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;
- }
- }
- // PORTRAIT TABLET TO DEFAULT DESKTOP
- // ----------------------------------
- @media (min-width: 768px) and (max-width: 980px) {
- // Fixed grid
- #gridSystem > .generate(12, 42px, 20px);
- // Fluid grid
- #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
- // Input grid
- #inputGridSystem > .generate(12, 42px, 20px);
- }
- // TABLETS AND BELOW
- // -----------------
- @media (max-width: 980px) {
- // 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;
- }
- // 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;
- }
- }
- // LARGE DESKTOP & UP
- // ------------------
- @media (min-width: 1200px) {
- // Fixed grid
- #gridSystem > .generate(12, 70px, 30px);
- // Fluid grid
- #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
- // Input grid
- #inputGridSystem > .generate(12, 70px, 30px);
- // Thumbnails
- .thumbnails {
- margin-left: -30px;
- }
- .thumbnails > li {
- margin-left: 30px;
- }
- }