MDL-63698 block_myoverview: Summary view course images eq height/width.
[moodle.git] / theme / boost / scss / moodle / blocks.scss
1 .blockmovetarget .accesshide {
2     position: relative;
3     left: initial;
4 }
6 .block:target {
7     padding-top: 0 !important; /* stylelint-disable declaration-no-important */
8     margin-top: 0 !important;
9 }
11 .block_search_forums .searchform {
12     /* Override plugin's default. */
13     text-align: left;
14 }
16 .block.block_navigation .block_tree ul,
17 .block_settings .block_tree ul {
18     margin-left: 0;
19 }
21 .block .block-controls {
22     .dropdown-toggle {
23         /* So that the caret takes the colour of the icon. */
24         color: $body-color;
25     }
26 }
28 $blocks-column-width: 250px !default;
30 [data-region="blocks-column"] {
31     width: $blocks-column-width;
32     float: right;
33 }
35 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
37 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
38 #region-main-settings-menu {
39     position: relative;
40     float: left;
41     width: 100%;
42 }
43 #region-main-settings-menu > div {
44     position: absolute;
45     right: 0;
46     z-index: 100;
47     margin: 1rem;
48 }
49 .region_main_settings_menu_proxy {
50     width: 4rem;
51     height: 2rem;
52     background-color: $card-bg;
53     margin-left: $card-spacer-x / 2;
54     margin-bottom: $card-spacer-x / 2;
55     border-bottom-left-radius: 0.5rem;
56     float: right;
57 }
59 // Required for IE11 to prevent blocks being pushed under the content.
60 #region-main-settings-menu.has-blocks,
61 #region-main.has-blocks {
62     display: inline-block;
63     width: calc(100% - #{$blocks-plus-gutter});
64     @include media-breakpoint-down(lg) {
65         width: 100%;
66         /* MDL-63102 - Remove extra space at bottom.
67         If modifying make sure block-region is horizontally stacked when in full screen */
68         display: block;
69     }
70 }
72 [data-region="blocks-column"] {
73     @include media-breakpoint-down(lg) {
74         width: 100%;
75     }
76 }
78 $card-gutter : $card-deck-margin * 2;
80 .block_myoverview {
81     .empty-placeholder-image-lg {
82         height: 125px;
83     }
84     .course-info-container {
85         padding: 0.8rem;
86     }
87     .progress {
88         height: 0.5rem;
89     }
90     .course-summaryitem {
91         border: $border-width solid $border-color;
92         background-color: $body-bg;
93     }
94     .icon {
95         margin-right: 0;
96     }
97     a,
98     .btn-link {
99         color: inherit;
100     }
101     .btn.btn-link.btn-icon {
102         height: 36px;
103         width: 36px;
104         padding: 0;
105         border-radius: 50%;
107         @include hover-focus {
108             background-color: $gray-200;
109         }
110     }
113 .summaryimage {
114     height: 7rem;
115     background-position: center;
116     background-size: cover;
119 .dashboard-card-deck .dashboard-card {
120     margin-bottom: $card-gutter;
121     flex-basis: 100%;
122     flex-grow: 0;
123     .dashboard-card-img {
124         height: 7rem;
125         background-position: center;
126         background-size: cover;
127     }
128     .dashboard-card-footer {
129         padding: 0.8rem;
130     }
133 .dashboard-card-deck {
134     @include media-breakpoint-up(sm) {
135         .dashboard-card {
136             flex-basis: calc(50% - #{$card-gutter});
137         }
138     }
139     @include media-breakpoint-up(md) {
140         .dashboard-card {
141             flex-basis: calc(33.33% - #{$card-gutter});
142         }
143     }
144     @include media-breakpoint-up(lg) {
145         .dashboard-card {
146             flex-basis: calc(25% - #{$card-gutter});
147         }
148     }
149     @include media-breakpoint-up(xl) {
150         .dashboard-card {
151             flex-basis: calc(20% - #{$card-gutter});
152         }
153     }
156 #region-main.has-blocks {
157     .dashboard-card-deck {
158         @include media-breakpoint-up(lg) {
159             .dashboard-card {
160                 flex-basis: calc(33.33% - #{$card-gutter});
161             }
162         }
163         @include media-breakpoint-up(xl) {
164             .dashboard-card {
165                 flex-basis: calc(25% - #{$card-gutter});
166             }
167         }
168     }
171 body.drawer-open-left #region-main.has-blocks {
172     .dashboard-card-deck {
173         @include media-breakpoint-up(lg) {
174             .dashboard-card {
175                 flex-basis: calc(33.33% - #{$card-gutter});
176             }
177         }
178         @media (min-width: 1400px) {
179             .dashboard-card {
180                 flex-basis: calc(25% - #{$card-gutter});
181             }
182         }
183     }
186 @media (min-width: 1200px) {
187     #block-region-side-pre {
188         .dashboard-card-deck {
189             margin: 0;
190             .dashboard-card {
191                 flex-basis: 100% !important;
192                 margin-left: 0;
193                 margin-right: 0;
194             }
195         }
196     }
199 // Show expand collapse with font-awesome.
200 .block_settings .block_tree [aria-expanded="true"],
201 .block_settings .block_tree [aria-expanded="true"].emptybranch,
202 .block_settings .block_tree [aria-expanded="false"],
203 .block_navigation .block_tree [aria-expanded="true"],
204 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
205 .block_navigation .block_tree [aria-expanded="false"] {
206     background-image: none;
208 .block_settings .block_tree [aria-expanded="true"]:before,
209 .block_navigation .block_tree [aria-expanded="true"]:before {
210     content: $fa-var-angle-down;
211     margin-right: 0;
212     font-size: 16px;
213     @extend .fa;
214     width: 16px;
217 .block_settings .block_tree [aria-expanded="false"]:before,
218 .block_navigation .block_tree [aria-expanded="false"]:before {
219     content: $fa-var-angle-right;
220     font-size: 16px;
221     margin-right: 0;
222     @extend .fa;
223     width: 16px;
225 .dir-rtl {
226     .block_settings .block_tree [aria-expanded="false"]:before,
227     .block_navigation .block_tree [aria-expanded="false"]:before {
228         content: $fa-var-angle-left;
229     }
232 .block_navigation .block_tree p.hasicon,
233 .block_settings .block_tree p.hasicon {
234     text-indent: -3px;
236     .icon {
237         margin-right: 2px;
238     }