From ad5171eb90af7b7d208c5e5cccd2eec7f423b923 Mon Sep 17 00:00:00 2001 From: Nils Date: Thu, 10 Oct 2024 15:36:37 +0200 Subject: [PATCH] update global styles --- .changeset/warm-dots-worry.md | 5 + .../src/components/assets/scss/global.scss | 123 ++++++++++-------- 2 files changed, 73 insertions(+), 55 deletions(-) create mode 100644 .changeset/warm-dots-worry.md diff --git a/.changeset/warm-dots-worry.md b/.changeset/warm-dots-worry.md new file mode 100644 index 000000000..7e6496fad --- /dev/null +++ b/.changeset/warm-dots-worry.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": major +--- + +Updated global styles diff --git a/packages/component-library/src/components/assets/scss/global.scss b/packages/component-library/src/components/assets/scss/global.scss index 26a9ec0b5..e0b4598c2 100644 --- a/packages/component-library/src/components/assets/scss/global.scss +++ b/packages/component-library/src/components/assets/scss/global.scss @@ -1,73 +1,86 @@ -@import "./variables.scss"; - -* { +/* Box sizing rules */ +*, +*::before, +*::after { box-sizing: border-box; - margin: 0; - padding: 0; } +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role="list"], +ol[role="list"] { + list-style: none; +} + +/* Set core body defaults */ body { - font-family: $font-family-default; - font-size: $font-size-default; - color: $color-menu-start; - background: $color-gray-50; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + min-height: 100vh; + line-height: 1.5; } -@supports (font-variation-settings: normal) { - body { - font-family: $font-family-variables; - font-feature-settings: $font-family-default-feature-settings; - } +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; } -.mt-drag-select-box { - position: absolute; - background: $color-drag-select-box; - z-index: $z-index-drag-select-box; +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4 { + text-wrap: balance; } -.link { - display: inline-block; - color: $color-shopware-brand-500; +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; } -/* style inline external links */ -a[target="_blank"]:not(.mt-external-link, .mt-internal-link, .mt-button) { - display: inline-block; - position: relative; - color: $color-shopware-brand-500; - font-size: $font-size-small; - text-decoration: underline; - cursor: pointer; - word-break: break-word; +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; +} - &::after { - content: ""; - display: inline-block; - width: 0.715em; - height: 0.715em; - position: relative; - margin-left: 0.285em; - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A"); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 0.715em 0.715em; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A"); - mask-repeat: no-repeat; - mask-size: 0.715em 0.715em; - background-color: $color-shopware-brand-500; - } +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; } -button { - appearance: none; - padding: 0; - border: none; - font: inherit; - color: inherit; - background: none; - cursor: pointer; +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; } .visually-hidden {