Merge branch 'MDL-68963-master' of git://github.com/bmbrands/moodle
[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             max-width: 100%;
14         }
16         &.blocks-pre {
17             .columnleft {
18                 flex: 0 0 $blockswidth;
19                 order: -1;
20                 padding: 0 1rem;
21                 max-width: $blockswidth;
22             }
23             .region-main {
24                 flex: 0 0 $mainwidth-oneblock;
25                 max-width: $mainwidth-oneblock;
26                 padding: 0 1rem 0 0;
27             }
28         }
29         &.blocks-post {
30             .region-main {
31                 flex: 0 0 $mainwidth-oneblock;
32                 max-width: $mainwidth-oneblock;
33                 padding: 0 0 0 1rem;
34             }
35             .columnright {
36                 flex: 0 0 $blockswidth;
37                 padding: 0 1rem;
38                 max-width: $blockswidth;
39             }
40         }
41         &.blocks-pre.blocks-post {
42             .region-main {
43                 flex: 0 0 $mainwidth-twoblocks;
44                 max-width: $mainwidth-twoblocks;
45                 padding: 0;
46             }
47         }
49         [data-region="blocks-column"] {
50             width: 100%;
51         }
52     }
54     .empty-region-side-pre {
55         &.used-region-side-post {
56             #page-content {
57                 .region-main {
58                     flex: 0 0 $mainwidth-oneblock;
59                     max-width: $mainwidth-oneblock;
60                     padding-left: 1rem;
61                 }
62                 .columnright {
63                     flex: 0 0 $blockswidth;
64                     padding: 0 1rem;
65                     max-width: $blockswidth;
66                 }
67             }
68         }
69     }
70     .empty-region-side-post {
71         &.used-region-side-pre {
72             #page-content {
73                 .region-main {
74                     flex: 0 0 $mainwidth-oneblock;
75                     max-width: $mainwidth-oneblock;
76                     padding-right: 1rem;
77                 }
78                 .columnleft {
79                     flex: 0 0 $blockswidth;
80                     order: -1;
81                     padding: 0 1rem;
82                     max-width: $blockswidth;
83                 }
84             }
85         }
86     }
87     .used-region-side-post {
88         &.used-region-side-pre {
89             #page-content {
90                 .region-main {
91                     flex: 0 0 $mainwidth-twoblocks;
92                     max-width: $mainwidth-twoblocks;
93                     padding: 0;
94                 }
95                 .columnleft {
96                     flex: 0 0 $blockswidth;
97                     order: -1;
98                     padding: 0 1rem;
99                     max-width: $blockswidth;
100                 }
101                 .columnright {
102                     flex: 0 0 $blockswidth;
103                     padding: 0 1rem;
104                     max-width: $blockswidth;
105                 }
106             }
107         }
108     }
111 // The block column needs some padding on small devices.
112 @include media-breakpoint-down(sm) {
113     .blockcolumn,
114     .region-main {
115         flex: 0 0 100%;
116         max-width: 100%;
117         padding: 0 1rem;
118         margin-bottom: 1rem;
119     }
122 // When changing this please check the size of the calendar block.
123 @include media-breakpoint-up(md) {
124     @include page_layout(32%);
127 @include media-breakpoint-up(lg) {
128     @include page_layout(25%);
131 @include media-breakpoint-up(xl) {
132     @include page_layout(20%);
135 @media print {
136     #page-content .region-main, {
137         max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
138         flex: 0 0 100% !important; /* stylelint-disable-line declaration-no-important */
139         padding: 0 1rem 0 !important; /* stylelint-disable-line declaration-no-important */
140     }
143 @include media-breakpoint-up(sm) {
144     .dashboard-card-deck .dashboard-card {
145         width: calc(50% - #{$card-gutter});
146     }
149 @include media-breakpoint-up(md) {
150     .dashboard-card-deck .dashboard-card {
151         width: calc(50% - #{$card-gutter});
152     }
153     .blocks-post,
154     .blocks-pre {
155         .dashboard-card-deck .dashboard-card {
156             width: calc(100% - #{$card-gutter});
157         }
158     }
161 @include media-breakpoint-up(lg) {
162     .dashboard-card-deck .dashboard-card {
163         width: calc(33.33% - #{$card-gutter});
164     }
165     .blocks-post,
166     .blocks-pre {
167         .dashboard-card-deck .dashboard-card {
168             width: calc(50% - #{$card-gutter});
169         }
170     }
173 @include media-breakpoint-up(xl) {
174     .dashboard-card-deck .dashboard-card {
175         width: calc(25% - #{$card-gutter});
176     }
177     .blocks-post,
178     .blocks-pre {
179         .dashboard-card-deck .dashboard-card {
180             width: calc(33.33% - #{$card-gutter});
181         }
182     }
185 @include media-breakpoint-up(md) {
186     .blockcolumn {
187         .dashboard-card-deck {
188             margin-left: 0;
189             margin-right: 0;
190             .dashboard-card {
191                 width: calc(100% - #{$card-gutter}) !important; /* stylelint-disable-line declaration-no-important */
192             }
193         }
194     }
197 // Settings and Navigation blocks don't render well from default boost.
198 .block_navigation,
199 .block_settings {
200     .block_tree {
201         &.list > li > ul {
202             padding-left: 0;
203         }
204         .tree_item.branch {
205             margin-left: 5px;
206             padding-left: 0.75rem;
207         }
208         p.hasicon {
209             text-indent: 0;
210             padding-left: 0.75rem;
211         }
212         ul {
213             margin-left: 0.25rem;
214             padding-left: 1rem;
215         }
216     }
219 .block_navigation .block_tree p.hasicon .icon,
220 .block_settings .block_tree p.hasicon .icon {
221     margin-right: 5px;
224 // Remove left indenting from root nodes to allow sub-nodes to indent correctly.
225 .root_node,
226 .navigation_node {
227     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
228     padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
231 .block.block_settings {
232     #settingsnav {
233         padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
234     }