Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fix bug 844531 - Add more Gaia CSS and art resources to Kuma media di…

…rectory
  • Loading branch information...
commit f2de1232dd3efdaa59ed49f01b1dc53f789602fc 1 parent 8b5ef38
@lmorchard lmorchard authored
Showing with 1,686 additions and 0 deletions.
  1. +1 −0  media/gaia/shared/style_unstable/README.md
  2. +219 −0 media/gaia/shared/style_unstable/drawer.css
  3. BIN  media/gaia/shared/style_unstable/drawer/images/icons/menu.png
  4. BIN  media/gaia/shared/style_unstable/drawer/images/ui/header.png
  5. BIN  media/gaia/shared/style_unstable/drawer/images/ui/header/header.png
  6. BIN  media/gaia/shared/style_unstable/drawer/images/ui/header/shadow.png
  7. BIN  media/gaia/shared/style_unstable/drawer/images/ui/negative.png
  8. BIN  media/gaia/shared/style_unstable/drawer/images/ui/pattern.png
  9. BIN  media/gaia/shared/style_unstable/drawer/images/ui/pattern_subheader.png
  10. BIN  media/gaia/shared/style_unstable/drawer/images/ui/separator.png
  11. BIN  media/gaia/shared/style_unstable/drawer/images/ui/separator_large.png
  12. BIN  media/gaia/shared/style_unstable/drawer/images/ui/shadow.png
  13. BIN  media/gaia/shared/style_unstable/drawer/images/ui/shadow_header.png
  14. +95 −0 media/gaia/shared/style_unstable/drawer/index.html
  15. +204 −0 media/gaia/shared/style_unstable/lists.css
  16. +195 −0 media/gaia/shared/style_unstable/lists/index.html
  17. +78 −0 media/gaia/shared/style_unstable/progress_activity.css
  18. BIN  media/gaia/shared/style_unstable/progress_activity/images/ui/activity.png
  19. BIN  media/gaia/shared/style_unstable/progress_activity/images/ui/default.png
  20. +130 −0 media/gaia/shared/style_unstable/progress_activity/index.html
  21. +71 −0 media/gaia/shared/style_unstable/scrolling.css
  22. BIN  media/gaia/shared/style_unstable/scrolling/images/icons/favorites.png
  23. BIN  media/gaia/shared/style_unstable/scrolling/images/icons/search.png
  24. BIN  media/gaia/shared/style_unstable/scrolling/images/ui/background.png
  25. +75 −0 media/gaia/shared/style_unstable/scrolling/index.html
  26. +72 −0 media/gaia/shared/style_unstable/seekbars.css
  27. BIN  media/gaia/shared/style_unstable/seekbars/images/ui/handler.png
  28. +92 −0 media/gaia/shared/style_unstable/seekbars/index.html
  29. +201 −0 media/gaia/shared/style_unstable/tabs.css
  30. +74 −0 media/gaia/shared/style_unstable/tabs/filters.html
  31. BIN  media/gaia/shared/style_unstable/tabs/images/ui/shadow-revert.png
  32. BIN  media/gaia/shared/style_unstable/tabs/images/ui/shadow.png
  33. +75 −0 media/gaia/shared/style_unstable/tabs/index.html
  34. +42 −0 media/gaia/shared/style_unstable/toolbars.css
  35. +62 −0 media/gaia/shared/style_unstable/toolbars/index.html
View
1  media/gaia/shared/style_unstable/README.md
@@ -0,0 +1 @@
+This `shared/style_unstable` directory holds all building blocks that aren’t ready for `shared/style` yet.
View
219 media/gaia/shared/style_unstable/drawer.css
@@ -0,0 +1,219 @@
+/* ----------------------------------
+* Drawer
+* ---------------------------------- */
+
+/* Main region */
+section[role="region"] {
+ width: 100%;
+ transition: all 0.25s ease;
+ position: relative;
+ left: -2rem;
+ z-index: 100;
+ padding-left: 2rem;
+}
+
+section[role="region"]:target {
+ transform: translateX(80%);
+}
+
+/* Overwrite headers.css to increase menu icon */
+section[role="region"] > header:first-child {
+ margin-left: -1.6rem;
+}
+
+section[role="region"] > header:first-child > a {
+ width: 6rem;
+}
+
+section[role="region"] > header:first-child > a .icon.icon-menu {
+ background-position: center center;
+}
+
+section[role="region"] > header:first-child > a .icon:after {
+ width: 4rem;
+}
+
+section[role="region"] > header:first-child > a {
+ background-position: 4rem center;
+}
+
+section[role="region"] > header:first-child h1 {
+ margin-left: 5rem;
+}
+
+/* Hide anchor to change target */
+section[role="region"] > header:first-child > a:last-of-type {
+ visibility: visible;
+}
+section[role="region"]:target > header:first-child > a:last-of-type {
+ visibility: hidden;
+}
+
+
+/* Sidebar */
+section[data-type="sidebar"] {
+ position: absolute;
+ width: 80%;
+ background: url(drawer/images/ui/pattern.png) repeat;
+ height: 100%;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ font-family: "MozTT", Sans-serif;
+}
+
+/* Sidebar header */
+section[data-type="sidebar"] > header {
+ position: relative;
+ z-index: 10;
+ height: 5rem;
+ color: #fff;
+ background: url(drawer/images/ui/header.png) repeat-x left top;
+}
+
+section[data-type="sidebar"] > header:after {
+ content: "";
+ height: 0.3rem;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: url(drawer/images/ui/shadow_header.png) repeat-x left top;
+ background-size: auto 100%;
+}
+
+section[data-type="sidebar"] > header h1 {
+ font: 2.2rem/4.8rem "MozTT", Sans-serif;
+ text-align: left;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ overflow: hidden;
+ margin: 0 0 0 3rem;
+ height: 100%
+}
+
+section[data-type="sidebar"] > header h1 em {
+ font: bold 1.5rem/1em "MozTT", Sans-serif;
+}
+
+/* Generic set of actions in toolbar */
+section[data-type="sidebar"] > header menu[type="toolbar"] {
+ height: 100%;
+ float: right;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] a,
+section[data-type="sidebar"] > header menu[type="toolbar"] button {
+ height: 4.9rem;
+ line-height: 4.9rem;
+ float: left;
+ background: none;
+ padding: 0 1.75rem;
+ -moz-box-sizing: border-box;
+ min-width: 5rem;
+ text-align: center;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
+section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
+ background: url(drawer/images/ui/separator.png) no-repeat left center;
+}
+
+section[data-type="sidebar"] > header menu[type="toolbar"] {
+ padding: 0;
+ margin: 0;
+}
+
+section[data-type="sidebar"] > header a,
+section[data-type="sidebar"] > header button {
+ border: none;
+ background: none;
+ padding: 0;
+ overflow: hidden;
+ font: 600 1.4rem/1.1em "MozTT", Sans-serif;
+ color: #fff;
+}
+
+section[data-type="sidebar"] > header a:first-letter,
+section[data-type="sidebar"] > header button:first-letter {
+ text-transform: uppercase;
+}
+
+/* Icon definitions */
+section[data-type="sidebar"] > header .icon {
+ display: inline-block;
+ width: 3rem;
+ height: 3rem;
+ margin: 0 -1rem;
+ background: transparent no-repeat center center;
+ font-size: 0;
+ overflow: hidden;
+ position: relative;
+ height: 4.9rem;
+}
+
+section[data-type="sidebar"]:after {
+ content: "";
+ width: 1rem;
+ background: url(drawer/images/ui/shadow.png) right top repeat-y;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 5;
+}
+
+section[data-type="sidebar"] > nav {
+ overflow-y: auto;
+ max-height: 100%;
+ margin-right: -0.8rem;
+}
+
+section[data-type="sidebar"] > nav > h2 {
+ font-weight: bold;
+ font-size: 1.4rem;
+ line-height: 3.3rem;
+ text-indent: 3rem;
+ color: #fff;
+ background: url(drawer/images/ui/pattern_subheader.png) repeat left top;
+ border-bottom: 1px solid #596068;
+ margin: 0;
+ padding-right: 0.8rem;
+}
+
+section[data-type="sidebar"] [role="toolbar"] {
+ position: absolute;
+}
+
+section[data-type="sidebar"] > nav > ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+section[data-type="sidebar"] > nav > ul > li {
+ color: #fff;
+ list-style: none;
+ transition: background 0.2s ease;
+}
+
+section[data-type="sidebar"] > nav > ul > li:active {
+ background: #00ABCC;
+}
+
+section[data-type="sidebar"] > nav > ul > li > a {
+ text-decoration: none;
+ color: #fff;
+ font-size: 1.6rem;
+ line-height: 4.35rem;
+ border-bottom: 1px solid #596068;
+ text-indent: 3rem;
+ padding-right: 0.8rem;
+ width: 100%;
+ -moz-box-sizing: border-box;
+ display: block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
View
BIN  media/gaia/shared/style_unstable/drawer/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  media/gaia/shared/style_unstable/drawer/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  media/gaia/shared/style_unstable/drawer/images/ui/header/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  media/gaia/shared/style_unstable/drawer/images/ui/header/shadow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/drawer/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  media/gaia/shared/style_unstable/drawer/images/ui/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  media/gaia/shared/style_unstable/drawer/images/ui/pattern_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  media/gaia/shared/style_unstable/drawer/images/ui/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  media/gaia/shared/style_unstable/drawer/images/ui/separator_large.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/drawer/images/ui/shadow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/drawer/images/ui/shadow_header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
95 media/gaia/shared/style_unstable/drawer/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Drawer</title>
+ <meta name="description" content="Hidden menu options triggered by the menu button in the header">
+
+ <link rel="stylesheet" href="../../style/headers.css">
+ <link rel="stylesheet" href="../drawer.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ height: 100%;
+ overflow-x: hidden;
+ }
+
+ h2.bb-docs {
+ font-size: 1.8rem;
+ font-family: "MozTT", Sans-serif;
+ font-weight: lighter;
+ color: #666;
+ margin: -0.1rem 0 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 0.1rem #e8e8e8;
+ }
+
+ section[role="region"] {
+ height: 100%;
+ font: 2.2rem/1em "MozTT", Sans-serif;
+ }
+
+ div[role="main"] {
+ background: #fff;
+ height: calc(100% - 5rem);
+ overflow: hidden;
+ }
+
+ div[role="main"] p {
+ margin: 2rem 2.5rem;
+ }
+
+ /* Base icons */
+ section[data-type="sidebar"] > header .icon.icon-add {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
+ }
+ </style>
+
+</head>
+
+<body role="application">
+
+ <section data-type="sidebar">
+ <header>
+ <menu type="toolbar">
+ <a href="#"><span class="icon icon-add">add</span></a>
+ </menu>
+ <h1>Title <em>(9)</em></h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="#">label</a></li>
+ <li><a href="#">label</a></li>
+ <li><a href="#">label</a></li>
+ <li><a href="#">label</a></li>
+ </ul>
+ <h2>Subtitle</h2>
+ <ul>
+ <li><a href="#">label</a></li>
+ <li><a href="#">label</a></li>
+ <li><a href="#">label larger label than the </a></li>
+ <li><a href="#">label</a></li>
+ </ul>
+ </nav>
+ </section>
+
+ <section id="drawer" role="region">
+ <header>
+ <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
+ <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
+ <h1>Inbox</h1>
+ </header>
+ <div role="main"></div>
+ </section>
+
+</body>
+</html>
View
204 media/gaia/shared/style_unstable/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 media/gaia/shared/style_unstable/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>
View
78 media/gaia/shared/style_unstable/progress_activity.css
@@ -0,0 +1,78 @@
+/* ----------------------------------
+ * Progress + activities
+ * ---------------------------------- */
+
+/* Spinner */
+progress:not([value]) {
+ background: url(progress_activity/images/ui/default.png) no-repeat center center / 100% auto;
+ animation: 0.9s rotate infinite steps(30);
+ width: 2.9rem;
+ height: 2.9rem;
+ border: none;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+progress:not([value])::-moz-progress-bar {
+ background: none;
+}
+
+/* Progress bar */
+progress[value] {
+ width: 100%;
+ background: #333;
+ border: none;
+ border-radius: 0.3rem;
+ height: 0.3rem;
+ display: block;
+}
+
+progress[value]::-moz-progress-bar {
+ background: #01c5ed;
+ border-radius: 0;
+}
+
+/* Progress bar */
+progress[value].pack-activity {
+ background-image: url(progress_activity/images/ui/activity.png);
+ background-repeat: repeat;
+ animation: 0.5s move infinite steps(15);
+}
+
+/* Labels */
+p[role="status"] {
+ padding: 0.5rem;
+ font: 300 2.25rem/1.4em "MozTT", Sans-serif;
+ color: #fff;
+}
+
+p[role="status"] progress:not([value]) {
+ margin-right: 0.5rem;
+}
+
+p[role="status"] progress:not([value]) + span {
+ margin-bottom: 0;
+}
+
+p[role="status"] span {
+ display: inline-block;
+ vertical-align: middle;
+ margin-bottom: 0.5rem;
+}
+
+/* Light Activity bar */
+progress[value].pack-activity.light {
+ background-color: #f4f4f4;
+}
+
+
+/* Animations */
+@keyframes rotate {
+ from { transform: rotate(1deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes move {
+ from { background-position: 0 0; }
+ to { background-position: 1rem 0; }
+}
View
BIN  media/gaia/shared/style_unstable/progress_activity/images/ui/activity.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/progress_activity/images/ui/default.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
130 media/gaia/shared/style_unstable/progress_activity/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Progress & Activity Indicators</title>
+ <meta name="description" content="Providing user with visual feedback that a process is active">
+
+ <link rel="stylesheet" href="../../style/headers.css">
+ <link rel="stylesheet" href="../../style/confirm.css">
+ <link rel="stylesheet" href="../progress_activity.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body { background: none; }
+
+ h2.bb-docs {
+ font-size: 1.8rem;
+ font-family: "Open Sans", Sans-serif;
+ font-weight: lighter;
+ color: #666;
+ margin: 10px 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 1px #e8e8e8;
+ }
+
+ form[role="dialog"][data-type="confirm"] {
+ position: relative;
+ height: 30rem;
+ }
+
+ form[role="dialog"][data-type="confirm"] > section {
+ overflow: hidden;
+ }
+
+ div.browser {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAA0CAIAAAAovDW6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMkM4Nzg2RjUzNjIxMUUyQkM1QUFGNjVGMzY2NDQwRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMkM4Nzg3MDUzNjIxMUUyQkM1QUFGNjVGMzY2NDQwRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIyQzg3ODZENTM2MjExRTJCQzVBQUY2NUYzNjY0NDBGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIyQzg3ODZFNTM2MjExRTJCQzVBQUY2NUYzNjY0NDBGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+xgPuugAAIJtJREFUeNrsXQ14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) no-repeat left top;
+ height: 5.2rem;
+ background-size: 32rem;
+ }
+ div.browser + progress {
+ width: 32rem;
+ margin-bottom: 1rem;
+ }
+ </style>
+</head>
+
+<body role="application">
+
+ <section role="region">
+ <h2 class="bb-docs">Spinner</h2>
+ <progress></progress>
+
+ <h2 class="bb-docs">Activity bar</h2>
+ <progress class="pack-activity" value="0" max="100"></progress>
+
+ <h2 class="bb-docs">Progress bar</h2>
+ <progress value="80" max="100"></progress>
+
+ <h2 class="bb-docs">Progress + activity bar</h2>
+ <progress class="pack-activity" value="80" max="100"></progress>
+ </section>
+
+ <h2 class="bb-docs">Progress bar + Confirm BB</h2>
+ <form role="dialog" data-type="confirm">
+ <section>
+ <h1>Name of the action</h1>
+ <p style="text-align: center">
+ <progress></progress>
+ </p>
+ </section>
+ <menu>
+ <button class="full">Cancel</button>
+ </menu>
+ </form>
+
+ <br/>
+
+ <form role="dialog" data-type="confirm">
+ <section>
+ <h1>Name of the action</h1>
+ <p role="status">
+ <span>80%</span>
+ <progress value="80" max="100"></progress>
+ </p>
+ </section>
+ <menu>
+ <button class="full">Cancel</button>
+ </menu>
+ </form>
+
+
+ <h2 class="bb-docs">Progress bar in Headers</h2>
+ <section role="region">
+ <header>
+ <a href="#"><span class="icon icon-back">back</span></a>
+ <h1>Song title</h1>
+ </header>
+ <progress value="80" max="100"></progress>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <section role="region">
+ <header>
+ <a href="#"><span class="icon icon-back">back</span></a>
+ <h1>Song title</h1>
+ </header>
+ <progress value="80" max="100" class="pack-activity"></progress>
+ <header>
+ <h2>Subheader text</h2>
+ </header>
+ </section>
+
+ <h2 class="bb-docs">Activity bar in Headers</h2>
+ <div class="browser"></div>
+ <progress class="pack-activity light" value="0" max="100"></progress>
+</body>
+</html>
View
71 media/gaia/shared/style_unstable/scrolling.css
@@ -0,0 +1,71 @@
+/* ----------------------------------
+ * Scrolling
+ * ---------------------------------- */
+nav[data-type="scrollbar"] {
+ font-family: "MozTT", "Moz", Sans-serif;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+
+/* Mirror */
+nav[data-type="scrollbar"] p {
+ position: absolute;
+ right: 4rem;
+ top: 30%;
+ margin: 0;
+ width: 10.5rem;
+ height: 10.5rem;
+ opacity: 0;
+ font: 200 6rem/10.5rem "MozTT", "Moz", Sans-serif;
+ color: #fff;
+ background: url(scrolling/images/ui/background.png) repeat left top;
+ pointer-events: none;
+ text-align: center;
+ transition: opacity;
+}
+
+nav[data-type="scrollbar"] ol {
+ padding: 0.3rem 0;
+ margin: 0;
+ border-radius: 4rem;
+ opacity: 0.6;
+ list-style: none;
+}
+
+nav[data-type="scrollbar"] li {
+ font-size: 1rem;
+ line-height: 1.4em;
+ text-align: center;
+ text-transform: uppercase;
+ width: 4.5rem;
+}
+
+nav[data-type="scrollbar"] li a {
+ display: block;
+ color: #333;
+ width: 100%;
+ text-indent: 1.5rem;
+ text-decoration: none;
+}
+
+/* Top action icons */
+nav[data-type="scrollbar"] li .pack-icon-search,
+nav[data-type="scrollbar"] li .pack-icon-favorites {
+ width: 1.2rem;
+ height: 1.2rem;
+ font-size: 0;
+ vertical-align: middle;
+ background: transparent no-repeat center center;
+}
+nav[data-type="scrollbar"] li span:not([hidden]) {
+ display: inline-block;
+}
+
+nav[data-type="scrollbar"] li .pack-icon-search {
+ background-image: url(scrolling/images/icons/search.png);
+}
+
+nav[data-type="scrollbar"] li .pack-icon-favorites {
+ background-image: url(scrolling/images/icons/favorites.png);
+}
View
BIN  media/gaia/shared/style_unstable/scrolling/images/icons/favorites.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/scrolling/images/icons/search.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/scrolling/images/ui/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
75 media/gaia/shared/style_unstable/scrolling/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Scrolling</title>
+ <meta name="description" content="Vertically slide text, images and/or video across the device's display">
+
+ <link rel="stylesheet" href="../scrolling.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body {
+ background: none;
+ }
+
+ body[role="application"] nav[data-type="scrollbar"] p {
+ opacity: 1;
+ }
+
+ body[role="application"] nav[data-type="scrollbar"] {
+ top: 6.8rem;
+ }
+ </style>
+</head>
+
+<body role="application">
+
+ <section role="region" id="main">
+ <nav data-type="scrollbar">
+ <p>A</p>
+ <ol>
+ <li><a href="#"><span class="pack-icon-search">Search</span></a></li>
+ <li><a href="#"><span class="pack-icon-favorites">favorites</span></a></li>
+ <li><a href="#">A</a></li>
+ <li><a href="#">B</a></li>
+ <li><a href="#">C</a></li>
+ <li><a href="#">D</a></li>
+ <li><a href="#">E</a></li>
+ <li><a href="#">F</a></li>
+ <li><a href="#">G</a></li>
+ <li><a href="#">H</a></li>
+ <li><a href="#">I</a></li>
+ <li><a href="#">J</a></li>
+ <li><a href="#">K</a></li>
+ <li><a href="#">L</a></li>
+ <li><a href="#">M</a></li>
+ <li><a href="#">N</a></li>
+ <li><a href="#">O</a></li>
+ <li><a href="#">P</a></li>
+ <li><a href="#">Q</a></li>
+ <li><a href="#">R</a></li>
+ <li><a href="#">S</a></li>
+ <li><a href="#">T</a></li>
+ <li><a href="#">U</a></li>
+ <li><a href="#">V</a></li>
+ <li><a href="#">W</a></li>
+ <li><a href="#">X</a></li>
+ <li><a href="#">Y</a></li>
+ <li><a href="#">Z</a></li>
+ <li><a href="#">#</a></li>
+ </ol>
+ </nav>
+ </section>
+
+</body>
+</html>
View
72 media/gaia/shared/style_unstable/seekbars.css
@@ -0,0 +1,72 @@
+/* ----------------------------------
+* Seekbars
+* ---------------------------------- */
+div[role="slider"] {
+ position: relative;
+ height: 3.5rem;
+}
+
+div[role="slider"] > div {
+ display: block;
+ overflow: hidden;
+ padding: 1rem 0;
+ position: relative;
+ height: 1.5rem;
+}
+
+div[role="slider"] progress {
+ width: 100%;
+ background: #000;
+ border: none;
+ height: 0.1rem;
+}
+
+div[role="slider"] progress::-moz-progress-bar {
+ background: #01c5ed;
+ height: 0.6rem;
+ margin-top: -0.3rem;
+}
+
+div[role="slider"] > label {
+ font-size: 1.5rem;
+ line-height: 3.5rem;
+ font-family: "Open Sans", Sans-serif;
+ color: #00aacb;
+ float: right;
+ padding: 0 0 0 1rem;
+}
+
+div[role="slider"] label:first-of-type {
+ float: left;
+ padding: 0 1rem 0 0;
+}
+
+div[role="slider"] > label.icon {
+ width: 3rem;
+ height: 3rem;
+ margin-top: 0.5rem;
+ font-size: 0;
+ background: top right no-repeat;
+}
+
+div[role="slider"] > label.icon:first-of-type {
+ background-position: top left;
+}
+
+div[role="slider"] button {
+ width: 3.2rem;
+ height: 3.2rem;
+ background: url(seekbars/images/ui/handler.png) no-repeat center center;
+ font: 0/0 a;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin: -1.5rem 0 0 -1.6rem;
+ border-radius: 3.2rem;
+ border: solid 1px transparent;
+ transition: border 0.15s ease;
+}
+
+div[role="slider"] button:active {
+ border: solid 0.5rem #01c5ed;
+}
View
BIN  media/gaia/shared/style_unstable/seekbars/images/ui/handler.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
92 media/gaia/shared/style_unstable/seekbars/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Seekbars</title>
+ <meta name="description" content="Scroll through content (i.e. a song or video) ">
+
+ <link rel="stylesheet" href="../seekbars.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ }
+
+ body {
+ background: #fff;
+ }
+
+ h2.bb-docs {
+ font-size: 1.8rem;
+ font-family: "Open Sans", Sans-serif;
+ font-weight: lighter;
+ color: #666;
+ margin: -1px 0 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 1px #e8e8e8;
+ }
+
+ body[role="application"] section[role="region"]{
+ background: #fff;
+ padding: 2rem;
+ }
+
+ body[role="application"] section[role="region"] button {
+ left: 80%;
+ }
+
+ body[role="application"] section[role="region"] label.icon {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA8CAYAAAB1odqiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjUyNDA2NjkwQkFBMTFFMkJEOTE4NzMxRUE4NjczNTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjUyNDA2NkEwQkFBMTFFMkJEOTE4NzMxRUE4NjczNTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyNTI0MDY2NzBCQUExMUUyQkQ5MTg3MzFFQTg2NzM1NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyNTI0MDY2ODBCQUExMUUyQkQ5MTg3MzFFQTg2NzM1NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvd7+zQAAApxSURBVHjavJh5VFTX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);
+ }
+
+ body[role="application"] section[role="region"] label.icon:last-of-type {
+ background-position: right -30px;
+ }
+ </style>
+
+</head>
+
+<body role="application">
+
+ <h2 class="bb-docs">Default seeker</h2>
+ <section role="region">
+ <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
+ <div>
+ <progress value="80" max="100"></progress>
+ <button>handler</button>
+ </div>
+ </div>
+ </section>
+
+ <h2 class="bb-docs">Value seeker</h2>
+ <section role="region">
+ <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
+ <label>0</label>
+ <label>100</label>
+ <div>
+ <progress value="80" max="100"></progress>
+ <button>handler</button>
+ </div>
+ </div>
+ </section>
+
+ <h2 class="bb-docs">Icon seeker</h2>
+ <section role="region">
+ <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
+ <label class="icon">0</label>
+ <label class="icon">100</label>
+ <div>
+ <progress value="80" max="100"></progress>
+ <button>handler</button>
+ </div>
+ </div>
+ </section>
+
+</body>
+</html>
View
201 media/gaia/shared/style_unstable/tabs.css
@@ -0,0 +1,201 @@
+/* ----------------------------------
+* Tabs
+* ---------------------------------- */
+
+[role="tablist"] {
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ font-family: "Open Sans", Sans-serif;
+}
+
+[role="tablist"] > [role="tab"] {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ float: left;
+}
+
+/* Items calcs */
+[role="tablist"][data-items="2"] > [role="tab"] {
+ width: calc(100% / 2);
+}
+
+[role="tablist"][data-items="3"] > [role="tab"] {
+ width: calc(100% / 3);
+}
+
+[role="tablist"][data-items="4"] > [role="tab"] {
+ width: calc(100% / 4);
+}
+
+[role="tablist"][data-items="5"] > [role="tab"] {
+ width: calc(100% / 5);
+}
+
+[role="tablist"] > [role="tab"] > a {
+ font-size: 1.3rem;
+ text-decoration: none;
+ line-height: 4rem;
+ text-align: center;
+ color: #FFF;
+ float: left;
+ width: 100%;
+ background: #000 no-repeat center top;
+ position: relative;
+ color: #fff;
+}
+
+[role="tablist"] > [role="tab"] > a:active {
+ background-color: #008aaa;
+ color: #fff;
+}
+
+[role="tablist"] > [role="tab"][aria-disabled="true"] > a:active {
+ background-color: #000;
+}
+
+[role="tablist"] > [role="tab"] > a.icon {
+ font-size: 0;
+}
+
+[role="tablist"] > [role="tab"] > a.icon:after {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: none no-repeat center top;
+ left: 0;
+ z-index: 1;
+}
+
+
+/* Selected state */
+[role="tablist"] > [role="tab"]:target > a {
+ color: #62c6f5
+}
+
+[role="tablist"] > [role="tab"]:target > a.icon:after {
+ background-position: center -4rem;
+}
+
+/* Disabled state */
+[role="tablist"] > [role="tab"][aria-disabled="true"] > a {
+ color: #4d4d4d;
+}
+
+[role="tablist"] > [role="tab"][aria-disabled="true"] > a.icon:after {
+ background-position: center -8rem;
+}
+
+[role="tablist"] [role="tabpanel"] {
+ position: absolute;
+ top: 4rem;
+ left: 0;
+ visibility: hidden;
+ width: 100%;
+ height: calc(100% - 4rem);
+ z-index: 10;
+ display: block;
+ overflow: auto;
+}
+
+[role="tablist"] :target [role="tabpanel"] {
+ z-index: 1;
+ visibility: visible;
+}
+
+/* Position bottom */
+[role="tablist"].bottom > [role="tab"] {
+ height: 100%;
+}
+
+[role="tablist"].bottom > [role="tab"] > a {
+ position: relative;
+ height: 4rem;
+ top: calc(100% - 4rem);
+}
+
+[role="tablist"].bottom [role="tabpanel"] {
+ top: 0;
+}
+
+/* ----------------------------------
+ * Filters
+ * ---------------------------------- */
+
+[role="tablist"][data-type="filter"] {
+ background: #c7c7c7;
+ display: inline-block;
+ width: 100%;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ position: relative;
+}
+
+[role="tablist"][data-type="filter"]:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 100%;
+ height: 0.2rem;
+ background: url(tabs/images/ui/shadow.png) repeat-x left bottom;
+}
+
+[role="tablist"][data-type="filter"] > [role="tab"] {
+ float: left;
+ text-align: center;
+ -moz-box-sizing: border-box;
+ color: #737272;
+ border-bottom: solid 1px #999;
+}
+
+[role="tablist"][data-type="filter"] > [role="tab"] > a {
+ display: block;
+ padding: 1.3rem 0.5rem;
+ text-decoration: none;
+ color: #737272;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: transparent;
+ font: bold 1.4rem/1em "Open Sans", Sans-serif;
+ width: auto;
+ float: none;
+}
+
+/* Selected state */
+[role="tablist"][data-type="filter"] > [role="tab"]:target {
+ background: #fff;
+ border: solid 1px #999;
+ border-top: none;
+ color: #000;
+}
+
+[role="tablist"][data-type="filter"] > [role="tab"]:target > a {
+ color: #000;
+}
+
+[role="tablist"][data-type="filter"] > [role="tab"] > a:active {
+ background-color: #008aaa;
+ color: #fff;
+}
+
+/* Bottom position */
+[role="tablist"][data-type="filter"].bottom:before {
+ bottom: 100%;
+ top: auto;
+ background-image: url(tabs/images/ui/shadow-revert.png);
+}
+
+[role="tablist"][data-type="filter"].bottom > [role="tab"] {
+ border-bottom: none;
+ border-top: solid 1px #999;
+}
+[role="tablist"][data-type="filter"].bottom > [role="tab"] > a {
+ height: auto;
+}
View
74 media/gaia/shared/style_unstable/tabs/filters.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Filters</title>
+ <meta name="description" content="Filters can be used to enable the user to view a single set of data in a different lens">
+
+ <link rel="stylesheet" href="../tabs.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body {
+ background: none;
+ }
+
+ h2.bb-docs {
+ font-size: 1.8rem;
+ font-family: "Open Sans", Sans-serif;
+ font-weight: lighter;
+ color: #666;
+ margin: -1px 0 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 1px #e8e8e8;
+ }
+
+ body[role="application"] ul[role="tablist"][data-type="filter"] {
+ margin: 10px 0;
+ }
+ </style>
+</head>
+<body role="application">
+ <section role="region">
+
+ <h2 class="bb-docs">Default position</h2>
+ <ul role="tablist" data-type="filter" data-items="2">
+ <li id="filter1-1" role="tab"><a href="#filter1-1">Action 01</a></li>
+ <li id="filter1-2" role="tab"><a href="#filter1-2">Action 02</a></li>
+ </ul>
+
+ <ul role="tablist" data-type="filter" data-items="3">
+ <li id="filter2-1" role="tab"><a href="#filter2-1">Action 01</a></li>
+ <li id="filter2-2" role="tab"><a href="#filter2-2">Action 02</a></li>
+ <li id="filter2-3" role="tab"><a href="#filter2-3">Action 02</a></li>
+ </ul>
+
+ <ul role="tablist" data-type="filter" data-items="4">
+ <li id="filter3-1" role="tab"><a href="#filter3-1">Action 01</a></li>
+ <li id="filter3-2" role="tab"><a href="#filter3-2">Action 02</a></li>
+ <li id="filter3-3" role="tab"><a href="#filter3-3">Action 03</a></li>
+ <li id="filter3-4" role="tab"><a href="#filter3-4">Action 04</a></li>
+ </ul>
+
+ <h2 class="bb-docs">Bottom position</h2>
+
+ <ul role="tablist" data-type="filter" class="bottom" data-items="4">
+ <li id="filter4-1" role="tab"><a href="#filter4-1">Action 01</a></li>
+ <li id="filter4-2" role="tab"><a href="#filter4-2">Action 02</a></li>
+ <li id="filter4-3" role="tab"><a href="#filter4-3">Action 02</a></li>
+ <li id="filter4-4" role="tab"><a href="#filter4-4">Action 02</a></li>
+ </ul>
+
+ </section>
+</body>
+</html>
View
BIN  media/gaia/shared/style_unstable/tabs/images/ui/shadow-revert.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/gaia/shared/style_unstable/tabs/images/ui/shadow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
75 media/gaia/shared/style_unstable/tabs/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Tabs</title>
+ <meta name="description" content="Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views. ">
+
+ <link rel="stylesheet" href="../tabs.css">
+
+ <!--
+ This <style> and <link> is only used for the example code, is no needed for the real case use
+ -->
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body {
+ background: none;
+ }
+
+ h2.bb-docs {
+ font-size: 1.8rem;
+ font-family: "Open Sans", Sans-serif;
+ font-weight: lighter;
+ color: #666;
+ margin: -1px 0 0;
+ background-color: #f5f5f5;
+ padding: 0.4rem 0.4rem 0.4rem 3rem;
+ border: solid 1px #e8e8e8;
+ }
+
+ /* icons */
+ #panel1 a:after {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB4CAYAAADogzKiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJCMzdGNDQwQzEwMTFFMjk5NTZBOEE4MUY4QjNCN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJCMzdGNDUwQzEwMTFFMjk5NTZBOEE4MUY4QjNCN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRTZDMjRENzBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBRTZDMjREODBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiUV4d8AAAMBSURBVHja7FexbhNBEPVZERIhSFRAh0AKFJjCMRIEOkh7F+jiLsHQ8EcIGSqgQjKX2l0cKhspQIGQAFFBGgrbEQkhxxs0h46193bXvgVFmpGeFOd25t3O7c7MC5IkKfm0csmzCYEQTG8zDuvOAqf49zbwAdg3etJFy0EItIB+Mmp9frYMBLoYusBVYCOxtx77WBGsADuJu5FP3URAwQ/GOH8ELgJXDCTku6ojWACGGsctXnPJYie7QC2Nmx7TAHgIzBZwMo9wrCB7DyJgocDjX+WYfwjWPNyxtZSALtENDwRLFLvMN/S4B4JjwLly5vrnWfrxPwFfHEhO2tYi2uUF4B0wT445L/JarUXzljf1Da/Nq10Vxec8FSnaxTdgzmInNIJ8Bn7m7OA0/z0ETqTMraR4e5G9yY89nKJH2X5AqeoW+PZUvssuxc7F/ip26imoa8q1rZFvw9RwaMH3CYLvqcHzWialq+OY85pLT842/Tin6dOzW+kHHYfAcnyfeGwJRB8IgRAIgRAcChnbeLkzVYDm4uz/1ckmghBoADfHjJYDoI0M0NAWYyeJyzcgCbRBjsCyZm6d42ctoAuiqi3BCtABrjtqsg5I6iYCCv4UOKr8n4RHBbiaQ0I+T0CyqiMgldlM5adifeAtYDpy5PsAJDWVoHCdDBLRyWadjDSJTjbrZCL4alnWnwO3gfdch0aqKXJeUfy2gzubQ686eYZLbpsLV8nipp6xTGsbu9v3rpNTAirLvQKDvwLWswSU23sWxczG9igW0nOgVlPawV0mm9TI9z6Cd3X94BnvZHeC4D/4zZumjkYLrgGbjjlfVIPn9eQet8yIP9ZgzJoBP6PLdzmbFpepYp2hHVtMc5HoZCEQAiEQAiH43Q/CMJxKJ8dxPBWBUSfz0Aae2K9OjqLIv04GiX+dDBL/Ohkk/nUySEQnm3Uy0iQ6+R/o5GyxQ85HdTKK3eHVydid6GS9TkZ6/OlkBPenkxHcn05Wgxeqk7NpKVQnG8cW0clCIASlXwIMAC/gW4s5FQLKAAAAAElFTkSuQmCC);
+ }
+
+ #panel2 a:after {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB4CAYAAADogzKiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUU2QzI0RDUwQzBDMTFFMjk5NTZBOEE4MUY4QjNCN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUU2QzI0RDYwQzBDMTFFMjk5NTZBOEE4MUY4QjNCN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRTZDMjREMzBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBRTZDMjRENDBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrKUdlEAAANNSURBVHja7JnPaxNBFMfTGNT2ZISAhRiPCnqSVLCCoKdeDIh4awQVghfv4h/gwaOIxYNW9GLpQUgPPRQqeIitGi9NbW/SqjGQg4I2tBJZvw/e4naZXzu79kecgS9td9+8z87M29n9dvs8z0v9y9bnAA6wpYAB6Bj/vgx1jHoRQKMsNAateX/bGh/L6vrrkuegJU/eljjGGjDh6dukKodqDfLQKq2TbpahI9An0cm0ouMZg+QpjhmWnVQB+iNUY78NYCECYMGmTGl9GgaL3OBYqyoahjYUyTc4xrpMSeegFUHyFT6Xsi3TYNsPXYBO8N8NaApa3/bNTlZFGajC1VFW9B/l0VS4j1EVFaB6YK67UFkQN8rn/FbnvspFzkNNwYKGIeVQcr81OYcUMKsoSR8iS+63WRmgaHBTdTXJ/Vb08wYXecigKPawdG1IVEX7EqzOvSLAjwQBP0WALwkCmiLAhwQBy7Kt4it0KGbyFjQo2ypmErj6GdVe9DwBwIRqN6UH+IGYgO/8puHerh3AARxg5wGuv+5YJXh0ekB5PhMhl5VPThvEZKExqA3VWW0+lo0LyEE16AaPIDgaOlbD1ObiAO4HpkXU6NwDWwD55MsGU3gJozhsA3A+WQt4Dy0aJF/k2MgAj73XL0UMnavgbvZsy5TugRH+r0u40bERJK/F3SpeQkdtfbLpXkSJJllb65NxkzWgCpQxBRSgeeghT8m4BEIm/Al0nGPnASnoALQ9zEEnQ8YvDClz8qAhpD5zgORVa/A0aB4EEL+NS9zmIOc4L3qiFfHjrWbNfgeAShuL8n0XniLnk3vUJ6dDm1crgeQtVNDH3vHJ4Tt5GjqYgE92r+8O4AAO4ADCViqVNvnkarXaSQSAxOSF70BXAla2wy9YtwH6Zg1AcvLArxRWlp69ZwFpb5tPlo4AVx/pezJG4b4n7zafjEUz9skcG71M0VHrkzkm3laBkhV+T0by9Z252eGK6ZXyGnQTuosrfSYZGVnZW9A96DHiuloAOpHXfRGwsmT8roYhnDxoZamSLiJuVQrg7eGNwMpugiCuLLGy9B3uFOI+W/lkJLb3yeicqE/GKJxP/l98cvg+SOR7Miqoh74nO5/sALsA8EeAAQCMPMLp3+w1fQAAAABJRU5ErkJggg==);
+ }
+
+ #panel3 a:after {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB4CAYAAADogzKiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUU2QzI0RDEwQzBDMTFFMjk5NTZBOEE4MUY4QjNCN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUU2QzI0RDIwQzBDMTFFMjk5NTZBOEE4MUY4QjNCN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRTZDMjRDRjBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBRTZDMjREMDBDMEMxMUUyOTk1NkE4QTgxRjhCM0I3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlXYxucAAAEmSURBVHja7JZNDsFQFEZLjOxGB8Qmugnr0AHrsAcpe/AzqA1gYNIJhiYkdV/y6M3LaySlSSPnJVdaX/XQ9sjXyvM8qHO1g5oXAAAACkBfJncmVcdNPPlE5akn72vA2QO/qO1P+dWTnzXgJHN3DjiWbL/WQW3vnexuz/kGPGTmzgELtb+WydR+Zt97raXzBef2nEGLf1M8wAM8wAM8wAMAAAAAAACgMYCOeRmtbqbDbJxsJxOqXjR28qlMPBt2zedNL+o5+UCyLb2otBfJ5Sl6kVzDyjfR3AM8+N4D2+UreWA9wgM8wAM8+NoDHlMAAAAAAACgGb0oiiJvL0qSJLS5txdJHtvc24sk/5deJD/l573InpNehAd4gAd4gAd4AADA3wCeAgwA2E15Rlze638AAAAASUVORK5CYII=);
+ }
+ </style>
+</head>
+<body role="application">
+
+ <section role="region">
+ <!-- if your tabs are at the top, remove class="bottom" -->
+ <ul role="tablist" data-items="4" class="bottom">
+ <li id="panel1" role="tab">
+ <a href="#panel1" class="icon">comms</a>
+ <div role="tabpanel"></div>
+ </li>
+ <li id="panel2" role="tab">
+ <a href="#panel2" class="icon">contacts</a>
+ <div role="tabpanel"></div>
+ </li>
+ <li id="panel3" role="tab" aria-disabled="true">
+ <a class="icon">dialer</a>
+ <div role="tabpanel"></div>
+ </li>
+ <li id="panel4" role="tab">
+ <a href="#panel4">Tab name</a>
+ <div role="tabpanel"></div>
+ </li>
+ </ul>
+ </section>
+
+</body>
+</html>
View
42 media/gaia/shared/style_unstable/toolbars.css
@@ -0,0 +1,42 @@
+/* ----------------------------------
+* Toolbars
+* ---------------------------------- */
+
+[role="toolbar"] {
+ height: 4rem;
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: 100;
+ background: rgba(0,0,0, 0.85);
+}
+
+[role="toolbar"] ul {
+ float: left;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+[role="toolbar"] ul:last-child {
+ float: right;
+}
+
+[role="toolbar"] li {
+ float: left;
+}
+
+[role="toolbar"] button {
+ width: 5.5rem;
+ height: 4rem;
+ border: none;
+ font-size: 0;
+ background: transparent no-repeat 50% 50%;
+ padding: 0;
+ border-radius: 0;
+}
+
+[role="toolbar"] button:active {
+ background-color: #008aaa;
+}
View
62 media/gaia/shared/style_unstable/toolbars/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Toolbars</title>
+ <meta name="description" content="Contains actions, indicators, and navigation associated with the current view">
+ <!--
+ - This <style> and <link> is only used for the example preview,
+ - they are not required for the real use case.
+ -->
+ <link rel="stylesheet" href="../toolbars.css">
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+
+ body {
+ background: none;
+ }
+
+ /* Base icons */
+ [role="toolbar"] .pack-icon-mark {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NDA1RDQxQUE3MjA2ODExODhDNkE3NjAxQjM4MUZDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUMyRkJBN0REODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUMyRkJBNkREODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MjBGQzc5QjkyMDY4MTE4OEM2QjcwQTAwNDE1NjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MDVENDFBQTcyMDY4MTE4OEM2QTc2MDFCMzgxRkM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hFqHHQAAAQFJREFUeNpi/P//P8NAAiaGAQajDhh1AAsFermAWB2IeYH4FhC/IMsUUDYkAvMBcTkQZwIxOxCvBOLv/xHgDxAvBWJeIs2DY2IVykEtegjE/P9xg02kOoDaacAXiGMHOhFOA2KDgXQADxDvBeJwJPNBCVaYntlQCIhXAPF9ID4MxEeA+DO1syExQA6KvYH410AVRKCQ2EbtNHAfmtr1gDgQiA/gUHcFiDOoURAhlwOggkgUi5oSIP6FVCacBmIxQmYzEtkgAcXjQyB+BMTyeNRpQ+MbpG4NEP+hZV2ADVyF4tHqeNQBw69F9AGIK4D4E7UdwDjaMRl1wKgDBtoBAAEGAJMNVePSORzwAAAAAElFTkSuQmCC);
+ }
+
+ [role="toolbar"] .pack-icon-share {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NDA1RDQxQUE3MjA2ODExODhDNkE3NjAxQjM4MUZDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUM5NjE4Q0REODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUM5NjE4QkREODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MjBGQzc5QjkyMDY4MTE4OEM2QjcwQTAwNDE1NjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MDVENDFBQTcyMDY4MTE4OEM2QTc2MDFCMzgxRkM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+14Nt4AAAAWxJREFUeNpi/P//P8NAAsZRB4w6YDA7QAuItwCxAIlm/gPiBUBcQokD2IG4B4jFyfCUG9QRQgMVBcuA2IvYkGNC47NRwQHoPrIDYl5iHACK8w4apLNWID4KxKKEHLCVzDgnBugC8V5sjkB2gCCNcxzIEfvQHcFCoaEqQBwOxIZALAf1kCIQ8wDxGagadST1OlBHOAHxa0iKAeYCKP4AxEuR+PgwFxBPBeK//8kDm2FmkRMCoBS9B4jNKAi5f5REwSwky/8C8XUgfoVsKBowQSsTLgJxCiLTkhYFFtAgBKktBWIBIqLrMFLQXwBiEWR5UkMgAYjvQovbezjU9AOxIxAboImDfO4CxG/wlYSEgDEBy0FADIgViLGcnDSwhIDl2EAVEJ8H4i/YJFnISICkgsOkVEaEwHdqF49MFDqIqi2it0DMCsQ7sVSpRJsHTWxE1y3IaWAuECcDsTOFngIVSItGW8WjDhh1ALEAIMAA+H41QW+KcxcAAAAASUVORK5CYII=);
+ }
+
+ [role="toolbar"] .pack-icon-send {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NDA1RDQxQUE3MjA2ODExODhDNkE3NjAxQjM4MUZDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUM5NjE4NEREODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUM5NjE4M0REODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MjBGQzc5QjkyMDY4MTE4OEM2QjcwQTAwNDE1NjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MDVENDFBQTcyMDY4MTE4OEM2QTc2MDFCMzgxRkM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++54hAwAAAPNJREFUeNrslrsKwjAYRptQn0FHn0EUJ9FN8PJgPoC3UXB0EgRBwRdwdxNHn8DFIX6BBkqxf5sbFcwPZ2lSzlmSlgkhoiqHhYAQ8GsBDJxAy5PvCoZA5AW0wQscQNOx/A6moA4u6iHPbOqAORiDhwf5CnTTC/zL5oHjiLS8l13kOS+5iiDlVICLCCmfUPKiAJsIJV9T8jIBKmKhEVFaXjZATj+JGBVEaMl1AlTEkojQlusGUBFGcpOAbMQxwUguJzY83zJiA2agBram34/Y4pKR1/bO9prkUcUTAv4y4E2dgjO4gYYn+RPsw19xCAgB6fkIMAARU2AUmZAWLwAAAABJRU5ErkJggg==);
+
+ }
+
+ [role="toolbar"] .pack-icon-move {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NDA1RDQxQUE3MjA2ODExODhDNkE3NjAxQjM4MUZDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUM5NjE4OEREODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUM5NjE4N0REODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MjBGQzc5QjkyMDY4MTE4OEM2QjcwQTAwNDE1NjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MDVENDFBQTcyMDY4MTE4OEM2QTc2MDFCMzgxRkM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eL5wKQAAAVlJREFUeNpi/P//P8NAAiaGAQajDhgWDtAaSAf4AfF5IPYg2wRQNiQT6wLxx/8Q8AGI1ckxh1zLRYH4zn9UcBuIBUg1i9woCAXic0D8HMp/BI2KSHpGAQhvgfp+KblmDJlsKAjEXiSa7Q7E/NRwgAYQnwRiWxId4ADEx4FYBZ8iRgK1ISh/r4D65AQQH0STDwFiZSC+BsSb0eTsgdgCiN8DcTgQ7yY1EXoC8Z//1AG/gdgFmz0seHy/E4h7gLgcyn8BxE/R1KhAQ+cdEN9Hk5MGYgmQH4G4E4j3kpsNY4H4OxC3k5gNQeq/AXE4PvNZiEhMi4H4NhCbkZgIn0AT7ll8iliINOwEFJMCpg6J9gALmfq8oYlMDikxpkET6VZ61AUmQPwVLauB+Hr0qo5BOAKI/0EtB9GB9GwPwHAL1AG15JpBqQNARXkGlCbLDMbRntGoA0a8AwACDAA8jrVLWIU9BAAAAABJRU5ErkJggg==);
+ }
+
+ [role="toolbar"] .pack-icon-delete {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NDA1RDQxQUE3MjA2ODExODhDNkE3NjAxQjM4MUZDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDOUMyRkJBM0REODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDOUMyRkJBMkREODYxMUUxQjVDNEE4QjczREVCRENENCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4MjBGQzc5QjkyMDY4MTE4OEM2QjcwQTAwNDE1NjQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0MDVENDFBQTcyMDY4MTE4OEM2QTc2MDFCMzgxRkM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+PB4wWgAAANFJREFUeNpi/P//P8NAAsZRBww1B7ACsSMQuwCxJhBzAPEPIL4OxHuAeD8Q/6amA2SB2AyImaB8OSDuAeIdQHwASZ0HEDsAcQkQP4KK/QPiU0D8GK8LQA7AgQOA+Od/ygBIvx8eO/CGwB0gVqZCNIPMUSUnCt5RMa0JDdlcsBuJ7YrGJ1bMlRIHIEsyovGJFWPEZwETwwCDUQeMOmDUAaMOGHXAkHJAGgViVKkNya7yKQmBkxRafojSEOACYlNoc5xU8BvqgR+jPaNRB+ADAAEGAKG8wdkMfRTuAAAAAElFTkSuQmCC);
+ }
+
+ </style>
+</head>
+
+<body role="application">
+ <div role="toolbar">
+ <ul>
+ <li><button class="pack-icon-delete">Delete</button></li>
+ </ul>
+ <ul>
+ <li><button class="pack-icon-mark">Mark</button></li>
+ <li><button class="pack-icon-send">Send</button></li>
+ <li><button class="pack-icon-move">Move</button></li>
+ <li><button class="pack-icon-share">Share</button></li>
+ </ul>
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.