Question

我是App和SASS基金会的新手。

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

我想要创建的应用程序需要响应，并且它将在计算机上的Web浏览器上使用。

我想要自定义的操作表样式是删除操作表的尾部以及在其中添加自定义元素。然而，根据我当前的实现，操作表不断从底部出现（就像它应该在小屏幕中）而不是从原点出现（因为它应该在中等屏幕尺寸或以上）。尽管我改变了变量$ 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_and_overrides.scss（或类似名称）中创建，您可以更改此var：

$actionsheet-tail-size: 10px;

为0.这将全局改变它;否则，只需覆盖该特定类的特定样式

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

Probalby你需要更多的款式，以便在必要时将盒子放置在触发器附近

基金会自定义行动表

1 个答案: