diff --git a/.changeset/sixty-yaks-behave.md b/.changeset/sixty-yaks-behave.md new file mode 100644 index 000000000..c91d286e2 --- /dev/null +++ b/.changeset/sixty-yaks-behave.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +fix styling of data table without toolbar diff --git a/.changeset/unlucky-coins-hear.md b/.changeset/unlucky-coins-hear.md new file mode 100644 index 000000000..2b58fbfa4 --- /dev/null +++ b/.changeset/unlucky-coins-hear.md @@ -0,0 +1,17 @@ +--- +"@shopware-ag/meteor-component-library": major +--- + +Removed default typograhpy styling of card children + +To migrate you can use the `` component for text content +that is inside your card. + +For `p` tags you can simply use `My text` + +If you have headlines in your card you can change which tag the +component will render like this: + +``` +My headline +``` diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.vue b/packages/component-library/src/components/layout/mt-card/mt-card.vue index 8f25d1451..dc1f3a9ac 100644 --- a/packages/component-library/src/components/layout/mt-card/mt-card.vue +++ b/packages/component-library/src/components/layout/mt-card/mt-card.vue @@ -177,7 +177,7 @@ const cardClasses = computed(() => ({ .mt-card { max-width: 60rem; - margin: 0 auto 2.5rem; + margin: 0 auto var(--scale-size-40); position: relative; background: var(--color-elevation-surface-raised); border: 1px solid var(--color-border-primary-default); @@ -196,31 +196,11 @@ const cardClasses = computed(() => ({ .mt-card__content { display: flow-root; flex-basis: 100%; - padding: 1.5rem; + padding: var(--scale-size-24); background-clip: padding-box; position: relative; color: var(--color-text-primary-default); - & > :where(h1, h2, h3, h4, h5, h6) { - font-weight: normal; - } - - & > h1 { - font-size: 1.5rem; - } - - & > h2 { - font-size: 1.375rem; - } - - & > h3 { - font-size: 1.25rem; - } - - & > :where(h4, h5, h6) { - font-size: 1.125rem; - } - & a.mt-card__quick-link { display: grid; grid-auto-flow: column; @@ -228,7 +208,7 @@ const cardClasses = computed(() => ({ align-items: center; text-decoration: none; color: var(--color-text-brand-default); - font-size: 0.875rem; + font-size: var(--font-size-xs); &:hover { color: var(--color-text-brand-hover); @@ -271,7 +251,7 @@ const cardClasses = computed(() => ({ .mt-card__titles--has-inheritance-toggle { display: grid; grid-template-columns: min-content 1fr; - column-gap: 0.25rem; + column-gap: var(--scale-size-4); grid-template-areas: "inheritance title" "subtitle subtitle"; @@ -308,8 +288,8 @@ const cardClasses = computed(() => ({ display: flex; flex-wrap: wrap; align-items: stretch; - gap: 0.75rem; - padding: 1.5rem; + gap: var(--scale-size-12); + padding: var(--scale-size-24); border-bottom: 1px solid var(--color-border-primary-default); } @@ -320,8 +300,8 @@ const cardClasses = computed(() => ({ .mt-card__toolbar { display: flex; flex-basis: auto; - gap: 0.5rem; - padding: 1.25rem 1.5rem 1rem 1.5rem; + gap: var(--scale-size-8); + padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24); &:empty { display: none; @@ -331,8 +311,8 @@ const cardClasses = computed(() => ({ .mt-card__avatar { overflow: hidden; border-radius: var(--border-radius-xs); - width: 2.5rem; - height: 2.5rem; + width: var(--scale-size-40); + height: var(--scale-size-40); & img { width: 100%; @@ -364,7 +344,7 @@ const cardClasses = computed(() => ({ } .mt-card__footer { - --mt-card-footer-padding: 1.5rem; + --mt-card-footer-padding: var(--scale-size-24); --mt-inset-block-start: var(--mt-card-footer-padding); --mt-inset-block-end: var(--mt-card-footer-padding); diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue index 31db85abb..0bedd259d 100644 --- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue +++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue @@ -2017,6 +2017,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding .mt-card__toolbar { flex-direction: column; gap: 0; + padding: 0; } .mt-data-table__search { @@ -2062,6 +2063,11 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding display: flex; align-items: center; gap: var(--scale-size-8); + padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24); + + &:empty { + display: none; + } } // TODO: improve the name of this css selector