Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add steps component

Browse Source 
chore: rename breadcrumb-delimiter to chevron-right
This commit is contained in:
Xin 2023-07-30 11:19:12 +01:00
parent 080e6cbb7f
commit 8ed4573422
7 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/css/cards.css → assets/css/components/cards.css
View File

11
assets/css/components/steps.css Normal file
View File

@ -0,0 +1,11 @@
.steps h3 {
counter-increment: step;
&:before {
@apply absolute w-[33px] h-[33px];
@apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
@apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
@apply mt-[3px] ml-[-41px];
content: counter(step);
}
}

3
assets/css/styles.css
View File

@ -3,7 +3,8 @@
@tailwind utilities;
@import "typography.css";
@import "cards.css";
@import "components/cards.css";
@import "components/steps.css";
html {
@apply text-base antialiased;

40
content/docs/components/steps.md Normal file
View File

@ -0,0 +1,40 @@
---
title: Steps
---
A built-in component to display a series of steps.
## Example
{{< steps >}}
### Step 1
This is the first step.
### Step 2
This is the second step.
### Step 3
This is the third step.
{{< /steps >}}
## Usage
Put Markdown h3 header within `steps` shortcode.
```markdown
{{</* steps */>}}
### Step 1
This is the first step.
### Step 2
This is the second step.
{{</* /steps */>}}
```

2
data/icons.yaml
View File

@ -33,6 +33,6 @@ theme-light: >
theme-dark: <svg fill="none" viewBox="2 2 20 20" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
breadcrumb-delimiter: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
chevron-right: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>

2
layouts/partials/breadcrumb.html
View File

@ -4,7 +4,7 @@
<div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
<a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
</div>
{{ partial "utils/icon.html" (dict "context" . "name" "breadcrumb-delimiter" "attributes" "class=\"w-3.5 shrink-0\"") }}
{{ partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
{{ end }}
{{ end }}
<div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">

3
layouts/shortcodes/steps.html Normal file
View File

@ -0,0 +1,3 @@
<div class="steps ml-4 mb-12 border-l border-gray-200 pl-6 dark:border-neutral-800 [counter-reset:step]">
{{ .Inner | markdownify }}
</div>