diff --git a/src/components/data/attributelist/attributelist.scss b/src/components/data/attributelist/attributelist.scss index c6d50912..c98d276c 100644 --- a/src/components/data/attributelist/attributelist.scss +++ b/src/components/data/attributelist/attributelist.scss @@ -13,7 +13,7 @@ &__list { display: grid; - gap: 0 var(--spacing-v) var(--gutter-h-mobile); + gap: 0; grid-template-columns: 1fr; margin: 0; width: 66%; @@ -34,13 +34,13 @@ &__value { color: var(--typography-color-muted); + + &:not(:last-child) { + margin-bottom: var(--spacing-v); + } } @media screen and (min-width: constants.$breakpoint-desktop) { flex-direction: row; - - &__list { - gap: var(--spacing-v) var(--gutter-h-desktop); - } } } diff --git a/src/components/data/kanban/kanban.scss b/src/components/data/kanban/kanban.scss index ce2baab7..4931ec6a 100644 --- a/src/components/data/kanban/kanban.scss +++ b/src/components/data/kanban/kanban.scss @@ -40,8 +40,8 @@ border: 1px solid var(--typography-color-border); display: flex; flex-direction: column; - gap: calc(2 * var(--spacing-v)); - padding: calc(2 * var(--spacing-v)) calc(2 * var(--spacing-h)) !important; + gap: var(--spacing-v); + padding: var(--spacing-v) var(--spacing-h); position: relative; } diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss index 9d651b97..4c2533d4 100644 --- a/src/components/layout/grid/grid.scss +++ b/src/components/layout/grid/grid.scss @@ -23,15 +23,15 @@ } &--gutter-true { - gap: var(--gutter-v-mobile) var(--gutter-h-mobile); + gap: var(--spacing-v) var(--spacing-h); } - &--gutter-h { - gap: 0 var(--gutter-h-mobile); + &--spacing-h { + gap: 0 var(--spacing-h); } &--gutter-v { - gap: var(--gutter-v-mobile) 0; + gap: var(--spacing-v) 0; } @media screen and (min-width: constants.$breakpoint-desktop) { @@ -44,15 +44,15 @@ } &--gutter-true { - gap: var(--gutter-v-desktop) var(--gutter-h-desktop); + gap: var(--spacing-v) var(--spacing-h); } - &--gutter-h { - gap: 0 var(--gutter-h-desktop); + &--spacing-h { + gap: 0 var(--spacing-h-desktop); } &--gutter-v { - gap: var(--gutter-v-desktop) 0; + gap: var(--spacing-v) 0; } @for $i from 1 through 12 { diff --git a/src/style/tokens/base.scss b/src/style/tokens/base.scss index e7ba2cfd..426cf537 100644 --- a/src/style/tokens/base.scss +++ b/src/style/tokens/base.scss @@ -30,11 +30,6 @@ --border-radius-l: 4px; --border-radius-s: 2px; - --gutter-h-desktop: 24px; - --gutter-v-desktop: 24px; - --gutter-h-mobile: 12px; - --gutter-v-mobile: 12px; - --spacing-h: 8px; --spacing-v: 8px;