diff options
Diffstat (limited to 'shared/style/headers')
31 files changed, 134 insertions, 0 deletions
diff --git a/shared/style/headers/images/icons/add.png b/shared/style/headers/images/icons/add.png Binary files differnew file mode 100644 index 0000000..92a5a24 --- /dev/null +++ b/shared/style/headers/images/icons/add.png diff --git a/shared/style/headers/images/icons/back-rtl.png b/shared/style/headers/images/icons/back-rtl.png Binary files differnew file mode 100644 index 0000000..a71c7c0 --- /dev/null +++ b/shared/style/headers/images/icons/back-rtl.png diff --git a/shared/style/headers/images/icons/back.png b/shared/style/headers/images/icons/back.png Binary files differnew file mode 100644 index 0000000..5383ee2 --- /dev/null +++ b/shared/style/headers/images/icons/back.png diff --git a/shared/style/headers/images/icons/clear.png b/shared/style/headers/images/icons/clear.png Binary files differnew file mode 100644 index 0000000..9990d01 --- /dev/null +++ b/shared/style/headers/images/icons/clear.png diff --git a/shared/style/headers/images/icons/close.png b/shared/style/headers/images/icons/close.png Binary files differnew file mode 100644 index 0000000..5e73322 --- /dev/null +++ b/shared/style/headers/images/icons/close.png diff --git a/shared/style/headers/images/icons/compose.png b/shared/style/headers/images/icons/compose.png Binary files differnew file mode 100644 index 0000000..d11379f --- /dev/null +++ b/shared/style/headers/images/icons/compose.png diff --git a/shared/style/headers/images/icons/edit.png b/shared/style/headers/images/icons/edit.png Binary files differnew file mode 100644 index 0000000..66c7a2d --- /dev/null +++ b/shared/style/headers/images/icons/edit.png diff --git a/shared/style/headers/images/icons/menu.png b/shared/style/headers/images/icons/menu.png Binary files differnew file mode 100644 index 0000000..d1462c8 --- /dev/null +++ b/shared/style/headers/images/icons/menu.png diff --git a/shared/style/headers/images/icons/reply-all.png b/shared/style/headers/images/icons/reply-all.png Binary files differnew file mode 100644 index 0000000..85580d1 --- /dev/null +++ b/shared/style/headers/images/icons/reply-all.png diff --git a/shared/style/headers/images/icons/reply.png b/shared/style/headers/images/icons/reply.png Binary files differnew file mode 100644 index 0000000..ee47dfe --- /dev/null +++ b/shared/style/headers/images/icons/reply.png diff --git a/shared/style/headers/images/icons/send.png b/shared/style/headers/images/icons/send.png Binary files differnew file mode 100644 index 0000000..054ae3f --- /dev/null +++ b/shared/style/headers/images/icons/send.png diff --git a/shared/style/headers/images/icons/user.png b/shared/style/headers/images/icons/user.png Binary files differnew file mode 100644 index 0000000..c8abb82 --- /dev/null +++ b/shared/style/headers/images/icons/user.png diff --git a/shared/style/headers/images/ui/dark/header.png b/shared/style/headers/images/ui/dark/header.png Binary files differnew file mode 100644 index 0000000..75ec39b --- /dev/null +++ b/shared/style/headers/images/ui/dark/header.png diff --git a/shared/style/headers/images/ui/dark/negative.png b/shared/style/headers/images/ui/dark/negative.png Binary files differnew file mode 100644 index 0000000..3d09e1b --- /dev/null +++ b/shared/style/headers/images/ui/dark/negative.png diff --git a/shared/style/headers/images/ui/dark/separator.png b/shared/style/headers/images/ui/dark/separator.png Binary files differnew file mode 100644 index 0000000..c87aa17 --- /dev/null +++ b/shared/style/headers/images/ui/dark/separator.png diff --git a/shared/style/headers/images/ui/dark/subheader.png b/shared/style/headers/images/ui/dark/subheader.png Binary files differnew file mode 100644 index 0000000..4c7699f --- /dev/null +++ b/shared/style/headers/images/ui/dark/subheader.png diff --git a/shared/style/headers/images/ui/header.png b/shared/style/headers/images/ui/header.png Binary files differnew file mode 100644 index 0000000..b79a761 --- /dev/null +++ b/shared/style/headers/images/ui/header.png diff --git a/shared/style/headers/images/ui/negative.png b/shared/style/headers/images/ui/negative.png Binary files differnew file mode 100644 index 0000000..9e9f428 --- /dev/null +++ b/shared/style/headers/images/ui/negative.png diff --git a/shared/style/headers/images/ui/organic/header.png b/shared/style/headers/images/ui/organic/header.png Binary files differnew file mode 100644 index 0000000..9d3735a --- /dev/null +++ b/shared/style/headers/images/ui/organic/header.png diff --git a/shared/style/headers/images/ui/organic/negative.png b/shared/style/headers/images/ui/organic/negative.png Binary files differnew file mode 100644 index 0000000..b663901 --- /dev/null +++ b/shared/style/headers/images/ui/organic/negative.png diff --git a/shared/style/headers/images/ui/organic/pattern.png b/shared/style/headers/images/ui/organic/pattern.png Binary files differnew file mode 100644 index 0000000..202db19 --- /dev/null +++ b/shared/style/headers/images/ui/organic/pattern.png diff --git a/shared/style/headers/images/ui/organic/separator.png b/shared/style/headers/images/ui/organic/separator.png Binary files differnew file mode 100644 index 0000000..c87aa17 --- /dev/null +++ b/shared/style/headers/images/ui/organic/separator.png diff --git a/shared/style/headers/images/ui/organic/subheader.png b/shared/style/headers/images/ui/organic/subheader.png Binary files differnew file mode 100644 index 0000000..8df7e08 --- /dev/null +++ b/shared/style/headers/images/ui/organic/subheader.png diff --git a/shared/style/headers/images/ui/overlay/header.png b/shared/style/headers/images/ui/overlay/header.png Binary files differnew file mode 100644 index 0000000..fb3ead5 --- /dev/null +++ b/shared/style/headers/images/ui/overlay/header.png diff --git a/shared/style/headers/images/ui/overlay/separator.png b/shared/style/headers/images/ui/overlay/separator.png Binary files differnew file mode 100644 index 0000000..e02f24a --- /dev/null +++ b/shared/style/headers/images/ui/overlay/separator.png diff --git a/shared/style/headers/images/ui/search.png b/shared/style/headers/images/ui/search.png Binary files differnew file mode 100644 index 0000000..08e7e1e --- /dev/null +++ b/shared/style/headers/images/ui/search.png diff --git a/shared/style/headers/images/ui/separator-large.png b/shared/style/headers/images/ui/separator-large.png Binary files differnew file mode 100644 index 0000000..22dee97 --- /dev/null +++ b/shared/style/headers/images/ui/separator-large.png diff --git a/shared/style/headers/images/ui/separator.png b/shared/style/headers/images/ui/separator.png Binary files differnew file mode 100644 index 0000000..0e7f460 --- /dev/null +++ b/shared/style/headers/images/ui/separator.png diff --git a/shared/style/headers/images/ui/shadow.png b/shared/style/headers/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..aec120c --- /dev/null +++ b/shared/style/headers/images/ui/shadow.png diff --git a/shared/style/headers/images/ui/subheader.png b/shared/style/headers/images/ui/subheader.png Binary files differnew file mode 100644 index 0000000..6bd5a23 --- /dev/null +++ b/shared/style/headers/images/ui/subheader.png diff --git a/shared/style/headers/index.html b/shared/style/headers/index.html new file mode 100644 index 0000000..3e402fe --- /dev/null +++ b/shared/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> |