MDL-63043 core_blocks: Increase the fixed width to 360
[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: 360px !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     }
67 }
69 [data-region="blocks-column"] {
70     @include media-breakpoint-down(lg) {
71         width: 100%;
72     }
73 }
75 $chart-size: 70px;
76 $doughnut-border-size: 15px;
77 $doughnut-dasharray: 173;
78 $doughnut-empty-colour: $gray-lighter;
79 $doughnut-fill-colour: $brand-warning;
81 .progress-chart-container {
82     height: $chart-size;
83     width: $chart-size;
85     .progress-doughnut {
86         position: relative;
87         height: $chart-size;
88         width: $chart-size;
89         background-clip: padding-box;
90         border: $doughnut-border-size solid $doughnut-empty-colour;
91         border-radius: 50%;
92         box-sizing: border-box;
94         .progress-text {
95             position: absolute;
96             top: 50%;
97             /*rtl:ignore*/
98             left: 50%;
99             transform: translate(-50%, -50%);
100             color: $doughnut-empty-colour;
102             &.has-percent {
103                 color: $doughnut-fill-colour;
104             }
105         }
107         .progress-indicator {
108             position: absolute;
109             top: ($doughnut-border-size * -1);
110             left: ($doughnut-border-size * -1);
111             height: $chart-size;
112             width: $chart-size;
114             svg {
115                 position: relative;
116                 height: 100%;
117                 width: 100%;
119                 .circle {
120                     stroke-width: $doughnut-border-size;
121                     stroke: $doughnut-fill-colour;
122                     fill: none;
123                     stroke-dasharray: $doughnut-dasharray;
124                     stroke-dashoffset: $doughnut-dasharray;
125                     transform: rotate(-90deg);
126                     transform-origin: center center;
128                     @for $i from 1 through 100 {
129                         &.percent-#{$i} {
130                             stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
131                         }
132                     }
133                 }
134             }
135         }
136     }
138     .no-progress {
139         height: $chart-size;
140         width: $chart-size;
141         background-color: $doughnut-empty-colour;
142         border-radius: 50%;
143         position: relative;
145         .icon {
146             position: absolute;
147             top: 50%;
148             /*rtl:ignore*/
149             left: 50%;
150             margin: 0;
151             transform: translate(-63%, -50%);
152             color: #fff;
153             height: ($chart-size / 2) + 10px;
154             width: ($chart-size / 2) + 10px;
155             font-size: ($chart-size / 2) + 10px;
156         }
157     }
160 .block_myoverview {
161     .empty-placeholder-image-sm {
162         height: 50px;
163     }
165     .empty-placeholder-image-lg {
166         height: 125px;
167     }
170 .card-deck {
171     .card {
172         $card-gutter : $card-deck-margin * 2;
173         flex-grow: 0;
174         flex-shrink: 0;
175         flex-basis: calc(50% - #{$card-gutter});
176     }
177     .myoverviewimg {
178         height: 150px;
179         &.courseimage {
180             background-position: center;
181             background-size: cover;
182         }
183     }
186 // Show expand collapse with font-awesome.
187 .block_settings .block_tree [aria-expanded="true"],
188 .block_settings .block_tree [aria-expanded="true"].emptybranch,
189 .block_settings .block_tree [aria-expanded="false"],
190 .block_navigation .block_tree [aria-expanded="true"],
191 .block_navigation .block_tree [aria-expanded="true"].emptybranch,
192 .block_navigation .block_tree [aria-expanded="false"] {
193     background-image: none;
195 .block_settings .block_tree [aria-expanded="true"]:before,
196 .block_navigation .block_tree [aria-expanded="true"]:before {
197     content: $fa-var-angle-down;
198     margin-right: 0;
199     font-size: 16px;
200     @extend .fa;
201     width: 16px;
204 .block_settings .block_tree [aria-expanded="false"]:before,
205 .block_navigation .block_tree [aria-expanded="false"]:before {
206     content: $fa-var-angle-right;
207     font-size: 16px;
208     margin-right: 0;
209     @extend .fa;
210     width: 16px;
212 .dir-rtl {
213     .block_settings .block_tree [aria-expanded="false"]:before,
214     .block_navigation .block_tree [aria-expanded="false"]:before {
215         content: $fa-var-angle-left;
216     }
219 .block_navigation .block_tree p.hasicon,
220 .block_settings .block_tree p.hasicon {
221     text-indent: -3px;
223     .icon {
224         margin-right: 2px;
225     }