-
Notifications
You must be signed in to change notification settings - Fork 31
/
tab-vars.scss
79 lines (53 loc) · 2.94 KB
/
tab-vars.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
@import "../style/base";
/* Padding */
$tab-padding: var(--tab-padding, #{$spacing-m} #{$spacing-xl});
/* Margin of the before slot */
$tab-before-margin: var(--tab-before-margin, #{0 $spacing-m 0 0});
/* Padding when vertical */
$tab-padding-vertical: var(--tab-padding-vertical, #{$spacing-xl} #{$spacing-m});
/* Margin of the before slot when vertical */
$tab-before-margin-vertical: var(--tab-before-margin-vertical, #{0 0 $spacing-s});
/* Transition */
$tab-transition: var(--tab-transition, background #{$transition-duration-medium} #{$transition-deceleration-curve}, color #{$transition-duration-medium} #{$transition-deceleration-curve});
/* Opacity when disabled */
$tab-opacity-disabled: var(--tab-opacity-disabled, 0.6);
/* Default color */
$tab-color: var(--tab-color, #{color("shade")});
/* Default background */
$tab-bg: var(--tab-bg, #{$background});
/* Color when active */
$tab-color-active: var(--tab-color-active, #{color("primary")});
/* Background when active */
$tab-bg-active: var(--tab-bg-active, #{color("primary", $default-hue, 0.1)});
/* Color when hover */
$tab-color-hover: var(--tab-color-hover, #{color("shade")});
/* Background when hover */
$tab-bg-hover: var(--tab-bg-hover, #{color("shade", 200)});
/* Color when active and hover */
$tab-color-active-hover: var(--tab-color-active-hover, #{color("primary")});
/* Background when active and hover */
$tab-bg-active-hover: var(--tab-bg-active-hover, #{color("primary", $default-hue, 0.15)});
/* Color when disabled */
$tab-color-disabled: var(--tab-color-disabled, #{color("shade", $light-hue)});
/* Background when disabled */
$tab-bg-disabled: var(--tab-bg-disabled, #{$background});
/* Default color when filled */
$tab-color-filled: var(--tab-color-filled, #{color-contrast("primary", $default-hue, 0.6)});
/* Default background when filled */
$tab-bg-filled: var(--tab-bg-filled, #{color("primary")});
/* Color when active and filled */
$tab-color-active-filled: var(--tab-color-filled, #{color-contrast("primary", $light-hue, 0.8)});
/* Background when active and filled */
$tab-bg-active-filled: var(--tab-bg-filled, #{color("primary", $light-hue)});
/* Color when hover and filled */
$tab-color-hover-filled: var(--tab-color-hover-filled, #{color-contrast("primary", $light-hue, 0.6)});
/* Background when hover and filled */
$tab-bg-hover-filled: var(--tab-bg-hover-filled, #{color("primary", $light-hue)});
/* Color when active, hover and filled */
$tab-color-active-hover-filled: var(--tab-color-active-hover-filled, #{color-contrast("primary", $light-hue, 0.8)});
/* Background when active, hover and filled */
$tab-bg-active-hover-filled: var(--tab-bg-active-hover-filled, #{color("primary", $light-hue, 0.8)});
/* Color when disabled and filled */
$tab-color-disabled-filled: var(--tab-color-disabled-filled, #{color-contrast("primary", $default-hue, 0.4)});
/* Background when disabled and filled */
$tab-bg-disabled-filled: var(--tab-bg-disabled-filled, #{color("primary", $light-hue)});