Foundation Custom Action Sheet

Question

I am new to Foundation for App and SASS.

I am trying to create a custom action sheet that makes use of the sass mixin to custom style it without affecting the base foundation scss as shown in here. http://foundation.zurb.com/apps/docs/#!/action-sheet

The app I want to create needs to be responsive, and it will be used on a web browser on a computer.

The action sheet style that I want to customise is to remove the tail of the action sheet as well as adding custom elements within. However with my current implementation, the action sheet keeps appearing from the bottom (like it should in a small screen) instead of from the origin (as it should in a medium screen size or above). The tail is also still there despite me altering the variable $tail-size.

I am suspecting that I am implementing it wrongly in the html file and thus I ask for guidance.

Below is my current code which is not working.

my 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
  }
}

my 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>

Answer 1

For Ref: Foundation Doc

You can simply in your file foundation_and_overrides.scss (or similar name) created by Foundation you can change this var:

$actionsheet-tail-size: 10px;

to 0. This will change it globally; otherwise, just override that specific style for that specific class

.sign-in-box-container::before, 
.sign-in-box-container::after { border: 0; }

Probalby you will need further styles in order to place the box closer to the trigger if needed