MDL-58251 block_myoverview: style courses view on clean theme
[moodle.git] / theme / boost / scss / moodle / blocks.scss
CommitLineData
d7fbf722 1.blockmovetarget .accesshide {
536f0460 2 position: relative;
d7fbf722 3 left: initial;
536f0460 4}
270dd871
FM
5
6.block_search_forums .searchform {
7 /* Override plugin's default. */
8 text-align: left;
9}
400274bc
DW
10
11.block.block_navigation .block_tree ul,
12.block_settings .block_tree ul {
13 margin-left: 0;
14}
1149c235
FM
15
16.block .block-controls {
17 .dropdown-toggle {
18 /* So that the caret takes the colour of the icon. */
9d67a408 19 color: $body-color;
1149c235
FM
20 }
21}
99061152 22
0a58ec24 23$blocks-column-width: 250px !default;
99061152 24
0a58ec24
DW
25[data-region="blocks-column"] {
26 width: $blocks-column-width;
27 float: right;
99061152
DW
28}
29
0a58ec24
DW
30$blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
31
11774d90
DW
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}
d8cfd611
DW
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}
4682f17c
DW
53
54// Required for IE11 to prevent blocks being pushed under the content.
55#region-main {
56 float: left;
57 width: 100%;
58}
11774d90 59#region-main-settings-menu.has-blocks,
0a58ec24
DW
60#region-main.has-blocks {
61 display: inline-block;
62 width: calc(100% - #{$blocks-plus-gutter});
63 @include media-breakpoint-down(md) {
64 width: 100%;
99061152
DW
65 }
66}
a0bdffbd
DW
67
68[data-region="blocks-column"] {
69 @include media-breakpoint-down(md) {
70 width: 100%;
71 }
72}
cab053f7 73
ff582ae5 74$chart-size: 70px;
cab053f7 75$doughnut-border-size: 15px;
0a2b761c 76$doughnut-dasharray: 173;
cab053f7
RW
77$doughnut-empty-colour: $gray-lighter;
78$doughnut-fill-colour: $brand-warning;
79
80.progress-chart-container {
81 height: $chart-size;
82 width: $chart-size;
83
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;
92
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;
100
101 &.has-percent {
102 color: $doughnut-fill-colour;
103 }
104 }
105
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;
112
113 svg {
114 position: relative;
115 height: 100%;
116 width: 100%;
117
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;
126
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 }
136
137 .no-progress {
138 height: $chart-size;
139 width: $chart-size;
140 background-color: $doughnut-empty-colour;
141 border-radius: 50%;
142 position: relative;
143
144 .icon {
145 position: absolute;
146 top: 50%;
147 /*rtl:ignore*/
148 left: 50%;
149 margin: 0;
150 transform: translate(-45%, -45%);
151 color: #fff;
152 height: ($chart-size / 2);
153 width: ($chart-size / 2);
154 }
155 }
156}
0eb85562
RW
157
158.block_myoverview {
159 .event-list-item {
160 .event-icon {
161 vertical-align: middle;
162
163 &::before {
164 content: '';
165 display: inline-block;
166 height: 100%;
167 vertical-align: middle;
168 }
169 }
170
171 .event-name-container {
172 vertical-align: middle;
173 max-width: calc(100% - 50px);
174
175 .event-name {
176 display: block;
177 }
178 }
179 }
180}