Skip to content

Commit c8943b7

Browse files
rnowmrnowm
committed
initial commit
0 parents  commit c8943b7

File tree

4 files changed

+132
-0
lines changed

4 files changed

+132
-0
lines changed

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# bb_toolbars
2+
3+
Action menu is a Firefox OS Building block.
4+
5+
Visit [buildingfirefoxos.com](http://buildingfirefoxos.com/building-blocks/toolbars.html) to see examples.
6+
7+
## Installation
8+
9+
```bash
10+
$ bower install buildingfirefoxos/bb_toolbars
11+
```

Diff for: ‎bower.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "bb_toolbars",
3+
"version": "1.4",
4+
"homepage": "https://github.com/buildingfirefoxos/bb_toolbars",
5+
"authors": [
6+
"The gaia team"
7+
],
8+
"description": "Toolbars - Firefox OS Building Blocks",
9+
"license": "MIT",
10+
"ignore": [
11+
"**/.*",
12+
"node_modules",
13+
"bower_components",
14+
"test",
15+
"tests"
16+
]
17+
}

Diff for: ‎toolbars.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* ----------------------------------
2+
* Toolbars
3+
* ---------------------------------- */
4+
5+
[role="toolbar"] {
6+
height: 4rem;
7+
width: 100%;
8+
position: fixed;
9+
bottom: 0;
10+
left: 0;
11+
z-index: 100;
12+
background: rgba(0,0,0, 0.85);
13+
}
14+
15+
[role="toolbar"] ul {
16+
float: left;
17+
list-style: none;
18+
padding: 0;
19+
margin: 0;
20+
}
21+
22+
[role="toolbar"] ul:last-child {
23+
float: right;
24+
}
25+
26+
[role="toolbar"] li {
27+
float: left;
28+
}
29+
30+
[role="toolbar"] button {
31+
width: 5.5rem;
32+
height: 4rem;
33+
border: none;
34+
font-size: 0;
35+
background: transparent no-repeat 50% 50% / 3rem auto;
36+
padding: 0;
37+
border-radius: 0;
38+
}
39+
40+
[role="toolbar"] button:active {
41+
background-color: #008aaa;
42+
}

Diff for: ‎toolbars/index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Toolbars</title>
6+
<meta name="description" content="Contains actions, indicators, and navigation associated with the current view">
7+
<!--
8+
- This <style> and <link> is only used for the example preview,
9+
- they are not required for the real use case.
10+
-->
11+
<link rel="stylesheet" href="../toolbars.css">
12+
<style>
13+
html, body {
14+
margin: 0;
15+
padding: 0;
16+
font-size: 10px;
17+
background-color: #fff;
18+
}
19+
20+
body {
21+
background: none;
22+
}
23+
24+
/* Base icons */
25+
[role="toolbar"] .pack-icon-mark {
26+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA85kAAImUAAB+3gAA7PgAADObAAAQ5ap9ykMAAAEISURBVHja7JaxSgNREEXPihAIRkHRci1TCOJ/iIWVlb32gn6JfyAkkCpFOkHQzlYbm5BUlqKFEALH5qFbJHGjm12Rd+F28+4tZu7MS1SqwBIVIRqXhuUfvqsDTaABPAHPcyuo33FVPVdP1ZraVt/9wli9Uhs5tD6ZpygNBgN1zenozmNcZI8PgOOqhusS2KvCeAW4Bo4y2nVgo4w4rQMtoA/cAnfAW1FxyoM0cB8Ylb1AWkCvqB73w/TuAofAzZS6B+DkNwskm+Oaujmh5kwdZTJ9r27N0k1y3OMUGABDYHtG3U7o5xDoAONF7OpJeAyMZzEa//0fyAtwAbwWaZzEf3U0/nfGHwMAR/JD8ZrKeskAAAAASUVORK5CYII=);
27+
}
28+
29+
[role="toolbar"] .pack-icon-share {
30+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA85kAAImUAAB+3gAA7PgAADObAAAQ5ap9ykMAAAF4SURBVHja7Ja5SsRQFIa/kVFBHBjFpRMFQRgcUBSxElyw8AVsBX0EbewFC8HKRhBE1BdQC0GnGewEncpKH8AFphCsJr+FNxBCYm6SWZr5IRBuDufjLDfnZCTRCnXQIrXBTVM25LwAXAP5mP4c4BTYjjLMBHR1N3AADCcIZNXA+5OA0+gSWLPJlLfGXXUA+6NYAHL/gQvAfgN6aA94AAbDwDcJa2qjInDvh7vgvgbfniJQ8sKzKZyNA+vANDBighgDeoFHYzPhsZ808CXgA0lIqkq6MO9RT4+kI0k1JdOVpNgR54A7YC5FppwkqT72QGvAC/DuOgvQrO9OV4Ctv4tnn+p5k6qqpB1JeYuylD0pfpY04H6LE/EG8Gp+i28hNofAIjDlO68AK8Bnkuk0EwEFGAJGo6Bxa3weAQ3SLvAEfNuOxbDGiqtyPRaBn0ZtIE3dRtx5/AV0ArcBo83al2kiq3+/W+MTYBNYThmIA5zFibi93rbBddfvAA7eCHdE+L6kAAAAAElFTkSuQmCC);
31+
}
32+
33+
[role="toolbar"] .pack-icon-send {
34+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA85kAAImUAAB+3gAA7PgAADObAAAQ5ap9ykMAAADtSURBVHja7NYxSgNBFAbgbyWeQcucQRKsJOkCag7mARK1FCytBEEw4AXS2wVLT5DGYtMkYQlOdmfdNRbzYGC6D2be+2eyPM8doo4cqBL8Z9Up7DO84awla44RcsgKXd3DEi/oNowuMMYJ3nePuo8JrvDZAnqH89AdDxvGi+hFWXM1hQfRfV39W3yB6xBaNk518Q16H0KrzPEQ0wi8Elo1QAZr/LIEr4zGJNcAt3vwKDQ2MkN4NFonq4v463pFo7tZHYM/4AbHeKyT752a4dDHU3qPE/yf4O+funqGD5y2hH7hefvPSh/6BLdVqwEA+ck/PrIbaKkAAAAASUVORK5CYII=);
35+
36+
}
37+
38+
[role="toolbar"] .pack-icon-move {
39+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA85kAAImUAAB+3gAA7PgAADObAAAQ5ap9ykMAAAFfSURBVHja7Ja9K4VhGMZ/R2fHoJSyUKSYJIsYlK9SijBY5T8w2ZSU1V8gZccgGUwYsFmOUiImHwMG8jN4FG8dPC/HMZyr7t6e7o/rfe6u+73fjEoxUEaRUCKORVMxiAeBQ6A3VbaaxprVW19xozbE1khDWqUe+xE5tSKmTppWjwAHwEU4n4aWj/9Fq1HXwm2X0+T/63GqBPoj6/YA5T8hbgT2gI5I4i5gB6jPF5D5ZEn0AivhzXeB7YR/GKgDjoDVhK8TaAeugVFg87vi6lOf/B08qt1Jjmye224AC8B0OF8C54mY+tCNK+Ak4asBqgGBeWArdpwm1Ad1LnKc5tR7dTRf7ewXIlkCckBbpLjOgiD38wVkv1FkN1gMFv/tPs6myBkI4ql9J7LJIL71Qn6rW9W7xMjcqS2FXouoY+pzIH1Wh/5iH7/ZbCCeSZP/E+KMOhWe0fmZ0g99ibhQeBkASTp/fZNajagAAAAASUVORK5CYII=);
40+
}
41+
42+
[role="toolbar"] .pack-icon-delete {
43+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA85kAAImUAAB+3gAA7PgAADObAAAQ5ap9ykMAAADhSURBVHja7NY/SgNBFMfxz0oEsbTXRiw8gNYJGEglOUVO4DE8kKCg2CUXSJNKe+uEgM9miyW4sju7sCDzg4GZN8P7zsx786eICEPoyEAaDDxqMfYYE9zhGifYYo0XvGLf1FnxR4zPcVvZlQs84glvlXEzjPGAj9L2jRU+a8kR8VuZR8QuumkXEfc1/mtXvMFlD6Hc4KrNVn/1mEdnbWM8WFY/V+rTg3ZT2zQlq6sdxUG7qa3IN1cGZ3AGZ/D/By862Dq9TqlKep2WHaHvqSs+xU35rW2rfTnxbQo4H6de9TMAgtWj/wSFyMoAAAAASUVORK5CYII=);
44+
}
45+
46+
</style>
47+
</head>
48+
49+
<body role="application">
50+
<div role="toolbar">
51+
<ul>
52+
<li><button class="pack-icon-delete">Delete</button></li>
53+
</ul>
54+
<ul>
55+
<li><button class="pack-icon-mark">Mark</button></li>
56+
<li><button class="pack-icon-send">Send</button></li>
57+
<li><button class="pack-icon-move">Move</button></li>
58+
<li><button class="pack-icon-share">Share</button></li>
59+
</ul>
60+
</div>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)