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 new file mode 100644 index 0000000000..0a08429eb9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:10b3fac1f117b5156eed79c8e8acd67c758bcf750706a405f707127224f296e5 +size 29101 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png new file mode 100644 index 0000000000..094d8bb803 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f86583c3c214887dfe5a160e4f9e89827597713760b91ed7bef9650d6830abb3 +size 26901 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png new file mode 100644 index 0000000000..f5141703a9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24353f18540d373c96f4de57c56514d2dfc1c2d792c92436bff1ae9e0fd55e35 +size 23850 diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index c96a09c8c5..bb13bae702 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -7,25 +7,56 @@ 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 */ + } - &:not(:nth-of-type(1)) { - @include mq(m) { + &__item { + &:not(:first-child) { + .ons-description-list__term { margin-top: 0.5rem; } + + .ons-description-list__value:nth-of-type(1) { + @include mq(m) { + margin-top: 0.5rem; + } + } + + .ons-description-list--inline & { + .ons-description-list__value:nth-of-type(1), + .ons-description-list__term { + @include mq(l) { + margin-top: 0; + } + @include mq(xs, l) { + margin-top: 0.5rem; + } + } + } + } + } + + &--inline { + .ons-description-list__term { + padding-right: 1rem; } - & + & { - @include mq(m) { - margin-top: 0; + @include mq(l) { + 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; } } } diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index bd2240c953..324f027775 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -6,6 +6,7 @@ | termCol | number | true | The number of grid columns used for the `