-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
_functions.scss
90 lines (81 loc) · 2.75 KB
/
_functions.scss
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
////
/// @group tooltip
////
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/utils/dist/functions';
@import './variables';
/// This function is used to quickly get one of the tooltip's theme values. This
/// is really just for the `rmd-tooltip-theme` mixin to provide some validation
/// that a correct style key is used, but might be useful in other cases.
///
/// @param {String} theme-style - One of the `$rmd-tooltip-theme-values` map
/// keys to get a value for.
/// @return {Color|String|Number} one of the tooltip's theme values.
@function rmd-tooltip-theme($theme-style) {
@return rmd-theme-get-var-value(
$theme-style,
$rmd-tooltip-theme-values,
tooltip
);
}
/// This function is used to get one of the tooltip's theme variables as a CSS
/// Variable to be applied as a style attribute. By default, the CSS Variable
/// will have a fallback of the current `$rmd-tooltip-theme-values`
///
/// This function is used to create a CSS Variable declaration with an optional
/// fallback value if the CSS Variable has not been declared somehow.
///
/// @param {String} theme-style - One of the `$rmd-tooltip-theme-values` map
/// keys to set a value for.
/// @param {Color|String|Number} fallback [null] - An optional fallback color to
/// apply. This is set to `null` by default and not used since the link's theme
/// variables should always exist.
/// @return {String} one of the tooltip's theme values as a css variable.
@function rmd-tooltip-theme-var($theme-style, $fallback: null) {
@return rmd-theme-get-var(
$theme-style,
$rmd-tooltip-theme-values,
tooltip,
$fallback
);
}
/// A small util that will rename the `above` and `below` positions of the
/// tooltip to `top` and `bottom` to be used for applying styles.
///
/// @access private
/// @param {String} position - the position to change.
/// @return {String} the position as a valid style name.
@function rmd-tooltip-position-to-property($position) {
$position: rmd-utils-validate(
$rmd-tooltip-position-values,
$position,
'tooltip position'
);
@if $position == 'below' {
@return 'bottom';
} @else if $position == 'above' {
@return 'top';
}
@return $position;
}
/// A small util for inversing the position. This is just used for generating
/// the default styles.
///
/// @access private
/// @param {String} position - One of the `$rmd-tooltip-position-values` strings
/// @return {String} the position inversed.
@function rmd-tooltip-inverse-position($position) {
$position: rmd-utils-validate(
$rmd-tooltip-position-values,
$position,
'tooltip position'
);
@if $position == 'left' {
@return 'right';
} @else if $position == 'right' {
@return 'left';
} @else if $position == 'below' {
@return 'above';
}
@return 'below';
}