Menu icon Foundation
Custom Action Sheet

Hi All,

I am new to SASS and FFA.

I attempted to follow instructions in implementing a custom action sheet by following the documentation provided http://foundation.zurb.com/apps/docs/#!/action-sheet.

I want the tail of the action sheet (the triangle extruding from the action sheet container) to disappear and I changed it with the $tail-size variable as shown in my app.scss.

I implemented it in my index.html to just by applying the classes. I am unsure if it was the right way to implement it.
However, upon testing out, the action sheet appears from the bottom of the screen and takes up the whole width (like how it is supposed to be in small screens), instead of from the button origin with a fixed width of 300px(as it is supposed to be in medium to larger screens). The tail size is also there despite my changes in app.scss.

app.scss

// This is the wrapper for your button and action sheet
.sign-in-box-container {
  position: relative;
  display: inline-block;
}
// This is the action sheet itself
.sign-in-box {
  // These are the core styles for the sheet menu
  $padding: 1rem;
  $color: #000;
  // $border-color;
  $background-hover: #ccc;
  $tail-size: 0;

  // This mixin sets up styles for the mobile action sheet
  @include action-sheet(
    $position: bottom, // Can be top or bottom
    $shadow: 0 3px 10px black,
    $animate: transform opacity, // Properties to animate when the menu is shown and hidden. Remove "transform" or "opacity" to turn off those animations
    $animation-speed: 0.25s, // Speed at which the menu animates in and out
    $padding: 0.5rem,
    $background: #fff // Background color
  );
  // This mixin sets up styles for the desktop popup menu
  // Here we're only applying the styles on medium-sized screens and larger
  @include breakpoint(medium)
  {
    $position: bottom; // Can be top or bottom
    $background: #fff; // Background color
    $width: 200px; // Width of whole menu
    $radius: 3px; // Border radius of menu
    $shadow: 0 4px 10px black; // Box shadow of menu
    $tail-size: 0; // Size of tail that is attached to the menu
  }
}
            

         

index.html

<zf-action-sheet class="sign-in-box-container">
<zf-as-button><a>Sign In Here</a></zf-as-button>
<zf-as-content class="sign-in-box">
  <p> Bla bla bla </p>
</zf-as-content>
</zf-action-sheet>
            

         

customfoundation for appsaction sheet

Hi All,

I am new to SASS and FFA.

I attempted to follow instructions in implementing a custom action sheet by following the documentation provided http://foundation.zurb.com/apps/docs/#!/action-sheet.

I want the tail of the action sheet (the triangle extruding from the action sheet container) to disappear and I changed it with the $tail-size variable as shown in my app.scss.

I implemented it in my index.html to just by applying the classes. I am unsure if it was the right way to implement it.
However, upon testing out, the action sheet appears from the bottom of the screen and takes up the whole width (like how it is supposed to be in small screens), instead of from the button origin with a fixed width of 300px(as it is supposed to be in medium to larger screens). The tail size is also there despite my changes in app.scss.

app.scss

// This is the wrapper for your button and action sheet
.sign-in-box-container {
  position: relative;
  display: inline-block;
}
// This is the action sheet itself
.sign-in-box {
  // These are the core styles for the sheet menu
  $padding: 1rem;
  $color: #000;
  // $border-color;
  $background-hover: #ccc;
  $tail-size: 0;

  // This mixin sets up styles for the mobile action sheet
  @include action-sheet(
    $position: bottom, // Can be top or bottom
    $shadow: 0 3px 10px black,
    $animate: transform opacity, // Properties to animate when the menu is shown and hidden. Remove "transform" or "opacity" to turn off those animations
    $animation-speed: 0.25s, // Speed at which the menu animates in and out
    $padding: 0.5rem,
    $background: #fff // Background color
  );
  // This mixin sets up styles for the desktop popup menu
  // Here we're only applying the styles on medium-sized screens and larger
  @include breakpoint(medium)
  {
    $position: bottom; // Can be top or bottom
    $background: #fff; // Background color
    $width: 200px; // Width of whole menu
    $radius: 3px; // Border radius of menu
    $shadow: 0 4px 10px black; // Box shadow of menu
    $tail-size: 0; // Size of tail that is attached to the menu
  }
}
            

         

index.html

<zf-action-sheet class="sign-in-box-container">
<zf-as-button><a>Sign In Here</a></zf-as-button>
<zf-as-content class="sign-in-box">
  <p> Bla bla bla </p>
</zf-as-content>
</zf-action-sheet>
            

         
Rafi Benkual over 3 years ago

Hi Edward! Really cool trying Foundation for Apps! What type of web app are you making?

I'm trying to figure out how to help you, not sure what tail-size means. It would be awesome to know more about what you're trying to accomplish so we can steer you in the right direction!