mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-03 12:27:24 +02:00
Code Issues Releases Wiki Activity
Page: Collapse
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
Collapse
Angelos Chalaris edited this page 2016-09-08 10:52:15 +03:00
Table of Contents

Collapse components and accordions (multiple collapse components) can be created using the two mixins provided in the _collapse.scss partial file.

Making a collapse component

To make a collapse component, use the make-collapse mixin.

Definition

make-collapse(
	$collapse-name, 
	$collapse-border, 
	$collapse-border-radius, 
	$collapse-padding, 
	$collapse-margin-top,
	$collapse-color, 
	$collapse-bg-color)

Parameters

  • $collapse-name : The class name of the collapse component.
  • $collapse-border : The border style of the collapse contents.
  • $collapse-border-radius : The border radius of the collapse contents.
  • $collapse-padding : The padding of the collapse contents.
  • $collapse-margin-top : The margin above the collapse contents. [1]
  • $collapse-color : The collapse contents' text color.
  • $collapse-bg-color : The collapse contents' background color.

Notes:

  • [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually above the collapsed contents and the contents themselves.

Making an accordion component

To make an accordion component, use the make-accordion mixin.

Definition

make-accordion(	
	$accordion-name, 
	$accordion-border, 
	$accordion-border-radius, 
	$accordion-padding,
	$accordion-margin, 
	$accordion-color, 
	$accordion-bg-color, 
	$accordion-label-color,
	$accordion-label-bg-color, 
	$accordion-label-padding, 
	$accordion-hover-style, 
	$accordion-hover-style-percentage)

Parameters

  • $accordion-name : The class name of the accordion component.
  • $accordion-border : The border style of the accordion component.
  • $accordion-border-radius : The border radius of the accordion component. [1]
  • $accordion-padding : The padding of the accordion's contents.
  • $accordion-margin : The margin between accordion's parts. [2]
  • $accordion-color : The accordion contents' text color.
  • $accordion-bg-color : The accordion contents' background color.
  • $accordion-label-color : The accordion labels' text color.
  • $accordion-label-bg-color : The accordion labels' background color.
  • $accordion-label-padding : The padding of the accordion's labels.
  • $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3]
  • $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier.

Notes:

  • [1] : The value of $accordion-border-radius will be applied to labels along with their contents. Closed labels will have the border-radius applied to all of their corners, while open labels will change accordingly to combine their border with the shown contents.
  • [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order to space them out evenly. This does not apply to label and related content margins.
  • [3] : The values that $accordion-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

  • Simple collapse elements are meant to be styled using the button classes and styles. If you would rather use the styling used in accordions for single collapses, you can use a radio button with the accordion class in a radio button group with no other radio buttons.
  • The way collapse components are structured is different to that of the accordion componennts. This is in order to allow for multiple collapse label toggles in one line, while the contents can all be easily displayed below. (This can also be misused to place a collapse component's toggle far from the actual content.)

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.