+++ /dev/null
-/* responsive.less */
-
-// Should probably be moved to relevant @mixin less files
-// after 4095 selector issue is solved
-
-@media (min-width: ($navbarCollapseDesktopWidth)) {
- a[id]:empty::before,
- a[name]:empty::before {
- display: inline-block;
- position: relative;
- content: '';
- padding-top: $navbarHeight;
- margin-top: -$navbarHeight;
- vertical-align: top;
- }
-}
-
-@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,
- .mform .fdescription.required,
- .userprofile dl.list dd,
- .form-horizontal .controls {
- margin-left: $horizontalComponentOffset980;
- }
-
- .path-admin .buttons,
- .form-buttons {
- padding-left: $horizontalComponentOffset980;
- }
-}
-
-@media (max-width: 767px) {
- .file-picker .fp-repo-area {
- width: 100%;
- height: auto;
- max-height: 220px;
- float: none;
- border: 0;
- }
-
- .file-picker .fp-repo-items {
- width: 100%;
- float: none;
- margin-left: 0;
- }
-
- .file-picker .fp-login-form .fp-login-input label {
- text-align: left;
- }
-
- .file-picker .fp-content form td {
- display: block;
- width: 100%;
- text-align: left;
- }
-
- .fp-content .mdl-right {
- text-align: left;
- }
-
- .fp-repo-items .fp-navbar {
- border-top: 1px solid rgb(187, 187, 187);
- }
-
- .fp-formset div {
- height: auto;
- }
-}
-
-@media (min-width: 1200px) {
- // Editor on question page
- .path-question {
- #id_answerhdr div.fitem_feditor {
- padding-right: 6px;
- }
- }
- // 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,
- .mform .fdescription.required,
- .userprofile dl.list dd,
- .form-horizontal .controls {
- margin-left: $horizontalComponentOffset1200;
- }
-
- .path-admin .buttons,
- .form-buttons {
- padding-left: $horizontalComponentOffset1200;
- }
-
- // Core empty block regions.
-
- @mixin fluid-span($columns) {
- @include fluid-span-full($columns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
- }
-
- .empty-region-side-post.used-region-side-pre,
- .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 **/
-
- @include fluid-span(9);
- }
-
- #block-region-side-pre.span4 {
- /** decrease the span size by 1 **/
-
- @include fluid-span(3);
- }
- }
-}
-
-@media (min-width: 980px) {
- .loginbox.twocolumns .loginpanel {
- margin-left: 0;
- }
-
- .loginbox.twocolumns .loginpanel,
- .loginbox.twocolumns .signuppanel {
- width: 48.617948717948715%;
- }
-}
-
-@media (min-width: 768px) and (max-width: 979px) {
- // Core empty block regions.
-
- @mixin fluid-span($columns) {
- @include fluid-span-full($columns, $fluidGridColumnWidth768, $fluidGridGutterWidth768);
- }
-
- .empty-region-side-post.used-region-side-pre,
- .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 **/
-
- @include fluid-span(9);
- }
-
- #block-region-side-pre.span4 {
- /** decrease the span size by 1 **/
-
- @include fluid-span(3);
- }
- }
-}
-
-@media (max-width: 767px) {
- #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;
-
- @include border-radius(0);
- }
-
- .nav-tabs > .active > a,
- .nav-tabs > .active > a:hover {
- border: 1px solid #ddd;
- }
-
- .nav-tabs > li:first-child > a {
- @include border-top-radius(4px);
- }
-
- .nav-tabs > li:last-child > a {
- @include 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;
- }
-
- .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: both;
- }
-}
-// 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;
- }
-
- .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;
- }
-}
-
-@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:hover,
- .dropdown-submenu a:focus,
- .dropdown-submenu a:active,
- .dropdown-menu > li > a:hover,
- .dropdown-menu > li > a:focus,
- .dropdown-submenu:hover > a,
- .dropdown-submenu:focus > a {
- background-image: none;
- color: $grayDark;
- }
- }
-
- .nav-collapse.in {
- height: auto;
-
- .usermenu .moodle-actionmenu[data-enhanced] {
- .toggle-display {
- display: none;
- }
-
- .menu {
- display: block;
-
- li {
- margin: 0 0.5em;
- }
- }
- }
- }
-
- .path-mod-data .box > table > tbody > tr > td {
- display: block;
- }
-
- .path-mod-forum .forumheaderlist {
- thead .header {
- font-weight: normal;
- font-size: round($font-size-sm);
- }
-
- .discussion {
- .author,
- .replies,
- .lastpost {
- font-size: round($font-size-sm);
- }
-
- .replies .unread a {
- padding: 0;
- }
- }
- }
-
- .navbar {
- .nav-collapse.in {
- 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: 0;
- }
-
- .dropdown-menu {
- margin: 0 0 0 15px;
-
- li > a {
- border-radius: 0;
- }
- }
- }
-
- .nav,
- .nav .dropdown-menu {
- .dropdown-submenu {
- .dropdown-toggle {
- &:after {
- display: inline-block;
- float: none;
-
- @include 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-color: $navbarBackground;
- }
-
- > .dropdown-menu,
- .open > .dropdown-menu {
- display: block;
- }
- }
- }
- }
-
- .divider {
- width: auto;
- display: block;
- height: 0;
- margin: 4px 1px;
- border-left: 0 none;
- border-right: 0 none;
- border-top: 1px solid $navbarBorder;
- border-bottom: 1px solid $navbarBackgroundHighlight;
- }
- }
- }
- }
-
- .navbar-inverse {
- .nav-collapse.in {
- 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-color: $navbarInverseBackground;
- }
- }
- }
- }
-
- .divider {
- width: auto;
- display: block;
- height: 0;
- margin: 4px 1px;
- border-top: 1px solid $navbarInverseBackground;
- border-bottom: 1px solid lighten($navbarInverseBackground, 25%);
- }
- }
-
- .nav {
- > li > a {
- &:hover,
- &:focus {
- color: $navbarInverseLinkColorHover;
- }
- }
- }
-
- .dropdown-menu a {
- &:hover,
- &:focus {
- color: $navbarInverseLinkColorHover;
- }
-
- > li > a {
- &:hover,
- &:focus {
- color: $navbarInverseLinkColorHover;
- }
- }
- }
-
- .dropdown-submenu a {
- &:hover,
- &:focus,
- &:active {
- color: $navbarInverseLinkColorHover;
- }
- }
- }
- }
-}
-
-@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;
-
- @include 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,
- .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 {
- @include fluid-span(12);
- }
- }
-
- .row-fluid .span12 {
- width: 100%;
-
- @include 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) {
- @mixin fluid-span($columns) {
- @include fluid-span-full($columns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
- }
- // CSS for the course management pages.
- #course-category-listings.columns-3 {
- background-color: $tableBackground;
- border: 0;
-
- #category-listing,
- #course-listing {
- @include fluid-span(6);
- margin-left: $fluidGridGutterWidth1200;
-
- &:first-child {
- margin-left: 0;
- }
- }
-
- #course-detail {
- @include fluid-span(12);
- margin: 1em 0 0;
- }
- }
-}
-
-// All widths up to 1199px@mixin
-
-@media (max-width: 1199px) {
-
- // Editor on question pages
- .path-question {
- #id_answerhdr div.fitem {
- padding-right: 6px;
- padding-left: 4px;
- }
- }
- // CSS for the course management pages.
- #course-category-listings.columns-3 {
- background-color: $tableBackground;
- border: 0;
-
- #category-listing,
- #course-listing,
- #course-detail {
- @include 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;
- }
- }
- }
-}
-
-
-// File Picker@mixin
-
-@media (max-width: 768px) {
- .fp-forminset .control-group .controls {
- margin-left: 0;
- }
-}
