From 97dbc8c3772c89022a55d591c4ed90cee1d1feaa Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 08:24:51 -0500 Subject: redesign --- assets/sass/components/_list.scss | 380 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 assets/sass/components/_list.scss (limited to 'assets/sass/components/_list.scss') diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..7744695 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,380 @@ +/// +/// 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; + } + } + } + } + } \ No newline at end of file -- cgit v1.2.3