mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.2 KiB
118 lines
3.2 KiB
// Name: Accordion
|
|
// Description: Component to create accordions
|
|
//
|
|
// Component: `uk-accordion`
|
|
//
|
|
// Sub-objects: `uk-accordion-title`
|
|
// `uk-accordion-content`
|
|
//
|
|
// States: `uk-open`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$accordion-item-margin-top: $global-margin !default;
|
|
|
|
$accordion-title-font-size: $global-medium-font-size !default;
|
|
$accordion-title-line-height: 1.4 !default;
|
|
$accordion-title-color: $global-emphasis-color !default;
|
|
$accordion-title-hover-color: $global-color !default;
|
|
|
|
$accordion-content-margin-top: $global-margin !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Accordion
|
|
========================================================================== */
|
|
|
|
.uk-accordion {
|
|
padding: 0;
|
|
list-style: none;
|
|
@if(mixin-exists(hook-accordion)) {@include hook-accordion();}
|
|
}
|
|
|
|
|
|
/* Item
|
|
========================================================================== */
|
|
|
|
.uk-accordion > :nth-child(n+2) {
|
|
margin-top: $accordion-item-margin-top;
|
|
@if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
|
|
}
|
|
|
|
|
|
/* Title
|
|
========================================================================== */
|
|
|
|
.uk-accordion-title {
|
|
display: block;
|
|
font-size: $accordion-title-font-size;
|
|
line-height: $accordion-title-line-height;
|
|
color: $accordion-title-color;
|
|
@if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
|
|
}
|
|
|
|
/* Hover + Focus */
|
|
.uk-accordion-title:hover,
|
|
.uk-accordion-title:focus {
|
|
color: $accordion-title-hover-color;
|
|
text-decoration: none;
|
|
outline: none;
|
|
@if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
|
|
}
|
|
|
|
|
|
/* Content
|
|
========================================================================== */
|
|
|
|
.uk-accordion-content {
|
|
margin-top: $accordion-content-margin-top;
|
|
@if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
|
|
}
|
|
|
|
/*
|
|
* Micro clearfix
|
|
*/
|
|
|
|
.uk-accordion-content::before,
|
|
.uk-accordion-content::after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
|
|
.uk-accordion-content::after { clear: both; }
|
|
|
|
/*
|
|
* Remove margin from the last-child
|
|
*/
|
|
|
|
.uk-accordion-content > :last-child { margin-bottom: 0; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
|
|
|
|
// @mixin hook-accordion(){}
|
|
// @mixin hook-accordion-item(){}
|
|
// @mixin hook-accordion-title(){}
|
|
// @mixin hook-accordion-title-hover(){}
|
|
// @mixin hook-accordion-content(){}
|
|
// @mixin hook-accordion-misc(){}
|
|
|
|
|
|
// Inverse
|
|
// ========================================================================
|
|
|
|
$inverse-accordion-title-color: $inverse-global-emphasis-color !default;
|
|
$inverse-accordion-title-hover-color: $inverse-global-inverse-color !default;
|
|
|
|
|
|
|
|
// @mixin hook-inverse-accordion-item(){}
|
|
// @mixin hook-inverse-accordion-title(){}
|
|
// @mixin hook-inverse-accordion-title-hover(){}
|