diff options
Diffstat (limited to 'shared/style')
98 files changed, 2551 insertions, 0 deletions
diff --git a/shared/style/README.md b/shared/style/README.md new file mode 100644 index 0000000..2bc5276 --- /dev/null +++ b/shared/style/README.md @@ -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`
\ No newline at end of file diff --git a/shared/style/action_menu.css b/shared/style/action_menu.css new file mode 100644 index 0000000..4d01649 --- /dev/null +++ b/shared/style/action_menu.css @@ -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; +} diff --git a/shared/style/action_menu/images/ui/alpha.png b/shared/style/action_menu/images/ui/alpha.png Binary files differnew file mode 100644 index 0000000..d7d89aa --- /dev/null +++ b/shared/style/action_menu/images/ui/alpha.png diff --git a/shared/style/action_menu/images/ui/default.png b/shared/style/action_menu/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/shared/style/action_menu/images/ui/default.png diff --git a/shared/style/action_menu/images/ui/gradient.png b/shared/style/action_menu/images/ui/gradient.png Binary files differnew file mode 100644 index 0000000..b288545 --- /dev/null +++ b/shared/style/action_menu/images/ui/gradient.png diff --git a/shared/style/action_menu/images/ui/pattern.png b/shared/style/action_menu/images/ui/pattern.png Binary files differnew file mode 100644 index 0000000..af03f56 --- /dev/null +++ b/shared/style/action_menu/images/ui/pattern.png diff --git a/shared/style/action_menu/index.html b/shared/style/action_menu/index.html new file mode 100644 index 0000000..270d07a --- /dev/null +++ b/shared/style/action_menu/index.html @@ -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> + diff --git a/shared/style/buttons.css b/shared/style/buttons.css new file mode 100644 index 0000000..6c7eec9 --- /dev/null +++ b/shared/style/buttons.css @@ -0,0 +1,230 @@ +/* ---------------------------------- + * Buttons + * ---------------------------------- */ + +a[role="button"]::-moz-focus-inner, +button::-moz-focus-inner { + border: none; + outline: none; +} + +button, +a[role="button"] { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom; + border: 0.1rem solid #a6a6a6; + border-radius: 0.2rem; + font: 500 1.6rem/3.8rem 'MozTT', Sans-serif; + color: #333; + text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & recommend) */ +button:active, +a[role="button"]:active, +button.recommend:active, +a.recommend[role="button"]:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Recommend */ +button.recommend, +a[role="button"].recommend { + background-image: url(buttons/images/ui/recommend.png); + background-color: #00caf2; + border-color: #008eab; +} + +/* Danger */ +button.danger, +a.danger[role="button"] { + background-image: url(buttons/images/ui/danger.png); + background-color: #b70404; + color: #fff; + text-shadow: none; + border-color: #820000; +} + +/* Danger Press */ +button.danger:active, +a[role="button"].danger:active { + background-image: url(buttons/images/ui/danger-press.png); + background-color: #890707; +} + +/* Disabled (default & recommend) */ +button[disabled], +a[role="button"][aria-disabled="true"], +button[disabled].recommend, +a[role="button"][aria-disabled="true"].recommend { + background: #e7e7e7; + border-color: #c7c7c7; + color: #c7c7c7; + text-shadow: none; + pointer-events: none; +} + +/* Danger disabled */ +button[disabled].danger, +a[role="button"][aria-disabled="true"].danger { + background: #c68484; + border-color: #a56464; + color: #a56464; + text-shadow: none; + pointer-events: none; +} + +/* Disabled with dark background */ +.dark button[disabled], +.dark a[role="button"][aria-disabled="true"] { + background: #5f5f5f; + color: #4d4d4d; + border-color: #4d4d4d; + text-shadow: none; + pointer-events: none; +} + + +/* ---------------------------------- + * Buttons inside lists + * ---------------------------------- */ + +li button, +li a[role="button"] { + position: relative; + background: #e7e7e7; + text-align: left; + /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/ + white-space: normal; + overflow: visible; +} + +/* Hacking box-shadow */ +li button:after, +li a[role="button"]:after { + content: ""; + position: absolute; + bottom: -0.3rem; + left: 0; + right: 0; + height: 0.2rem; + background: url( buttons/images/ui/shadow.png) repeat-x left bottom; +} + +/* Press */ +li a[role="button"]:active:after, +li button:active:after { + opacity: 0; +} + +/* Disabled */ +li button[disabled]:after, +li a[role="button"][aria-disabled="true"]:after { + background: none; +} + +/* Icons */ +li button.icon, +li a[role="button"].icon { + padding-right: 3rem; +} + +li button.icon:before, +li a[role="button"].icon:before { + content: ""; + width: 3rem; + height: 3rem; + position: absolute; + top: 50%; + right: 0; + margin-top: -1.5rem; + background: transparent no-repeat center center / 100% auto; + pointer-events: none; +} + +li button.icon-view:before, +li a[role="button"].icon-view:before { + background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0 / 1rem 9rem; +} + +li button.icon-view:active:before, +li a[role="button"].icon-view:active:before { + background-position: 1.6rem -3rem; +} + +li button.icon-view:disabled:before, +li a[role="button"][aria-disabled="true"].icon-view:before { + background-position: 1.6rem -6rem; +} + +li button.icon-dialog:before, +li a[role="button"].icon-dialog:before { + background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0 / 1rem 9rem; + top: 100%; + margin-top: -2.4rem; +} + +li button.icon-dialog:active:before, +li a[role="button"].icon-dialog:active:before { + background-position: 1.6rem -3rem; +} + +li button.icon-dialog:disabled:before, +li a[role="button"][aria-disabled="true"].icon-dialog:before { + background-position: 1.6rem -6rem; +} + + +/* ---------------------------------- + * Buttons inside lists, compact mode + * ---------------------------------- */ + +ul.compact, +ol.compact { + margin-bottom: 1rem; +} + +.compact > li button, +.compact > li a[role="button"] { + margin: -0.1rem 0; + border-radius: 0; + background: #fff; +} + +.compact > li:first-child button, +.compact > li:first-child a[role="button"] { + border-radius: 0.3rem 0.3rem 0 0; +} + +.compact > li:last-child button, +.compact > li:last-child a[role="button"] { + border-radius: 0 0 0.3rem 0.3rem; +} + +/* Pressed */ +.compact > li button:active, +.compact > li a[role="button"]:active { + border-color: #008aaa; + background: #008aaa; +} + +/* Disabled */ +.compact > li button[disabled], +.compact > li a[role="button"][aria-disabled="true"] { + color: #a6a6a6; + border-color: #a6a6a6; +}
\ No newline at end of file diff --git a/shared/style/buttons/images/icons/dialog.png b/shared/style/buttons/images/icons/dialog.png Binary files differnew file mode 100644 index 0000000..6cda241 --- /dev/null +++ b/shared/style/buttons/images/icons/dialog.png diff --git a/shared/style/buttons/images/icons/view.png b/shared/style/buttons/images/icons/view.png Binary files differnew file mode 100644 index 0000000..de62f59 --- /dev/null +++ b/shared/style/buttons/images/icons/view.png diff --git a/shared/style/buttons/images/ui/danger-disabled.png b/shared/style/buttons/images/ui/danger-disabled.png Binary files differnew file mode 100644 index 0000000..2a14bfb --- /dev/null +++ b/shared/style/buttons/images/ui/danger-disabled.png diff --git a/shared/style/buttons/images/ui/danger-press.png b/shared/style/buttons/images/ui/danger-press.png Binary files differnew file mode 100644 index 0000000..d7529b5 --- /dev/null +++ b/shared/style/buttons/images/ui/danger-press.png diff --git a/shared/style/buttons/images/ui/danger.png b/shared/style/buttons/images/ui/danger.png Binary files differnew file mode 100644 index 0000000..400e3ae --- /dev/null +++ b/shared/style/buttons/images/ui/danger.png diff --git a/shared/style/buttons/images/ui/default.png b/shared/style/buttons/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/shared/style/buttons/images/ui/default.png diff --git a/shared/style/buttons/images/ui/disabled.png b/shared/style/buttons/images/ui/disabled.png Binary files differnew file mode 100644 index 0000000..2e97135 --- /dev/null +++ b/shared/style/buttons/images/ui/disabled.png diff --git a/shared/style/buttons/images/ui/recommend.png b/shared/style/buttons/images/ui/recommend.png Binary files differnew file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/shared/style/buttons/images/ui/recommend.png diff --git a/shared/style/buttons/images/ui/shadow.png b/shared/style/buttons/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..acc799f --- /dev/null +++ b/shared/style/buttons/images/ui/shadow.png diff --git a/shared/style/buttons/index.html b/shared/style/buttons/index.html new file mode 100644 index 0000000..c97cbd6 --- /dev/null +++ b/shared/style/buttons/index.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Buttons</title> + <meta name="description" content="You can use button tag or also anchor tag with role button"> + + <link rel="stylesheet" href="../buttons.css"> + + <!-- + - This <style> and <link> is only used for the example preview, + - it isn't needed for the real use case. + --> + <style> + html, body { + margin: 0; + padding: 0; + font-size: 10px; + background-color: #fff; + } + + 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; + } + + div.bb-docs { + padding: 1rem; + } + + div.bb-docs.dark { + background: #000; + } + + ul { + padding: 0; + margin: 0; + list-style: none; + } + + body[role="application"] > [role="region"] { + height: 100%; + position: relative; + } + </style> +</head> +<body role="application"> + <h2 class="bb-docs">Normal</h2> + <div class="bb-docs"> + <button>Default</button> + <button class="recommend">Recommend</button> + <button class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Disabled</h2> + <div class="bb-docs"> + <button disabled>Default</button> + <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a> + <button disabled class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Disabled with dark background</h2> + <div class="bb-docs dark"> + <button disabled>Default</button> + <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a> + <button disabled class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Button List </h2> + <div class="bb-docs"> + <ul> + <li> + <button>Default</button> + </li> + <li> + <button disabled="disabled">Disabled</button> + </li> + <li> + <button class="icon icon-view"> + View Name + </button> + </li> + <li> + <button disabled="disabled" class="icon icon-view"> + View Name + </button> + </li> + <li> + <a role="button" class="icon icon-dialog"> + Tuesday September 18, 2012 + </a> + </li> + <li> + <a role="button" aria-disabled="true" class="icon icon-dialog"> + Tuesday September 18, 2012 + </a> + </li> + </ul> + </div> + + <h2 class="bb-docs">Button list (compact mode)</h2> + <div class="bb-docs"> + <ul class="compact"> + <li><button>Action 1</button></li> + <li><button>Action 2</button></li> + <li><button disabled >Action 3 (disabled)</button></li> + <li><button>Action 4</button></li> + <li><button>Action 5</button></li> + <li> + <button> + <span class="end tick"></span> + Action 6 + </button> + </li> + </ul> + </div> +</body> +</html> + diff --git a/shared/style/confirm.css b/shared/style/confirm.css new file mode 100644 index 0000000..0acdca2 --- /dev/null +++ b/shared/style/confirm.css @@ -0,0 +1,184 @@ +/* ---------------------------------- + * Confirm + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"][data-type="confirm"] { + background: + url(confirm/images/ui/pattern.png) repeat left top, + url(confirm/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + /* We can't use shortand with background size because is not implemented yet: + https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */ + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 1.5rem 0 7rem; + font-family: "MozTT", Sans-serif; + font-size: 0; + /* Using font-size: 0; we avoid the unwanted visual space (about 3px) + created by white-spaces and break lines in the code betewen inline-block elements */ + color: #fff; + text-align: left; +} + +form[role="dialog"][data-type="confirm"]:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: 1px; + height: 100%; + margin-left: -1px; +} + +form[role="dialog"][data-type="confirm"] > section { + font-weight: lighter; + font-size: 2.2rem; + color: #FAFAFA; + padding: 0 2.5rem 0 2rem; + -moz-box-sizing: padding-box; + width: 100%; + display: inline-block; + overflow-y: scroll; + max-height: 100%; + vertical-align: middle; + white-space: normal; +} + +form[role="dialog"][data-type="confirm"] h1 { + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + margin: 0; + padding: 0; +} + +/* Menu & buttons setup */ +form[role="dialog"][data-type="confirm"] menu { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 0.1rem rgba(255, 255, 255, 0.1); + background: #2d2d2d url(confirm/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner { + border: none; + outline: none; +} +form[role="dialog"][data-type="confirm"] menu button { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom; + border: 0.1rem solid #a6a6a6; + border-radius: 0.3rem; + font: 500 1.6rem/3.8rem 'MozTT', Sans-serif; + color: #333; + text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & recommend) */ +form[role="dialog"][data-type="confirm"] menu button:active, +form[role="dialog"][data-type="confirm"] menu button.recommend:active, +a.recommend[role="button"]:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Recommend */ +form[role="dialog"][data-type="confirm"] menu button.recommend { + background-image: url(buttons/images/ui/recommend.png); + background-color: #00caf2; + border-color: #008eab; +} + +/* Danger */ +form[role="dialog"][data-type="confirm"] menu button.danger, +a.danger[role="button"] { + background-image: url(buttons/images/ui/danger.png); + background-color: #b70404; + color: #fff; + text-shadow: none; + border-color: #820000; +} + +/* Danger Press */ +form[role="dialog"][data-type="confirm"] menu button.danger:active { + background-image: url(buttons/images/ui/danger-press.png); + background-color: #890707; +} + +/* Disabled */ +form[role="dialog"][data-type="confirm"] > menu > button[disabled] { + background: #5f5f5f; + color: #4d4d4d; + text-shadow: none; + border-color: #4d4d4d; + pointer-events: none; +} + + +form[role="dialog"][data-type="confirm"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"][data-type="confirm"] menu button, +form[role="dialog"][data-type="confirm"] menu button:first-child { + margin: 0; +} + +form[role="dialog"][data-type="confirm"] menu button { + width: calc((100% - 1rem) / 2); +} + +form[role="dialog"][data-type="confirm"] menu button.full { + width: 100%; +} + +/* Specific component code */ +form[role="dialog"][data-type="confirm"] p { + word-wrap: break-word; + margin: 1rem 0 0; + padding-top: 1rem; + border-top: 0.1rem solid #686868; +} + +form[role="dialog"][data-type="confirm"] p img { + float: left; + margin-right: 2rem; +} + +form[role="dialog"][data-type="confirm"] p strong { + font-weight: lighter; +} + +form[role="dialog"][data-type="confirm"] p small { + font-size: 1.4rem; + font-weight: normal; + color: #cbcbcb; + display: block; +} + diff --git a/shared/style/confirm/content.html b/shared/style/confirm/content.html new file mode 100644 index 0000000..7479824 --- /dev/null +++ b/shared/style/confirm/content.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Confirm, with content</title> + <meta name="description" content="Prompts user to take action"> + + <link rel="stylesheet" href="../confirm.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="confirm"> + <section> + <h1>Confirmation</h1> + <p> + <img alt="Lightbox Icon" src="data:image/png;base64,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%3D%3D"> + <strong>Lightbox</strong> + <small>Lightbox Enterprises LLC.</small> + </p> + <p>Do you want to download and install this application?</p> + </section> + <menu> + <button>Cancel</button> + <button class="recommend">Yes</button> + </menu> + </form> + +</body> +</html> + diff --git a/shared/style/confirm/images/ui/danger-disabled.png b/shared/style/confirm/images/ui/danger-disabled.png Binary files differnew file mode 100644 index 0000000..2a14bfb --- /dev/null +++ b/shared/style/confirm/images/ui/danger-disabled.png diff --git a/shared/style/confirm/images/ui/danger-press.png b/shared/style/confirm/images/ui/danger-press.png Binary files differnew file mode 100644 index 0000000..d7529b5 --- /dev/null +++ b/shared/style/confirm/images/ui/danger-press.png diff --git a/shared/style/confirm/images/ui/danger.png b/shared/style/confirm/images/ui/danger.png Binary files differnew file mode 100644 index 0000000..400e3ae --- /dev/null +++ b/shared/style/confirm/images/ui/danger.png diff --git a/shared/style/confirm/images/ui/default.png b/shared/style/confirm/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/shared/style/confirm/images/ui/default.png diff --git a/shared/style/confirm/images/ui/disabled.png b/shared/style/confirm/images/ui/disabled.png Binary files differnew file mode 100644 index 0000000..2e97135 --- /dev/null +++ b/shared/style/confirm/images/ui/disabled.png diff --git a/shared/style/confirm/images/ui/gradient.png b/shared/style/confirm/images/ui/gradient.png Binary files differnew file mode 100644 index 0000000..b288545 --- /dev/null +++ b/shared/style/confirm/images/ui/gradient.png diff --git a/shared/style/confirm/images/ui/pattern.png b/shared/style/confirm/images/ui/pattern.png Binary files differnew file mode 100644 index 0000000..af03f56 --- /dev/null +++ b/shared/style/confirm/images/ui/pattern.png diff --git a/shared/style/confirm/images/ui/recommend.png b/shared/style/confirm/images/ui/recommend.png Binary files differnew file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/shared/style/confirm/images/ui/recommend.png diff --git a/shared/style/confirm/index.html b/shared/style/confirm/index.html new file mode 100644 index 0000000..49de126 --- /dev/null +++ b/shared/style/confirm/index.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Confirm</title> + <meta name="description" content="Prompts user to take action"> + + <link rel="stylesheet" href="../confirm.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="confirm"> + <section> + <h1>Confirmation</h1> + <p>Are you sure you want to delete this contact?</p> + </section> + <menu> + <button>Cancel</button> + <button class="danger">Delete</button> + </menu> + </form> + +</body> +</html> + diff --git a/shared/style/confirm/long_content.html b/shared/style/confirm/long_content.html new file mode 100644 index 0000000..ee5d52b --- /dev/null +++ b/shared/style/confirm/long_content.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Confirm</title> + <meta name="description" content="Prompts user to take action"> + + <link rel="stylesheet" href="../confirm.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="confirm"> + <section> + <h1>Confirmation</h1> + <p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p> + </section> + <menu> + <button>Cancel</button> + <button class="danger">Delete</button> + </menu> + </form> + +</body> +</html> + diff --git a/shared/style/confirm/no_title.html b/shared/style/confirm/no_title.html new file mode 100644 index 0000000..dc59be2 --- /dev/null +++ b/shared/style/confirm/no_title.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Confirm, w/o title</title> + <meta name="description" content="Prompts user to take action"> + + <link rel="stylesheet" href="../confirm.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="confirm"> + <section> + <p>Are you sure you want to delete this contact?</p> + </section> + <menu> + <button>Cancel</button> + <button class="danger">Delete</button> + </menu> + </form> + +</body> +</html> + diff --git a/shared/style/edit_mode.css b/shared/style/edit_mode.css new file mode 100644 index 0000000..28f5439 --- /dev/null +++ b/shared/style/edit_mode.css @@ -0,0 +1,238 @@ +/* ---------------------------------- + * Edit mode + * ---------------------------------- */ + +form[role="dialog"][data-type="edit"] { + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + font-family: "MozTT", Sans-serif; + color: #fff; + pointer-events: none; +} + +/* Header */ +form[role="dialog"][data-type="edit"] header { + pointer-events: auto; + position: relative; + z-index: 10; + padding: 0; + height: 5rem; + color: #fff; + background: url(edit_mode/images/ui/alpha.png) repeat 0 0; + border: none; +} + +form[role="dialog"][data-type="edit"] header:after { + content: ""; + display: block; + height: 0.3rem; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: url(edit_mode/images/ui/shadow.png) repeat-x 0 0; + background-size: auto 100%; +} + +form[role="dialog"][data-type="edit"] header h1 { + font: 2.5rem/5rem "MozTT", Sans-serif; + text-align: left; + color: #fff; + white-space: nowrap; + text-overflow: ellipsis; + display: block; + overflow: hidden; + margin: 0 0 0 3rem; + height: 100% +} + +form[role="dialog"][data-type="edit"] header button { + border: none; + background: none; + padding: 0; + overflow: hidden; + font: normal 1.4rem/1.1em "MozTT", Sans-serif; + color: #fff; + border-radius: 0; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] { + height: 100%; + float: right; + margin: 0; + padding: 0; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button { + height: 5rem; + min-width: 5rem; + width: auto; + margin-bottom: 0; + border-radius: 0; + line-height: 5rem; + float: left; + font-weight: normal; + background: none; + padding: 0 1.75rem; + -moz-box-sizing: border-box; + text-align: center; + text-shadow: none; + position: relative; + z-index: 5; +} + +form[role="dialog"][data-type="edit"] header menu button { + color: #fff; + border: none; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button:last-child { + background: url(edit_mode/images/ui/separator.png) no-repeat left center; + margin-left: -0.2rem; + z-index: 1; +} + +/* Press state */ +form[role="dialog"][data-type="edit"] header button:active .icon:after, +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button:active { + background: #008aaa !important; + transition: background 0.2s ease; + color: #fff; +} + +form[role="dialog"][data-type="edit"] header button:first-letter { + text-transform: uppercase; +} + +form[role="dialog"][data-type="edit"] header > button { + position: absolute; + left: 0; + width: 4rem; + height: 5rem; + background: url(edit_mode/images/ui/separator-large.png) no-repeat 2rem center; + overflow: hidden; + text-align: center; +} + +form[role="dialog"][data-type="edit"] header > button span { + background: url(edit_mode/images/icons/close.png) no-repeat center center; + overflow: visible; + font: 0/0 a; + position: static; + margin-left: -2rem; + height: 4.9rem; + display: block; +} + +form[role="dialog"][data-type="edit"] header > button span:after { + content: ""; + position: absolute; + left: 0; + top: 0; + z-index: -1; + width: 2rem; + height: 4.9rem; +} + +/* Menu */ +form[role="dialog"][data-type="edit"] > menu { + pointer-events: auto; + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 0.1rem rgba(255, 255, 255, 0.1); + background: url(edit_mode/images/ui/alpha.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="edit"] menu button { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(edit_mode/images/ui/default.png) repeat-x left bottom; + border: 0.1rem solid #a6a6a6; + border-radius: 0.3rem; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 500; + line-height: 3.8rem; + color: #333; + text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & recommend) */ +form[role="dialog"][data-type="edit"] menu button:active, +form[role="dialog"][data-type="edit"] menu button.recommend:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Recommend */ +form[role="dialog"][data-type="edit"] menu button.recommend{ + background-image: url(edit_mode/images/ui/recommend.png); + background-color: #00caf2; + border-color: #008eab; +} + +/* Danger */ +form[role="dialog"][data-type="edit"] menu button.danger{ + background-image: url(edit_mode/images/ui/danger.png); + background-color: #b70404; + color: #fff; + text-shadow: none; + border-color: #820000; +} + +/* Danger Press */ +form[role="dialog"][data-type="edit"] menu button.danger:active{ + background-image: url(edit_mode/images/ui/danger-press.png); + background-color: #890707; +} + +/* Disabled */ +form[role="dialog"][data-type="edit"] > menu > button[disabled] { + background: #5f5f5f; + color: #4d4d4d; + text-shadow: none; + border-color: #4d4d4d; + pointer-events: none; +} + +form[role="dialog"][data-type="edit"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"][data-type="edit"] menu button, +form[role="dialog"][data-type="edit"] menu button:first-child { + margin: 0; +} + +form[role="dialog"][data-type="edit"] menu button { + width: calc((100% - 1rem) / 2); +} + +form[role="dialog"][data-type="edit"] menu button.full { + width: 100%; +} diff --git a/shared/style/edit_mode/images/icons/close.png b/shared/style/edit_mode/images/icons/close.png Binary files differnew file mode 100644 index 0000000..23f0ab3 --- /dev/null +++ b/shared/style/edit_mode/images/icons/close.png diff --git a/shared/style/edit_mode/images/ui/alpha.png b/shared/style/edit_mode/images/ui/alpha.png Binary files differnew file mode 100644 index 0000000..fb3ead5 --- /dev/null +++ b/shared/style/edit_mode/images/ui/alpha.png diff --git a/shared/style/edit_mode/images/ui/danger-disabled.png b/shared/style/edit_mode/images/ui/danger-disabled.png Binary files differnew file mode 100644 index 0000000..2a14bfb --- /dev/null +++ b/shared/style/edit_mode/images/ui/danger-disabled.png diff --git a/shared/style/edit_mode/images/ui/danger-press.png b/shared/style/edit_mode/images/ui/danger-press.png Binary files differnew file mode 100644 index 0000000..d7529b5 --- /dev/null +++ b/shared/style/edit_mode/images/ui/danger-press.png diff --git a/shared/style/edit_mode/images/ui/danger.png b/shared/style/edit_mode/images/ui/danger.png Binary files differnew file mode 100644 index 0000000..400e3ae --- /dev/null +++ b/shared/style/edit_mode/images/ui/danger.png diff --git a/shared/style/edit_mode/images/ui/default.png b/shared/style/edit_mode/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/shared/style/edit_mode/images/ui/default.png diff --git a/shared/style/edit_mode/images/ui/disabled.png b/shared/style/edit_mode/images/ui/disabled.png Binary files differnew file mode 100644 index 0000000..8a93c42 --- /dev/null +++ b/shared/style/edit_mode/images/ui/disabled.png diff --git a/shared/style/edit_mode/images/ui/recommend.png b/shared/style/edit_mode/images/ui/recommend.png Binary files differnew file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/shared/style/edit_mode/images/ui/recommend.png diff --git a/shared/style/edit_mode/images/ui/separator-large.png b/shared/style/edit_mode/images/ui/separator-large.png Binary files differnew file mode 100644 index 0000000..22dee97 --- /dev/null +++ b/shared/style/edit_mode/images/ui/separator-large.png diff --git a/shared/style/edit_mode/images/ui/separator.png b/shared/style/edit_mode/images/ui/separator.png Binary files differnew file mode 100644 index 0000000..e02f24a --- /dev/null +++ b/shared/style/edit_mode/images/ui/separator.png diff --git a/shared/style/edit_mode/images/ui/shadow.png b/shared/style/edit_mode/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..aec120c --- /dev/null +++ b/shared/style/edit_mode/images/ui/shadow.png diff --git a/shared/style/edit_mode/index.html b/shared/style/edit_mode/index.html new file mode 100644 index 0000000..22123ca --- /dev/null +++ b/shared/style/edit_mode/index.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Edit mode</title> + <meta name="description" content="Starts an edition mode for adding or removing items"> + + <link rel="stylesheet" href="../edit_mode.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="edit"> + <section> + <header> + <button><span class="icon icon-close">close</span></button> + <menu type="toolbar"> + <button>done</button> + </menu> + <h1>Edit</h1> + </header> + </section> + <menu> + <button>Delete all</button> + <button>Delete selected</button> + </menu> + </form> + +</body> +</html> + diff --git a/shared/style/headers.css b/shared/style/headers.css new file mode 100644 index 0000000..5d37c3f --- /dev/null +++ b/shared/style/headers.css @@ -0,0 +1,381 @@ +/* ---------------------------------- + * HEADERS: default + * ---------------------------------- */ +section[role="region"] > header:first-child { + position: relative; + z-index: 10; + padding: 0; + height: 5rem; + color: #fff; + background: url(headers/images/ui/header.png) repeat-x 0 0; + background-size: auto 100%; + border: none; +} + +section[role="region"] > header:first-child:after { + content: ""; + display: block; + height: 0.3rem; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: url(headers/images/ui/shadow.png) repeat-x 0 0; + background-size: auto 100%; +} + +section[role="region"] > header:first-child h1 { + font: 2.5rem/4.8rem "MozTT", Sans-serif; + text-align: left; + color: #fff; + white-space: nowrap; + text-overflow: ellipsis; + display: block; + overflow: hidden; + margin: 0 0 0 3rem; + height: 100% +} + +section[role="region"] > header:first-child h1 em { + font: 400 1.5rem/1em "MozTT", Sans-serif; +} + +section[role="region"] > header:first-child form { + display: block; + overflow: hidden; + position: relative; + padding: 1rem 1rem 0 0.5rem ; + margin-left: 2.5rem; +} + +section[role="region"] > header:first-child input[type="text"] { + width: 100%; + height: 3rem; + -moz-box-sizing: border-box; + padding: 0 0.8rem; + border: solid 0.1rem #9d4123; + border-top-color: #a6501e; + border-radius: 0.3rem; + background: #fff url(headers/images/ui/shadow.png) repeat-x left -0.1rem; + font: 1.5rem/3em "MozTT", Sans-serif; + box-shadow: none; +} + +section[role="region"] > header:first-child form button[type="reset"] { + font-size: 0; + overflow: hidden; + position: absolute; + right: 1rem; + top: 1rem; + bottom: 0; + width: 3rem; + height: auto; + margin: 0; + display: none; + border: none; + background: url(headers/images/icons/clear.png) no-repeat center center; +} + +section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] { + display: block; +} + +/* Generic set of actions in toolbar */ +section[role="region"] > header:first-child menu[type="toolbar"] { + height: 100%; + float: right; +} + +section[role="region"] > header:first-child menu[type="toolbar"] a, +section[role="region"] > header:first-child menu[type="toolbar"] button { + height: 5rem; + min-width: 5rem; + width: auto; + margin-bottom: 0; + border-radius: 0; + line-height: 5rem; + float: left; + background: none; + padding: 0 1.75rem; + -moz-box-sizing: border-box; + text-align: center; + text-shadow: none; + position: relative; + z-index: 5; +} + +section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background: url(headers/images/ui/separator.png) no-repeat left center; + margin-left: -0.2rem; + z-index: 1; +} + +section[role="region"] > header:first-child menu[type="toolbar"] { + padding: 0; + margin: 0; +} + +section[role="region"] > header:first-child a, +section[role="region"] > header:first-child button { + border: none; + background: none; + padding: 0; + overflow: hidden; + font: 400 1.5rem/1.1em "MozTT", Sans-serif; + color: #fff; + border-radius: 0; + text-decoration: none; +} + + +/* Pressed state */ +section[role="region"] > header:first-child a::-moz-focus-inner, +section[role="region"] > header:first-child button::-moz-focus-inner, +section[role="region"] > header:first-child a:active, +section[role="region"] > header:first-child button:active, +section[role="region"] > header:first-child a:focus, +section[role="region"] > header:first-child button:focus { + outline: none !important; + border: none !important; +} + +section[role="region"] > header:first-child a:not([aria-disabled="true"]):active .icon:after, +section[role="region"] > header:first-child button:not(:disabled):active .icon:after, +section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active, +section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active { + background: #008aaa !important; + transition: background 0.2s ease; + border-bottom: solid 0.1rem rgba(0, 0, 0, 0.2) !important; +} + +/* Disabled state */ +section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"], +section[role="region"] > header:first-child menu[type="toolbar"] button[disabled] { + opacity: 0.5; +} + +section[role="region"] > header:first-child a:first-letter, +section[role="region"] > header:first-child button:first-letter { + text-transform: uppercase; +} + +/* Icon definitions */ +section[role="region"] > header:first-child .icon { + display: inline-block; + vertical-align: top; + float: none; + width: 3rem; + height: 3rem; + margin: 0 -1rem; + background: transparent no-repeat center center; + font-size: 0; + overflow: hidden; + position: relative; + height: 4.9rem; +} + +section[role="region"] > header:first-child .icon.icon-add { + background-image: url(headers/images/icons/add.png); +} + +section[role="region"] > header:first-child .icon.icon-compose { + background-image: url(headers/images/icons/compose.png); +} + +section[role="region"] > header:first-child .icon.icon-edit { + background-image: url(headers/images/icons/edit.png); +} + +section[role="region"] > header:first-child .icon.icon-send { + background-image: url(headers/images/icons/send.png); +} + +section[role="region"] > header:first-child .icon.icon-close { + background-image: url(headers/images/icons/close.png); +} + +section[role="region"] > header:first-child .icon.icon-back { + background-image: url(headers/images/icons/back.png); +} + +section[role="region"] > header:first-child .icon.icon-menu { + background-image: url(headers/images/icons/menu.png); +} + +section[role="region"] > header:first-child .icon.icon-user { + background-image: url(headers/images/icons/user.png); +} + +section[role="region"] > header:first-child .icon.icon-reply { + background-image: url(headers/images/icons/reply.png); +} + +section[role="region"] > header:first-child .icon.icon-reply-all { + background-image: url(headers/images/icons/reply-all.png); +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"] > header:first-child > button, +section[role="region"] > header:first-child > a { + position: absolute; + left: 0; + width: 5rem; + height: 5rem; + background: url(headers/images/ui/separator-large.png) no-repeat 2rem center; + overflow: hidden; +} + +section[role="region"] > header:first-child > button::-moz-focus-inner { + border: 0; + padding: 0; +} + +section[role="region"] > header:first-child > button .icon, +section[role="region"] > header:first-child > a .icon { + display: block; + overflow: visible; + font-size: 0; + position: static; + height: 4.9rem; + margin: 0; + width: 2rem; +} + +section[role="region"] > header:first-child > button .icon:after, +section[role="region"] > header:first-child > a .icon:after { + content: ""; + position: absolute; + left: 0; + top: 0; + z-index: -1; + width: 2rem; + height: 4.9rem; + background: #9d3d26 url(headers/images/ui/negative.png) repeat-x 0 0; +} + +section[role="region"] > header > a .icon.icon-menu, +section[role="region"] > header > button .icon.icon-menu { + background-position: -1.1rem center; +} + +/* ---------------------------------- + * HEADERS: subheader + * ---------------------------------- */ + +section[role="region"] > header { + background: url(headers/images/ui/subheader.png) repeat left bottom; + border-bottom: solid 0.1rem #e6e6e6; + z-index: 0; + padding: 0.4rem 0; + height: auto; + color: #424242; +} + +section[role="region"] > header:after { + display: none; +} + +section[role="region"] > header h2 { + font-family: "MozTT", Sans-serif; + font-weight: 400; + margin: 0 3rem; + font-size: 1.5rem; + line-height: 1.8rem; +} + +/* ---------------------------------- + * HEADERS: dark + * ---------------------------------- */ +section[role="region"].skin-dark > header:first-child, +.skin-dark section[role="region"] > header:first-child { + background: url(headers/images/ui/dark/header.png) repeat-x 0 0; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-dark > header:first-child > a .icon:after, +.skin-dark section[role="region"] > header:first-child > a .icon:after, +section[role="region"].skin-dark > header:first-child > button .icon:after, +.skin-dark section[role="region"] > header:first-child > button .icon:after { + background: #26272c url(headers/images/ui/dark/negative.png) repeat-x 0 0; +} + +section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:last-child, +.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:last-child, +.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background-image: url(headers/images/ui/dark/separator.png); +} + +section[role="region"].skin-dark > header, +.skin-dark section[role="region"] > header { + background: #7f7f7f url(headers/images/ui/dark/subheader.png) repeat-x left bottom; + color: #c5c5c5; +} + +/* ---------------------------------- + * HEADERS: organic + * ---------------------------------- */ + +section[role="region"].skin-organic > header:first-child, +.skin-organic section[role="region"] > header:first-child { + background: url(headers/images/ui/organic/header.png) repeat-x 0 0, url(headers/images/ui/organic/pattern.png) repeat 0 0; +} + +section[role="region"].skin-organic > header:first-child:after, +.skin-organic section[role="region"] > header:first-child:after { + margin-top: -0.1rem; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-organic > header:first-child > a .icon:after, +.skin-organic section[role="region"] > header:first-child > a .icon:after, +section[role="region"].skin-organic > header:first-child > button .icon:after, +.skin-organic section[role="region"] > header > button .icon:after { + background: url(headers/images/ui/organic/negative.png) repeat-x 0 0; +} + +section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:last-child, +.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:last-child, +.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background-image: url(headers/images/ui/organic/separator.png); +} + +section[role="region"].skin-organic > header, +.skin-organic section[role="region"] > header { + background: #7f7f7f url(headers/images/ui/organic/subheader.png) repeat-x left bottom; + color: #fff; +} + +/* ---------------------------------- + * HEADERS: right-to-left tweaks + * ---------------------------------- */ + +html[dir="rtl"] section[role="region"] > header:first-child h1 { + text-align: right; + margin: 0 3rem 0 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child button, +html[dir="rtl"] section[role="region"] > header:first-child a { + left: inherit; + right: 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child > button .icon, +html[dir="rtl"] section[role="region"] > header:first-child > a .icon { + margin-left: 0; + margin-right: -2rem; +} + +html[dir="rtl"] section[role="region"] > header:first-child > button .icon:after, +html[dir="rtl"] section[role="region"] > header:first-child > a .icon:after { + left: inherit; + right: 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back { + background-image: url(headers/images/icons/back-rtl.png); +} + diff --git a/shared/style/headers/images/icons/add.png b/shared/style/headers/images/icons/add.png Binary files differnew file mode 100644 index 0000000..92a5a24 --- /dev/null +++ b/shared/style/headers/images/icons/add.png diff --git a/shared/style/headers/images/icons/back-rtl.png b/shared/style/headers/images/icons/back-rtl.png Binary files differnew file mode 100644 index 0000000..a71c7c0 --- /dev/null +++ b/shared/style/headers/images/icons/back-rtl.png diff --git a/shared/style/headers/images/icons/back.png b/shared/style/headers/images/icons/back.png Binary files differnew file mode 100644 index 0000000..5383ee2 --- /dev/null +++ b/shared/style/headers/images/icons/back.png diff --git a/shared/style/headers/images/icons/clear.png b/shared/style/headers/images/icons/clear.png Binary files differnew file mode 100644 index 0000000..9990d01 --- /dev/null +++ b/shared/style/headers/images/icons/clear.png diff --git a/shared/style/headers/images/icons/close.png b/shared/style/headers/images/icons/close.png Binary files differnew file mode 100644 index 0000000..5e73322 --- /dev/null +++ b/shared/style/headers/images/icons/close.png diff --git a/shared/style/headers/images/icons/compose.png b/shared/style/headers/images/icons/compose.png Binary files differnew file mode 100644 index 0000000..d11379f --- /dev/null +++ b/shared/style/headers/images/icons/compose.png diff --git a/shared/style/headers/images/icons/edit.png b/shared/style/headers/images/icons/edit.png Binary files differnew file mode 100644 index 0000000..66c7a2d --- /dev/null +++ b/shared/style/headers/images/icons/edit.png diff --git a/shared/style/headers/images/icons/menu.png b/shared/style/headers/images/icons/menu.png Binary files differnew file mode 100644 index 0000000..d1462c8 --- /dev/null +++ b/shared/style/headers/images/icons/menu.png diff --git a/shared/style/headers/images/icons/reply-all.png b/shared/style/headers/images/icons/reply-all.png Binary files differnew file mode 100644 index 0000000..85580d1 --- /dev/null +++ b/shared/style/headers/images/icons/reply-all.png diff --git a/shared/style/headers/images/icons/reply.png b/shared/style/headers/images/icons/reply.png Binary files differnew file mode 100644 index 0000000..ee47dfe --- /dev/null +++ b/shared/style/headers/images/icons/reply.png diff --git a/shared/style/headers/images/icons/send.png b/shared/style/headers/images/icons/send.png Binary files differnew file mode 100644 index 0000000..054ae3f --- /dev/null +++ b/shared/style/headers/images/icons/send.png diff --git a/shared/style/headers/images/icons/user.png b/shared/style/headers/images/icons/user.png Binary files differnew file mode 100644 index 0000000..c8abb82 --- /dev/null +++ b/shared/style/headers/images/icons/user.png diff --git a/shared/style/headers/images/ui/dark/header.png b/shared/style/headers/images/ui/dark/header.png Binary files differnew file mode 100644 index 0000000..75ec39b --- /dev/null +++ b/shared/style/headers/images/ui/dark/header.png diff --git a/shared/style/headers/images/ui/dark/negative.png b/shared/style/headers/images/ui/dark/negative.png Binary files differnew file mode 100644 index 0000000..3d09e1b --- /dev/null +++ b/shared/style/headers/images/ui/dark/negative.png diff --git a/shared/style/headers/images/ui/dark/separator.png b/shared/style/headers/images/ui/dark/separator.png Binary files differnew file mode 100644 index 0000000..c87aa17 --- /dev/null +++ b/shared/style/headers/images/ui/dark/separator.png diff --git a/shared/style/headers/images/ui/dark/subheader.png b/shared/style/headers/images/ui/dark/subheader.png Binary files differnew file mode 100644 index 0000000..4c7699f --- /dev/null +++ b/shared/style/headers/images/ui/dark/subheader.png diff --git a/shared/style/headers/images/ui/header.png b/shared/style/headers/images/ui/header.png Binary files differnew file mode 100644 index 0000000..b79a761 --- /dev/null +++ b/shared/style/headers/images/ui/header.png diff --git a/shared/style/headers/images/ui/negative.png b/shared/style/headers/images/ui/negative.png Binary files differnew file mode 100644 index 0000000..9e9f428 --- /dev/null +++ b/shared/style/headers/images/ui/negative.png diff --git a/shared/style/headers/images/ui/organic/header.png b/shared/style/headers/images/ui/organic/header.png Binary files differnew file mode 100644 index 0000000..9d3735a --- /dev/null +++ b/shared/style/headers/images/ui/organic/header.png diff --git a/shared/style/headers/images/ui/organic/negative.png b/shared/style/headers/images/ui/organic/negative.png Binary files differnew file mode 100644 index 0000000..b663901 --- /dev/null +++ b/shared/style/headers/images/ui/organic/negative.png diff --git a/shared/style/headers/images/ui/organic/pattern.png b/shared/style/headers/images/ui/organic/pattern.png Binary files differnew file mode 100644 index 0000000..202db19 --- /dev/null +++ b/shared/style/headers/images/ui/organic/pattern.png diff --git a/shared/style/headers/images/ui/organic/separator.png b/shared/style/headers/images/ui/organic/separator.png Binary files differnew file mode 100644 index 0000000..c87aa17 --- /dev/null +++ b/shared/style/headers/images/ui/organic/separator.png diff --git a/shared/style/headers/images/ui/organic/subheader.png b/shared/style/headers/images/ui/organic/subheader.png Binary files differnew file mode 100644 index 0000000..8df7e08 --- /dev/null +++ b/shared/style/headers/images/ui/organic/subheader.png diff --git a/shared/style/headers/images/ui/overlay/header.png b/shared/style/headers/images/ui/overlay/header.png Binary files differnew file mode 100644 index 0000000..fb3ead5 --- /dev/null +++ b/shared/style/headers/images/ui/overlay/header.png diff --git a/shared/style/headers/images/ui/overlay/separator.png b/shared/style/headers/images/ui/overlay/separator.png Binary files differnew file mode 100644 index 0000000..e02f24a --- /dev/null +++ b/shared/style/headers/images/ui/overlay/separator.png diff --git a/shared/style/headers/images/ui/search.png b/shared/style/headers/images/ui/search.png Binary files differnew file mode 100644 index 0000000..08e7e1e --- /dev/null +++ b/shared/style/headers/images/ui/search.png diff --git a/shared/style/headers/images/ui/separator-large.png b/shared/style/headers/images/ui/separator-large.png Binary files differnew file mode 100644 index 0000000..22dee97 --- /dev/null +++ b/shared/style/headers/images/ui/separator-large.png diff --git a/shared/style/headers/images/ui/separator.png b/shared/style/headers/images/ui/separator.png Binary files differnew file mode 100644 index 0000000..0e7f460 --- /dev/null +++ b/shared/style/headers/images/ui/separator.png diff --git a/shared/style/headers/images/ui/shadow.png b/shared/style/headers/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..aec120c --- /dev/null +++ b/shared/style/headers/images/ui/shadow.png diff --git a/shared/style/headers/images/ui/subheader.png b/shared/style/headers/images/ui/subheader.png Binary files differnew file mode 100644 index 0000000..6bd5a23 --- /dev/null +++ b/shared/style/headers/images/ui/subheader.png diff --git a/shared/style/headers/index.html b/shared/style/headers/index.html new file mode 100644 index 0000000..3e402fe --- /dev/null +++ b/shared/style/headers/index.html @@ -0,0 +1,134 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Headers</title> + <meta name="description" content="Providing top-level navigation and inputs for the active view"> + <!-- + - This <style> and <link> is only used for the example preview, + - it isn't needed for the real use case. + --> + <link rel="stylesheet" href="../headers.css"> + <style type="text/css"> + html, body { + margin: 0; + padding: 0; + font-size: 10px; + background-color: #fff; + } + body { + background: none; + } + section[role="region"] { + margin-bottom: 1.5rem; + position: relative; + } + </style> +</head> +<body role="application"> + <section role="region"> + <header> + <menu type="toolbar"> + <a href="#"><span class="icon icon-edit">edit</span></a> + <a href="#"><span class="icon icon-add">add</span></a> + </menu> + <h1>Messages</h1> + </header> + </section> + + <section role="region"> + <header> + <a href="#"><span class="icon icon-back">back</span></a> + <menu type="toolbar"> + <button><span class="icon icon-edit">edit</span></button> + </menu> + <h1>Mark Alfenito</h1> + </header> + </section> + + <section role="region"> + <header> + <button><span class="icon icon-menu">menu</span></button> + <menu type="toolbar"> + <button><span class="icon icon-edit">edit</span></button> + <button><span class="icon icon-add">add</span></button> + </menu> + <h1>Inbox <em>(2)</em></h1> + </header> + </section> + + <section role="region"> + <header> + <button><span class="icon icon-close">close</span></button> + <menu type="toolbar"> + <button>done</button> + </menu> + <h1>Title</h1> + </header> + <header> + <h2>Subheader text</h2> + </header> + </section> + + <section role="region"> + <header> + <button><span class="icon icon-back">back</span></button> + <menu type="toolbar"> + <button><span class="icon icon-user">user</span></button> + </menu> + <form action="#"> + <input type="text" placeholder="search" required="required"> + <button type="reset">Remove text</button> + </form> + </header> + </section> + + <section role="region" class="skin-dark"> + <header> + <a href="#"><span class="icon icon-back">back</span></a> + <h1>Song title</h1> + </header> + <header> + <h2>Subheader text</h2> + </header> + </section> + + <section role="region" class="skin-dark"> + <header> + <h1>Song title</h1> + </header> + </section> + + <section role="region" class="skin-organic"> + <header> + <a href="#"><span class="icon icon-back">back</span></a> + <h1>Settings</h1> + </header> + <header> + <h2>Subheader text</h2> + </header> + </section> + + <div class="skin-organic"> + <section role="region"> + <header> + <h1>Settings</h1> + </header> + <header> + <h2>Subheader text</h2> + </header> + </section> + + <section role="region"> + <header> + <a href="#"><span class="icon icon-close">close</span></a> + <h1>Settings</h1> + </header> + <header> + <h2>Subheader text</h2> + </header> + </section> + </div> + +</body> +</html> diff --git a/shared/style/input_areas.css b/shared/style/input_areas.css new file mode 100644 index 0000000..73cf026 --- /dev/null +++ b/shared/style/input_areas.css @@ -0,0 +1,309 @@ +/* ---------------------------------- +* Input areas +* ---------------------------------- */ +input[type="text"], +input[type="password"], +input[type="email"], +input[type="tel"], +input[type="search"], +input[type="url"], +textarea { + -moz-box-sizing: border-box; + display: block; + overflow: hidden; + width: 100%; + height: 4rem; + resize: none; + padding: 0 0.8rem; + font: 1.4rem/4rem "MozTT", Sans-serif; + border: 0.1rem solid #ccc; + border-radius: 0.3rem; + box-shadow: none; /* override the box-shadow from the system (performance issue) */ + background: #fff url(input_areas/images/ui/shadow.png) repeat-x; +} + +textarea { + height: 10rem; + max-height: 10rem; + line-height: 2rem; + margin: 0; +} + +/* fix for required inputs with wrong or empty value e.g. [type=email] */ +input:invalid, +textarea:invalid { + border: 0.1rem solid #820000; + color: #b90000; +} + +input[type="text"]::-moz-placeholder, +input[type="password"]::-moz-placeholder, +input[type="email"]::-moz-placeholder, +input[type="tel"]::-moz-placeholder, +input[type="search"]::-moz-placeholder, +input[type="url"]::-moz-placeholder, +textarea::-moz-placeholder { + color: #666; +} + +form p { + position: relative; + margin: 0; +} + +form p + p { + margin-top: 1rem; +} + +form p input + button[type="reset"], +form p textarea + button[type="reset"] { + position: absolute; + top: 50%; + right: 0; + width: 3.5rem; + height: 4rem; + margin: -2rem 0 0; + padding: 0; + border: none; + font-size: 0; + opacity: 0; + pointer-events: none; + background: url(input_areas/images/icons/clear.png) no-repeat 50% 50%; +} + +form p input + button[type="reset"], +form p textarea + button[type="reset"] { + top: 0; + margin: 0; +} + +textarea { + padding: 0.8rem; +} + +form p input:focus { + padding-right: 3.5rem; +} + +form p textarea:focus { + padding-right: 3rem; +} + +form p input:focus + button[type="reset"], +form p textarea:focus + button[type="reset"] { + opacity: 1; + pointer-events: all; +} + +/* Fieldset */ +fieldset { + overflow: hidden; + margin: 0; + padding: 0; + border-radius: 0.3rem; + border: 0.1rem solid rgba(0,0,0,.2); + font: 1.4rem/1em "MozTT", Sans-serif; + background: #fff url(input_areas/images/ui/shadow.png) repeat-x left top; +} + +fieldset + fieldset { + margin-top: 1.5rem; +} + +fieldset legend { + -moz-box-sizing: border-box; + position: relative; + float: left; + width: 9.5rem; + height: 4rem; + padding: 0 0.5rem 0 1.8rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #333; + line-height: 4rem; + text-transform: uppercase; +} + +fieldset legend.action { + position: relative; +} + +fieldset legend.action:after { + content: ""; + position: absolute; + top: 1.8rem; + width: 0; + height: 0; + margin-left: 0.5rem; + border: 0.4rem solid transparent; + border-top-color: #333; +} + +fieldset section input[type="text"], +fieldset section input[type="password"], +fieldset section input[type="email"], +fieldset section input[type="tel"], +fieldset section input[type="search"], +fieldset section textarea { + height: 4rem; + border: none; + border-radius: 0; + background: none; + font-weight: 600; +} + +fieldset section { + display: block; + border-left: 0.1rem solid #ddd; + border-radius: 0 0.3rem 0.3rem 0; + overflow: hidden; +} + +fieldset section p { + margin: 0; + border-bottom: 0.1rem solid #ddd; +} + +fieldset section p:last-child { + border-bottom: none; +} + +/* Tidy (search/submit) */ +form[role="search"] { + position: relative; + height: 3.7rem; + background: #e8e8e8 url(input_areas/images/ui/background.png) repeat-x; +} + +section[role="region"] > header:first-child + form[role="search"] { + /* increase height when underneath a header because of header's shadow */ + padding-top: 0.3rem; + border-bottom: 0.1rem solid #c8c8c8; +} + +form[role="search"]:after { + content: ""; + position: absolute; + top: 100%; + right: 0; + left: 0; + height: 0.3rem; + background: url(input_areas/images/ui/shadow-search.png) repeat-x left top; +} + +form[role="search"].bottom:after { + content: ""; + position: absolute; + top: -0.3rem; + right: 0; + left: 0; + height: 0.3rem; + background: url(input_areas/images/ui/shadow-invert.png) repeat-x 0 100%; +} + +section[role="region"] > header:first-child + form[role="search"]:after{ + background: none; +} + +form[role="search"] p { + -moz-box-sizing: border-box; + padding: 0.3rem 1.2rem; + overflow: hidden; +} + +form[role="search"].full p { + padding: 0.3rem 2.5rem; +} + +form[role="search"] p input { + height: 3rem; + border: 0.1rem solid #ababab; + background: #fff url(input_areas/images/ui/shadow-search.png) repeat-x left top; +} + +form[role="search"] p button[type="reset"] { + right: 1rem; +} + +form[role="search"].full p button[type="reset"] { + right: 2.3rem; +} + +form[role="search"] button[type="submit"] { + float: right; + min-width: 6rem; + height: 3.7rem; + padding: 0 0.4rem; + border: none; + color: #333; + font: 600 1.4rem/3.2rem "MozTT", Sans-serif; + background: url(input_areas/images/ui/separator.png) no-repeat 0 50%, + url(input_areas/images/ui/active.png) repeat-x 0 100%; +} + +form[role="search"] button[type="submit"] + p > textarea { + height: 3rem; + padding: 0.5rem 3rem 0.5rem 0.8rem; + line-height: 2rem; +} + +form[role="search"] button[type="submit"] + p button { + height: 3.7rem; +} + +form[role="search"].full button[type="submit"] { + display: none; +} + +form[role="search"] button[type="submit"]:active { + background: #008caa; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,.3); +} + +form[role="search"] button[type="submit"][disabled] { + color: #adadad; + background: url(input_areas/images/ui/separator.png) no-repeat 0 50%; +} + +form p button[type="reset"]:focus, +form p button[type="reset"]::-moz-focus-inner { + border: none; + outline: none; +} + +/****************************************************************************** + * Right-to-Left layout + */ + +html[dir="rtl"] form p input:valid, +html[dir="rtl"] form p input:valid:focus { + padding: 0 0.8rem 0 3.5rem; +} + +html[dir="rtl"] form p textarea:valid, +html[dir="rtl"] form p textarea:valid:focus { + padding: 0.8rem 0.8rem 0.8rem 3.5rem; +} + +html[dir="rtl"] form p input + button[type="reset"], +html[dir="rtl"] form p textarea + button[type="reset"] { + right: auto; + left: 0; +} + +html[dir="rtl"] fieldset legend.action:after { + margin: 0 0.5rem 0 0; +} + +html[dir="rtl"] fieldset legend { + padding: 0 1.8rem 0 0.5rem; +} + +html[dir="rtl"] form[role="search"] button[type="submit"] + p > textarea { + padding: 0.5rem 0.8rem 0.5rem 3rem; +} + +html[dir="rtl"] form[role="search"] button[type="submit"] + p > button { + left: 1rem; +}
\ No newline at end of file diff --git a/shared/style/input_areas/images/icons/clear.png b/shared/style/input_areas/images/icons/clear.png Binary files differnew file mode 100644 index 0000000..9990d01 --- /dev/null +++ b/shared/style/input_areas/images/icons/clear.png diff --git a/shared/style/input_areas/images/ui/active.png b/shared/style/input_areas/images/ui/active.png Binary files differnew file mode 100644 index 0000000..f81fb43 --- /dev/null +++ b/shared/style/input_areas/images/ui/active.png diff --git a/shared/style/input_areas/images/ui/background.png b/shared/style/input_areas/images/ui/background.png Binary files differnew file mode 100644 index 0000000..dce3df4 --- /dev/null +++ b/shared/style/input_areas/images/ui/background.png diff --git a/shared/style/input_areas/images/ui/separator.png b/shared/style/input_areas/images/ui/separator.png Binary files differnew file mode 100644 index 0000000..32bcc46 --- /dev/null +++ b/shared/style/input_areas/images/ui/separator.png diff --git a/shared/style/input_areas/images/ui/shadow-invert.png b/shared/style/input_areas/images/ui/shadow-invert.png Binary files differnew file mode 100644 index 0000000..1694bbf --- /dev/null +++ b/shared/style/input_areas/images/ui/shadow-invert.png diff --git a/shared/style/input_areas/images/ui/shadow-search.png b/shared/style/input_areas/images/ui/shadow-search.png Binary files differnew file mode 100644 index 0000000..234e7e4 --- /dev/null +++ b/shared/style/input_areas/images/ui/shadow-search.png diff --git a/shared/style/input_areas/images/ui/shadow.png b/shared/style/input_areas/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..3739f71 --- /dev/null +++ b/shared/style/input_areas/images/ui/shadow.png diff --git a/shared/style/input_areas/index.html b/shared/style/input_areas/index.html new file mode 100644 index 0000000..20eafa4 --- /dev/null +++ b/shared/style/input_areas/index.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html dir="ltr"> +<head> + <meta charset="utf-8"> + + <title>Input areas</title> + <link rel="stylesheet" href="../input_areas.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 { + padding: 0.4rem 3rem; + margin: -0.1rem 0 0; + border: solid 0.1rem #e8e8e8; + color: #666; + font-size: 1.8rem; + font-family: "MozTT", Sans-serif; + font-weight: lighter; + background-color: #f5f5f5; + } + form { margin: 1rem 2rem; } + </style> +</head> + +<body role="application"> + + <h2 class="bb-docs">Default inputs</h2> + <form> + <p> + <input type="text" placeholder="Placeholder" required> + <button type="reset">Clear</button> + </p> + + <p> + <textarea placeholder="Placeholder in textarea" required></textarea> + <button type="reset">Clear</button> + </p> + + <p> + <input type="text" placeholder="Placeholder" value="Some written text" required> + <button type="reset">Clear</button> + </p> + </form> + + <h2 class="bb-docs">Fieldset</h2> + <form> + <fieldset> + <legend class="action">Mobile</legend> + <section> + <p> + <input type="tel" placeholder="Phone number" required> + <button type="reset">Clear</button> + </p> + <p> + <input type="text" placeholder="Name" value="Jessy James" required> + <button type="reset">Clear</button> + </p> + </section> + </fieldset> + + <fieldset> + <legend>Work</legend> + <section> + <p> + <input type="tel" placeholder="Email" required> + <button type="reset">Clear</button> + </p> + </section> + </fieldset> + </form> + + <h2 class="bb-docs">Input forms</h2> + + <!-- form used at the top of the page with fixed/absolute position and content scrolls underneath --> + <form role="search"> + <button type="submit">Cancel</button> + <p> + <input type="text" placeholder="search term here..." required> + <button type="reset">Clear</button> + </p> + </form> + + <!-- form used under a header, this form scrolls together with the content underneath the header --> + <section role="region"> + <header> + <!-- here should be the content of the header --> + </header> + <form role="search" class="full"> + <button type="submit">Send</button> + <p> + <input type="text" placeholder="search term here..." required> + <button type="reset">Clear</button> + </p> + </form> + </section> + + <form role="search" class="bottom"> + <button type="submit">Send</button> + <p> + <input type="text" required> + <button type="reset">Clear</button> + </p> + </form> + + <form role="search" class="bottom"> + <button type="submit">Send</button> + <p> + <textarea placeholder="Placeholder in textarea" required></textarea> + <button type="reset">Clear</button> + </p> + </form> + +</body> +</html>
\ No newline at end of file diff --git a/shared/style/status.css b/shared/style/status.css new file mode 100644 index 0000000..78dfc98 --- /dev/null +++ b/shared/style/status.css @@ -0,0 +1,43 @@ +/* ---------------------------------- + * Status + * ---------------------------------- */ +section[role="status"] { + background: url(status/images/ui/pattern.png) repeat left top, url(status/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + overflow: hidden; + position: absolute; + z-index: 100; + left: 0; + right: 0; + bottom: 0; + height: 1rem; + min-height: 6.2rem; + white-space: nowrap; + font-family: "MozTT", Sans-serif; + color: #fff; + text-align: center; +} + +section[role="status"] p { + display: inline-block; + vertical-align: middle; + white-space: normal; + font-size: 1.6rem; + line-height: 1.4em; + max-width: 75%; + margin: 1rem 0; + text-align: left; +} + +section[role="status"]:before { + content: ""; + height: 100%; + display: inline-block; + vertical-align: middle; +} + +section[role="status"] p strong { + text-transform: uppercase; + color: #0995b0; + font-weight: normal; +}
\ No newline at end of file diff --git a/shared/style/status/images/ui/gradient.png b/shared/style/status/images/ui/gradient.png Binary files differnew file mode 100644 index 0000000..b288545 --- /dev/null +++ b/shared/style/status/images/ui/gradient.png diff --git a/shared/style/status/images/ui/pattern.png b/shared/style/status/images/ui/pattern.png Binary files differnew file mode 100644 index 0000000..af03f56 --- /dev/null +++ b/shared/style/status/images/ui/pattern.png diff --git a/shared/style/status/index.html b/shared/style/status/index.html new file mode 100644 index 0000000..b440de2 --- /dev/null +++ b/shared/style/status/index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Status</title> + <meta name="description" content="Most common used after Multi-Select edit, to confirm user action, and optional provide 'Undo' input"> + + <link rel="stylesheet" href="../status.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; + } + </style> +</head> + +<body role="application"> + + <section role="status"> + <p>The Alarm is set for <strong>7 hours</strong> and <strong>14 minutes</strong> from now</p> + </section> + +</body> +</html>
\ No newline at end of file diff --git a/shared/style/switches.css b/shared/style/switches.css new file mode 100644 index 0000000..a000293 --- /dev/null +++ b/shared/style/switches.css @@ -0,0 +1,127 @@ +/* ---------------------------------- + * CHECKBOXES / RADIOS + * ---------------------------------- */ + +label:not([for]) { + display: inline-block; + vertical-align: middle; + width: 5rem; + height: 5rem; + position: relative; + background: none; +} + +label:not([for]) input { + margin: 0; + opacity: 0; + position: absolute; + top: 0; + left: 0; +} + +label:not([for]) input + span { + position: absolute; + left: 50%; + top: 50%; + margin: -1.1rem 0 0 -1.1rem; + width: 2.2rem; + height: 2.2rem; + pointer-events: none; +} + +label:not([for]) input[type="checkbox"] + span { + background: url(switches/images/check/default.png) no-repeat center top; +} + +label:not([for]) input[type="radio"] + span { + background: url(switches/images/radio/default.png) no-repeat center top; +} + +label:not([for]) input:checked + span { + background-position: center bottom; +} + +/* 'Dangerous' switches */ + +label:not([for]).danger input[type="checkbox"] + span { + background-image: url(switches/images/check/danger.png); +} + +label:not([for]).danger input[type="radio"] + span { + background-image: url(switches/images/radio/danger.png); +} + + +/* ---------------------------------- + * ON/OFF SWITCHES + * ---------------------------------- */ + +label input[type="checkbox"][data-type="switch"] + span { + position: absolute; + left: 50%; + top: 50%; + margin: -1.1rem 0 0 -2.7rem; + width: 5.4rem; + height: 2.2rem; + pointer-events: none; + border: solid 1px #c2c2c2; + border-radius: 5.4rem; + overflow: hidden; + background: url(switches/images/switch/handler.png) no-repeat -0.2rem center; + background-size: auto calc(100% + 2px); + transition: background 0.18s ease; +} + +label input[data-type="switch"] + span:after, +label input[data-type="switch"] + span:before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 5.4rem; + z-index: -1; + transition: transform 0.2s ease; +} + +label input[data-type="switch"] + span:before { + right: 100%; + background: #00c3ea url(switches/images/switch/icon.png) no-repeat 0.5rem center; + background-size: auto calc(100% - 2px); +} + +label input[data-type="switch"] + span:after { + left: 100%; + background: #e6e6e6; + transform: translateX(-5.4rem); +} + +/* switch: disabled state */ +label input[data-type="switch"]:disabled + span:before, +label input[data-type="switch"]:disabled + span:after { + opacity: 0.2; +} + +label input[data-type="switch"]:disabled + span { + opacity: 0.3; +} + +label input[data-type="switch"]:checked:disabled + span { + opacity: 1; + border: solid 1px #A7DBE6; +} + +/* 'ON' state */ + +label input[data-type="switch"]:checked + span { + border-color: #00acce; + background-position: 3.2rem center; +} + +label input[data-type="switch"]:checked + span:before { + transform: translateX(5.4rem); +} + +label input[data-type="switch"]:checked + span:after { + transform: translateX(0); +} + diff --git a/shared/style/switches/images/check/danger.png b/shared/style/switches/images/check/danger.png Binary files differnew file mode 100644 index 0000000..75c2f84 --- /dev/null +++ b/shared/style/switches/images/check/danger.png diff --git a/shared/style/switches/images/check/default.png b/shared/style/switches/images/check/default.png Binary files differnew file mode 100644 index 0000000..2bfc15c --- /dev/null +++ b/shared/style/switches/images/check/default.png diff --git a/shared/style/switches/images/radio/danger.png b/shared/style/switches/images/radio/danger.png Binary files differnew file mode 100644 index 0000000..5b48b2c --- /dev/null +++ b/shared/style/switches/images/radio/danger.png diff --git a/shared/style/switches/images/radio/default.png b/shared/style/switches/images/radio/default.png Binary files differnew file mode 100644 index 0000000..64a2515 --- /dev/null +++ b/shared/style/switches/images/radio/default.png diff --git a/shared/style/switches/images/switch/background.png b/shared/style/switches/images/switch/background.png Binary files differnew file mode 100644 index 0000000..8bf0778 --- /dev/null +++ b/shared/style/switches/images/switch/background.png diff --git a/shared/style/switches/images/switch/handler.png b/shared/style/switches/images/switch/handler.png Binary files differnew file mode 100644 index 0000000..5d014f6 --- /dev/null +++ b/shared/style/switches/images/switch/handler.png diff --git a/shared/style/switches/images/switch/icon.png b/shared/style/switches/images/switch/icon.png Binary files differnew file mode 100644 index 0000000..b8b2822 --- /dev/null +++ b/shared/style/switches/images/switch/icon.png diff --git a/shared/style/switches/index.html b/shared/style/switches/index.html new file mode 100644 index 0000000..c91c134 --- /dev/null +++ b/shared/style/switches/index.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Switches</title> + <meta name="description" content="Activates/Deactivates a given item. It's also used to select an element within a list"> + <link rel="stylesheet" href="../switches.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; + } + h2.bb-docs { + font-size: 1.8rem; + font-family: "MozTT", 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; + } + </style> +</head> +<body role="application"> + + <h2 class="bb-docs">Checkbox, commonly used in edit mode</h2> + <label> + <input type="checkbox" checked> + <span></span> + </label> + + <label> + <input type="checkbox"> + <span></span> + </label> + + <label class="danger"> + <input type="checkbox" checked> + <span></span> + </label> + + <label class="danger"> + <input type="checkbox"> + <span></span> + </label> + + <h2 class="bb-docs">Radio, commonly used in settings</h2> + <label> + <input type="radio" name="example" checked> + <span></span> + </label> + + <label> + <input type="radio" name="example"> + <span></span> + </label> + + <label class="danger"> + <input type="radio" name="example2" checked> + <span></span> + </label> + + <label class="danger"> + <input type="radio" name="example2"> + <span></span> + </label> + + <h2 class="bb-docs">Switch, commonly used in settings</h2> + <label> + <input type="checkbox" data-type="switch" checked> + <span></span> + </label> + + <label> + <input type="checkbox" data-type="switch"> + <span></span> + </label> +</body> +</html> |
