Permalink
Browse files

fix(unordered list): code improvements

  • Loading branch information...
lara-aigmueller committed Sep 15, 2016
1 parent 00ddd5d commit de936431cf988839d8499ce4fe04811ee00985dd
@@ -1,5 +1,5 @@
---
layout: components_icons.hbs
layout: components.hbs
meta:
title: "Unordered list"
description: "An unordered list component for Dynatrace styled web entities with css and markup examples."
@@ -8,13 +8,13 @@ layout: components_icons.hbs
## 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.
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 `.list` 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.
1. To include a Groundhog unordered list add a `.list` class to the `<ul>` tag. That's it.
```html
<ul class="ul">
<ul class="list">
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
@@ -23,7 +23,7 @@ The Groundhog **unordered list** visually enhances the default `<ul>` list styli
2. Add a wrapping `<div>` with a [theme class][themeClass] to set the theme (optional):
```html
<div class="theme--blue">
<ul class="ul">
<ul class="list">
<li>first list item</li>
<li>second list item</li>
<li>third list item</li>
@@ -35,7 +35,7 @@ The Groundhog **unordered list** visually enhances the default `<ul>` list styli
It is possible to nest unordered lists.
```html
<ul class="ul">
<ul class="list">
<li>first list item</li>
<li>
second list item
@@ -1,4 +1,4 @@
<ul class="ul">
<ul class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>
@@ -1,5 +1,5 @@
<div class="theme--blue">
<ul class="ul">
<ul class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
@@ -1,5 +1,5 @@
<div class="theme--purple">
<ul class="ul">
<ul class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
@@ -1,5 +1,5 @@
<div class="theme--royalblue">
<ul class="ul">
<ul class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
@@ -1,5 +1,5 @@
<div class="theme--green">
<ul class="ul">
<ul class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>Big data analytics</li>
@@ -1,7 +1,7 @@
@import "../common/variables";
$unordered-list-theme-color: $turquoise-500;
.ul {
.list {
list-style: none;
padding-left: 0.25rem;
@@ -29,7 +29,7 @@ $unordered-list-theme-color: $turquoise-500;
}
.ul ul {
.list ul {
list-style: none;
li {
@@ -43,7 +43,7 @@ $unordered-list-theme-color: $turquoise-500;
}
.ul ul ul {
.list ul ul {
list-style: none;
li {

0 comments on commit de93643

Please sign in to comment.