MDL-63102 core_block: Reduced spacing between blocks
[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 $chart-size: 70px;
79 $doughnut-border-size: 15px;
80 $doughnut-dasharray: 173;
81 $doughnut-empty-colour: $gray-lighter;
82 $doughnut-fill-colour: $brand-warning;
84 .progress-chart-container {
85     height: $chart-size;
86     width: $chart-size;
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;
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;
105             &.has-percent {
106                 color: $doughnut-fill-colour;
107             }
108         }
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;
117             svg {
118                 position: relative;
119                 height: 100%;
120                 width: 100%;
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;
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     }
141     .no-progress {
142         height: $chart-size;
143         width: $chart-size;
144         background-color: $doughnut-empty-colour;
145         border-radius: 50%;
146         position: relative;
148         .icon {
149             position: absolute;
150             top: 50%;
151             /*rtl:ignore*/
152             left: 50%;
153             margin: 0;
154             transform: translate(-63%, -50%);
155             color: #fff;
156             height: ($chart-size / 2) + 10px;
157             width: ($chart-size / 2) + 10px;
158             font-size: ($chart-size / 2) + 10px;
159         }
160     }
163 .block_myoverview {
164     .empty-placeholder-image-sm {
165         height: 50px;
166     }
168     .empty-placeholder-image-lg {
169         height: 125px;
170     }
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     }
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;
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;
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;
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     }
222 .block_navigation .block_tree p.hasicon,
223 .block_settings .block_tree p.hasicon {
224     text-indent: -3px;
226     .icon {
227         margin-right: 2px;
228     }