@c8y/style 1022.21.3 → 1022.27.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 +1 -1
- package/styles/_ace-editor.less +11 -0
- package/styles/_alerts.less +2 -1
- package/styles/_asset-property-list.less +116 -0
- package/styles/_input-groups.less +29 -4
- package/styles/_search-header.less +8 -4
- package/styles/index.less +1 -0
- package/styles/utilities/_text-utils.less +13 -0
- package/variables/_brand-vars.less +0 -23
package/package.json
CHANGED
package/styles/_ace-editor.less
CHANGED
|
@@ -11,3 +11,14 @@ body .ace_editor * {
|
|
|
11
11
|
min-height: 350px;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
.ace-monokai .ace_marker-layer{
|
|
17
|
+
.ace_selected-word{
|
|
18
|
+
border-bottom: 2px solid yellow !important;
|
|
19
|
+
}
|
|
20
|
+
.ace_selection{
|
|
21
|
+
background-color: rgba(255, 255, 0, 0.25) !important;
|
|
22
|
+
border: 1px solid yellow !important;
|
|
23
|
+
}
|
|
24
|
+
}
|
package/styles/_alerts.less
CHANGED
|
@@ -201,7 +201,8 @@
|
|
|
201
201
|
justify-content: center;
|
|
202
202
|
width: 100%;
|
|
203
203
|
height: 100%;
|
|
204
|
-
background-color: color-mix(in srgb, var(--c8y-root-component-background-default),
|
|
204
|
+
background-color: color-mix(in srgb, var(--c8y-root-component-background-default), transparent 50%);
|
|
205
|
+
backdrop-filter: blur(3px);
|
|
205
206
|
}
|
|
206
207
|
|
|
207
208
|
// prevent double scroll bars on widgets when the alerts overlay is displayed
|
|
@@ -0,0 +1,116 @@
|
|
|
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; */
|
|
34
|
+
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;
|
|
39
|
+
}
|
|
40
|
+
&.nonSelectable{
|
|
41
|
+
> .d-flex::after {
|
|
42
|
+
width: 40px;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
.cdk-tree-node.nonCollapsible:not([aria-level="1"]){
|
|
47
|
+
> .d-flex::before{
|
|
48
|
+
left: -5px;
|
|
49
|
+
}
|
|
50
|
+
> .d-flex::after{
|
|
51
|
+
width: 14px;
|
|
52
|
+
left: -5px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.nonSelectable{
|
|
56
|
+
> .d-flex::before{
|
|
57
|
+
left: 0;
|
|
58
|
+
}
|
|
59
|
+
> .d-flex::after{
|
|
60
|
+
width: 10px;
|
|
61
|
+
left: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
.cdk-tree-node[aria-level="1"] > .d-flex::before {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.cdk-tree-node[aria-level="1"]{
|
|
70
|
+
overflow: visible;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.cdk-tree-node[aria-level="1"]{
|
|
74
|
+
&:before {
|
|
75
|
+
content: '';
|
|
76
|
+
background: inherit;
|
|
77
|
+
width: 40px;
|
|
78
|
+
height: 100%;
|
|
79
|
+
position: absolute;
|
|
80
|
+
left: 0;
|
|
81
|
+
bottom: calc(50% - 1px);
|
|
82
|
+
z-index: 3;
|
|
83
|
+
pointer-events: none;
|
|
84
|
+
}
|
|
85
|
+
&.nonCollapsible{
|
|
86
|
+
&::before{
|
|
87
|
+
width: 21px;
|
|
88
|
+
bottom: calc(100% - 1px);
|
|
89
|
+
height: 50%;
|
|
90
|
+
}
|
|
91
|
+
+ .cdk-tree-node[aria-level="1"]{
|
|
92
|
+
&::before{
|
|
93
|
+
background: transparent;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.cdk-tree-node .collapse-btn{
|
|
100
|
+
background-color: inherit;
|
|
101
|
+
position: relative;
|
|
102
|
+
z-index: 4;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
.cdk-tree-node .c8y-list__item__radio{
|
|
108
|
+
padding-top: 7px!important;
|
|
109
|
+
padding-bottom: 7px!important;
|
|
110
|
+
max-height: 40px!important;
|
|
111
|
+
min-height: unset!important;
|
|
112
|
+
}
|
|
113
|
+
.cdk-tree-node .c8y-list__item__icon{
|
|
114
|
+
padding-top: 7px;
|
|
115
|
+
padding-bottom: 7px;
|
|
116
|
+
}
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
&,
|
|
140
140
|
&:first-child,
|
|
141
141
|
&:last-child {
|
|
142
|
-
padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal);
|
|
142
|
+
padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal)!important;
|
|
143
143
|
padding-left: calc(@form-control-padding-base-horizontal * 2);
|
|
144
144
|
border-radius: calc(@form-control-height-base * 0.5);
|
|
145
145
|
}
|
|
@@ -151,7 +151,16 @@
|
|
|
151
151
|
padding: @form-control-padding-large-vertical calc(@form-control-padding-large-horizontal * 2);
|
|
152
152
|
border-radius: @form-control-height-base;
|
|
153
153
|
font-size: @font-size-large;
|
|
154
|
-
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&:has(.input-group-btn > .btn + .btn){
|
|
158
|
+
.form-control {
|
|
159
|
+
&,
|
|
160
|
+
&:first-child,
|
|
161
|
+
&:last-child {
|
|
162
|
+
padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal * 4)!important;
|
|
163
|
+
}
|
|
155
164
|
}
|
|
156
165
|
}
|
|
157
166
|
|
|
@@ -179,14 +188,14 @@
|
|
|
179
188
|
|
|
180
189
|
}
|
|
181
190
|
|
|
182
|
-
&.input-group-sm {
|
|
191
|
+
&.input-group-sm, .input-group-sm & {
|
|
183
192
|
.form-control:not(.c8y-radio):not(.c8y-checkbox) {
|
|
184
193
|
padding-left: 12px;
|
|
185
194
|
}
|
|
186
195
|
|
|
187
196
|
.input-group-btn,
|
|
188
197
|
.input-group-addon, .form-group {
|
|
189
|
-
height: @form-control-height-sm;
|
|
198
|
+
height: @form-control-height-sm!important;
|
|
190
199
|
}
|
|
191
200
|
}
|
|
192
201
|
|
|
@@ -207,6 +216,22 @@
|
|
|
207
216
|
}
|
|
208
217
|
}
|
|
209
218
|
|
|
219
|
+
//smaller search input when using the c8y-search-input component
|
|
220
|
+
c8y-search-input.input-group-sm{
|
|
221
|
+
.input-group-search{
|
|
222
|
+
.form-control,
|
|
223
|
+
.input-group-addon,
|
|
224
|
+
.input-group-btn > .btn {
|
|
225
|
+
.input-sm();
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
// add smaller left and right margins in the search dropdown
|
|
229
|
+
c8y-li.m-l-32.m-r-32 {
|
|
230
|
+
margin-left: 8px!important;
|
|
231
|
+
margin-right: 8px!important;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
210
235
|
.input-group.input-group-password {
|
|
211
236
|
display: flex !important;
|
|
212
237
|
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
|
|
39
39
|
.input-group-dropdown {
|
|
40
40
|
.form-control {
|
|
41
|
-
border-radius:
|
|
41
|
+
border-radius: var(--c8y-form-control-height-base)!important;
|
|
42
42
|
border: 0;
|
|
43
43
|
height: auto;
|
|
44
|
-
padding: 16px 54px 16px
|
|
44
|
+
padding: 16px 54px 16px 24px !important;
|
|
45
45
|
background-color: @headerColor;
|
|
46
46
|
color: @header-text-color;
|
|
47
47
|
font-size: @font-size-large;
|
|
@@ -79,11 +79,15 @@
|
|
|
79
79
|
margin-right: auto;
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
|
|
82
|
+
.search-header-menu {
|
|
83
|
+
.app-main-header.open & {
|
|
84
|
+
max-width: calc(100vw - 400px);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
83
87
|
@media (min-width: @grid-float-breakpoint) {
|
|
84
88
|
.search-header-menu {
|
|
85
89
|
.app-main-header.open & {
|
|
86
|
-
max-width:
|
|
90
|
+
max-width: 800px;
|
|
87
91
|
}
|
|
88
92
|
}
|
|
89
93
|
}
|
package/styles/index.less
CHANGED
|
@@ -664,3 +664,16 @@
|
|
|
664
664
|
.font-size-inherit{
|
|
665
665
|
font-size: inherit !important;
|
|
666
666
|
}
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
// Monaco Editor search string highlight
|
|
670
|
+
.monaco-editor{
|
|
671
|
+
.findMatchInline{
|
|
672
|
+
background: yellow;
|
|
673
|
+
}
|
|
674
|
+
.currentFindMatchInline{
|
|
675
|
+
background: orange;
|
|
676
|
+
font-weight: bold;
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
|
|
10
10
|
@brand-logo-height-fallback: 20%;
|
|
11
11
|
|
|
12
|
-
// @navigator-platform-logo-css-var-fallback: if(@appLogo=deprecated, @navigator-platform-logo, @appLogo); // legacy support
|
|
13
12
|
@navigator-platform-logo-fallback:if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'), @appLogo); // legacy support
|
|
14
13
|
@navigator-platform-logo-dark-fallback: if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'), @appLogo); // legacy support
|
|
15
14
|
|
|
@@ -91,27 +90,5 @@
|
|
|
91
90
|
.c8y-system-theme {
|
|
92
91
|
@media (prefers-color-scheme: dark){
|
|
93
92
|
.c8y-dark-theme();
|
|
94
|
-
--brand-logo-img: url('@{image-path}@{brand-logo-img-fallback-dark}');
|
|
95
|
-
--navigator-platform-logo: url('@{navigator-platform-logo-dark-fallback}');
|
|
96
|
-
|
|
97
|
-
--header-color: var(--c8y-main-header-background-default);
|
|
98
|
-
--header-text-color: var(--c8y-main-header-text-color-default);
|
|
99
|
-
--header-hover-color: var(--c8y-main-header-text-color-hover);
|
|
100
|
-
|
|
101
|
-
--navigator-bg-color: var(--c8y-navigator-background-default);
|
|
102
|
-
--navigator-header-bg: var(--c8y-navigator-header-background);
|
|
103
|
-
|
|
104
|
-
--navigator-title-color: var(--c8y-navigator-header-color);
|
|
105
|
-
|
|
106
|
-
--navigator-active-bg: var(--c8y-navigator-background-active);
|
|
107
|
-
|
|
108
|
-
--navigator-text-color: var(--c8y-navigator-text-color-default);
|
|
109
|
-
--navigator-color-active: var(--c8y-navigator-text-color-selected);
|
|
110
|
-
|
|
111
|
-
--navigator-border-active: var(--c8y-navigator-border-selected);
|
|
112
|
-
|
|
113
|
-
--right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
|
|
114
|
-
// --body-background-color: var(--c8y-body-background-color);
|
|
115
|
-
// --text-color: var(--c8y-text-color);
|
|
116
93
|
}
|
|
117
94
|
}
|