@citizenplane/pimp 9.1.12 → 9.2.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%);
     }
   }