Newer
Older
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
91
92
93
94
95
@import "/src/shared/style/colors.scss";
.device-table {
& thead {
font-size: 0.9em;
}
& tr:hover > td {
background-color: map-get($theme-colors, "primary-hover");
cursor: pointer;
}
& tr.active > td {
background-color: lighten(map-get($theme-colors, primary), 5%) !important;
color: map-get($theme-colors, "black") !important;
}
& tr > td {
color: map-get($theme-colors, "dark") !important;
}
& tr:nth-child(2n + 1) > td {
background-color: lighten(map-get($theme-colors, primary), 38%);
}
}
.border-right {
$border-padding: 2em;
border-right: 1px solid lighten(map-get($theme-colors, dark), 35%);
padding-right: $border-padding;
& ~ div {
padding-left: $border-padding;
}
}
.tab-links {
font-size: 1.5em;
text-decoration: none;
color: map-get($theme-colors, dark);
&:hover {
color: lighten(map-get($theme-colors, primary), 10%);
}
&:focus {
border: none !important;
color: lighten(map-get($theme-colors, primary), 10%);
}
&.active {
color: map-get($theme-colors, primary);
font-weight: 500;
text-decoration: underline;
}
}
.transitions {
$transition-duration-hover: 0.1s;
$transition-duration-change: 0.2s;
transition:
--startOpacity $transition-duration-hover ease-in-out,
--startPosition $transition-duration-hover ease-in-out;
}
@property --startOpacity {
syntax: "<number>";
initial-value: 0.35;
inherits: false;
}
@property --startPosition {
syntax: "<percentage>";
initial-value: 10%;
inherits: false;
}
.bg-gradient-fade {
$primary-color: map-get($theme-colors, "primary");
background: linear-gradient(
to bottom,
rgba($primary-color, var(--startOpacity)) var(--startPosition),
rgba($primary-color, 0.1) 100%
);
&:hover {
--startOpacity: 0.4;
--startPosition: 30%;
}
}
.disabled-hover:hover {
$primary-color: rgba(map-get($theme-colors, "dark"), 0.1);
background: linear-gradient(to bottom, rgb(223, 223, 223) 1%, white 100%);
}
.device-row:hover .icons {
color: map-get($theme-colors, "black") !important;
opacity: 100%;
transition: gap 0.3s;
gap: 0.7em;
}