Mobile Action Sheet

By Kevin Ball

mobile app action shet

How do I use This?

A mobile action sheet rising up from a button on the bottom of the screen.

HTML

<div class="off-canvas mobile-action-sheet off-canvas-absolute position-bottom" id="payments-action-sheet" data-off-canvas>
  <div class="mobile-action-sheet-inner">

    <button href="#" class="button action-sheet-toggle" type="button" data-toggle>Open Action Sheet</button>

    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

    <p>This action sheet can contain all sorts of things</p>
    <h5>Content</h5>
    <p>
      Check Check it
    </p>
    <h5>Forms</h5>
    <form>
      <label>Fill me out
        <input type="text"></input>
      </label>
    </form>

    <h5>Buttons</h5>
    <button href="#" class="button hollow white">Push the button</button>

  </div>
</div>

.mobile-action-sheet {
  background: $primary-color;
  overflow: visible;
  width: 94%;
  left: 3%;
  height: auto;
  transform: translateY(100%);
  color: $white;
  padding-top: $global-padding;

  label {
    color: $white;
  }
  .close-button {
    top: 0;
    font-size: 26px;
    color: darken($primary-color, 20%);
    display: none;
  }

  &.is-open .close-button {
    display: block;
  }

  .mobile-action-sheet-inner {
    position: relative;
    padding: 0 1rem 0.5rem;
  }

  .action-sheet-toggle {
    position: absolute;
    top: - $global-padding;
    left: 50%;
    transform: translate3D(-50%, -100%, 0);
  }

  &.position-bottom.is-transition-push::after {
    box-shadow: none;
  }

  .button.white {
    border: 1px solid $white;
    color: $white;

    &:hover, &:active {
      border: 1px solid $white;
      color: $white;
    }
  }
}

.mobile-action-sheet {
  background: #1779ba;
  overflow: visible;
  width: 94%;
  left: 3%;
  height: auto;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  color: #fefefe;
  padding-top: 1rem;
}

.mobile-action-sheet label {
  color: #fefefe;
}

.mobile-action-sheet .close-button {
  top: 0;
  font-size: 26px;
  color: #0c3e5f;
  display: none;
}

.mobile-action-sheet.is-open .close-button {
  display: block;
}

.mobile-action-sheet .mobile-action-sheet-inner {
  position: relative;
  padding: 0 1rem 0.5rem;
}

.mobile-action-sheet .action-sheet-toggle {
  position: absolute;
  top: -1rem;
  left: 50%;
  -webkit-transform: translate3D(-50%, -100%, 0);
      -ms-transform: translate3D(-50%, -100%, 0);
          transform: translate3D(-50%, -100%, 0);
}

.mobile-action-sheet.position-bottom.is-transition-push::after {
  box-shadow: none;
}

.mobile-action-sheet .button.white {
  border: 1px solid #fefefe;
  color: #fefefe;
}

.mobile-action-sheet .button.white:hover, .mobile-action-sheet .button.white:active {
  border: 1px solid #fefefe;
  color: #fefefe;
}

Mobile Action Sheet

By Kevin Ball

Comment Section

CSS Grid - Holy Grail Layout

Dashboard Number Card

Mobile Action Sheet

By Kevin Ball

Similar Building Blocks

Comment Section

CSS Grid - Holy Grail Layout

Dashboard Number Card