Permalink
Browse files

feat(lists): reset step counter, make steps nestable

  • Loading branch information...
lara-aigmueller committed Aug 30, 2017
1 parent 1ac8c73 commit 1c610a250f5b128feb928ea662e9c392f612e870
Showing with 53 additions and 5 deletions.
  1. +22 −0 src/common/_mixins.scss
  2. +11 −5 src/list/list.scss
  3. +20 −0 src/list/samples/07-steps-nested.html
View
@@ -36,3 +36,25 @@ $columngap: 24px;
}
}
}
@mixin stepLevel($level) {
$sel: ".step";
@for $i from 2 through $level {
#{$sel} :not(.step) {
counter-reset: step#{$i};
}
$sel: selector-nest($sel, ".step");
#{$sel} {
counter-increment: step#{$i};
}
#{$sel}:before {
content: counter(step#{$i}) ". ";
}
}
}
View
@@ -1,4 +1,5 @@
@import "../common/variables";
@import "../common/mixins";
$unordered-list-theme-color: $turquoise-500;
.list {
@@ -132,20 +133,25 @@ ol.list ol ul ul {
display: block;
position: relative;
padding-left: 1.5rem;
counter-increment: b;
counter-increment: step1;
margin-top: 0.75rem;
}
.step + .step {
margin-top: 1.25rem;
:not(.step) {
counter-reset: step1;
}
.step:before {
counter-increment: section;
content: counter(section) ". ";
content: counter(step1) ". ";
position: absolute;
text-align: right;
width: 4rem;
margin-left: -4.6rem;
line-height: inherit;
}
.step + .step {
margin-top: 1.25rem;
}
@include stepLevel(3);
@@ -0,0 +1,20 @@
<div class="step">Level one step</div>
<div class="step">Level one step</div>
<div class="step">Level one step</div>
<h3>A headline between level one steps</h3>
<div class="step">Level one step</div>
<div class="step">Level one step</div>
<div class="step">Level one step
<div class="step">Level two step</div>
<div class="step">Level two step</div>
</div>
<div class="step">
Level one step
<div class="step">
Level two step
<div class="step">Level three step</div>
<div class="step">Level three step</div>
</div>
<div>This is not a level two step.</div>
<div class="step">Level two step</div>
</div>

0 comments on commit 1c610a2

Please sign in to comment.