ode-csslib 4.1.2-develop-b2school.202309151048 → 4.1.2-develop-pedago.202309151148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/version.txt CHANGED
@@ -1 +1 @@
1
- entcore-css-lib=4.1-develop-b2school-SNAPSHOT 15/09/2023 10:48:34
1
+ entcore-css-lib=4.1-develop-pedago-SNAPSHOT 15/09/2023 11:48:52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ode-csslib",
3
- "version": "4.1.2-develop-b2school.202309151048",
3
+ "version": "4.1.2-develop-pedago.202309151148",
4
4
  "description": "Open Digital Education Legacy CSS framework",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,4 +1,4 @@
1
- $shadow-lightest: rgba(0,0,0,0.1);
1
+ $shadow-lightest: rgba(0, 0, 0, 0.1);
2
2
  $blue-ink: #414254;
3
3
  $panda-blue: #3889c1;
4
4
 
@@ -19,7 +19,7 @@ $panda-blue: #3889c1;
19
19
  box-sizing: border-box;
20
20
  }
21
21
  #header {
22
- margin: 10px 20px 20px;
22
+ margin: 10px 20px 20px;
23
23
  }
24
24
  #book_wrapper {
25
25
  display: table;
@@ -47,35 +47,49 @@ $panda-blue: #3889c1;
47
47
  border-top: 7px solid #3889c1;
48
48
  border-bottom: 7px solid #3889c1;
49
49
  }
50
- .backgroundMonday, #monday {
50
+ #backgroundWeek {
51
+ background-color: #3889c1;
52
+ border-top-color: #3889c1 !important;
53
+ border-bottom-color: #3889c1 !important;
54
+ }
55
+ .backgroundMonday,
56
+ #monday {
51
57
  background-color: $green;
52
- border-top-color: $green!important;
53
- border-bottom-color: $green!important;
58
+ border-top-color: $green !important;
59
+ border-bottom-color: $green !important;
60
+ }
61
+ #monday {
62
+ margin-top: 100%;
54
63
  }
55
- .backgroundTuesday, #tuesday {
64
+ .backgroundTuesday,
65
+ #tuesday {
56
66
  background-color: $purple;
57
- border-top-color: $purple!important;
58
- border-bottom-color: $purple!important;
67
+ border-top-color: $purple !important;
68
+ border-bottom-color: $purple !important;
59
69
  }
60
- .backgroundWednesday, #wednesday {
70
+ .backgroundWednesday,
71
+ #wednesday {
61
72
  background-color: $cyan;
62
- border-top-color: $cyan!important;
63
- border-bottom-color: $cyan!important;
73
+ border-top-color: $cyan !important;
74
+ border-bottom-color: $cyan !important;
64
75
  }
65
- .backgroundThursday, #thursday {
76
+ .backgroundThursday,
77
+ #thursday {
66
78
  background-color: $red;
67
- border-top-color: $red!important;
68
- border-bottom-color: $red!important;
79
+ border-top-color: $red !important;
80
+ border-bottom-color: $red !important;
69
81
  }
70
- .backgroundFriday, #friday {
82
+ .backgroundFriday,
83
+ #friday {
71
84
  background-color: $orange;
72
- border-top-color: $orange!important;
73
- border-bottom-color: $orange!important;
85
+ border-top-color: $orange !important;
86
+ border-bottom-color: $orange !important;
74
87
  }
75
- .backgroundSaturday, #saturday {
88
+ .backgroundSaturday,
89
+ #saturday {
76
90
  background-color: $yellow;
77
- border-top-color: $yellow!important;
78
- border-bottom-color: $yellow!important;
91
+ border-top-color: $yellow !important;
92
+ border-bottom-color: $yellow !important;
79
93
  }
80
94
  #topbar {
81
95
  padding-top: 15px;
@@ -99,6 +113,43 @@ $panda-blue: #3889c1;
99
113
  overflow: auto;
100
114
  background: white;
101
115
  }
116
+ #topSide {
117
+ display: flex;
118
+ flex-flow: row-reverse;
119
+ .week {
120
+ width: 150px;
121
+ height: 40px;
122
+ border-radius: 20px 20px 0 0;
123
+ margin-right: 40px;
124
+ font-family: KGJune;
125
+ text-transform: uppercase;
126
+ font-size: 25px;
127
+ .noRotated {
128
+ text-align: center;
129
+ width: 125px;
130
+ height: 40px;
131
+ margin-left: 15px;
132
+ margin-top: 10px;
133
+ }
134
+ a {
135
+ color: black;
136
+ }
137
+ }
138
+ .weekday,
139
+ .week {
140
+ opacity: 0.5;
141
+ -webkit-transition: all 0.25s ease-in-out 0s;
142
+ -o-transition: all 0.25s ease-in-out 0s;
143
+ transition: all 0.25s ease-in-out 0s;
144
+ &:hover,
145
+ &.active {
146
+ opacity: 1;
147
+ -webkit-transition: all 0.25s ease-in-out 0s;
148
+ -o-transition: all 0.25s ease-in-out 0s;
149
+ transition: all 0.25s ease-in-out 0s;
150
+ }
151
+ }
152
+ }
102
153
  #side {
103
154
  display: table-cell;
104
155
  vertical-align: top;
@@ -166,8 +217,7 @@ $panda-blue: #3889c1;
166
217
  height: 650px;
167
218
  width: 100%;
168
219
  position: relative;
169
- & > #redMargin
170
- {
220
+ & > #redMargin {
171
221
  position: absolute;
172
222
  top: 0;
173
223
  bottom: 0;
@@ -175,15 +225,14 @@ $panda-blue: #3889c1;
175
225
  width: 1px;
176
226
  background: #ff000080;
177
227
  }
178
- & > .emptyscreen ~ #redMargin
179
- {
228
+ & > .emptyscreen ~ #redMargin {
180
229
  width: 0;
181
230
  }
182
231
  lightbox p {
183
232
  padding-right: 15px;
184
233
  }
185
234
  .emptyscreen {
186
- margin-top: -40px!important;
235
+ margin-top: -40px !important;
187
236
  }
188
237
  }
189
238
  .homeworksSubject {
@@ -200,10 +249,77 @@ $panda-blue: #3889c1;
200
249
  text-overflow: ellipsis;
201
250
  max-width: 95%; /*http://support.web-education.net/issues/23700#note-46*/
202
251
  }
252
+ .switchContainer {
253
+ display: flex;
254
+ font-size: 15px;
255
+ margin-top: 20px;
256
+ font-weight: normal;
257
+ align-items: center;
258
+ input[type="checkbox"] + span {
259
+ height: 21px;
260
+ }
261
+ .switch {
262
+ position: relative;
263
+ display: inline-block;
264
+ width: 46px;
265
+ height: 24px;
266
+ margin-right: 5px;
267
+ margin-top: 4px;
268
+ input {
269
+ opacity: 0;
270
+ width: 0;
271
+ height: 0;
272
+ }
273
+ .slider {
274
+ position: absolute;
275
+ cursor: pointer;
276
+ top: 0;
277
+ left: 0;
278
+ right: 0;
279
+ bottom: 0;
280
+ background-color: #ccc;
281
+ -webkit-transition: 0.4s;
282
+ transition: 0.4s;
283
+ }
284
+
285
+ .slider:before {
286
+ position: absolute;
287
+ content: "";
288
+ height: 17px;
289
+ width: 17px;
290
+ left: 4px;
291
+ bottom: 1px;
292
+ background-color: white;
293
+ -webkit-transition: 0.4s;
294
+ transition: 0.4s;
295
+ }
296
+
297
+ input:checked + .slider {
298
+ background-color: #2196f3;
299
+ }
300
+
301
+ input:focus + .slider {
302
+ box-shadow: 0 0 1px #2196f3;
303
+ }
304
+
305
+ input:checked + .slider:before {
306
+ -webkit-transform: translateX(20px);
307
+ -ms-transform: translateX(20px);
308
+ transform: translateX(20px);
309
+ }
310
+ .slider.round {
311
+ border-radius: 34px;
312
+ }
313
+
314
+ .slider.round:before {
315
+ border-radius: 50%;
316
+ }
317
+ }
318
+ }
203
319
  }
204
320
  .homeworksDate {
205
- display: table-cell;
206
- width: 65px;
321
+ display: table-cell;
322
+ width: 65px;
207
323
  }
208
324
  .homeworksContent {
209
325
  display: table-cell;
@@ -219,14 +335,14 @@ $panda-blue: #3889c1;
219
335
  audio {
220
336
  height: 40px;
221
337
  }
222
- editor{
338
+ editor {
223
339
  margin: 0;
224
340
  }
225
341
  > popover {
226
342
  display: none !important;
227
343
  }
228
344
  editor-toolbar {
229
- border: 1px solid $shadow-lightest!important;
345
+ border: 1px solid $shadow-lightest !important;
230
346
  .option {
231
347
  height: 50px;
232
348
  min-width: 35px;
@@ -236,10 +352,44 @@ $panda-blue: #3889c1;
236
352
  background: transparent;
237
353
  min-height: 36px !important;
238
354
  padding: 10px;
239
- border: 1px dashed $shadow-lightest!important;
355
+ border: 1px dashed $shadow-lightest !important;
240
356
  margin-top: -1px;
241
357
  }
242
358
  }
359
+ .homeworkModal {
360
+ .homeworkDoTable {
361
+ max-height: 300px;
362
+ overflow-y: scroll;
363
+ margin: 10px 0px 10px 0px;
364
+ #thCenter {
365
+ text-align: center;
366
+ }
367
+ #tdCenter {
368
+ display: flex;
369
+ justify-content: center;
370
+ }
371
+ }
372
+ }
373
+ .homeworkDoContainer {
374
+ font-size: 15px;
375
+ font-weight: initial;
376
+ display: flex;
377
+ }
378
+ .homeworkBadge {
379
+ padding: 1px 7px 1px 7px;
380
+ text-align: center;
381
+ border-radius: 15px;
382
+ margin-left: 8px;
383
+ font-size: 13px;
384
+ width: fit-content;
385
+ border: 2px solid;
386
+ }
387
+ .homeworkBadge.borderRed {
388
+ border-color: $red;
389
+ }
390
+ .homeworkBadge.borderGreen {
391
+ border-color: $green;
392
+ }
243
393
  .homeworksRecurrence {
244
394
  height: 0;
245
395
  .recurrent {
@@ -321,7 +471,7 @@ $panda-blue: #3889c1;
321
471
  }
322
472
  }
323
473
  &:disabled {
324
- opacity: .5;
474
+ opacity: 0.5;
325
475
  }
326
476
  }
327
477
  label {
@@ -390,18 +540,18 @@ $panda-blue: #3889c1;
390
540
  audio {
391
541
  height: 41px;
392
542
  }
393
- editor{
394
- &:first-child{
543
+ editor {
544
+ &:first-child {
395
545
  margin-top: -2px;
396
- }
397
- > popover{
398
- display: none !important;
399
- }
400
- editor-toolbar{
401
- border-right: 1px solid #ddd;
402
- border-top: 0;
403
- border-bottom: 0;
404
- .option{
546
+ }
547
+ > popover {
548
+ display: none !important;
549
+ }
550
+ editor-toolbar {
551
+ border-right: 1px solid #ddd;
552
+ border-top: 0;
553
+ border-bottom: 0;
554
+ .option {
405
555
  height: 50px;
406
556
  }
407
557
  }
@@ -452,7 +602,7 @@ $panda-blue: #3889c1;
452
602
  }
453
603
  [contenteditable] {
454
604
  .image-container {
455
- border: 2px dashed $panda-blue!important;
605
+ border: 2px dashed $panda-blue !important;
456
606
  }
457
607
  }
458
608
  }
@@ -460,8 +610,8 @@ $panda-blue: #3889c1;
460
610
  .weekly-view {
461
611
  #topbar {
462
612
  i {
463
- height: 40px!important;
464
- width: 40px!important;
613
+ height: 40px !important;
614
+ width: 40px !important;
465
615
  }
466
616
  }
467
617
  .homeworksDate {
@@ -483,12 +633,12 @@ $panda-blue: #3889c1;
483
633
  border-right: 1px solid $shadow-lightest;
484
634
  }
485
635
  .homeworksContent {
486
- max-width: inherit!important;
487
- padding: 10px 15px!important;
636
+ max-width: inherit !important;
637
+ padding: 10px 15px !important;
488
638
  }
489
639
  .homeworksItem {
490
640
  &:first-of-type {
491
- border: none!important;
641
+ border: none !important;
492
642
  }
493
643
  & + .homeworksItem {
494
644
  border-top: 1px solid $shadow-lightest;
@@ -546,7 +696,7 @@ $panda-blue: #3889c1;
546
696
  @media screen and (max-width: $tablette) {
547
697
  .homeworks {
548
698
  portal > .container {
549
- min-width: inherit!important;
699
+ min-width: inherit !important;
550
700
  }
551
701
  }
552
702
  .notebook {
@@ -557,7 +707,7 @@ $panda-blue: #3889c1;
557
707
  #book {
558
708
  width: 100%;
559
709
  background-image: none;
560
- background-color: white!important;
710
+ background-color: white !important;
561
711
  border: 1px solid $shadow-lightest;
562
712
  padding-bottom: 0;
563
713
  }
@@ -571,7 +721,7 @@ $panda-blue: #3889c1;
571
721
  max-width: 410px;
572
722
  }
573
723
  i {
574
- height: 30px!important;
724
+ height: 30px !important;
575
725
  }
576
726
  }
577
727
  #content {
@@ -588,7 +738,7 @@ $panda-blue: #3889c1;
588
738
  [contenteditable] {
589
739
  padding-top: 60px;
590
740
  }
591
- }
741
+ }
592
742
  .homeworksLine + .homeworksLine,
593
743
  .homeworksSubject {
594
744
  border: none;
@@ -604,7 +754,7 @@ $panda-blue: #3889c1;
604
754
  width: 50px;
605
755
  }
606
756
  .homeworksSubject {
607
- border-bottom: none!important;
757
+ border-bottom: none !important;
608
758
  }
609
759
  .homeworksLine {
610
760
  .close {
@@ -622,7 +772,7 @@ $panda-blue: #3889c1;
622
772
  .daily-view,
623
773
  .editor {
624
774
  .homeworksLine + .homeworksLine {
625
- border-top: 1px solid $neutral-grey!important;
775
+ border-top: 1px solid $neutral-grey !important;
626
776
  }
627
777
  .homeworksLine {
628
778
  editor.focus {