Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// The dropdown wrapper (`<div>`)
2
.dropup,
3
.dropright,
4
.dropdown,
5
.dropleft {
6
  position: relative;
7
}
8
 
9
.dropdown-toggle {
10
  white-space: nowrap;
11
 
12
  // Generate the caret automatically
13
  @include caret();
14
}
15
 
16
.tertiary-navigation .tertiary-navigation-selector .dropdown-toggle::after {
17
  margin-left: 2px;
18
  border-top: 5px solid;
19
  border-right: 5px solid transparent;
20
  border-left: 5px solid transparent;
21
}
22
 
23
// The dropdown menu
24
.dropdown-menu {
25
  position: absolute;
26
  top: 100%;
27
  left: 0;
28
  right: auto;
29
  max-width: 280px;
30
  z-index: $zindex-fixed + 200;
31
  display: none; // none by default, but block on "open" of the menu
32
  float: left;
33
  min-width: $dropdown-min-width;
34
  padding: $dropdown-padding-y $dropdown-padding-x;
35
  margin: $dropdown-spacer 0 0; // override default ul
36
  @include font-size($dropdown-font-size);
37
  color: $dropdown-color;
38
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
39
  list-style: none;
40
  background-color: $dropdown-bg;
41
  background-clip: padding-box;
42
  @include border-radius($dropdown-border-radius);
43
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11);
44
 
45
  .rui-course-card & {
46
    max-width: 195px;
47
  }
48
 
49
  .border-top, .border-bottom {
50
    border-color: $dropdown-border-color!important;
51
  }
52
 
53
  .block-controls & {
54
    padding: 5px;
55
    margin: 2px;
56
  }
57
 
58
  .theme-dark & {
59
    color: $dm-dropdown-color;
60
    background-color: $dm-dropdown-bg;
61
    border: 1px solid $dm-border-color;
62
  }
63
 
64
  li {
65
    margin-bottom: .35rem;
66
 
67
    &:last-of-type {
68
      margin-bottom: 0;
69
    }
70
  }
71
}
72
 
73
@each $breakpoint in map-keys($grid-breakpoints) {
74
  @include media-breakpoint-up($breakpoint) {
75
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
76
 
77
    .dropdown-menu#{$infix}-left {
78
      right: auto;
79
      left: 0;
80
    }
81
 
82
    .dropdown-menu#{$infix}-right {
83
      right: 0;
84
      left: auto;
85
    }
86
  }
87
}
88
 
89
// Allow for dropdowns to go bottom up (aka, dropup-menu)
90
// Just add .dropup after the standard .dropdown class and you're set.
91
.dropup {
92
  .dropdown-menu {
93
    top: auto;
94
    bottom: 100%;
95
    margin-top: 0;
96
    margin-bottom: $dropdown-spacer;
97
  }
98
 
99
  .dropdown-toggle {
100
    @include caret(up);
101
  }
102
}
103
 
104
.dropright {
105
  .dropdown-menu {
106
    top: 0;
107
    right: auto;
108
    left: 100%;
109
    margin-top: 0;
110
    margin-left: $dropdown-spacer;
111
  }
112
 
113
  .dropdown-toggle {
114
    @include caret(right);
115
 
116
    &::after {
117
      vertical-align: 0;
118
    }
119
  }
120
}
121
 
122
.dropleft {
123
  .dropdown-menu {
124
    top: 0;
125
    right: 100%;
126
    left: auto;
127
    margin-top: 0;
128
    margin-right: $dropdown-spacer;
129
  }
130
 
131
  .dropdown-toggle {
132
    @include caret(left);
133
 
134
    &::before {
135
      vertical-align: 0;
136
    }
137
  }
138
}
139
 
140
// When enabled Popper.js, reset basic dropdown position
141
// stylelint-disable-next-line no-duplicate-selectors
142
.dropdown-menu {
143
  &[x-placement^="top"],
144
  &[x-placement^="right"],
145
  &[x-placement^="bottom"],
146
  &[x-placement^="left"] {
147
    right: auto;
148
    bottom: auto;
149
  }
150
}
151
 
152
// Dividers (basically an `<hr>`) within the dropdown
153
.dropdown-divider {
154
  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
155
 
156
  .theme-dark & {
157
    @include nav-divider($dm-dropdown-divider-bg, $dropdown-divider-margin-y, true);
158
  }
159
 
160
  &+.dropdown-divider {
161
    display: none;
162
  }
163
}
164
 
165
// Links, buttons, and more within the dropdown menu
166
//
167
// `<button>`-specific styles are denoted with `// For <button>s`
168
input.dropdown-item {
169
  background-color: transparent;
170
}
171
 
172
.dropdown-menu a,
173
.dropdown-menu .dropdown-item {
174
  display: flex;
175
  align-items: center;
176
  width: 100%;
177
  max-width: 290px;
178
 
179
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
180
  margin-bottom: 2px;
181
  clear: both;
182
 
183
  font-size: $font-size-xs;
184
  font-weight: $font-weight-medium;
185
  color: $dropdown-color;
186
 
187
  text-align: inherit; // For `<button>`s
188
  text-decoration: none!important;
189
  /*word-break: normal;
190
  white-space: break-spaces;*/
191
 
192
  white-space: normal;
193
 
194
  border: 0; // For `<button>`s
195
  border-radius: $dropdown-border-radius - 2px;
196
 
197
  background-color: transparent;
198
  background-blend-mode:hard-light;
199
 
1441 ariadna 200
  // Delete item.
201
  &.text-danger {
202
    background-color: #3c1b1b;
203
  }
204
 
205
  &:hover.text-danger {
206
    color: $red-100!important;
207
  }
208
  // End.
209
 
1 efrain 210
  // Edwiser Report Plugin
211
  input[type="text"] {
212
    color: $dropdown-color;
213
 
214
    .theme-dark & {
215
      color: $dm-dropdown-color;
216
    }
217
  }
218
 
219
  &:after {
220
    display: none;
221
  }
222
 
223
  &:last-child {
224
    margin-bottom: 0;
225
  }
226
 
227
  &[disabled=disabled] {
228
    opacity: .5;
229
    background-color: $dropdown-link-hover-bg;
230
  }
231
 
232
  .rui-course-card & {
233
    min-width: 180px;
234
  }
235
 
236
  .theme-dark & {
237
    color: $dm-dropdown-color;
238
  }
239
 
240
  &.ml-4 {
241
    width: calc(100% - 1.875rem);
242
  }
243
 
244
  &:not(.hidden) {
245
    display: flex;
246
  }
247
 
248
  .icon {
249
    margin-right: 7px;
250
    width: 16px;
251
    height: 16px;
1441 ariadna 252
    font-size: 12px;
1 efrain 253
    line-height: 1.3;
1441 ariadna 254
    color: inherit!important;
1 efrain 255
    opacity: .6;
1441 ariadna 256
    background-color: transparent!important;
1 efrain 257
  }
258
 
259
  img.icon {
260
    filter: invert(1);
261
  }
262
 
263
  .rui-icon {
264
    line-height: 1;
265
  }
266
 
267
  // Prevent dropdown overflow if there's no padding
268
  // See https://github.com/twbs/bootstrap/pull/27703
269
  @if $dropdown-padding-y==0 {
270
    &:first-child {
271
      @include border-top-radius($dropdown-inner-border-radius);
272
    }
273
 
274
    &:last-child {
275
      @include border-bottom-radius($dropdown-inner-border-radius);
276
    }
277
  }
278
 
279
  &.hidden {
280
    display: none;
281
  }
282
 
283
  &.active,
284
  &:hover {
285
    color: $dropdown-link-hover-color;
286
    text-decoration: none;
287
    background-color: $dropdown-link-hover-bg;
288
 
289
    .theme-dark & {
290
      color: $dm-dropdown-link-hover-color;
291
      background-color: $dm-dropdown-link-hover-bg;
292
    }
293
 
294
  }
295
 
296
  &.active,
297
  &:active {
298
    a {
299
      color: $dropdown-link-active-color;
300
      text-decoration: none;
301
      @include gradient-bg($dropdown-link-active-bg);
302
    }
303
 
1441 ariadna 304
    img.icon {
1 efrain 305
      filter: invert(1);
306
    }
307
  }
308
 
309
  &:after {
310
    display: none;
311
  }
312
 
313
  &[aria-current="true"] {
314
    position: relative;
315
    display: flex;
316
    align-items: center;
317
 
318
    color: $dropdown-link-active-color;
319
    text-decoration: none;
320
    @include gradient-bg($dropdown-link-active-bg);
321
 
322
    margin-bottom: .15rem;
323
 
324
    .theme-dark & {
325
      color: $dm-dropdown-link-active-color;
326
      @include gradient-bg($dm-dropdown-link-active-bg);
327
    }
328
  }
329
 
330
  &.disabled,
331
  &:disabled {
332
    a {
333
      opacity: .5;
334
      color: $dropdown-link-disabled-color;
335
      pointer-events: none;
336
      background-color: transparent;
337
 
338
      // Remove CSS gradients if they're enabled
339
      @if $enable-gradients {
340
        background-image: none;
341
      }
342
 
343
      .theme-dark & {
344
        color: $dm-dropdown-link-disabled-color;
345
      }
346
    }
347
  }
348
 
349
}
350
 
351
//Atto Editor mod
352
.dropdown-menu .atto_menuentry {
353
  a {
354
    display: block;
355
    width: 100%; // For `<button>`s
356
 
357
    margin-bottom: 0.25rem;
358
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
359
    clear: both;
360
 
361
    font-size: $font-size-md;
362
    font-weight: $font-weight-medium;
363
    color: $dropdown-color;
364
 
365
    text-align: inherit; // For `<button>`s
366
    text-decoration: if($link-decoration==none, null, none);
367
    white-space: nowrap; // prevent links from randomly breaking onto new lines
368
 
369
    border: 0; // For `<button>`s
370
    border-radius: $btn-border-radius;
371
 
372
    .theme-dark & {
373
      color: $dm-dropdown-color;
374
    }
375
 
376
    &:hover {
377
      color: $dropdown-link-hover-color;
378
      text-decoration: none;
379
      background-color: $dropdown-link-hover-bg;
380
 
381
      .theme-dark & {
382
        color: $dm-dropdown-link-hover-color;
383
        background-color: $dm-dropdown-link-hover-bg;
384
      }
385
    }
386
  }
387
 
388
}
389
 
390
.dropdown-menu.show {
391
  display: block;
392
  min-height: max-content;
393
  width: max-content;
394
  max-width: 300px;
395
}
396
 
397
.dir-rtl .usermenu {
398
  .dropdown-menu.show {
399
    display: block;
400
    left: 30px!important;
401
  }
402
}
403
 
404
// Dropdown section headers
405
.dropdown-header {
406
  display: block;
407
  padding: .35rem 1rem;
408
  margin: 0 -5px 5px; // for use with heading elements
409
  @include font-size($font-size-xs);
410
  font-weight: $font-weight-medium;
411
  color: $dropdown-header-color;
412
  white-space: nowrap; // as with > li > a
413
 
414
  border-bottom: 1px solid $dropdown-border-color;
415
 
416
  .theme-dark & {
417
    color: $dm-dropdown-header-color;
418
    border-bottom: 1px solid $dm-dropdown-border-color;
419
  }
420
}
421
 
422
// Dropdown text
423
.dropdown {
424
  .dropdown-item-text {
425
    max-width: calc(100% - 30px);
426
    @extend .text-truncate;
427
  }
428
 
429
}
430
 
431
 
432
 
433
// Action menu trigger - settings button
434
.dropdown-btn {
435
 
436
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
437
  font-weight: $font-weight-medium;
438
  color: $body-color;
439
 
440
  @include transition($btn-transition);
441
 
442
  .action-menu-trigger &,
443
  #category-listing & {
1441 ariadna 444
    padding: 5px 12px;
1 efrain 445
 
446
    &:after {
447
      display: none;
448
    }
449
  }
450
 
451
  .theme-dark & {
452
    color: $dm-gray-900;
453
  }
454
 
455
  .main-nav-container & {
456
    background-color: transparent;
457
    color: $body-color-secondary;
458
 
459
    .theme-dark & {
460
      background-color: transparent;
461
      color: $dm-body-color-secondary;
462
    }
463
  }
464
 
465
  &:hover {
466
    background-color: $gray-100;
467
    color: $body-color;
468
    text-decoration: none;
469
 
470
    .theme-dark & {
471
      background-color: $dm-gray-300;
472
      color: $dm-body-color;
473
    }
474
  }
475
 
476
  .icon {
477
    margin: 0;
478
    width: 24px;
479
    height: 24px;
480
    line-height: 24px;
481
 
482
    #course-category-listings & {
483
      display: inline-flex;
484
      align-items: center;
485
 
486
      width: 16px;
487
      height: 16px;
488
    }
489
  }
490
}
491
 
492
// The dropdown menu
493
.dropdown-user {
494
  width: 300px;
495
  max-width: 300px;
496
 
497
  margin: 0;
498
  display: flex;
499
  align-items: center;
500
  justify-content: center;
501
  flex-wrap: wrap;
502
 
503
  font-size: 1rem; //16px
504
  font-weight: $font-weight-medium;
505
  color: $dropdown-text;
506
 
507
  .theme-dark & {
508
    color: $dm-dropdown-text;
509
  }
510
 
511
  .meta.viewingas,
512
  .meta.role {
513
    position: relative;
514
    display: block;
515
    background-color: $green-200;
516
    padding: 9px 14px;
517
    margin: 5px 0 0;
518
 
519
    border-radius: $btn-border-radius;
520
 
521
    font-size: $font-size-xs;
522
    line-height: 1.3;
523
    color: $green-800;
524
    text-align: center;
525
  }
526
}
527
 
528
// .meta.loginfailures {
529
//   padding: 3px 8px;
530
//   background-color: $yellow-100;
531
//   border-radius: $btn-border-radius;
532
 
533
//   font-size: $font-size-xs;
534
//   white-space: normal;
535
//   line-height: 1.3;
536
//   color: $yellow-800;
537
// }
538
 
539
.dropdown-user-meta:not(:empty) {
540
  margin: 5px 0 0;
541
  white-space: normal;
542
 
543
  .badge-xs:empty {
544
    display: none;
545
  }
546
}
547
 
548
.dropdown-user-nick {
549
  margin: 15px 0 5px;
550
  white-space: normal;
551
  font-size: $font-size-xs;
552
  line-height: 1;
553
  color: rgba($dropdown-text, .8);
554
}
555
 
556
.dropdown-user-mail {
557
  display: block;
558
  width: 100%;
559
 
560
  font-size: 0.75rem;
561
  font-weight: $font-weight-normal;
562
  color: rgba($dropdown-text, .8);
563
 
564
  .theme-dark & {
565
    color: rgba($dm-dropdown-text, .8);
566
  }
567
}
568
 
569
.dropdown-user-wrapper {
570
  padding: 10px 12px;
571
  display: flex;
572
  flex-wrap: wrap;
573
}
574
 
575
.rui-fullname {
576
  width: 100%;
577
  font-size: $font-size-sm;
578
  white-space: normal;
579
  word-break: break-all;
580
}
581
 
582
.dropdown-item.aabtn.menu-action {
583
  .dropdown-item--text {
584
    display: none;
585
  }
586
}
587
 
588
.dropdown-item--text {
589
  max-width: 200px;
590
}
591
 
592
// Tool Lp Competencies
593
.dropdown {
594
  .tool-lp-menu-item {
595
    padding: 0;
596
 
597
    a {
598
      width: 100%;
599
      min-width: 200px;
600
      font-weight: $font-weight-medium;
601
      color: $dropdown-text;
602
 
603
      &:hover {
604
        text-decoration: none;
605
      }
606
 
607
      .icon {
608
        padding: 0;
609
      }
610
    }
611
  }
612
}
613
 
614
.dropdown-menu,
615
.collapsecolumndropdown {
616
  .text-muted {
617
    color: $dm-body-color-light;
618
  }
619
}
620
 
621
 
622
// Moodle 4.3
623
.choicelist {
624
  flex-wrap: wrap;
625
}
626
 
627
.option-selected-bg {
628
  background-color: $dropdown-link-active-bg;
629
 
630
  .theme-dark & {
631
    background-color: $dm-dropdown-link-active-bg;
632
  }
633
}
634
 
635
.option-description {
636
  color: rgba($dropdown-text, .8);
637
 
638
  .theme-dark & {
639
    color: rgba($dm-dropdown-text, .8);
640
  }
641
}
642
 
643
.dropdown-item.editing_delete {
644
  background-color: #4c2623;
645
 
646
  span {
647
    color: #ff887f!important;
648
  }
649
 
650
  &:hover {
651
    background-color: #5d2b28!important;
652
  }
653
 
654
  .icon {
655
    color: #ff887f;
656
    opacity: 1;
657
  }
658
 
659
  img {
660
    mix-blend-mode: plus-lighter;
661
  }
662
 
663
}
664
 
665
.groupmode-icon-info {
666
  font-size: $font-size-xs;
667
}
668
 
669
.gradesearchdropdown {
670
  .w-100.p-3 {
671
    padding: $dropdown-padding-x $dropdown-padding-y!important;
672
  }
673
}