Permalink
Browse files

feat(progressbar):basic progressbar styling

  • Loading branch information...
katrin-freihofner committed Jul 25, 2017
1 parent 2079dde commit 097c7925a9c091f9e2730f9de0e1f474178dcc7b
View
@@ -12,6 +12,16 @@ $includeLabel: false !default;
padding-bottom: 6px;
}
.label--progressbar {
float: right;
margin-bottom: -10px;
font-size: 14px;
font-weight: 600;
text-align: right;
line-height: 1rem;
color: $gray-900;
}
$includeLabel: true;
}
View
@@ -36,6 +36,7 @@
@import "definition-list/definition-list";
@import "loading/loading";
@import "caption/caption";
@import "progressbar/progressbar";
/** Trumps **/
@import "trumps/hide-mq";
View
@@ -0,0 +1,36 @@
---
layout: components_icons.hbs
meta:
title: "Progress bar"
description: "A progress bar component for Dynatrace styled web entities with css and markup examples."
keywords: "Progress, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **progress bar** component visually enhances the standard html `<progress>` element. It is typically accompanied by a text - indicating the progress in numbers.
## Including the progress bar component
1. To include a progress bar component into your project, first create the `<progress>` element and set `value` and `max` attribues:
```html
<progress value="50" max="100"></progress>
```
2. To add the visual enhancements of Groundhog, add the necessary class to the elements class attribute:
```html
<progress class="progressbar" value="50" max="100"></progress>
```
3. To additionally show the text - indicating the progress - add a `<span>` element and set `label--progressbar` to the elements class attribute, like shown in the examples:
```html
<span class="label--progressbar">50/100 days</span>
<progress class="progressbar" value="50" max="100"></progress>
```
## Available themes for the groundhog progress bar
The default theme for the progress bar is `turquoise`, other available themes are:
| class name | theme color |
|------------|--------|
| `.theme--blue` | Base class blue theme |
| `.theme--purple` | Base class purple theme |
| `.theme--green` | Base class green theme |
| `.theme--royalblue` | Base class royalblue theme |
@@ -0,0 +1,70 @@
@import "../common/variables";
@import "../common/label";
.progressbar {
position: relative;
background-image: none;
border: none;
outline: none;
width: 100%;
height: 4px;
border: none;
background-color: $turquoise-200;
color: $turquoise-400;
}
.progressbar::-ms-fill {
border: none;
}
.progressbar[value]::-webkit-progress-bar {
background-color: $turquoise-200;
}
.progressbar[value]::-webkit-progress-value {
background-color: $turquoise-400;
}
.progressbar[value]::-moz-progress-bar {
background-color: $turquoise-400;
}
@mixin progressbar-theme($value-color, $bar-color) {
.progressbar {
background-color: $bar-color;
color: $value-color;
}
.progressbar[value]::-webkit-progress-bar {
background-color: $bar-color;
}
.progressbar[value]::-webkit-progress-value {
background-color: $value-color;
}
.progressbar[value]::-moz-progress-bar {
background-color: $value-color;
}
}
.theme--blue {
@include progressbar-theme($blue-400, $blue-200);
}
.theme--purple {
@include progressbar-theme($purple-400, $purple-200);
}
.theme--royalblue {
@include progressbar-theme($royalblue-400, $royalblue-200);
}
.theme--green {
@include progressbar-theme($green-400, $green-200);
}
@@ -0,0 +1 @@
<progress class="progressbar" value="50" max="100"></progress>
@@ -0,0 +1,4 @@
<div class="theme--royalblue">
<label class="label--progressbar" for="p0">50/100</label>
<progress class="progressbar" value="50" max="100" id="p0"></progress>
</div>
@@ -0,0 +1,4 @@
<div class="theme--purple">
<label class="label--progressbar" for="p1">50/100 days</label>
<progress class="progressbar" value="50" max="100" if="p1"></progress>
</div>

0 comments on commit 097c792

Please sign in to comment.