Permalink
Browse files

feat: nested ul and ol styling

  • Loading branch information...
katrin-freihofner committed Jun 13, 2017
1 parent 8ab540e commit af01b9705342d6cbe9f6742b7c263e277052b800
@@ -70,15 +70,77 @@ type: test-page
<div class="island">
<h2>Lists</h2>
<ul class="list">
<li>Ut enim ad minim veniam,
<ul>
<li>Second level list item</li>
<li>Second level list item</li>
</ul>
</li>
<li>Ut enim ad minim veniam,</li>
<ul>
<li>Second level list item</li>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<li>This is an ordered list item</li>
</ol>
<li>Second level list item</li>
<ul>
<li>Third level</li>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
</ol>
</ul>
</ul>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat.</li>
<ol>
<li>This is an ordered list item</li>
<li>This is an ordered list item</li>
<ul>
<li>Second level list item</li>
<li>Second level list item</li>
</ul>
<li>This is an ordered list item</li>
</ol>
</ul>
<h3>Second list test</h3>
<ol class="list">
<li>Ut enim ad minim veniam,</li>
<ol>
<li>Second level list item</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
<li>Second level list item</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
</ul>
</ul>
</ol>
<li>quis nostrud exercitation ullamco laboris</li>
<li>nisi ut aliquip ex ea commodo consequat.</li>
<ul>
<li>This is an unordered list item</li>
<li>This is an unordered list item</li>
<ol>
<li>Second level list item</li>
<li>Second level list item</li>
</ol>
<li>This is an unordered list item</li>
</ul>
</ol>
</div>
<div class="island">
<h2>Text</h2>
@@ -100,7 +162,10 @@ type: test-page
<button class="tab">Tab 4</button>
</div>
<h3>Text</h3>
<p>Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</p>
<ol>
<li class="list"><p>Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</p></li>
<li class="list"><div class="list">Lorem ipsum dolor sit amet, <a href="http://www.dynatrace.com">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="http://www.dynatrace.com">commodo consequat</a>.</div></li>
</ol>
</div>
<div class="island">
<h2>Entity name</h2>
@@ -0,0 +1,12 @@
<ol class="list">
<li>Unified performance management</li>
<li>Smarter monitoring at scale</li>
<li>
Big data analytics
<ol>
<li>Business dashboards</li>
<li>User behavior analytics</li>
</ol>
</li>
<li>Open ecosystem</li>
</ol>
@@ -0,0 +1,5 @@
<div class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</div>
<div class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</div>
@@ -2,16 +2,25 @@
$unordered-list-theme-color: $turquoise-500;
.list {
list-style: none;
padding-left: 0.25rem;
li {
position: relative;
margin-top: 0.75rem;
}
li + li {
margin-top: 1.25rem;
}
}
ul.list,
ul.list ul,
ul.list ol ul,
ol.list ul,
ol.list ol ul {
list-style: none;
li:before {
content: " ";
@@ -29,33 +38,45 @@ $unordered-list-theme-color: $turquoise-500;
}
.list ul {
list-style: none;
ol.list,
ul.list ol,
ol.list ul ol,
ul.list ol,
ul.list ul ol {
li {
margin-top: 0.75rem;
li:before {
content: none;
}
}
ul.list ul,
ol.list ol ul ul {
li:before {
height: 2px;
margin-top: 0.65em;
}
}
.list ul ul {
list-style: none;
li {
margin-top: 0;
}
li:before {
height: 1px;
margin-top: 0.65em;
}
}
.list ul ul,
.list ol ol,
.list ul ol,
.list ol ul {
li {
margin-top: 0;
}
}
.list ol {
li:before {
@@ -95,3 +116,19 @@ $unordered-list-theme-color: $turquoise-500;
@include unorderdlisttheme($green-500);
}
.step {
position: relative;
padding-left: 1.5rem;
counter-increment: b;
}
.step:before {
counter: counter(b) ". ";
position: absolute;
text-align: right;
width: 4rem;
margin-left: -4.6rem;
line-height: inherit;
}

0 comments on commit af01b97

Please sign in to comment.