6494af82546d3db5f83f7ae627891d4a710303c2
[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     }
111     @include media-breakpoint-down(sm) {
112         .summaryimage {
113             max-height: 7rem;
114         }
115     }
118 .dashboard-card-deck .dashboard-card {
119     margin-bottom: $card-gutter;
120     flex-basis: 100%;
121     flex-grow: 0;
122     .dashboard-card-img {
123         height: 7rem;
124         background-position: center;
125         background-size: cover;
126     }
127     .dashboard-card-footer {
128         padding: 0.8rem;
129     }
132 .dashboard-card-deck {
133     @include media-breakpoint-up(sm) {
134         .dashboard-card {
135             flex-basis: calc(50% - #{$card-gutter});
136         }
137     }
138     @include media-breakpoint-up(md) {
139         .dashboard-card {
140             flex-basis: calc(33.33% - #{$card-gutter});
141         }
142     }
143     @include media-breakpoint-up(lg) {
144         .dashboard-card {
145             flex-basis: calc(25% - #{$card-gutter});
146         }
147     }
148     @include media-breakpoint-up(xl) {
149         .dashboard-card {
150             flex-basis: calc(20% - #{$card-gutter});
151         }
152     }
155 #region-main.has-blocks {
156     .dashboard-card-deck {
157         @include media-breakpoint-up(lg) {
158             .dashboard-card {
159                 flex-basis: calc(33.33% - #{$card-gutter});
160             }
161         }
162         @include media-breakpoint-up(xl) {
163             .dashboard-card {
164                 flex-basis: calc(25% - #{$card-gutter});
165             }
166         }
167     }
170 body.drawer-open-left #region-main.has-blocks {
171     .dashboard-card-deck {
172         @include media-breakpoint-up(lg) {
173             .dashboard-card {
174                 flex-basis: calc(33.33% - #{$card-gutter});
175             }
176         }
177         @media (min-width: 1400px) {
178             .dashboard-card {
179                 flex-basis: calc(25% - #{$card-gutter});
180             }
181         }
182     }
185 @media (min-width: 1200px) {
186     #block-region-side-pre {
187         .dashboard-card-deck {
188             margin: 0;
189             .dashboard-card {
190                 flex-basis: 100% !important;
191                 margin-left: 0;
192                 margin-right: 0;
193             }
194         }
195     }
198 // Show expand collapse with font-awesome.
199 .block_settings .block_tree [aria-expanded="true"],
200 .block_settings .block_tree [aria-expanded="true"].emptybranch,
201 .block_settings .block_tree [aria-expanded="false"],
202 .block_navigation .block_tree [aria-expanded="true"],
203 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
204 .block_navigation .block_tree [aria-expanded="false"] {
205     background-image: none;
207 .block_settings .block_tree [aria-expanded="true"]:before,
208 .block_navigation .block_tree [aria-expanded="true"]:before {
209     content: $fa-var-angle-down;
210     margin-right: 0;
211     font-size: 16px;
212     @extend .fa;
213     width: 16px;
216 .block_settings .block_tree [aria-expanded="false"]:before,
217 .block_navigation .block_tree [aria-expanded="false"]:before {
218     content: $fa-var-angle-right;
219     font-size: 16px;
220     margin-right: 0;
221     @extend .fa;
222     width: 16px;
224 .dir-rtl {
225     .block_settings .block_tree [aria-expanded="false"]:before,
226     .block_navigation .block_tree [aria-expanded="false"]:before {
227         content: $fa-var-angle-left;
228     }
231 .block_navigation .block_tree p.hasicon,
232 .block_settings .block_tree p.hasicon {
233     text-indent: -3px;
235     .icon {
236         margin-right: 2px;
237     }