mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-07 14:46:38 +02:00
Code Issues Releases Wiki Activity

fix: Circular navigation

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-22 10:08:49 +07:00
parent 60ae347479
commit 727f07fe4a
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
contents/_includes/covers/circular-navigation.njk
View File

@@ -1,7 +1,9 @@
<div class="circular-navigation"> <div class="circular-navigation-container">
{% for i in range(0, 6) -%} <div class="circular-navigation">
<div class="circular-navigation__circle circular-navigation__circle--{{ i + 1 }}"> {% for i in range(0, 6) -%}
<div class="circular-navigation__content">{{ i + 1 }}</div> <div class="circular-navigation__circle circular-navigation__circle--{{ i + 1 }}">
<div class="circular-navigation__content">{{ i + 1 }}</div>
</div>
{%- endfor %}
</div> </div>
{%- endfor %}
</div> </div>

10
styles/patterns/_circular-navigation.scss
View File

@@ -1,6 +1,4 @@
.circular-navigation { .circular-navigation-container {
position: relative;
/* Demo */ /* Demo */
align-items: center; align-items: center;
display: flex; display: flex;
@@ -10,6 +8,12 @@
width: 8rem; width: 8rem;
} }
.circular-navigation {
position: relative;
height: 2rem;
width: 2rem;
}
.circular-navigation__circle { .circular-navigation__circle {
/* Position */ /* Position */
position: absolute; position: absolute;