diff options
Diffstat (limited to 'src/components/atoms/lists/description-list.module.scss')
| -rw-r--r-- | src/components/atoms/lists/description-list.module.scss | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/atoms/lists/description-list.module.scss b/src/components/atoms/lists/description-list.module.scss new file mode 100644 index 0000000..caa2711 --- /dev/null +++ b/src/components/atoms/lists/description-list.module.scss @@ -0,0 +1,54 @@ +@use "@styles/abstracts/mixins" as mix; + +.list { + display: flex; + flex-flow: column wrap; + gap: var(--spacing-2xs); + margin: 0; + + &__term { + flex: 0 0 max-content; + color: var(--color-fg-light); + font-weight: 600; + } + + &__description { + flex: 0 0 auto; + margin: 0; + } + + &__item { + display: flex; + } + + &--inline &__item { + flex-flow: column wrap; + + @include mix.media("screen") { + @include mix.dimensions("xs") { + flex-flow: row wrap; + gap: var(--spacing-2xs); + + .list__description:not(:first-of-type) { + &::before { + content: "/"; + margin-right: var(--spacing-2xs); + } + } + } + } + } + + &--column#{&}--responsive { + @include mix.media("screen") { + @include mix.dimensions("xs") { + flex-flow: row wrap; + gap: var(--spacing-lg); + } + } + } + + &--column &__item { + flex-flow: column wrap; + } +} |
