initial commit

README.md

@@ -0,0 +1,11 @@
+# bb_headers
+
+Action menu is a Firefox OS Building block.
+
+Visit [buildingfirefoxos.com](http://buildingfirefoxos.com/building-blocks/headers.html) to see examples.
+
+## Installation
+
+```bash
+$ bower install buildingfirefoxos/bb_headers
+```

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "bb_headers",
+  "version": "1.4",
+  "homepage": "https://github.com/buildingfirefoxos/bb_headers",
+  "authors": [
+    "The gaia team"
+  ],
+  "description": "Headers  - Firefox OS Building Blocks",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

headers.css

@@ -0,0 +1,369 @@
+/* ----------------------------------
+ * 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;
+  background-size: auto 100%;
+}
+
+section[role="region"] > header:first-child h1 {
+  font-size: 2.5rem;
+  line-height: 4.9rem;
+  text-align: left;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 1rem 0 3rem;
+  height: 100%;
+  font-weight: normal;
+}
+
+section[role="region"] > header:first-child h1 em {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-style: normal;
+}
+
+section[role="region"] > header:first-child form {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  padding: 1rem 1rem 0 0.5rem ;
+  margin-left: 3.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-size: 1.5rem;
+  line-height: 3em;
+  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 / 1.7rem auto;
+}
+
+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 {
+  -moz-box-sizing: border-box;
+  position: relative;
+  float: left;
+  width: auto;
+  min-width: 5rem;
+  height: 4.9rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+  line-height: 4.9rem;
+  background: none;
+  text-align: center;
+  text-shadow: none;
+  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 / auto 4.8rem;
+  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;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.1em;
+  color: #fff;
+  border-radius: 0;
+  text-decoration: none;
+}
+
+
+/* Pressed state */
+section[role="region"] > header:first-child button::-moz-focus-inner {
+  outline: none;
+  border: none;
+  margin-top: -0.2rem; /* To fix line-height bug (697451) */
+  padding: 0;
+}
+
+section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
+section[role="region"] > header:first-child > button:not(:disabled):active:after,
+section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
+section[role="region"] > header:first-child > button:not(:disabled):hover:after,
+section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+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;
+}
+
+/* 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;
+}
+
+/* Icon definitions */
+section[role="region"] > header:first-child .icon {
+  position: relative;
+  float: none;
+  display: inline-block;
+  vertical-align: top;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 3rem auto;
+  font-size: 0;
+  overflow: hidden;
+}
+
+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);
+}
+
+section[role="region"] > header:first-child .icon.icon-options {
+  background-image: url(headers/images/icons/options.png);
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"] > header:first-child > button,
+section[role="region"] > header:first-child > a {
+  position: relative;
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  float: left;
+  overflow: visible;
+  margin: 0 -4rem 0 0;
+}
+
+section[role="region"] > header:first-child > button:after,
+section[role="region"] > header:first-child > a:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  width: 3.2rem;
+  height: 4.9rem;
+  background: url(headers/images/ui/separator.png) no-repeat right center / 0.2rem 4.8rem;
+}
+
+section[role="region"] > header:first-child > button .icon,
+section[role="region"] > header:first-child > a .icon {
+  display: block;
+  margin: 0;
+  font-size: 0;
+}
+
+/* ----------------------------------
+ * HEADERS: subheader
+ * ---------------------------------- */
+
+section[role="region"] > header {
+  z-index: 0;
+  height: auto;
+}
+
+section[role="region"] > header:after {
+  display: none;
+}
+
+section[role="region"] header h2 {
+  margin: 0;
+  padding: 0.8rem 3rem;
+  color: #424242;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+  border-bottom: solid 0.1rem #e6e6e6;
+}
+
+/* ----------------------------------
+ * HEADERS: dark
+ * ---------------------------------- */
+section[role="region"].skin-dark > header:first-child,
+.skin-dark section[role="region"] > header:first-child {
+  background-image: url(headers/images/ui/dark/header.png);
+}
+
+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);
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"].skin-dark > header:first-child a:after,
+.skin-dark section[role="region"] > header:first-child a:after,
+section[role="region"].skin-dark > header:first-child button:after,
+.skin-dark section[role="region"] > header:first-child button:after {
+  background-image: url(headers/images/ui/dark/separator.png);
+}
+
+section[role="region"].skin-dark header h2,
+.skin-dark section[role="region"] header h2 {
+  background: #2e3c3f url(headers/images/ui/organic/subheader.png);
+  color: #fff;
+  border: none;
+}
+
+/* ----------------------------------
+ * HEADERS: organic
+ * ---------------------------------- */
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+  background-image: url(headers/images/ui/noise-pattern.png), url(headers/images/ui/organic/header.png);
+  background-size: auto;
+}
+
+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);
+}
+
+/* Navigation links (back, cancel, etc) */
+section[role="region"].skin-organic > header:first-child a:after,
+.skin-organic section[role="region"] > header:first-child a:after,
+section[role="region"].skin-organic > header:first-child button:after,
+.skin-organic section[role="region"] > header:first-child button:after {
+  background-image: url(headers/images/ui/organic/separator.png);
+}
+
+section[role="region"].skin-organic header h2,
+.skin-organic section[role="region"] header h2 {
+  background: #5c6a6d url(headers/images/ui/organic/subheader.png);
+  color: #fff;
+  border: none;
+}
+
+/* ----------------------------------
+ * 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);
+}
+