@festo-ui/react-extra 9.0.0-dev.732 → 9.0.0-dev.733

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.
@@ -15,18 +15,6 @@
15
15
  box-shadow: 0 1px 4px #3333;
16
16
  }
17
17
 
18
- .fwe-popover.fwe-popover-menu, .fwe-popover {
19
- background-color: var(--fwe-white);
20
- border-radius: 4px;
21
- box-shadow: 0 1px 4px #3333;
22
- }
23
-
24
- .fwe-popover {
25
- font-size: var(--fwe-font-size-md);
26
- padding: 8px;
27
- line-height: 1rem;
28
- }
29
-
30
18
  .fwe-popover-container {
31
19
  min-width: max-content;
32
20
  display: inline-block;
@@ -77,34 +65,61 @@
77
65
  left: -6px;
78
66
  }
79
67
 
80
- .fwe-popover.fwe-popover-menu {
68
+ .fwe-popover {
69
+ background-color: var(--fwe-white);
70
+ font-size: var(--fwe-font-size-md);
71
+ border-radius: 4px;
72
+ padding: 8px;
73
+ line-height: 1rem;
74
+ box-shadow: 0 1px 4px #3333;
75
+ }
76
+
77
+ .fwe-popover--legend {
78
+ padding: 16px;
79
+ line-height: 24px;
80
+ display: table;
81
+ }
82
+
83
+ .fwe-popover--legend .fwe-popover-legend-content {
84
+ display: table-row;
85
+ }
86
+
87
+ .fwe-popover--legend .fwe-popover-legend-content dt {
88
+ margin: 0;
89
+ padding-right: 8px;
90
+ display: table-cell;
91
+ }
92
+
93
+ .fwe-popover--legend .fwe-popover-legend-content dd {
94
+ margin: 0;
95
+ display: table-cell;
96
+ }
97
+
98
+ .fwe-popover--menu {
81
99
  font-size: var(--fwe-font-size-base);
82
100
  padding: 16px;
83
101
  line-height: 1.5rem;
84
102
  }
85
103
 
86
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item {
87
- border-bottom: none;
104
+ .fwe-popover--menu button {
105
+ all: unset;
106
+ cursor: pointer;
107
+ width: 100%;
108
+ height: 36px;
88
109
  min-height: 36px;
110
+ color: var(--fwe-text);
111
+ border-bottom: none;
112
+ align-items: center;
89
113
  padding: 0;
114
+ display: flex;
90
115
  }
91
116
 
92
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button {
93
- width: 100%;
94
- margin-left: inherit;
95
- text-align: left;
96
- justify-content: unset;
97
- height: 32px;
98
- max-height: 32px;
99
- padding: 0 8px 0 0;
100
- display: inline-flex;
101
- }
102
-
103
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover {
104
- color: var(--fwe-text);
117
+ .fwe-popover--menu button .fwe-svg-icon {
118
+ margin-left: 8px;
119
+ margin-right: 8px;
105
120
  }
106
121
 
107
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i {
122
+ .fwe-popover--menu button i {
108
123
  flex-wrap: nowrap;
109
124
  justify-content: center;
110
125
  align-items: center;
@@ -114,52 +129,35 @@
114
129
  display: inline-flex;
115
130
  }
116
131
 
117
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before {
132
+ .fwe-popover--menu button i:before {
118
133
  display: inline-flex;
119
134
  }
120
135
 
121
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button .fwe-svg-icon {
122
- margin-left: 8px;
136
+ .fwe-popover--menu button span {
123
137
  margin-right: 8px;
124
- }
125
-
126
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span {
127
- height: 24px;
128
138
  display: inline-flex;
129
139
  }
130
140
 
131
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"] {
132
- margin-left: inherit;
133
- }
134
-
135
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover {
136
- color: var(--fwe-text);
141
+ .fwe-popover--menu button:hover {
137
142
  background-color: #3333331a;
138
143
  }
139
144
 
140
- .fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active {
145
+ .fwe-popover--menu button:active {
141
146
  background-color: #3333;
142
147
  }
143
148
 
144
- .fwe-popover .fwe-popover-legend {
145
- margin: 16px;
146
- line-height: 24px;
147
- display: table;
148
- }
149
-
150
- .fwe-popover .fwe-popover-legend .fwe-popover-legend-content {
151
- display: table-row;
152
- }
153
-
154
- .fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt {
149
+ .fwe-popover-menu-trigger .fwe-popover-menu-trigger-button {
150
+ cursor: pointer;
151
+ background: none;
152
+ border: none;
155
153
  margin: 0;
156
- padding-right: 8px;
157
- display: table-cell;
154
+ padding: 0;
155
+ line-height: 0;
156
+ display: block;
158
157
  }
159
158
 
160
- .fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd {
161
- margin: 0;
162
- display: table-cell;
159
+ .fwe-popover-menu-trigger .fwe-popover-menu-trigger-button:hover {
160
+ color: var(--fwe-hero);
163
161
  }
164
162
 
165
163
  .fwe-color-picker {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/react-extra",
3
- "version": "9.0.0-dev.732",
3
+ "version": "9.0.0-dev.733",
4
4
  "license": "apache-2.0",
5
5
  "author": "Festo UI (styleguide@festo.com)",
6
6
  "type": "module",