diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png index be826618ec..0a08429eb9 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1919cf6a432a9c345066cf225c145175d5f4efc295a0c768eceb92425b506d12 -size 31145 +oid sha256:10b3fac1f117b5156eed79c8e8acd67c758bcf750706a405f707127224f296e5 +size 29101 diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 8cfd696291..d403873649 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -25,21 +25,48 @@ &__item { &:not(:first-child) { .ons-description-list__term { - @extend .ons-u-mt-2xs; + margin-top: 0.5rem; } + .ons-description-list__value:nth-of-type(1) { - @include mq(xs) { + @include mq(m) { + margin-top: 0.5rem; + } + } + .ons-description-list--inline & .ons-description-list__value:nth-of-type(1) { + @include mq(l) { + margin-top: 0; + } + @include mq(xs, l) { margin-top: 0.5rem; } } + .ons-description-list--inline & .ons-description-list__term { + @include mq(l) { + margin-top: 0; + } + } } } &--inline { @include mq(l) { - grid-template-columns: repeat(3, 1fr); display: grid; + grid-template-columns: repeat(3, 1fr); gap: 0.5rem 2.5rem; + + .ons-description-list__value { + grid-column-start: 2; + } + + .ons-description-list__item { + display: grid; + grid-template-columns: auto 1fr; + } + + .ons-description-list__term { + margin-right: 1rem; + } } } } diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index eb7cc5300f..4c55a8080d 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -10,17 +10,16 @@