@c8y/style 1022.44.3 → 1022.45.2

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 (3) hide show
  1. package/package.json +1 -1
  2. package/styles/_asset-property-list.less +166 -143
  3. package/styles/_cdk-tree.less +13 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1022.44.3",
3
+ "version": "1022.45.2",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/styles/_asset-property-list.less CHANGED
@@ -1,185 +1,208 @@
1
- .cdk-tree{
2
- background: inherit;
3
- max-width: 100%;
4
- display: block;
5
- overflow: hidden;
6
- }
7
- .cdk-tree-node{
8
- height: 40px;
9
- background: inherit;
10
- }
11
-
12
-
13
- .cdk-tree-node > .d-flex::before {
14
- position: absolute;
15
- content: '';
16
- top: 0;
17
- left: -6px;
18
- width: 20px;
19
- bottom: 0;
20
- display: block;
21
- border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
22
- z-index: 1;
23
- }
24
- .cdk-tree-node:last-of-type > .d-flex::before {
25
- bottom: 50%;
26
- }
27
- .cdk-tree-node:not([aria-level="1"]){
28
- > .d-flex::after {
29
- content: '';
30
- top: 50%;
31
- left: -6px;
32
- width: 20px;
33
- /* bottom: 0; */
1
+ c8y-asset-property-list {
2
+ .cdk-tree {
3
+ background: inherit;
4
+ max-width: 100%;
34
5
  display: block;
35
- border-bottom: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
36
- z-index: 1;
37
- position: absolute;
38
- pointer-events: none;
6
+ overflow: hidden;
39
7
  }
40
- &.nonSelectable{
41
- > .d-flex::after {
42
- width: 40px;
43
- }
8
+ .cdk-tree-node {
9
+ height: 40px;
10
+ background: inherit;
44
11
  }
45
- }
46
- .cdk-tree-node[aria-level]:not([aria-level="1"]):not([aria-level="2"]){
47
- position: relative;
48
- &::after {
12
+
13
+ .cdk-tree-node > .d-flex::before {
49
14
  position: absolute;
50
15
  content: '';
51
16
  top: 0;
52
- left: 18px;
17
+ left: -6px;
53
18
  width: 20px;
54
19
  bottom: 0;
55
20
  display: block;
56
- border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
21
+ border-left: 1px solid
22
+ var(
23
+ --c8y-component-icon-dark-color-light,
24
+ var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
25
+ );
57
26
  z-index: 1;
58
27
  }
59
- &[aria-level="4"]{
60
- &::before{
28
+ .cdk-tree-node:last-of-type > .d-flex::before {
29
+ bottom: 50%;
30
+ }
31
+ .cdk-tree-node:not([aria-level='1']) {
32
+ > .d-flex::after {
33
+ content: '';
34
+ top: 50%;
35
+ left: -6px;
36
+ width: 20px;
37
+ /* bottom: 0; */
38
+ display: block;
39
+ border-bottom: 1px solid
40
+ var(
41
+ --c8y-component-icon-dark-color-light,
42
+ var(
43
+ --c8y-root-component-icon-dark-color-light,
44
+ var(--brand-light, var(--c8y-brand-light))
45
+ )
46
+ );
47
+ z-index: 1;
48
+ position: absolute;
49
+ pointer-events: none;
50
+ }
51
+ &.nonSelectable {
52
+ > .d-flex::after {
53
+ width: 40px;
54
+ }
55
+ }
56
+ }
57
+ .cdk-tree-node[aria-level]:not([aria-level='1']):not([aria-level='2']) {
58
+ position: relative;
59
+ &::after {
61
60
  position: absolute;
62
61
  content: '';
63
62
  top: 0;
64
- left: 42px;
63
+ left: 18px;
65
64
  width: 20px;
66
65
  bottom: 0;
67
66
  display: block;
68
- border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
67
+ border-left: 1px solid
68
+ var(
69
+ --c8y-component-icon-dark-color-light,
70
+ var(
71
+ --c8y-root-component-icon-dark-color-light,
72
+ var(--brand-light, var(--c8y-brand-light))
73
+ )
74
+ );
69
75
  z-index: 1;
70
76
  }
77
+ &[aria-level='4'] {
78
+ &::before {
79
+ position: absolute;
80
+ content: '';
81
+ top: 0;
82
+ left: 42px;
83
+ width: 20px;
84
+ bottom: 0;
85
+ display: block;
86
+ border-left: 1px solid
87
+ var(
88
+ --c8y-component-icon-dark-color-light,
89
+ var(
90
+ --c8y-root-component-icon-dark-color-light,
91
+ var(--brand-light, var(--c8y-brand-light))
92
+ )
93
+ );
94
+ z-index: 1;
95
+ }
96
+ }
71
97
  }
72
- }
73
- .cdk-tree-node.nonCollapsible:not([aria-level="1"]){
74
- > .d-flex::before{
75
- left: -5px;
76
- }
77
- > .d-flex::after{
78
- width: 14px;
79
- left: -5px;
80
- }
81
-
82
- &.nonSelectable{
83
- > .d-flex::before{
84
- left: 0;
98
+ .cdk-tree-node.nonCollapsible:not([aria-level='1']) {
99
+ > .d-flex::before {
100
+ left: -5px;
101
+ }
102
+ > .d-flex::after {
103
+ width: 14px;
104
+ left: -5px;
85
105
  }
86
- > .d-flex::after{
87
- width: 10px;
88
- left: 0;
106
+
107
+ &.nonSelectable {
108
+ > .d-flex::before {
109
+ left: 0;
110
+ }
111
+ > .d-flex::after {
112
+ width: 10px;
113
+ left: 0;
114
+ }
89
115
  }
90
116
  }
91
- }
92
- .cdk-tree-node[aria-level="1"] > .d-flex::before {
93
- display: none;
94
- }
95
-
96
- .cdk-tree-node[aria-level="1"]{
97
- overflow: visible;
98
- }
117
+ .cdk-tree-node[aria-level='1'] > .d-flex::before {
118
+ display: none;
119
+ }
99
120
 
100
- .cdk-tree-node{
101
- .c8y-list__item__check,
102
- .c8y-list__item__radio{
103
- z-index: 4;
121
+ .cdk-tree-node[aria-level='1'] {
122
+ overflow: visible;
104
123
  }
105
- &[aria-level="1"],
106
- &[aria-level="2"],
107
- &[aria-level="3"]{
108
- &:before {
109
- content: '';
110
- background: inherit;
111
- width: 48px;
112
- height: 100%;
113
- position: absolute;
114
- left: 0;
115
- bottom: calc(50% - 1px);
116
- z-index: 3;
117
- pointer-events: none;
124
+
125
+ .cdk-tree-node {
126
+ .c8y-list__item__check,
127
+ .c8y-list__item__radio {
128
+ z-index: 4;
118
129
  }
119
- &.nonCollapsible{
120
- &::before{
121
- width: 21px;
122
- bottom: calc(100% - 1px);
123
- height: 50%;
130
+ &[aria-level='1'],
131
+ &[aria-level='2'],
132
+ &[aria-level='3'] {
133
+ &:before {
134
+ content: '';
135
+ background: inherit;
136
+ width: 48px;
137
+ height: 100%;
138
+ position: absolute;
139
+ left: 0;
140
+ bottom: calc(50% - 1px);
141
+ z-index: 3;
142
+ pointer-events: none;
124
143
  }
125
- + .cdk-tree-node[aria-level="1"]{
126
- &::before{
127
- background: transparent;
144
+ &.nonCollapsible {
145
+ &::before {
146
+ width: 21px;
147
+ bottom: calc(100% - 1px);
148
+ height: 50%;
149
+ }
150
+ + .cdk-tree-node[aria-level='1'] {
151
+ &::before {
152
+ background: transparent;
153
+ }
128
154
  }
129
155
  }
130
156
  }
131
- }
132
- &[aria-level="2"]{
133
- &::before{
134
- left: 24px;
135
- z-index: 1;
136
- }
137
- &.nonCollapsible{
138
- + .cdk-tree-node[aria-level="2"]{
139
- &::before{
140
- background: transparent;
157
+ &[aria-level='2'] {
158
+ &::before {
159
+ left: 24px;
160
+ z-index: 1;
161
+ }
162
+ &.nonCollapsible {
163
+ + .cdk-tree-node[aria-level='2'] {
164
+ &::before {
165
+ background: transparent;
166
+ }
141
167
  }
142
168
  }
143
169
  }
144
- }
145
- &[aria-level="3"]{
146
- &::before{
147
- left: 48px;
148
- z-index: 1;
149
- }
150
- &.nonCollapsible{
151
- + .cdk-tree-node[aria-level="3"]{
152
- &::before{
153
- background: transparent;
170
+ &[aria-level='3'] {
171
+ &::before {
172
+ left: 48px;
173
+ z-index: 1;
174
+ }
175
+ &.nonCollapsible {
176
+ + .cdk-tree-node[aria-level='3'] {
177
+ &::before {
178
+ background: transparent;
179
+ }
154
180
  }
155
181
  }
156
182
  }
157
183
  }
158
- }
159
-
160
- .cdk-tree-node .collapse-btn{
161
- background-color: inherit;
162
- position: relative;
163
- z-index: 4;
164
- }
165
-
166
184
 
185
+ .cdk-tree-node .collapse-btn {
186
+ background-color: inherit;
187
+ position: relative;
188
+ z-index: 4;
189
+ }
167
190
 
168
- .cdk-tree-node .c8y-list__item__radio{
169
- padding-top: 7px!important;
170
- padding-bottom: 7px!important;
171
- max-height: 40px!important;
172
- min-height: unset!important;
173
- }
174
- .cdk-tree-node .c8y-list__item__icon{
175
- padding-top: 7px;
176
- padding-bottom: 7px;
177
- z-index: 2;
178
- }
179
-
191
+ .cdk-tree-node .c8y-list__item__radio {
192
+ padding-top: 7px !important;
193
+ padding-bottom: 7px !important;
194
+ max-height: 40px !important;
195
+ min-height: unset !important;
196
+ }
197
+ .cdk-tree-node .c8y-list__item__icon {
198
+ padding-top: 7px;
199
+ padding-bottom: 7px;
200
+ z-index: 2;
201
+ }
180
202
 
181
- c8y-asset-property-list:has(.asset-property-list__actions.has-computed) {
182
- .asset-property-list__actions{
183
- min-width: 96px
203
+ c8y-asset-property-list:has(.asset-property-list__actions.has-computed) {
204
+ .asset-property-list__actions {
205
+ min-width: 96px;
206
+ }
184
207
  }
185
208
  }
package/styles/_cdk-tree.less CHANGED
@@ -18,17 +18,26 @@
18
18
  &:before {
19
19
  position: absolute;
20
20
  top: 0;
21
- bottom: 1px;
21
+ bottom: 0;
22
22
  left: 7px;
23
- border-left: 1px dotted @gray-80;
23
+ border-left: 1px solid var(
24
+ --c8y-component-icon-dark-color-light,
25
+ var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
26
+ );;
24
27
  content: '';
25
28
  }
29
+ &:last-child:before {
30
+ bottom: 9px
31
+ }
26
32
  &:after {
27
33
  position: absolute;
28
34
  top: 10px;
29
35
  left: 7px;
30
- width: 10px;
31
- border-top: 1px dotted @gray-80;
36
+ width: 8px;
37
+ border-top: 1px solid var(
38
+ --c8y-component-icon-dark-color-light,
39
+ var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
40
+ );
32
41
  content: '';
33
42
  }
34
43
  > span {