From 259d5c3867ff5b95951ce7a9110a5f2a171eab26 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 23 Oct 2019 16:30:45 -0700 Subject: [PATCH] Change sizes of link icons to use px instead of em to prevent occasional clipping --- core/dist/css/decanter.css | 31 +++++++++---------- .../scss/components/link/_link--action.scss | 2 +- .../scss/components/link/_link--download.scss | 2 +- .../scss/components/link/_link--external.scss | 2 +- .../scss/components/link/_link--internal.scss | 2 +- .../src/scss/components/link/_link--jump.scss | 2 +- .../scss/components/link/_link--video.scss | 2 +- 7 files changed, 21 insertions(+), 22 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index d6e6474ee..3c539068a 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8439,9 +8439,10 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--action::after { margin-right: 0.3em; + margin-bottom: 0.06em; margin-left: 0.4em; - height: 0.5em; - width: 0.5em; + height: 10px; + width: 10px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjQxNTY2MSAwLjUxMTI4NUMxLjAwMDI0IC0wLjEzNjI1MiAxLjk4NDQ5IC0wLjE3Mzc0NyAyLjYxNDA0IDAuNDI3NTM3TDEzLjUwMjkgMTAuODI3NUMxMy44MTk5IDExLjEzMDMgMTQgMTEuNTU1MSAxNCAxMkMxNCAxMi40NDQ5IDEzLjgxOTkgMTIuODY5NyAxMy41MDI5IDEzLjE3MjVMMi42MTQwNCAyMy41NzI1QzEuOTg0NDkgMjQuMTczNyAxLjAwMDI0IDI0LjEzNjMgMC40MTU2NjEgMjMuNDg4N0MtMC4xNjg5MjEgMjIuODQxMiAtMC4xMzI0NjcgMjEuODI4OCAwLjQ5NzA4MyAyMS4yMjc1TDEwLjE1ODQgMTJMMC40OTcwODMgMi43NzI0N0MtMC4xMzI0NjcgMi4xNzExOSAtMC4xNjg5MjEgMS4xNTg4MiAwLjQxNTY2MSAwLjUxMTI4NVoiIGZpbGw9IiMyRTJEMjkiLz4KPC9zdmc+Cg==) no-repeat 0 0; @@ -8464,8 +8465,8 @@ a { .su-link--download::after { margin-right: 0.3em; margin-left: 0.4em; - height: 0.75em; - width: 0.75em; + height: 12px; + width: 12px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxOCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDBDOS42NzE3IDAgMTAuMjE2MiAwLjU0ODIyMyAxMC4yMTYyIDEuMjI0NDlWMTUuNDQyMkwxNS45Mjc4IDkuNzQ0NDJDMTYuNDA0OSA5LjI2ODQzIDE3LjE3NDkgOS4yNzE5OSAxNy42NDc3IDkuNzUyMzhDMTguMTIwNSAxMC4yMzI4IDE4LjExNyAxMS4wMDgxIDE3LjYzOTggMTEuNDg0TDkuODU2MDMgMTkuMjQ5MUM5LjM4MTk5IDE5LjcyMiA4LjYxODAxIDE5LjcyMiA4LjE0Mzk3IDE5LjI0OTFMMC4zNjAxODIgMTEuNDg0Qy0wLjExNjk1NyAxMS4wMDgxIC0wLjEyMDQ5NSAxMC4yMzI4IDAuMzUyMjggOS43NTIzOEMwLjgyNTA1NSA5LjI3MTk5IDEuNTk1MTEgOS4yNjg0MyAyLjA3MjI1IDkuNzQ0NDJMNy43ODM3OCAxNS40NDIyVjEuMjI0NDlDNy43ODM3OCAwLjU0ODIyMyA4LjMyODMgMCA5IDBaTTEuMTk3NTEgMjIuNzc1NUMxLjE5NzUxIDIyLjA5OTIgMS43NDIwMiAyMS41NTEgMi40MTM3MiAyMS41NTFIMTUuNTg2M0MxNi4yNTggMjEuNTUxIDE2LjgwMjUgMjIuMDk5MiAxNi44MDI1IDIyLjc3NTVDMTYuODAyNSAyMy40NTE4IDE2LjI1OCAyNCAxNS41ODYzIDI0SDIuNDEzNzJDMS43NDIwMiAyNCAxLjE5NzUxIDIzLjQ1MTggMS4xOTc1MSAyMi43NzU1WiIgZmlsbD0iIzJFMkQyOSIvPgo8L3N2Zz4K) no-repeat 0 0; @@ -8487,10 +8488,9 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--external::after { margin-right: 0.3em; - margin-bottom: -0.06em; margin-left: 0.4em; - height: 0.6em; - width: 0.6em; + height: 10px; + width: 10px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy41OTY5IDEuNDUzMjJDMjMuODg1OSAxLjc1ODA3IDI0LjAzMDggMi4xNzM1OSAyMy45OTQ1IDIuNTkzNzJMMjIuNTQgMTkuNDYwNEMyMi40NzA0IDIwLjI2NzMgMjEuNzY1MiAyMC44NjQ2IDIwLjk2NDkgMjAuNzk0NUMyMC4xNjQ2IDIwLjcyNDMgMTkuNTcyMiAyMC4wMTMyIDE5LjY0MTggMTkuMjA2M0wyMC43Nzc3IDYuMDM0NTRMMi40MjU1MyAyMi42MjU0QzEuODI3NCAyMy4xNjYxIDAuOTA3ODAzIDIzLjExNTUgMC4zNzE1NDkgMjIuNTEyNEMtMC4xNjQ3MDYgMjEuOTA5MyAtMC4xMTQ1NDUgMjAuOTgyIDAuNDgzNTg0IDIwLjQ0MTNMMTguNTU3NCA0LjEwMjE2TDUuMTUxNDcgNC42NjUzOUM0LjM0ODg1IDQuNjk5MTIgMy42NzEwOCA0LjA3MDM3IDMuNjM3NjQgMy4yNjEwNkMzLjYwNDE5IDIuNDUxNzQgNC4yMjc3NCAxLjc2ODMzIDUuMDMwMzYgMS43MzQ2MUwyMi40ODQ5IDEuMDAxMjdDMjIuOTAyOCAwLjk4MzcxNyAyMy4zMDc5IDEuMTQ4MzggMjMuNTk2OSAxLjQ1MzIyWiIgZmlsbD0iIzJFMkQyOSIvPgo8L3N2Zz4K) no-repeat 0 0; @@ -8512,10 +8512,10 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--internal::after { margin-right: 0.3em; - margin-bottom: -0.06em; + margin-bottom: -0.03em; margin-left: 0.4em; - height: 0.75em; - width: 0.75em; + height: 13px; + width: 13px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxNSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjggNi41VjRDMTEuOCAxLjggOS45IDAgNy41IDBINy4yQzQuOCAwIDIuOSAxLjggMi45IDRWNi41QzEuMyA2LjUgMCA3LjcgMCA5LjJWMTUuNEMwIDE2LjkgMS4zIDE4LjEgMi45IDE4LjFIMTEuOEMxMy40IDE4LjEgMTQuNyAxNi45IDE0LjcgMTUuNFY5LjJDMTQuNiA3LjcgMTMuMyA2LjUgMTEuOCA2LjVaTTQuNiA0QzQuNiAyLjcgNS44IDEuNyA3LjIgMS43SDcuNUM4LjkgMS43IDEwLjEgMi43IDEwLjEgNFY2LjVINC42VjRaTTEzIDE1LjRDMTMgMTYgMTIuNCAxNi40IDExLjcgMTYuNEgyLjlDMi4zIDE2LjQgMS43IDE2IDEuNyAxNS40VjkuMkMxLjcgOC42IDIuMiA4LjIgMi45IDguMkgxMS44QzEyLjQgOC4yIDEzIDguNyAxMyA5LjJWMTUuNFoiIGZpbGw9IiMyRTJEMjkiLz4KPC9zdmc+Cg==) no-repeat 0 0; @@ -8538,10 +8538,9 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--jump::after { margin-right: 0.3em; - margin-bottom: -0.04em; margin-left: 0.4em; - height: 0.65em; - width: 0.65em; + height: 12px; + width: 12px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzNyA3LjYxNDA0Qy0wLjE3Mzc0NyA2Ljk4NDQ5IC0wLjEzNjI1MiA2LjAwMDI0IDAuNTExMjg1IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjMkUyRDI5Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; @@ -8579,10 +8578,10 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--video::after { margin-right: 0.3em; - margin-bottom: -0.2em; + margin-bottom: -0.14em; margin-left: 0.4em; - height: 0.8em; - width: 0.8em; + height: 13px; + width: 13px; display: inline-block; content: ''; -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMiAxLjVIM0MyLjE3MTU3IDEuNSAxLjUgMi4xNzE1NyAxLjUgM1YxM0MxLjUgMTMuODI4NCAyLjE3MTU3IDE0LjUgMyAxNC41SDIyQzIyLjgyODQgMTQuNSAyMy41IDEzLjgyODQgMjMuNSAxM1YzQzIzLjUgMi4xNzE1NyAyMi44Mjg0IDEuNSAyMiAxLjVaTTMgMEMxLjM0MzE1IDAgMCAxLjM0MzE1IDAgM1YxM0MwIDE0LjY1NjkgMS4zNDMxNSAxNiAzIDE2SDIyQzIzLjY1NjkgMTYgMjUgMTQuNjU2OSAyNSAxM1YzQzI1IDEuMzQzMTUgMjMuNjU2OSAwIDIyIDBIM1pNMTAuNTg2NSAxMUMxMC40OTYyIDExIDEwLjQwNiAxMC45NTI5IDEwLjMxNTggMTAuOTA1N0MxMC4wOTAyIDEwLjgxMTQgMTAgMTAuNjIyOSAxMCAxMC4zODcyVjQuNTg5MjNDMTAgNC40MDA2NyAxMC4wOTAyIDQuMTY0OTggMTAuMjcwNyA0LjA3MDcxQzEwLjQ1MTEgMy45NzY0MyAxMC42NzY3IDMuOTc2NDMgMTAuODU3MSA0LjA3MDcxTDE1LjcyOTMgNi45OTMyN0MxNS45MDk4IDcuMDg3NTQgMTYgNy4yNzYwOSAxNiA3LjUxMTc4QzE2IDcuNzQ3NDcgMTUuOTA5OCA3LjkzNjAzIDE1LjcyOTMgOC4wMzAzTDEwLjg1NzEgMTAuOTA1N0MxMC43NjY5IDEwLjk1MjkgMTAuNjc2NyAxMSAxMC41ODY1IDExWk03Ljc1IDE4LjVDNy4zMzU3OSAxOC41IDcgMTguODM1OCA3IDE5LjI1QzcgMTkuNjY0MiA3LjMzNTc5IDIwIDcuNzUgMjBIMTguMjVDMTguNjY0MiAyMCAxOSAxOS42NjQyIDE5IDE5LjI1QzE5IDE4LjgzNTggMTguNjY0MiAxOC41IDE4LjI1IDE4LjVINy43NVoiIGZpbGw9IiMyRTJEMjkiLz4KPC9zdmc+Cg==) no-repeat 0 0; diff --git a/core/src/scss/components/link/_link--action.scss b/core/src/scss/components/link/_link--action.scss index 82d68e264..77f943cab 100644 --- a/core/src/scss/components/link/_link--action.scss +++ b/core/src/scss/components/link/_link--action.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_action-link.scss // .su-link--action { - @include link-icon(caret-right, 0.5em); + @include link-icon(caret-right, 10px, right, 0.06em); } diff --git a/core/src/scss/components/link/_link--download.scss b/core/src/scss/components/link/_link--download.scss index 4a9b38184..8af767888 100644 --- a/core/src/scss/components/link/_link--download.scss +++ b/core/src/scss/components/link/_link--download.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--download { - @include link-icon(download, 0.75em, down); + @include link-icon(download, 12px, down); } diff --git a/core/src/scss/components/link/_link--external.scss b/core/src/scss/components/link/_link--external.scss index 0240dc7f8..f3ce24346 100644 --- a/core/src/scss/components/link/_link--external.scss +++ b/core/src/scss/components/link/_link--external.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--external { - @include link-icon(arrow-up-right, 0.6em, topright, -0.06em); + @include link-icon(arrow-up-right, 10px, topright); } diff --git a/core/src/scss/components/link/_link--internal.scss b/core/src/scss/components/link/_link--internal.scss index bc5ac8c96..e42c15fa7 100644 --- a/core/src/scss/components/link/_link--internal.scss +++ b/core/src/scss/components/link/_link--internal.scss @@ -7,7 +7,7 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--internal { - @include link-icon(lock, 0.75em, none, -0.06em); + @include link-icon(lock, 13px, none, -0.03em); &:hover, &:focus { diff --git a/core/src/scss/components/link/_link--jump.scss b/core/src/scss/components/link/_link--jump.scss index 160a44309..07576ee63 100644 --- a/core/src/scss/components/link/_link--jump.scss +++ b/core/src/scss/components/link/_link--jump.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--jump { - @include link-icon(caret-down, 0.65em, down, -0.04em); + @include link-icon(caret-down, 12px, down); } diff --git a/core/src/scss/components/link/_link--video.scss b/core/src/scss/components/link/_link--video.scss index 1a8fadc42..d07e5804e 100644 --- a/core/src/scss/components/link/_link--video.scss +++ b/core/src/scss/components/link/_link--video.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--video { - @include link-icon(video, 0.8em, right, -0.2em); + @include link-icon(video, 13px, right, -0.14em); }