@import '../libs/vars'; @import '../libs/functions'; @import '../libs/mixins';
/// /// Fractal by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///
/* List */
ol { list-style: decimal; margin: 0 0 _size(element-margin) 0; padding-left: 1.25em; li { padding-left: 0.25em; } } ul { list-style: disc; margin: 0 0 _size(element-margin) 0; padding-left: 1em; li { padding-left: 0.5em; } &.alt { list-style: none; padding-left: 0; li { border-top-style: solid; border-top-width: _size(border-width); padding: 0.5em 0; &:first-child { border-top: 0; padding-top: 0; } } } &.icons { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 1.5em 0 0; &:last-child { padding-right: 0 !important; } .icon { &:before { font-size: 1.75rem; } } } &.major { li { padding: 0 2.5em 0 0; .icon { &:before { font-size: 2.75rem; } } } // Small. @include breakpoint(small) { li { padding: 0 1.25em 0 0; .icon { &:before { font-size: 1.75rem; } } } } } &.labeled { li { margin: 1em 0; padding: 0 2em 0 0; .icon { &:before { vertical-align: middle; font-size: 2.25rem; margin-right: 0.5em; } .label { display: inline-block; vertical-align: middle; color: _palette(fg); } } } // Small. @include breakpoint(small) { // Portrait. @include orientation(portrait) { text-align: left; margin-right: auto; margin-left: auto; display: inline-block; white-space: nowrap; li { display: block; padding: 0; margin: 1.5em 0 0 0; .icon { &:before { width: 1.5em; display: block; float: left; margin-right: 0; } &:after { content: ''; display: block; clear: both; } } &:first-child { margin-top: 0; } } } } } } &.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); } } } // XSmall. @include breakpoint(xsmall) { // Portrait. @include orientation(portrait) { margin: 0 0 _size(element-margin) 0; li { padding: (_size(element-margin) * 0.5) 0 0 0; display: block; text-align: center; width: 100%; &:first-child { padding-top: 0; } > * { width: 100%; margin: 0 !important; &.icon { &:before { margin-left: -2em; } } } } &.small { li { padding: (_size(element-margin) * 0.25) 0 0 0; &:first-child { padding-top: 0; } } } } } } } 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;