UNPKG

4.78 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8 <title>Theming - Semantic</title>
9
10 <!--- Site CSS -->
11 <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
12 <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
13 <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
14
15 <!--- Component CSS -->
16 <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
17 <link rel="stylesheet" type="text/css" href="../../dist/components/input.css">
18 <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
19 <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
20 <link rel="stylesheet" type="text/css" href="../../dist/components/label.css">
21 <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
22 <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
23 <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
24
25 <!--- Component JS -->
26 <script src="../assets/library/jquery.min.js"></script>
27 <script src="../assets/library/iframe-content.js"></script>
28 <script type="text/javascript" src="../../dist/components/popup.js"></script>
29 <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
30 <script type="text/javascript" src="../../dist/components/transition.js"></script>
31
32 <!--- Show Names -->
33 <script src="../assets/show-examples.js"></script>
34
35 <!--- Example CSS -->
36 <style>
37 body {
38 padding: 1em;
39 }
40 .ui.input + .ui.input {
41 margin-left: 1em;
42 }
43 </style>
44
45 <!--- Example Javascript -->
46 <script>
47 $(document)
48 .ready(function() {
49 $('.ui.dropdown')
50 .dropdown({
51 on: 'click'
52 })
53 ;
54 })
55 ;
56 </script>
57</head>
58
59<body>
60
61<div class="ui two column stackable grid">
62 <div class="column">
63
64 <div class="ui action left icon input">
65 <i class="search icon"></i>
66 <input type="text" placeholder="Search...">
67 <div class="ui teal button">Search</div>
68 </div>
69
70 <div class="ui divider"></div>
71 <div class="ui input error">
72 <input placeholder="Search..." type="text">
73 </div>
74 <div class="ui divider"></div>
75
76 <div class="ui right labeled input">
77 <input placeholder="Placeholder" type="text">
78 <div class="ui dropdown label">
79 <div class="text">Dropdown</div>
80 <i class="dropdown icon"></i>
81 <div class="menu">
82 <div class="item">Choice 1</div>
83 <div class="item">Choice 2</div>
84 <div class="item">Choice 3</div>
85 </div>
86 </div>
87 </div>
88 <div class="ui divider"></div>
89
90 <div class="ui transparent icon input">
91 <input placeholder="Search..." type="text">
92 <i class="search icon"></i>
93 </div>
94 <div class="ui transparent left icon input">
95 <input placeholder="Search..." type="text">
96 <i class="search icon"></i>
97 </div>
98 <div class="ui divider"></div>
99 <div class="ui left icon input loading">
100 <input placeholder="Loading..." type="text">
101 <i class="search icon"></i>
102 </div>
103
104 <div class="ui icon input loading">
105 <input placeholder="Loading..." type="text">
106 <i class="search icon"></i>
107 </div>
108
109 </div>
110 <div class="column">
111 <div class="ui right labeled left icon input">
112 <i class="tags icon"></i>
113 <input placeholder="Enter tags" type="text">
114 <a class="ui tag label">
115 Add Tag
116 </a>
117 </div>
118 <div class="ui divider"></div>
119 <div class="ui labeled input">
120 <a class="ui label">
121 Label
122 </a>
123 <input type="text" placeholder="Placeholder...">
124 </div>
125 <div class="ui divider"></div>
126 <div class="ui right labeled input">
127 <input type="text" placeholder="Placeholder...">
128 <a class="ui label">
129 Label
130 </a>
131 </div>
132 <div class="ui divider"></div>
133 <div class="ui labeled icon input">
134 <div class="ui label">
135 http://
136 </div>
137 <input type="text" placeholder="domain.com">
138 <i class="add circle link icon"></i>
139 </div>
140 <div class="ui right action input">
141 <input type="text" placeholder="domain.com">
142 <div class="ui teal button">
143 <i class="add icon"></i>
144 Add
145 </div>
146 </div>
147 <div class="ui divider"></div>
148 <div class="ui corner labeled input">
149 <input type="text" placeholder="Required Field">
150 <div class="ui corner label">
151 <i class="asterisk icon"></i>
152 </div>
153 </div>
154
155 </div>
156</div>
157
158</body>
159</html>
\No newline at end of file