File: /home/iestorre/moodleAW/moodle04/theme/bootstrapbase/less/moodle/responsive.less
/* responsive.less */
// Should probably be moved to relevant .less files
// after 4095 selector issue is solved
@media (min-width: 980px) {
.dir-rtl .navbar .nav.pull-right,
.dir-rtl .navbar .logininfo {
float: left;
}
.dir-rtl .navbar .nav {
float: right;
& > li {
float: right;
}
}
}
@media (min-width: 980px) and (max-width: 1199px) {
// Wider form labels.
.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: @horizontalComponentOffset980 - 20px;
}
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-left: @horizontalComponentOffset980;
}
.dir-rtl {
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-right: @horizontalComponentOffset980;
}
}
#page-mod-forum-search.dir-lrt .c1 {
margin-right: @horizontalComponentOffset980;
}
.path-admin .buttons,
.form-buttons {
padding-left: @horizontalComponentOffset980;
}
}
@media (max-width: 873px) {
.file-picker .fp-repo-area {
width: 100%;
height: auto;
max-height: 220px;
y-scroll: auto;
float: none;
border: 0px;
}
.file-picker .fp-repo-items {
width: 100%;
float: none;
}
.file-picker .fp-login-form .fp-login-input label {
text-align: left;
}
.dir-rtl .file-picker .fp-login-form .fp-login-input label {
text-align: right;
}
.file-picker .fp-content form td {
display: block;
width: 100%;
text-align: left;
}
.dir-rtl .file-picker .fp-content form td {
text-align: right;
}
.fp-content .mdl-right {
text-align: left;
}
.dir-rtl .fp-content .mdl-right {
text-align: right;
}
.fp-repo-items .fp-navbar {
border-top: 1px solid rgb(187, 187, 187);
}
.dir-rtl {
.userprofile dl.list dt,
.userprofile dl.list dd {
float: none;
text-align: right;
margin-right: 0;
}
}
}
@media (min-width: 1200px) {
// Login page.
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
// Wider form labels.
.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: @horizontalComponentOffset1200 - 20px;
}
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-left: @horizontalComponentOffset1200;
}
.dir-rtl {
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-right: (@horizontalComponentOffset1200 - 100px);
}
#page-mod-forum-search .c1 {
margin-right: @horizontalComponentOffset1200;
}
.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: (@horizontalComponentOffset1200 - 120px);
}
}
.path-admin .buttons,
.form-buttons {
padding-left: @horizontalComponentOffset1200;
}
.dir-rtl {
.path-admin .buttons,
.form-buttons {
padding-right: @horizontalComponentOffset1200;
}
}
// Core empty block regions.
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
}
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
}
#block-region-side-pre.span4 {
/** decrease the span size by 1 **/
.fluid-span(3);
}
}
}
@media (min-width: 980px) {
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.617948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
// Login page.
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
// Core empty block regions.
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
}
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
}
#block-region-side-pre.span4 {
/** decrease the span size by 1 **/
.fluid-span(3);
}
}
}
@media (max-width: 767px) {
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
display: block;
float: none;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
#page-mod-quiz-edit div.quizcontents,
.questionbankwindow.block {
width: 100%;
float: none;
}
#page-mod-quiz-edit #block-region-side-pre,
#page-mod-quiz-edit #block-region-side-post {
clear: both;
}
}
@media (max-width: 480px) {
// make tabs act like nav-stacked
// (mostly) copied from bootstrap/navs.less
.nav-tabs > li {
float: none;
}
.nav-tabs > li > a {
margin-right: 0; // no need for the gap between nav items
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
border: 1px solid #ddd;
}
.nav-tabs > li:first-child > a {
.border-top-radius(4px);
}
.nav-tabs > li:last-child > a {
.border-bottom-radius(4px);
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
border-color: #ddd;
z-index: 2;
}
.fp-content-center {
display: block;
vertical-align: top;
}
.course-content ul.topics li.section,
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content,
.course-content ul.weeks li.section,
.course-content ul.section {
margin-right: 0;
margin-left: 0;
padding: 0;
}
.activityinstance {
display: block;
}
.editing .course-content .section .activity {
margin-bottom: 0.2em;
padding-bottom: 0.2em;
border-bottom: thin solid #eee;
}
.course-content .section .activity .commands {
text-align: right;
}
/** Handles display of the activity chooser on small screens **/
.jsenabled .choosercontainer #chooseform .alloptions {
max-width: 100%;
}
.jsenabled .choosercontainer #chooseform .instruction,
.jsenabled .choosercontainer #chooseform .typesummary {
position:static;
}
.que .info {
float: none;
width: auto;
}
.que .content {
margin: 0;
}
.path-mod-choice .horizontal .choices .option {
display: block;
}
.path-mod-forum .forumsearch #search {
width: 120px;
}
.path-mod-forum .forumheaderlist .picture {
display: none;
}
}
// Stuart's 2,1,3 layout
@media (min-width : 768px) {
.row-fluid .desktop-first-column {
margin-left: 0;
}
#page-navbar .breadcrumb-button {
display: inline;
}
}
@media (max-width : 767px) {
.row-fluid .desktop-first-column {
clear: right;
}
}
// Forms
@media (max-width: 767px) {
// Remove the horizontal form styles
.form-item .form-label,
.mform .fitem div.fitemtitle {
// copied from .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-item .form-label label{
display: inline-block;
margin-right: .5em;
}
.form-item .form-setting .form-checkbox {
margin-top: 0;
}
.form-label span.form-shortname {
display: inline-block;
}
.form-item .form-setting,
.mform .fitem .felement,
.path-backup .mform .fitem .felement,
.mform .fdescription.required,
.form-item .form-description {
margin-left: 0;
}
table#form td.submit,
.form-buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
#fgroup_id_buttonar,
.form-horizontal .form-actions,
.fitem_fsubmit .felement.fsubmit {
padding-left: 10px;
padding-right: 10px;
}
#helppopupbox {
width: auto !important;
left: 0 !important;
}
}
// Shrink calender when short on space in block
@media (min-width : 768px) and (max-width: 979px) {
.block_calendar_month .content,
.block .minicalendar td {
padding-left: 0;
padding-right: 0;
}
}
.dir-rtl {
.dropdown-menu {
right:0;
left:auto;
margin-right: 0px;
}
.navbar .nav > li > .dropdown-menu:before {
right:9px;
left:auto;
}
.navbar .nav > li > .dropdown-menu:after {
right: 10px;
left:auto;
}
.dropdown-submenu > a:after {
margin-right: 0;
margin-left: -10px;
float: left;
border-right-color: #ccc;
border-left-color: transparent;
border-width: 5px 5px 5px 0px;
}
.dropdown-submenu > .dropdown-menu {
right:100%;
left:auto;
}
}
@media (max-width: 979px) {
.nav-collapse {
height: 0;
.nav > li > a {
color: @grayDark;
}
.nav > li > a:hover,
.nav > li > a:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-submenu a:focus,
.dropdown-submenu a:hover,
.dropdown-submenu a:active,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
{
background-image: none;
color: @grayDark;
}
}
.nav-collapse.active {
height: auto;
}
.path-mod-data .box > table > tbody > tr > td {
display: block;
}
.path-mod-forum .forumheaderlist {
thead .header {
font-weight: normal;
font-size: round(@fontSizeSmall);
}
.discussion {
.author, .replies, .lastpost {
font-size: round(@fontSizeSmall);
}
.replies .unread a {
padding: 0;
}
}
}
.navbar {
.nav-collapse.active {
border-top: 1px solid @navbarBorder;
&.pull-left,
&.pull-right {
float: none;
}
> .nav {
margin: 0;
// Add padding to first-level links.
> li > a {
padding-left: 20px;
border-radius: 0px;
}
.dropdown-menu {
margin: 0px 0px 0px 15px;
li > a {
border-radius: 0px;
}
}
}
.nav, .nav .dropdown-menu {
.dropdown-submenu {
.dropdown-toggle {
&:after {
display: inline-block;
float: none;
.caret();
border-top-color: @navbarBorder;
margin-left: 4px;
margin-top: 8px;
}
}
&.open {
> a {
background-color: @navbarBackground;
}
}
// Suppress showing of submenu menu content on hover.
&:hover {
.dropdown-menu {
display: none;
}
&.open {
> a {
background: @navbarBackground;
}
> .dropdown-menu,
.open > .dropdown-menu {
display: block;
}
}
}
}
}
}
&.navbar-inverse {
.nav-collapse.active {
border-top-color: @navbarInverseBorder;
.nav,
.nav .dropdown-menu {
.dropdown-submenu {
.dropdown-toggle {
&:after {
border-top-color: @navbarInverseBorder;
}
}
&.open {
> a {
background-color: @navbarInverseBackground;
}
}
&:hover {
&.open {
> a {
background: @navbarInverseBackground;
}
}
}
}
}
}
}
}
.dir-rtl {
.navbar {
.nav-collapse.active {
> .nav {
margin: 0;
> li > a {
padding-left: 0px;
padding-right: 20px;
}
.dropdown-menu {
margin: 0px 15px 0px 0px;
}
}
.dropdown-menu {
> li {
> a {
padding: 9px 15px;
}
}
}
.nav,
.nav .dropdown-menu {
.dropdown-submenu {
.dropdown-toggle {
&:after {
margin-left: 0px;
margin-right: 4px;
}
}
}
}
}
}
}
}
@media (max-width: 767px) {
// Resize, reflow file-picker on small devices
#filesskin .yui3-panel,
#filesskin .file-picker.fp-generallayout {
width: 100%;
left: 0;
}
.userprofile dl.list {
// copied from dl-horizontal in bootstrap/repsonsive.less
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// Reset the alignment for required label to display inline on mobile devices
#page-mod-wiki-create .mform .fitem div.fitemtitle {
float: left;
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
.row-fluid .span8.pull-right,
.row-fluid .span9.pull-right {
float: none;
}
// Undo negative margin on rows and thumbnails
.row {
margin-left: 0;
}
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
// We need to specify a more specific selector to reset the width for
// cases when we have content in the side-pre blockregion but not in the
// side-post blockregion as there are more specific selectors in
// core.less which take precedence which break responsiveness.
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#block-region-side-pre.span4,
#region-main.span8 {
.fluid-span(12);
}
}
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
div[role=main] {
margin-bottom: 1em;
}
.coursebox {
.info {
.name {
a {
background-position: 0 13px;
}
}
}
}
.category-browse {
.coursebox {
.info {
.name {
a {
background-position: 0 13px;
}
}
}
}
}
}
// All widths between 1200px and 1600px
@media (min-width: 1200px) and (max-width: 1600px) {
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
}
// CSS for the course management pages.
#course-category-listings.columns-3 {
background-color:transparent;
border:0;
#category-listing,
#course-listing {
.fluid-span(6);
margin-left: @fluidGridGutterWidth1200;
*margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
&:first-child {
margin-left: 0;
}
}
#course-detail {
.fluid-span(12);
margin: 1em 0 0;
}
}
}
// All widths up to 1199px.
@media (max-width: 1199px) {
// CSS for the course management pages.
#course-category-listings.columns-3 {
background-color:transparent;
border:0;
#category-listing,
#course-listing,
#course-detail {
.fluid-span(12);
margin: 0 0 1em 0;
}
}
#page-mod-forum-discuss .discussioncontrols {
text-align: right;
.discussioncontrol {
float: none;
width: auto;
display: inline-block;
margin: 0 3px 0.5em;
select,
input {
margin-bottom: 0;
}
&.movediscussion {
margin-right: 0;
padding-right: 0;
}
}
}
#page-mod-forum-discuss.dir-rtl .discussioncontrols {
text-align: left;
}
}