From 111f5e56d9308615d4a56bd6ebbb7cad7fba2032 Mon Sep 17 00:00:00 2001
From: Aspectis <tobias@aspectis.net>
Date: Fri, 19 Mar 2021 18:15:53 +0100
Subject: [PATCH] refs #19359 [fid_bbi] fix icons in links
* Make all icons in links clickable
* Fix position in Firefox
* Move link-with-icon SCSS to separate file
---
themes/fid_bbi/scss/blocks/icon.scss | 23 -------------------
.../fid_bbi/scss/blocks/link-with-icon.scss | 11 +++++++++
themes/fid_bbi/scss/compiled.scss | 1 +
themes/fid_bbi/scss/util/hacks.scss | 3 ++-
4 files changed, 14 insertions(+), 24 deletions(-)
create mode 100644 themes/fid_bbi/scss/blocks/link-with-icon.scss
diff --git a/themes/fid_bbi/scss/blocks/icon.scss b/themes/fid_bbi/scss/blocks/icon.scss
index 5b72e9356a8..39f96abcf35 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 00000000000..390da5d0e6a
--- /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 bcb864fe8fe..f802bd7a13f 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 e7f54e9d792..b71abf44a97 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);
}
}
--
GitLab