MDL-63102 core_block: Reduced spacing between blocks
[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
ff582ae5 78$chart-size: 70px;
cab053f7 79$doughnut-border-size: 15px;
0a2b761c 80$doughnut-dasharray: 173;
cab053f7
RW
81$doughnut-empty-colour: $gray-lighter;
82$doughnut-fill-colour: $brand-warning;
83
84.progress-chart-container {
85 height: $chart-size;
86 width: $chart-size;
87
88 .progress-doughnut {
89 position: relative;
90 height: $chart-size;
91 width: $chart-size;
92 background-clip: padding-box;
93 border: $doughnut-border-size solid $doughnut-empty-colour;
94 border-radius: 50%;
95 box-sizing: border-box;
96
97 .progress-text {
98 position: absolute;
99 top: 50%;
100 /*rtl:ignore*/
101 left: 50%;
102 transform: translate(-50%, -50%);
103 color: $doughnut-empty-colour;
104
105 &.has-percent {
106 color: $doughnut-fill-colour;
107 }
108 }
109
110 .progress-indicator {
111 position: absolute;
112 top: ($doughnut-border-size * -1);
113 left: ($doughnut-border-size * -1);
114 height: $chart-size;
115 width: $chart-size;
116
117 svg {
118 position: relative;
119 height: 100%;
120 width: 100%;
121
122 .circle {
123 stroke-width: $doughnut-border-size;
124 stroke: $doughnut-fill-colour;
125 fill: none;
126 stroke-dasharray: $doughnut-dasharray;
127 stroke-dashoffset: $doughnut-dasharray;
128 transform: rotate(-90deg);
129 transform-origin: center center;
130
131 @for $i from 1 through 100 {
132 &.percent-#{$i} {
133 stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
134 }
135 }
136 }
137 }
138 }
139 }
140
141 .no-progress {
142 height: $chart-size;
143 width: $chart-size;
144 background-color: $doughnut-empty-colour;
145 border-radius: 50%;
146 position: relative;
147
148 .icon {
149 position: absolute;
150 top: 50%;
151 /*rtl:ignore*/
152 left: 50%;
153 margin: 0;
3dee4ca6 154 transform: translate(-63%, -50%);
cab053f7 155 color: #fff;
80a1ea55
RW
156 height: ($chart-size / 2) + 10px;
157 width: ($chart-size / 2) + 10px;
158 font-size: ($chart-size / 2) + 10px;
cab053f7
RW
159 }
160 }
161}
0eb85562
RW
162
163.block_myoverview {
cbd3c4fe 164 .empty-placeholder-image-sm {
2104e7a5 165 height: 50px;
cbd3c4fe
RW
166 }
167
168 .empty-placeholder-image-lg {
169 height: 125px;
cbd3c4fe 170 }
7243eef9 171}
57ea73d0 172
c8cc25ca
BB
173.card-deck {
174 .card {
175 $card-gutter : $card-deck-margin * 2;
176 flex-grow: 0;
177 flex-shrink: 0;
178 flex-basis: calc(50% - #{$card-gutter});
179 }
180 .myoverviewimg {
181 height: 150px;
182 &.courseimage {
183 background-position: center;
184 background-size: cover;
185 }
186 }
187}
188
57ea73d0
DW
189// Show expand collapse with font-awesome.
190.block_settings .block_tree [aria-expanded="true"],
191.block_settings .block_tree [aria-expanded="true"].emptybranch,
192.block_settings .block_tree [aria-expanded="false"],
193.block_navigation .block_tree [aria-expanded="true"],
194.block_navigation .block_tree [aria-expanded="true"].emptybranch,
195.block_navigation .block_tree [aria-expanded="false"] {
196 background-image: none;
197}
198.block_settings .block_tree [aria-expanded="true"]:before,
199.block_navigation .block_tree [aria-expanded="true"]:before {
200 content: $fa-var-angle-down;
201 margin-right: 0;
202 font-size: 16px;
203 @extend .fa;
204 width: 16px;
205}
206
207.block_settings .block_tree [aria-expanded="false"]:before,
208.block_navigation .block_tree [aria-expanded="false"]:before {
209 content: $fa-var-angle-right;
210 font-size: 16px;
211 margin-right: 0;
212 @extend .fa;
213 width: 16px;
214}
215.dir-rtl {
216 .block_settings .block_tree [aria-expanded="false"]:before,
217 .block_navigation .block_tree [aria-expanded="false"]:before {
218 content: $fa-var-angle-left;
219 }
220}
221
222.block_navigation .block_tree p.hasicon,
223.block_settings .block_tree p.hasicon {
224 text-indent: -3px;
225
226 .icon {
227 margin-right: 2px;
228 }
229}