Mobile App Message Bar

By Rafi

mobile flexbox icons

How do I use This?

A mobile app bottom message input bar.

HTML

<div class="mobile-app-message-bar">
  <button class="camera-button">
    <i class="fa fa-camera" aria-hidden="true"></i>
  </button>
  <div class="message-input">
    <input type="text" name="" value="" placeholder="Message">
  </div>
  <button class="send-button">Send</button>
</div>

$mobile-app-message-bar-bg: $white;
$mobile-app-message-bar-icon-size: 1.5rem;
$mobile-app-message-bar-height: rem-calc(80);
$mobile-app-message-bar-input-radius: rem-calc(10);

.mobile-app-message-bar {
  height: $mobile-app-message-bar-height;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $mobile-app-message-bar-bg;

  .camera-button {
    flex-shrink: 1;
    padding: 1rem;

    i,
    img,
    svg {
      font-size: $mobile-app-message-bar-icon-size;
      max-width: $mobile-app-message-bar-icon-size;
      max-height: $mobile-app-message-bar-icon-size;
    }
  }

  .message-input {
    flex-grow: 1;

    input[type='text'] {
      border-radius: $mobile-app-message-bar-input-radius;
      margin: 0;
    }
  }

  .send-button {
    flex-shrink: 1;
    padding: 1rem;
    margin: 0;
    font-weight: 600;
  }
}

.mobile-app-message-bar {
  height: 5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #fefefe;
}

.mobile-app-message-bar .camera-button {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  padding: 1rem;
}

.mobile-app-message-bar .camera-button i,
.mobile-app-message-bar .camera-button img,
.mobile-app-message-bar .camera-button svg {
  font-size: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

.mobile-app-message-bar .message-input {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.mobile-app-message-bar .message-input input[type='text'] {
  border-radius: 0.625rem;
  margin: 0;
}

.mobile-app-message-bar .send-button {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  padding: 1rem;
  margin: 0;
  font-weight: 600;
}

Mobile App Message Bar

By Rafi

Animated Expanding Search Form

Expandable Searchbar

Registration Form

Mobile App Message Bar

By Rafi

Similar Building Blocks

Animated Expanding Search Form

Expandable Searchbar

Registration Form