Foundation - Callout SASS 参考
变量
您可以使用表中列出的以下 SASS 变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$callout-background 它定义默认背景颜色。 |
颜色 | $white |
| 2 |
$callout-background-fade 它指定标注背景的淡入淡出值。 |
数字 | 85% |
| 3 |
$callout-border 显示标注的边框样式。 |
List | 1px solid rgba($black, 0.25) |
| 4 |
$callout-margin 显示标注底部边距。 |
Number | 0 0 1rem 0 |
| 5 |
$callout-padding 提供标注内部填充。 |
Number | 1rem |
| 6 |
$callout-font-color 它定义标注的字体颜色。 |
颜色 | $body-font-color |
| 7 |
$callout-font-color-alt 如果标注的背景较暗，则它定义标注的字体颜色。 |
颜色 | $body-background |
| 8 |
$callout-radius 它定义标注的边框半径。 |
颜色 | $global-radius |
| 9 |
$callout-link-tint 它为彩色面板提供色调链接，可以通过将其设置为 false 来禁用。 |
数字或布尔值 | 30% |
混合
您可以使用mixins 为您的组件构建 CSS 类结构，如下所述。
callout-base
它将诸如 padding、margin 之类的样式添加到 callout，并且可以使用以下 mixin − 包含样式
@include callout-base
callout-style
它通过使用单一颜色作为 callout 的基线来指定快速样式，您可以使用以下 mixin − 包含样式
@include callout-style($color);
它可以按照下表中的定义指定 −
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$color 它设置了callout的背景颜色。 |
颜色 | $callout-background |
callout
它指定callout的样式，它可以使用以下mixin − 包含样式
@include callout($color);
可按照下表所示确定 −
| Sr.No. | 参数与说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$color 设置标注的背景颜色。 |
Color | $callout-background |
foundation_containers.html
