diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index a97ff362c5..d403873649 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -22,15 +22,6 @@ } } - &-inline-comma { - display: none; - - @include mq(l) { - display: inline; - margin-right: 0.5rem; - } - } - &__item { &:not(:first-child) { .ons-description-list__term { @@ -64,12 +55,13 @@ grid-template-columns: repeat(3, 1fr); gap: 0.5rem 2.5rem; - .ons-grid__col { - width: auto; + .ons-description-list__value { + grid-column-start: 2; } - .ons-description-list__value { - float: none; + .ons-description-list__item { + display: grid; + grid-template-columns: auto 1fr; } .ons-description-list__term { diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index a164a627c9..4c55a8080d 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -22,10 +22,6 @@ class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}" > {{- descriptionItem.description -}} - - {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%} - , - {% endif %} {% endif %} {% endfor %}