@c8y/style 1023.71.1 → 1023.75.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/helper-scripts/convert-scss-to-less.sh +15 -6
- package/img/event-list-widget.png +0 -0
- package/package.json +1 -1
- package/styles/components/data-display-and-visualization/lists/_c8y-list-group.less +2 -0
- package/styles/components/data-display-and-visualization/lists/_c8y-list-group.scss +2 -0
- package/styles/components/data-display-and-visualization/tables/_responsive-grid-table.less +189 -0
- package/styles/components/data-display-and-visualization/tables/_responsive-grid-table.scss +196 -0
- package/styles/components/data-input/_c8y-ai-chat.less +0 -1
- package/styles/components/navigation-and-layout/cards/_card-dashboard.less +2 -6
- package/styles/components/navigation-and-layout/cards/_card-dashboard.scss +1 -1
- package/styles/core/buttons/_button-groups.scss +1 -1
- package/styles/core/forms/_forms.scss +3 -0
- package/styles/core/forms/_input-groups.less +260 -147
- package/styles/core/forms/_input-groups.scss +259 -147
- package/styles/index.less +1 -0
- package/styles/index.scss +1 -0
- package/styles/mixins/_c8y-scrollbar.less +1 -1
|
@@ -100,10 +100,13 @@ convert_syntax() {
|
|
|
100
100
|
local needs_review=false
|
|
101
101
|
|
|
102
102
|
# 0a. Remove SCSS-specific @use imports FIRST (sass:string, sass:math, etc.)
|
|
103
|
+
# Also remove @use of variables files — LESS has global scope so these are not needed.
|
|
103
104
|
if [[ $VERBOSE == true ]]; then
|
|
104
|
-
print_info "Removing SCSS-specific @use imports"
|
|
105
|
+
print_info "Removing SCSS-specific @use imports and redundant variable @use imports"
|
|
105
106
|
fi
|
|
106
107
|
content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"']sass:/d')
|
|
108
|
+
content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/index["'"'"']/d')
|
|
109
|
+
content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/_login-vars["'"'"']/d')
|
|
107
110
|
|
|
108
111
|
# 0b. Convert string.unquote() to ~'' BEFORE other conversions
|
|
109
112
|
if [[ $VERBOSE == true ]]; then
|
|
@@ -124,14 +127,20 @@ convert_syntax() {
|
|
|
124
127
|
if [[ $VERBOSE == true ]]; then
|
|
125
128
|
print_info "Converting @use → @import"
|
|
126
129
|
fi
|
|
127
|
-
# With 'as *' suffix - double quotes
|
|
128
|
-
content=$(echo "$content" | sed -E 's/@use +"([^"]+)"
|
|
130
|
+
# With 'as *' suffix - double quotes (space before 'as' is optional)
|
|
131
|
+
content=$(echo "$content" | sed -E 's/@use +"([^"]+)"[[:space:]]*as[[:space:]]+\*;/@import "\1";/g')
|
|
129
132
|
# With 'as *' suffix - single quotes
|
|
130
|
-
content=$(echo "$content" | sed -E "s/@use +'([^']+)'
|
|
131
|
-
#
|
|
133
|
+
content=$(echo "$content" | sed -E "s/@use +'([^']+)'[[:space:]]*as[[:space:]]+\*;/@import '\1';/g")
|
|
134
|
+
# With named alias (e.g. 'as vars', 'as math') - double quotes
|
|
135
|
+
content=$(echo "$content" | sed -E 's/@use +"([^"]+)"[[:space:]]*as[[:space:]]+[a-zA-Z0-9_-]+;/@import "\1";/g')
|
|
136
|
+
# With named alias - single quotes
|
|
137
|
+
content=$(echo "$content" | sed -E "s/@use +'([^']+)'[[:space:]]*as[[:space:]]+[a-zA-Z0-9_-]+;/@import '\1';/g")
|
|
138
|
+
# Without 'as' clause - double quotes
|
|
132
139
|
content=$(echo "$content" | sed -E 's/@use +"([^"]+)";/@import "\1";/g')
|
|
133
|
-
# Without 'as
|
|
140
|
+
# Without 'as' clause - single quotes
|
|
134
141
|
content=$(echo "$content" | sed -E "s/@use +'([^']+)';/@import '\1';/g")
|
|
142
|
+
# Safety net: remove any @use lines that still weren't converted (e.g. unusual formatting)
|
|
143
|
+
content=$(echo "$content" | sed '/^[[:space:]]*@use[[:space:]]/d')
|
|
135
144
|
|
|
136
145
|
# 0d. Add underscore prefix and .less extension to @import paths
|
|
137
146
|
# SCSS allows omitting _ and extension, LESS requires exact filenames
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
// Base grid + column span utilities
|
|
2
|
+
.responsive-grid-table {
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-template-columns: repeat(12, 1fr);
|
|
5
|
+
background: inherit;
|
|
6
|
+
|
|
7
|
+
&-wrapper--striped{
|
|
8
|
+
.responsive-grid-table:nth-child(even) {
|
|
9
|
+
background: @component-background-odd;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&__header{
|
|
14
|
+
box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
|
|
15
|
+
|
|
16
|
+
> [class^="col-"],
|
|
17
|
+
> [class*=" col-"] {
|
|
18
|
+
padding: calc(@size-base + @size-10) @component-padding;
|
|
19
|
+
color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
|
|
20
|
+
vertical-align: bottom;
|
|
21
|
+
text-transform: uppercase;
|
|
22
|
+
font-size: var(--c8y-font-size-small);
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
line-height: calc(var(--c8y-unit-base) * 2.5);
|
|
25
|
+
}
|
|
26
|
+
.inner-scroll &{
|
|
27
|
+
position: sticky;
|
|
28
|
+
top: 0;
|
|
29
|
+
z-index: 1;
|
|
30
|
+
background: var(--c8y-page-sticky-header-background-default);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
&__body{
|
|
34
|
+
> [class^="col-"],
|
|
35
|
+
> [class*=" col-"] {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
padding-top: calc(@size-base + @size-10);
|
|
39
|
+
padding-bottom: calc(@size-base + @size-10);
|
|
40
|
+
&.align-right {
|
|
41
|
+
justify-content: flex-end;
|
|
42
|
+
text-align: right;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
&--separator{
|
|
47
|
+
box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
|
|
48
|
+
&:last-child {
|
|
49
|
+
box-shadow: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
// Padding modifiers — -x (horizontal), -y (vertical), shorthand (both)
|
|
53
|
+
&--padded-x {
|
|
54
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
55
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
56
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
57
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
58
|
+
padding-left: @component-padding;
|
|
59
|
+
padding-right: @component-padding;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&--padded-y {
|
|
63
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
64
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
65
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
66
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
67
|
+
padding-top: @component-padding;
|
|
68
|
+
padding-bottom: @component-padding;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
&--padded {
|
|
72
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
73
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
74
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
75
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
76
|
+
padding-left: @component-padding;
|
|
77
|
+
padding-right: @component-padding;
|
|
78
|
+
padding-top: @component-padding;
|
|
79
|
+
padding-bottom: @component-padding;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Condensed modifiers — -x (horizontal), -y (vertical + font-size), shorthand (both)
|
|
84
|
+
&--condensed-x {
|
|
85
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
86
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
87
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
88
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
89
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
90
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
&--condensed-y {
|
|
94
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
95
|
+
&.responsive-grid-table__header > [class*=" col-"] {
|
|
96
|
+
padding-top: var(--c8y-table-cell-padding-condensed);
|
|
97
|
+
padding-bottom: var(--c8y-table-cell-padding-condensed);
|
|
98
|
+
font-size: calc(var(--c8y-unit-base) * 1.25);
|
|
99
|
+
}
|
|
100
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
101
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
102
|
+
padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
103
|
+
padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
104
|
+
font-size: var(--c8y-font-size-small);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
&--condensed {
|
|
108
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
109
|
+
&.responsive-grid-table__header > [class*=" col-"] {
|
|
110
|
+
padding-top: var(--c8y-table-cell-padding-condensed);
|
|
111
|
+
padding-bottom: var(--c8y-table-cell-padding-condensed);
|
|
112
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
113
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
114
|
+
font-size: calc(var(--c8y-unit-base) * 1.25);
|
|
115
|
+
}
|
|
116
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
117
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
118
|
+
padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
119
|
+
padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
120
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
121
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
122
|
+
font-size: var(--c8y-font-size-small);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.col-actions{
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: flex-end;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Replaces SCSS: @for $i from 1 through 12
|
|
134
|
+
.generate-col-spans(@i) when (@i > 0) {
|
|
135
|
+
.col-@{i} {
|
|
136
|
+
grid-column: span @i;
|
|
137
|
+
}
|
|
138
|
+
.generate-col-spans((@i - 1));
|
|
139
|
+
}
|
|
140
|
+
.generate-col-spans(12);
|
|
141
|
+
|
|
142
|
+
// Mixin to create a wrapper + container query pair
|
|
143
|
+
// @name -> suffix for class/container name and width
|
|
144
|
+
.responsive-grid-table-wrapper(@name) {
|
|
145
|
+
@cq-name: ~"responsive-grid-table-wrapper--@{name}";
|
|
146
|
+
|
|
147
|
+
.responsive-grid-table-wrapper--@{name} {
|
|
148
|
+
container-type: inline-size;
|
|
149
|
+
container-name: @cq-name;
|
|
150
|
+
width: 100%;
|
|
151
|
+
|
|
152
|
+
// When a header is present, inline labels are redundant — hide them
|
|
153
|
+
&:has(.responsive-grid-table__header) .text-label-small {
|
|
154
|
+
display: none;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@container @cq-name (max-width: unit(@name, px)) {
|
|
159
|
+
.responsive-grid-table {
|
|
160
|
+
grid-template-columns: 1fr; // stack
|
|
161
|
+
&__header {
|
|
162
|
+
display: none;
|
|
163
|
+
}
|
|
164
|
+
.col-actions {
|
|
165
|
+
justify-content: flex-start;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
// Header is hidden when stacked — show inline labels so values stay identifiable
|
|
169
|
+
.text-label-small {
|
|
170
|
+
display: block !important;
|
|
171
|
+
}
|
|
172
|
+
// hover-only element that becomes visible when stacked
|
|
173
|
+
.showOnHover {
|
|
174
|
+
opacity: 1 !important;
|
|
175
|
+
}
|
|
176
|
+
// Any class that contains "col-" becomes full-width when stacked
|
|
177
|
+
.responsive-grid-table > [class^="col-"],
|
|
178
|
+
.responsive-grid-table > [class*=" col-"] {
|
|
179
|
+
grid-column: span 1;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// Replaces SCSS: @for $w from 600 through 200 (step -50)
|
|
185
|
+
.generate-wrappers(@w) when (@w >= 200) {
|
|
186
|
+
.responsive-grid-table-wrapper(@w);
|
|
187
|
+
.generate-wrappers((@w - 50));
|
|
188
|
+
}
|
|
189
|
+
.generate-wrappers(600);
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
@use "../../../../variables/index" as *;
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
// Base grid + column span utilities
|
|
5
|
+
.responsive-grid-table {
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-template-columns: repeat(12, 1fr);
|
|
8
|
+
background: inherit;
|
|
9
|
+
|
|
10
|
+
&-wrapper--striped{
|
|
11
|
+
.responsive-grid-table:nth-child(even) {
|
|
12
|
+
background: $component-background-odd;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&__header{
|
|
17
|
+
box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
|
|
18
|
+
|
|
19
|
+
> [class^="col-"],
|
|
20
|
+
> [class*=" col-"] {
|
|
21
|
+
padding-top: calc($size-base + $size-10);
|
|
22
|
+
padding-bottom: calc($size-base + $size-10);
|
|
23
|
+
color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
|
|
24
|
+
vertical-align: bottom;
|
|
25
|
+
text-transform: uppercase;
|
|
26
|
+
font-size: var(--c8y-font-size-small);
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
line-height: calc(var(--c8y-unit-base) * 2.5);
|
|
29
|
+
}
|
|
30
|
+
.inner-scroll &{
|
|
31
|
+
position: sticky;
|
|
32
|
+
top: 0;
|
|
33
|
+
z-index: 1;
|
|
34
|
+
background: var(--c8y-page-sticky-header-background-default);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&__body{
|
|
38
|
+
> [class^="col-"],
|
|
39
|
+
> [class*=" col-"] {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
padding-top: calc($size-base + $size-10);
|
|
43
|
+
padding-bottom: calc($size-base + $size-10);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
&--separator{
|
|
47
|
+
box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
|
|
48
|
+
&:last-child {
|
|
49
|
+
box-shadow: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
// Padding modifiers — -x (horizontal), -y (vertical), shorthand (both)
|
|
53
|
+
&--padded-x {
|
|
54
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
55
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
56
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
57
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
58
|
+
padding-left: $component-padding;
|
|
59
|
+
padding-right: $component-padding;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&--padded-y {
|
|
63
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
64
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
65
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
66
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
67
|
+
padding-top: $component-padding;
|
|
68
|
+
padding-bottom: $component-padding;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
&--padded {
|
|
72
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
73
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
74
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
75
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
76
|
+
padding-left: $component-padding;
|
|
77
|
+
padding-right: $component-padding;
|
|
78
|
+
padding-top: $component-padding;
|
|
79
|
+
padding-bottom: $component-padding;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Condensed modifiers — -x (horizontal), -y (vertical + font-size), shorthand (both)
|
|
84
|
+
&--condensed-x {
|
|
85
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
86
|
+
&.responsive-grid-table__header > [class*=" col-"],
|
|
87
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
88
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
89
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
90
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
&--condensed-y {
|
|
94
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
95
|
+
&.responsive-grid-table__header > [class*=" col-"] {
|
|
96
|
+
padding-top: var(--c8y-table-cell-padding-condensed);
|
|
97
|
+
padding-bottom: var(--c8y-table-cell-padding-condensed);
|
|
98
|
+
font-size: calc(var(--c8y-unit-base) * 1.25);
|
|
99
|
+
}
|
|
100
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
101
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
102
|
+
padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
103
|
+
padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
104
|
+
font-size: var(--c8y-font-size-small);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
&--condensed {
|
|
108
|
+
&.responsive-grid-table__header > [class^="col-"],
|
|
109
|
+
&.responsive-grid-table__header > [class*=" col-"] {
|
|
110
|
+
padding-top: var(--c8y-table-cell-padding-condensed);
|
|
111
|
+
padding-bottom: var(--c8y-table-cell-padding-condensed);
|
|
112
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
113
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
114
|
+
font-size: calc(var(--c8y-unit-base) * 1.25);
|
|
115
|
+
}
|
|
116
|
+
&.responsive-grid-table__body > [class^="col-"],
|
|
117
|
+
&.responsive-grid-table__body > [class*=" col-"] {
|
|
118
|
+
padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
119
|
+
padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
|
|
120
|
+
padding-left: var(--c8y-table-cell-padding-condensed);
|
|
121
|
+
padding-right: var(--c8y-table-cell-padding-condensed);
|
|
122
|
+
font-size: var(--c8y-font-size-small);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.col-actions{
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: flex-end;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@for $i from 1 through 12 {
|
|
134
|
+
.col-#{$i} {
|
|
135
|
+
grid-column: span $i;
|
|
136
|
+
&.align-right {
|
|
137
|
+
justify-content: flex-end;
|
|
138
|
+
text-align: right;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// Mixin to create a wrapper + container query pair
|
|
144
|
+
// $name -> suffix for class/container name and width
|
|
145
|
+
@mixin responsive-grid-table-wrapper($name) {
|
|
146
|
+
.responsive-grid-table-wrapper--#{$name} {
|
|
147
|
+
container-type: inline-size;
|
|
148
|
+
container-name: responsive-grid-table-wrapper--#{$name};
|
|
149
|
+
width: 100%;
|
|
150
|
+
|
|
151
|
+
// When a header is present, inline labels are redundant — hide them
|
|
152
|
+
&:has(.responsive-grid-table__header) .text-label-small {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@container responsive-grid-table-wrapper--#{$name} (max-width: #{$name}px) {
|
|
158
|
+
.responsive-grid-table {
|
|
159
|
+
grid-template-columns: 1fr; // stack
|
|
160
|
+
&__header{
|
|
161
|
+
display: none;
|
|
162
|
+
}
|
|
163
|
+
.col-actions{
|
|
164
|
+
justify-content: flex-start;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
// Header is hidden when stacked — show inline labels so values stay identifiable
|
|
168
|
+
.text-label-small {
|
|
169
|
+
display: block !important;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// hover-only element that becomes visible when stacked
|
|
173
|
+
.showOnHover {
|
|
174
|
+
opacity: 1!important;
|
|
175
|
+
}
|
|
176
|
+
// Any class that contains "col-" becomes full-width when stacked
|
|
177
|
+
.responsive-grid-table > [class^="col-"],
|
|
178
|
+
.responsive-grid-table > [class*=" col-"] {
|
|
179
|
+
grid-column: span 1;
|
|
180
|
+
min-width: 0;
|
|
181
|
+
|
|
182
|
+
// align-right utility becomes align-left when stacked, since right-alignment is hard to read in a single column
|
|
183
|
+
&.align-right {
|
|
184
|
+
justify-content: flex-start;
|
|
185
|
+
text-align: left;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// Generate wrappers: 600, 550, 500, ..., 200
|
|
192
|
+
@for $w from 600 through 200 {
|
|
193
|
+
@if $w % 50 == 0 {
|
|
194
|
+
@include responsive-grid-table-wrapper($w);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
display: flex;
|
|
57
57
|
flex-direction: column;
|
|
58
58
|
height: 100%;
|
|
59
|
-
c8y-alarm-list-widget,c8y-alarms-list{
|
|
59
|
+
c8y-alarm-list-widget,c8y-alarms-list,c8y-event-list-widget,c8y-events-list{
|
|
60
60
|
display: contents;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
@@ -74,11 +74,7 @@
|
|
|
74
74
|
display: contents;
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
-
|
|
78
|
-
>.card-inner-scroll {
|
|
79
|
-
height: 100%;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
77
|
+
|
|
82
78
|
>.fixed-header {
|
|
83
79
|
.table {
|
|
84
80
|
margin-bottom: 0;
|