Skip to content

Commit 79a4f31

Browse files
rnowmrnowm
committed
initial commit
0 parents  commit 79a4f31

23 files changed

+325
-0
lines changed

‎README.md

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

‎bower.json

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

‎drawer.css

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
/* ----------------------------------
2+
* Drawer
3+
* ---------------------------------- */
4+
5+
/* Main region */
6+
section[role="region"] {
7+
width: 100%;
8+
transition: all 0.25s ease;
9+
position: relative;
10+
z-index: 100;
11+
}
12+
13+
section[role="region"]:target {
14+
transform: translateX(80%);
15+
}
16+
17+
/* Hide anchor to change target */
18+
section[role="region"] > header:first-child > a:first-of-type {
19+
display: none;
20+
}
21+
section[role="region"]:target > header:first-child > a:first-of-type {
22+
display: block;
23+
}
24+
section[role="region"] > header:first-child > a:last-of-type {
25+
display: block;
26+
}
27+
section[role="region"]:target > header:first-child > a:last-of-type {
28+
display: none;
29+
}
30+
31+
32+
/* Sidebar */
33+
section[data-type="sidebar"] {
34+
position: absolute;
35+
width: 80%;
36+
background: url(drawer/images/ui/pattern.png) repeat;
37+
height: 100%;
38+
top: 0;
39+
left: 0;
40+
overflow: hidden;
41+
}
42+
43+
/* Sidebar header */
44+
section[data-type="sidebar"] > header {
45+
position: relative;
46+
z-index: 10;
47+
height: 5rem;
48+
color: #fff;
49+
background: url(drawer/images/ui/header.png) repeat-x left bottom / 100% auto;
50+
}
51+
52+
section[data-type="sidebar"] > header:after {
53+
content: "";
54+
height: 0.3rem;
55+
position: absolute;
56+
top: 100%;
57+
left: 0;
58+
right: 0;
59+
background: url(drawer/images/ui/shadow_header.png) repeat-x left top;
60+
background-size: auto 100%;
61+
}
62+
63+
section[data-type="sidebar"] > header h1 {
64+
font-size: 2.2rem;
65+
line-height: 4.8rem;
66+
text-align: left;
67+
white-space: nowrap;
68+
text-overflow: ellipsis;
69+
display: block;
70+
overflow: hidden;
71+
margin: 0 0 0 3rem;
72+
height: 100%
73+
}
74+
75+
section[data-type="sidebar"] > header h1 em {
76+
font-weight: bold;
77+
font-size: 1.5rem;
78+
line-height: 1em;
79+
}
80+
81+
/* Generic set of actions in toolbar */
82+
section[data-type="sidebar"] > header menu[type="toolbar"] {
83+
height: 100%;
84+
float: right;
85+
}
86+
87+
section[data-type="sidebar"] > header menu[type="toolbar"] a,
88+
section[data-type="sidebar"] > header menu[type="toolbar"] button {
89+
height: 4.9rem;
90+
line-height: 4.9rem;
91+
float: left;
92+
background: none;
93+
padding: 0 1.75rem;
94+
-moz-box-sizing: border-box;
95+
min-width: 5rem;
96+
text-align: center;
97+
}
98+
99+
section[data-type="sidebar"] > header menu[type="toolbar"] a:last-child,
100+
section[data-type="sidebar"] > header menu[type="toolbar"] button:last-child {
101+
background: url(drawer/images/ui/separator.png) no-repeat left center / auto 3.1rem;
102+
}
103+
104+
section[data-type="sidebar"] > header menu[type="toolbar"] {
105+
padding: 0;
106+
margin: 0;
107+
}
108+
109+
section[data-type="sidebar"] > header a,
110+
section[data-type="sidebar"] > header button {
111+
border: none;
112+
background: none;
113+
padding: 0;
114+
overflow: hidden;
115+
font-weight: 600;
116+
font-size: 1.4rem;
117+
line-height: 1.1em;
118+
color: #fff;
119+
}
120+
121+
section[data-type="sidebar"] > header a:first-letter,
122+
section[data-type="sidebar"] > header button:first-letter {
123+
text-transform: uppercase;
124+
}
125+
126+
/* Icon definitions */
127+
section[data-type="sidebar"] > header .icon {
128+
display: inline-block;
129+
width: 3rem;
130+
height: 3rem;
131+
margin: 0 -1rem;
132+
background: transparent no-repeat center center / 100% auto;
133+
font-size: 0;
134+
overflow: hidden;
135+
position: relative;
136+
height: 4.9rem;
137+
}
138+
139+
section[data-type="sidebar"]:after {
140+
content: "";
141+
width: 1rem;
142+
background: url(drawer/images/ui/shadow.png) right top repeat-y;
143+
height: 100%;
144+
position: absolute;
145+
top: 0;
146+
right: 0;
147+
z-index: 5;
148+
}
149+
150+
section[data-type="sidebar"] > nav {
151+
overflow-y: auto;
152+
max-height: 100%;
153+
margin-right: -0.8rem;
154+
}
155+
156+
section[data-type="sidebar"] > nav > h2 {
157+
font-weight: bold;
158+
font-size: 1.4rem;
159+
line-height: 3.3rem;
160+
text-indent: 3rem;
161+
color: #fff;
162+
background: url(drawer/images/ui/pattern_subheader.png) repeat left top;
163+
border-bottom: 0.1rem solid #596068;
164+
margin: 0;
165+
padding-right: 0.8rem;
166+
}
167+
168+
section[data-type="sidebar"] [role="toolbar"] {
169+
position: absolute;
170+
}
171+
172+
section[data-type="sidebar"] > nav > ul {
173+
width: 100%;
174+
margin: 0;
175+
padding: 0;
176+
}
177+
178+
section[data-type="sidebar"] > nav > ul > li {
179+
color: #fff;
180+
list-style: none;
181+
transition: background 0.2s ease;
182+
}
183+
184+
section[data-type="sidebar"] > nav > ul > li:active {
185+
background: #00ABCC;
186+
}
187+
188+
section[data-type="sidebar"] > nav > ul > li > a {
189+
text-decoration: none;
190+
color: #fff;
191+
font-size: 1.6rem;
192+
line-height: 4.35rem;
193+
border-bottom: 0.1rem solid #596068;
194+
text-indent: 3rem;
195+
padding-right: 0.8rem;
196+
width: 100%;
197+
-moz-box-sizing: border-box;
198+
display: block;
199+
text-overflow: ellipsis;
200+
white-space: nowrap;
201+
overflow: hidden;
202+
}

‎drawer/images/icons/menu.png

2.78 KB
Loading

‎drawer/images/icons/[email protected]

1.18 KB
Loading

‎drawer/images/icons/[email protected]

282 Bytes
Loading

‎drawer/images/ui/header.png

1018 Bytes
Loading

‎drawer/images/ui/header/header.png

149 Bytes
Loading

‎drawer/images/ui/header/shadow.png

76 Bytes
Loading

‎drawer/images/ui/header/[email protected]

306 Bytes
Loading

‎drawer/images/ui/header/[email protected]

88 Bytes
Loading

‎drawer/images/ui/negative.png

114 Bytes
Loading

‎drawer/images/ui/pattern.png

5.67 KB
Loading

‎drawer/images/ui/pattern_subheader.png

2.28 KB
Loading

‎drawer/images/ui/separator.png

1.07 KB
Loading

‎drawer/images/ui/separator_large.png

143 Bytes
Loading

‎drawer/images/ui/shadow.png

939 Bytes
Loading

‎drawer/images/ui/[email protected]

343 Bytes
Loading

‎drawer/images/ui/[email protected]

90 Bytes
Loading

‎drawer/images/ui/shadow_header.png

932 Bytes
Loading

‎drawer/images/ui/[email protected]

306 Bytes
Loading

‎drawer/images/ui/[email protected]

89 Bytes
Loading

‎drawer/index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Drawer</title>
7+
<meta name="description" content="Hidden menu options triggered by the menu button in the header">
8+
9+
<link rel="stylesheet" href="../../style/headers.css">
10+
<link rel="stylesheet" href="../drawer.css">
11+
12+
<!--
13+
This <style> and <link> is only used for the example code, is no needed for the real case use
14+
-->
15+
<style>
16+
html, body {
17+
margin: 0;
18+
padding: 0;
19+
font-size: 10px;
20+
background-color: #fff;
21+
height: 100%;
22+
overflow-x: hidden;
23+
}
24+
25+
h2.bb-docs {
26+
font-size: 1.8rem;
27+
font-weight: lighter;
28+
color: #666;
29+
margin: -0.1rem 0 0;
30+
background-color: #f5f5f5;
31+
padding: 0.4rem 0.4rem 0.4rem 3rem;
32+
border: solid 0.1rem #e8e8e8;
33+
}
34+
35+
section[role="region"] {
36+
height: 100%;
37+
line-height: 1em;
38+
font-size: 2.2rem;
39+
}
40+
41+
div[role="main"] {
42+
background: #fff;
43+
height: calc(100% - 5rem);
44+
overflow: hidden;
45+
}
46+
47+
div[role="main"] p {
48+
margin: 2rem 2.5rem;
49+
}
50+
51+
/* Base icons */
52+
section[data-type="sidebar"] > header .icon.icon-add {
53+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
54+
}
55+
</style>
56+
57+
</head>
58+
59+
<body role="application">
60+
61+
<section data-type="sidebar">
62+
<header>
63+
<menu type="toolbar">
64+
<a href="#"><span class="icon icon-add">add</span></a>
65+
</menu>
66+
<h1>Title <em>(9)</em></h1>
67+
</header>
68+
<nav>
69+
<ul>
70+
<li><a href="#">label</a></li>
71+
<li><a href="#">label</a></li>
72+
<li><a href="#">label</a></li>
73+
<li><a href="#">label</a></li>
74+
</ul>
75+
<h2>Subtitle</h2>
76+
<ul>
77+
<li><a href="#">label</a></li>
78+
<li><a href="#">label</a></li>
79+
<li><a href="#">label larger label than the </a></li>
80+
<li><a href="#">label</a></li>
81+
</ul>
82+
</nav>
83+
</section>
84+
85+
<section id="drawer" role="region">
86+
<header>
87+
<a href="#"><span class="icon icon-menu">hide sidebar</span></a>
88+
<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
89+
<h1>Inbox</h1>
90+
</header>
91+
<div role="main"></div>
92+
</section>
93+
94+
</body>
95+
</html>

0 commit comments

Comments
 (0)