mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-25 03:36:51 +02:00
Code Issues Releases Wiki Activity

feat: Add avatar list

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 11:30:21 +07:00
parent 0fca0b705a
commit 4401de7f7b
17 changed files with 114 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
contents/_includes/patterns/accordion.njk Normal file
View File

@@ -0,0 +1,25 @@
<div class="accordion">
<div class="accordion__item accordion__item--collapsed">
<div class="accordion__header">
<div class="accordion__toggle">
{% triangle "r" %}
</div>
<div class="accordion__title">
{% rectangle %}
</div>
</div>
</div>
<div class="accordion__item accordion__item--expanded">
<div class="accordion__header">
<div class="accordion__toggle">
{% triangle "b" %}
</div>
<div class="accordion__title">
{% rectangle %}
</div>
</div>
<div class="accordion__content">
{% lines "hor", 5 %}
</div>
</div>
</div>

14
contents/_includes/patterns/arrow-buttons.njk Normal file
View File

@@ -0,0 +1,14 @@
<div class="arrow-buttons">
<div class="arrow-buttons__corner arrow-buttons__corner--t">
<div class="arrow-button arrow-button--t"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--r">
<div class="arrow-button arrow-button--r"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--b">
<div class="arrow-button arrow-button--b"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--l">
<div class="arrow-button arrow-button--l"></div>
</div>
</div>

11
contents/_includes/patterns/avatar-list.njk Normal file
View File

@@ -0,0 +1,11 @@
<div class="avatars">
<div class="avatars__item">
<div class="avatars__image">A</div>
</div>
<div class="avatars__item">
<div class="avatars__image">B</div>
</div>
<div class="avatars__item">
<div class="avatars__image">C</div>
</div>
</div>

7
contents/_includes/patterns/avatar.njk Normal file
View File

@@ -0,0 +1,7 @@
<div class="avatar">
<div class="avatar__image">
<svg viewBox="0 0 24 24" fill="none" height="100%" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" width="100%">
<path d="M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z M5,20.5 c0-3.866,3.134-7,7-7s7,3.134,7,7H5z"></path>
</svg>
</div>
</div>