/// /// Hypothesis by Pixelarity /// pixelarity.com | hello@pixelarity.com /// License: pixelarity.com/license /// /* List */ ol { list-style: decimal; margin: 0 0 _size(element-margin) 0; padding-left: 1.25rem; li { padding-left: 0.25rem; } } ul { list-style: disc; margin: 0 0 _size(element-margin) 0; padding-left: 1rem; li { padding-left: 0.5rem; } &.alt { list-style: none; padding-left: 0; li { border-top: solid 1px; padding: 0.5rem 0; &:first-child { border-top: 0; padding-top: 0; } } } &.links { list-style: none; padding-left: 0; li { @include icon; margin-top: 1rem; position: relative; padding-left: 1rem; &:before { content: '\f105'; position: absolute; top: 0; left: 0; } &:first-child { margin-top: 0; } } } &.icons { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 1.25rem 0 0; &:last-child { padding-right: 0; } .icon { &:before { font-size: 1.5rem; } } } } &.actions { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 (_size(element-margin) * 0.5) 0 0; vertical-align: middle; &:last-child { padding-right: 0; } } &.small { li { padding: 0 (_size(element-margin) * 0.25) 0 0; } } &.vertical { li { display: block; padding: (_size(element-margin) * 0.5) 0 0 0; &:first-child { padding-top: 0; } > * { margin-bottom: 0; } } &.small { li { padding: (_size(element-margin) * 0.25) 0 0 0; &:first-child { padding-top: 0; } } } } &.fit { display: table; margin-left: (_size(element-margin) * -0.5); padding: 0; table-layout: fixed; width: calc(100% + #{(_size(element-margin) * 0.5)}); li { display: table-cell; padding: 0 0 0 (_size(element-margin) * 0.5); > * { margin-bottom: 0; } } &.small { margin-left: (_size(element-margin) * -0.25); width: calc(100% + #{(_size(element-margin) * 0.25)}); li { padding: 0 0 0 (_size(element-margin) * 0.25); } } } } } dl { margin: 0 0 _size(element-margin) 0; dt { display: block; font-weight: _font(weight-bold); margin: 0 0 (_size(element-margin) * 0.5) 0; } dd { margin-left: _size(element-margin); } } @mixin color-list($p: null) { ul { &.alt { li { border-top-color: _palette($p, border); } } } } @include color-list;