﻿/**
 * Legend Key Abstraction
 *
 * The Legend Key object is similar to the Navigation object, however it is meant for a legend and not links
 * 1. Micro clearfix (Grouped in Clearfix-styles), as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * 2. Assigns a delimiter on the fly through a data attribute
 *
 */

.o-legend-key { list-style: none; }

    /* .o-legend-key:after { display: table; clear: both; content: ''; } */ /* 1 */

    .o-legend-key > dt,
    .o-legend-key > dd { display: inline-block; }

    .o-legend-key > dd { margin-left: 0; }

.o-legend-key dt[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }
.o-legend-key dd[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }

/* ----- (extends legend-key orientation) ----- */
.o-legend-key--stacked > dt, .o-legend-key--stacked > dd { display: list-item; }
.o-legend-key--stacked > dd { margin-left: 1em; }
﻿/**
 * Legend Key Abstraction
 *
 * The Legend Key object is similar to the Navigation object, however it is meant for a legend and not links
 * 1. Micro clearfix (Grouped in Clearfix-styles), as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * 2. Assigns a delimiter on the fly through a data attribute
 *
 */

.o-legend-key { list-style: none; }

    /* .o-legend-key:after { display: table; clear: both; content: ''; } */ /* 1 */

    .o-legend-key > dt,
    .o-legend-key > dd { display: inline-block; }

    .o-legend-key > dd { margin-left: 0; }

.o-legend-key dt[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }
.o-legend-key dd[data-breadcrumb]:before { content: attr(data-breadcrumb) "\00A0" /* 2 */; }

/* ----- (extends legend-key orientation) ----- */
.o-legend-key--stacked > dt, .o-legend-key--stacked > dd { display: list-item; }
.o-legend-key--stacked > dd { margin-left: 1em; }

.o-legend-key--narrow dt[data-breadcrumb]:before { margin-left: -0.1rem; }
Add narrow modifer to o-legend
Add narrow modifer to o-legend
