Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1441 ariadna 1 
// stylelint-disable selector-attribute-quotes
2 
 
3 
@import "../../functions";
4 
@import "../../variables";
5 
@import "../../variables-dark";
6 
@import "../../maps";
7 
@import "../../mixins";
8 
 
9 
@include describe("global $color-mode-type: data") {
10 
  @include it("generates data attribute selectors for dark mode") {
11 
    @include assert() {
12 
      @include output() {
13 
        @include color-mode(dark) {
14 
          .element {
15 
            color: var(--bs-primary-text-emphasis);
16 
            background-color: var(--bs-primary-bg-subtle);
17 
          }
18 
        }
19 
        @include color-mode(dark, true) {
20 
          --custom-color: #{mix($indigo, $blue, 50%)};
21 
        }
22 
      }
23 
      @include expect() {
24 
        [data-bs-theme=dark] .element {
25 
          color: var(--bs-primary-text-emphasis);
26 
          background-color: var(--bs-primary-bg-subtle);
27 
        }
28 
        [data-bs-theme=dark] {
29 
          --custom-color: #3a3ff8;
30 
        }
31 
      }
32 
    }
33 
  }
34 
}
35 
 
36 
@include describe("global $color-mode-type: media-query") {
37 
  @include it("generates media queries for dark mode") {
38 
    $color-mode-type: media-query !global;
39 
 
40 
    @include assert() {
41 
      @include output() {
42 
        @include color-mode(dark) {
43 
          .element {
44 
            color: var(--bs-primary-text-emphasis);
45 
            background-color: var(--bs-primary-bg-subtle);
46 
          }
47 
        }
48 
        @include color-mode(dark, true) {
49 
          --custom-color: #{mix($indigo, $blue, 50%)};
50 
        }
51 
      }
52 
      @include expect() {
53 
        @media (prefers-color-scheme: dark) {
54 
          .element {
55 
            color: var(--bs-primary-text-emphasis);
56 
            background-color: var(--bs-primary-bg-subtle);
57 
          }
58 
        }
59 
        @media (prefers-color-scheme: dark) {
60 
          :root {
61 
            --custom-color: #3a3ff8;
62 
          }
63 
        }
64 
      }
65 
    }
66 
 
67 
    $color-mode-type: data !global;
68 
  }
69 
}