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

0 commit comments

Comments
 (0)