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 |
|
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 |
|
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 |
|
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 |
|
33 | <script src="../assets/show-examples.js"></script>
|
34 |
|
35 |
|
36 | <style>
|
37 | body {
|
38 | padding: 1em;
|
39 | }
|
40 | .ui.input + .ui.input {
|
41 | margin-left: 1em;
|
42 | }
|
43 | </style>
|
44 |
|
45 |
|
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 |