Foundation - Media SASS 参考

描述

您可以使用 SASS 参考更改组件的样式。

下表列出了项目设置文件中的 SASS 变量，这些变量使该组件的默认样式得到自定义。

序号	名称及描述	类型	默认值
1	$orbit-bullet-background 它表示轨道子弹的默认颜色。	颜色	$medium-gray
2	$orbit-bullet-background-active 它表示轨道子弹的默认激活颜色。	颜色	$dark-gray
3	$orbit-bullet-diameter 它表示轨道子弹的默认直径。	数值	1.2rem
4	$orbit-bullet-margin 它表示轨道子弹之间的默认边距。	数值	0.1rem
5	$orbit-bullet-margin-top 它表示轨道子弹距幻灯片区域的默认距离。	数值	0.8rem
6	$orbit-bullet-margin-bottom 它表示子弹到其下方内容的默认底部边距。	数值	0.8rem
7	$orbit-caption-background 它表示轨道标题的默认背景颜色。	颜色	rgba($black, 0.5)
8	$orbit-caption-padding 它表示轨道标题的默认填充。	数值	1rem
9	$orbit-control-background-hover 它表示控件悬停时的默认背景颜色。	颜色	rgba($black, 0.5)
10	$orbit-control-padding 它表示轨道控件的默认填充。	数值	1rem
11	$orbit-control-zindex 它表示轨道控件的默认 z-index。	数值	10

要构建此组件的最终 CSS 输出，可以使用以下混合宏。要使用 Foundation 组件构建您自己的类结构，您可以自己使用这些混合宏。

@include orbit-wrapper;

它向轨道的包装器添加样式。

@include orbit-container;

它向内部轨道幻灯片容器添加样式。它用于类 .orbit-container。

@include orbit-slide;

它向滑块的单独幻灯片添加样式。它用于类 .orbit-slide。

@include orbit-caption;

它向幻灯片标题添加样式。

@include orbit-control;

它向下一个和上一个按钮添加基本样式。样式在默认 CSS 中的 .orbit-next 和 .orbit-previous 类之间划分。

@include orbit-previous;

它向上一个按钮添加样式。这些用于类 .orbit-previous。

@include orbit-next;

它向下一个按钮添加样式。这些用于类 .orbit-next。

@include orbit-bullets;

它向轨道子弹的容器添加样式，并向上一个按钮添加样式，并用于 .orbit-bullets 类。

foundation_media.htm

打印页面