MDL-58303 theme_boost: change dashboard block breakpoint to xl
[moodle.git] / theme / boost / scss / moodle / blocks.scss
1 .blockmovetarget .accesshide {
2     position: relative;
3     left: initial;
4 }
6 .block_search_forums .searchform {
7     /* Override plugin's default. */
8     text-align: left;
9 }
11 .block.block_navigation .block_tree ul,
12 .block_settings .block_tree ul {
13     margin-left: 0;
14 }
16 .block .block-controls {
17     .dropdown-toggle {
18         /* So that the caret takes the colour of the icon. */
19         color: $body-color;
20     }
21 }
23 $blocks-column-width: 250px !default;
25 [data-region="blocks-column"] {
26     width: $blocks-column-width;
27     float: right;
28 }
30 $blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
32 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
33 #region-main-settings-menu {
34     position: relative;
35     float: left;
36     width: 100%;
37 }
38 #region-main-settings-menu > div {
39     position: absolute;
40     right: 0;
41     z-index: 100;
42     margin: 1rem;
43 }
44 .region_main_settings_menu_proxy {
45     width: 4rem;
46     height: 2rem;
47     background-color: $card-bg;
48     margin-left: $card-spacer-x / 2;
49     margin-bottom: $card-spacer-x / 2;
50     border-bottom-left-radius: 0.5rem;
51     float: right;
52 }
54 // Required for IE11 to prevent blocks being pushed under the content.
55 #region-main {
56     float: left;
57     width: 100%;
58 }
59 #region-main-settings-menu.has-blocks,
60 #region-main.has-blocks {
61     display: inline-block;
62     width: calc(100% - #{$blocks-plus-gutter});
63     @include media-breakpoint-down(lg) {
64         width: 100%;
65     }
66 }
68 [data-region="blocks-column"] {
69     @include media-breakpoint-down(lg) {
70         width: 100%;
71     }
72 }
74 $chart-size: 70px;
75 $doughnut-border-size: 15px;
76 $doughnut-dasharray: 173;
77 $doughnut-empty-colour: $gray-lighter;
78 $doughnut-fill-colour: $brand-warning;
80 .progress-chart-container {
81     height: $chart-size;
82     width: $chart-size;
84     .progress-doughnut {
85         position: relative;
86         height: $chart-size;
87         width: $chart-size;
88         background-clip: padding-box;
89         border: $doughnut-border-size solid $doughnut-empty-colour;
90         border-radius: 50%;
91         box-sizing: border-box;
93         .progress-text {
94             position: absolute;
95             top: 50%;
96             /*rtl:ignore*/
97             left: 50%;
98             transform: translate(-50%, -50%);
99             color: $doughnut-empty-colour;
101             &.has-percent {
102                 color: $doughnut-fill-colour;
103             }
104         }
106         .progress-indicator {
107             position: absolute;
108             top: ($doughnut-border-size * -1);
109             left: ($doughnut-border-size * -1);
110             height: $chart-size;
111             width: $chart-size;
113             svg {
114                 position: relative;
115                 height: 100%;
116                 width: 100%;
118                 .circle {
119                     stroke-width: $doughnut-border-size;
120                     stroke: $doughnut-fill-colour;
121                     fill: none;
122                     stroke-dasharray: $doughnut-dasharray;
123                     stroke-dashoffset: $doughnut-dasharray;
124                     transform: rotate(-90deg);
125                     transform-origin: center center;
127                     @for $i from 1 through 100 {
128                         &.percent-#{$i} {
129                             stroke-dashoffset: $doughnut-dasharray - ($i / 100 * $doughnut-dasharray);
130                         }
131                     }
132                 }
133             }
134         }
135     }
137     .no-progress {
138         height: $chart-size;
139         width: $chart-size;
140         background-color: $doughnut-empty-colour;
141         border-radius: 50%;
142         position: relative;
144         .icon {
145             position: absolute;
146             top: 50%;
147             /*rtl:ignore*/
148             left: 50%;
149             margin: 0;
150             transform: translate(-48%, -50%);
151             color: #fff;
152             height: ($chart-size / 2) + 10px;
153             width: ($chart-size / 2) + 10px;
154             font-size: ($chart-size / 2) + 10px;
155         }
156     }
159 .block_myoverview {
160     .event-list-item {
161         .event-icon {
162             vertical-align: middle;
164             &::before {
165                 content: '';
166                 display: inline-block;
167                 height: 100%;
168                 vertical-align: middle;
169             }
170         }
172         .event-name-container {
173             vertical-align: middle;
174             max-width: calc(100% - 50px);
176             .event-name {
177                 display: block;
178             }
179         }
180     }
182     .empty-placeholder-image-sm {
183         height: 70px;
184         width: 85px;
185     }
187     .empty-placeholder-image-lg {
188         height: 125px;
189         width: 145px;
190     }
192     .courses-view-course-item {
193         height: 220px;
194         overflow-y: hidden;
195     }