Status Update with Input Box

By Harry Manchanda

F6
#
social icons status containers button
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;
  }
}
JS

Similar Building Blocks

status

Clipped Circle Graph

F6
by Kevin Ball
status

Alert Callouts Bordered

F6
by Rafi
status

Circle Graph

F6
by Kevin Ball