Foundation - Media SASS Reference

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in a project's settings file that makes this component's default styles to get customized.

Sr.No.	Name & Description	Type	Default Value
1	$orbit-bullet-background It represents the default color for bullets of the orbit.	Color	$medium-gray
2	$orbit-bullet-background-active It represents the default active color for bullets of the orbit.	Color	$dark-gray
3	$orbit-bullet-diameter It represents the default diameter for bullets of the orbit.	Number	1.2rem
4	$orbit-bullet-margin It represents the default margin between bullets of the orbit.	Number	0.1rem
5	$orbit-bullet-margin-top It represents the default distance from slide region for bullets of the orbit.	Number	0.8rem
6	$orbit-bullet-margin-bottom It represents the default bottom margin from bullets to the content below it.	Number	0.8rem
7	$orbit-caption-background It represents the default background color for caption of the orbit.	Color	rgba($black, 0.5)
8	$orbit-caption-padding It represents the default padding for caption of the orbit.	Number	1rem
9	$orbit-control-background-hover It represents the default background color for controls when hovered.	Color	rgba($black, 0.5)
10	$orbit-control-padding It represents the default padding for controls of the orbit.	Number	1rem
11	$orbit-control-zindex It represents the default z-index for controls of the orbit.	Number	10

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

orbit-wrapper

@include orbit-wrapper;

It adds styles to the wrapper of the orbit.

orbit-container

@include orbit-container;

It adds styles to the internal orbit slide container. It is used on class .orbit-container.

orbit-slide

@include orbit-slide;

It adds styles to the separate slides of a slider. It is used on class .orbit-slide.

orbit-caption

@include orbit-caption;

It adds styles to the slide caption.

orbit-control

@include orbit-control;

It adds base styles to the next and previous buttons. Styles are divided between the .orbit-next and .orbit-previous classes in default CSS.

orbit-previous

@include orbit-previous;

It adds styles to the previous button. These are used on class .orbit-previous.

orbit-next

@include orbit-next;

It adds styles to the next button. These are used on class .orbit-next.

orbit-bullets

@include orbit-bullets;

It adds styles to a container of bullets of the orbit and add styles to the previous button and are used on .orbit-bullets class.

foundation_media.htm