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) %}