@thalassic/themes 0.10.0 → 0.11.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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/themes/thalassic/components/index.scss +1 -0
  3. package/themes/thalassic/components/multi-select/_index.scss +3 -0
  4. package/themes/thalassic/components/multi-select/_multi-select-panel.scss +83 -0
  5. package/themes/thalassic/components/multi-select/_multi-select-size.scss +16 -0
  6. package/themes/thalassic/components/multi-select/_multi-select.scss +93 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalassic/themes",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^21.0.0",
package/themes/thalassic/components/index.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  @forward 'dialog';
7
7
  @forward 'loader';
8
8
  @forward 'pagination';
9
+ @forward 'multi-select';
9
10
  @forward 'select';
10
11
  @forward 'form';
11
12
  @forward 'form-control-group';
package/themes/thalassic/components/multi-select/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @forward 'multi-select';
2
+ @forward 'multi-select-panel';
3
+ @forward 'multi-select-size';
package/themes/thalassic/components/multi-select/_multi-select-panel.scss ADDED
@@ -0,0 +1,83 @@
1
+ .tls-multi-select__panel {
2
+ --tls-multi-select-panel-max-height: 240px;
3
+ --tls-multi-select-panel-padding-block: var(--spacing-1);
4
+ --tls-multi-select-panel-background: var(--color-surface-container-lowest);
5
+ --tls-multi-select-panel-border-radius: var(--radius-md);
6
+ --tls-multi-select-panel-shadow: var(--shadow-sm);
7
+
8
+ width: 100%;
9
+ max-height: var(--tls-multi-select-panel-max-height);
10
+
11
+ margin: 0;
12
+ padding: var(--tls-multi-select-panel-padding-block) 0;
13
+
14
+ background-color: var(--tls-multi-select-panel-background);
15
+ border-radius: var(--tls-multi-select-panel-border-radius);
16
+ box-shadow: var(--tls-multi-select-panel-shadow);
17
+
18
+ overflow-y: auto;
19
+ list-style: none;
20
+ }
21
+
22
+ .tls-multi-select__option {
23
+ --tls-multi-select-option-color: var(--color-on-surface);
24
+ --tls-multi-select-option-background: transparent;
25
+ --tls-multi-select-option-padding-block: var(--spacing-2);
26
+ --tls-multi-select-option-padding-inline: var(--spacing-3);
27
+
28
+ &.tls-multi-select__option--active {
29
+ --tls-multi-select-option-background: var(--color-surface-variant);
30
+ }
31
+
32
+ &.tls-multi-select__option--selected {
33
+ --tls-multi-select-option-color: var(--color-primary);
34
+ }
35
+
36
+ &.tls-multi-select__option--disabled .tls-multi-select__option-button {
37
+ opacity: 0.4;
38
+ cursor: not-allowed;
39
+ }
40
+
41
+ .tls-multi-select__option-button {
42
+ width: 100%;
43
+ padding-block: var(--tls-multi-select-option-padding-block);
44
+ padding-inline: var(--tls-multi-select-option-padding-inline);
45
+
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: space-between;
49
+ gap: var(--spacing-2);
50
+
51
+ appearance: none;
52
+ cursor: pointer;
53
+ text-align: left;
54
+
55
+ color: var(--tls-multi-select-option-color);
56
+ background: var(--tls-multi-select-option-background);
57
+ border: none;
58
+
59
+ font-size: var(--font-body-medium-size);
60
+ font-weight: var(--font-body-medium-weight);
61
+ line-height: var(--font-body-medium-line-height);
62
+ letter-spacing: var(--font-body-medium-letter-spacing);
63
+
64
+ transition: background-color var(--motion-fast) var(--motion-ease-in-out);
65
+
66
+ &:focus-visible {
67
+ outline: none;
68
+ }
69
+
70
+ .tls-multi-select__option-label {
71
+ flex: 1;
72
+ overflow: hidden;
73
+ white-space: nowrap;
74
+ text-overflow: ellipsis;
75
+ }
76
+
77
+ .tls-multi-select__option-check {
78
+ width: 0.75rem;
79
+ height: 0.75rem;
80
+ flex-shrink: 0;
81
+ }
82
+ }
83
+ }
package/themes/thalassic/components/multi-select/_multi-select-size.scss ADDED
@@ -0,0 +1,16 @@
1
+ .tls-multi-select {
2
+ &.tls-form-control--sm {
3
+ --tls-multi-select-icon-size: 0.625rem;
4
+ --tls-multi-select-clear-size: 0.625rem;
5
+ }
6
+
7
+ &.tls-form-control--md {
8
+ --tls-multi-select-icon-size: 0.75rem;
9
+ --tls-multi-select-clear-size: 0.75rem;
10
+ }
11
+
12
+ &.tls-form-control--lg {
13
+ --tls-multi-select-icon-size: 0.875rem;
14
+ --tls-multi-select-clear-size: 0.875rem;
15
+ }
16
+ }
package/themes/thalassic/components/multi-select/_multi-select.scss ADDED
@@ -0,0 +1,93 @@
1
+ .tls-multi-select {
2
+ --tls-multi-select-width: 200px;
3
+ --tls-multi-select-gap: var(--spacing-2);
4
+
5
+ position: relative;
6
+ display: inline-block;
7
+
8
+ &.tls-form-control {
9
+ --tls-form-control-width: var(--tls-multi-select-width);
10
+
11
+ display: inline-flex;
12
+ align-items: stretch;
13
+ padding-inline: 0;
14
+
15
+ cursor: pointer;
16
+
17
+ &.tls-form-control--fluid {
18
+ --tls-form-control-width: 100%;
19
+ }
20
+
21
+ &.tls-form-control--disabled {
22
+ cursor: not-allowed;
23
+ }
24
+
25
+ &:focus-within {
26
+ border: var(--tls-form-control-border-width) solid var(--color-primary);
27
+ box-shadow: 0 0 3px -1px var(--color-primary);
28
+ }
29
+
30
+ &.tls-multi-select--open {
31
+ .tls-multi-select__chevron {
32
+ transform: rotate(180deg);
33
+ }
34
+ }
35
+
36
+ .tls-multi-select__trigger {
37
+ flex: 1;
38
+ min-width: 0;
39
+
40
+ display: flex;
41
+ align-items: center;
42
+ gap: var(--tls-multi-select-gap);
43
+
44
+ padding-inline: var(--tls-form-control-padding-inline);
45
+
46
+ appearance: none;
47
+ outline: none;
48
+
49
+ .tls-multi-select__value {
50
+ flex: 1;
51
+
52
+ overflow: hidden;
53
+ white-space: nowrap;
54
+ text-overflow: ellipsis;
55
+ }
56
+
57
+ .tls-multi-select__icon {
58
+ width: var(--tls-multi-select-icon-size);
59
+ height: var(--tls-multi-select-icon-size);
60
+
61
+ flex-shrink: 0;
62
+ display: flex;
63
+ align-items: center;
64
+
65
+ .tls-multi-select__chevron {
66
+ transition: transform var(--motion-fast) var(--motion-ease-in-out);
67
+ }
68
+ }
69
+ }
70
+
71
+ .tls-multi-select__clear {
72
+ position: absolute;
73
+ top: 50%;
74
+ right: calc(var(--tls-form-control-padding-inline) * 2 + var(--tls-multi-select-icon-size));
75
+
76
+ display: flex;
77
+ align-items: center;
78
+
79
+ color: var(--color-outline);
80
+
81
+ transform: translateY(-50%);
82
+
83
+ &:hover {
84
+ color: var(--color-on-surface);
85
+ }
86
+
87
+ .tls-multi-select__clear-icon {
88
+ width: var(--tls-multi-select-clear-size);
89
+ height: var(--tls-multi-select-clear-size);
90
+ }
91
+ }
92
+ }
93
+ }