index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Headers</title>
  6. <meta name="description" content="Providing top-level navigation and inputs for the active view">
  7. <!--
  8. - This <style> and <link> is only used for the example preview,
  9. - it isn't needed for the real use case.
  10. -->
  11. <link rel="stylesheet" href="../headers.css">
  12. <style type="text/css">
  13. html, body {
  14. margin: 0;
  15. padding: 0;
  16. font-size: 10px;
  17. background-color: #fff;
  18. }
  19. body {
  20. background: none;
  21. }
  22. h2.bb-docs {
  23. font-size: 1.8rem;
  24. font-weight: lighter;
  25. color: #666;
  26. margin: -0.1rem 0 0;
  27. background-color: #f5f5f5;
  28. padding: 0.4rem 0.4rem 0.4rem 3rem;
  29. border: solid 0.1rem #e8e8e8;
  30. margin: 3rem 0 1rem;
  31. }
  32. section[role="region"] {
  33. margin-bottom: 1.5rem;
  34. position: relative;
  35. }
  36. </style>
  37. </head>
  38. <body role="application">
  39. <p dir="ltr">
  40. <label>
  41. <input type="checkbox"
  42. onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
  43. RTL mode
  44. </label>
  45. </p>
  46. <section role="region">
  47. <header>
  48. <a href="#"><span class="icon icon-close">close</span></a>
  49. <menu type="toolbar">
  50. <button>done</button>
  51. </menu>
  52. <h1>Email</h1>
  53. </header>
  54. </section>
  55. <section role="region">
  56. <header>
  57. <a href="#"><span class="icon icon-back">back</span></a>
  58. <menu type="toolbar">
  59. <button><span class="icon icon-edit">edit</span></button>
  60. <button><span class="icon icon-add">add</span></button>
  61. </menu>
  62. <h1>Email</h1>
  63. </header>
  64. <header>
  65. <h2>Subheader text</h2>
  66. </header>
  67. </section>
  68. <section role="region">
  69. <header>
  70. <button><span class="icon icon-menu">menu</span></button>
  71. <menu type="toolbar">
  72. <button><span class="icon icon-edit">edit</span></button>
  73. <button><span class="icon icon-add">add</span></button>
  74. </menu>
  75. <h1>Inbox <em>(2)</em></h1>
  76. </header>
  77. </section>
  78. <h2 class="bb-docs">Skin: Dark</h2>
  79. <section role="region" class="skin-dark">
  80. <header>
  81. <a href="#"><span class="icon icon-close">close</span></a>
  82. <menu type="toolbar">
  83. <button>done</button>
  84. </menu>
  85. <h1>Music</h1>
  86. </header>
  87. </section>
  88. <section role="region" class="skin-dark">
  89. <header>
  90. <a href="#"><span class="icon icon-back">back</span></a>
  91. <menu type="toolbar">
  92. <button><span class="icon icon-edit">edit</span></button>
  93. <button><span class="icon icon-add">add</span></button>
  94. </menu>
  95. <h1>Music</h1>
  96. </header>
  97. <header>
  98. <h2>Subheader text</h2>
  99. </header>
  100. </section>
  101. <h2 class="bb-docs">Skin: Organic</h2>
  102. <section role="region" class="skin-organic">
  103. <header>
  104. <a href="#"><span class="icon icon-close">close</span></a>
  105. <menu type="toolbar">
  106. <button>done</button>
  107. </menu>
  108. <h1>Settings</h1>
  109. </header>
  110. </section>
  111. <div class="skin-organic">
  112. <section role="region">
  113. <header>
  114. <a href="#"><span class="icon icon-back">back</span></a>
  115. <menu type="toolbar">
  116. <button><span class="icon icon-edit">edit</span></button>
  117. <button><span class="icon icon-add">add</span></button>
  118. </menu>
  119. <h1>Settings</h1>
  120. </header>
  121. <header>
  122. <h2>Subheader text</h2>
  123. </header>
  124. </section>
  125. </div>
  126. <h2 class="bb-docs">Skin: Comms</h2>
  127. <div class="skin-comms">
  128. <section role="region">
  129. <header>
  130. <a href="#"><span class="icon icon-close">close</span></a>
  131. <menu type="toolbar">
  132. <button>done</button>
  133. </menu>
  134. <h1>Contacts</h1>
  135. </header>
  136. </section>
  137. <section role="region">
  138. <header>
  139. <a href="#"><span class="icon icon-back">back</span></a>
  140. <menu type="toolbar">
  141. <button><span class="icon icon-edit">edit</span></button>
  142. <button><span class="icon icon-add">add</span></button>
  143. </menu>
  144. <h1>Contacts</h1>
  145. </header>
  146. <header>
  147. <h2>Subheader text</h2>
  148. </header>
  149. </section>
  150. </div>
  151. </body>
  152. </html>