Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// Embedded icons from Open Iconic.
2
// Released under MIT and copyright 2014 Waybury.
3
// https://useiconic.com/open
4
 
5
 
6
// Checkboxes and radios
7
//
8
// Base class takes care of all the key behavioral aspects.
9
 
10
.custom-control {
11
  position: relative;
12
  z-index: 1;
13
  display: block;
14
  min-width: 30px;
15
  min-height: 16px;
16
  line-height: 21px;
17
  padding-left: 8px;
18
  padding-right: 0;
19
  margin-right: 10px;
20
  print-color-adjust: exact; // Keep themed appearance for print
21
 
22
  // Mod Glossary
23
  .simplesearchform & {
24
    margin: 10px 16px;
25
  }
26
}
27
 
28
.custom-control--xs {
29
  .custom-control-label {
30
    font-size: 0.688rem;
31
    line-height: 2;
32
    color: $body-color-light;
33
 
34
    .theme-dark & {
35
      color: $dm-body-color-light;
36
    }
37
  }
38
}
39
 
40
.custom-control-inline {
41
  display: inline-flex;
42
  margin-right: $custom-control-spacer-x;
43
 
44
  input[type="radio"] {
45
    margin: 0;
46
  }
47
}
48
 
49
.custom-control-input {
50
  position: absolute;
51
  left: 0;
52
  z-index: -1; // Put the input behind the label so it doesn't overlay text
53
  width: $custom-control-indicator-size;
54
  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * 0.5;
55
  opacity: 0;
56
 
57
  &.custom-control-input--xs {
58
    width: 25px;
59
    height: 16px;
60
  }
61
 
62
  &:checked ~ .custom-control-label::before {
63
    color: $custom-control-indicator-checked-color;
64
    border-color: $custom-control-indicator-checked-color;
65
    background-color: rgba($custom-control-indicator-checked-color, .3);
66
    @include box-shadow($custom-control-indicator-checked-box-shadow);
67
  }
68
 
69
  &:focus ~ .custom-control-label::before {
70
    // the mixin is not used here to make sure there is feedback
71
    @if $enable-shadows {
72
      box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
73
    } @else {
74
      box-shadow: $custom-control-indicator-focus-box-shadow;
75
    }
76
  }
77
 
78
  &:focus:not(:checked) ~ .custom-control-label::before {
79
    border-color: $custom-control-indicator-focus-border-color;
80
  }
81
 
82
  &:not(:disabled):active ~ .custom-control-label::before {
83
    color: $custom-control-indicator-active-color;
84
    background-color: $custom-control-indicator-active-bg;
85
    border-color: $custom-control-indicator-active-border-color;
86
    @include box-shadow($custom-control-indicator-active-box-shadow);
87
  }
88
 
89
  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
90
  &[disabled],
91
  &:disabled {
92
    ~ .custom-control-label {
93
      color: $custom-control-label-disabled-color;
94
 
95
      .theme-dark & {
96
        color: $dm-custom-control-label-disabled-color;
97
      }
98
 
99
      &::before {
100
        background-color: $custom-control-indicator-disabled-bg;
101
        border-color: $custom-control-indicator-disabled-bg;
102
 
103
        .theme-dark & {
104
          background-color: $dm-custom-control-indicator-disabled-bg;
105
          border-color: $dm-custom-control-indicator-disabled-bg;
106
        }
107
      }
108
    }
109
  }
110
}
111
 
112
// Custom control indicators
113
//
114
// Build the custom controls out of pseudo-elements.
115
 
116
.custom-control-label {
117
  position: relative;
118
  margin-bottom: 0;
119
  max-width: 280px;
120
  color: $custom-control-label-color;
121
  vertical-align: top;
122
  cursor: $custom-control-cursor;
123
  font-size: $font-size-sm;
124
 
125
  // Background-color and (when enabled) gradient
126
  &::before {
127
    position: absolute;
128
    top: 0;
129
    left: -30px;
130
    display: block;
131
    width: $custom-control-indicator-size;
132
    height: $custom-control-indicator-size;
133
    pointer-events: none;
134
    content: "";
135
    background-color: transparent;
136
    border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
137
    @include box-shadow($custom-control-indicator-box-shadow);
138
 
139
    .theme-dark & {
140
      border-color: $dm-custom-control-indicator-border-color;
141
    }
142
  }
143
 
144
  // Foreground (icon)
145
  &::after {
146
    position: absolute;
147
    top: 0;
148
    left: -30px;
149
    display: block;
150
    width: $custom-control-indicator-size;
151
    height: $custom-control-indicator-size;
152
    content: "";
153
    background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
154
  }
155
}
156
 
157
.custom-switch.custom-control--xs .custom-control-label::after {
158
  width: 8px;
159
  height: 8px;
160
  top: 7px;
161
  left: -28px;
162
}
163
.custom-switch.custom-control--xs .custom-control-label::before {
164
  width: 22px;
165
  height: 16px;
166
  top: 3px;
167
  left: -32px;
168
}
169
 
170
.custom-switch .custom-control-input.custom-control-input--xs:checked ~ .custom-control-label::after {
171
  transform: translateX(6px);
172
}
173
 
174
.dir-rtl .custom-switch .custom-control-input.custom-control-input--xs:checked~.custom-control-label::after {
175
  transform: translateX(-6px);
176
}
177
 
178
.custom-switch.custom-control--xs {
179
  padding-left: 37px;
180
}
181
 
182
// Checkboxes
183
//
184
// Tweak just a few things for checkboxes.
185
 
186
.custom-checkbox {
187
  .custom-control-label::before {
188
    @include border-radius($custom-checkbox-indicator-border-radius);
189
  }
190
 
191
  .custom-control-input:checked ~ .custom-control-label {
192
    &::after {
193
      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
194
    }
195
  }
196
 
197
  .custom-control-input:indeterminate ~ .custom-control-label {
198
    &::before {
199
      border-color: $custom-checkbox-indicator-indeterminate-border-color;
200
      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
201
      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
202
    }
203
    &::after {
204
      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
205
    }
206
  }
207
 
208
  .custom-control-input:disabled {
209
    &:checked ~ .custom-control-label::before {
210
      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
211
 
212
      .theme-dark & {
213
        @include gradient-bg($dm-custom-control-indicator-checked-disabled-bg!important);
214
      }
215
    }
216
    &:indeterminate ~ .custom-control-label::before {
217
      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
218
 
219
      .theme-dark & {
220
        @include gradient-bg($dm-custom-control-indicator-checked-disabled-bg!important);
221
      }
222
    }
223
  }
224
}
225
 
226
// Radios
227
//
228
// Tweak just a few things for radios.
229
 
230
.custom-radio {
231
  margin: 5px 0;
232
 
233
  .custom-control-label::before {
234
    // stylelint-disable-next-line property-disallowed-list
235
    border-radius: $custom-radio-indicator-border-radius;
236
  }
237
 
238
  .custom-control-input:checked ~ .custom-control-label {
239
    &::after {
240
      background-image: escape-svg($custom-radio-indicator-icon-checked);
241
    }
242
  }
243
 
244
  .custom-control-input:disabled {
245
    &:checked ~ .custom-control-label::before {
246
      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
247
 
248
      .theme-dark & {
249
        @include gradient-bg($dm-custom-control-indicator-checked-disabled-bg);
250
      }
251
    }
252
  }
253
}
254
 
255
 
256
// switches
257
//
258
// Tweak a few things for switches
259
 
260
.custom-switch {
261
  padding-left: $custom-switch-width + $custom-control-gutter;
262
 
263
  .custom-control-input {
264
    width: 35px;
265
    height: 20px;
266
  }
267
 
268
  .custom-control-label {
269
    &::before {
270
      left: -($custom-switch-width + $custom-control-gutter);
271
      width: $custom-switch-width;
272
      pointer-events: all;
273
      // stylelint-disable-next-line property-disallowed-list
274
      border-radius: $custom-switch-indicator-border-radius;
275
    }
276
 
277
    &::after {
278
      top: calc(0.125rem + 2px);
279
      left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
280
      width: $custom-switch-indicator-size;
281
      height: $custom-switch-indicator-size;
282
      background-color: $custom-control-indicator-color;
283
      // stylelint-disable-next-line property-disallowed-list
284
      border-radius: $custom-switch-indicator-border-radius - 2px;
285
      @include transition(transform .15s ease-in-out, $custom-forms-transition);
286
    }
287
  }
288
 
289
  .custom-control-input:checked ~ .custom-control-label {
290
    &::after {
291
      background-color: $custom-control-indicator-bg;
292
      transform: translateX($custom-switch-width - $custom-control-indicator-size);
293
 
294
      #admin-closecustomalert &,
295
      #admin-hideforgotpassword &,
296
      #admin-hidecourseindexnav &,
297
      #admin-turnoffdashboardlink &,
298
      #admin-hidedetails &,
299
      [id^="admin-turnoffsidebar"] & {
300
        background-color: #f81212;
301
      }
302
    }
303
    &::before {
304
      background-color: $custom-control-indicator-checked-color;
305
 
306
      #admin-closecustomalert &,
307
      #admin-hideforgotpassword &,
308
      #admin-hidecourseindexnav &,
309
      #admin-turnoffdashboardlink &,
310
      #admin-hidedetails &,
311
      [id^="admin-turnoffsidebar"] & {
312
        background-color: #ffb7b7;
313
        border-color: #ffb7b7;
314
      }
315
    }
316
  }
317
 
318
  .custom-control-input:disabled {
319
    &:checked ~ .custom-control-label::before {
320
      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
321
 
322
      .theme-dark & {
323
        @include gradient-bg($dm-custom-control-indicator-checked-disabled-bg);
324
      }
325
    }
326
 
327
    ~ .custom-control-label::after {
328
      background-color: $custom-control-label-disabled-color;
329
 
330
      .theme-dark & {
331
        background-color: $dm-custom-control-label-disabled-color;
332
      }
333
    }
334
 
335
    &:checked ~ .custom-control-label::after {
336
      background-color: $custom-control-indicator-checked-disabled-color;
337
    }
338
  }
339
 
340
  // Reset styles for feedbkack form
341
  #page-mod-feedback-print &,
342
  #feedback_complete_form & {
343
    width: auto;
344
 
345
    .custom-control-input {
346
      opacity: 1;
347
      z-index: 1;
348
    }
349
 
350
    .custom-control-label::before,
351
    .custom-control-label:after {
352
      display: none;
353
    }
354
  }
355
 
356
}
357
 
358
 
359
// Select
360
//
361
// Replaces the browser default select with a custom one, mostly pulled from
362
// https://primer.github.io/.
363
//
364
 
365
.custom-select,
366
select.quickgrade {
367
  display: inline-block;
368
  width: 100%;
369
  font-family: $custom-select-font-family;
370
  font-weight: $custom-select-font-weight;
371
  line-height: $custom-select-line-height;
372
  color: $custom-select-color;
373
  vertical-align: middle;
374
  background: $custom-select-bg $custom-select-background;
375
  border: $custom-select-border-width solid $custom-select-border-color;
376
  @include border-radius($custom-select-border-radius, 0);
377
  @include box-shadow($custom-select-box-shadow);
378
  appearance: none;
379
 
380
  @include media-breakpoint-up(md) {
381
    max-width: 220px;
382
    height: $custom-select-height;
383
    padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
384
 
385
    @include font-size($custom-select-font-size);
386
  }
387
 
388
  @include media-breakpoint-between(xs, sm) {
389
    padding: 9px 22px 9px 14px;
390
    font-size: $font-size-xs;
391
  }
392
 
393
  .modal .fdate_time_selector & {
394
    height: 36px;
395
    padding-top: 6px;
396
    padding-bottom: 6px;
397
    padding-left: 12px;
398
    padding-right: 22px;
399
 
400
    font-size: $font-size-xs;
401
  }
402
 
403
  .theme-dark & {
404
    color: $dm-custom-select-color;
405
    background: $dm-custom-select-bg $dm-custom-select-background;
406
    border-color: $dm-custom-select-border-color;
407
  }
408
 
409
  &:focus {
410
    border-color: $custom-select-focus-border-color;
411
    outline: 0;
412
    @if $enable-shadows {
413
      @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
414
    } @else {
415
      // Avoid using mixin so we can pass custom focus shadow properly
416
      box-shadow: $custom-select-focus-box-shadow;
417
    }
418
 
419
    &::-ms-value {
420
      // For visual consistency with other platforms/browsers,
421
      // suppress the default white text on blue background highlight given to
422
      // the selected option text when the (still closed) <select> receives focus
423
      // in IE and (under certain conditions) Edge.
424
      // See https://github.com/twbs/bootstrap/issues/19398.
425
      color: $input-color;
426
      background-color: $input-bg;
427
 
428
      .theme-dark & {
429
        color: $dm-input-color;
430
        background-color: $dm-input-bg;
431
      }
432
    }
433
  }
434
 
435
  &[multiple],
436
  &[size]:not([size="1"]) {
437
    height: auto;
438
    padding-right: $custom-select-padding-x;
439
    background-image: none;
440
  }
441
 
442
  &:disabled {
443
    color: $custom-select-disabled-color;
444
    background-color: $custom-select-disabled-bg;
445
 
446
    .theme-dark & {
447
      color: $dm-custom-select-disabled-color;
448
      background-color: $dm-custom-select-disabled-bg;
449
    }
450
  }
451
 
452
  // Hides the default caret in IE11
453
  &::-ms-expand {
454
    display: none;
455
  }
456
 
457
  // Remove outline from select box in FF
458
  &:-moz-focusring {
459
    color: transparent;
460
    text-shadow: 0 0 0 $custom-select-color;
461
  }
462
}
463
 
464
.custom-select-sm {
465
  height: 36px;
466
  padding-top: 5px;
467
  padding-bottom: 5px;
468
  padding-left: 1rem;
469
 
470
  font-size: $font-size-xs;
471
  @include font-size($custom-select-font-size-sm);
472
}
473
 
474
.custom-select-lg {
475
  height: $custom-select-height-lg;
476
  padding-top: $custom-select-padding-y-lg;
477
  padding-bottom: $custom-select-padding-y-lg;
478
  padding-left: $custom-select-padding-x-lg;
479
  @include font-size($custom-select-font-size-lg);
480
}
481
 
482
 
483
// File
484
//
485
// Custom file input.
486
 
487
.custom-file {
488
  position: relative;
489
  display: inline-block;
490
  width: 100%;
491
  height: $custom-file-height;
492
  margin-bottom: 0;
493
}
494
 
495
.custom-file-input {
496
  position: relative;
497
  z-index: 2;
498
  width: 100%;
499
  height: $custom-file-height;
500
  margin: 0;
501
  overflow: hidden;
502
  opacity: 0;
503
 
504
  &:focus ~ .custom-file-label {
505
    border-color: $custom-file-focus-border-color;
506
    box-shadow: $custom-file-focus-box-shadow;
507
 
508
    .theme-dark & {
509
      border-color: $dm-custom-file-focus-border-color;
510
    }
511
  }
512
 
513
  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
514
  &[disabled] ~ .custom-file-label,
515
  &:disabled ~ .custom-file-label {
516
    background-color: $custom-file-disabled-bg;
517
 
518
    .theme-dark & {
519
      background-color: $dm-custom-file-disabled-bg;
520
    }
521
  }
522
 
523
  @each $lang, $value in $custom-file-text {
524
    &:lang(#{$lang}) ~ .custom-file-label::after {
525
      content: $value;
526
    }
527
  }
528
 
529
  ~ .custom-file-label[data-browse]::after {
530
    content: attr(data-browse);
531
  }
532
}
533
 
534
.custom-file-label {
535
  position: absolute;
536
  top: 0;
537
  right: 0;
538
  left: 0;
539
  z-index: 1;
540
  height: $custom-file-height;
541
  padding: $custom-file-padding-y $custom-file-padding-x;
542
  overflow: hidden;
543
  font-family: $custom-file-font-family;
544
  font-weight: $custom-file-font-weight;
545
  line-height: $custom-file-line-height;
546
  color: $custom-file-color;
547
  background-color: $custom-file-bg;
548
  border: $custom-file-border-width solid $custom-file-border-color;
549
  @include border-radius($custom-file-border-radius);
550
  @include box-shadow($custom-file-box-shadow);
551
 
552
  .theme-dark & {
553
    color: $dm-custom-file-color;
554
    background-color: $dm-custom-file-bg;
555
  }
556
 
557
  &::after {
558
    position: absolute;
559
    top: 0;
560
    right: 0;
561
    bottom: 0;
562
    z-index: 3;
563
    display: block;
564
    height: $custom-file-height-inner;
565
    padding: $custom-file-padding-y $custom-file-padding-x;
566
    line-height: $custom-file-line-height;
567
    color: $custom-file-button-color;
568
    content: "Browse";
569
    @include gradient-bg($custom-file-button-bg);
570
    border-left: inherit;
571
    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
572
 
573
    .theme-dark & {color: $dm-custom-file-button-color;}
574
  }
575
}
576
 
577
// Range
578
//
579
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
580
// elements cannot be mixed. As such, there are no shared styles for focus or
581
// active states on prefixed selectors.
582
 
583
.custom-range {
584
  width: 100%;
585
  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
586
  padding: 0; // Need to reset padding
587
  background-color: transparent;
588
  appearance: none;
589
 
590
  &:focus {
591
    outline: 0;
592
 
593
    // Pseudo-elements must be split across multiple rulesets to have an effect.
594
    // No box-shadow() mixin for focus accessibility.
595
    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
596
    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
597
    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
598
  }
599
 
600
  &::-moz-focus-outer {
601
    border: 0;
602
  }
603
 
604
  &::-webkit-slider-thumb {
605
    width: $custom-range-thumb-width;
606
    height: $custom-range-thumb-height;
607
    margin-top: ($custom-range-track-height - $custom-range-thumb-height) * 0.5; // Webkit specific
608
    @include gradient-bg($custom-range-thumb-bg);
609
    border: $custom-range-thumb-border;
610
    @include border-radius($custom-range-thumb-border-radius);
611
    @include box-shadow($custom-range-thumb-box-shadow);
612
    @include transition($custom-forms-transition);
613
    appearance: none;
614
 
615
    &:active {
616
      @include gradient-bg($custom-range-thumb-active-bg);
617
    }
618
  }
619
 
620
  &::-webkit-slider-runnable-track {
621
    width: $custom-range-track-width;
622
    height: $custom-range-track-height;
623
    color: transparent; // Why?
624
    cursor: $custom-range-track-cursor;
625
    background-color: $custom-range-track-bg;
626
    border-color: transparent;
627
    @include border-radius($custom-range-track-border-radius);
628
    @include box-shadow($custom-range-track-box-shadow);
629
 
630
    .theme-dark & {background-color: $dm-custom-range-track-bg;}
631
  }
632
 
633
  &::-moz-range-thumb {
634
    width: $custom-range-thumb-width;
635
    height: $custom-range-thumb-height;
636
    @include gradient-bg($custom-range-thumb-bg);
637
    border: $custom-range-thumb-border;
638
    @include border-radius($custom-range-thumb-border-radius);
639
    @include box-shadow($custom-range-thumb-box-shadow);
640
    @include transition($custom-forms-transition);
641
    appearance: none;
642
 
643
    &:active {
644
      @include gradient-bg($custom-range-thumb-active-bg);
645
    }
646
  }
647
 
648
  &::-moz-range-track {
649
    width: $custom-range-track-width;
650
    height: $custom-range-track-height;
651
    color: transparent;
652
    cursor: $custom-range-track-cursor;
653
    background-color: $custom-range-track-bg;
654
    border-color: transparent; // Firefox specific?
655
    @include border-radius($custom-range-track-border-radius);
656
    @include box-shadow($custom-range-track-box-shadow);
657
 
658
    .theme-dark & {
659
      background-color: $dm-custom-range-track-bg;
660
    }
661
  }
662
 
663
  &::-ms-thumb {
664
    width: $custom-range-thumb-width;
665
    height: $custom-range-thumb-height;
666
    margin-top: 0; // Edge specific
667
    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
668
    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
669
    @include gradient-bg($custom-range-thumb-bg);
670
    border: $custom-range-thumb-border;
671
    @include border-radius($custom-range-thumb-border-radius);
672
    @include box-shadow($custom-range-thumb-box-shadow);
673
    @include transition($custom-forms-transition);
674
    appearance: none;
675
 
676
    &:active {
677
      @include gradient-bg($custom-range-thumb-active-bg);
678
    }
679
  }
680
 
681
  &::-ms-track {
682
    width: $custom-range-track-width;
683
    height: $custom-range-track-height;
684
    color: transparent;
685
    cursor: $custom-range-track-cursor;
686
    background-color: transparent;
687
    border-color: transparent;
688
    border-width: $custom-range-thumb-height * 0.5;
689
    @include box-shadow($custom-range-track-box-shadow);
690
  }
691
 
692
  &::-ms-fill-lower {
693
    background-color: $custom-range-track-bg;
694
    @include border-radius($custom-range-track-border-radius);
695
 
696
    .theme-dark & {background-color: $dm-custom-range-track-bg;}
697
  }
698
 
699
  &::-ms-fill-upper {
700
    margin-right: 15px; // arbitrary?
701
    background-color: $custom-range-track-bg;
702
    @include border-radius($custom-range-track-border-radius);
703
 
704
    .theme-dark & {background-color: $dm-custom-range-track-bg;}
705
  }
706
 
707
  &:disabled {
708
    &::-webkit-slider-thumb {
709
      background-color: $custom-range-thumb-disabled-bg;
710
 
711
      .theme-dark & {background-color: $dm-custom-range-thumb-disabled-bg;}
712
    }
713
 
714
    &::-webkit-slider-runnable-track {
715
      cursor: default;
716
    }
717
 
718
    &::-moz-range-thumb {
719
      background-color: $custom-range-thumb-disabled-bg;
720
 
721
      .theme-dark & {background-color: $dm-custom-range-thumb-disabled-bg;}
722
    }
723
 
724
    &::-moz-range-track {
725
      cursor: default;
726
    }
727
 
728
    &::-ms-thumb {
729
      background-color: $custom-range-thumb-disabled-bg;
730
 
731
      .theme-dark & {background-color: $dm-custom-range-thumb-disabled-bg;}
732
    }
733
  }
734
}
735
 
736
.custom-control-label::before,
737
.custom-file-label,
738
.custom-select {
739
  @include transition($custom-forms-transition);
740
}