基础自定义操作表

Question

我是 Foundation for App 和 SASS 的新手。

我正在尝试创建一个自定义操作表，它使用 sass mixin 来自定义样式而不影响基础 scss，如下所示。 http://foundation.zurb.com/apps/docs/#!/action-sheet

我要创建的应用程序需要具有响应性，并且可以在计算机的网络浏览器上使用。

我要自定义的操作表样式是删除操作表的尾部以及在其中添加自定义元素。但是，在我当前的实现中，操作表一直从底部出现（就像它应该在小屏幕中一样）而不是从原点出现（因为它应该在中等屏幕尺寸或更大尺寸中）。尽管我更改了变量 $tail-size，但尾巴仍然存在。

我怀疑我在 html 文件中错误地实现了它，因此我请求指导。

以下是我当前不起作用的代码。

我的 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>

Answer 1

参考：Foundation Doc

您可以简单地在 Foundation 创建的文件foundation_and_overrides.scss（或类似名称）中更改此变量：

$actionsheet-tail-size: 10px;

为 0。这将全局更改；否则，只需覆盖该特定类的特定样式

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

如果需要，您可能需要更多样式才能将框放置在更靠近触发器的位置