List componentAvailable since EcoComposer 1.0
Simple elements list
- Overview
- Key Features
- User Authentication
- Role Management
Description: Enables administrators to assign roles and permissions to users.
- Data Export
- Additional Information
- Contact & Support
Clickable elements list
The default values are :
list--color : 'list--color',
list--foldable : false,
list--font-size : 2.4rem * theming.$font-size,
list--icon : '⎔',
list--foldable-icon : '▶', // ⊞
list--unfolded-icon : null, // ⊟
list--indent : 2rem * theming.$font-size,
list--indent--mobile : 2rem * theming.$font-size,
list--inner-icon : '⏣',
list--line-height : 3.2rem * theming.$font-size,
list--bullet--color : 'list--bullet--color',
list--bullet-hover--color : 'list--bullet-hover--color',
list--link--background-image : null, // 'list--link--background-image'
list--link--gradient-primary-color : 'list--link--gradient-primary-color',
list--link-hover--text-shadow : 'list--link-hover--text-shadow',
list--shift : 1rem * theming.$font-size,
list--shift--mobile : 2rem * theming.$font-size,
list--link--text-shadow : 'list--link--text-shadow',
print : false,
suffix : '',
themes : (
light : (
default--list--bullet--color : #000,
default--list--bullet-hover--color : #444,
default--list--color : #333,
default--list--link--gradient-primary-color : #000,
default--list--link--text-shadow : 0 0 3px #000,
default--list--link-hover--text-shadow : 0 0 3px #444
),
dark : (
default--list--bullet--color : #fff,
default--list--bullet-hover--color : #444,
default--list--color : #ccc,
default--list--link--gradient-primary-color : #fff,
default--list--link--text-shadow : 0 0 3px #000,
default--list--link-hover--text-shadow : 0 0 3px #444
)
)
We can implement it that way :
@include list.init();
@include list.create(
(
font-size : 2.4rem,
line-height : 3.2rem,
themes : $themes,
)
);
We can implement it that way :
<ul class="list suffix">
<li class="list-item suffix has-link">
<a href=#>First element</a>
</li>
<li class="list-item suffix foldable">List with a sub list
<ul class="list suffix">
<li class="list-item suffix has-link">
<a href=#>Sub element</a>
</li>
<li class="list-item suffix has-link">
<a href=#>Sub element</a>
</li>
<li class="list-item suffix has-link">
<a href=#>Sub element</a>
</li>
</ul>
</li>
<li class="list-item suffix has-link">
<a href=#>Second element</a>
</li>
<li class="list-item suffix has-link">
<a href=#>Third element</a>
</li>
</ul>