@c8y/style 1023.14.148 → 1023.14.152

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 (11) hide show
  1. package/package.json +1 -1
  2. package/styles/components/navigation-and-layout/cards/_card.less +23 -13
  3. package/styles/components/navigation-and-layout/cards/_card.scss +1 -1
  4. package/styles/components/status-feedback-and-notifications/_c8y-message-banner.less +2 -7
  5. package/styles/components/status-feedback-and-notifications/_c8y-message-banner.scss +0 -5
  6. package/styles/core/overlays/_dropdowns.less +4 -1
  7. package/styles/core/overlays/_dropdowns.scss +4 -1
  8. package/styles/layout/_layouts.less +3 -3
  9. package/styles/layout/_layouts.scss +3 -3
  10. package/styles/layout/_split-scroll.less +1 -1
  11. package/styles/layout/_split-scroll.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1023.14.148",
3
+ "version": "1023.14.152",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
package/styles/components/navigation-and-layout/cards/_card.less CHANGED
@@ -6,7 +6,7 @@
6
6
  /**
7
7
  * Card - Base card component with all variants
8
8
  *
9
- * Note: Uses @size-* tokens extensively; @font-size-* tokens, and component variables.
9
+ * Note: Uses @size-* tokens extensively, @font-size-* tokens, and component variables.
10
10
  *
11
11
  * Intentionally hardcoded values:
12
12
  * - Component-specific dimensions (56px, 60px, 66px, 80px, 90px, 100px, 140px): Card sizes and minimums
@@ -98,33 +98,43 @@
98
98
 
99
99
  // state colors
100
100
  &.danger {
101
- .card-status-variant(var(--palette-status-danger-light, var(--c8y-palette-status-danger-light)),
101
+ .card-status-variant(
102
+ var(--palette-status-danger-light, var(--c8y-palette-status-danger-light)),
102
103
  var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark)),
103
- var(--palette-status-danger, var(--c8y-palette-status-danger)));
104
+ var(--palette-status-danger, var(--c8y-palette-status-danger))
105
+ );
104
106
  }
105
107
 
106
108
  &.warning {
107
- .card-status-variant(var(--palette-status-warning-light, var(--c8y-palette-status-warning-light)),
109
+ .card-status-variant(
110
+ var(--palette-status-warning-light, var(--c8y-palette-status-warning-light)),
108
111
  var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark)),
109
- var(--palette-status-warning, var(--c8y-palette-status-warning)));
112
+ var(--palette-status-warning, var(--c8y-palette-status-warning))
113
+ );
110
114
  }
111
115
 
112
116
  &.success {
113
- .card-status-variant(var(--palette-status-success-light, var(--c8y-palette-status-success-light)),
117
+ .card-status-variant(
118
+ var(--palette-status-success-light, var(--c8y-palette-status-success-light)),
114
119
  var(--palette-status-success-dark, var(--c8y-palette-status-success-dark)),
115
- var(--palette-status-success, var(--c8y-palette-status-success)));
120
+ var(--palette-status-success, var(--c8y-palette-status-success))
121
+ );
116
122
  }
117
123
 
118
124
  &.info {
119
- .card-status-variant(var(--palette-status-info-light, var(--c8y-palette-status-info-light)),
125
+ .card-status-variant(
126
+ var(--palette-status-info-light, var(--c8y-palette-status-info-light)),
120
127
  var(--palette-status-info-dark, var(--c8y-palette-status-info-dark)),
121
- var(--palette-status-info, var(--c8y-palette-status-info)));
128
+ var(--palette-status-info, var(--c8y-palette-status-info))
129
+ );
122
130
  }
123
131
 
124
132
  &.brand {
125
- .card-status-variant(var(--brand-primary, var(--c8y-brand-primary));
126
- @palette-high;
127
- @palette-high);
133
+ .card-status-variant(
134
+ var(--brand-primary, var(--c8y-brand-primary)),
135
+ @palette-high,
136
+ @palette-high
137
+ );
128
138
  }
129
139
 
130
140
  &.not-active {
@@ -284,7 +294,7 @@
284
294
  .card-inner-scroll {
285
295
  position: relative;
286
296
  overflow-y: auto;
287
- overscroll-behavior: contain;
297
+ overscroll-behavior: auto;
288
298
  //TBD: remove?
289
299
  .c8y-alarm-list & {
290
300
  @media screen and (min-width: @screen-lg-min) {
package/styles/components/navigation-and-layout/cards/_card.scss CHANGED
@@ -295,7 +295,7 @@
295
295
  .card-inner-scroll {
296
296
  position: relative;
297
297
  overflow-y: auto;
298
- overscroll-behavior: contain;
298
+ overscroll-behavior: auto;
299
299
  //TBD: remove?
300
300
  .c8y-alarm-list & {
301
301
  @media screen and (min-width: $screen-lg-min) {
package/styles/components/status-feedback-and-notifications/_c8y-message-banner.less CHANGED
@@ -18,33 +18,28 @@
18
18
  width: 100%;
19
19
  pointer-events: none;
20
20
  .alert{
21
- margin: @margin-16 auto;
21
+ margin: @size-16 auto;
22
22
  box-shadow: var(--c8y-elevation-lg);
23
23
  pointer-events: auto;
24
24
  .close{
25
- margin: -4px -4px 0 8px;
25
+ margin: calc(-1 * @size-4) calc(-1 * @size-4) 0 @size-8;
26
26
  }
27
27
  > span{
28
28
  white-space: normal;
29
29
  }
30
30
  &.alert-info{
31
- background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
32
31
  border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
33
32
  }
34
33
  &.alert-warning{
35
- background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
36
34
  border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
37
35
  }
38
36
  &.alert-danger{
39
- background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
40
37
  border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
41
38
  }
42
39
  &.alert-success{
43
- background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
44
40
  border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
45
41
  }
46
42
  &.alert-system{
47
- background-color: var(--brand-80, var(--c8y-brand-80));
48
43
  border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
49
44
  }
50
45
  }
package/styles/components/status-feedback-and-notifications/_c8y-message-banner.scss CHANGED
@@ -29,23 +29,18 @@
29
29
  white-space: normal;
30
30
  }
31
31
  &.alert-info{
32
- background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
33
32
  border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
34
33
  }
35
34
  &.alert-warning{
36
- background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
37
35
  border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
38
36
  }
39
37
  &.alert-danger{
40
- background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
41
38
  border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
42
39
  }
43
40
  &.alert-success{
44
- background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
45
41
  border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
46
42
  }
47
43
  &.alert-system{
48
- background-color: var(--brand-80, var(--c8y-brand-80));
49
44
  border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
50
45
  }
51
46
  }
package/styles/core/overlays/_dropdowns.less CHANGED
@@ -756,13 +756,16 @@ body {
756
756
  }
757
757
  input.form-control {
758
758
  background: transparent;
759
- box-shadow: none;
759
+ box-shadow: none !important;
760
760
  width: 0 !important;
761
761
  right: 0;
762
762
  left: 0;
763
763
  // top:-1px;
764
764
  z-index: 1;
765
765
  height: calc(@form-control-height-base - 2px) !important;
766
+ &::placeholder {
767
+ color: transparent;
768
+ }
766
769
  &:focus {
767
770
  width: auto !important;
768
771
  background: rgba(255, 255, 255, 0.6);
package/styles/core/overlays/_dropdowns.scss CHANGED
@@ -757,13 +757,16 @@ body {
757
757
  }
758
758
  input.form-control {
759
759
  background: transparent;
760
- box-shadow: none;
760
+ box-shadow: none !important;
761
761
  width: 0 !important;
762
762
  right: 0;
763
763
  left: 0;
764
764
  // top:-1px;
765
765
  z-index: 1;
766
766
  height: calc($form-control-height-base - 2px) !important;
767
+ &::placeholder {
768
+ color: transparent;
769
+ }
767
770
  &:focus {
768
771
  width: auto !important;
769
772
  background: rgba(255, 255, 255, 0.6);
package/styles/layout/_layouts.less CHANGED
@@ -31,7 +31,7 @@ body {
31
31
  overflow: auto;
32
32
  height: 100%;
33
33
  background-color: inherit;
34
- overscroll-behavior: contain;
34
+ overscroll-behavior: auto;
35
35
  .c8y-scrollbar();
36
36
  > .list-group:last-child {
37
37
  margin-bottom: 0;
@@ -196,7 +196,7 @@ pre.inner-scroll {
196
196
  @media screen and (min-width: @screen-sm-min) {
197
197
  .inner-scroll--sm {
198
198
  overflow: auto;
199
- overscroll-behavior: contain;
199
+ overscroll-behavior: auto;
200
200
  height: 100%;
201
201
  background-color: inherit;
202
202
 
@@ -323,7 +323,7 @@ pre.inner-scroll {
323
323
  &,
324
324
  &.overflow-visible-sm {
325
325
  overflow: auto !important;
326
- overscroll-behavior: contain;
326
+ overscroll-behavior: auto;
327
327
  height: 100%;
328
328
  background-color: inherit;
329
329
 
package/styles/layout/_layouts.scss CHANGED
@@ -32,7 +32,7 @@ body {
32
32
  overflow: auto;
33
33
  height: 100%;
34
34
  background-color: inherit;
35
- overscroll-behavior: contain;
35
+ overscroll-behavior: auto;
36
36
  @include c8y-scrollbar.c8y-scrollbar();
37
37
  > .list-group:last-child {
38
38
  margin-bottom: 0;
@@ -197,7 +197,7 @@ pre.inner-scroll {
197
197
  @media screen and (min-width: $screen-sm-min) {
198
198
  .inner-scroll--sm {
199
199
  overflow: auto;
200
- overscroll-behavior: contain;
200
+ overscroll-behavior: auto;
201
201
  height: 100%;
202
202
  background-color: inherit;
203
203
 
@@ -324,7 +324,7 @@ pre.inner-scroll {
324
324
  &,
325
325
  &.overflow-visible-sm {
326
326
  overflow: auto !important;
327
- overscroll-behavior: contain;
327
+ overscroll-behavior: auto;
328
328
  height: 100%;
329
329
  background-color: inherit;
330
330
 
package/styles/layout/_split-scroll.less CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
  .inner-scroll {
40
40
  overflow-y: auto;
41
- overscroll-behavior: contain;
41
+ overscroll-behavior: auto;
42
42
  max-height: 100%;
43
43
  }
44
44
 
package/styles/layout/_split-scroll.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  }
41
41
  .inner-scroll {
42
42
  overflow-y: auto;
43
- overscroll-behavior: contain;
43
+ overscroll-behavior: auto;
44
44
  max-height: 100%;
45
45
  }
46
46