Skip to content

Instantly share code, notes, and snippets.

@rnowm

rnowm/app.css

Created Feb 15, 2013
Embed
What would you like to do?
Firefox OS Building Blocks example
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
height: 100%;
display: block;
overflow: hidden;
}
section[role="region"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
#settings-view {
z-index: 10;
}
.move-down {
transform: translateY(100%);
transition: all 0.2s;
}
.move-up {
transform: translateY(0);
transition: all 0.2s;
}
section[role="region"] > header:first-child .icon.icon-settings {
background-image: url(images/settings.png);
}
[data-type="list"] li > a aside img {
height: 4rem;
width: 4rem;
margin: 1rem 1rem 0 0;
}
[data-type="list"] li > a aside.pack-end.install {
background: url(images/download.png) no-repeat;
height: 3rem;
width: 3rem;
margin: 1.5rem 0 0 1rem;
}
#settings-view form {
margin: 1.5rem;
}
//Show / Hide Settings view
var btnSettings = document.querySelector("#settings-btn");
var viewSettings = document.querySelector("#settings-view");
btnSettings.addEventListener ('click', function () {
viewSettings.classList.remove('move-down');
viewSettings.classList.add('move-up');
});
var btnCloseSettings = document.querySelector("#close-btn");
btnCloseSettings.addEventListener ('click', function () {
viewSettings.classList.remove('move-up');
viewSettings.classList.add('move-down');
});
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo Store</title>
<link rel="stylesheet" type="text/css" href="style/headers.css"/>
<link rel="stylesheet" type="text/css" href="style/lists.css" />
<link rel="stylesheet" type="text/css" href="style/input_areas.css" />
<link rel="stylesheet" type="text/css" href="style/app.css"/>
</head>
<body role="application">
<section role="region" id="list-view">
<header>
<menu type="toolbar">
<button id="settings-btn"><span class="icon icon-settings">settings</span></button>
</menu>
<h1>demo Store</h1>
</header>
<article id="appList" data-type="list">
<ul>
<li>
<a href="#">
<aside><img src="style/images/default.png"></aside>
<aside class="pack-end install"></aside>
<p>App 1</p>
<p>App developer</p>
</a>
</li>
<li>
<a href="#">
<aside><img src="style/images/default.png"></aside>
<aside class="pack-end install"></aside>
<p>App 2</p>
<p>App developer</p>
</a>
</li>
</ul>
</article>
</section>
<section role="region" id="settings-view" class="skin-organic">
<header>
<button id="close-btn"><span class="icon icon-close">close</span></button>
<menu type="toolbar">
<button id="settings-btn">Log in</button>
</menu>
<h1>Settings</h1>
</header>
<article>
<form>
<p>
<input type="text" placeholder="username">
<button type="reset">Clear</button>
</p>
<p><input type="password" placeholder="password"/></p>
</form>
</article>
</section>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.