JezK
Edit File: list.scss
@import "../scss/_variable"; @import "../scss/_mixin"; .gel-list { ul { counter-reset: item; .list-type { min-width: 30px; line-height: 1.4rem; color: inherit; } } .item-list { @include d-flex(); @include justify-content-start(); line-height: 1.4rem; margin: 0; &:before { counter-increment: item; min-width: 30px; line-height: 1.4rem; } } .content-list { padding-left: 0; margin-bottom: 0; a { color: inherit; &:hover { color: inherit; } } } .circle-type { li:before { font-family: var(--g5-font-icon); content: "\f111"; font-weight: 600; font-size: 8px; } } .square-type { li:before { content: counter(item, square); } } } .gel-list-style-01, .gel-list-style-02 { .item-list:not(:first-child) { padding-top: 3px; } .item-list:not(:last-child) { padding-bottom: 3px; } } .gel-list-style-01 { ul { .list-type { @include justify-content-start(); } } .roman-number-type { li:before { content: counter(item, upper-roman) ". "; } } .alpha-type { li:before { content: counter(item, lower-alpha) ". "; } } .number-type { li:before { content: counter(item, decimal-leading-zero) ". "; } } } .gel-list-style-02 { ul { li { @include flex-flow-row-reverse(); text-align: right; &:before { @include justify-content-end(); } } .list-type { @include justify-content-end(); } } .roman-number-type { li:before { content: " ." counter(item, upper-roman); } } .alpha-type { li:before { content: " ." counter(item, lower-alpha); } } .number-type { li:before { content: ". " counter(item, decimal-leading-zero); } } } .gel-list-style-03 { ul { li:before { display: none; } span { display: none; } @include d-flex(); li:not(:last-child) { padding-right: 20px; } li:not(:first-child) { padding-left: 20px; } } &.align-left ul { @include justify-content-start(); } &.align-right ul { @include justify-content-end(); } &.align-center ul { @include justify-content-center(); } }