@citizenplane/pimp 18.6.1 → 18.6.2

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 (4) hide show
  1. package/dist/components/CpAccordion.vue.d.ts.map +1 -1
  2. package/dist/style.css +1 -1
  3. package/package.json +1 -1
  4. package/src/components/CpAccordion.vue +13 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citizenplane/pimp",
3
- "version": "18.6.1",
3
+ "version": "18.6.2",
4
4
  "scripts": {
5
5
  "dev": "storybook dev -p 8081",
6
6
  "build-storybook": "storybook build --output-dir ./docs",
package/src/components/CpAccordion.vue CHANGED
@@ -122,7 +122,7 @@ const handleClick = () => (isToggled.value = !isToggled.value)
122
122
  position: relative;
123
123
  border-radius: var(--cp-radius-none);
124
124
  display: flex;
125
- flex-wrap: wrap;
125
+ flex-wrap: nowrap;
126
126
  align-items: center;
127
127
  padding: var(--cp-spacing-lg);
128
128
  gap: var(--cp-spacing-lg);
@@ -153,7 +153,7 @@ const handleClick = () => (isToggled.value = !isToggled.value)
153
153
  }
154
154
 
155
155
  &__title {
156
- flex: 1 1 auto;
156
+ flex: 1 1 0%;
157
157
  min-width: 0;
158
158
  display: flex;
159
159
  align-items: center;
@@ -175,17 +175,23 @@ const handleClick = () => (isToggled.value = !isToggled.value)
175
175
  &__leading {
176
176
  display: flex;
177
177
  flex-direction: column;
178
+ flex: 1;
179
+ min-width: 0;
178
180
  overflow: hidden;
179
181
  text-align: left;
180
182
  }
181
183
 
182
184
  &__titleText {
183
185
  @extend %u-text-ellipsis;
186
+
187
+ display: block;
188
+ min-width: 0;
184
189
  }
185
190
 
186
191
  &__trailingSlot {
187
192
  display: flex;
188
193
  align-items: center;
194
+ flex-shrink: 0;
189
195
  order: 2;
190
196
  pointer-events: auto;
191
197
  }
@@ -193,6 +199,7 @@ const handleClick = () => (isToggled.value = !isToggled.value)
193
199
  &__trailingIcons {
194
200
  display: flex;
195
201
  align-items: center;
202
+ flex-shrink: 0;
196
203
  gap: var(--cp-spacing-lg);
197
204
  order: 3;
198
205
  pointer-events: none;
@@ -236,6 +243,10 @@ const handleClick = () => (isToggled.value = !isToggled.value)
236
243
  // var(--cp-breakpoint-sm) = 40rem = 400px
237
244
  @include mx.media-query-max(40rem) {
238
245
  .cpAccordion {
246
+ &__header {
247
+ flex-wrap: wrap;
248
+ }
249
+
239
250
  &__trailingIcons {
240
251
  order: 2;
241
252
  }