Header bar for uploader

header-bar-for-uploader.markdown

Header bar for uploader

Just a little learning project for myself, but wanted to create a application header bar template in order to standardized our custom tools.

A Pen by Mike on CodePen.

License.

index.html

<div class="navbar">
  <div class="appname">
    <a href="" class="home">CAMS Processing Tool</a>
  </div>
  <div class="menu">
    <a href="help.html" class="menuitem" target="_blank"><span title="help"><i class="fa fa-question"></i></span></a>
    <a href="mailto:[email protected]?subject=Feedback/bug report%20for%20{Appname}" class="menuitem" title="Feedback"><span title="feedback/bug report"><i class="fa fa-envelope"></i></span></a>
    <a href="#" class="menuitem" title="change log"><i class="fa fa-book"></i></span></a>
  </div>
</div>
<div class="appcontent">
  <h2>Step 1: Upload CAMS file</h2>
  <div class="upload">
  <input type="file" name="csv" accept=".csv" class="">
  <input type="submit" class="submitButton">
</form>
  </br>
<h2>Step 2: Open CardWizard and run offset program </h2>
<div>Mike to provide instruction HTML</div>

style.css

/* Header bar */

.navbar {
  width: 100%;
  background: #AB0336;
  overflow: auto;
}

.appname {
  float: left;
  margin-left: 25px;
  font-family: open sans, helvetica, arial;
  font-size: 1em;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu {
  line-height:50px;
  float: right;
}

.menuitem, .home {
  font-family: open sans, helvetica, arial;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-size: 1em;
  margin-right: 15px;
}

.home:hover, .help:hover, .profile:hover, .feedback:hover {
  color: white;
}

.search {
  position: ablsolute;
  max-width: 300px;
  min-width: 100px;
}

.searchTerm {
  float: left;
  width: 100%;
  border: 1px solid gray;
  padding: 5px;
  height: 20px;
  border-radius: 3px;
  color: black;
  font-size: 0.9em;
}

.searchTerm:focus {
  color: gray;
}

.searchButton, .submitButton {
  position: absolute;
  float: right;
  min-width: 60px;
  height: 32px;
  border: 1px solid #2CE963;
  background: #2CE963;
  text-align: center;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
}

.tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

/* Content */

body {
  font-family: "Open Sans", "helvetica", sans-serif;
  color: #666666;
}

.appcontent {
  font-weight: 300;
  margin: 25px;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  max-width: 900px;
  position: absolulte;
}

h1 {
  font-size: 2em;
  color: #999999;
  font-weight: lighter;
  padding-top: 20px;
}

h2 {
  font-size: 1.5em;
  font-weight: lighter;
  color: #999999;
  padding-top: 5px;
}

blockquote {
  font-style: italic;
  color: #999999;
  font-weight: lighter;
  font-size: 1.3em;
}

img {
  margin: auto;
  display: block;
  padding: 10px;
}

a {
  color: gray;
  font-weight: normal;
}

li {
  line-height: 1.5;
}

.headerlink {
  font-size: 12pt;
  color: #cccccc;
  font-weight: lighter;
  text-decoration: none;
  padding-left: 5px;
}

a:hover {
  color: #992135;
}