MDL-63058 block_myoverview: starring and storing preferences
[moodle.git] / theme / boost / scss / moodle / blocks.scss
CommitLineData
d7fbf722 1.blockmovetarget .accesshide {
536f0460 2 position: relative;
d7fbf722 3 left: initial;
536f0460 4}
270dd871 5
54ff9a4b
SL
6.block:target {
7 padding-top: 0 !important; /* stylelint-disable declaration-no-important */
8 margin-top: 0 !important;
9}
10
270dd871
FM
11.block_search_forums .searchform {
12 /* Override plugin's default. */
13 text-align: left;
14}
400274bc
DW
15
16.block.block_navigation .block_tree ul,
17.block_settings .block_tree ul {
18 margin-left: 0;
19}
1149c235
FM
20
21.block .block-controls {
22 .dropdown-toggle {
23 /* So that the caret takes the colour of the icon. */
9d67a408 24 color: $body-color;
1149c235
FM
25 }
26}
99061152 27
0a58ec24 28$blocks-column-width: 250px !default;
99061152 29
0a58ec24
DW
30[data-region="blocks-column"] {
31 width: $blocks-column-width;
32 float: right;
99061152
DW
33}
34
3ec69c2e 35$blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
0a58ec24 36
11774d90
DW
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}
d8cfd611
DW
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}
4682f17c
DW
58
59// Required for IE11 to prevent blocks being pushed under the content.
11774d90 60#region-main-settings-menu.has-blocks,
0a58ec24
DW
61#region-main.has-blocks {
62 display: inline-block;
63 width: calc(100% - #{$blocks-plus-gutter});
42654589 64 @include media-breakpoint-down(lg) {
0a58ec24 65 width: 100%;
970bb713
P
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;
99061152
DW
69 }
70}
a0bdffbd
DW
71
72[data-region="blocks-column"] {
42654589 73 @include media-breakpoint-down(lg) {
a0bdffbd
DW
74 width: 100%;
75 }
76}
cab053f7 77
e4b4b9e7 78$card-gutter : $card-deck-margin * 2;
cab053f7 79
e4b4b9e7
BB
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 }
3cfff885
BB
109 .icon {
110 margin-right: 0;
111 }
112 a,
113 .btn-link {
114 color: inherit;
115 }
116 .btn.btn-link.btn-icon {
117 height: $icon-width;
118 width: $icon-width;
119 padding: 0;
120 border-radius: 50%;
121 flex-shrink: 0;
122
123 @include hover-focus {
124 background-color: $gray-200;
125 }
126
127 @each $size, $length in $iconsizes {
128 &.icon-size-#{$size} {
129 height: ($length + 20px) !important;
130 width: ($length + 20px) !important;
131 }
132 }
133 }
e4b4b9e7
BB
134 @include media-breakpoint-down(sm) {
135 .summaryimage {
136 max-height: 7rem;
cab053f7
RW
137 }
138 }
e4b4b9e7 139}
cab053f7 140
e4b4b9e7
BB
141#region-main {
142 .block_myoverview {
143 .course-card {
144 flex-grow: 0;
145 flex-shrink: 0;
146 flex-basis: calc(50% - #{$card-gutter});
147 }
148 @include media-breakpoint-up(sm) {
149 .course-card {
150 flex-basis: calc(50% - #{$card-gutter});
151 }
152 }
153 @include media-breakpoint-up(md) {
154 .course-card {
155 flex-basis: calc(33.33% - #{$card-gutter});
156 }
157 }
158 @include media-breakpoint-up(lg) {
159 .course-card {
160 flex-basis: calc(25% - #{$card-gutter});
161 }
162 }
163 @include media-breakpoint-up(xl) {
164 .course-card {
165 flex-basis: calc(20% - #{$card-gutter});
166 }
cab053f7
RW
167 }
168 }
169}
0eb85562 170
e4b4b9e7
BB
171#region-main.has-blocks .block_myoverview {
172 @include media-breakpoint-up(lg) {
173 .course-card {
174 flex-basis: calc(33.33% - #{$card-gutter});
175 }
cbd3c4fe 176 }
e4b4b9e7
BB
177 @include media-breakpoint-up(xl) {
178 .course-card {
179 flex-basis: calc(25% - #{$card-gutter});
180 }
cbd3c4fe 181 }
7243eef9 182}
57ea73d0 183
e4b4b9e7
BB
184body.drawer-open-left #region-main.has-blocks .block_myoverview {
185 .course-card {
c8cc25ca
BB
186 flex-basis: calc(50% - #{$card-gutter});
187 }
e4b4b9e7
BB
188 @include media-breakpoint-up(lg) {
189 .course-card {
190 flex-basis: calc(33.33% - #{$card-gutter});
c8cc25ca
BB
191 }
192 }
3cfff885
BB
193 @media (min-width: 1400px) {
194 .course-card {
195 flex-basis: calc(25% - #{$card-gutter});
196 }
197 }
c8cc25ca
BB
198}
199
57ea73d0
DW
200// Show expand collapse with font-awesome.
201.block_settings .block_tree [aria-expanded="true"],
202.block_settings .block_tree [aria-expanded="true"].emptybranch,
203.block_settings .block_tree [aria-expanded="false"],
204.block_navigation .block_tree [aria-expanded="true"],
205.block_navigation .block_tree [aria-expanded="true"].emptybranch,
206.block_navigation .block_tree [aria-expanded="false"] {
207 background-image: none;
208}
209.block_settings .block_tree [aria-expanded="true"]:before,
210.block_navigation .block_tree [aria-expanded="true"]:before {
211 content: $fa-var-angle-down;
212 margin-right: 0;
213 font-size: 16px;
214 @extend .fa;
215 width: 16px;
216}
217
218.block_settings .block_tree [aria-expanded="false"]:before,
219.block_navigation .block_tree [aria-expanded="false"]:before {
220 content: $fa-var-angle-right;
221 font-size: 16px;
222 margin-right: 0;
223 @extend .fa;
224 width: 16px;
225}
226.dir-rtl {
227 .block_settings .block_tree [aria-expanded="false"]:before,
228 .block_navigation .block_tree [aria-expanded="false"]:before {
229 content: $fa-var-angle-left;
230 }
231}
232
233.block_navigation .block_tree p.hasicon,
234.block_settings .block_tree p.hasicon {
235 text-indent: -3px;
236
237 .icon {
238 margin-right: 2px;
239 }
240}