Source file skyline_glimmer_v1.ml

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
open! Core
open! Bonsai_web
open! Bonsai.Let_syntax

module Style = struct
  include
    [%css
    stylesheet
      ~dont_hash_prefixes:[ "--skyline" ]
      {|
        .glimmer {
          background: var(--skyline-color-border);
          animation: 2s ease-in-out infinite pulse;
        }

        @keyframes pulse {
          0%,
          100% {
            opacity: 10%;
          }
          50% {
            opacity: 100%;
          }
        }
      |}]
end

let component ?(rounded = `Px 0) ~width ~height () =
  let attr =
    Vdom.Attr.many
      [ Vdom.Attr.style (Css_gen.width width)
      ; Vdom.Attr.style (Css_gen.height height)
      ; Vdom.Attr.style (Css_gen.border_radius rounded)
      ; Style.glimmer
      ]
  in
  Vdom.Node.div ~attrs:[ attr ] []
;;

let text ~width = component ~rounded:(`Px 4) ~width ~height:(`Px 12) ()