cssx/index.html at main · galulex/cssx · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSSX</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.css">

    <link rel="stylesheet" href="/path/to/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script src="cssx.js"></script>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Demo</h1>
    <button id='tooltip' tooltip="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio id inventore hic sapiente vel sunt fugiat ab maxime nam numquam est totam repellendus neque ex magni, veniam rem velit eveniet." data-cssx='mouseenter->clientX,clientY,pageX,pageY,target.offsetLeft,target.offsetTop,target.offsetWidth,target.offsetHeight'>Smart tooltip</button>
    <pre class='language-html'>
      <code>
        &lt;button id='tooltip' tooltip="Lorem ipsum dolor " data-cssx='mouseenter->clientX,clientY,pageX,pageY,target.offsetLeft,target.offsetTop,target.offsetWidth,target.offsetHeight'&gt;Smart tooltip&lt;/button&gt;
      </code>
    </pre>

    <br>
    <legend>HTML</legend>
    <pre class='language-html'>
      <code>
        &lt;input id='range_input' type="range" min='5' max='100' step='5' list='range_list' data-cssx='change->target.value'&gt;
      </code>
    </pre>
    <legend>CSS</legend>
    <pre class='language-css'>
      <code>
        input[type=text] {
          transition: all .2s;
          width: calc(var(--range_input--target_value) * 1%);
          font-size: calc(var(--range_input--target_value) * 1px);
        }
      </code>
    </pre>
    <label for='name_input'>Control input size with no JS</label>
    <br>
    <input id='range_input' type="range" min='5' max='100' step='5' list='range_list' data-cssx='change->target.value'>
    <datalist id='range_list'>
      <option value="5">5</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="75">75</option>
      <option value="100">100</option>
    </datalist>
    <br>
    <input id='email_input' placeholder='Type here' name='name' type="text" data-cssx='change->target.value|change->target.value+'>

    <br>
    <input id='bg_input' name='bg' type="color" data-cssx='change->target.value+'>


    <pre class='language-html'>
      <code>
      </code>
    <button id='btn' data-cssx='mousemove->clientX,clientY,pageX,pageY'>Annoying button</button>
  </body>
</html>