diff --git a/packages/ripple-ui-core/src/styles/utilities/_lists.css b/packages/ripple-ui-core/src/styles/utilities/_lists.css index 990cfa1c15..e9d27c8f74 100644 --- a/packages/ripple-ui-core/src/styles/utilities/_lists.css +++ b/packages/ripple-ui-core/src/styles/utilities/_lists.css @@ -18,6 +18,22 @@ margin-left: var(--rpl-sp-5); } + &[type='i'] { + list-style-type: lower-roman; + } + + &[type='I'] { + list-style-type: upper-roman; + } + + &[type='a'] { + list-style-type: lower-latin; + } + + &[type='A'] { + list-style-type: upper-latin; + } + li { padding: 0 0 var(--rpl-sp-2) var(--rpl-sp-2); @@ -65,28 +81,24 @@ letter-spacing: var(--rpl-type-ls-1); margin-left: var(--rpl-sp-4); padding-left: var(--rpl-sp-4); - list-style-type: none; + list-style-type: disc; @media (--rpl-bp-l) { margin-left: var(--rpl-sp-5); } + &[type='circle'] { + list-style-type: circle; + } + + &[type='square'] { + list-style-type: square; + } + > li { position: relative; padding: 0 0 var(--rpl-sp-2) var(--rpl-sp-2); - &::before { - content: ''; - display: block; - position: absolute; - top: 1.1rem; - left: -0.9rem; - background-color: currentcolor; - width: 0.5rem; - height: 0.5rem; - border-radius: 50%; - } - &:last-of-type { padding-bottom: 0; } @@ -120,7 +132,7 @@ display: block; position: absolute; top: 0; - left: -1rem; + left: calc(var(--rpl-sp-3) * -1); background-color: transparent; } }