Lion-CSS-UI-Kit/index.html at master · kostasx/Lion-CSS-UI-Kit · 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
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
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Lion CSS UI Kit</title>
  <link rel="stylesheet" href="lion-ui-kit.css" />
</head>
<body>
  <div class="header">
    <div class="titlebar">
      Lion CSS UI Kit
    </div>
    <div class="toolbar">
      <div class="segmented">
        <input checked type="radio" name="s" id="s1" />
        <label class="textured button" for="s1"><span class="icon" for="s1">¹</span></label>
        <input type="radio" name="s" id="s2" />
        <label class="textured button" for="s2"><span class="icon" for="s2">²</span></label>
        <input type="radio" name="s" id="s3" />
        <label class="textured button" for="s3"><span class="icon" for="s3">³</span></label>
      </div>
      <input type="text" id="">
      <div class="flexible space"></div>
      <input class="search" type="text" id="">
      <button class="textured"><span class="icon">S</span></button>
    </div>
  </div>
  <div class="scope bar">
    <span>Search:</span>
    <input type="radio" name="q" id="q1" />
    <label class="scope" for="q1">Site</label>
    <input checked type="radio" name="q" id="q2" />
    <label class="scope" for="q2">Internets</label>
    <input class="scope" type="text" value="Someother"/>
    <select class="scope">
      <option value="">Name</option>
    </select>
    <button class="scope">Save</button>
    <button class="scope remove">&#8722;</button>
    <button class="scope add">+</button>
  </div>
  <div class="content">
    <div class="splitview">
      <div class="sourcelist">
        <label class="section-title" for="r1">Library</label>
        <input class="disclosure" checked type="checkbox" name="r1" id="r1" />
        <div class="section">
          <input checked type="radio" name="source-item" id="i1" />
          <label class="item" for="i1"><span class="icon">I</span> Photos</label>
          <input type="radio" name="source-item" id="i2" />
          <label class="item" for="i2"><span class="icon">M</span> Movies</label>
          <input type="radio" name="source-item" id="i3" />
          <label class="item" for="i3"><span class="icon">r</span> Podcasts <span class="badge">4</span></label>
        </div>
        <label class="section-title" for="r2">Lists</label>
        <input class="disclosure" checked type="checkbox" name="r2" id="r2" />
        <div class="section">
          <input type="radio" name="source-item" id="i4" />
          <label class="item" for="i4"><span class="icon">F</span> Folder</label>
          <input class="disclosure" checked type="checkbox" name="source-folder" id="t1" />
          <div class="section">
            <input type="radio" name="source-item" id="i4.1" />
            <label class="item" for="i4.1">Finglish</label>
            <input type="radio" name="source-item" id="i4.2" />
            <label class="item" for="i4.2">Feta</label>
            <input type="radio" name="source-item" id="i4.3" />
            <label class="item" for="i4.3">Tablecloth</label>
          </div>
          <input type="radio" name="source-item" id="i5" />
          <label class="item" for="i5"><span class="icon">F</span> Fonts</label>
          <input class="disclosure" type="checkbox" name="source-folder" id="t2" />
          <div class="section">
            <input type="radio" name="source-item" id="i5.1" />
            <label class="item" for="i5.1">Helvetica Neue</label>
            <input type="radio" name="source-item" id="i5.2" />
            <label class="item" for="i5.2">Lucida Grande</label>
            <input type="radio" name="source-item" id="i5.3" />
            <label class="item" for="i5.3">Segoe UI</label>
          </div>
          <input type="radio" name="source-item" id="i6" />
          <label class="item" for="i6"><span class="icon">F</span> Inkblots</label>
          <input class="disclosure" type="checkbox" name="source-folder" id="t3" />
          <div class="section">
            <input type="radio" name="source-item" id="i6.1" />
            <label for="i6.1" class="item">Pelvic bone</label>
            <input type="radio" name="source-item" id="i6.2" />
            <label for="i6.2" class="item">Bat</label>
            <input type="radio" name="source-item" id="i6.3" />
            <label for="i6.3" class="item">Two humans</label>
            <input type="radio" name="source-item" id="i6.4" />
            <label for="i6.4" class="item">Butterfly</label>
            <input type="radio" name="source-item" id="i6.5" />
            <label for="i6.5" class="item">Rug</label>
          </div>
        </div>
      </div>
      <div class="view">
        <p>Hi, my name is Window.</p>
        <input type="range" name="" id="" />
        <input type="number" name="" size="2" id="" value="3"/>
        <p>
          <input type="checkbox" name="e" id="e1" /> <label for="e1">Check me</label><br />
          <input type="checkbox" name="e" id="e2" /> <label for="e2">Me too</label><br />
        </p>
        <p>
          <input checked type="radio" name="y" id="y1" /> <label for="y1">Radio</label><br />
          <input type="radio" name="y" id="y2" /> <label for="y2">Video</label><br />
        </p>
        <p>
          <button class="push">Push button</button>
          <button class="gradient">Gradient button</button>
        </p>
        <p>
          <div class="segmented">
            <input checked type="radio" name="w" id="w1" />
            <label class="push button" for="w1"><span>Desktop</span></label>
            <input type="radio" name="w" id="w2" />
            <label class="push button" for="w2"><span>Mobile</span></label>
            <input type="radio" name="w" id="w3" />
            <label class="push button" for="w3"><span>Web</span></label>
          </div>
        </p>
        <p>
          <textarea name="" id="" cols="20" rows="3">Textarea</textarea>
          <div class="gradient">
            <button>yep</button>
            <button>nope</button>
            <button class="icon">S</button>
          </div>
        </p>
      </div>
      <div class="view">
        <p class="disabled">
          <input disabled type="checkbox" name="e" id="e3" /> <label for="e3">Can't touch this</label><br />
          <input disabled type="checkbox" name="e" id="e3" /> <label for="e3">Hammertime</label><br />
        </p>
      </div>
    </div>
  </div>
</body>
</html>