/// /// Ethereal by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// // skel-baseline v3.0.1 | (c) n33 | skel.io | MIT licensed /* 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 _palette(border); padding: 0.5rem 0; &:first-child { border-top: 0; padding-top: 0; } } } &.icons { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 1rem 0 0; &:last-child { padding-right: 0; } .icon { &:before { font-size: 1.25em; } } } } &.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); } } } } &.contact-icons { list-style: none; padding-left: 0; > li { margin: 1.25rem 0 0 0; padding-left: 0; &:before { display: inline-block; width: 2.25rem; height: 2.25rem; line-height: 2.25rem; border-radius: 2.25rem; background-color: rgba(_palette(fg-bold), 1); color: _palette(bg); cursor: default; font-size: 1.125rem; margin-right: 1rem; text-align: center; vertical-align: middle; body.is-ie & { line-height: 2.125; } } a { border-bottom: 0; } } &.color1 { > li { &:before { color: _palette(accent1); } } } &.color2 { > li { &:before { color: _palette(accent2); } } } &.color3 { > li { &:before { color: _palette(accent3); } } } &.color4 { > li { &:before { color: _palette(accent4); } } } } &.grid-icons { @include vendor('display', 'flex'); @include vendor('flex-wrap', 'wrap'); @include vendor('justify-content', 'center'); list-style: none; margin: 0 0 _size(element-margin) 0; padding-left: 0; .icon { display: block; position: relative; width: 100%; text-align: center; &:before { display: block; width: 6rem; height: 6rem; line-height: 6rem; border-radius: 6rem; box-shadow: inset 0 0 0 2px _palette(border); font-size: 2.5rem; margin: 0 auto; text-align: center; body.is-ie & { line-height: 2.375; } } } > li { @include vendor('flex-grow', '0'); @include vendor('flex-shrink', '0'); position: relative; margin: 1.5rem 0 0 1.5rem; padding-left: 0; } &.connected { > li { &:before { content: ''; display: block; position: absolute; width: 1.5rem; height: 2px; top: 50%; left: -1.5rem; background-color: _palette(border); } &:after { content: ''; display: block; position: absolute; width: 2px; height: 1.5rem; top: -1.5rem; left: 50%; background-color: _palette(border); } } } &.two { width: 14rem; > li { &:nth-child(-n + 2) { margin-top: 0; &:after { display: none; } } &:nth-child(2n - 1) { margin-left: 0; &:before { display: none; } } } } &.three { width: 21.5rem; > li { &:nth-child(-n + 3) { margin-top: 0; &:after { display: none; } } &:nth-child(3n - 2) { margin-left: 0; &:before { display: none; } } } } &.four { width: 29rem; > li { &:nth-child(-n + 4) { margin-top: 0; &:after { display: none; } } &:nth-child(4n - 3) { margin-left: 0; &:before { display: none; } } } } } } 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); } } @include breakpoint(small) { ul { &.grid-icons { @include vendor('justify-content', 'flex-start'); width: 100% !important; margin: -1rem 0 _size(element-margin) -1rem; .icon { &:before { width: 4.5rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.75rem; } } > li { margin: 1rem 0 0 1rem !important; &:before { display: none !important; } &:after { display: none !important; } } } } }