From c9a7021299ce8cd527011270a50280675fe20f9c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jul 2023 20:38:46 +0200 Subject: [PATCH 1/5] Prevent SVG shrinking --- web_src/css/base.css | 10 ---------- web_src/css/index.css | 1 + web_src/css/modules/svg.css | 37 +++++++++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+), 10 deletions(-) create mode 100644 web_src/css/modules/svg.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 8b8d376c57890..ca400f270ba5f 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -375,16 +375,6 @@ progress::-moz-progress-bar { opacity: 1 !important; } -.svg { - display: inline-block; - vertical-align: text-top; - fill: currentcolor; -} - -.middle .svg { - vertical-align: middle; -} - .unselectable, .button, .lines-num, diff --git a/web_src/css/index.css b/web_src/css/index.css index 6a3e7d0dd5bfd..fa918f49dad25 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -10,6 +10,7 @@ @import "./modules/navbar.css"; @import "./modules/toast.css"; @import "./modules/divider.css"; +@import "./modules/svg.css"; @import "./shared/issuelist.css"; @import "./shared/milestone.css"; diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css new file mode 100644 index 0000000000000..58556f25d534e --- /dev/null +++ b/web_src/css/modules/svg.css @@ -0,0 +1,37 @@ +.svg { + display: inline-block; + vertical-align: text-top; + fill: currentcolor; +} + +.middle .svg { + vertical-align: middle; +} + +/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes + here are cherry-picked for our use cases, feel free to add more */ +.svg[height="12"] { min-height: 12px; } +.svg[height="13"] { min-height: 13px; } +.svg[height="14"] { min-height: 14px; } +.svg[height="15"] { min-height: 15px; } +.svg[height="16"] { min-height: 16px; } +.svg[height="18"] { min-height: 18px; } +.svg[height="20"] { min-height: 20px; } +.svg[height="22"] { min-height: 22px; } +.svg[height="24"] { min-height: 24px; } +.svg[height="36"] { min-height: 36px; } +.svg[height="48"] { min-height: 48px; } +.svg[height="56"] { min-height: 56px; } + +.svg[width="12"] { min-width: 12px; } +.svg[width="13"] { min-width: 13px; } +.svg[width="14"] { min-width: 14px; } +.svg[width="15"] { min-width: 15px; } +.svg[width="16"] { min-width: 16px; } +.svg[width="18"] { min-width: 18px; } +.svg[width="20"] { min-width: 20px; } +.svg[width="22"] { min-width: 22px; } +.svg[width="24"] { min-width: 24px; } +.svg[width="36"] { min-width: 36px; } +.svg[width="48"] { min-width: 48px; } +.svg[width="56"] { min-width: 56px; } From 6c2ccf97573c453ab53894829e9d99f6dd268eda Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jul 2023 20:46:03 +0200 Subject: [PATCH 2/5] enhance comment --- web_src/css/modules/svg.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css index 58556f25d534e..9d8c2bb1e978e 100644 --- a/web_src/css/modules/svg.css +++ b/web_src/css/modules/svg.css @@ -9,7 +9,9 @@ } /* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes - here are cherry-picked for our use cases, feel free to add more */ + here are cherry-picked for our use cases, feel free to add more. after + https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is + supported in browsers, use that instead for a generic solution. */ .svg[height="12"] { min-height: 12px; } .svg[height="13"] { min-height: 13px; } .svg[height="14"] { min-height: 14px; } From 282ef302c713c189aed711c56a86a452c8769899 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jul 2023 20:46:34 +0200 Subject: [PATCH 3/5] add newline --- web_src/css/modules/svg.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css index 9d8c2bb1e978e..ab1448cc09333 100644 --- a/web_src/css/modules/svg.css +++ b/web_src/css/modules/svg.css @@ -12,6 +12,7 @@ here are cherry-picked for our use cases, feel free to add more. after https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is supported in browsers, use that instead for a generic solution. */ + .svg[height="12"] { min-height: 12px; } .svg[height="13"] { min-height: 13px; } .svg[height="14"] { min-height: 14px; } From 2134a6ba30905f09e1f32eedfd99c9b1c2b42b9f Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jul 2023 20:54:11 +0200 Subject: [PATCH 4/5] tweak comment --- web_src/css/modules/svg.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css index ab1448cc09333..1fdb269b8ca94 100644 --- a/web_src/css/modules/svg.css +++ b/web_src/css/modules/svg.css @@ -11,7 +11,8 @@ /* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes here are cherry-picked for our use cases, feel free to add more. after https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is - supported in browsers, use that instead for a generic solution. */ + supported in browsers, use `attr(data-width px)` instead for a generic + solution. */ .svg[height="12"] { min-height: 12px; } .svg[height="13"] { min-height: 13px; } From ccc39195052736afa2289692f33ca43e226ab72b Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jul 2023 21:07:40 +0200 Subject: [PATCH 5/5] correct suggestion --- web_src/css/modules/svg.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css index 1fdb269b8ca94..b3060bddd600c 100644 --- a/web_src/css/modules/svg.css +++ b/web_src/css/modules/svg.css @@ -11,7 +11,7 @@ /* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes here are cherry-picked for our use cases, feel free to add more. after https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is - supported in browsers, use `attr(data-width px)` instead for a generic + supported in browsers, use `attr(width px)` instead for a generic solution. */ .svg[height="12"] { min-height: 12px; }