@i-cell/ids-styles 0.0.1
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/LICENSE +21 -0
- package/README.md +2 -0
- package/dist/accordion/accordion.css +165 -0
- package/dist/accordion/accordion.min.css +1 -0
- package/dist/action-item/action-item.css +167 -0
- package/dist/action-item/action-item.min.css +1 -0
- package/dist/action-panel/action-panel.css +90 -0
- package/dist/action-panel/action-panel.min.css +1 -0
- package/dist/avatar/avatar.css +296 -0
- package/dist/avatar/avatar.min.css +1 -0
- package/dist/button/button.css +799 -0
- package/dist/button/button.min.css +1 -0
- package/dist/card/card.css +850 -0
- package/dist/card/card.min.css +1 -0
- package/dist/components.css +4060 -0
- package/dist/components.min.css +1 -0
- package/dist/dialog/dialog.css +174 -0
- package/dist/dialog/dialog.min.css +1 -0
- package/dist/divider/divider.css +73 -0
- package/dist/divider/divider.min.css +1 -0
- package/dist/icon-button/icon-button.css +676 -0
- package/dist/icon-button/icon-button.min.css +1 -0
- package/dist/tag/tag.css +761 -0
- package/dist/tag/tag.min.css +1 -0
- package/package.json +38 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 i-Cell Mobilsoft Open Source
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
.ids-accordion {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
align-items: flex-start;
|
|
5
|
+
width: 100%;
|
|
6
|
+
background: var(--ids-comp-accordion-item-color-bg-enabled);
|
|
7
|
+
}
|
|
8
|
+
.ids-accordion > .ids-accordion-summary {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
width: 100%;
|
|
12
|
+
border-style: solid;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
.ids-accordion > .ids-accordion-summary:focus {
|
|
16
|
+
outline-offset: 2px;
|
|
17
|
+
outline-style: solid;
|
|
18
|
+
outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline);
|
|
19
|
+
outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
|
|
20
|
+
}
|
|
21
|
+
.ids-theme-dark .ids-accordion > .ids-accordion-summary:focus {
|
|
22
|
+
outline-color: var(--ids-comp-accordion-summary-focused-outline-color-light-focused);
|
|
23
|
+
}
|
|
24
|
+
.ids-accordion > .ids-accordion-summary > .ids-accordion-title {
|
|
25
|
+
flex: 1 0 0;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
text-overflow: ellipsis;
|
|
28
|
+
}
|
|
29
|
+
.ids-accordion.ids-accordion-disabled > .ids-accordion-summary {
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
user-select: none;
|
|
32
|
+
}
|
|
33
|
+
.ids-accordion.ids-accordion-dense .ids-accordion-title, .ids-accordion.ids-accordion-compact .ids-accordion-title {
|
|
34
|
+
font-size: 12px;
|
|
35
|
+
font-style: normal;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
line-height: 16px;
|
|
38
|
+
letter-spacing: 0.5px;
|
|
39
|
+
}
|
|
40
|
+
.ids-accordion.ids-accordion-comfortable .ids-accordion-title, .ids-accordion.ids-accordion-spacious .ids-accordion-title {
|
|
41
|
+
font-size: 16px;
|
|
42
|
+
font-style: normal;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
line-height: 20px;
|
|
45
|
+
letter-spacing: 0.1px;
|
|
46
|
+
}
|
|
47
|
+
.ids-accordion > .ids-accordion-content {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
background: var(--ids-comp-accordion-details-color-bg-enabled);
|
|
51
|
+
}
|
|
52
|
+
.ids-accordion.ids-accordion-compact {
|
|
53
|
+
padding: var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact);
|
|
54
|
+
gap: var(--ids-comp-size-accordion-item-size-gap-compact);
|
|
55
|
+
border-radius: var(--ids-comp-size-accordion-item-size-border-radius-compact);
|
|
56
|
+
}
|
|
57
|
+
.ids-accordion.ids-accordion-compact > .ids-accordion-summary {
|
|
58
|
+
height: var(--ids-comp-size-accordion-summary-size-height-compact);
|
|
59
|
+
padding: var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact);
|
|
60
|
+
gap: var(--ids-comp-size-accordion-summary-size-gap-compact);
|
|
61
|
+
border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-compact);
|
|
62
|
+
border-width: var(--ids-comp-size-accordion-summary-size-border-width-compact);
|
|
63
|
+
}
|
|
64
|
+
.ids-accordion.ids-accordion-compact > .ids-accordion-content {
|
|
65
|
+
padding: var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);
|
|
66
|
+
gap: var(--ids-comp-size-accordion-details-size-gap-compact);
|
|
67
|
+
}
|
|
68
|
+
.ids-accordion.ids-accordion-comfortable {
|
|
69
|
+
padding: var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable);
|
|
70
|
+
gap: var(--ids-comp-size-accordion-item-size-gap-comfortable);
|
|
71
|
+
border-radius: var(--ids-comp-size-accordion-item-size-border-radius-comfortable);
|
|
72
|
+
}
|
|
73
|
+
.ids-accordion.ids-accordion-comfortable > .ids-accordion-summary {
|
|
74
|
+
height: var(--ids-comp-size-accordion-summary-size-height-comfortable);
|
|
75
|
+
padding: var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable);
|
|
76
|
+
gap: var(--ids-comp-size-accordion-summary-size-gap-comfortable);
|
|
77
|
+
border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);
|
|
78
|
+
border-width: var(--ids-comp-size-accordion-summary-size-border-width-comfortable);
|
|
79
|
+
}
|
|
80
|
+
.ids-accordion.ids-accordion-comfortable > .ids-accordion-content {
|
|
81
|
+
padding: var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);
|
|
82
|
+
gap: var(--ids-comp-size-accordion-details-size-gap-comfortable);
|
|
83
|
+
}
|
|
84
|
+
.ids-accordion.ids-accordion-spacious {
|
|
85
|
+
padding: var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious);
|
|
86
|
+
gap: var(--ids-comp-size-accordion-item-size-gap-spacious);
|
|
87
|
+
border-radius: var(--ids-comp-size-accordion-item-size-border-radius-spacious);
|
|
88
|
+
}
|
|
89
|
+
.ids-accordion.ids-accordion-spacious > .ids-accordion-summary {
|
|
90
|
+
height: var(--ids-comp-size-accordion-summary-size-height-spacious);
|
|
91
|
+
padding: var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious);
|
|
92
|
+
gap: var(--ids-comp-size-accordion-summary-size-gap-spacious);
|
|
93
|
+
border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-spacious);
|
|
94
|
+
border-width: var(--ids-comp-size-accordion-summary-size-border-width-spacious);
|
|
95
|
+
}
|
|
96
|
+
.ids-accordion.ids-accordion-spacious > .ids-accordion-content {
|
|
97
|
+
padding: var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);
|
|
98
|
+
gap: var(--ids-comp-size-accordion-details-size-gap-spacious);
|
|
99
|
+
}
|
|
100
|
+
.ids-accordion.ids-accordion-dense {
|
|
101
|
+
padding: var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense);
|
|
102
|
+
gap: var(--ids-comp-size-accordion-item-size-gap-dense);
|
|
103
|
+
border-radius: var(--ids-comp-size-accordion-item-size-border-radius-dense);
|
|
104
|
+
}
|
|
105
|
+
.ids-accordion.ids-accordion-dense > .ids-accordion-summary {
|
|
106
|
+
height: var(--ids-comp-size-accordion-summary-size-height-dense);
|
|
107
|
+
padding: var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense);
|
|
108
|
+
gap: var(--ids-comp-size-accordion-summary-size-gap-dense);
|
|
109
|
+
border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-dense);
|
|
110
|
+
border-width: var(--ids-comp-size-accordion-summary-size-border-width-dense);
|
|
111
|
+
}
|
|
112
|
+
.ids-accordion.ids-accordion-dense > .ids-accordion-content {
|
|
113
|
+
padding: var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);
|
|
114
|
+
gap: var(--ids-comp-size-accordion-details-size-gap-dense);
|
|
115
|
+
}
|
|
116
|
+
.ids-accordion.ids-accordion-text > .ids-accordion-summary {
|
|
117
|
+
background: var(--ids-comp-accordion-summary-text-color-bg-enabled);
|
|
118
|
+
border-color: var(--ids-comp-accordion-summary-text-color-border-enabled);
|
|
119
|
+
color: var(--ids-comp-accordion-summary-text-color-fg-label-enabled);
|
|
120
|
+
}
|
|
121
|
+
.ids-accordion.ids-accordion-text > .ids-accordion-summary:hover {
|
|
122
|
+
background: var(--ids-comp-accordion-summary-text-color-bg-hovered);
|
|
123
|
+
border-color: var(--ids-comp-accordion-summary-text-color-border-hovered);
|
|
124
|
+
color: var(--ids-comp-accordion-summary-text-color-fg-label-hovered);
|
|
125
|
+
}
|
|
126
|
+
.ids-accordion.ids-accordion-text > .ids-accordion-summary:focus {
|
|
127
|
+
background: var(--ids-comp-accordion-summary-text-color-bg-focused);
|
|
128
|
+
border-color: var(--ids-comp-accordion-summary-text-color-border-focused);
|
|
129
|
+
color: var(--ids-comp-accordion-summary-text-color-fg-label-focused);
|
|
130
|
+
}
|
|
131
|
+
.ids-accordion.ids-accordion-text > .ids-accordion-summary:active {
|
|
132
|
+
background: var(--ids-comp-accordion-summary-text-color-bg-pressed);
|
|
133
|
+
border-color: var(--ids-comp-accordion-summary-text-color-border-pressed);
|
|
134
|
+
color: var(--ids-comp-accordion-summary-text-color-fg-label-pressed);
|
|
135
|
+
}
|
|
136
|
+
.ids-accordion.ids-accordion-text.ids-accordion-disabled > .ids-accordion-summary {
|
|
137
|
+
background: var(--ids-comp-accordion-summary-text-color-bg-disabled);
|
|
138
|
+
border-color: var(--ids-comp-accordion-summary-text-color-border-disabled);
|
|
139
|
+
color: var(--ids-comp-accordion-summary-text-color-fg-label-disabled);
|
|
140
|
+
}
|
|
141
|
+
.ids-accordion.ids-accordion-filled > .ids-accordion-summary {
|
|
142
|
+
background: var(--ids-comp-accordion-summary-filled-color-bg-enabled);
|
|
143
|
+
border-color: var(--ids-comp-accordion-summary-filled-color-border-enabled);
|
|
144
|
+
color: var(--ids-comp-accordion-summary-filled-color-fg-label-enabled);
|
|
145
|
+
}
|
|
146
|
+
.ids-accordion.ids-accordion-filled > .ids-accordion-summary:hover {
|
|
147
|
+
background: var(--ids-comp-accordion-summary-filled-color-bg-hovered);
|
|
148
|
+
border-color: var(--ids-comp-accordion-summary-filled-color-border-hovered);
|
|
149
|
+
color: var(--ids-comp-accordion-summary-filled-color-fg-label-hovered);
|
|
150
|
+
}
|
|
151
|
+
.ids-accordion.ids-accordion-filled > .ids-accordion-summary:focus {
|
|
152
|
+
background: var(--ids-comp-accordion-summary-filled-color-bg-focused);
|
|
153
|
+
border-color: var(--ids-comp-accordion-summary-filled-color-border-focused);
|
|
154
|
+
color: var(--ids-comp-accordion-summary-filled-color-fg-label-focused);
|
|
155
|
+
}
|
|
156
|
+
.ids-accordion.ids-accordion-filled > .ids-accordion-summary:active {
|
|
157
|
+
background: var(--ids-comp-accordion-summary-filled-color-bg-pressed);
|
|
158
|
+
border-color: var(--ids-comp-accordion-summary-filled-color-border-pressed);
|
|
159
|
+
color: var(--ids-comp-accordion-summary-filled-color-fg-label-pressed);
|
|
160
|
+
}
|
|
161
|
+
.ids-accordion.ids-accordion-filled.ids-accordion-disabled > .ids-accordion-summary {
|
|
162
|
+
background: var(--ids-comp-accordion-summary-filled-color-bg-disabled);
|
|
163
|
+
border-color: var(--ids-comp-accordion-summary-filled-color-border-disabled);
|
|
164
|
+
color: var(--ids-comp-accordion-summary-filled-color-fg-label-disabled);
|
|
165
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ids-accordion{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:var(--ids-comp-accordion-item-color-bg-enabled)}.ids-accordion>.ids-accordion-summary{display:flex;align-items:center;width:100%;border-style:solid;cursor:pointer}.ids-accordion>.ids-accordion-summary:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline);outline-color:var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)}.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus{outline-color:var(--ids-comp-accordion-summary-focused-outline-color-light-focused)}.ids-accordion>.ids-accordion-summary>.ids-accordion-title{flex:1 0 0;overflow:hidden;text-overflow:ellipsis}.ids-accordion.ids-accordion-disabled>.ids-accordion-summary{pointer-events:none;user-select:none}.ids-accordion.ids-accordion-dense .ids-accordion-title,.ids-accordion.ids-accordion-compact .ids-accordion-title{font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.ids-accordion.ids-accordion-comfortable .ids-accordion-title,.ids-accordion.ids-accordion-spacious .ids-accordion-title{font-size:16px;font-style:normal;font-weight:600;line-height:20px;letter-spacing:.1px}.ids-accordion>.ids-accordion-content{display:flex;flex-direction:column;background:var(--ids-comp-accordion-details-color-bg-enabled)}.ids-accordion.ids-accordion-compact{padding:var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact);gap:var(--ids-comp-size-accordion-item-size-gap-compact);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-compact);padding:var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact);gap:var(--ids-comp-size-accordion-summary-size-gap-compact);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-compact);border-width:var(--ids-comp-size-accordion-summary-size-border-width-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);gap:var(--ids-comp-size-accordion-details-size-gap-compact)}.ids-accordion.ids-accordion-comfortable{padding:var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-item-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-comfortable);padding:var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-summary-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);border-width:var(--ids-comp-size-accordion-summary-size-border-width-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-details-size-gap-comfortable)}.ids-accordion.ids-accordion-spacious{padding:var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-item-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-spacious);padding:var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-summary-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-spacious);border-width:var(--ids-comp-size-accordion-summary-size-border-width-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-details-size-gap-spacious)}.ids-accordion.ids-accordion-dense{padding:var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense);gap:var(--ids-comp-size-accordion-item-size-gap-dense);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-dense);padding:var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense);gap:var(--ids-comp-size-accordion-summary-size-gap-dense);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-dense);border-width:var(--ids-comp-size-accordion-summary-size-border-width-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);gap:var(--ids-comp-size-accordion-details-size-gap-dense)}.ids-accordion.ids-accordion-text>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-text-color-border-enabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-enabled)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-text-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-text-color-border-hovered);color:var(--ids-comp-accordion-summary-text-color-fg-label-hovered)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-text-color-bg-focused);border-color:var(--ids-comp-accordion-summary-text-color-border-focused);color:var(--ids-comp-accordion-summary-text-color-fg-label-focused)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-text-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-text-color-border-pressed);color:var(--ids-comp-accordion-summary-text-color-fg-label-pressed)}.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-text-color-border-disabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-disabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-enabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-filled-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-filled-color-border-hovered);color:var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-filled-color-bg-focused);border-color:var(--ids-comp-accordion-summary-filled-color-border-focused);color:var(--ids-comp-accordion-summary-filled-color-fg-label-focused)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-filled-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-filled-color-border-pressed);color:var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)}.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-disabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
.ids-action-item {
|
|
2
|
+
width: 100%;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
flex-shrink: 0;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
}
|
|
8
|
+
.ids-action-item .ids-action-item-label {
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
text-overflow: ellipsis;
|
|
11
|
+
font-style: normal;
|
|
12
|
+
}
|
|
13
|
+
.ids-action-item.ids-action-item-compact {
|
|
14
|
+
font-size: 12px;
|
|
15
|
+
line-height: 16px;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
}
|
|
18
|
+
.ids-action-item.ids-action-item-comfortable {
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
line-height: 24px;
|
|
21
|
+
font-weight: 500;
|
|
22
|
+
}
|
|
23
|
+
.ids-action-item.ids-action-item-spacious {
|
|
24
|
+
font-size: 16px;
|
|
25
|
+
line-height: 20px;
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
}
|
|
28
|
+
.ids-action-item *[icon-leading],
|
|
29
|
+
.ids-action-item *[icon-trailing] {
|
|
30
|
+
gap: 10px;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
}
|
|
35
|
+
.ids-action-item.ids-action-item-compact {
|
|
36
|
+
gap: var(--ids-comp-size-action-item-size-gap-compact);
|
|
37
|
+
border-radius: var(--ids-comp-size-action-item-size-border-radius-compact);
|
|
38
|
+
padding: var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);
|
|
39
|
+
height: var(--ids-comp-size-action-item-size-height-compact);
|
|
40
|
+
}
|
|
41
|
+
.ids-action-item.ids-action-item-compact *[icon-leading],
|
|
42
|
+
.ids-action-item.ids-action-item-compact *[icon-trailing] {
|
|
43
|
+
width: var(--ids-comp-action-item-size-compact-icon);
|
|
44
|
+
height: var(--ids-comp-action-item-size-compact-icon);
|
|
45
|
+
}
|
|
46
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface {
|
|
47
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
48
|
+
}
|
|
49
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover {
|
|
50
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
51
|
+
}
|
|
52
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled {
|
|
53
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
54
|
+
}
|
|
55
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface {
|
|
56
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
57
|
+
}
|
|
58
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover {
|
|
59
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
60
|
+
}
|
|
61
|
+
.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled {
|
|
62
|
+
border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
63
|
+
}
|
|
64
|
+
.ids-action-item.ids-action-item-comfortable {
|
|
65
|
+
gap: var(--ids-comp-size-action-item-size-gap-comfortable);
|
|
66
|
+
border-radius: var(--ids-comp-size-action-item-size-border-radius-comfortable);
|
|
67
|
+
padding: var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);
|
|
68
|
+
height: var(--ids-comp-size-action-item-size-height-comfortable);
|
|
69
|
+
}
|
|
70
|
+
.ids-action-item.ids-action-item-comfortable *[icon-leading],
|
|
71
|
+
.ids-action-item.ids-action-item-comfortable *[icon-trailing] {
|
|
72
|
+
width: var(--ids-comp-action-item-size-comfortable-icon);
|
|
73
|
+
height: var(--ids-comp-action-item-size-comfortable-icon);
|
|
74
|
+
}
|
|
75
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface {
|
|
76
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
77
|
+
}
|
|
78
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover {
|
|
79
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
80
|
+
}
|
|
81
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled {
|
|
82
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
83
|
+
}
|
|
84
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface {
|
|
85
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
86
|
+
}
|
|
87
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover {
|
|
88
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
89
|
+
}
|
|
90
|
+
.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled {
|
|
91
|
+
border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
92
|
+
}
|
|
93
|
+
.ids-action-item.ids-action-item-spacious {
|
|
94
|
+
gap: var(--ids-comp-size-action-item-size-gap-spacious);
|
|
95
|
+
border-radius: var(--ids-comp-size-action-item-size-border-radius-spacious);
|
|
96
|
+
padding: var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);
|
|
97
|
+
height: var(--ids-comp-size-action-item-size-height-spacious);
|
|
98
|
+
}
|
|
99
|
+
.ids-action-item.ids-action-item-spacious *[icon-leading],
|
|
100
|
+
.ids-action-item.ids-action-item-spacious *[icon-trailing] {
|
|
101
|
+
width: var(--ids-comp-action-item-size-spacious-icon);
|
|
102
|
+
height: var(--ids-comp-action-item-size-spacious-icon);
|
|
103
|
+
}
|
|
104
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface {
|
|
105
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
106
|
+
}
|
|
107
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover {
|
|
108
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
109
|
+
}
|
|
110
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled {
|
|
111
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
112
|
+
}
|
|
113
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface {
|
|
114
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
|
|
115
|
+
}
|
|
116
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover {
|
|
117
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
|
|
118
|
+
}
|
|
119
|
+
.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled {
|
|
120
|
+
border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
|
|
121
|
+
}
|
|
122
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface {
|
|
123
|
+
color: var(--ids-comp-action-item-text-color-fg-label-surface-enabled);
|
|
124
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-enabled);
|
|
125
|
+
}
|
|
126
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active {
|
|
127
|
+
color: var(--ids-comp-action-item-text-color-fg-label-surface-active);
|
|
128
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-active);
|
|
129
|
+
}
|
|
130
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface:hover {
|
|
131
|
+
color: var(--ids-comp-action-item-text-color-fg-label-surface-hovered);
|
|
132
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-hovered);
|
|
133
|
+
}
|
|
134
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface:focus {
|
|
135
|
+
color: var(--ids-comp-action-item-text-color-fg-label-surface-focused);
|
|
136
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-focused);
|
|
137
|
+
}
|
|
138
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface:active {
|
|
139
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-pressed);
|
|
140
|
+
}
|
|
141
|
+
.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled {
|
|
142
|
+
color: var(--ids-comp-action-item-text-color-fg-label-surface-disabled);
|
|
143
|
+
background: var(--ids-comp-action-item-text-color-bg-surface-disabled);
|
|
144
|
+
}
|
|
145
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface {
|
|
146
|
+
color: var(--ids-comp-action-item-filled-color-fg-label-surface-enabled);
|
|
147
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-enabled);
|
|
148
|
+
}
|
|
149
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active {
|
|
150
|
+
color: var(--ids-comp-action-item-filled-color-fg-label-surface-active);
|
|
151
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-active);
|
|
152
|
+
}
|
|
153
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover {
|
|
154
|
+
color: var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);
|
|
155
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-hovered);
|
|
156
|
+
}
|
|
157
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus {
|
|
158
|
+
color: var(--ids-comp-action-item-filled-color-fg-label-surface-focused);
|
|
159
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-focused);
|
|
160
|
+
}
|
|
161
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface:active {
|
|
162
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-pressed);
|
|
163
|
+
}
|
|
164
|
+
.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled {
|
|
165
|
+
color: var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);
|
|
166
|
+
background: var(--ids-comp-action-item-filled-color-bg-surface-disabled);
|
|
167
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item.ids-action-item-compact{font-size:12px;line-height:16px;font-weight:500}.ids-action-item.ids-action-item-comfortable{font-size:16px;line-height:24px;font-weight:500}.ids-action-item.ids-action-item-spacious{font-size:16px;line-height:20px;font-weight:600}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-size-action-item-size-gap-compact);border-radius:var(--ids-comp-size-action-item-size-border-radius-compact);padding:var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);height:var(--ids-comp-size-action-item-size-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-compact-icon);height:var(--ids-comp-action-item-size-compact-icon)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-size-action-item-size-gap-comfortable);border-radius:var(--ids-comp-size-action-item-size-border-radius-comfortable);padding:var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);height:var(--ids-comp-size-action-item-size-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-comfortable-icon);height:var(--ids-comp-action-item-size-comfortable-icon)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-size-action-item-size-gap-spacious);border-radius:var(--ids-comp-size-action-item-size-border-radius-spacious);padding:var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);height:var(--ids-comp-size-action-item-size-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-spacious-icon);height:var(--ids-comp-action-item-size-spacious-icon)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-text-color-bg-surface-enabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-filled-color-bg-surface-enabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
.ids-action-panel {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: 22.25rem;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
align-items: flex-start;
|
|
6
|
+
}
|
|
7
|
+
.ids-action-panel.ids-action-panel-compact {
|
|
8
|
+
gap: var(--ids-comp-size-action-panel-size-gap-compact, 0.5rem);
|
|
9
|
+
padding: var(--ids-comp-size-action-panel-size-padding-y-compact, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-compact, 0.5rem);
|
|
10
|
+
border-radius: var(--ids-comp-size-action-panel-size-border-radius-compact, 1rem);
|
|
11
|
+
}
|
|
12
|
+
.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined {
|
|
13
|
+
border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
|
|
14
|
+
}
|
|
15
|
+
.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined {
|
|
16
|
+
border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
|
|
17
|
+
}
|
|
18
|
+
.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined {
|
|
19
|
+
border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
|
|
20
|
+
}
|
|
21
|
+
.ids-action-panel.ids-action-panel-comfortable {
|
|
22
|
+
gap: var(--ids-comp-size-action-panel-size-gap-comfortable, 0.5rem);
|
|
23
|
+
padding: var(--ids-comp-size-action-panel-size-padding-y-comfortable, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-comfortable, 0.5rem);
|
|
24
|
+
border-radius: var(--ids-comp-size-action-panel-size-border-radius-comfortable, 1rem);
|
|
25
|
+
}
|
|
26
|
+
.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined {
|
|
27
|
+
border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
|
|
28
|
+
}
|
|
29
|
+
.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined {
|
|
30
|
+
border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
|
|
31
|
+
}
|
|
32
|
+
.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined {
|
|
33
|
+
border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
|
|
34
|
+
}
|
|
35
|
+
.ids-action-panel.ids-action-panel-spacious {
|
|
36
|
+
gap: var(--ids-comp-size-action-panel-size-gap-spacious, 0.5rem);
|
|
37
|
+
padding: var(--ids-comp-size-action-panel-size-padding-y-spacious, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-spacious, 0.5rem);
|
|
38
|
+
border-radius: var(--ids-comp-size-action-panel-size-border-radius-spacious, 1rem);
|
|
39
|
+
}
|
|
40
|
+
.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined {
|
|
41
|
+
border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
|
|
42
|
+
}
|
|
43
|
+
.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined {
|
|
44
|
+
border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
|
|
45
|
+
}
|
|
46
|
+
.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined {
|
|
47
|
+
border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
|
|
48
|
+
}
|
|
49
|
+
.ids-action-panel.ids-action-panel-dense {
|
|
50
|
+
gap: var(--ids-comp-size-action-panel-size-gap-dense, 0.5rem);
|
|
51
|
+
padding: var(--ids-comp-size-action-panel-size-padding-y-dense, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-dense, 0.5rem);
|
|
52
|
+
border-radius: var(--ids-comp-size-action-panel-size-border-radius-dense, 1rem);
|
|
53
|
+
}
|
|
54
|
+
.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined {
|
|
55
|
+
border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
|
|
56
|
+
}
|
|
57
|
+
.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined {
|
|
58
|
+
border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
|
|
59
|
+
}
|
|
60
|
+
.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined {
|
|
61
|
+
border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
|
|
62
|
+
}
|
|
63
|
+
.ids-action-panel.ids-action-panel-filled {
|
|
64
|
+
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
65
|
+
}
|
|
66
|
+
.ids-action-panel.ids-action-panel-outlined {
|
|
67
|
+
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
|
|
68
|
+
}
|
|
69
|
+
.ids-action-panel.ids-action-panel-elevated {
|
|
70
|
+
box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-darker);
|
|
71
|
+
}
|
|
72
|
+
.ids-action-panel.ids-action-panel-filled {
|
|
73
|
+
background: var(--ids-comp-action-panel-filled-color-bg-light-enabled);
|
|
74
|
+
}
|
|
75
|
+
.ids-action-panel.ids-action-panel-outlined {
|
|
76
|
+
background: var(--ids-comp-action-panel-outlined-color-bg-light-enabled);
|
|
77
|
+
}
|
|
78
|
+
.ids-action-panel.ids-action-panel-elevated {
|
|
79
|
+
background: var(--ids-comp-action-panel-elevated-color-bg-light-enabled);
|
|
80
|
+
}
|
|
81
|
+
.ids-action-panel button:hover {
|
|
82
|
+
border-color: transparent;
|
|
83
|
+
}
|
|
84
|
+
.ids-action-panel button:focus {
|
|
85
|
+
outline: none !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel) {
|
|
89
|
+
@apply py-3;
|
|
90
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ids-action-panel{display:flex;width:22.25rem;flex-direction:column;align-items:flex-start}.ids-action-panel.ids-action-panel-compact{gap:var(--ids-comp-size-action-panel-size-gap-compact, 0.5rem);padding:var(--ids-comp-size-action-panel-size-padding-y-compact, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-compact, 0.5rem);border-radius:var(--ids-comp-size-action-panel-size-border-radius-compact, 1rem)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)}.ids-action-panel.ids-action-panel-comfortable{gap:var(--ids-comp-size-action-panel-size-gap-comfortable, 0.5rem);padding:var(--ids-comp-size-action-panel-size-padding-y-comfortable, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-comfortable, 0.5rem);border-radius:var(--ids-comp-size-action-panel-size-border-radius-comfortable, 1rem)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)}.ids-action-panel.ids-action-panel-spacious{gap:var(--ids-comp-size-action-panel-size-gap-spacious, 0.5rem);padding:var(--ids-comp-size-action-panel-size-padding-y-spacious, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-spacious, 0.5rem);border-radius:var(--ids-comp-size-action-panel-size-border-radius-spacious, 1rem)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)}.ids-action-panel.ids-action-panel-dense{gap:var(--ids-comp-size-action-panel-size-gap-dense, 0.5rem);padding:var(--ids-comp-size-action-panel-size-padding-y-dense, 0.5rem) var(--ids-comp-size-action-panel-size-padding-x-dense, 0.5rem);border-radius:var(--ids-comp-size-action-panel-size-border-radius-dense, 1rem)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)}.ids-action-panel.ids-action-panel-filled{box-shadow:0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)}.ids-action-panel.ids-action-panel-outlined{box-shadow:0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)}.ids-action-panel.ids-action-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-darker)}.ids-action-panel.ids-action-panel-filled{background:var(--ids-comp-action-panel-filled-color-bg-light-enabled)}.ids-action-panel.ids-action-panel-outlined{background:var(--ids-comp-action-panel-outlined-color-bg-light-enabled)}.ids-action-panel.ids-action-panel-elevated{background:var(--ids-comp-action-panel-elevated-color-bg-light-enabled)}.ids-action-panel button:hover{border-color:rgba(0,0,0,0)}.ids-action-panel button:focus{outline:none !important}.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel){@apply py-3}
|