diff --git a/themes/fid_bbi/scss/blocks/icon.scss b/themes/fid_bbi/scss/blocks/icon.scss index 5b72e9356a88c9c9c7fc81783e10ebac7285aa8d..39f96abcf35bb9b01ce831576fdfec359a31d197 100644 --- a/themes/fid_bbi/scss/blocks/icon.scss +++ b/themes/fid_bbi/scss/blocks/icon.scss @@ -29,26 +29,3 @@ } } } - -.link-with-icon { - margin-left: g(1.25); - position: relative; - - // Make icon and gap clickable - &::before { - content: ''; - display: block; - height: g(); - left: 0; - margin-left: g(-1.25); - position: absolute; - top: 0; - width: g(1.25); - } - - > .icon { - margin-left: g(-1.25); - margin-right: g(.25); - position: absolute; // Prevent icons from increasing link height - } -} diff --git a/themes/fid_bbi/scss/blocks/link-with-icon.scss b/themes/fid_bbi/scss/blocks/link-with-icon.scss new file mode 100644 index 0000000000000000000000000000000000000000..390da5d0e6a818b88d54d281a1835e6e9551b7a1 --- /dev/null +++ b/themes/fid_bbi/scss/blocks/link-with-icon.scss @@ -0,0 +1,11 @@ +.link-with-icon { + margin-left: g(1.25); + + > .icon { + margin-left: g(-1.25); + padding-right: g(.25); + pointer-events: auto; + position: absolute; // Prevent icons from increasing link height + width: g(1 + .25); // Account for padding + } +} diff --git a/themes/fid_bbi/scss/compiled.scss b/themes/fid_bbi/scss/compiled.scss index bcb864fe8fe34d97f357d963e6d4c1d33c3900a5..f802bd7a13fe8f0c7b7b5d95945de50f51cf7da3 100644 --- a/themes/fid_bbi/scss/compiled.scss +++ b/themes/fid_bbi/scss/compiled.scss @@ -37,6 +37,7 @@ @import 'blocks/header'; @import 'blocks/icon'; @import 'blocks/item-list'; +@import 'blocks/link-with-icon'; @import 'blocks/main'; @import 'blocks/modal'; @import 'blocks/nav'; diff --git a/themes/fid_bbi/scss/util/hacks.scss b/themes/fid_bbi/scss/util/hacks.scss index e7f54e9d7929f689a92a4a4ba485a44ed4f38025..b71abf44a9715db9c5f5b4a525100f5daa5fbf02 100644 --- a/themes/fid_bbi/scss/util/hacks.scss +++ b/themes/fid_bbi/scss/util/hacks.scss @@ -103,7 +103,8 @@ a.active { // data-rvkNotation .link-with-icon[aria-expanded=true] { > .icon { - transform: rotate(180deg) + transform: rotate(180deg); + padding: 0 0 0 g(.25); } }