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.

89 lines
2.0 KiB

9 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Standard Meta -->
  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. <!-- Site Properties -->
  9. <title>Theming - Semantic</title>
  10. <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
  11. <script src="assets/library/jquery.min.js"></script>
  12. <script src="assets/library/iframe.js"></script>
  13. <style type="text/css">
  14. body > .ui.container {
  15. margin-top: 3em;
  16. }
  17. iframe {
  18. border: none;
  19. width: calc(100% + 2em);
  20. margin: 0em -1em;
  21. height: 300px;
  22. }
  23. iframe html {
  24. overflow: hidden;
  25. }
  26. iframe body {
  27. padding: 0em;
  28. }
  29. .ui.container > h1 {
  30. font-size: 3em;
  31. text-align: center;
  32. font-weight: normal;
  33. }
  34. .ui.container > h2.dividing.header {
  35. font-size: 2em;
  36. font-weight: normal;
  37. margin: 4em 0em 3em;
  38. }
  39. .ui.table {
  40. table-layout: fixed;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div class="ui container">
  46. <h1>Theming Examples</h1>
  47. <h2 class="ui dividing header">Site</h2>
  48. <iframe src="components/site.html" width="100%" scrolling="no"></iframe>
  49. <h2 class="ui dividing header">Menu</h2>
  50. <iframe src="components/menu.html" width="100%" scrolling="no"></iframe>
  51. <h2 class="ui dividing header">Buttons</h2>
  52. <iframe src="components/button.html" width="100%" scrolling="no"></iframe>
  53. <h2 class="ui dividing header">Table</h2>
  54. <iframe src="components/table.html" width="100%" scrolling="no"></iframe>
  55. <h2 class="ui dividing header">Input</h2>
  56. <iframe src="components/input.html" width="100%" scrolling="no"></iframe>
  57. <h2 class="ui dividing header">Card</h2>
  58. <iframe src="components/card.html" width="100%" scrolling="no"></iframe>
  59. </div>
  60. <script>
  61. $('iframe').iFrameResize({
  62. autoResize: true,
  63. checkOrigin: false,
  64. heightCalculationMethod: 'bodyScroll'
  65. });
  66. </script>
  67. </body>
  68. </html>