- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- 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 - Tabs 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 |
$tab-margin It sets the margin for the tab bar. |
Number | 0 |
2 |
$tab-background It displays the background color of a tab bar. |
Color | $white |
3 |
$tab-background-active It displays the active background color of a tab bar. |
Color | $light-gray |
4 |
$tab-border It specifies the border color for a tab. |
Color | $light-gray |
5 |
$tab-item-color It displays the text color for menu items. |
Color | foreground($tab-background, $primary-color) |
6 |
$tab-item-background-hover It displays the background color for items on hover. |
$white | |
7 |
$tab-item-padding It defines the padding of a tab item. |
Number | 1.25rem 1.5rem |
8 |
$tab-expand-max It includes maximum number of expand-n classes in the CSS. |
Number | 6 |
9 |
$tab-content-background It displays the background color of the tab content. |
Color | $white |
10 |
$tab-content-border It displays the border color of the tab content. |
Color | $light-gray |
11 |
$tab-content-color It provides the text color of the tab content. |
Color | foreground($tab-background, $primary-color) |
12 |
$tab-content-padding It defines the padding for the tab content. |
Number or List | 1rem |
Mixins
You can use the mixins to build the CSS class structure for your reveal modal components.
tabs-container
You can include styles for a tab container using the following mixin −
@include tabs-container;
tabs-container-vertical
It displays the tabs in vertical manner by using the following mixin −
@include tabs-container-vertical;
tabs-title
It applies the styles for the tab links by using the following mixin −
@include tabs-title;
tabs-content
It applies the styles for tab content panes by using the following mixin −
@include tabs-content;
tabs-content-vertical
It specifies the tab, content must display, in a vertical manner by using the following mixin −
@include tabs-content-vertical;
tabs-panel
You can include styles for a tab content panel by using the following mixin −
@include tabs-panel;