MDL-64505 theme_classic: Created the classic theme
[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         padding: 0 1rem;
116         margin-bottom: 1rem;
117     }
120 // When changing this please check the size of the calendar block.
121 @include media-breakpoint-up(md) {
122     @include page_layout(32%);
125 @include media-breakpoint-up(lg) {
126     @include page_layout(25%);
129 @include media-breakpoint-up(xl) {
130     @include page_layout(20%);
133 .block_myoverview,
134 .block_recentlyaccesseditems {
135     .dashboard-card-deck {
136         .dashboard-card {
137             width: calc(33.33% - #{$card-gutter});
138         }
139     }
142 @include media-breakpoint-up(md) {
143     .blockcolumn {
144         .dashboard-card-deck {
145             margin-left: 0;
146             margin-right: 0;
147             .dashboard-card {
148                 width: calc(100% - #{$card-gutter}) !important; /* stylelint-disable-line declaration-no-important */
149             }
150         }
151     }
154 // Settings and Navigation blocks don't render well from default boost.
155 .block_navigation,
156 .block_settings {
157     .block_tree {
158         &.list > li > ul {
159             padding-left: 0;
160         }
161         .tree_item.branch {
162             margin-left: 5px;
163             padding-left: 0.75rem;
164         }
165         p.hasicon {
166             text-indent: 0;
167             padding-left: 0.75rem;
168         }
169         ul {
170             margin-left: 0.25rem;
171             padding-left: 1rem;
172         }
173     }
176 .block_navigation .block_tree p.hasicon .icon,
177 .block_settings .block_tree p.hasicon .icon {
178     margin-right: 5px;
181 // Remove left indenting from root nodes to allow sub-nodes to indent correctly.
182 .root_node,
183 .navigation_node {
184     margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
185     padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
188 .block.block_settings {
189     #settingsnav {
190         padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
191     }