mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity
Page: Tabs
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
1
Tabs
Angelos Chalaris edited this page 2016-09-06 11:56:58 +03:00
Table of Contents

mini.css provides you with a tab system based entirely on CSS elements. You can customize your tab system very easily, using the make-tabs mixin provided in the _tab.scss partial file.

Definition

make-tabs(
	$tabs-name, 
	$tabs-min-height, 
	$tabs-label-spacing, 
	$tabs-label-height,
	$tabs-label-padding,  
	$tabs-label-color, 
	$tabs-label-bg-color,
	$tabs-active-label-color, 
	$tabs-active-label-bg-color,
	$tabs-border-color, 
	$tabs-label-border-radius, 
	$tabs-active-label-stripe,
	$tabs-inactive-label-hover-style, 
	$tabs-inactive-label-hover-style-percentage,
	$tabs-content-bg-color, 
	$tabs-content-padding)

Parameters

  • $tabs-name : The class name for the tab system's container.
  • $tabs-label-spacing : The spacing between tab labels.
  • $tabs-label-height : The height of the tab labels.
  • $tabs-label-padding : The padding of the tab labels.
  • $tabs-label-color : The text color of the tab labels.
  • $tabs-label-bg-color : The background color of the tab labels.
  • $tabs-active-label-color : The text color of the active tab's label.
  • $tabs-active-label-bg-color : The background color of the active tab's label.
  • $tabs-border-color : Border color for the tab system. [1]
  • $tabs-label-border-radius : Border radius for the tab labels.
  • $tabs-active-label-stripe : The style of the colored stripe that appears on the active tab's label. [2]
  • $tabs-inactive-label-hover-style : Hover/active/focus style of the tab labels. [3]
  • $tabs-inactive-label-hover-style-percentage : Hover/active/focus style of the tab labels percentage modifier.
  • $tabs-content-bg-color : The background color of the active tab's content.
  • $tabs-content-padding : The padding of the active tab's content.

Notes:

  • [1] : The color specified in $tabs-border-color applies to all borders in the tab system. This includes borders in the tab labels and active tab's content.
  • [2] : The style of the colored stripe is a border style so you should specify it as such.
  • [3] : The values that $tabs-hover-style can take are lighten and darken. The inside condition only checks if the value is lighten and acts accordingly. Invalid values are treated as darken.

Remarks

  • The text in the active tab's content pane is colored based on the body element's color. This can be manually changed.
  • Some design decisions are already made beforehand to make sure styling choices by the user appear correctly on most devices. This includes some margins, positioning etc. These properties can be manually changed by tweaking the mixin itself or the resulting CSS file.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.