diff --git a/vendor/assets/stylesheets/_bootstrap-responsive.scss b/vendor/assets/stylesheets/_bootstrap-responsive.scss index 75fbbcfb..93db1cec 100644 --- a/vendor/assets/stylesheets/_bootstrap-responsive.scss +++ b/vendor/assets/stylesheets/_bootstrap-responsive.scss @@ -10,371 +10,26 @@ @import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc @import "bootstrap/mixins"; - // RESPONSIVE CLASSES // ------------------ -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} +@import "bootstrap/responsive-utilities"; -// Visibility utilities - -// For desktops -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.visible-desktop { } // Don't set initially -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } - -// Phones only -@media (max-width : 767px) { - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } -} - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } -} - -// 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: 768px) { - - // Padding to set content in a bit - body { - padding-left: 20px; - padding-right: 20px; - } - // Negative indent the now static "fixed" navbar - .navbar-fixed-top, .navbar-fixed-bottom { - margin-left: -20px; - margin-right: -20px; - } - // Remove padding on container given explicit padding set on body - .container-fluid { - padding: 0; - } - - // TYPOGRAPHY - // ---------- - // Reset horizontal dl - .dl-horizontal { - dt { - float: none; - clear: none; - width: auto; - text-align: left; - } - dd { - margin-left: 0; - } - } - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows and thumbnails - .row, .thumbnails { - margin-left: 0; - } - // Make all grid-sized elements block level again - [class*="span"], .row-fluid [class*="span"] { - float: none; - display: block; - width: auto; - margin-left: 0; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { - @include input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { - display: inline-block; // redeclare so they don't wrap to new lines - width: auto; - } -} - - - -// PORTRAIT TABLET TO DEFAULT DESKTOP -// ---------------------------------- - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - @include gridCore($gridColumnWidthTablet, $gridGutterWidthTablet); - - // Fluid grid - @include gridFluid($fluidGridColumnWidthTablet, $fluidGridGutterWidthTablet); - - // Input grid - @include gridInput($gridColumnWidthTablet, $gridGutterWidthTablet); - - // No need to reset .thumbnails here since it's the same $gridGutterWidth - -} - - - -// 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; - } - - // COLLAPSIBLE NAVBAR - // ------------------ - // Nav collapse clears brand - .nav-collapse { - clear: both; - } - // Block-level the nav - .nav-collapse .nav { - float: none; - margin: 0 0 ($baseLineHeight / 2); - } - .nav-collapse .nav > li { - float: none; - } - .nav-collapse .nav > li > a { - margin-bottom: 2px; - } - .nav-collapse .nav > .divider-vertical { - display: none; - } - .nav-collapse .nav .nav-header { - color: $navbarText; - text-shadow: none; - } - // Nav and dropdown links in navbar - .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { - padding: 6px 15px; - font-weight: bold; - color: $navbarLinkColor; - @include border-radius(3px); - } - // Buttons - .nav-collapse .btn { - padding: 4px 10px 4px; - font-weight: normal; - @include border-radius(4px); - } - .nav-collapse .dropdown-menu li + li a { - margin-bottom: 2px; - } - .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover { - background-color: $navbarBackground; - } - // Buttons in the navbar - .nav-collapse.in .btn-group { - margin-top: 5px; - padding: 0; - } - // Dropdowns in the navbar - .nav-collapse .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; - @include border-radius(0); - @include box-shadow(none); - } - .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after { - display: none; - } - .nav-collapse .dropdown-menu .divider { - display: none; - } - // Forms in navbar - .nav-collapse .navbar-form, .nav-collapse .navbar-search { - float: none; - padding: ($baseLineHeight / 2) 15px; - margin: ($baseLineHeight / 2) 0; - border-top: 1px solid $navbarBackground; - border-bottom: 1px solid $navbarBackground; - @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)}); - } - // Pull right (secondary) nav content - .navbar .nav-collapse .nav.pull-right { - float: none; - margin-left: 0; - } - // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse, .nav-collapse.collapse { - overflow: hidden; - height: 0; - } - // Navbar button - .navbar .btn-navbar { - display: block; - } - - // STATIC NAVBAR - // ------------- - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; - } -} - - -// DEFAULT DESKTOP -// --------------- - -// Required to make the collapsing navbar work on regular desktops -@media (min-width: 980px) { - .nav-collapse.collapse { - height: auto !important; - overflow: visible !important; - } -} - -// LARGE DESKTOP & UP +// MEDIA QUERIES // ------------------ -@media (min-width: 1200px) { +// Phones to portrait tablets and narrow desktops +@import "bootstrap/responsive-767px-max"; - // Fixed grid - @include gridCore($gridColumnWidthLarge, $gridGutterWidthLarge); +// Tablets to regular desktops +@import "bootstrap/responsive-768px-979px"; - // Fluid grid - @include gridFluid($fluidGridColumnWidthLarge, $fluidGridGutterWidthLarge); +// Large desktops +@import "bootstrap/responsive-1200px-min"; - // Input grid - @include gridInput($gridColumnWidthLarge, $gridGutterWidthLarge); - // Thumbnails - .thumbnails { - margin-left: -$gridGutterWidthLarge; - } - .thumbnails > li { - margin-left: $gridGutterWidthLarge; - } - .row-fluid .thumbnails { - margin-left: 0; - } -} \ No newline at end of file +// RESPONSIVE NAVBAR +// ------------------ + +// From 979px and below, show a button to toggle navbar contents +@import "bootstrap/responsive-navbar"; \ No newline at end of file diff --git a/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss b/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss new file mode 100644 index 00000000..784caf40 --- /dev/null +++ b/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss @@ -0,0 +1,26 @@ +// LARGE DESKTOP & UP +// ------------------ + +@media (min-width: 1200px) { + + // Fixed grid + @include gridCore($gridColumnWidthLarge, $gridGutterWidthLarge); + + // Fluid grid + @include gridFluid($fluidGridColumnWidthLarge, $fluidGridGutterWidthLarge); + + // Input grid + @include gridInput($gridColumnWidthLarge, $gridGutterWidthLarge); + + // Thumbnails + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } + .row-fluid .thumbnails { + margin-left: 0; + } + +} \ No newline at end of file diff --git a/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss b/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss new file mode 100644 index 00000000..851cb30b --- /dev/null +++ b/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss @@ -0,0 +1,136 @@ +// 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; + } + // Negative indent the now static "fixed" navbar + .navbar-fixed-top, .navbar-fixed-bottom { + margin-left: -20px; + margin-right: -20px; + } + // Remove padding on container given explicit padding set on body + .container-fluid { + padding: 0; + } + + // TYPOGRAPHY + // ---------- + // Reset horizontal dl + .dl-horizontal { + dt { + float: none; + clear: none; + width: auto; + text-align: left; + } + dd { + margin-left: 0; + } + } + + // GRID & CONTAINERS + // ----------------- + // Remove width from containers + .container { + width: auto; + } + // Fluid rows + .row-fluid { + width: 100%; + } + // Undo negative margin on rows and thumbnails + .row, .thumbnails { + margin-left: 0; + } + // Make all grid-sized elements block level again + [class*="span"], .row-fluid [class*="span"] { + float: none; + display: block; + width: auto; + margin-left: 0; + } + + // FORM FIELDS + // ----------- + // Make span* classes full width + .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { + @include input-block-level(); + } + // But don't let it screw up prepend/append inputs + .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { + display: inline-block; // redeclare so they don't wrap to new lines + width: auto; + } + +} diff --git a/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss b/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss new file mode 100644 index 00000000..5ee71aea --- /dev/null +++ b/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss @@ -0,0 +1,16 @@ +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- + +@media (min-width: 768px) and (max-width: 979px) { + + // Fixed grid + @include gridCore($gridColumnWidthTablet, $gridGutterWidthTablet); + + // Fluid grid + @include gridFluid($fluidGridColumnWidthTablet, $fluidGridGutterWidthTablet); + + // Input grid + @include gridInput($gridColumnWidthTablet, $gridGutterWidthTablet); + + // No need to reset .thumbnails here since it's the same $gridGutterWidth +} \ No newline at end of file diff --git a/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss b/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss new file mode 100644 index 00000000..7f286bf8 --- /dev/null +++ b/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss @@ -0,0 +1,147 @@ +// 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, .navbar-fixed-bottom { + position: static; + } + .navbar-fixed-top { + margin-bottom: $baseLineHeight; + } + .navbar-fixed-bottom { + margin-top: $baseLineHeight; + } + .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .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; + } + + // COLLAPSIBLE NAVBAR + // ------------------ + // Nav collapse clears brand + .nav-collapse { + clear: both; + } + // Block-level the nav + .nav-collapse .nav { + float: none; + margin: 0 0 ($baseLineHeight / 2); + } + .nav-collapse .nav > li { + float: none; + } + .nav-collapse .nav > li > a { + margin-bottom: 2px; + } + .nav-collapse .nav > .divider-vertical { + display: none; + } + .nav-collapse .nav .nav-header { + color: $navbarText; + text-shadow: none; + } + // Nav and dropdown links in navbar + .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { + padding: 6px 15px; + font-weight: bold; + color: $navbarLinkColor; + @include border-radius(3px); + } + // Buttons + .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + @include border-radius(4px); + } + .nav-collapse .dropdown-menu li + li a { + margin-bottom: 2px; + } + .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover { + background-color: $navbarBackground; + } + // Buttons in the navbar + .nav-collapse.in .btn-group { + margin-top: 5px; + padding: 0; + } + // Dropdowns in the navbar + .nav-collapse .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; + @include border-radius(0); + @include box-shadow(none); + } + .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after { + display: none; + } + .nav-collapse .dropdown-menu .divider { + display: none; + } + // Forms in navbar + .nav-collapse .navbar-form, .nav-collapse .navbar-search { + float: none; + padding: ($baseLineHeight / 2) 15px; + margin: ($baseLineHeight / 2) 0; + border-top: 1px solid $navbarBackground; + border-bottom: 1px solid $navbarBackground; + @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)}); + } + // Pull right (secondary) nav content + .navbar .nav-collapse .nav.pull-right { + float: none; + margin-left: 0; + } + // Hide everything in the navbar save .brand and toggle button */ + .nav-collapse, + .nav-collapse.collapse { + overflow: hidden; + height: 0; + } + // Navbar button + .navbar .btn-navbar { + display: block; + } + + // STATIC NAVBAR + // ------------- + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; + } +} + + +// DEFAULT DESKTOP +// --------------- + +// Required to make the collapsing navbar work on regular desktops +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; + } +} diff --git a/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss b/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss new file mode 100644 index 00000000..567aa5c7 --- /dev/null +++ b/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss @@ -0,0 +1,41 @@ +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// Visibility utilities + +// For desktops +.visible-phone { display: none !important; } +.visible-tablet { display: none !important; } +.visible-desktop { } // Don't set initially +.hidden-phone { } +.hidden-tablet { } +.hidden-desktop { display: none !important; } + +// Phones only +@media (max-width: 767px) { + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } +} + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Show + .visible-tablet { display: inherit !important; } + // Hide + .hidden-tablet { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } +} \ No newline at end of file