Foundation - Sass Reference
Variables
You can change the styles of the components by using the following SASS variables as listed in the table −
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$accordion-background It defines the default background color of an accordion group. |
Color | $white |
| 2 |
$accordion-plusminus You can add plus and minus icons to the side of each accordion title by setting it to true. |
Boolean | true |
| 3 | $accordion-item-color It displays the default text color for items in a menu. |
Color | foreground($accordion-background, $primary-color) |
| 4 |
$accordion-item-background-hover Default background color on hover for items in a Menu. |
Color | $light-gray |
| 5 |
$accordion-item-padding Default padding of an accordion item. |
Number or List | 1.25rem 1rem |
| 6 |
$accordion-content-background Provides background color of the tab content. |
Color | $white |
| 7 |
$accordion-content-border Provides border color of the tab content. |
Color | 1px solid $light-gray |
| 8 |
$accordion-content-color It specifies the text color of tab content. |
Color | foreground($accordion-background, $primary-color) |
| 9 |
$accordion-content-padding Displays the padding for tab content. |
Number or List | 1rem |
Mixins
You can use the mixins to build the CSS class structure for your components as listed in the table.
| Sr.No. | Name & Description | Format |
|---|---|---|
| 1 |
accordion-container It includes the styles for an accordion container. |
@include accordion-container |
| 2 |
accordion-title It defines the title for an accordion item. |
@include accordion-title |
| 3 |
accordion-content It provides styles for the accordion content. |
@include accordion-content |