Magic Wizard Concept
.container
.spacing
%span{:class=>"fa-stack fa-lg logo"}
%i{:class=>"fa fa-square fa-stack-2x "}
%i{:class=>"fa fa-magic fa-stack-1x fa-inverse"}
%h1
Magic
%strong Wizard
%input{:class=>"text",:placeholder=>"Where did the elf go?"}
%input{:class=>"text int",:placeholder=>"Type the power"}
%input{:type=>"submit",:class=>"button",:value=>"Add item"}
%nav
%button{:class=>"nav-button active"}
%span{:class=>"fa fa-plus"}
New item
%button{:class=>"nav-button"}
%span{:class=>"fa fa-list"}
All items
%button{:class=>"nav-button"}
%span{:class=>"fa fa-cog"}
Settings
A concept for mobile app design. I hope you like it.
A Pen by sonjavanteese on CodePen.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
/*
Change accent color - http://flatuicolors.com
*/
$accent-color:#1abc9c;
$accent-color--text:#FFF;
$main-background:#FFF;
$main-border-color:#EEE;
$h1-color:#333;
$nav-background:#EEE;
$nav-color:#333;
$nav-top-border:transparent;
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,300,700);
* {
box-sizing:border-box;
}
body,html {
height:100%;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
/* max-width:500px;
width:100%;
*/
width:340px;
margin:0 auto;
padding:4em 0 2.5em;
background:$main-background;
border-left:1px solid $main-border-color;
border-right:1px solid $main-border-color;
border-radius:3px;
height:100%;
min-height:420px;
position:relative;
.spacing {
padding-left:2.5em;
padding-right:2.5em;
}
&:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
.text {
width:100%;
border:1px solid #ccc;
padding:12px;
outline:none;
&:focus {
box-shadow:0 0 3px #AAA;
}
}
h1 {
font-weight:300;
font-size:2rem;
margin:1rem 0 1.5rem;
text-align:center;
color:$h1-color;
strong {
font-weight:400;
}
}
.logo {
display:block;
margin:0 auto;
text-align:center;
font-size:2rem;
color:$accent-color;
}
.button {
width:100%;
padding:12px;
margin:8px 0;
background:$accent-color;
color:$accent-color--text;
border:0;
box-shadow:inset 0 5px 0 lighten($accent-color,8%),0 2px 0 darken($accent-color,10%);
font-size:.9rem;
border-radius:3px;
outline:none;
&:active {
margin-top:(8px + 2px);
}
}
nav {
position:absolute;
width:100%;
bottom:0;
left:0;
background:$nav-background;
color:$nav-color;
.nav-button {
width:(100%/3);
margin:0;
padding:1.5em 10px;
border:0;
background:$nav-background;
color:$nav-color;
font-size:.8em;
float:left;
border-top:1px solid $nav-top-border;
outline:none;
&:hover {
background: lighten($nav-background,5%);
}
&.active {
background:$accent-color;
color:$accent-color--text;
&:hover {
background: lighten($accent-color,5%);
}
}
&:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />