1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
@use '../../sass-utilities' as *;
@include pf-root($timestamp) {
--#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
--#{$timestamp}--Color: var(--pf-t--global--text--color--regular);
--#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
// Help text variables for the timestamp
--#{$timestamp}--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
--#{$timestamp}--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
--#{$timestamp}--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
--#{$timestamp}--m-help-text--Color: var(--pf-t--global--text--color--subtle);
--#{$timestamp}--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
--#{$timestamp}--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
--#{$timestamp}--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
}
.#{$timestamp} {
display: inline-block;
font-size: var(--#{$timestamp}--FontSize);
color: var(--#{$timestamp}--Color);
outline-offset: var(--#{$timestamp}--OutlineOffset);
&.pf-m-help-text {
--#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--Color);
text-decoration-line: var(--#{$timestamp}--m-help-text--TextDecorationLine);
text-decoration-style: var(--#{$timestamp}--m-help-text--TextDecorationStyle);
text-underline-offset: var(--#{$timestamp}--m-help-text--TextUnderlineOffset);
cursor: pointer;
&:is(:hover, :focus) {
--#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--hover--Color);
--#{$timestamp}--m-help-text--TextDecorationLine: var(--#{$timestamp}--m-help-text--hover--TextDecorationLine);
--#{$timestamp}--m-help-text--TextDecorationStyle: var(--#{$timestamp}--m-help-text--hover--TextDecorationStyle);
}
}
}
// enable timestamp with tooltip to have dashed underline when used with truncate
.#{$timestamp}__text {
// stylelint-disable property-disallowed-list
text-decoration: inherit;
// stylelint-enable property-disallowed-list
}
|
