diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 4bd3a0373d..a87069893c 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -1,40 +1,41 @@ .ons-description-list { - &__items { + &__items & { margin: 0 0 2rem; - &.ons-description-list--horizontal { - @media (width >= 980px) { - grid-template-columns: repeat(3, 1fr); - display: grid; - gap: 0.5rem 2.5rem; + &__term { + clear: both; + float: left; + font-weight: $font-weight-bold; + white-space: nowrap; + + &:not(:first-child) { + margin-top: 0.5rem; } } - } - &__term { - clear: both; - float: left; - font-weight: $font-weight-bold; - - &:not(:first-child) { - margin-top: 0.5rem; - } - } + &__value { + float: right; + margin-left: 0; /* As normalize adds a 40px left margin */ - &__value { - float: right; - margin-left: 0; /* As normalize adds a 40px left margin */ + &:not(:nth-of-type(1)) { + @include mq(m) { + margin-top: 0.5rem; + } + } - &:not(:nth-of-type(1)) { - @include mq(m) { - margin-top: 0.5rem; + & + & { + @include mq(m) { + margin-top: 0; + } } } + } - & + & { - @include mq(m) { - margin-top: 0; - } + &--inline { + @media (width >= 980px) { + grid-template-columns: repeat(3, 1fr); + display: grid; + gap: 0.5rem 2.5rem; } } } diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 1fccc0105b..b989fd0983 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,13 +1,13 @@ {% macro onsDescriptionList(params) %}
{% for item in params.itemsList %} - {% set descriptionItems %} +
{% if item.term | length %}
{{ item.term }}
{% endif %} @@ -22,13 +22,7 @@ {% endif %} {% endfor %} - {% endset %} - - {% if params.horizontal %} -
{{ descriptionItems | safe }}
- {% else %} - {{ descriptionItems | safe }} - {% endif %} +
{% endfor %}
{% endmacro %} diff --git a/src/components/description-list/example-description-list-horizontal.njk b/src/components/description-list/example-description-list-horizontal.njk index 879c880d0d..63817afbe2 100644 --- a/src/components/description-list/example-description-list-horizontal.njk +++ b/src/components/description-list/example-description-list-horizontal.njk @@ -3,7 +3,7 @@ onsDescriptionList({ "classes": "ons-u-mb-no", "descriptionListLabel": "Information about this business and its survey requirements", - "horizontal": true, + "variant": "inline", "termCol": "4", "descriptionCol": "8", "itemsList": [