Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Adding headers and lists BB

  • Loading branch information...
commit 11985d768c80d3833cd4ec39662e930340af00d3 1 parent 8160352
arnau authored
Showing with 949 additions and 4 deletions.
  1. +2 −0  .gitignore
  2. +8 −4 index.html
  3. +25 −0 style/app.css
  4. +381 −0 style/headers.css
  5. BIN  style/headers/images/icons/add.png
  6. BIN  style/headers/images/icons/back-rtl.png
  7. BIN  style/headers/images/icons/back.png
  8. BIN  style/headers/images/icons/clear.png
  9. BIN  style/headers/images/icons/close.png
  10. BIN  style/headers/images/icons/compose.png
  11. BIN  style/headers/images/icons/edit.png
  12. BIN  style/headers/images/icons/menu.png
  13. BIN  style/headers/images/icons/reply-all.png
  14. BIN  style/headers/images/icons/reply.png
  15. BIN  style/headers/images/icons/send.png
  16. BIN  style/headers/images/icons/user.png
  17. BIN  style/headers/images/ui/dark/header.png
  18. BIN  style/headers/images/ui/dark/negative.png
  19. BIN  style/headers/images/ui/dark/separator.png
  20. BIN  style/headers/images/ui/dark/subheader.png
  21. BIN  style/headers/images/ui/header.png
  22. BIN  style/headers/images/ui/negative.png
  23. BIN  style/headers/images/ui/organic/header.png
  24. BIN  style/headers/images/ui/organic/negative.png
  25. BIN  style/headers/images/ui/organic/pattern.png
  26. BIN  style/headers/images/ui/organic/separator.png
  27. BIN  style/headers/images/ui/organic/subheader.png
  28. BIN  style/headers/images/ui/overlay/header.png
  29. BIN  style/headers/images/ui/overlay/separator.png
  30. BIN  style/headers/images/ui/search.png
  31. BIN  style/headers/images/ui/separator-large.png
  32. BIN  style/headers/images/ui/separator.png
  33. BIN  style/headers/images/ui/shadow.png
  34. BIN  style/headers/images/ui/subheader.png
  35. +134 −0 style/headers/index.html
  36. +204 −0 style/lists.css
  37. +195 −0 style/lists/index.html
View
2  .gitignore
@@ -0,0 +1,2 @@
+
+.DS_Store
View
12 index.html
@@ -3,24 +3,28 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo Store</title>
+
+<link rel="stylesheet" type="text/css" href="style/headers.css"/>
+<link rel="stylesheet" type="text/css" href="style/lists.css" />
+<link rel="stylesheet" type="text/css" href="style/app.css"/>
</head>
<body role="application">
- <section id="list-view">
+ <section role="region" id="list-view">
<header>
<h1>demo Store</h1>
</header>
<article id="appList">
<ul>
<li>
- <a href="installApp('importer.webapp')">
+ <a href="#">
<p>App 1</p>
<p>App developer</p>
</a>
</li>
<li>
- <a href="installApp('importer.webapp')">
+ <a href="#">
<p>App 1</p>
<p>App developer</p>
</a>
@@ -29,7 +33,7 @@
</article>
</section>
- <section id="settings-view">
+ <section role="region" id="settings-view">
<header>
<h1>Settings</h1>
</header>
View
25 style/app.css
@@ -0,0 +1,25 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+}
+
+body {
+ height: 100%;
+ display: block;
+ overflow: hidden;
+}
+
+section[role="region"] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #fff;
+}
+
+#settings-view{
+ transform: translateY(100%);
+}
View
381 style/headers.css
@@ -0,0 +1,381 @@
+/* ----------------------------------
+ * HEADERS: default
+ * ---------------------------------- */
+section[role="region"] > header:first-child {
+ position: relative;
+ z-index: 10;
+ padding: 0;
+ height: 5rem;
+ color: #fff;
+ background: url(headers/images/ui/header.png) repeat-x 0 0;
+ background-size: auto 100%;
+ border: none;
+}
+
+section[role="region"] > header:first-child:after {
+ content: "";
+ display: block;
+ height: 0.3rem;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: url(headers/images/ui/shadow.png) repeat-x 0 0;
+ background-size: auto 100%;
+}
+
+section[role="region"] > header:first-child h1 {
+ font: 2.5rem/4.8rem "MozTT", Sans-serif;
+ text-align: left;
+ color: #fff;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ overflow: hidden;
+ margin: 0 0 0 3rem;
+ height: 100%
+}
+
+section[role="region"] > header:first-child h1 em {
+ font: 400 1.5rem/1em "MozTT", Sans-serif;
+}
+
+section[role="region"] > header:first-child form {
+ display: block;
+ overflow: hidden;
+ position: relative;
+ padding: 1rem 1rem 0 0.5rem ;
+ margin-left: 2.5rem;
+}
+
+section[role="region"] > header:first-child input[type="text"] {
+ width: 100%;
+ height: 3rem;
+ -moz-box-sizing: border-box;
+ padding: 0 0.8rem;
+ border: solid 0.1rem #9d4123;
+ border-top-color: #a6501e;
+ border-radius: 0.3rem;
+ background: #fff url(headers/images/ui/shadow.png) repeat-x left -0.1rem;
+ font: 1.5rem/3em "MozTT", Sans-serif;
+ box-shadow: none;
+}
+
+section[role="region"] > header:first-child form button[type="reset"] {
+ font-size: 0;
+ overflow: hidden;
+ position: absolute;
+ right: 1rem;
+ top: 1rem;
+ bottom: 0;
+ width: 3rem;
+ height: auto;
+ margin: 0;
+ display: none;
+ border: none;
+ background: url(headers/images/icons/clear.png) no-repeat center center;
+}
+
+section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] {
+ display: block;
+}
+
+/* Generic set of actions in toolbar */
+section[role="region"] > header:first-child menu[type="toolbar"] {
+ height: 100%;
+ float: right;
+}
+
+section[role="region"] > header:first-child menu[type="toolbar"] a,
+section[role="region"] > header:first-child menu[type="toolbar"] button {
+ height: 5rem;
+ min-width: 5rem;
+ width: auto;
+ margin-bottom: 0;
+ border-radius: 0;
+ line-height: 5rem;
+ float: left;
+ background: none;
+ padding: 0 1.75rem;
+ -moz-box-sizing: border-box;
+ text-align: center;
+ text-shadow: none;
+ position: relative;
+ z-index: 5;
+}
+
+section[role="region"] > header:first-child menu[type="toolbar"] a:last-child,
+section[role="region"] > header:first-child menu[type="toolbar"] button:last-child {
+ background: url(headers/images/ui/separator.png) no-repeat left center;
+ margin-left: -0.2rem;
+ z-index: 1;
+}
+
+section[role="region"] > header:first-child menu[type="toolbar"] {
+ padding: 0;
+ margin: 0;
+}
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+ border: none;
+ background: none;
+ padding: 0;
+ overflow: hidden;
+ font: 400 1.5rem/1.1em "MozTT", Sans-serif;
+ color: #fff;
+ border-radius: 0;
+ text-decoration: none;
+}
+
+
+/* Pressed state */
+section[role="region"] > header:first-child a::-moz-focus-inner,
+section[role="region"] > header:first-child button::-moz-focus-inner,
+section[role="region"] > header:first-child a:active,
+section[role="region"] > header:first-child button:active,
+section[role="region"] > header:first-child a:focus,
+section[role="region"] > header:first-child button:focus {
+ outline: none !important;
+ border: none !important;
+}
+
+section[role="region"] > header:first-child a:not([aria-disabled="true"]):active .icon:after,
+section[role="region"] > header:first-child button:not(:disabled):active .icon:after,
+section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active {
+ background: #008aaa !important;
+ transition: background 0.2s ease;
+ border-bottom: solid 0.1rem rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Disabled state */
+section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"],
+section[role="region"] > header:first-child menu[type="toolbar"] button[disabled] {
+ opacity: 0.5;
+}
+
+section[role="region"] > header:first-child a:first-letter,
+section[role="region"] > header:first-child button:first-letter {
+ text-transform: uppercase;
+}
+
+/* Icon definitions */
+section[role="region"] > header:first-child .icon {
+ display: inline-block;
+ vertical-align: top;
+ float: none;
+ width: 3rem;
+ height: 3rem;
+ margin: 0 -1rem;
+ background: transparent no-repeat center center;
+ font-size: 0;
+ overflow: hidden;
+ position: relative;
+ height: 4.9rem;
+}
+
+section[role="region"] > header:first-child .icon.icon-add {
+ background-image: url(headers/images/icons/add.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-compose {
+ background-image: url(headers/images/icons/compose.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-edit {
+ background-image: url(headers/images/icons/edit.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-send {
+ background-image: url(headers/images/icons/send.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-close {
+ background-image: url(headers/images/icons/close.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-back {
+ background-image: url(headers/images/icons/back.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-menu {
+ background-image: url(headers/images/icons/menu.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-user {
+ background-image: url(headers/images/icons/user.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-reply {
+ background-image: url(headers/images/icons/reply.png);
+}
+
+section[role="region"] > header:first-child .icon.icon-reply-all {
+ background-image: url(headers/images/icons/reply-all.png);
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"] > header:first-child > button,
+section[role="region"] > header:first-child > a {
+ position: absolute;
+ left: 0;
+ width: 5rem;
+ height: 5rem;
+ background: url(headers/images/ui/separator-large.png) no-repeat 2rem center;
+ overflow: hidden;
+}
+
+section[role="region"] > header:first-child > button::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+section[role="region"] > header:first-child > button .icon,
+section[role="region"] > header:first-child > a .icon {
+ display: block;
+ overflow: visible;
+ font-size: 0;
+ position: static;
+ height: 4.9rem;
+ margin: 0;
+ width: 2rem;
+}
+
+section[role="region"] > header:first-child > button .icon:after,
+section[role="region"] > header:first-child > a .icon:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ width: 2rem;
+ height: 4.9rem;
+ background: #9d3d26 url(headers/images/ui/negative.png) repeat-x 0 0;
+}
+
+section[role="region"] > header > a .icon.icon-menu,
+section[role="region"] > header > button .icon.icon-menu {
+ background-position: -1.1rem center;
+}
+
+/* ----------------------------------
+ * HEADERS: subheader
+ * ---------------------------------- */
+
+section[role="region"] > header {
+ background: url(headers/images/ui/subheader.png) repeat left bottom;
+ border-bottom: solid 0.1rem #e6e6e6;
+ z-index: 0;
+ padding: 0.4rem 0;
+ height: auto;
+ color: #424242;
+}
+
+section[role="region"] > header:after {
+ display: none;
+}
+
+section[role="region"] > header h2 {
+ font-family: "MozTT", Sans-serif;
+ font-weight: 400;
+ margin: 0 3rem;
+ font-size: 1.5rem;
+ line-height: 1.8rem;
+}
+
+/* ----------------------------------
+ * HEADERS: dark
+ * ---------------------------------- */
+section[role="region"].skin-dark > header:first-child,
+.skin-dark section[role="region"] > header:first-child {
+ background: url(headers/images/ui/dark/header.png) repeat-x 0 0;
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"].skin-dark > header:first-child > a .icon:after,
+.skin-dark section[role="region"] > header:first-child > a .icon:after,
+section[role="region"].skin-dark > header:first-child > button .icon:after,
+.skin-dark section[role="region"] > header:first-child > button .icon:after {
+ background: #26272c url(headers/images/ui/dark/negative.png) repeat-x 0 0;
+}
+
+section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:last-child,
+.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] a:last-child,
+section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:last-child,
+.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] button:last-child {
+ background-image: url(headers/images/ui/dark/separator.png);
+}
+
+section[role="region"].skin-dark > header,
+.skin-dark section[role="region"] > header {
+ background: #7f7f7f url(headers/images/ui/dark/subheader.png) repeat-x left bottom;
+ color: #c5c5c5;
+}
+
+/* ----------------------------------
+ * HEADERS: organic
+ * ---------------------------------- */
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+ background: url(headers/images/ui/organic/header.png) repeat-x 0 0, url(headers/images/ui/organic/pattern.png) repeat 0 0;
+}
+
+section[role="region"].skin-organic > header:first-child:after,
+.skin-organic section[role="region"] > header:first-child:after {
+ margin-top: -0.1rem;
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"].skin-organic > header:first-child > a .icon:after,
+.skin-organic section[role="region"] > header:first-child > a .icon:after,
+section[role="region"].skin-organic > header:first-child > button .icon:after,
+.skin-organic section[role="region"] > header > button .icon:after {
+ background: url(headers/images/ui/organic/negative.png) repeat-x 0 0;
+}
+
+section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:last-child,
+.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:last-child,
+section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:last-child,
+.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:last-child {
+ background-image: url(headers/images/ui/organic/separator.png);
+}
+
+section[role="region"].skin-organic > header,
+.skin-organic section[role="region"] > header {
+ background: #7f7f7f url(headers/images/ui/organic/subheader.png) repeat-x left bottom;
+ color: #fff;
+}
+
+/* ----------------------------------
+ * HEADERS: right-to-left tweaks
+ * ---------------------------------- */
+
+html[dir="rtl"] section[role="region"] > header:first-child h1 {
+ text-align: right;
+ margin: 0 3rem 0 0;
+}
+
+html[dir="rtl"] section[role="region"] > header:first-child button,
+html[dir="rtl"] section[role="region"] > header:first-child a {
+ left: inherit;
+ right: 0;
+}
+
+html[dir="rtl"] section[role="region"] > header:first-child > button .icon,
+html[dir="rtl"] section[role="region"] > header:first-child > a .icon {
+ margin-left: 0;
+ margin-right: -2rem;
+}
+
+html[dir="rtl"] section[role="region"] > header:first-child > button .icon:after,
+html[dir="rtl"] section[role="region"] > header:first-child > a .icon:after {
+ left: inherit;
+ right: 0;
+}
+
+html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back {
+ background-image: url(headers/images/icons/back-rtl.png);
+}
+
View
BIN  style/headers/images/icons/add.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/back-rtl.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/back.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/clear.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/compose.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/edit.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/menu.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/reply-all.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/reply.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/send.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/icons/user.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/dark/header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/dark/negative.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/dark/separator.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/dark/subheader.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/negative.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/organic/header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/organic/negative.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/organic/pattern.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/organic/separator.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/organic/subheader.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/overlay/header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/overlay/separator.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  style/headers/images/ui/search.png
Diff not rendered
View
BIN  style/headers/images/ui/separator-large.png
Diff not rendered
View
BIN  style/headers/images/ui/separator.png
Diff not rendered
View
BIN  style/headers/images/ui/shadow.png
Diff not rendered
View
BIN  style/headers/images/ui/subheader.png
Diff not rendered
View
134 style/headers/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Headers</title>
+ <meta name="description" content="Providing top-level navigation and inputs for the active view">
+ <!--
+ - This <style> and <link> is only used for the example preview,
+ - it isn't needed for the real use case.
+ -->
+ <link rel="stylesheet" href="../headers.css">
+ <style type="text/css">
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+ body {
+ background: none;
+ }
+ section[role="region"] {
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+ </style>
+</head>
+<body role="application">
+ <section role="region">
+ <header>
+ <menu type="toolbar">
+ <a href="#"><span class="icon icon-edit">edit</span></a>
+ <a href="#"><span class="icon icon-add">add</span></a>
+ </menu>
+ <h1>Messages</h1>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <a href="#"><span class="icon icon-back">back</span></a>
+ <menu type="toolbar">
+ <button><span class="icon icon-edit">edit</span></button>
+ </menu>
+ <h1>Mark Alfenito</h1>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <button><span class="icon icon-menu">menu</span></button>
+ <menu type="toolbar">
+ <button><span class="icon icon-edit">edit</span></button>
+ <button><span class="icon icon-add">add</span></button>
+ </menu>
+ <h1>Inbox <em>(2)</em></h1>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <button><span class="icon icon-close">close</span></button>
+ <menu type="toolbar">
+ <button>done</button>
+ </menu>
+ <h1>Title</h1>
+ </header>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <button><span class="icon icon-back">back</span></button>
+ <menu type="toolbar">
+ <button><span class="icon icon-user">user</span></button>
+ </menu>
+ <form action="#">
+ <input type="text" placeholder="search" required="required">
+ <button type="reset">Remove text</button>
+ </form>
+ </header>
+ </section>
+
+ <section role="region" class="skin-dark">
+ <header>
+ <a href="#"><span class="icon icon-back">back</span></a>
+ <h1>Song title</h1>
+ </header>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <section role="region" class="skin-dark">
+ <header>
+ <h1>Song title</h1>
+ </header>
+ </section>
+
+ <section role="region" class="skin-organic">
+ <header>
+ <a href="#"><span class="icon icon-back">back</span></a>
+ <h1>Settings</h1>
+ </header>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <div class="skin-organic">
+ <section role="region">
+ <header>
+ <h1>Settings</h1>
+ </header>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <a href="#"><span class="icon icon-close">close</span></a>
+ <h1>Settings</h1>
+ </header>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+ </div>
+
+</body>
+</html>
View
204 style/lists.css
@@ -0,0 +1,204 @@
+/* ----------------------------------
+ * Lists
+ * ---------------------------------- */
+
+[data-type="list"] {
+ font-family: "MozTT", "Moz", Sans-serif;
+ font-weight: 400;
+ padding: 0 1.5rem;
+}
+
+[data-type="list"] ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+[data-type="list"] strong {
+ font-weight: 500;
+}
+
+/* Title divisors */
+[data-type="list"] header {
+ border-bottom: 0.1rem solid #ff4E00;
+ padding: 0.5rem 1rem;
+ margin: 0;
+ font-size: 1.6rem;
+ line-height: 1.8rem;
+ font-weight: normal;
+ color: #ff4E00;
+ text-transform: uppercase;
+}
+
+/* List items */
+[data-type="list"] li {
+ width: 100%;
+ height: 6rem;
+ -moz-box-sizing: border-box;
+ transition: transform 0.3s ease, padding 0.3s ease;
+ border-bottom: solid 0.1rem #dbd9d9;
+ color: #000;
+ margin: 0;
+ display: block;
+ position: relative;
+ z-index: 1;
+}
+
+[data-type="list"] li:last-child {
+ border: none;
+}
+
+/* Pressed State */
+[data-type="list"] li > a {
+ text-decoration: none;
+ color: #000;
+ display: block;
+ height: 6rem;
+ position: relative;
+ border: none;
+ outline: none;
+}
+
+[data-type="list"] li > a:after {
+ content: "";
+ background-color: #b1f1ff;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+}
+
+[data-type="list"] li > a:active:after {
+ opacity: 0.6;
+ /* Only transition on 'press', not on 'release' */
+ transition: opacity 0.2s ease;
+}
+
+/* Disabled */
+[data-type="list"] li[aria-disabled="true"]:after {
+ content: "";
+ background-color: #e6e6e6;
+ opacity: 0.7;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+
+[data-type="list"] li[aria-disabled="true"] {
+ pointer-events: none;
+}
+
+/* Graphic content */
+[data-type="list"] aside {
+ float: left;
+ margin: 0 0.5rem 0 0;
+ height: 100%;
+ position: relative;
+ z-index: 2;
+}
+
+[data-type="list"] li > a aside,
+[data-type="list"] li > a aside.icon {
+ background-color: transparent;
+ z-index: -1;
+}
+
+[data-type="list"] aside.pack-end {
+ float: right;
+ margin: 0 0 0 0.5rem;
+ text-align: right;
+}
+
+[data-type="list"] aside.icon {
+ width: 3rem;
+ height: 6rem;
+ background: #fff no-repeat left center;
+ font: 0/0 a;
+ display: block;
+ overflow: hidden;
+}
+
+[data-type="list"] aside img {
+ display: block;
+ overflow: hidden;
+ width: 6rem;
+ height: 6rem;
+ background: transparent center center / cover;
+ position: relative;
+ z-index: 1;
+}
+
+/* Text content */
+[data-type="list"] li p {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: none;
+ display: block;
+ margin: 0;
+ color: #5b5b5b;
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
+[data-type="list"] li p:first-of-type {
+ font-size: 1.8rem;
+ line-height: 2.2rem;
+ color: #000;
+ padding: 1rem 0 0;
+}
+
+[data-type="list"] li p:only-child,
+[data-type="list"] li p:first-of-type:last-of-type {
+ line-height: 4rem;
+}
+
+[data-type="list"] li p em {
+ font-size: 1.5rem;
+ font-style: normal;
+}
+
+[data-type="list"] li p time {
+ margin-right: 0.3rem;
+ text-transform: uppercase;
+}
+
+/* Checkable content */
+[data-type="list"] li > label {
+ pointer-events: none;
+ position: absolute;
+ top: -0.1rem;
+ bottom: 0;
+ right: 0;
+ left: -4rem;
+ z-index: 1;
+ width: auto;
+ height: auto;
+ border-top: solid 0.1rem #dbd9d9;
+}
+
+[data-type="list"] li > label input + span {
+ left: 0;
+ margin-left: 0;
+}
+
+/* Edit mode */
+[data-type="list"] [data-type="edit"] li {
+ transform: translateX(4rem);
+ padding-left: 0;
+}
+
+[data-type="list"] [data-type="edit"] li > label {
+ pointer-events: auto;
+}
+
+[data-type="list"] [data-type="edit"] li > a:active:after {
+ display: none;
+}
View
195 style/lists/index.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Lists</title>
+ <meta name="description" content="Displaying an enumeration of a set of items ">
+
+ <link rel="stylesheet" href="../lists.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <link rel="stylesheet" href="../../style/headers.css">
+ <link rel="stylesheet" href="../../style/switches.css">
+ <link rel="stylesheet" href="../../style/buttons.css">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body {
+ background: none;
+ }
+
+ h2.pack-docs {
+ font-size: 1.8rem;
+ font-family: "MozTT", "Moz", Sans-serif;
+ font-weight: 300;
+ color: #666;
+ margin: -1px 0 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 1px #e8e8e8;
+ }
+
+ h2.pack-docs:first-child {
+ margin-top: 0;
+ }
+
+ [data-type="list"] li img[alt="placeholder"] {
+ background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
+ background-size: 100% 100%;
+ font-size: 0;
+ }
+
+ [data-type="list"] aside.icon-callout {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDAzRTc0NDcxNTU2MTFFMjg1RkRBQkIxMEI1NkNEN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAzRTc0NDgxNTU2MTFFMjg1RkRBQkIxMEI1NkNEN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDNFNzQ0NTE1NTYxMUUyODVGREFCQjEwQjU2Q0Q3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMDNFNzQ0NjE1NTYxMUUyODVGREFCQjEwQjU2Q0Q3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PncAgYwAAAHfSURBVHjarJZNKERRFMffzCATJaIUSVGU1IhsUGODlYmNj7KQSZGipCgrKWUhZaKU2PiKjYmsLJSIEhvKSqnJYiILpSYv/kfn1e10n+m9mX/9mnvu3HfPu+fcc+/zBNtCBuQHi2ASJAx3ygKd4FDt9PLvMhgDm4Z70UsegFXpoBkMs90PFozUNMIv/KcM1WBNgxewpnm4BBzZTOxT2uPApJB7kIM3NArEYPqzG0RFfwDcOVhNKa3gHHRp3mYPtIBbpT8ubPlMQLEpAjFysKNxYK3iXfTFQIONgzzwwe0NMGolOcoxl5oDzy6SvAXC6i6ifb+kGXjlcOIETxzW1QHF60mTUCf64tCYOgeWd1NsNV+KNWH4yiuqrTbloQg0sl3ASb5OxYFX2DMi4fOgKp0OPkGI40nKBce8srQ4IN2DQcWuBKegOF0OSPtgQrHrwaWbcKlJlqLk/oBWtvPBEIdP1kgZr/TViQODzykq/w62M0E76OPznyIwAHbZOdXSozqBh2+0ZOrhy8ifZJzJoY0ky4EuJ0GbM0ueqCt8/TpyQLoBNTYXkdQU2KZ7OlkOdAfaCTgDTaDwn7G1INvrsn4uQB1/hcRtxqyDWacrUPXN2zXCxZnDu+wB9HIozV8BBgCRzF4kkpLxhwAAAABJRU5ErkJggg==);
+ }
+
+ [data-type="list"] aside.icon-nopic {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkUxNjQwQkQxNUYwMTFFMjk2MkZDOURGRDUxMTgyQzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkUxNjQwQkUxNUYwMTFFMjk2MkZDOURGRDUxMTgyQzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRTE2NDBCQjE1RjAxMUUyOTYyRkM5REZENTExODJDOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRTE2NDBCQzE1RjAxMUUyOTYyRkM5REZENTExODJDOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhHqZXkAAAB7SURBVHjaYvz//z8DNQHjqIEUAyZcEm5+keJUMxBq2BMgnYXHwt9EG7hr0/KXQCofiCfjMZSFJC8DDZ0GpHIJGEq8gUQY+oNkA8lxKRMx3iDFUJLSIdSwyUA8B4jjgBZxkuVCLC5NAWJmoqMeyUX/SQ2u0dJmEBoIEGAA+6FL5hxHUrsAAAAASUVORK5CYII=);
+ background-position: bottom right;
+ }
+
+ #settings-list { background-color: #eff0eb; }
+
+ #settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
+ #settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
+ #settings-list > header h2 { margin: 0 1.5rem; }
+
+ </style>
+</head>
+
+<body role="application">
+
+ <section data-type="list">
+ <header>Title</header>
+ <ul>
+ <li>
+ <p>Margherita <strong>Gomez</strong></p>
+ </li>
+ <li>
+ <a href="#">
+ <p>Margherita Clickable <strong>Gomez</strong></p>
+ </a>
+ </li>
+ <li>
+ <aside class="pack-end">
+ <img alt="placeholder" src="myimage.jpg">
+ </aside>
+ <a href="#">
+ <p>Margherita <strong>Gomez</strong></p>
+ <p>Family</p>
+ </a>
+ </li>
+ </ul>
+
+ <header>Another title</header>
+ <ul>
+ <li aria-disabled="true">
+ <aside class="pack-end">
+ <img alt="placeholder" src="myimage.jpg">
+ </aside>
+ <a href="#">
+ <p>Margherita <strong>Gomez</strong></p>
+ <p>Family</p>
+ </a>
+ </li>
+ <li>
+ <aside class="pack-end icon icon-nopic"></aside>
+ <a href="#">
+ <aside class="icon icon-callout">
+ asidecall
+ </aside>
+ <p>
+ Margherita <strong>Gomez</strong>
+ <em>(2)</em>
+ </p>
+ <p>
+ <time datetime="17:43">5:43PM</time>
+ Mobile, Vivo
+ </p>
+ </a>
+ </li>
+ </ul>
+ </section>
+
+ <section data-type="list">
+ <header>Edit mode</header>
+ <ul data-type="edit">
+ <li>
+ <label class="danger">
+ <input type="checkbox">
+ <span></span>
+ </label>
+ <aside class="pack-end">
+ <img alt="placeholder" src="myimage.jpg">
+ </aside>
+ <a href="#">
+ <p>Margherita <strong>Gomez</strong></p>
+ <p>Family</p>
+ </a>
+ </li>
+ <li>
+ <label class="danger">
+ <input type="checkbox">
+ <span></span>
+ </label>
+ <aside class="pack-end icon icon-nopic"></aside>
+ <a href="#">
+ <aside class="icon icon-callout"></aside>
+ <p>
+ Margherita <strong>Gomez</strong>
+ <em>(2)</em>
+ </p>
+ <p>
+ <time datetime="17:43">5:43PM</time>
+ Mobile, Vivo
+ </p>
+ </a>
+ </li>
+ </ul>
+ </section>
+
+ <section id="settings-list" role="region" class="skin-organic">
+ <section data-type="list">
+ <ul>
+ <li>
+ <a href="#">
+ <aside class="icon icon-callout"></aside>
+ <p>Phone lock</p>
+ </a>
+ </li>
+ </ul>
+ </section>
+ <header>
+ <h2>Settings style</h2>
+ </header>
+ <section data-type="list">
+ <ul>
+ <li>
+ <aside class="pack-end">
+ <button class="icon icon-dialog">Spain</button>
+ </aside>
+ <p>Time zone</p>
+ <p>Choose your country</p>
+ </li>
+ <li>
+ <aside class="pack-end">
+ <label>
+ <input type="checkbox" data-type="switch" checked>
+ <span></span>
+ </label>
+ </aside>
+ <p>Phone lock</p>
+ </li>
+ </ul>
+ </section>
+ </section>
+
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.