CSS class to mark an enumeration of steps.

Identifier
projectdoc-steps
Component
Section
Since
1.15.0

There enclosing div element rendered by the Steps Macro has this class.

The individual steps have the additional classes step and step-level-XXX where XXX is the level of the step (for instance step-level-1 for level 1 step). Per default CSS steps of all levels are rendered with the same formatting properties.

Example of Usage

Samle CSS
body div.projectdoc-steps {
    counter-reset: step1 step2;
}

projectdoc-has-id-or-tags projectdoc-steps step step-level-1

div.projectdoc-steps div.step-level-1, div.projectdoc-steps div.step-level-1:first-child {
    counter-reset: step2 step3 step4 step5 step6;
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-1:before {
    counter-increment: step1;
    content: counter(step1) " ";
}

div.projectdoc-steps div.step-level-2 {
    counter-reset: step3 step4 step5 step6;
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-2:before {
    counter-increment: step2;
    content: counter(step1) "." counter(step2) " ";
}

div.projectdoc-steps div.step-level-3 {
    counter-reset: step4 step5 step6;
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-3:before {
    counter-increment: step3;
    content: counter(step1) "." counter(step2) "." counter(step3) " ";
}

div.projectdoc-steps div.step-level-4 {
    counter-reset: step5 step6;
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-4:before {
    counter-increment: step4;
    content: counter(step1) "." counter(step2) "." counter(step3) "." counter(step4) " ";
}

div.projectdoc-steps div.step-level-5 {
    counter-reset: step6;
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-5:before {
    counter-increment: step5;
    content: counter(step1) "." counter(step2) "." counter(step3) "." counter(step4) "." counter(step5)
        " ";
}

div.projectdoc-steps div.step-level-6 {
	  color: black;
    font-size: 14px;
    font-weight: bold;
}

div.projectdoc-steps div.step-level-6:before {
    counter-increment: step6;
    content: counter(step1) "." counter(step2) "." counter(step3) "." counter(step4) "." counter(step5) "."
        counter(step6) " ";
}


div.projectdoc-steps div.step {
		margin: 10px 0 -7px 0;
}

div.projectdoc-steps div.step p,
div.projectdoc-steps div.step ul,
div.projectdoc-steps div.step ol,
div.projectdoc-steps div.step dl,
div.projectdoc-steps div.step blockquote,
div.projectdoc-steps div.step pre,
div.projectdoc-steps div.step form.aui,
div.projectdoc-steps div.step table.aui,
div.projectdoc-steps div.step .aui-tabs,
div.projectdoc-steps div.step .aui-panel,
div.projectdoc-steps div.step .aui-group {
	margin: 5px 0 0 0;
}

Resources

Steps Macro
Present a step-by-step guide. Use the Section Macro to define each step with a section inside the steps macro.