MDL-63064 block_starredcourses: fix linting issues
[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
63d0d9b4 28$blocks-column-width: 360px !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
f6c6f215
BB
80.block_myoverview,
81.block_starredcourses {
e4b4b9e7
BB
82 .empty-placeholder-image-lg {
83 height: 125px;
84 }
e4b4b9e7
BB
85 .course-info-container {
86 padding: 0.8rem;
87 }
e4b4b9e7
BB
88 .progress {
89 height: 0.5rem;
90 }
e4b4b9e7
BB
91 .course-summaryitem {
92 border: $border-width solid $border-color;
93 background-color: $body-bg;
94 }
3cfff885
BB
95 .icon {
96 margin-right: 0;
97 }
98 a,
99 .btn-link {
100 color: inherit;
101 }
102 .btn.btn-link.btn-icon {
4fd6b770
BB
103 height: 36px;
104 width: 36px;
3cfff885
BB
105 padding: 0;
106 border-radius: 50%;
3cfff885
BB
107
108 @include hover-focus {
109 background-color: $gray-200;
110 }
3cfff885 111 }
fe149a99
LB
112}
113
114.summaryimage {
115 height: 7rem;
116 background-position: center;
117 background-size: cover;
e4b4b9e7 118}
cab053f7 119
4fd6b770
BB
120.dashboard-card-deck .dashboard-card {
121 margin-bottom: $card-gutter;
122 flex-basis: 100%;
123 flex-grow: 0;
124 .dashboard-card-img {
125 height: 7rem;
126 background-position: center;
127 background-size: cover;
128 }
129 .dashboard-card-footer {
130 padding: 0.8rem;
131 }
132}
133
134.dashboard-card-deck {
135 @include media-breakpoint-up(sm) {
136 .dashboard-card {
e4b4b9e7
BB
137 flex-basis: calc(50% - #{$card-gutter});
138 }
4fd6b770
BB
139 }
140 @include media-breakpoint-up(md) {
141 .dashboard-card {
142 flex-basis: calc(33.33% - #{$card-gutter});
e4b4b9e7 143 }
4fd6b770
BB
144 }
145 @include media-breakpoint-up(lg) {
146 .dashboard-card {
147 flex-basis: calc(25% - #{$card-gutter});
e4b4b9e7 148 }
4fd6b770
BB
149 }
150 @include media-breakpoint-up(xl) {
151 .dashboard-card {
152 flex-basis: calc(20% - #{$card-gutter});
153 }
154 }
155}
156
157#region-main.has-blocks {
158 .dashboard-card-deck {
e4b4b9e7 159 @include media-breakpoint-up(lg) {
4fd6b770
BB
160 .dashboard-card {
161 flex-basis: calc(33.33% - #{$card-gutter});
e4b4b9e7
BB
162 }
163 }
164 @include media-breakpoint-up(xl) {
4fd6b770
BB
165 .dashboard-card {
166 flex-basis: calc(25% - #{$card-gutter});
e4b4b9e7 167 }
cab053f7
RW
168 }
169 }
170}
0eb85562 171
4fd6b770
BB
172body.drawer-open-left #region-main.has-blocks {
173 .dashboard-card-deck {
174 @include media-breakpoint-up(lg) {
175 .dashboard-card {
176 flex-basis: calc(33.33% - #{$card-gutter});
177 }
e4b4b9e7 178 }
4fd6b770
BB
179 @media (min-width: 1400px) {
180 .dashboard-card {
181 flex-basis: calc(25% - #{$card-gutter});
182 }
e4b4b9e7 183 }
cbd3c4fe 184 }
7243eef9 185}
57ea73d0 186
4fd6b770
BB
187@media (min-width: 1200px) {
188 #block-region-side-pre {
189 .dashboard-card-deck {
190 margin: 0;
191 .dashboard-card {
192 flex-basis: 100% !important;
193 margin-left: 0;
194 margin-right: 0;
195 }
3cfff885
BB
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}