You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

155 lines
4.6 KiB

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