sonjavanteese
9/25/2019 - 1:42 PM

Magic Wizard Concept

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
  

Magic Wizard Concept

A concept for mobile app design. I hope you like it.

A Pen by sonjavanteese on CodePen.

License.

<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" />