composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01: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

14
css/backoffice/base/_base.scss
View File

@@ -11,10 +11,6 @@ $ibo-scrollbar--scrollbar-thumb-background-color: $ibo-color-grey-300 !default;
$ibo-scrollbar--scrollbar-thumb-border: none !default;
$ibo-scrollbar--scrollbar-thumb-border-radius: $ibo-border-radius-500 !default;
$ibo-hyperlink-color: $ibo-color-primary-700 !default;
$ibo-hyperlink-color--on-hover: $ibo-color-primary-800 !default;
$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
$ibo-svg-illustration--fill: $ibo-color-primary-500 !default;
$ibo-content-block--background-color: $ibo-color-white-100 !default;
@@ -29,10 +25,6 @@ $ibo-content-block--border: 1px solid $ibo-color-grey-400 !default;
--ibo-scrollbar--scrollbar-thumb-background-color: #{$ibo-scrollbar--scrollbar-thumb-background-color};
--ibo-scrollbar--scrollbar-thumb-border: #{$ibo-scrollbar--scrollbar-thumb-border};
--ibo-scrollbar--scrollbar-thumb-border-radius: #{$ibo-scrollbar--scrollbar-thumb-border-radius};
--ibo-hyperlink-color: #{$ibo-hyperlink-color};
--ibo-hyperlink-color--on-hover: #{$ibo-hyperlink-color--on-hover};
--ibo-hyperlink-color--on-active: #{$ibo-hyperlink-color--on-active};
}
/* Box sizing reset */
@@ -73,17 +65,19 @@ html{
/* Hyperlinks reset, ensure that they are of the right color and without decoration everywhere (of course this can be overloaded in some components) */
a{
color: var(--ibo-hyperlink-color);
text-decoration: none;
text-decoration: var(--ibo-hyperlink-text-decoration);
&:hover,
&:active,
&:visited{
text-decoration: none;
text-decoration: var(--ibo-hyperlink-text-decoration);
}
&:hover{
color: var(--ibo-hyperlink-color--on-hover);
text-decoration: var(--ibo-hyperlink-text-decoration--on-hover);
}
&:active{
color: var(--ibo-hyperlink-color--on-active);
text-decoration: var(--ibo-hyperlink-text-decoration--on-active);
}
}

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;