@c8y/style 1021.62.9 → 1021.64.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c8y/style",
3
- "version": "1021.62.9",
3
+ "version": "1021.64.0",
4
4
  "license": "Apache-2.0",
5
5
  "author": "Cumulocity GmbH",
6
6
  "description": "Styles for Cumulocity IoT applications",
@@ -41,11 +41,7 @@
41
41
  &:empty {
42
42
  display: none;
43
43
  }
44
- .btn & {
45
- position: relative;
46
- top: 50%;
47
- transform: translate(0, -50%);
48
- }
44
+
49
45
  a & {
50
46
  &:hover,
51
47
  &:focus {
@@ -59,6 +59,12 @@
59
59
  pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
60
60
  }
61
61
  }
62
+
63
+ &:has(.badge){
64
+ display: inline-flex;
65
+ gap: 4px;
66
+ align-items: center;
67
+ }
62
68
  }
63
69
 
64
70
  .btn-icon {
@@ -122,7 +122,7 @@ body:not(:has(.app-main-header)) {
122
122
 
123
123
  .navbar-nav {
124
124
  .dropdown-menu {
125
- max-width: 280px;
125
+ max-width: 306px;
126
126
 
127
127
  &.uib-datepicker-popup {
128
128
  width: 280px;
@@ -44,9 +44,16 @@
44
44
  &.highlighted {
45
45
  background-color: @brand-80;
46
46
  }
47
-
47
+ &.selected{
48
+ border-left: 4px solid @component-color-active;
49
+ background-color: @component-background-default;
50
+ }
48
51
  /* typeahead dropdown list items styling */
49
-
52
+ &:has(.c8y-list__item__btn:focus) {
53
+ outline: 2px solid @component-color-focus;
54
+ outline-offset: -2px;
55
+ border-radius: @component-border-radius-focus !important;
56
+ }
50
57
  bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
51
58
  &.active,
52
59
  &:active {
@@ -151,7 +158,13 @@
151
158
  pointer-events: none;
152
159
  }
153
160
  }
154
-
161
+ &__btn{
162
+ .btn-clean();
163
+ white-space: normal;
164
+ &:focus{
165
+ outline: none;
166
+ }
167
+ }
155
168
  &--link {
156
169
  cursor: pointer;
157
170
 
@@ -47,6 +47,51 @@ body {
47
47
  */
48
48
  .createGridCols3(5);
49
49
 
50
+
51
+ // grid with 3 columns collapsed with the last column collapsed
52
+ .grid__col--8-4-0 {
53
+ @media(min-width: @screen-md-min) {
54
+ transition: .35s;
55
+ grid-template-columns: 8fr 4fr 0fr;
56
+ }
57
+ }
58
+
59
+ .grid__col--5-7-0 {
60
+ @media(min-width: @screen-md-min) {
61
+ transition: .35s;
62
+ grid-template-columns: 5fr 7fr 0fr;
63
+ }
64
+ }
65
+
66
+ .grid__col--6-6-0 {
67
+ @media(min-width: @screen-md-min) {
68
+ transition: .35s;
69
+ grid-template-columns: 6fr 6fr 0fr;
70
+ }
71
+ }
72
+ // grid with 3 columns collapsed with the first column collapsed
73
+ .grid__col--0-4-8 {
74
+ @media(min-width: @screen-md-min) {
75
+ transition: .35s;
76
+ grid-template-columns: 0fr 4fr 8fr;
77
+ }
78
+ }
79
+
80
+ .grid__col--0-7-5 {
81
+ @media(min-width: @screen-md-min) {
82
+ transition: .35s;
83
+ grid-template-columns: 0fr 7fr 5fr;
84
+ }
85
+ }
86
+
87
+ .grid__col--0-6-6 {
88
+ @media(min-width: @screen-md-min) {
89
+ transition: .35s;
90
+ grid-template-columns: 0fr 6fr 6fr;
91
+ }
92
+ }
93
+
94
+
50
95
  /* Mixin that generate classes for setting two rows on a 12 rows grid
51
96
  * example:
52
97
  * `grid__row-4-6`
@@ -14,7 +14,7 @@
14
14
  @label-color-success: @status-success-dark;
15
15
  //** Info label background color
16
16
  @label-background-info: @status-info-light;
17
- @label-color-info: @status-info;
17
+ @label-color-info: @status-info-dark;
18
18
  //** Warning label background color
19
19
  @label-background-warning: @status-warning-lightest;
20
20
  @label-color-warning: @status-warning-dark;
@@ -14,7 +14,7 @@
14
14
 
15
15
  // Info tag background color
16
16
  @tag--background-info: @status-info-light;
17
- @tag--color-info: @status-info;
17
+ @tag--color-info: @status-info-dark;
18
18
 
19
19
  // Warning tag background color
20
20
  @tag--background-warning: @status-warning-lightest;