~wuz/wuz.sh

ref: 0046f7008ba44c4fda09dd57a96b976eebadd47c wuz.sh/_includes/styles/atoms/color.scss -rw-r--r-- 2.4 KiB
0046f700 — Conlin Durbin Fix colors and garden 11 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
@each $color
  in (
    brand,
    brand-secondary,
    pastel-red,
    pastel-orange,
    pastel-yellow,
    pastel-lime,
    pastel-green,
    pastel-blue,
    pastel-purple,
  )
{
  .text\:$color {
    color: var(--c-$color);
  }

  .text-shadow\:$color {
    text-shadow: 0.05em 0.05em 0.1em var(--c-$color);
  }

  .text\:$color\:hov:hover {
    color: var(--c-$color);
  }

  .bg\:$color {
    background-color: var(--c-$color);
  }

  .fill\:$color {
    fill: var(--c-$color);
  }

  .fill\:$color\:hover:hover {
    color: var(--c-$color);
  }

  .stroke\:$color {
    stroke: var(--c-$color);
  }

  .dark-mode.d\:bg\:$color {
    background-color: var(--c-$color);
  }

  .dark-mode.d\:text\:$color {
    color: var(--c-$color);
  }

  .dark-mode .d\:text\:$color {
    color: var(--c-$color);
  }

  .dark-mode .d\:bg\:$color {
    background-color: var(--c-$color);
  }

  .dark-mode .d\:fill\:$color {
    fill: var(--c-$color);
  }

  .dark-mode .d\:stroke\:$color {
    stroke: var(--c-$color);
  }
}

.bg\:rainbow {
  background: linear-gradient(
    45deg,
    var(--c-pastel-red),
    var(--c-pastel-orange),
    var(--c-pastel-yellow),
    var(--c-pastel-lime),
    var(--c-pastel-green),
    var(--c-pastel-blue),
    var(--c-pastel-purple),
    var(--c-pastel-red),
    var(--c-pastel-orange),
    var(--c-pastel-yellow),
    var(--c-pastel-lime),
    var(--c-pastel-green),
    var(--c-pastel-blue)
  );
}

.bdr\:rainbow {
  border: 5px solid;
  border-image: linear-gradient(
      45deg,
      var(--c-pastel-red),
      var(--c-pastel-orange),
      var(--c-pastel-yellow),
      var(--c-pastel-lime),
      var(--c-pastel-green),
      var(--c-pastel-blue),
      var(--c-pastel-purple),
      var(--c-pastel-red),
      var(--c-pastel-orange),
      var(--c-pastel-yellow),
      var(--c-pastel-lime),
      var(--c-pastel-green),
      var(--c-pastel-blue)
    )
    30;
}

@each $dir in (left, right, top, bottom) {
  .bdr\:rainbow\:$dir {
    border-$(dir): 8px solid;
    padding-bottom: 1rem;
    border-image: linear-gradient(
        45deg,
        var(--c-pastel-red),
        var(--c-pastel-orange),
        var(--c-pastel-yellow),
        var(--c-pastel-lime),
        var(--c-pastel-green),
        var(--c-pastel-blue),
        var(--c-pastel-purple),
        var(--c-pastel-red),
        var(--c-pastel-orange),
        var(--c-pastel-yellow),
        var(--c-pastel-lime),
        var(--c-pastel-green),
        var(--c-pastel-blue)
      )
      30;
  }
}