MDL-68963 qtype_calculatedmulti: show question content inline
[moodle.git] / theme / classic / scss / classic / post.scss
1 // General Post SCSS for use in all presets.
3 // Generate the column layout css.
4 @mixin page_layout($blockswidth) {
5     $mainwidth-oneblock: (100% - $blockswidth);
6     $mainwidth-twoblocks: (100% - $blockswidth * 2);
7     #page-content {
8         display: flex;
10         .region-main {
11             flex: 0 0 100%;
12             padding: 0 1rem;
13         }
15         &.blocks-pre {
16             .columnleft {
17                 flex: 0 0 $blockswidth;
18                 order: -1;
19                 padding: 0 1rem;
20                 max-width: $blockswidth;
21             }
22             .region-main {
23                 flex: 0 0 $mainwidth-oneblock;
24                 max-width: $mainwidth-oneblock;
25                 padding: 0 1rem 0 0;
26             }
27         }
28         &.blocks-post {
29             .region-main {
30                 flex: 0 0 $mainwidth-oneblock;
31                 max-width: $mainwidth-oneblock;
32                 padding: 0 0 0 1rem;
33             }
34             .columnright {
35                 flex: 0 0 $blockswidth;
36                 padding: 0 1rem;
37                 max-width: $blockswidth;
38             }
39         }
40         &.blocks-pre.blocks-post {
41             .region-main {
42                 flex: 0 0 $mainwidth-twoblocks;
43                 max-width: $mainwidth-twoblocks;
44                 padding: 0;
45             }
46         }
48         [data-region="blocks-column"] {
49             width: 100%;
50         }
51     }
53     .empty-region-side-pre {
54         &.used-region-side-post {
55             #page-content {
56                 .region-main {
57                     flex: 0 0 $mainwidth-oneblock;
58                     max-width: $mainwidth-oneblock;
59                     padding-left: 1rem;
60                 }
61                 .columnright {
62                     flex: 0 0 $blockswidth;
63                     padding: 0 1rem;
64                     max-width: $blockswidth;
65                 }
66             }
67         }
68     }
69     .empty-region-side-post {
70         &.used-region-side-pre {
71             #page-content {
72                 .region-main {
73                     flex: 0 0 $mainwidth-oneblock;
74                     max-width: $mainwidth-oneblock;
75                     padding-right: 1rem;
76                 }
77                 .columnleft {
78                     flex: 0 0 $blockswidth;
79                     order: -1;
80                     padding: 0 1rem;
81                     max-width: $blockswidth;
82                 }
83             }
84         }
85     }
86     .used-region-side-post {
87         &.used-region-side-pre {
88             #page-content {
89                 .region-main {
90                     flex: 0 0 $mainwidth-twoblocks;
91                     max-width: $mainwidth-twoblocks;
92                     padding: 0;
93                 }
94                 .columnleft {
95                     flex: 0 0 $blockswidth;
96                     order: -1;
97                     padding: 0 1rem;
98                     max-width: $blockswidth;
99                 }
100                 .columnright {
101                     flex: 0 0 $blockswidth;
102                     padding: 0 1rem;
103                     max-width: $blockswidth;
104                 }
105             }
106         }
107     }
110 // The block column needs some padding on small devices.
111 @include media-breakpoint-down(sm) {
112     .blockcolumn,
113     .region-main {
114         flex: 0 0 100%;
115         max-width: 100%;
116         padding: 0 1rem;
117         margin-bottom: 1rem;
118     }
121 // When changing this please check the size of the calendar block.
122 @include media-breakpoint-up(md) {
123     @include page_layout(32%);
126 @include media-breakpoint-up(lg) {
127     @include page_layout(25%);
130 @include media-breakpoint-up(xl) {
131     @include page_layout(20%);
134 @media print {
135     #page-content .region-main, {
136         max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
137         flex: 0 0 100% !important; /* stylelint-disable-line declaration-no-important */
138         padding: 0 1rem 0 !important; /* stylelint-disable-line declaration-no-important */
139     }
142 @include media-breakpoint-up(sm) {
143     .block_myoverview,
144     .block_recentlyaccesseditems {
145         .dashboard-card-deck {
146             .dashboard-card {
147                 width: calc(33.33% - #{$card-gutter});
148             }
149         }
150     }
153 @include media-breakpoint-up(md) {
154     .blockcolumn {
155         .dashboard-card-deck {
156             margin-left: 0;
157             margin-right: 0;
158             .dashboard-card {
159                 width: calc(100% - #{$card-gutter}) !important; /* stylelint-disable-line declaration-no-important */
160             }
161         }
162     }
165 // Settings and Navigation blocks don't render well from default boost.
166 .block_navigation,
167 .block_settings {
168     .block_tree {
169         &.list > li > ul {
170             padding-left: 0;
171         }
172         .tree_item.branch {
173             margin-left: 5px;
174             padding-left: 0.75rem;
175         }
176         p.hasicon {
177             text-indent: 0;
178             padding-left: 0.75rem;
179         }
180         ul {
181             margin-left: 0.25rem;
182             padding-left: 1rem;
183         }
184     }
187 .block_navigation .block_tree p.hasicon .icon,
188 .block_settings .block_tree p.hasicon .icon {
189     margin-right: 5px;
192 // Remove left indenting from root nodes to allow sub-nodes to indent correctly.
193 .root_node,
194 .navigation_node {
195     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
196     padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
199 .block.block_settings {
200     #settingsnav {
201         padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
202     }