@oardi/css-utils 0.134.0 → 0.135.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/css-utils-manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.135.0",
|
|
4
4
|
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
5
|
"lifecycle": {
|
|
6
6
|
"deprecated": [
|
|
@@ -726,6 +726,10 @@
|
|
|
726
726
|
"btn",
|
|
727
727
|
"card",
|
|
728
728
|
"chip",
|
|
729
|
+
"combobox",
|
|
730
|
+
"combobox-empty",
|
|
731
|
+
"combobox-option",
|
|
732
|
+
"combobox-panel",
|
|
729
733
|
"disabled",
|
|
730
734
|
"drawer",
|
|
731
735
|
"drawer-body",
|
package/css-utils-reference.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
> Generated automatically. Do not edit manually.
|
|
4
4
|
|
|
5
5
|
- Package: `@oardi/css-utils`
|
|
6
|
-
- Version: `0.
|
|
6
|
+
- Version: `0.135.0`
|
|
7
7
|
- Source: public SCSS entry point and utility configuration
|
|
8
8
|
|
|
9
9
|
## Usage guidance
|
|
@@ -500,6 +500,10 @@ Classes:
|
|
|
500
500
|
- `btn`
|
|
501
501
|
- `card`
|
|
502
502
|
- `chip`
|
|
503
|
+
- `combobox`
|
|
504
|
+
- `combobox-empty`
|
|
505
|
+
- `combobox-option`
|
|
506
|
+
- `combobox-panel`
|
|
503
507
|
- `disabled`
|
|
504
508
|
- `drawer`
|
|
505
509
|
- `drawer-body`
|
package/package.json
CHANGED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
@use '../layers.scss';
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
.combobox {
|
|
5
|
+
--combobox-max-height: 16rem;
|
|
6
|
+
--combobox-available-height: calc(100vh - 1rem);
|
|
7
|
+
--combobox-padding: var(--spacer-1);
|
|
8
|
+
--combobox-bg-color: var(--bg-surface);
|
|
9
|
+
--combobox-color: var(--text-color);
|
|
10
|
+
--combobox-border-color: var(--border-color);
|
|
11
|
+
--combobox-border-radius: var(--border-radius);
|
|
12
|
+
--combobox-box-shadow: var(--shadow-lg);
|
|
13
|
+
--combobox-active-bg-color: var(--bg-surface-hover);
|
|
14
|
+
--combobox-selected-color: var(--action-color);
|
|
15
|
+
--combobox-z-index: var(--z-index-tooltip);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.combobox-panel {
|
|
19
|
+
position: fixed;
|
|
20
|
+
z-index: var(--combobox-z-index);
|
|
21
|
+
inset: auto;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
max-block-size: min(var(--combobox-max-height), var(--combobox-available-height));
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: var(--combobox-padding);
|
|
26
|
+
border: var(--border-width) solid var(--combobox-border-color);
|
|
27
|
+
border-radius: var(--combobox-border-radius);
|
|
28
|
+
background: var(--combobox-bg-color);
|
|
29
|
+
color: var(--combobox-color);
|
|
30
|
+
box-shadow: var(--combobox-box-shadow);
|
|
31
|
+
overflow: auto;
|
|
32
|
+
overscroll-behavior: contain;
|
|
33
|
+
|
|
34
|
+
&[hidden] {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.combobox-option,
|
|
40
|
+
.combobox-empty {
|
|
41
|
+
padding: var(--spacer-2) var(--spacer-3);
|
|
42
|
+
overflow-wrap: anywhere;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.combobox-option {
|
|
46
|
+
border-radius: var(--border-radius-sm);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
|
|
49
|
+
&[data-combobox-active],
|
|
50
|
+
&:hover {
|
|
51
|
+
background: var(--combobox-active-bg-color);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&[aria-selected='true'] {
|
|
55
|
+
color: var(--combobox-selected-color);
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
}
|
|
58
|
+
&[aria-disabled='true'] {
|
|
59
|
+
color: var(--disabled-text-color);
|
|
60
|
+
background: transparent;
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.combobox-empty {
|
|
66
|
+
color: var(--text-muted);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (forced-colors: active) {
|
|
70
|
+
.combobox-panel {
|
|
71
|
+
border-color: CanvasText;
|
|
72
|
+
}
|
|
73
|
+
.combobox-option[data-combobox-active] {
|
|
74
|
+
outline: 2px solid Highlight;
|
|
75
|
+
outline-offset: -2px;
|
|
76
|
+
}
|
|
77
|
+
.combobox-option[aria-selected='true'] {
|
|
78
|
+
color: LinkText;
|
|
79
|
+
}
|
|
80
|
+
.combobox-option[aria-disabled='true'] {
|
|
81
|
+
color: GrayText;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
package/scss/index.scss
CHANGED
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
@forward './components/overlay.scss';
|
|
47
47
|
@forward './components/pagination.scss';
|
|
48
48
|
@forward './components/popover.scss';
|
|
49
|
+
@forward './components/combobox.scss';
|
|
49
50
|
@forward './components/progress.scss';
|
|
50
51
|
@forward './components/range-slider.scss';
|
|
51
52
|
@forward './components/segmented-control.scss';
|