- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Sass Reference
Variables
You can change the styles of the components by using following SASS variables as listed in the table.
| S. No. | Name | Type | Default Value | Description |
|---|---|---|---|---|
| 1 | $accordion-background | Color | $white | It defines default background color of an accordion group. |
| 2 | $accordion-plusminus | Boolean | true | You can add plus and minus icons to the side of each accordion title by setting it to true. |
| 3 | $accordion-item-color | Color | foreground($accordion-background, $primary-color) | It displays the default text color for items in a menu. |
| 4 | $accordion-item-background-hover | Color | $light-gray | Default background color on hover for items in a Menu. |
| 5 | $accordion-item-padding | Number or List | 1.25rem 1rem | Default padding of an accordion item. |
| 6 | $accordion-content-background | Color | $white | Provides background color of the tab content. |
| 7 | $accordion-content-border | Color | 1px solid $light-gray | Provides border color of the tab content. |
| 8 | $accordion-content-color | Color | foreground($accordion-background, $primary-color) | It specifies the text color of tab content. |
| 9 | $accordion-content-padding | Number or List | 1rem | Displays the padding for tab content. |
Mixins
You can use the mixins to build the CSS class structure for your components as listed in the table.
| S. No. | Name | Format | Description |
|---|---|---|---|
| 1 | accordion-container | @include accordion-container | It includes the styles for an accordion container. |
| 2 | accordion-title | @include accordion-title | It defines title for an accordion item. |
| 3 | accordion-content | @include accordion-content | It provides styles for the accordion content. |
Advertisements