Zurb Foundation 在禁用时覆盖我的自定义取消按钮的背景

Question

我为取消按钮添加了一个名为取消的新 class。

来自 _settings.scss

$cancel-button-bg-color: $charcoal;
$cancel-button-bg-hover: lighten($cancel-button-bg-color, 20%);

来自 _buttons.scss

.cancel {
  background: $cancel-button-bg-color;
  &:hover {
    background: $cancel-button-bg-hover;
  }
}

我为取消按钮指定的颜色是#555555 或$charcoal。取消按钮的背景颜色正确显示。悬停背景颜色也显示正常。

问题来了。当我将 "disabled" class 添加到取消按钮时，应用的背景颜色是不透明的 $primary-color。我仍然想要 $charcoal 的背景颜色，但稍微亮一点，比如不透明度为 50%。

我看到的另一个问题是，当我单击“取消”按钮时，按钮的背景变为 $primary-color。

我不确定我的做法是否正确。我尝试使用 $secondary-color 但想知道为什么它没有更改我的按钮的背景并分配了辅助 class。

Answer 1

因为CSSSpecificity。 Foundation 的 "disabled" 样式是 button[disabled]，它是一个属性和一个元素选择器。它胜过 .cancel 这只是一个 class 选择器。

尝试

.cancel, .cancel[disabled] {
  background: $cancel-button-bg-color;
  &:hover {
    background: $cancel-button-bg-hover;
  }
}

Zurb Foundation is overriding my custom cancel button's background when disabled