@citizenplane/pimp 8.2.7 → 8.2.8

package/src/components/date-pickers/CpDate/index.scss

@@ -36,25 +36,25 @@
   &__label {
     display: flex;
     align-items: center;
-    margin-bottom: pxToEm(6);
-    font-size: pxToEm(14);
+    margin-bottom: px-to-em(6);
+    font-size: px-to-em(14);
 
     svg {
       margin-left: $space-sm;
-      width: pxToRem(16);
-      height: pxToRem(16);
+      width: px-to-rem(16);
+      height: px-to-rem(16);
       stroke: $error-color;
     }
   }
 
   &__inputs {
     display: flex;
-    height: pxToEm(44);
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    height: px-to-em(44);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(10);
     overflow: hidden;
     background-color: $neutral-light;
-    box-shadow: inset 0 pxToEm(1) pxToEm(2) rgba($neutral-dark, 0.12);
+    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba($neutral-dark, 0.12);
 
     &:hover,
     &:focus-within {
@@ -63,13 +63,13 @@
     }
 
     &:focus-within {
-      box-shadow: rgba($secondary-color, 0.1) 0 0 0 pxToRem(4), $secondary-color 0 0 0 pxToRem(0.5);
+      box-shadow: rgba($secondary-color, 0.1) 0 0 0 px-to-rem(4), $secondary-color 0 0 0 px-to-rem(0.5);
     }
   }
 
   &__divider {
     flex-shrink: 0;
-    width: pxToRem(1);
+    width: px-to-rem(1);
     height: 100%;
     background-color: $border-color;
   }
@@ -87,9 +87,9 @@
     &::after {
       position: absolute;
       top: 50%;
-      right: pxToEm(12);
-      width: pxToEm(20);
-      height: pxToEm(20);
+      right: px-to-em(12);
+      width: px-to-em(20);
+      height: px-to-em(20);
       background-image: url('@/assets/images/icons/chevron-down-icon.svg');
       background-size: cover;
       transform: translateY(-50%);
@@ -100,7 +100,7 @@
     select {
       @extend %u-text-ellipsis;
       width: 100%;
-      padding: pxToEm(12) pxToEm(40) pxToEm(12) pxToEm(12);
+      padding: px-to-em(12) px-to-em(40) px-to-em(12) px-to-em(12);
       color: inherit;
       cursor: pointer;
 
@@ -129,7 +129,7 @@
     }
 
     .cpDate__inputs:focus-within {
-      box-shadow: 0 0 0 pxToEm(3) scale-color($error-color, $lightness: 60%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
     }
 
     .cpDate__divider {
@@ -154,9 +154,9 @@
   }
 
   &__errorMessage {
-    margin-top: pxToRem(6);
+    margin-top: px-to-rem(6);
     color: $error-color;
     font-weight: 500;
-    font-size: pxToEm(14);
+    font-size: px-to-em(14);
   }
 }

package/src/components/feedback-indicators/CpAlert.vue

@@ -72,7 +72,7 @@ export default {
   }
 
   &--#{$className} button:focus-visible {
-    outline: pxToRem(2) solid $color;
+    outline: px-to-rem(2) solid $color;
   }
 }
 
@@ -80,9 +80,9 @@ export default {
   position: relative;
   display: flex;
   align-items: flex-start;
-  padding: pxToRem(10);
-  font-size: pxToEm(14);
-  border-radius: pxToRem(4);
+  padding: px-to-rem(10);
+  font-size: px-to-em(14);
+  border-radius: px-to-rem(4);
   overflow: hidden;
 
   &:before {
@@ -91,13 +91,13 @@ export default {
     left: 0;
     top: 0;
     height: 100%;
-    width: pxToRem(3);
+    width: px-to-rem(3);
   }
 
   &__body {
     flex: 1;
     margin-left: $space;
-    padding-right: calc(#{pxToRem(18)} + #{$space-lg});
+    padding-right: calc(#{px-to-rem(18)} + #{$space-lg});
   }
 
   &__icon {
@@ -107,15 +107,15 @@ export default {
     i {
       display: inline-block;
       vertical-align: sub;
-      width: pxToRem(16);
-      height: pxToRem(16);
+      width: px-to-rem(16);
+      height: px-to-rem(16);
     }
   }
 
   &__icon,
   &__content,
   &__title {
-    line-height: pxToRem(19);
+    line-height: px-to-rem(19);
   }
 
   &__title {
@@ -128,17 +128,18 @@ export default {
   }
 
   &__button {
+    display: flex;
     position: absolute;
-    right: pxToRem(5);
-    top: pxToRem(5);
-    border-radius: pxToRem(4);
+    right: px-to-rem(7);
+    top: px-to-rem(7);
+    border-radius: px-to-rem(4);
     padding: $space-sm;
     color: inherit;
 
     svg {
       margin: 0;
-      width: pxToRem(18);
-      height: pxToRem(18);
+      width: px-to-rem(18);
+      height: px-to-rem(18);
     }
 
     &:hover {

package/src/components/feedback-indicators/CpToaster.vue

@@ -251,10 +251,10 @@ export default {
   max-width: 100%;
   margin: auto;
   pointer-events: auto;
-  font-size: pxToRem(14);
+  font-size: px-to-rem(14);
 
   @media (min-width: 769px) {
-    border-radius: pxToRem(8);
+    border-radius: px-to-rem(8);
   }
 
   @media (max-width: 768px) {
@@ -266,7 +266,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: pxToRem(3);
+    width: px-to-rem(3);
     height: 100%;
   }
 
@@ -278,7 +278,7 @@ export default {
     right: 0;
     margin: auto;
     padding: $space-lg;
-    max-width: pxToRem(400);
+    max-width: px-to-rem(400);
     pointer-events: none;
 
     & > *:not(:last-child) {
@@ -303,13 +303,13 @@ export default {
 
   &__icon {
     flex-shrink: 0;
-    height: pxToRem(16);
-    width: pxToRem(16);
+    height: px-to-rem(16);
+    width: px-to-rem(16);
   }
 
   &__content,
   &__title {
-    line-height: pxToRem(16);
+    line-height: px-to-rem(16);
   }
 
   &__title {
@@ -321,21 +321,21 @@ export default {
   }
 
   &__description {
-    font-size: pxToRem(14);
+    font-size: px-to-rem(14);
   }
 
   &__close {
     position: absolute;
     right: $space;
     top: $space;
-    border-radius: pxToRem(4);
+    border-radius: px-to-rem(4);
     padding: $space-sm;
     color: $neutral-dark-1;
 
     svg {
       margin: 0;
-      width: pxToRem(18);
-      height: pxToRem(18);
+      width: px-to-rem(18);
+      height: px-to-rem(18);
     }
 
     &:hover {
@@ -350,7 +350,7 @@ export default {
   }
 
   &__button {
-    font-size: pxToRem(12);
+    font-size: px-to-rem(12);
     color: $secondary-color;
 
     &:not(:hover) {

package/src/components/inputs/CpInput.vue

@@ -218,23 +218,23 @@ export default {
   }
 
   &__inner {
-    box-shadow: inset 0 pxToEm(1) pxToEm(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
     appearance: none;
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(10);
     outline: none;
     width: 100%;
     height: $component-size-default;
     color: inherit;
-    padding: pxToEm(12);
-    font-size: pxToEm(16);
+    padding: px-to-em(12);
+    font-size: px-to-em(16);
 
     &:hover {
       @include cp-input-hover-style;
     }
 
     &:focus {
-      box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
       border-color: $secondary-color;
       background-color: $neutral-light;
     }
@@ -249,11 +249,11 @@ export default {
     .cpInput__inner:hover,
     .cpInput__inner:focus,
     .cpInput__icon:hover ~ .cpInput__inner {
-      border: pxToRem(1) solid $error-color;
+      border: px-to-rem(1) solid $error-color;
     }
 
     .cpInput__inner:focus {
-      box-shadow: 0 0 0 pxToEm(3) scale-color($error-color, $lightness: 60%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
     }
   }
 
@@ -290,18 +290,18 @@ export default {
     display: block;
 
     &:not(#{&}--isAfter) {
-      margin-bottom: pxToEm(6);
+      margin-bottom: px-to-em(6);
     }
 
     &--isAfter {
-      margin-top: pxToEm(6);
+      margin-top: px-to-em(6);
     }
   }
 
-  $cp-input-icon-size: pxToEm(20);
+  $cp-input-icon-size: px-to-em(20);
 
   &__icon {
-    left: pxToEm(12);
+    left: px-to-em(12);
     z-index: 1;
     position: absolute;
     top: 50%;
@@ -331,7 +331,7 @@ export default {
     &--isAfter,
     &--isValidity {
       left: auto;
-      right: pxToEm(12);
+      right: px-to-em(12);
       justify-content: flex-end;
     }
 
@@ -340,34 +340,34 @@ export default {
     }
 
     &--isAfter ~ input {
-      padding-right: calc(#{pxToEm(12)} + #{$cp-input-icon-size} * 2 + #{pxToEm(8)});
+      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)});
     }
 
     &--isBefore ~ input {
-      padding-left: calc(#{pxToEm(12)} + #{$cp-input-icon-size} + #{pxToEm(8)});
+      padding-left: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
     }
 
     &--isValidity ~ input {
-      padding-right: calc(#{pxToEm(12)} + #{$cp-input-icon-size} + #{pxToEm(8)});
+      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
     }
 
     &--hasAfterAndValidityIcon ~ input {
-      padding-right: calc(#{pxToEm(12)} + #{$cp-input-icon-size} * 2 + #{pxToEm(8)} * 2);
+      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)} * 2);
     }
 
     &--isValidity#{&}--isValid,
     &--isValidity#{&}--isInvalid {
       + .cpInput__icon--isAfter {
-        right: calc(#{pxToEm(12)} + #{$cp-input-icon-size} + #{pxToEm(8)});
+        right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
         transition: right 0.25s cubic-bezier(0.17, 0.84, 0.44, 1);
       }
     }
   }
 
   &--isLarge {
-    $cp-input-large-icon-size: pxToEm(24);
-    $cp-input-large-spacing: pxToEm(12);
-    $cp-input-large-padding: pxToEm(16);
+    $cp-input-large-icon-size: px-to-em(24);
+    $cp-input-large-spacing: px-to-em(12);
+    $cp-input-large-padding: px-to-em(16);
 
     .cpInput__inner {
       height: $component-size-large;
@@ -407,7 +407,7 @@ export default {
     .cpInput__icon--isValidity.cpInput__icon--isValid,
     .cpInput__icon--isValidity.cpInput__icon--isInvalid {
       + .cpInput__icon--isAfter {
-        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{pxToEm(8)});
+        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{px-to-em(8)});
       }
     }
   }

package/src/components/inputs/CpTextarea.vue

@@ -115,16 +115,16 @@ export default {
 <style lang="scss">
 .cpTextarea {
   &__input {
-    box-shadow: inset 0 pxToEm(1) pxToEm(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
     appearance: none;
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(10);
     outline: none;
-    padding: pxToEm(16);
+    padding: px-to-em(16);
     width: 100%;
     max-width: 100%;
     height: 100%;
-    font-size: pxToEm(16);
+    font-size: px-to-em(16);
     color: $neutral-dark;
 
     &:hover {
@@ -132,7 +132,7 @@ export default {
     }
 
     &:focus {
-      box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
       border-color: $secondary-color;
       background-color: $neutral-light;
     }
@@ -148,16 +148,16 @@ export default {
     }
 
     &--isInvalid {
-      box-shadow: 0 0 0 pxToRem(0.5) $error-color;
-      border: pxToRem(1) solid $error-color;
+      box-shadow: 0 0 0 px-to-rem(0.5) $error-color;
+      border: px-to-rem(1) solid $error-color;
 
       &:hover,
       &:focus {
-        border: pxToRem(1) solid $error-color;
+        border: px-to-rem(1) solid $error-color;
       }
 
       &:focus {
-        box-shadow: 0 0 0 pxToEm(3) scale-color($error-color, $lightness: 60%);
+        box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
       }
     }
   }
@@ -166,11 +166,11 @@ export default {
     display: block;
 
     &:not(#{&}--isAfter) {
-      margin-bottom: pxToEm(6);
+      margin-bottom: px-to-em(6);
     }
 
     &--isAfter {
-      margin-top: pxToEm(6);
+      margin-top: px-to-em(6);
     }
   }
 }

package/src/components/lists-and-table/CpTable/CpTableEmptyState/index.vue

@@ -30,7 +30,7 @@ export default {
 
   &__icon {
     margin-bottom: $space-xl;
-    border-radius: pxToRem(4);
+    border-radius: px-to-rem(4);
     display: inline-block;
     background-color: $neutral-light-1;
     padding: $space-lg;
@@ -43,7 +43,7 @@ export default {
 
   &__headline {
     margin-bottom: $space;
-    font-size: pxToEm(20);
+    font-size: px-to-em(20);
   }
 
   &__description {

package/src/components/lists-and-table/CpTable/index.scss

@@ -12,7 +12,7 @@
     flex: 1;
 
     &--hasPagination {
-      border-bottom: pxToRem(1) solid $border-color;
+      border-bottom: px-to-rem(1) solid $border-color;
     }
   }
 
@@ -22,8 +22,8 @@
   }
 
   &__container[role='region'][aria-labelledby][tabindex]:focus {
-    border-radius: pxToRem(10);
-    box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
+    border-radius: px-to-rem(10);
+    box-shadow: 0 0 0 px-to-em(3) scale-color($blue, $lightness: 70%);
   }
 
   &__container[role='region'][aria-labelledby][tabindex] &__table {
@@ -49,7 +49,7 @@
     left: 0;
     margin-bottom: $space-lg;
     text-align: left;
-    font-size: pxToEm(18);
+    font-size: px-to-em(18);
 
     &:first-letter {
       text-transform: capitalize;
@@ -63,7 +63,7 @@
 
   &__row {
     &--body:not(:last-of-type) {
-      border-bottom: pxToRem(1) solid $border-color;
+      border-bottom: px-to-rem(1) solid $border-color;
     }
 
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
@@ -93,7 +93,7 @@
     }
 
     &--body td {
-      font-size: pxToEm(14);
+      font-size: px-to-em(14);
     }
   }
 
@@ -105,7 +105,7 @@
     padding: $space $space-md;
     text-align: left;
     white-space: nowrap;
-    font-size: pxToEm(12);
+    font-size: px-to-em(12);
     font-weight: normal;
     color: $neutral-dark-1;
 
@@ -120,7 +120,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: pxToRem(1);
+      height: px-to-rem(1);
       background-color: $border-color;
     }
   }
@@ -157,8 +157,8 @@
     }
 
     &--isOptions button {
-      border: pxToRem(1) solid $border-color;
-      border-radius: pxToRem(8);
+      border: px-to-rem(1) solid $border-color;
+      border-radius: px-to-rem(8);
       background-color: $neutral-light;
       display: inline-flex;
       padding: $space-sm;
@@ -171,13 +171,13 @@
 
       &:focus {
         outline: none !important;
-        box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
+        box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
       }
     }
 
     &--isOptions svg {
-      width: pxToRem(16);
-      height: pxToRem(16);
+      width: px-to-rem(16);
+      height: px-to-rem(16);
     }
   }
 
@@ -211,7 +211,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    border-radius: pxToRem(10);
+    border-radius: px-to-rem(10);
     background-color: $neutral-light;
     z-index: 4;
     opacity: 0;
@@ -245,14 +245,14 @@
   }
 
   &__loader {
-    width: pxToRem(32);
-    height: pxToRem(32);
+    width: px-to-rem(32);
+    height: px-to-rem(32);
 
     &--isSmall {
       display: inline-block;
       vertical-align: middle;
-      width: pxToRem(24);
-      height: pxToRem(24);
+      width: px-to-rem(24);
+      height: px-to-rem(24);
     }
   }
 
@@ -260,7 +260,7 @@
     padding: $space-lg $space-md 0;
     display: flex;
     align-items: center;
-    font-size: pxToEm(14);
+    font-size: px-to-em(14);
   }
 
   .footer {
@@ -283,10 +283,10 @@
     }
 
     &__pagination button {
-      box-shadow: 0 pxToRem(1) pxToRem(2) rgba($neutral-dark, 0.08);
-      border-radius: pxToRem(10);
-      border: pxToRem(1) solid $border-color;
-      padding: pxToRem(6) pxToRem(10);
+      box-shadow: 0 px-to-rem(1) px-to-rem(2) rgba($neutral-dark, 0.08);
+      border-radius: px-to-rem(10);
+      border: px-to-rem(1) solid $border-color;
+      padding: px-to-rem(6) px-to-rem(10);
       transition: background-color 0.15s;
 
       &:hover {
@@ -295,7 +295,7 @@
 
       &:focus {
         outline: none !important;
-        box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
+        box-shadow: 0 0 0 px-to-em(3) scale-color($blue, $lightness: 70%);
       }
 
       &:disabled {

package/src/components/lists-and-table/CpTable/index.vue

@@ -75,7 +75,7 @@
               <strong>
                 {{ paginationLabel }}
               </strong>
-              <span class="footer__resultsCount">on {{ paginationResultsDetails }}</span>
+              <span class="footer__resultsCount"> on {{ paginationResultsDetails }}</span>
             </template>
             <template v-else> No results </template>
           </slot>