Light/style.stylus at main · Canal-Java/Light · GitHub

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
*
  box-sizing border-box

:root
  --on 0
  --bg 'hsl(%s, %s, %s)' % (calc(200 - (var(--on) * 160)) calc((20 + (var(--on) * 50)) * 1%) calc((20 + (var(--on) * 60)) * 1%))
  --cord 'hsl(0, 0%, %s)' % (calc((60 - (var(--on) * 50)) * 1%))
  --stroke 'hsl(0, 0%, %s)' % (calc((60 - (var(--on) * 50)) * 1%))
  --shine 'hsla(0, 0%, 100%, %s)' % calc(0.75 - (var(--on) * 0.5))
  --cap 'hsl(0, 0%, %s)' % calc((40 + (var(--on) * 30)) * 1%)
  --filament 'hsl(45, %s, %s)' % (calc(var(--on) * 80%) calc((25 + (var(--on) * 75)) * 1%))

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  background var(--bg)

.toggle-scene
  // !important for CodePen
  overflow visible !important
  height 50vmin
  position absolute

  &__cord
    stroke var(--cord)
    cursor move

    // Hide all cords if there's no JavaScript?
    &:nth-of-type(1)
      display none

    // Hide cords by default
    &:nth-of-type(2)
    &:nth-of-type(3)
    &:nth-of-type(4)
    &:nth-of-type(5)
      display none

    &-end
      stroke var(--cord)
      fill var(--cord)

.toggle-scene__dummy-cord
  stroke-width 6
  stroke var(--cord)

.bulb
  &__filament
    stroke var(--filament)
  &__shine
    stroke var(--shine)
  &__flash
    stroke hsl(45, 80%, 80%)
    display none
  &__bulb
    stroke var(--stroke)
    fill 'hsla(%s, 80%, 80%, %s)' % (calc(180 - (95 * var(--on))) calc(0.1 + (0.4 * var(--on))))
  &__cap
    fill var(--cap)
    &-shine
      fill var(--shine)
    &-outline
      stroke var(--stroke)