diff --git a/exampleSite/content/en/shortcodes/progress.md b/exampleSite/content/en/shortcodes/progress.md new file mode 100644 index 0000000..2a863e1 --- /dev/null +++ b/exampleSite/content/en/shortcodes/progress.md @@ -0,0 +1,29 @@ +--- +title: Progress +--- + +A progress bar shows how far a process has progressed. + +## Attributes + +| Name | Description | default | +| ---------------- | -------------------------------------------------------------------------- | --------- | +| value | progress value | 0 | +| icon (optional) | icon to use, need to be an icon from an [SVG sprite](/features/icon-sets/) | undefined | +| title (optional) | progress title | undefined | + +## Usage + + +```tpl +{{}} +``` + + +## Example + + + +{{< progress title=Eating value=65 icon=gdoc_heart >}} + + diff --git a/layouts/shortcodes/progress.html b/layouts/shortcodes/progress.html new file mode 100644 index 0000000..244f92e --- /dev/null +++ b/layouts/shortcodes/progress.html @@ -0,0 +1,23 @@ +{{- $value := default 0 (.Get "value") -}} +{{- $title := .Get "title" -}} +{{- $icon := .Get "icon" -}} + + +
+
+
+ {{ with $icon -}} + + {{- end }} + {{ with $title }}{{ . }}{{ end }} +
+
{{ $value }}%
+
+
+
+
+
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index 1167ab0..e13b314 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -238,3 +238,39 @@ font-size: $font-size-14; } } + +// {{% progress %}} +.gdoc-progress { + margin-bottom: $padding-16; + + &__label { + padding: $padding-4 0; + + &--name { + font-weight: bold; + } + } + + &__wrap { + background-color: var(--accent-color-lite); + border-radius: 1em; + box-shadow: inset 0 0 0 $border-1 var(--accent-color); + } + + &__bar { + height: 1em; + border-radius: 1em; + background-image: linear-gradient( + -45deg, + rgba(255, 255, 255, 0.125) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.125) 50%, + rgba(255, 255, 255, 0.125) 75%, + transparent 75%, + transparent + ); + background-size: 2.5em 2.5em; + background-color: $main-color !important; + } +}