Forms

Text Field

<!-- inactive textfield -->
<label>Field Title</label>
<input type="text" placeholder="Inactive Field" />

<!-- active textfield -->
<label>Field Title</label>
<input type="text" value="Active Field" class="active" />

<!-- complete/success textfield -->
<label>Field Title</label>
<input type="text" value="Success" class="complete" />

<!-- error textfield -->
<label>Field Title</label>
<input type="text" value="Error" class="error" />
// inactive textfield
    label Field Title
    input(type='text', placeholder='Inactive Field')
// active textfield
    label Field Title
    input.active(type='text', value='Active Field')
// complete/success textfield
    label Field Title
    input.complete(type='text', value='Success')
// error textfield
    label Field Title
    input.error(type='text', value='Error')
label {
  text-transform: uppercase;
  color: #999cab;
  letter-spacing: 1px;
  font-size: .75rem;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  border-color: #ebebeb;
  padding: 14px 11px;
  height: auto;
  font-size: 1rem;
  color: #262a48;
  display: block;
  clear: both;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s linear, background 0.15s linear;
  margin: 6px 0 40px;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
  box-shadow: none;
  border-color: #999cab;
  background: #fff;
  outline: none;
  color: #262a48;
}

input[type="text"].complete {
  border-color: #7ecf54;
  color: #262a48;
}

input.error {
  border-color: #ef3444;
  color: #262a48;
}

::-webkit-input-placeholder {
  color: #cccdd3;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #cccdd3;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #cccdd3;
}

:-ms-input-placeholder {
  color: #cccdd3;
}

/* hide the X in IE10/11 in text boxes */
input[type="text"]::-ms-clear {
  display: none;
}
label {
  text-transform: uppercase;
  color: $gray;
  letter-spacing: 1px;
  font-size: .75rem;
  margin-bottom:5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
  border-radius: 6px;
  border-width:2px;
  border-style: solid;
  border-color: $lightgray;
  padding: 14px 11px;
  height: auto;
  font-size: 1rem;
  color:$darkblue;
  display: block;
  clear: both;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s linear, background 0.15s linear;
  margin:6px 0 40px;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
  box-shadow:none;
  border-color:$gray;
  background: #fff;
  outline: none;
  color:$darkblue;
}
input[type="text"].complete {
    border-color:$green;
    color:$darkblue;
}
input.error {
    border-color:$red;
    color:$darkblue;
}
::-webkit-input-placeholder {
   color: $mediumgray;
}

:-moz-placeholder { /* Firefox 18- */
   color: $mediumgray;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: $mediumgray;
}

:-ms-input-placeholder {
   color: $mediumgray;
}

/* hide the X in IE10/11 in text boxes */
input[type="text"]::-ms-clear {
  display: none;
}

Password Field

<label>Password</label>
<input type="password" name="password" id="password" />
label Password
input#password-1(type='password', name='password')
.hideShowPassword-toggle {
  background-color: transparent !important;
  background-image: url('images/eye-off.png');
  background-image: url('images/eye.png'), none;
  background-position: 0 center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 100%;
  height: 44px;
  margin: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 46px;
}

.hideShowPassword-toggle-hide {
  background-image: url('images/eye-off.png'), none;
  background-color: transparent;
}

.hideShowPassword-toggle:hover, .hideShowPassword-toggle:focus {
  outline: transparent;
}
// show password indicator

.hideShowPassword-toggle {
  background-color: transparent !important;
  background-image: url('images/eye-off.png');
  background-image: url('images/eye.png'), none;
  background-position: 0 center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  border-radius: 0.25em;
  cursor: pointer;
  font-size: 100%;
  height: 44px;
  margin: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 46px;
}

.hideShowPassword-toggle-hide {
  background-image: url('images/eye-off.png'), none;
  background-color: transparent;
}

.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
  outline: transparent;
}
Grab the latest:

hideShowPassword.min.js

from https://github.com/cloudfour/hideShowPassword

then before </body> tag add this, with careful attention to password name

<script>
    $('#password').hidePassword(true);
</script>

File Upload

An important note to mention about how this is built here is that there are two inputs, one to visually represent the input and another as an invisible overlay activating the process on click; this is necessary due to the nature of the design.

As with all more complex components in this guide you will have to write your own logic here. The functioning of the file upload below is for demo purposes only; please do not copy this jQuery into your project.

<div class="file-upload">
  <label class="upload-label">
    <input id="filename" type="text" placeholder="UPLOAD FILE" class="upload-actual"/>
    <input id="upload-shield" type="file" class="upload-file"/>
  </label>
</div>
.file-upload
  label.upload-label
    input.upload-actual#filename(type='text' placeholder='UPLOAD FILE')
    input.upload-file#upload-shield(type='file')
.file-upload,
.upload-label {
  position: relative;
}

#filename,
#upload-shield {
  border: none;
  outline: none;
  color: #262a48;
  cursor: pointer;
  width: 100%;
  max-height: 50px;
  min-height: 50px;
}

#upload-shield {
  z-index: 100;
  opacity: 0;
}

#upload-shield::-webkit-file-upload-button {
  display: none;
}

#filename {
  position: absolute;
  padding-right: 40px;
  font-size: 16px;
  border-radius: 0;
  word-break: break-word;
  background: #f5f5f6 url(/images/icons/svg/default_blue/icon-upload-file.svg) no-repeat;
  background-position: right 9px center;
  background-size: 22px;
}
.file-upload,
.upload-label {
  position: relative;
}

#filename,
#upload-shield {
  border: none;
  outline: none;
  color: $darkblue;
  cursor: pointer;
  width: 100%;
  max-height: 50px;
  min-height: 50px;
}

#upload-shield {
  z-index: 100;
  opacity: 0;
  &::-webkit-file-upload-button {
    display: none;
  }
}

#filename {
  position: absolute;
  padding-right: 40px;
  font-size: 16px;
  border-radius: 0;
  word-break: break-word;
  background: #f5f5f6 url(/images/icons/svg/default_blue/icon-upload-file.svg) no-repeat;
  background-position: right 9px center;
  background-size: 22px;
}

Filter

<div class="styled-select">
    <select id="sort">
      <option value="date">Sort by date</option>
      <option value="name">Sort by name</option>
      <option value="type">Sort by type</option>
    </select>
</div>
.styled-select
  select#sort
    option(value='date') Sort by date
    option(value='name') Sort by name
    option(value='type') Sort by type
.styled-select {
    width: 170px;
    height: 28px;
    border-radius: 25px;
    overflow: hidden;
    background: url(../images/arrow-select.png) no-repeat 145px center/9px auto #e5e6ea;
    margin-right: 20px;
}
.styled-select select {
    background: transparent;
    width: 200px;
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: .80rem;
    border: none;
    height: 28px;
    color: #999cab;
    padding: 0 15px;
    margin: 0;
}
.styled-select select option {
    line-height: 30px;
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 5px 10px 5px 15px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .styled-select {
    background: url(../images/retina/arrow-select.png) no-repeat 145px center/9px auto #e5e6ea; }
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

select:focus {
  outline: none;
  box-shadow: none !important;
}

select:focus::-ms-value {
  background: #e5e6ea;
  color: #999cab;
  background: url(../images/arrow-select.png) no-repeat 160px center/9px auto;
}
.styled-select {
  width: 170px;
  height: 28px;
  border-radius: 25px;
  overflow: hidden;
  background: url(../images/arrow-select.png) no-repeat 145px center / 9px auto $lightgray;
  margin-right: 20px;

  select {
    background: transparent;
    width: 200px;
    @include latomedium-italic;
    font-size: .80rem;
    border: none;
    height: 28px;
    color:$gray;
    padding: 0 15px;
    margin:0;

    option {
      line-height:30px;
      @include latomedium;
      padding:5px 10px 5px 15px;
    }
  }
}
@include retina {
  .styled-select {
    background: url(../images/retina/arrow-select.png) no-repeat  145px center / 9px auto $lightgray;
  }
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
select:focus {
  outline: none;
  box-shadow:none !important;
}
select:focus::-ms-value {
  background: $lightgray;
  color:$gray;
  background: url(../images/arrow-select.png) no-repeat  160px center / 9px auto;
}