responsive.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /* responsive.less */
  2. @media (max-width: 873px) {
  3. .file-picker .fp-repo-area {
  4. width: 100%;
  5. height: auto;
  6. max-height: 220px;
  7. overflow-y: auto;
  8. float: none;
  9. border: 0px;
  10. }
  11. .file-picker .fp-repo-items {
  12. width: 100%;
  13. float: none;
  14. }
  15. .file-picker .fp-login-form .fp-login-input label {
  16. text-align: left;
  17. }
  18. .file-picker .fp-content form td {
  19. display: block;
  20. width: 100%;
  21. text-align: left;
  22. }
  23. .fp-content .mdl-right {
  24. text-align: left;
  25. }
  26. .fp-repo-items .fp-navbar {
  27. border-top: 1px solid rgb(187, 187, 187);
  28. }
  29. }
  30. @media (max-width: @screen-xs) {
  31. .fp-content-center {
  32. display: block;
  33. vertical-align: top;
  34. }
  35. .course-content ul.topics li.section,
  36. .course-content ul.topics li.section .content,
  37. .course-content ul.weeks li.section .content,
  38. .course-content ul.weeks li.section,
  39. .course-content ul.section {
  40. margin-right: 0;
  41. margin-left: 0;
  42. padding: 0;
  43. }
  44. .activityinstance {
  45. display: block;
  46. }
  47. .editing .course-content .section .activity {
  48. margin-bottom: 0.2em;
  49. padding-bottom: 0.2em;
  50. border-bottom: thin solid @table-border-color;
  51. }
  52. .course-content .section .activity .commands {
  53. text-align: right;
  54. }
  55. /** Handles display of the activity chooser on small screens **/
  56. .jsenabled .choosercontainer #chooseform .alloptions {
  57. max-width: 100%;
  58. }
  59. .jsenabled .choosercontainer #chooseform .instruction,
  60. .jsenabled .choosercontainer #chooseform .typesummary {
  61. position:static;
  62. }
  63. .que .info {
  64. float: none;
  65. width: auto;
  66. }
  67. .que .content {
  68. margin: 0;
  69. }
  70. .path-mod-choice .horizontal .choices .option {
  71. display: block;
  72. }
  73. .path-mod-forum .forumsearch #search {
  74. width: 120px;
  75. }
  76. .path-mod-forum .forumheaderlist .picture {
  77. display: none;
  78. }
  79. .panel {
  80. .courseimage {
  81. img {
  82. margin-right: 5px;
  83. float: none;
  84. max-width: 100%;
  85. }
  86. }
  87. }
  88. }
  89. @media (max-width: @screen-sm) {
  90. // Resize, reflow file-picker on small devices
  91. #filesskin .yui3-panel,
  92. #filesskin .file-picker.fp-generallayout {
  93. width: 100%;
  94. left: 0;
  95. }
  96. }