From 771c43b702a0b7eb141c0a4ca89da3691450a113 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 1 Oct 2019 17:47:49 -0700 Subject: [PATCH 1/5] Add parameter to @link-icon to adjust vertical position of icon; fine tune existing link variants icon vertical positions --- core/dist/css/decanter.css | 5 +---- core/src/scss/components/link/_link--external.scss | 2 +- core/src/scss/components/link/_link--internal.scss | 2 +- core/src/scss/components/link/_link--video.scss | 2 +- core/src/scss/utilities/mixins/link/_link-icon.scss | 7 ++++--- 5 files changed, 8 insertions(+), 10 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index d0791d2ef..bd8a4ed49 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8310,7 +8310,6 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--action::after { margin-right: 0.3em; - margin-bottom: -1px; margin-left: 0.4em; height: 0.5em; width: 0.5em; @@ -8335,7 +8334,6 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--download::after { margin-right: 0.3em; - margin-bottom: -1px; margin-left: 0.4em; height: 0.75em; width: 0.75em; @@ -8410,7 +8408,6 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--jump::after { margin-right: 0.3em; - margin-bottom: -1px; margin-left: 0.4em; height: 0.65em; width: 0.65em; @@ -8451,7 +8448,7 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--video::after { margin-right: 0.3em; - margin-bottom: -1px; + margin-bottom: -3px; margin-left: 0.4em; height: 0.8em; width: 0.8em; diff --git a/core/src/scss/components/link/_link--external.scss b/core/src/scss/components/link/_link--external.scss index 3ebcb28ea..7f14f30e2 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); + @include link-icon(arrow-up-right, 0.6em, -1px); } diff --git a/core/src/scss/components/link/_link--internal.scss b/core/src/scss/components/link/_link--internal.scss index 2555aedfc..188c84a92 100644 --- a/core/src/scss/components/link/_link--internal.scss +++ b/core/src/scss/components/link/_link--internal.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--internal { - @include link-icon(lock, 0.75em); + @include link-icon(lock, 0.75em, -1px); } diff --git a/core/src/scss/components/link/_link--video.scss b/core/src/scss/components/link/_link--video.scss index 69fb267e1..8aed6a944 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); + @include link-icon(video, 0.8em, -3px); } diff --git a/core/src/scss/utilities/mixins/link/_link-icon.scss b/core/src/scss/utilities/mixins/link/_link-icon.scss index f2952e07d..30e3eaa13 100644 --- a/core/src/scss/utilities/mixins/link/_link-icon.scss +++ b/core/src/scss/utilities/mixins/link/_link-icon.scss @@ -1,21 +1,22 @@ @charset "UTF-8"; // -// @link-icon($link-icon, $width: 0.65em, $animate: true) +// @link-icon($icon, $width: 0.65em, $vertical: null, $animate: true) // // Display an icon after a link. // // $icon {string} - Basename of link icon .svg file (without the .svg suffix). // $width {string} - Width of icon including unit, e.g. 0.75em, 24px. +// $vertical {string] - Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-3px' moves it down 3 pixels. // $animate {boolean} - Whether or not to animate on hover. // // Style guide: Mixins.Link.link-icon // -@mixin link-icon($icon, $width: 0.65em, $animate: true) { +@mixin link-icon($icon, $width: 0.65em, $vertical: null, $animate: true) { text-decoration: none; @supports (mask-repeat: no-repeat) { &::after { - @include margin(null 0.3em -1px 0.4em); + @include margin(null 0.3em $vertical 0.4em); @include size($width); display: inline-block; content: ''; From 051af57ac978de37328268d5f6cec87ffd8781ba Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 2 Oct 2019 10:24:28 -0700 Subject: [PATCH 2/5] Use em unit instead of px --- core/dist/css/decanter.css | 6 +++--- core/src/scss/components/link/_link--external.scss | 2 +- core/src/scss/components/link/_link--internal.scss | 2 +- core/src/scss/components/link/_link--video.scss | 2 +- core/src/scss/utilities/mixins/link/_link-icon.scss | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index bd8a4ed49..130fe8f41 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8358,7 +8358,7 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--external::after { margin-right: 0.3em; - margin-bottom: -1px; + margin-bottom: -0.06em; margin-left: 0.4em; height: 0.6em; width: 0.6em; @@ -8383,7 +8383,7 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--internal::after { margin-right: 0.3em; - margin-bottom: -1px; + margin-bottom: -0.06em; margin-left: 0.4em; height: 0.75em; width: 0.75em; @@ -8448,7 +8448,7 @@ a { @supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)) { .su-link--video::after { margin-right: 0.3em; - margin-bottom: -3px; + margin-bottom: -0.2em; margin-left: 0.4em; height: 0.8em; width: 0.8em; diff --git a/core/src/scss/components/link/_link--external.scss b/core/src/scss/components/link/_link--external.scss index 7f14f30e2..9d7a343a8 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, -1px); + @include link-icon(arrow-up-right, 0.6em, -0.06em); } diff --git a/core/src/scss/components/link/_link--internal.scss b/core/src/scss/components/link/_link--internal.scss index 188c84a92..f70ec77ca 100644 --- a/core/src/scss/components/link/_link--internal.scss +++ b/core/src/scss/components/link/_link--internal.scss @@ -7,5 +7,5 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--internal { - @include link-icon(lock, 0.75em, -1px); + @include link-icon(lock, 0.75em, -0.06em); } diff --git a/core/src/scss/components/link/_link--video.scss b/core/src/scss/components/link/_link--video.scss index 8aed6a944..e86fe9f4d 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, -3px); + @include link-icon(video, 0.8em, -0.2em); } diff --git a/core/src/scss/utilities/mixins/link/_link-icon.scss b/core/src/scss/utilities/mixins/link/_link-icon.scss index 30e3eaa13..134446543 100644 --- a/core/src/scss/utilities/mixins/link/_link-icon.scss +++ b/core/src/scss/utilities/mixins/link/_link-icon.scss @@ -7,7 +7,7 @@ // // $icon {string} - Basename of link icon .svg file (without the .svg suffix). // $width {string} - Width of icon including unit, e.g. 0.75em, 24px. -// $vertical {string] - Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-3px' moves it down 3 pixels. +// $vertical {string] - Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-0.3em' moves it down 0.3 em. // $animate {boolean} - Whether or not to animate on hover. // // Style guide: Mixins.Link.link-icon From 373c4bc82f9d4ddd1f4e4858cbc7b699a3daff35 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 4 Oct 2019 10:47:44 -0700 Subject: [PATCH 3/5] Change $animate parameter in @link-icon to take different animation options and apply to link variants; add lock-solid.svg for hover state for link--internal --- core/dist/css/decanter.css | 68 ++++++++++--------- core/src/img/lock-solid.svg | 1 + .../scss/components/link/_link--download.scss | 2 +- .../scss/components/link/_link--external.scss | 2 +- .../scss/components/link/_link--internal.scss | 9 ++- .../src/scss/components/link/_link--jump.scss | 2 +- .../scss/components/link/_link--video.scss | 2 +- .../utilities/mixins/link/_link-glyph.scss | 2 +- .../utilities/mixins/link/_link-icon.scss | 17 +++-- 9 files changed, 62 insertions(+), 43 deletions(-) create mode 100644 core/src/img/lock-solid.svg diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 130fe8f41..343537321 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8320,10 +8320,10 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--action:hover::after, .su-link--action:focus::after { background-color: #2e2d29; -webkit-transform: translateX(0.2em); @@ -8344,14 +8344,14 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--download:hover::after, .su-link--download:focus::after { background-color: #2e2d29; - -webkit-transform: translateX(0.2em); - transform: translateX(0.2em); } } + -webkit-transform: translateY(0.2em); + transform: translateY(0.2em); } } .su-link--external { text-decoration: none; } @@ -8369,14 +8369,14 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--external:hover::after, .su-link--external:focus::after { background-color: #2e2d29; - -webkit-transform: translateX(0.2em); - transform: translateX(0.2em); } } + -webkit-transform: translate3d(0.15em, -0.15em, 0); + transform: translate3d(0.15em, -0.15em, 0); } } .su-link--internal { text-decoration: none; } @@ -8394,20 +8394,22 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--internal:hover::after, .su-link--internal:focus::after { - background-color: #2e2d29; - -webkit-transform: translateX(0.2em); - transform: translateX(0.2em); } } + background-color: #2e2d29; } } + .su-link--internal:hover::after, .su-link--internal:focus::after { + -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNC43IDE4LjEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMmUyZDI5O308L3N0eWxlPjwvZGVmcz48dGl0bGU+bG9jay1zb2xpZDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTEuOCw2LjVWNEE0LjE1LDQuMTUsMCwwLDAsNy41LDBINy4yQTQuMTUsNC4xNSwwLDAsMCwyLjksNFY2LjVBMi44LDIuOCwwLDAsMCwwLDkuMnY2LjJhMi44LDIuOCwwLDAsMCwyLjksMi43aDguOWEyLjgsMi44LDAsMCwwLDIuOS0yLjdWOS4yQTIuOTQsMi45NCwwLDAsMCwxMS44LDYuNVpNNC42LDRBMi40NywyLjQ3LDAsMCwxLDcuMiwxLjdoLjNBMi40NywyLjQ3LDAsMCwxLDEwLjEsNFY2LjVINC42WiIvPjwvc3ZnPg==); + mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNC43IDE4LjEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMmUyZDI5O308L3N0eWxlPjwvZGVmcz48dGl0bGU+bG9jay1zb2xpZDwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTEuOCw2LjVWNEE0LjE1LDQuMTUsMCwwLDAsNy41LDBINy4yQTQuMTUsNC4xNSwwLDAsMCwyLjksNFY2LjVBMi44LDIuOCwwLDAsMCwwLDkuMnY2LjJhMi44LDIuOCwwLDAsMCwyLjksMi43aDguOWEyLjgsMi44LDAsMCwwLDIuOS0yLjdWOS4yQTIuOTQsMi45NCwwLDAsMCwxMS44LDYuNVpNNC42LDRBMi40NywyLjQ3LDAsMCwxLDcuMiwxLjdoLjNBMi40NywyLjQ3LDAsMCwxLDEwLjEsNFY2LjVINC42WiIvPjwvc3ZnPg==); } .su-link--jump { text-decoration: none; } @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; @@ -8418,14 +8420,14 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--jump:hover::after, .su-link--jump:focus::after { background-color: #2e2d29; - -webkit-transform: translateX(0.2em); - transform: translateX(0.2em); } } + -webkit-transform: translateY(0.2em); + transform: translateY(0.2em); } } .su-link--more { text-decoration: none; } @@ -8459,10 +8461,10 @@ a { -webkit-mask-size: contain; mask-size: contain; background-color: #006cb8; - -webkit-transition: -webkit-transform 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } + -webkit-transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -webkit-mask-image 0.2s ease-in-out; } .su-link--video:hover::after, .su-link--video:focus::after { background-color: #2e2d29; -webkit-transform: translateX(0.2em); diff --git a/core/src/img/lock-solid.svg b/core/src/img/lock-solid.svg new file mode 100644 index 000000000..dd4ef760e --- /dev/null +++ b/core/src/img/lock-solid.svg @@ -0,0 +1 @@ +lock-solid \ No newline at end of file diff --git a/core/src/scss/components/link/_link--download.scss b/core/src/scss/components/link/_link--download.scss index 0eb2612d2..4a9b38184 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); + @include link-icon(download, 0.75em, down); } diff --git a/core/src/scss/components/link/_link--external.scss b/core/src/scss/components/link/_link--external.scss index 9d7a343a8..0240dc7f8 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, -0.06em); + @include link-icon(arrow-up-right, 0.6em, topright, -0.06em); } diff --git a/core/src/scss/components/link/_link--internal.scss b/core/src/scss/components/link/_link--internal.scss index f70ec77ca..bc5ac8c96 100644 --- a/core/src/scss/components/link/_link--internal.scss +++ b/core/src/scss/components/link/_link--internal.scss @@ -7,5 +7,12 @@ // @see scss/utilities/mixins/link/_link-icon.scss // .su-link--internal { - @include link-icon(lock, 0.75em, -0.06em); + @include link-icon(lock, 0.75em, none, -0.06em); + + &:hover, + &:focus { + &::after { + mask-image: url("#{$su-image-path}/lock-solid.svg"); + } + } } diff --git a/core/src/scss/components/link/_link--jump.scss b/core/src/scss/components/link/_link--jump.scss index 956e76961..160a44309 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); + @include link-icon(caret-down, 0.65em, down, -0.04em); } diff --git a/core/src/scss/components/link/_link--video.scss b/core/src/scss/components/link/_link--video.scss index e86fe9f4d..1a8fadc42 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, -0.2em); + @include link-icon(video, 0.8em, right, -0.2em); } diff --git a/core/src/scss/utilities/mixins/link/_link-glyph.scss b/core/src/scss/utilities/mixins/link/_link-glyph.scss index 6da349bb4..f77e390a2 100644 --- a/core/src/scss/utilities/mixins/link/_link-glyph.scss +++ b/core/src/scss/utilities/mixins/link/_link-glyph.scss @@ -14,7 +14,7 @@ text-decoration: none; &::after { - content: '#{$glyph}'; + content: $glyph; display: inline-block; @include margin(null 0.3em -1px 0.4em); transition: transform 0.2s ease-in-out; diff --git a/core/src/scss/utilities/mixins/link/_link-icon.scss b/core/src/scss/utilities/mixins/link/_link-icon.scss index 134446543..045e877ed 100644 --- a/core/src/scss/utilities/mixins/link/_link-icon.scss +++ b/core/src/scss/utilities/mixins/link/_link-icon.scss @@ -8,11 +8,11 @@ // $icon {string} - Basename of link icon .svg file (without the .svg suffix). // $width {string} - Width of icon including unit, e.g. 0.75em, 24px. // $vertical {string] - Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-0.3em' moves it down 0.3 em. -// $animate {boolean} - Whether or not to animate on hover. +// $animate {string} - Type of animation for the icon on hover. Available options: right, down, up, topright, none // // Style guide: Mixins.Link.link-icon // -@mixin link-icon($icon, $width: 0.65em, $vertical: null, $animate: true) { +@mixin link-icon($icon, $width: 0.65em, $animate: right, $vertical: null) { text-decoration: none; @supports (mask-repeat: no-repeat) { &::after { @@ -23,16 +23,25 @@ mask: url("#{$su-image-path}/#{$icon}.svg") no-repeat 0 0; mask-size: contain; background-color: color(link); - transition: transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, mask-image 0.2s ease-in-out; } &:hover, &:focus { &::after { background-color: color(link--hover); - @if $animate { + @if $animate == 'right' or $animate == 'true' { transform: translateX(0.2em); } + @elseif $animate == 'down' { + transform: translateY(0.2em); + } + @elseif $animate == 'up' { + transform: translateY(-0.2em); + } + @elseif $animate == 'topright' { + transform: translate3d(0.15em, -0.15em, 0); + } } } } From 9f70057b0d76f4917196f8e1ad6d0e8d4a8c3d53 Mon Sep 17 00:00:00 2001 From: Sherakama Date: Tue, 8 Oct 2019 09:50:03 -0700 Subject: [PATCH 4/5] Update _link-icon.scss --- core/src/scss/utilities/mixins/link/_link-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/scss/utilities/mixins/link/_link-icon.scss b/core/src/scss/utilities/mixins/link/_link-icon.scss index 045e877ed..03c41815d 100644 --- a/core/src/scss/utilities/mixins/link/_link-icon.scss +++ b/core/src/scss/utilities/mixins/link/_link-icon.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; // -// @link-icon($icon, $width: 0.65em, $vertical: null, $animate: true) +// @link-icon($icon, $width: 0.65em, $animate: right, $vertical: null) // // Display an icon after a link. // From 9f942158ef49163f57fb3ab30c1e963c03ea760a Mon Sep 17 00:00:00 2001 From: Sherakama Date: Tue, 8 Oct 2019 09:51:01 -0700 Subject: [PATCH 5/5] Update _link-icon.scss --- core/src/scss/utilities/mixins/link/_link-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/scss/utilities/mixins/link/_link-icon.scss b/core/src/scss/utilities/mixins/link/_link-icon.scss index 03c41815d..abbde8823 100644 --- a/core/src/scss/utilities/mixins/link/_link-icon.scss +++ b/core/src/scss/utilities/mixins/link/_link-icon.scss @@ -7,8 +7,8 @@ // // $icon {string} - Basename of link icon .svg file (without the .svg suffix). // $width {string} - Width of icon including unit, e.g. 0.75em, 24px. +// $animate {string} - Type of animation for the icon on hover. Available options: right, down, up, topright, none. (deprecated true. Please use right) // $vertical {string] - Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-0.3em' moves it down 0.3 em. -// $animate {string} - Type of animation for the icon on hover. Available options: right, down, up, topright, none // // Style guide: Mixins.Link.link-icon //