4cfb7118f9ae8a38c0fed0b81877702d3b698bb6
[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: 360px !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 .empty-placeholder-image-lg {
81     height: 125px;
82 }
84 .block .block-cards {
85     .course-info-container {
86         padding: 0.8rem;
87     }
88     .progress {
89         height: 0.5rem;
90     }
91     .course-summaryitem {
92         border: $border-width solid $border-color;
93         background-color: $body-bg;
94     }
95     .icon {
96         margin-right: 0;
97         &.fa-star {
98             color: $blue;
99         }
100     }
101     .card .coursemenubtn {
102         margin-top: -0.5rem;
103     }
104     a.coursename,
105     .btn-link {
106         color: inherit;
107     }
108     .btn.btn-link.btn-icon {
109         height: 36px;
110         width: 36px;
111         padding: 0;
112         border-radius: 50%;
114         @include hover-focus {
115             background-color: $gray-200;
116         }
117     }
120 .dashboard-card-deck.one-row {
121     flex-flow: nowrap;
122     overflow-x: scroll;
125 .summaryimage {
126     height: 7rem;
127     width: 7rem;
128     background-position: center;
129     background-size: cover;
132 .dashboard-card-deck .dashboard-card {
133     margin-bottom: $card-gutter;
134     flex-basis: auto;
135     width: 100%;
136     flex-grow: 0;
137     flex-shrink: 0;
138     .dashboard-card-img {
139         height: 7rem;
140         background-position: center;
141         background-size: cover;
142     }
143     .dashboard-card-footer {
144         padding: 0.8rem;
145     }
148 .dashboard-card-deck {
149     @include media-breakpoint-up(sm) {
150         .dashboard-card {
151             width: calc(50% - #{$card-gutter});
152         }
153     }
154     @include media-breakpoint-up(md) {
155         .dashboard-card {
156             width: calc(33.33% - #{$card-gutter});
157         }
158     }
159     @include media-breakpoint-up(lg) {
160         .dashboard-card {
161             width: calc(25% - #{$card-gutter});
162         }
163     }
164     @include media-breakpoint-up(xl) {
165         .dashboard-card {
166             width: calc(20% - #{$card-gutter});
167         }
168     }
171 #region-main.has-blocks {
172     .dashboard-card-deck {
173         @include media-breakpoint-up(lg) {
174             .dashboard-card {
175                 width: calc(33.33% - #{$card-gutter});
176             }
177         }
178         @include media-breakpoint-up(xl) {
179             .dashboard-card {
180                 width: calc(25% - #{$card-gutter});
181             }
182         }
183     }
186 body.drawer-open-left #region-main.has-blocks {
187     .dashboard-card-deck {
188         @include media-breakpoint-up(lg) {
189             .dashboard-card {
190                 width: calc(33.33% - #{$card-gutter});
191             }
192         }
193         @media (min-width: 1400px) {
194             .dashboard-card {
195                 width: calc(25% - #{$card-gutter});
196             }
197         }
198     }
201 @media (min-width: 1200px) {
202     #block-region-side-pre {
203         .dashboard-card-deck {
204             margin: 0;
205             .dashboard-card {
206                 width: 100% !important;
207                 margin-left: 0;
208                 margin-right: 0;
209             }
210         }
211     }
214 .block_recentlyaccesseditems {
215     img.icon {
216         height: auto;
217         width: auto;
218         margin-right: 6px;
219     }
222 // Show expand collapse with font-awesome.
223 .block_settings .block_tree [aria-expanded="true"],
224 .block_settings .block_tree [aria-expanded="true"].emptybranch,
225 .block_settings .block_tree [aria-expanded="false"],
226 .block_navigation .block_tree [aria-expanded="true"],
227 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
228 .block_navigation .block_tree [aria-expanded="false"] {
229     background-image: none;
231 .block_settings .block_tree [aria-expanded="true"]:before,
232 .block_navigation .block_tree [aria-expanded="true"]:before {
233     content: $fa-var-angle-down;
234     margin-right: 0;
235     font-size: 16px;
236     @extend .fa;
237     width: 16px;
240 .block_settings .block_tree [aria-expanded="false"]:before,
241 .block_navigation .block_tree [aria-expanded="false"]:before {
242     content: $fa-var-angle-right;
243     font-size: 16px;
244     margin-right: 0;
245     @extend .fa;
246     width: 16px;
248 .dir-rtl {
249     .block_settings .block_tree [aria-expanded="false"]:before,
250     .block_navigation .block_tree [aria-expanded="false"]:before {
251         content: $fa-var-angle-left;
252     }
255 .block_navigation .block_tree p.hasicon,
256 .block_settings .block_tree p.hasicon {
257     text-indent: -3px;
259     .icon {
260         margin-right: 2px;
261     }