Status Update with Input Box

By Harry Manchanda

How do I use This?

An area for the user to post a status update. It includes a textarea, some action icons, and a submit/post button.

HTML

<div class="status-update-input-box">
  <form>
    <div class="row input-box-container">
      <div class="columns">
        <label> <!-- Add a Label here to give this input box a heading -->
          <textarea rows="5" placeholder="Hey Harry, What's on your mind?"></textarea>
        </label>
      </div>
    </div>
    <div class="row medium-collapse user-action-container">
      <div class="small-12 medium-7 columns">
        <div class="user-action-box">
          <div class="action-area">
            <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Upload a Photo">
              <i class="fa fa-picture-o" aria-hidden="true"></i>
              <span class="show-for-sr">Upload a Photo</span>
            </a>
          </div>
          <div class="action-area">
            <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Upload a Video">
              <i class="fa fa-video-camera" aria-hidden="true"></i>
              <span class="show-for-sr">Upload a Video</span>
            </a>
          </div>
          <div class="action-area">
            <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Check in">
              <i class="fa fa-map-marker" aria-hidden="true"></i>
              <span class="show-for-sr">Check in</span>
            </a>
          </div>
          <div class="action-area">
            <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Add a Feeling">
              <i class="fa fa-smile-o" aria-hidden="true"></i>
              <span class="show-for-sr">Add a Feeling</span>
            </a>
          </div>
          <div class="action-area">
            <a href="#" class="action-anchor has-tip bottom" data-tooltip aria-haspopup="true" data-disable-hover="false" tabindex="2" title="Tag a Friend">
              <i class="fa fa-tags" aria-hidden="true"></i>
              <span class="show-for-sr">Tag a Friend</span>
            </a>
          </div>
        </div>
      </div>
      <div class="small-12 medium-5 columns">
        <div class="user-submit-box">
          <input type="submit" class="button small" value="POST">
        </div>
      </div>
    </div>
  </form>
</div>

.status-update-input-box {
  background-color: $white;
  padding: 1rem;
  width: 100%;
  border: 1px solid $medium-gray;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0, 0.18), 0 0.125rem 2px rgba(0,0,0, 0.36);

  .input-box-container {

    textarea {
      margin-bottom: 0;

      &:focus {
        border: 1px solid $medium-gray;
        box-shadow: none;
      }

      &,
      &:focus {
        border-bottom: none;
      }
    }
  }

  .user-action-container {
    @include breakpoint(medium) {
      margin-right: 0;
      margin-left: 0;
    }

    .user-action-box {
      padding: 0;
      border: 1px solid $medium-gray;
      display: flex;

      .action-area {
        width: 20%;
        border-right: 0.0625rem solid $medium-gray;
        text-align: center;
        padding-top: 0.675rem;
        padding-bottom: 0.675rem;

        &:last-of-type {
          border-right: none;
        }

        .action-anchor {
          &.has-tip {
            border-bottom: none;
            cursor: pointer;
          }

          .fa {
            color: $primary-color;
          }
        }
      }
    }

    .user-submit-box {
      padding: 0.35rem 0.5rem;
      border: 1px solid $medium-gray;
      display: flex;
      justify-content: flex-end;

      @include breakpoint(small only) {
        border-top: none;
        justify-content: center;
      }

      @include breakpoint(medium) {
        border-left: none;
      }

      .button {
        margin-bottom: 0;

        @include breakpoint(small only) {
          @include button-expand;
          margin-top: 0.25rem;
          margin-bottom: 0.25rem;
        }
      }
    }
  }
}

.status-update-input-box {
  background-color: #fefefe;
  padding: 1rem;
  width: 100%;
  border: 1px solid #cacaca;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.18), 0 0.125rem 2px rgba(0, 0, 0, 0.36);
}

.status-update-input-box .input-box-container textarea {
  margin-bottom: 0;
}

.status-update-input-box .input-box-container textarea:focus {
  border: 1px solid #cacaca;
  box-shadow: none;
}

.status-update-input-box .input-box-container textarea, .status-update-input-box .input-box-container textarea:focus {
  border-bottom: none;
}

@media print, screen and (min-width: 40em) {
  .status-update-input-box .user-action-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.status-update-input-box .user-action-container .user-action-box {
  padding: 0;
  border: 1px solid #cacaca;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.status-update-input-box .user-action-container .user-action-box .action-area {
  width: 20%;
  border-right: 0.0625rem solid #cacaca;
  text-align: center;
  padding-top: 0.675rem;
  padding-bottom: 0.675rem;
}

.status-update-input-box .user-action-container .user-action-box .action-area:last-of-type {
  border-right: none;
}

.status-update-input-box .user-action-container .user-action-box .action-area .action-anchor.has-tip {
  border-bottom: none;
  cursor: pointer;
}

.status-update-input-box .user-action-container .user-action-box .action-area .action-anchor .fa {
  color: #1779ba;
}

.status-update-input-box .user-action-container .user-submit-box {
  padding: 0.35rem 0.5rem;
  border: 1px solid #cacaca;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media screen and (max-width: 39.9375em) {
  .status-update-input-box .user-action-container .user-submit-box {
    border-top: none;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 40em) {
  .status-update-input-box .user-action-container .user-submit-box {
    border-left: none;
  }
}

.status-update-input-box .user-action-container .user-submit-box .button {
  margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {
  .status-update-input-box .user-action-container .user-submit-box .button {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

Status Update with Input Box

By Harry Manchanda

Clipped Circle Graph

Alert Callouts Bordered

Circle Graph

Status Update with Input Box

By Harry Manchanda

Similar Building Blocks

Clipped Circle Graph

Alert Callouts Bordered

Circle Graph