@thalassic/themes 0.18.0 → 22.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thalassic/themes",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "22.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@angular/common": "^
|
|
7
|
-
"@angular/core": "^
|
|
6
|
+
"@angular/common": "^22.0.0",
|
|
7
|
+
"@angular/core": "^22.0.0"
|
|
8
8
|
},
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"default": "./fesm2022/thalassic-themes.mjs"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
|
+
"type": "module",
|
|
28
29
|
"dependencies": {
|
|
29
30
|
"tslib": "^2.3.0"
|
|
30
31
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
@use '../mixins' as mixins;
|
|
2
|
+
|
|
3
|
+
.tls-confirm {
|
|
4
|
+
--tls-confirm-padding: var(--spacing-4);
|
|
5
|
+
--tls-confirm-max-width: 320px;
|
|
6
|
+
|
|
7
|
+
--tls-confirm-border-radius: var(--radius-lg);
|
|
8
|
+
--tls-confirm-border-width: 1px;
|
|
9
|
+
|
|
10
|
+
--tls-confirm-box-shadow: var(--shadow-md);
|
|
11
|
+
--tls-confirm-background-color: var(--color-surface-container-lowest);
|
|
12
|
+
--tls-confirm-color: var(--color-on-surface);
|
|
13
|
+
--tls-confirm-border-color: var(--color-outline-variant);
|
|
14
|
+
|
|
15
|
+
max-width: var(--tls-confirm-max-width);
|
|
16
|
+
|
|
17
|
+
padding: var(--tls-confirm-padding);
|
|
18
|
+
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--spacing-4);
|
|
22
|
+
|
|
23
|
+
border: var(--tls-confirm-border-width) solid var(--tls-confirm-border-color);
|
|
24
|
+
border-radius: var(--tls-confirm-border-radius);
|
|
25
|
+
|
|
26
|
+
background-color: var(--tls-confirm-background-color);
|
|
27
|
+
box-shadow: var(--tls-confirm-box-shadow);
|
|
28
|
+
|
|
29
|
+
color: var(--tls-confirm-color);
|
|
30
|
+
|
|
31
|
+
@include mixins.panel-open;
|
|
32
|
+
|
|
33
|
+
&__title {
|
|
34
|
+
margin: 0;
|
|
35
|
+
|
|
36
|
+
font-size: var(--font-size-md);
|
|
37
|
+
font-weight: var(--font-weight-semibold);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&__message {
|
|
41
|
+
margin: 0;
|
|
42
|
+
|
|
43
|
+
font-size: var(--font-size-sm);
|
|
44
|
+
color: var(--color-on-surface-variant);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&__actions {
|
|
48
|
+
display: flex;
|
|
49
|
+
gap: var(--spacing-2);
|
|
50
|
+
|
|
51
|
+
&--start {
|
|
52
|
+
justify-content: flex-start;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&--center {
|
|
56
|
+
justify-content: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&--end {
|
|
60
|
+
justify-content: flex-end;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&--space-between {
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@use '../mixins' as mixins;
|
|
2
|
+
|
|
3
|
+
.tls-odometer {
|
|
4
|
+
--tls-odometer-easing: var(--motion-ease-out);
|
|
5
|
+
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: baseline;
|
|
8
|
+
|
|
9
|
+
// Numbers always read left-to-right, even inside an RTL layout, so the digit
|
|
10
|
+
// order is pinned rather than inherited from the surrounding direction.
|
|
11
|
+
direction: ltr;
|
|
12
|
+
font-variant-numeric: tabular-nums;
|
|
13
|
+
line-height: 1;
|
|
14
|
+
|
|
15
|
+
&__value {
|
|
16
|
+
position: absolute;
|
|
17
|
+
|
|
18
|
+
width: 1px;
|
|
19
|
+
height: 1px;
|
|
20
|
+
|
|
21
|
+
margin: -1px;
|
|
22
|
+
padding: 0;
|
|
23
|
+
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
|
|
26
|
+
clip-path: inset(50%);
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
|
|
29
|
+
border: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&__row {
|
|
33
|
+
display: inline-flex;
|
|
34
|
+
align-items: baseline;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&__symbol {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.tls-odometer-digit {
|
|
44
|
+
height: 1em;
|
|
45
|
+
|
|
46
|
+
display: inline-block;
|
|
47
|
+
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
|
|
50
|
+
&__strip {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
|
|
54
|
+
transform: translateY(calc(var(--tls-odometer-offset) * -1em));
|
|
55
|
+
|
|
56
|
+
// The roll communicates a value change (functional state), so it lives on
|
|
57
|
+
// the `essential` tier and survives reduced motion (resolved by
|
|
58
|
+
// `MotionService`). At the `none` level the transition is dropped and the
|
|
59
|
+
// digit swaps instantly.
|
|
60
|
+
@include mixins.motion(essential) {
|
|
61
|
+
&--animate {
|
|
62
|
+
transition: transform var(--tls-odometer-duration, 600ms) var(--tls-odometer-easing);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&__cell {
|
|
68
|
+
height: 1em;
|
|
69
|
+
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -19,12 +19,14 @@
|
|
|
19
19
|
|
|
20
20
|
@forward 'checkbox';
|
|
21
21
|
@forward 'chip-group';
|
|
22
|
+
@forward 'confirm';
|
|
22
23
|
@forward 'chip-input';
|
|
23
24
|
@forward 'divider';
|
|
24
25
|
@forward 'file-uploader';
|
|
25
26
|
@forward 'form-item';
|
|
26
27
|
@forward 'icon';
|
|
27
28
|
@forward 'menu';
|
|
29
|
+
@forward 'odometer';
|
|
28
30
|
@forward 'password';
|
|
29
31
|
@forward 'input-number';
|
|
30
32
|
@forward 'pin-input';
|