composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°6406 - Refactor SCSS to add a text helper to force hyperlinks color

Browse Source
This commit is contained in:
Molkobain
2024-02-06 09:43:28 +01:00
parent e830c90314
commit 205a37a879
2 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
css/backoffice/utils/helpers/_text-decoration.scss
View File

@@ -12,6 +12,23 @@ $ibo-has-description--font-size: 0.7em !default; /* Font size is em on purpose a
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;
$ibo-hyperlink-color: $ibo-color-primary-700 !default;
$ibo-hyperlink-text-decoration: none !default;
$ibo-hyperlink-color--on-hover: $ibo-color-primary-800 !default;
$ibo-hyperlink-text-decoration--on-hover: $ibo-hyperlink-text-decoration !default;
$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
$ibo-hyperlink-text-decoration--on-active: $ibo-hyperlink-text-decoration !default;
/* CSS variables */
:root{
--ibo-hyperlink-color: #{$ibo-hyperlink-color};
--ibo-hyperlink-text-decoration: #{$ibo-hyperlink-text-decoration};
--ibo-hyperlink-color--on-hover: #{$ibo-hyperlink-color--on-hover};
--ibo-hyperlink-text-decoration--on-hover: #{$ibo-hyperlink-text-decoration--on-hover};
--ibo-hyperlink-color--on-active: #{$ibo-hyperlink-color--on-active};
--ibo-hyperlink-text-decoration--on-active: #{$ibo-hyperlink-text-decoration--on-active};
}
/* Rules */
%ibo-text-truncated-with-ellipsis {
white-space: nowrap;
@@ -32,6 +49,20 @@ $ibo-is-code--padding: 1.25rem 1.5rem !default;
color: inherit;
}
}
/* Use this when you want the hyperlink to be of the color of its container's text instead of the global hyperlink color */
%ibo-hyperlink-forced-colors {
color: $ibo-hyperlink-color;
text-decoration: $ibo-hyperlink-text-decoration;
&:hover {
color: $ibo-hyperlink-color--on-hover;
text-decoration: $ibo-hyperlink-text-decoration--on-hover;
}
&:active {
color: $ibo-hyperlink-color--on-active;
text-decoration: $ibo-hyperlink-text-decoration--on-active;
}
}
.ibo-is-broken-hyperlink {
text-decoration: line-through;