Permalink
Browse files

feat(unordered list): initial commit for unordered list component

  • Loading branch information...
lara-aigmueller committed Sep 15, 2016
1 parent 5da861a commit 00ddd5dd61f73c6600ba99918582fb963dad5891
View
@@ -24,6 +24,7 @@
@import "radiobutton/radiobutton";
@import "inputfield/inputfield";
@import "textarea/textarea";
@import "unordered-list/unordered-list";
/** Trumps **/
@@ -0,0 +1,81 @@
---
layout: components_icons.hbs
meta:
title: "Unordered list"
description: "An unordered list component for Dynatrace styled web entities with css and markup examples."
keywords: "list, unordered, structure, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **unordered list** visually enhances the default `<ul>` list styling and nested versions. Keep in mind that the Groundhog unordered list component does not apply to default `<ul>` elements. The `.ul` class has to be specifically set on the root `<ul>` element.
## Including the unordered list component
1. To include a Groundhog unordered list add a `.ul` class to the `<ul>` tag. That's it.
```html
<ul class="ul">
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
</ul>
```
2. Add a wrapping `<div>` with a [theme class][themeClass] to set the theme (optional):
```html
<div class="theme--blue">
<ul class="ul">
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
</ul>
</div>
```
## Nested unordered lists
It is possible to nest unordered lists.
```html
<ul class="ul">
<li>first list item</li>
<li>
second list item
<ul>
<li>first nested list item</li>
</ul>
</li>
</ul>
```
## Available themes for unordered lists
The default theme for the unordered list 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 |
[themeClass]: #available-themes-for-unordered-lists
## Additional notes
To reset list styles use the following snippet:
```css
ul {
list-style: none;
padding-left: 0;
}
ul li:before {
position: absolute;
content: none;
margin: 0;
padding: 0;
display: none;
width: auto;
height: auto;
float: none;
}
```
@@ -0,0 +1,12 @@
<ul class="ul">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>
Big data analytics
<ul>
<li>Business dashboards</li>
<li>User behavior analytics</li>
</ul>
</li>
<li>Open ecosystem</li>
</ul>
@@ -0,0 +1,8 @@
<div class="theme--blue">
<ul class="ul">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
<li>Open ecosystem</li>
</ul>
</div>
@@ -0,0 +1,8 @@
<div class="theme--purple">
<ul class="ul">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
<li>Open ecosystem</li>
</ul>
</div>
@@ -0,0 +1,8 @@
<div class="theme--royalblue">
<ul class="ul">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
<li>Open ecosystem</li>
</ul>
</div>
@@ -0,0 +1,8 @@
<div class="theme--green">
<ul class="ul">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
<li>Open ecosystem</li>
</ul>
</div>
@@ -0,0 +1,90 @@
@import "../common/variables";
$unordered-list-theme-color: $turquoise-500;
.ul {
list-style: none;
padding-left: 0.25rem;
li {
position: relative;
}
li + li {
margin-top: 1.25rem;
}
li:before {
content: " ";
display: inline-block;
background-color: $unordered-list-theme-color;
width: 0.5rem;
height: 0.5rem;
position: relative;
margin-left: -1.25rem;
margin-right: 0.5rem;
margin-top: 0.4em;
vertical-align: top;
float: left;
}
}
.ul ul {
list-style: none;
li {
margin-top: 0.75rem;
}
li:before {
height: 2px;
margin-top: 0.65em;
}
}
.ul ul ul {
list-style: none;
li {
margin-top: 0;
}
li:before {
height: 1px;
margin-top: 0.65em;
}
}
@mixin unorderdlisttheme($color) {
li:before {
background-color: $color;
}
}
.theme--blue {
@include unorderdlisttheme($blue-600);
}
.theme--turquoise {
@include unorderdlisttheme($turquoise-500);
}
.theme--purple {
@include unorderdlisttheme($purple-600);
}
.theme--royalblue {
@include unorderdlisttheme($royalblue-500);
}
.theme--green {
@include unorderdlisttheme($green-500);
}

0 comments on commit 00ddd5d

Please sign in to comment.