Permalink
Browse files

fix bug 844189: Dump gaia shared style into MDN media resources

  • Loading branch information...
1 parent a91cc29 commit b3835736ae10316cb47c86cd748ebe9b07bac6d6 @lmorchard lmorchard committed Feb 22, 2013
Showing with 2,635 additions and 0 deletions.
  1. +118 −0 media/gaia/shared/style/README.md
  2. +151 −0 media/gaia/shared/style/action_menu.css
  3. BIN media/gaia/shared/style/action_menu/images/ui/alpha.png
  4. BIN media/gaia/shared/style/action_menu/images/ui/default.png
  5. BIN media/gaia/shared/style/action_menu/images/ui/gradient.png
  6. BIN media/gaia/shared/style/action_menu/images/ui/pattern.png
  7. +39 −0 media/gaia/shared/style/action_menu/index.html
  8. +259 −0 media/gaia/shared/style/buttons.css
  9. BIN media/gaia/shared/style/buttons/images/icons/dialog.png
  10. BIN media/gaia/shared/style/buttons/images/icons/view.png
  11. BIN media/gaia/shared/style/buttons/images/ui/danger-disabled.png
  12. BIN media/gaia/shared/style/buttons/images/ui/danger-press.png
  13. BIN media/gaia/shared/style/buttons/images/ui/danger.png
  14. BIN media/gaia/shared/style/buttons/images/ui/default.png
  15. BIN media/gaia/shared/style/buttons/images/ui/disabled.png
  16. BIN media/gaia/shared/style/buttons/images/ui/recommend.png
  17. BIN media/gaia/shared/style/buttons/images/ui/shadow.png
  18. +126 −0 media/gaia/shared/style/buttons/index.html
  19. +184 −0 media/gaia/shared/style/confirm.css
  20. +48 −0 media/gaia/shared/style/confirm/content.html
  21. BIN media/gaia/shared/style/confirm/images/ui/danger-disabled.png
  22. BIN media/gaia/shared/style/confirm/images/ui/danger-press.png
  23. BIN media/gaia/shared/style/confirm/images/ui/danger.png
  24. BIN media/gaia/shared/style/confirm/images/ui/default.png
  25. BIN media/gaia/shared/style/confirm/images/ui/disabled.png
  26. BIN media/gaia/shared/style/confirm/images/ui/gradient.png
  27. BIN media/gaia/shared/style/confirm/images/ui/pattern.png
  28. BIN media/gaia/shared/style/confirm/images/ui/recommend.png
  29. +43 −0 media/gaia/shared/style/confirm/index.html
  30. +43 −0 media/gaia/shared/style/confirm/long_content.html
  31. +42 −0 media/gaia/shared/style/confirm/no_title.html
  32. +238 −0 media/gaia/shared/style/edit_mode.css
  33. BIN media/gaia/shared/style/edit_mode/images/icons/close.png
  34. BIN media/gaia/shared/style/edit_mode/images/ui/alpha.png
  35. BIN media/gaia/shared/style/edit_mode/images/ui/danger-disabled.png
  36. BIN media/gaia/shared/style/edit_mode/images/ui/danger-press.png
  37. BIN media/gaia/shared/style/edit_mode/images/ui/danger.png
  38. BIN media/gaia/shared/style/edit_mode/images/ui/default.png
  39. BIN media/gaia/shared/style/edit_mode/images/ui/disabled.png
  40. BIN media/gaia/shared/style/edit_mode/images/ui/recommend.png
  41. BIN media/gaia/shared/style/edit_mode/images/ui/separator-large.png
  42. BIN media/gaia/shared/style/edit_mode/images/ui/separator.png
  43. BIN media/gaia/shared/style/edit_mode/images/ui/shadow.png
  44. +48 −0 media/gaia/shared/style/edit_mode/index.html
  45. +380 −0 media/gaia/shared/style/headers.css
  46. BIN media/gaia/shared/style/headers/images/icons/add.png
  47. BIN media/gaia/shared/style/headers/images/icons/back-rtl.png
  48. BIN media/gaia/shared/style/headers/images/icons/back.png
  49. BIN media/gaia/shared/style/headers/images/icons/clear.png
  50. BIN media/gaia/shared/style/headers/images/icons/close.png
  51. BIN media/gaia/shared/style/headers/images/icons/compose.png
  52. BIN media/gaia/shared/style/headers/images/icons/edit.png
  53. BIN media/gaia/shared/style/headers/images/icons/menu.png
  54. BIN media/gaia/shared/style/headers/images/icons/reply-all.png
  55. BIN media/gaia/shared/style/headers/images/icons/reply.png
  56. BIN media/gaia/shared/style/headers/images/icons/send.png
  57. BIN media/gaia/shared/style/headers/images/icons/user.png
  58. BIN media/gaia/shared/style/headers/images/ui/dark/header.png
  59. BIN media/gaia/shared/style/headers/images/ui/dark/negative.png
  60. BIN media/gaia/shared/style/headers/images/ui/dark/separator.png
  61. BIN media/gaia/shared/style/headers/images/ui/dark/subheader.png
  62. BIN media/gaia/shared/style/headers/images/ui/header.png
  63. BIN media/gaia/shared/style/headers/images/ui/negative.png
  64. BIN media/gaia/shared/style/headers/images/ui/organic/header.png
  65. BIN media/gaia/shared/style/headers/images/ui/organic/negative.png
  66. BIN media/gaia/shared/style/headers/images/ui/organic/pattern.png
  67. BIN media/gaia/shared/style/headers/images/ui/organic/separator.png
  68. BIN media/gaia/shared/style/headers/images/ui/organic/subheader.png
  69. BIN media/gaia/shared/style/headers/images/ui/overlay/header.png
  70. BIN media/gaia/shared/style/headers/images/ui/overlay/separator.png
  71. BIN media/gaia/shared/style/headers/images/ui/search.png
  72. BIN media/gaia/shared/style/headers/images/ui/separator-large.png
  73. BIN media/gaia/shared/style/headers/images/ui/separator.png
  74. BIN media/gaia/shared/style/headers/images/ui/shadow.png
  75. BIN media/gaia/shared/style/headers/images/ui/subheader.png
  76. +134 −0 media/gaia/shared/style/headers/index.html
  77. +309 −0 media/gaia/shared/style/input_areas.css
  78. BIN media/gaia/shared/style/input_areas/images/icons/arrow.png
  79. BIN media/gaia/shared/style/input_areas/images/icons/clear.png
  80. BIN media/gaia/shared/style/input_areas/images/ui/active.png
  81. BIN media/gaia/shared/style/input_areas/images/ui/background.png
  82. BIN media/gaia/shared/style/input_areas/images/ui/separator.png
  83. BIN media/gaia/shared/style/input_areas/images/ui/shadow-invert.png
  84. BIN media/gaia/shared/style/input_areas/images/ui/shadow-search.png
  85. BIN media/gaia/shared/style/input_areas/images/ui/shadow.png
  86. +123 −0 media/gaia/shared/style/input_areas/index.html
  87. +53 −0 media/gaia/shared/style/responsive.css
  88. +3 −0 media/gaia/shared/style/responsive/README
  89. +43 −0 media/gaia/shared/style/status.css
  90. BIN media/gaia/shared/style/status/images/ui/gradient.png
  91. BIN media/gaia/shared/style/status/images/ui/pattern.png
  92. +35 −0 media/gaia/shared/style/status/index.html
  93. +127 −0 media/gaia/shared/style/switches.css
  94. BIN media/gaia/shared/style/switches/images/check/danger.png
  95. BIN media/gaia/shared/style/switches/images/check/default.png
  96. BIN media/gaia/shared/style/switches/images/radio/danger.png
  97. BIN media/gaia/shared/style/switches/images/radio/default.png
  98. BIN media/gaia/shared/style/switches/images/switch/background.png
  99. BIN media/gaia/shared/style/switches/images/switch/handler.png
  100. BIN media/gaia/shared/style/switches/images/switch/icon.png
  101. +89 −0 media/gaia/shared/style/switches/index.html
@@ -0,0 +1,118 @@
+Building Blocks
+===============
+
+Taxonomy
+--------
+
+* `action_menu.css`: context menus
+* `buttons.css`: common buttons
+* `confirm.css`: dialog boxes with message + accept/dismiss buttons
+* `edit_mode.css`: edition panels with a dialog-like button toolbar
+* `headers.css`: common header bars (title + navigation buttons)
+* `input_areas.css`: common input areas (e.g. search bars)
+* `status.css`: notification toasters
+* `switches.css`: checkboxes, radio buttons, ON/OFF switches
+
+
+Specific Attributes
+-------------------
+
+A `data-type` attribute is used when the `type` and `role` attributes are not specific enough. Here’s the list of its possible values.
+
+* `action`: used in `action_menu.css`, title + action selection + accept/dismiss buttons
+* `confirm`: used in `confirm.css`, message + accept/dismiss buttons
+* `edit`: used in `edit_mode.css`, edition panel with dialog-like button toolbar
+* `object`: used in `action_menu.css`, action selection + accept/dismiss buttons
+* `switch`: used in `switches.css`, turns a checkbox into an ON/OFF switch
+
+
+Class Name Usage
+----------------
+
+We try to avoid arbitrary class names as much as possible, but sometimes we have to use some — here’s the list.
+
+### Common Class Names
+
+**Icons**
+
+* `.icon`
+* `.icon-add`
+* `.icon-back`
+* `.icon-close`
+* `.icon-dialog`
+* `.icon-edit`
+* `.icon-menu`
+* `.icon-user`
+* `.icon-view`
+
+**Skins**
+
+* `.skin-dark`
+* `.skin-organic`
+
+**Buttons**
+
+* `.danger`: dangerous choice, e.g. delete something
+* `.recommend`: default/recommended choice, should be safe
+
+**Other**
+
+* `.action`: applies to fieldset elements (explanation needed)
+* `.bottom`: bottom-positioned element, applies to search forms
+* `.compact`: compact list, applies to button lists
+* `.full`: full-width element, applies to buttons or search forms
+
+### Usage by Block
+
+**action_menu.css**
+
+None
+
+**buttons.css**
+
+* `.compact`
+* `.danger`
+* `.icon-dialog`
+* `.icon-view`
+* `.recommend`
+
+**confirm.css**
+
+* `.full`
+
+**edit_mode.css**
+
+* `.danger`
+* `.full`
+* `.icon`
+* `.recommend`
+
+**headers.css**
+
+* `.icon`
+* `.icon-add`
+* `.icon-edit`
+* `.icon-close`
+* `.icon-back`
+* `.icon-menu`
+* `.icon-user`
+* `.skin-dark`
+* `.skin-organic`
+
+**input_areas.css**
+
+* `.action` (explanation needed)
+* `.bottom`
+* `.full`
+
+**status.css**
+
+None
+
+**switches.css**
+
+* `.danger`
+
+Future improves
+----------------
+* Use `[data-icon="name"]` instead of `.icon.icon-name`
@@ -0,0 +1,151 @@
+/* ----------------------------------
+ * Action menu
+ * ---------------------------------- */
+
+/* Main dialog setup */
+form[role="dialog"][data-type="action"],
+form[role="dialog"][data-type="object"] {
+ background:
+ url(action_menu/images/ui/pattern.png) repeat left top,
+ url(action_menu/images/ui/gradient.png) no-repeat left top / 100% 100%;
+ overflow: hidden;
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 0 0 7rem;
+ font-family: "MozTT", Sans-serif;
+ /**
+ * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
+ * by white spaces and line breaks in the code between inline-block elements.
+ */
+ font-size: 0;
+ color: #fff;
+}
+
+form[role="dialog"][data-type="action"]:before,
+form[role="dialog"][data-type="object"]:before {
+ content: '';
+ display: inline-block;
+ vertical-align: top;
+ width: 1px;
+ height: 100%;
+ margin-left: -1px;
+}
+
+form[role="dialog"][data-type="action"] > header:first-child,
+form[role="dialog"][data-type="object"] > header:first-child {
+ -moz-box-sizing: padding-box;
+ width: 100%;
+ display: inline-block;
+ vertical-align: top;
+ white-space: normal;
+ font: 1.6rem/1em 'MozTT', Sans-serif;
+ color: #fff;
+ border-bottom: 0.1rem solid #616262;
+ background: url(action_menu/images/ui/alpha.png) repeat 0 0;
+ padding: 2rem 3rem 0 3rem;
+ height: 5rem;
+ -moz-box-sizing: border-box;
+}
+
+form[role="dialog"][data-type="action"] > header:after,
+form[role="dialog"][data-type="object"] > header:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ background: #222323;
+ height: 0.1rem;
+ left: 0;
+ top: 5rem;
+}
+
+/* Specific component code */
+form[role="dialog"][data-type="action"] > menu,
+form[role="dialog"][data-type="object"] > menu {
+ margin: 0;
+ padding: 0;
+ width: auto;
+ border: none;
+ background: none;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+form[role="dialog"][data-type="action"] > menu > button,
+form[role="dialog"][data-type="object"] > menu > button {
+ width: calc(100% - 3rem);
+ height: 4rem;
+ -moz-box-sizing: border-box;
+ vertical-align: middle;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ font-family: 'MozTT', Sans-serif;
+ font-weight: normal;
+ line-height: 4rem;
+ outline: none;
+ font-size: 1.4rem;
+ color: #fff;
+ text-shadow: none;
+ text-align: left;
+ padding: 0 1rem;
+ margin: 0 1.5rem 1rem 1.5rem;
+ background: #5f5f5f padding-box;
+ border-radius: 0.2rem;
+ border: none;
+}
+
+form[role="dialog"][data-type="action"] > menu > button:last-child,
+form[role="dialog"][data-type="object"] > menu > button:last-child {
+ text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+ color: #333;
+ font-weight: 500;
+ background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom;
+ border: solid 0.1rem #a6a6a6;
+ margin: 2.5rem 1.5rem 1.5rem 1.5rem;
+ text-align: center;
+ font-size: 1.6rem;
+}
+
+form[role="dialog"][data-type="action"] > menu > button:last-child:before,
+form[role="dialog"][data-type="object"] > menu > button:last-child:before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ background: url(action_menu/images/ui/pattern.png) repeat scroll left top #2D2D2D;
+ height: 7rem;
+ left: 0;
+ bottom: 0;
+ z-index: -1;
+ border-top: 0.1rem solid rgba(255, 255, 255, 0.1);
+}
+
+/* Press state */
+form[role="dialog"][data-type="action"] > menu > button:active,
+form[role="dialog"][data-type="object"] > menu > button:active {
+ background-color: #006f86;
+ color: #333;
+ text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.25);
+}
+
+form[role="dialog"][data-type="action"] > menu > button:last-child:active,
+form[role="dialog"][data-type="object"] > menu > button:last-child:active {
+ border: solid 0.1rem #008aaa;
+ background: #008aaa;
+ color: #333;
+}
+
+/* Disabled */
+form[role="dialog"][data-type="action"] > menu > button[disabled],
+form[role="dialog"][data-type="object"] > menu > button[disabled] {
+ background: #4d4d4d;
+ color: #333;
+ text-shadow: none;
+ border: none;
+ pointer-events: none;
+}
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,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Action menu</title>
+ <meta name="description" content="Presenting a list of actions related to the App content">
+
+ <link rel="stylesheet" href="../action_menu.css">
+ <!--
+ - This <style> element is only used for the example code;
+ - it is not required for the real use case.
+ -->
+ <style type="text/css">
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-size: 10px;
+ background-color: #fff;
+ }
+ body {
+ background: none;
+ }
+ </style>
+</head>
+<body role="application">
+
+ <form role="dialog" data-type="action" onsubmit="return false;">
+ <header> Title </header> <!-- this header is optional -->
+ <menu>
+ <button> Action 1 </button>
+ <button disabled> Action 2 (disabled) </button>
+ <button> Action 3 </button>
+ <button> Cancel </button>
+ </menu>
+ </form>
+
+</body>
+</html>
+
Oops, something went wrong.

0 comments on commit b383573

Please sign in to comment.