@citizenplane/pimp 9.1.12 → 9.3.0

package/src/components/CpSelect.vue

@@ -131,31 +131,30 @@ onMounted(() => {
   &__inner {
     @extend %u-text-ellipsis;
     box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
-    outline: none;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border: none;
+    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
     border-radius: fn.px-to-em(10);
     background-color: colors.$neutral-light;
     width: 100%;
-    height: sizing.$component-size-default;
     color: colors.$neutral-dark;
     cursor: pointer;
-    padding: fn.px-to-em(8) calc(#{$cp-select-icon-size} + #{fn.px-to-em(8)} + #{fn.px-to-em(8)}) fn.px-to-em(8)
-      fn.px-to-em(8);
-    font-size: fn.px-to-em(16);
+    padding: fn.px-to-rem(8) calc(#{$cp-select-icon-size} + #{fn.px-to-rem(8)} + #{fn.px-to-rem(8)}) fn.px-to-rem(8)
+      fn.px-to-rem(8);
+    line-height: fn.px-to-rem(24);
+    font-size: fn.px-to-em(14);
 
     &:hover,
     &:focus {
-      border-color: colors.$primary-color;
+      outline: fn.px-to-rem(1) solid colors.$primary-color;
       background-color: colors.$neutral-light;
     }
 
     &:focus {
-      box-shadow:
-        rgba(colors.$primary-color, 0.1) 0 0 0 fn.px-to-rem(4),
-        colors.$primary-color 0 0 0 fn.px-to-rem(0.5);
+      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$primary-color, $lightness: 80%);
     }
   }
 
@@ -174,7 +173,7 @@ onMounted(() => {
 
   &--isDisabled {
     .cpSelect__inner {
-      border-color: colors.$neutral-dark-4 !important;
+      outline: fn.px-to-rem(1) solid colors.$neutral-dark-4 !important;
       background: colors.$neutral-light-1;
     }
 
@@ -193,11 +192,11 @@ onMounted(() => {
     .cpSelect__inner,
     .cpSelect__inner:hover,
     .cpSelect__inner:focus {
-      border-color: colors.$error-color;
+      outline-color: colors.$error-color;
     }
 
     .cpSelect__inner:focus {
-      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
+      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$error-color, $lightness: 60%);
     }
   }
 

package/src/components/CpSelectMenu.vue

@@ -151,32 +151,33 @@ const isSelectedValue = (value: string): boolean => {
 <style lang="scss">
 .cpSelectMenu {
   position: relative;
-  font-size: fn.px-to-em(16);
+  font-size: fn.px-to-em(14);
 
   &__button {
     box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border: none;
+    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
     border-radius: fn.px-to-em(10);
     background: colors.$neutral-light;
-    padding: fn.px-to-em(12);
+    padding: fn.px-to-rem(8);
     width: 100%;
-    height: sizing.$component-size-default;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: inherit;
+    line-height: fn.px-to-rem(24);
     font-weight: normal;
     text-transform: capitalize;
 
     &:hover,
     &:active,
     &:focus {
-      border-color: colors.$secondary-color;
+      outline: fn.px-to-rem(1) solid colors.$secondary-color;
     }
 
     &:focus {
-      outline: none !important;
-      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
+      outline: fn.px-to-rem(2) solid colors.$secondary-color;
+      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$secondary-color, $lightness: 80%);
     }
   }
 

package/src/components/icons/IconBaggageSetPlus.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M10.2103 10.086V8.74304C10.2103 7.63847 11.1057 6.74304 12.2103 6.74304H19C20.1046 6.74304 21 7.63847 21 8.74304V12.3914"
+    />
+    <path
+      d="M8.67485 21.0001H5.10531C3.96046 21.0001 3.04925 20.0409 3.10794 18.8976L3.31108 14.9403C3.36567 13.877 4.24374 13.0428 5.30845 13.0428H12.4497C13.073 13.0428 13.6324 13.3288 14 13.7792M9.08328 21.0001H12.6528"
+    />
+    <path
+      d="M11.5842 12.9094C11.5842 11.2712 10.3731 9.94312 8.87905 9.94312C7.38503 9.94312 6.17389 11.2712 6.17389 12.9094"
+    />
+    <path
+      d="M13.0109 4C13.0109 3.44772 13.4586 3 14.0109 3H17.1994C17.7517 3 18.1994 3.44772 18.1994 4V5.74304C18.1994 6.29533 17.7517 6.74304 17.1994 6.74304H14.0109C13.4586 6.74304 13.0109 6.29533 13.0109 5.74304V4Z"
+    />
+    <path d="M18.2865 15.5729V21" />
+    <path d="M21 18.2865L15.5729 18.2865" />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -8,6 +8,7 @@ import IconArrival from '@/components/icons/IconArrival.vue'
 import IconBaggageCabinNone from '@/components/icons/IconBaggageCabinNone.vue'
 import IconBaggageCheckedNone from '@/components/icons/IconBaggageCheckedNone.vue'
 import IconBaggagePersonalNone from '@/components/icons/IconBaggagePersonalNone.vue'
+import IconBaggageSetPlus from '@/components/icons/IconBaggageSetPlus.vue'
 import IconBroadcast from '@/components/icons/IconBroadcast.vue'
 import IconCabinBag from '@/components/icons/IconCabinBag.vue'
 import IconCalendar from '@/components/icons/IconCalendar.vue'
@@ -87,6 +88,7 @@ export const CustomCpIcons = {
   'baggage-cabin-none': IconBaggageCabinNone,
   'baggage-checked-none': IconBaggageCheckedNone,
   'baggage-personal-none': IconBaggagePersonalNone,
+  'baggage-set-plus': IconBaggageSetPlus,
   broadcast: IconBroadcast,
   'calendar-2': IconCalendar,
   'calendar-delay': IconCalendarDelay,