Permalink
Browse files

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

…rectory
  • Loading branch information...
1 parent 8b5ef38 commit f2de1232dd3efdaa59ed49f01b1dc53f789602fc @lmorchard lmorchard committed Feb 24, 2013
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
@@ -0,0 +1 @@
+This `shared/style_unstable` directory holds all building blocks that aren’t ready for `shared/style` yet.
@@ -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;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
Oops, something went wrong.

0 comments on commit f2de123

Please sign in to comment.