Merge branch 'MDL-63102-master' of git://github.com/peterRd/moodle
[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-card {
85         margin-bottom: $card-gutter;
86         flex-basis: 100%;
87     }
88     .course-info-container {
89         padding: 0.8rem;
90     }
91     .course-card-footer {
92         padding: 0.8rem;
93     }
94     .progress {
95         height: 0.5rem;
96     }
97     .myoverviewimg {
98         height: 7rem;
99         background-position: center;
100         background-size: cover;
101     }
102     .course-summaryitem {
103         border: $border-width solid $border-color;
104         background-color: $body-bg;
105     }
106     .summary img {
107         max-width: 100%;
108     }
109     @include media-breakpoint-down(sm) {
110         .summaryimage {
111             max-height: 7rem;
112         }
113     }
116 #region-main {
117     .block_myoverview {
118         .course-card {
119             flex-grow: 0;
120             flex-shrink: 0;
121             flex-basis: calc(50% - #{$card-gutter});
122         }
123         @include media-breakpoint-up(sm) {
124             .course-card {
125                 flex-basis: calc(50% - #{$card-gutter});
126             }
127         }
128         @include media-breakpoint-up(md) {
129             .course-card {
130                 flex-basis: calc(33.33% - #{$card-gutter});
131             }
132         }
133         @include media-breakpoint-up(lg) {
134             .course-card {
135                 flex-basis: calc(25% - #{$card-gutter});
136             }
137         }
138         @include media-breakpoint-up(xl) {
139             .course-card {
140                 flex-basis: calc(20% - #{$card-gutter});
141             }
142         }
143     }
146 #region-main.has-blocks .block_myoverview {
147     @include media-breakpoint-up(lg) {
148         .course-card {
149             flex-basis: calc(33.33% - #{$card-gutter});
150         }
151     }
152     @include media-breakpoint-up(xl) {
153         .course-card {
154             flex-basis: calc(25% - #{$card-gutter});
155         }
156     }
159 body.drawer-open-left #region-main.has-blocks .block_myoverview {
160     .course-card {
161         flex-basis: calc(50% - #{$card-gutter});
162     }
163     @include media-breakpoint-up(lg) {
164         .course-card {
165             flex-basis: calc(33.33% - #{$card-gutter});
166         }
167     }
170 // Show expand collapse with font-awesome.
171 .block_settings .block_tree [aria-expanded="true"],
172 .block_settings .block_tree [aria-expanded="true"].emptybranch,
173 .block_settings .block_tree [aria-expanded="false"],
174 .block_navigation .block_tree [aria-expanded="true"],
175 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
176 .block_navigation .block_tree [aria-expanded="false"] {
177     background-image: none;
179 .block_settings .block_tree [aria-expanded="true"]:before,
180 .block_navigation .block_tree [aria-expanded="true"]:before {
181     content: $fa-var-angle-down;
182     margin-right: 0;
183     font-size: 16px;
184     @extend .fa;
185     width: 16px;
188 .block_settings .block_tree [aria-expanded="false"]:before,
189 .block_navigation .block_tree [aria-expanded="false"]:before {
190     content: $fa-var-angle-right;
191     font-size: 16px;
192     margin-right: 0;
193     @extend .fa;
194     width: 16px;
196 .dir-rtl {
197     .block_settings .block_tree [aria-expanded="false"]:before,
198     .block_navigation .block_tree [aria-expanded="false"]:before {
199         content: $fa-var-angle-left;
200     }
203 .block_navigation .block_tree p.hasicon,
204 .block_settings .block_tree p.hasicon {
205     text-indent: -3px;
207     .icon {
208         margin-right: 2px;
209     }