Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2
 
3
// Reboot
4
//
5
// Normalization of HTML elements, manually forked from Normalize.css to remove
6
// styles targeting irrelevant browsers while applying new styles.
7
//
8
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
9
 
10
 
11
// Document
12
//
13
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14
// 2. Change the default font family in all browsers.
15
// 3. Correct the line height in all browsers.
16
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17
// 5. Change the default tap highlight to be completely transparent in iOS.
18
 
19
*,
20
*::before,
21
*::after {
22
  box-sizing: border-box; // 1
23
}
24
 
25
html {
26
  font-family: sans-serif; // 2
27
  line-height: 1.15; // 3
28
  text-size-adjust: 100%; // 4
29
  -webkit-text-size-adjust: 100%; // 4
30
  -webkit-tap-highlight-color: rgba($black, 0); // 5
31
}
32
 
33
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
34
// stylelint-disable-next-line selector-list-comma-newline-after
35
article,
36
aside,
37
figcaption,
38
figure,
39
footer,
40
header,
41
hgroup,
42
main,
43
nav,
44
section {
45
  display: block;
46
}
47
 
48
// Body
49
//
50
// 1. Remove the margin in all browsers.
51
// 2. As a best practice, apply a default `background-color`.
52
// 3. Set an explicit initial text-align value so that we can later use
53
//    the `inherit` value on things like `<th>` elements.
54
 
55
body:not(#tinymce) {
56
  margin: 0; // 1
57
  font-family: $font-family-base;
58
  @include font-size($font-size-base);
59
  font-weight: $font-weight-base;
60
  line-height: $line-height-base;
61
  color: $body-color;
62
  text-align: left; // 3
63
  background-color: $body-bg; // 2
64
 
65
  @include media-breakpoint-between(xs, sm) {
66
    font-size: 14px;
67
  }
68
 
69
  &.pagelayout-maintenance,
70
  &.path-login {
71
    background: var(--topbar-color);
72
    background: linear-gradient(90deg, var(--topbar-color) 0%, rgba($container-bg,1) 60%);
73
  }
74
 
75
  &.pagelayout-maintenance.theme-dark,
76
  &.path-login.theme-dark {
77
    background-color: $body-bg;
78
    color: $dm-body-color;
79
  }
80
 
81
  &.theme-dark {
82
    background-color: $dm-body-bg;
83
    color: $dm-body-color;
84
  }
85
 
86
}
87
 
88
#page-admin-reportbuilder-edit {
89
  background: $container-bg!important;
90
}
91
 
92
.theme-dark#page-admin-reportbuilder-edit {
93
  background: $dm-container-bg!important;
94
}
95
 
96
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
97
// on elements that programmatically receive focus but wouldn't normally show a visible
98
// focus outline. In general, this would mean that the outline is only applied if the
99
// interaction that led to the element receiving programmatic focus was a keyboard interaction,
100
// or the browser has somehow determined that the user is primarily a keyboard user and/or
101
// wants focus outlines to always be presented.
102
//
103
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
104
// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
105
[tabindex="-1"]:focus:not(:focus-visible) {
106
  outline-offset: 2px;
107
}
108
 
109
 
110
// Content grouping
111
//
112
// 1. Add the correct box sizing in Firefox.
113
// 2. Show the overflow in Edge and IE.
114
 
115
hr {
116
  box-sizing: content-box; // 1
117
  height: 0; // 1
118
  overflow: visible; // 2
119
}
120
 
121
.hr-xsmall {
122
  width: 30px;
123
  margin-left: auto;
124
  margin-right: auto;
125
}
126
 
127
.hr-small {
128
  width: 30px;
129
  margin: 30px auto;
130
}
131
 
132
 
133
//
134
// Typography
135
//
136
 
137
// Remove top margins from headings
138
//
139
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
140
// margin for easier control within type scales as it avoids margin collapsing.
141
// stylelint-disable-next-line selector-list-comma-newline-after
142
h1,
143
h2,
144
h3,
145
h4,
146
h5,
147
h6 {
148
  margin-top: 0;
149
  margin-bottom: $headings-margin-bottom;
150
}
151
 
152
// Reset margins on paragraphs
153
//
154
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
155
// bottom margin to use `rem` units instead of `em`.
156
p {
157
  margin-top: 0;
158
  margin-bottom: $paragraph-margin-bottom;
159
 
160
  &:only-child {
161
    margin-bottom: 0;
162
  }
163
}
164
 
165
// Abbreviations
166
//
167
// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
168
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
169
// 3. Add explicit cursor to indicate changed behavior.
170
// 4. Remove the bottom border in Firefox 39-.
171
 
172
abbr[title],
173
abbr[data-original-title] {
174
  // 1
175
  cursor: help; // 3
176
  border-bottom: 0; // 4
177
}
178
 
179
address {
180
  margin-bottom: 1rem;
181
  font-style: normal;
182
  line-height: inherit;
183
}
184
 
185
ol,
186
ul,
187
dl {
188
  margin-top: 0;
189
  margin-bottom: 1rem;
190
}
191
 
192
ol ol,
193
ul ul,
194
ol ul,
195
ul ol {
196
  margin-bottom: 0;
197
}
198
 
199
dt {
200
  font-weight: $dt-font-weight;
201
}
202
 
203
dd {
204
  margin-bottom: .5rem;
205
  margin-left: 0; // Undo browser default
206
}
207
 
208
blockquote {
209
  margin: 0 0 1rem;
210
}
211
 
212
b,
213
strong {
214
  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
215
}
216
 
217
small {
218
  @include font-size(80%); // Add the correct font size in all browsers
219
}
220
 
221
//
222
// Prevent `sub` and `sup` elements from affecting the line height in
223
// all browsers.
224
//
225
 
226
sub,
227
sup {
228
  position: relative;
229
  @include font-size(75%);
230
  line-height: 0;
231
  vertical-align: baseline;
232
}
233
 
234
sub {
235
  bottom: -.25em;
236
}
237
 
238
sup {
239
  top: -.5em;
240
}
241
 
242
 
243
//
244
// Links
245
//
246
 
247
a {
248
  color: $link-color;
249
  text-decoration: $link-decoration;
250
  background-color: transparent; // Remove the gray background on active links in IE 10.
251
 
252
  transition: $transition-base;
253
  word-break: break-word;
254
 
255
  @include hover() {
256
    color: $link-hover-color;
257
 
258
    .theme-dark & {
259
      color: $dm-link-hover-color;
260
    }
261
  }
262
 
263
  .theme-dark & {
264
    color: $dm-link-color;
265
  }
266
}
267
 
268
// And undo these styles for placeholder links/named anchors (without href).
269
// It would be more straightforward to just use a[href] in previous block, but that
270
// causes specificity issues in many other styles that are too complex to fix.
271
// See https://github.com/twbs/bootstrap/issues/19402
272
 
273
a:not([href]):not([class]) {
274
  color: inherit;
275
  text-decoration: none;
276
 
277
  @include hover() {
278
    color: inherit;
279
    text-decoration: none;
280
  }
281
}
282
 
283
 
284
//
285
// Code
286
//
287
 
288
pre,
289
code,
290
kbd,
291
samp {
292
  font-family: $font-family-monospace;
293
  @include font-size(1rem); // Correct the odd `em` font sizing in all browsers.
294
}
295
 
296
pre {
297
  // Remove browser default top margin
298
  margin-top: 0;
299
  // Reset browser default of `1em` to use `rem`s
300
  margin-bottom: 1rem;
301
  // Don't allow content to break outside
302
  overflow: auto;
303
  // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
304
  // making it impossible to interact with the content
305
  -ms-overflow-style: scrollbar;
306
}
307
 
308
 
309
//
310
// Figures
311
//
312
 
313
figure {
314
  // Apply a consistent margin strategy (matches our type styles).
315
  margin: 0 0 1rem;
316
}
317
 
318
 
319
//
320
// Images and content
321
//
322
 
323
img {
324
  vertical-align: middle;
325
  border-style: none; // Remove the border on images inside links in IE 10-.
326
}
327
 
328
svg {
329
  // Workaround for the SVG overflow bug in IE10/11 is still required.
330
  // See https://github.com/twbs/bootstrap/issues/26878
331
  overflow: hidden;
332
  vertical-align: middle;
333
}
334
 
335
 
336
//
337
// Tables
338
//
339
 
340
table {
341
  border-collapse: collapse; // Prevent double borders
342
}
343
 
344
caption {
345
  padding-top: $table-cell-padding;
346
  padding-bottom: $table-cell-padding;
347
  color: $table-caption-color;
348
  text-align: left;
349
  caption-side: bottom;
350
 
351
  .theme-dark & {
352
    color: $dm-table-caption-color;
353
  }
354
}
355
 
356
// 1. Removes font-weight bold by inheriting
357
// 2. Matches default `<td>` alignment by inheriting `text-align`.
358
// 3. Fix alignment for Safari
359
 
360
th {
361
  font-weight: $table-th-font-weight; // 1
362
  text-align: inherit; // 2
363
  text-align: -webkit-match-parent; // 3
364
}
365
 
366
 
367
//
368
// Forms
369
//
370
 
371
label {
372
  // Allow labels to use `margin` for spacing.
373
  display: inline-block;
374
  margin-bottom: $label-margin-bottom;
375
  font-weight: $font-weight-medium;
376
}
377
 
378
// Remove the default `border-radius` that macOS Chrome adds.
379
//
380
// Details at https://github.com/twbs/bootstrap/issues/24093
381
button {
382
  // stylelint-disable-next-line property-disallowed-list
383
  border-radius: 0;
384
}
385
 
386
// Explicitly remove focus outline in Chromium when it shouldn't be
387
// visible (e.g. as result of mouse click or touch tap). It already
388
// should be doing this automatically, but seems to currently be
389
// confused and applies its very visible two-tone outline anyway.
390
 
391
button:focus:not(:focus-visible) {
392
  outline-offset: 2px;
393
}
394
 
395
:focus-visible {
396
  outline: 2px solid rgba($blue-600, .9);
397
  outline-offset: 2px;
398
}
399
 
400
input,
401
button,
402
select,
403
optgroup,
404
textarea {
405
  margin: 0; // Remove the margin in Firefox and Safari
406
  font-family: inherit;
407
  @include font-size(inherit);
408
  line-height: inherit;
409
}
410
 
411
button,
412
input {
413
  overflow: visible; // Show the overflow in Edge
414
}
415
 
416
button,
417
select {
418
  text-transform: none; // Remove the inheritance of text transform in Firefox
419
}
420
 
421
// Set the cursor for non-`<button>` buttons
422
//
423
// Details at https://github.com/twbs/bootstrap/pull/30562
424
[role="button"] {
425
  cursor: pointer;
426
}
427
 
428
// Remove the inheritance of word-wrap in Safari.
429
//
430
// Details at https://github.com/twbs/bootstrap/issues/24990
431
select {
432
  word-wrap: normal;
433
}
434
 
435
 
436
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
437
//    controls in Android 4.
438
// 2. Correct the inability to style clickable types in iOS and Safari.
439
button,
440
[type="button"],
441
// 1
442
[type="reset"],
443
[type="submit"] {
444
  -webkit-appearance: button; // 2
445
}
446
 
447
// Opinionated: add "hand" cursor to non-disabled button elements.
448
@if $enable-pointer-cursor-for-buttons {
449
 
450
  button,
451
  [type="button"],
452
  [type="reset"],
453
  [type="submit"] {
454
    &:not(:disabled) {
455
      cursor: pointer;
456
    }
457
  }
458
}
459
 
460
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
461
button::-moz-focus-inner,
462
[type="button"]::-moz-focus-inner,
463
[type="reset"]::-moz-focus-inner,
464
[type="submit"]::-moz-focus-inner {
465
  padding: 0;
466
  border-style: none;
467
}
468
 
469
input[type="radio"],
470
input[type="checkbox"] {
471
  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
472
  padding: 0; // 2. Remove the padding in IE 10-
473
}
474
 
475
input[type="radio"] {
476
  margin: 10px;
477
}
478
 
479
 
480
textarea {
481
  overflow: auto; // Remove the default vertical scrollbar in IE.
482
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
483
  resize: vertical;
484
}
485
 
486
fieldset {
487
  // Browsers set a default `min-width: min-content;` on fieldsets,
488
  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
489
  // So we reset that to ensure fieldsets behave more like a standard block element.
490
  // See https://github.com/twbs/bootstrap/issues/12359
491
  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
492
  min-width: 0;
493
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
494
  padding: 0;
495
  margin: 0;
496
  border: 0;
497
}
498
 
499
// 1. Correct the text wrapping in Edge and IE.
500
// 2. Correct the color inheritance from `fieldset` elements in IE.
501
legend {
502
  display: block;
503
  width: 100%;
504
  max-width: 100%; // 1
505
  padding: 0;
506
  font-size: $font-size-sm;
507
  font-weight: $font-weight-bold;
508
  line-height: inherit;
509
  color: inherit; // 2
510
  opacity: .7;
511
  white-space: normal; // 1
512
}
513
 
514
progress {
515
  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
516
}
517
 
518
// Fix height of inputs with a type of datetime-local, date, month, week, or time
519
// See https://github.com/twbs/bootstrap/issues/18842
520
 
521
::-webkit-datetime-edit-fields-wrapper,
522
::-webkit-datetime-edit-text,
523
::-webkit-datetime-edit-minute,
524
::-webkit-datetime-edit-hour-field,
525
::-webkit-datetime-edit-day-field,
526
::-webkit-datetime-edit-month-field,
527
::-webkit-datetime-edit-year-field {
528
  padding: 0;
529
}
530
 
531
::-webkit-inner-spin-button {
532
  height: auto;
533
}
534
 
535
// 1. Correct the outline style in Safari.
536
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
537
//    `.form-control` class can properly style them. Note that this cannot simply
538
//    be added to `.form-control` as it's not specific enough. For details, see
539
//    https://github.com/twbs/bootstrap/issues/11586.
540
 
541
[type="search"] {
542
  outline-offset: -2px; // 1
543
  -webkit-appearance: textfield; // 2
544
}
545
 
546
// 1. A few input types should stay LTR
547
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
548
// 2. RTL only output
549
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
550
 
551
/* rtl:raw:
552
[type="tel"],
553
[type="url"],
554
[type="email"],
555
[type="number"] {
556
  direction: ltr;
557
}
558
*/
559
 
560
// Remove the inner padding in Chrome and Safari on macOS.
561
 
562
::-webkit-search-decoration {
563
  -webkit-appearance: none;
564
}
565
 
566
// Remove padding around color pickers in webkit browsers
567
 
568
::-webkit-color-swatch-wrapper {
569
  padding: 0;
570
}
571
 
572
 
573
// Inherit font family and line height for file input buttons
574
 
575
::file-selector-button {
576
  font: inherit;
577
}
578
 
579
// 1. Change font properties to `inherit`
580
// 2. Correct the inability to style clickable types in iOS and Safari.
581
 
582
::-webkit-file-upload-button {
583
  font: inherit; // 1
584
  -webkit-appearance: button; // 2
585
}
586
 
587
// Correct element displays
588
output {
589
  display: inline-block;
590
}
591
 
592
// Remove border from iframe
593
 
594
iframe {
595
  border: 0;
596
}
597
 
598
// Summary
599
//
600
// 1. Add the correct display in all browsers
601
 
602
summary {
603
  display: list-item; // 1
604
  cursor: pointer;
605
}
606
 
607
 
608
// Progress
609
//
610
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
611
 
612
progress {
613
  vertical-align: baseline;
614
}
615
 
616
 
617
// Hidden attribute
618
//
619
// Always hide an element with the `hidden` HTML attribute.
620
 
621
[hidden] {
622
  display: none !important;
623
}
624
 
625
 
626
$thin-scroll-bg-thumb: $gray-600 !default;
627
$thin-scroll-bg-hover: $gray-700 !default;
628
$dm-thin-scroll-bg-thumb: $dm-gray-100 !default;
629
$dm-thin-scroll-bg-hover: $dm-gray-200 !default;
630
 
631
// Thin scrollbars.
632
@mixin thin-scrolls($bg-track) {
633
 
634
  // Firefox.
635
  scrollbar-width: thin;
636
  scrollbar-color: $thin-scroll-bg-thumb $bg-track;
637
 
638
  // Chrome, Edge and Safari.
639
  &::-webkit-scrollbar {
640
    width: 8px;
641
  }
642
 
643
  &::-webkit-scrollbar-track {
644
    background: $bg-track;
645
    border-radius: 20px;
646
  }
647
 
648
  &::-webkit-scrollbar-thumb {
649
    background-color: $thin-scroll-bg-thumb;
650
    border-radius: 20px;
651
    //border: 3px solid $bg-track;
652
  }
653
 
654
  &::-webkit-scrollbar-thumb:hover {
655
    background-color: $thin-scroll-bg-hover;
656
  }
657
}
658
 
659
@mixin dm-thin-scrolls($bg-track) {
660
  // Firefox.
661
  scrollbar-width: thin;
662
  scrollbar-color: $dm-thin-scroll-bg-thumb $dm-bg-track;
663
 
664
  // Chrome, Edge and Safari.
665
  &::-webkit-scrollbar {
666
    width: 8px;
667
  }
668
 
669
  &::-webkit-scrollbar-track {
670
    background: $dm-bg-track;
671
    border-radius: 20px;
672
  }
673
 
674
  &::-webkit-scrollbar-thumb {
675
    background-color: $dm-thin-scroll-bg-thumb;
676
    border-radius: 20px;
677
    //border: 3px solid $dm-bg-track;
678
  }
679
 
680
  &::-webkit-scrollbar-thumb:hover {
681
    background-color: $dm-thin-scroll-bg-hover;
682
  }
683
}
684
 
685
.dark-mode:root {
686
  color-scheme: dark;
687
}