UNPKG

3.29 kBSCSSView Raw
1// Name: Accordion
2// Description: Component to create accordions
3//
4// Component: `uk-accordion`
5//
6// Sub-objects: `uk-accordion-title`
7// `uk-accordion-content`
8//
9// States: `uk-open`
10//
11// ========================================================================
12
13
14// Variables
15// ========================================================================
16
17$accordion-item-margin-top: $global-margin !default;
18
19$accordion-title-font-size: $global-medium-font-size !default;
20$accordion-title-line-height: 1.4 !default;
21$accordion-title-color: $global-emphasis-color !default;
22$accordion-title-hover-color: $global-color !default;
23
24$accordion-content-margin-top: $global-margin !default;
25
26
27/* ========================================================================
28 Component: Accordion
29 ========================================================================== */
30
31.uk-accordion {
32 padding: 0;
33 list-style: none;
34 @if(mixin-exists(hook-accordion)) {@include hook-accordion();}
35}
36
37
38/* Item
39 ========================================================================== */
40
41.uk-accordion > :nth-child(n+2) {
42 margin-top: $accordion-item-margin-top;
43 @if(mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
44}
45
46
47/* Title
48 ========================================================================== */
49
50.uk-accordion-title {
51 display: block;
52 font-size: $accordion-title-font-size;
53 line-height: $accordion-title-line-height;
54 color: $accordion-title-color;
55 @if(mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
56}
57
58/* Hover + Focus */
59.uk-accordion-title:hover,
60.uk-accordion-title:focus {
61 color: $accordion-title-hover-color;
62 text-decoration: none;
63 outline: none;
64 @if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
65}
66
67
68/* Content
69 ========================================================================== */
70
71.uk-accordion-content {
72 margin-top: $accordion-content-margin-top;
73 @if(mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
74}
75
76/*
77 * Micro clearfix
78 */
79
80.uk-accordion-content::before,
81.uk-accordion-content::after {
82 content: "";
83 display: table;
84}
85
86.uk-accordion-content::after { clear: both; }
87
88/*
89 * Remove margin from the last-child
90 */
91
92 .uk-accordion-content > :last-child { margin-bottom: 0; }
93
94
95// Hooks
96// ========================================================================
97
98@if(mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
99
100// @mixin hook-accordion(){}
101// @mixin hook-accordion-item(){}
102// @mixin hook-accordion-title(){}
103// @mixin hook-accordion-title-hover(){}
104// @mixin hook-accordion-content(){}
105// @mixin hook-accordion-misc(){}
106
107
108// Inverse
109// ========================================================================
110
111$inverse-accordion-title-color: $inverse-global-emphasis-color !default;
112$inverse-accordion-title-hover-color: $inverse-global-color !default;
113
114
115
116// @mixin hook-inverse-accordion-item(){}
117// @mixin hook-inverse-accordion-title(){}
118// @mixin hook-inverse-accordion-title-hover(){}
\No newline at end of file