@citizenplane/pimp 8.9.5 → 8.11.0

package/src/components/core/playground-sections/SectionListsAndTables.vue

@@ -237,27 +237,27 @@ export default {
     width: 100%;
 
     > *:not(:last-of-type) {
-      margin-bottom: $space;
+      margin-bottom: sp.$space;
     }
   }
 
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__menu {
     position: absolute;
     box-shadow:
-      0 9px 24px rgba($neutral-dark, 0.2),
-      0 4px 4px rgba($neutral-dark, 0.1);
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-rem(10);
-    background-color: $neutral-light;
-    padding: $space 0;
+      0 9px 24px rgba(colors.$neutral-dark, 0.2),
+      0 4px 4px rgba(colors.$neutral-dark, 0.1);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-rem(10);
+    background-color: colors.$neutral-light;
+    padding: sp.$space 0;
     min-width: 250px;
 
     li {
-      padding: $space $space-md;
+      padding: sp.$space sp.$space-md;
     }
   }
 

package/src/components/core/playground-sections/SectionSelects.vue

@@ -104,7 +104,7 @@ export default {
 <style lang="scss">
 .sectionSelects {
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__selects {
@@ -113,7 +113,7 @@ export default {
     flex-wrap: wrap;
 
     > * {
-      margin: 0 $space-lg $space-lg 0;
+      margin: 0 sp.$space-lg sp.$space-lg 0;
     }
   }
 }

package/src/components/core/playground-sections/SectionSimpleInputs.vue

@@ -289,7 +289,7 @@ export default {
 <style lang="scss">
 .sectionSimpleInputs {
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__inputs {
@@ -298,7 +298,7 @@ export default {
     flex-wrap: wrap;
 
     > * {
-      margin: 0 $space-lg $space-lg 0;
+      margin: 0 sp.$space-lg sp.$space-lg 0;
     }
   }
 }

package/src/components/core/playground-sections/SectionToggles.vue

@@ -142,17 +142,17 @@ export default {
 .sectionToggles {
   &__switch {
     &:not(:last-child) {
-      margin-bottom: $space;
+      margin-bottom: sp.$space;
     }
 
     &--isSmall {
-      font-size: px-to-em(12);
+      font-size: fn.px-to-em(12);
     }
   }
 
   &__customLabel {
-    font-size: px-to-em(14);
-    line-height: px-to-rem(24);
+    font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
   }
 }
 </style>

package/src/components/date-pickers/CpCalendar.vue

@@ -310,12 +310,12 @@ export default {
   }
 
   &__input input:disabled {
-    background-color: $neutral-light;
+    background-color: colors.$neutral-light;
   }
 
   .footer-container {
-    background: $neutral-light;
-    border-top: 1px solid $neutral-dark-5;
+    background: colors.$neutral-light;
+    border-top: 1px solid colors.$neutral-dark-5;
 
     .asd__recurency--action {
       padding: 16px;
@@ -325,7 +325,7 @@ export default {
 
       button {
         font-size: 16px;
-        color: $neutral-dark;
+        color: colors.$neutral-dark;
       }
     }
 
@@ -333,9 +333,9 @@ export default {
       border: #b5b5b5;
 
       &:not([disabled]) {
-        background-color: $primary-color;
-        color: $neutral-light !important;
-        border: $primary-color;
+        background-color: colors.$primary-color;
+        color: colors.$neutral-light !important;
+        border: colors.$primary-color;
       }
     }
 
@@ -363,9 +363,9 @@ export default {
       flex: 1;
       justify-content: center;
       align-items: center;
-      border-top: 1px solid $neutral-dark-5;
+      border-top: 1px solid colors.$neutral-dark-5;
       font-size: 16px;
-      color: $neutral-dark;
+      color: colors.$neutral-dark;
       height: 64px;
       transition: background 200ms linear;
 
@@ -381,13 +381,13 @@ export default {
       .checkbox--border {
         height: 100%;
         width: 100%;
-        border: 1px solid $neutral-dark-5;
+        border: 1px solid colors.$neutral-dark-5;
       }
 
       .feather-check {
         height: 100%;
         width: 100%;
-        color: $accent-color-1;
+        color: colors.$accent-color-1;
       }
 
       span {
@@ -399,7 +399,7 @@ export default {
     }
 
     .asd__recurency--li--selected {
-      color: $accent-color-1;
+      color: colors.$accent-color-1;
     }
 
     .asd__recurency--summary {
@@ -408,7 +408,7 @@ export default {
     }
 
     .asd__recurency--text {
-      background: $neutral-dark;
+      background: colors.$neutral-dark;
       border-radius: 10px;
       display: flex;
       justify-content: center;
@@ -426,7 +426,7 @@ export default {
         font-size: 14px;
 
         strong {
-          color: $neutral-light;
+          color: colors.$neutral-light;
         }
       }
     }

package/src/components/date-pickers/{CpDate/index.vue → CpDate.vue}

@@ -282,5 +282,169 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'index';
+// Reset default input style
+.cpDate {
+  input,
+  select {
+    background-color: transparent;
+    color: colors.$neutral-dark;
+  }
+
+  // Hide arrows from number input
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  // Remove select style
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    outline: none;
+    border: none;
+  }
+}
+
+.cpDate {
+  input::placeholder,
+  &__month--isEmpty {
+    color: colors.$neutral-dark;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    margin-bottom: fn.px-to-em(6);
+    font-size: fn.px-to-em(14);
+    font-weight: 600;
+
+    i {
+      margin-left: sp.$space-sm;
+      width: fn.px-to-rem(16);
+      height: fn.px-to-rem(16);
+      color: colors.$error-color;
+    }
+  }
+
+  &__inputs {
+    display: flex;
+    height: fn.px-to-em(44);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
+    overflow: hidden;
+    background-color: colors.$neutral-light;
+    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(colors.$neutral-dark, 0.12);
+
+    &:hover,
+    &:focus-within {
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
+    }
+
+    &:focus-within {
+      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);
+    }
+  }
+
+  &__divider {
+    flex-shrink: 0;
+    width: fn.px-to-rem(1);
+    height: 100%;
+    background-color: colors.$border-color;
+  }
+
+  &__month,
+  &__day,
+  &__year {
+    min-width: 0;
+  }
+
+  &__month {
+    position: relative;
+    flex: 1 1 50%;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: fn.px-to-em(12);
+      width: fn.px-to-em(20);
+      height: fn.px-to-em(20);
+      background-image: url('@/assets/images/icons/chevron-down-icon.svg');
+      background-size: cover;
+      transform: translateY(-50%);
+      content: '';
+      pointer-events: none;
+    }
+
+    select {
+      @extend %u-text-ellipsis;
+      width: 100%;
+      padding: fn.px-to-em(12) fn.px-to-em(40) fn.px-to-em(12) fn.px-to-em(12);
+      color: inherit;
+      cursor: pointer;
+
+      &:focus-visible {
+        text-decoration: underline;
+        font-weight: 500;
+      }
+    }
+
+    select > option:not(:disabled) {
+      color: colors.$neutral-dark;
+    }
+  }
+
+  &__day,
+  &__year {
+    flex: 0 0 25%;
+    padding: sp.$space-md;
+  }
+
+  &--isInvalid {
+    .cpDate__inputs,
+    .cpDate__inputs:hover,
+    .cpDate__inputs:focus-within {
+      border-color: colors.$error-color;
+    }
+
+    .cpDate__inputs:focus-within {
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
+    }
+
+    .cpDate__divider {
+      background-color: colors.$error-color;
+    }
+  }
+
+  &--isDisabled {
+    .cpDate__inputs {
+      border-color: colors.$neutral-dark-4;
+      background: colors.$neutral-light-1;
+    }
+
+    .cpDate__inputs * {
+      color: colors.$neutral-dark-2 !important;
+      cursor: not-allowed !important;
+    }
+
+    .cpDate__month::after {
+      opacity: 0.4;
+    }
+  }
+
+  &__errorMessage {
+    margin-top: fn.px-to-rem(6);
+    color: colors.$error-color;
+    font-weight: 500;
+    font-size: fn.px-to-em(14);
+  }
+}
 </style>

package/src/components/date-pickers/CpDatepicker.vue

@@ -188,7 +188,7 @@ export default {
   }
 
   &__input input:disabled {
-    background-color: $neutral-light;
+    background-color: colors.$neutral-light;
   }
 
   &__datepicker {

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

@@ -70,7 +70,7 @@ const dismissAlert = () => (isDisplayed.value = false)
   }
 
   &--#{$className} button:focus-visible {
-    outline: px-to-rem(2) solid $color;
+    outline: fn.px-to-rem(2) solid $color;
   }
 }
 
@@ -78,9 +78,9 @@ const dismissAlert = () => (isDisplayed.value = false)
   position: relative;
   display: flex;
   align-items: flex-start;
-  padding: px-to-rem(10);
-  font-size: px-to-em(14);
-  border-radius: px-to-rem(4);
+  padding: fn.px-to-rem(10);
+  font-size: fn.px-to-em(14);
+  border-radius: fn.px-to-rem(4);
   overflow: hidden;
 
   &:before {
@@ -89,18 +89,18 @@ const dismissAlert = () => (isDisplayed.value = false)
     left: 0;
     top: 0;
     height: 100%;
-    width: px-to-rem(3);
+    width: fn.px-to-rem(3);
   }
 
   &__body {
     flex: 1;
-    margin-left: $space;
-    padding-right: calc(#{px-to-rem(18)} + #{$space-lg});
+    margin-left: sp.$space;
+    padding-right: calc(#{fn.px-to-rem(18)} + #{sp.$space-lg});
   }
 
   &__iconWrapper {
     display: flex;
-    padding-block: $space-xs;
+    padding-block: sp.$space-xs;
   }
 
   &__icon {
@@ -110,15 +110,15 @@ const dismissAlert = () => (isDisplayed.value = false)
     i {
       display: inline-block;
       vertical-align: sub;
-      width: px-to-rem(16);
-      height: px-to-rem(16);
+      width: fn.px-to-rem(16);
+      height: fn.px-to-rem(16);
     }
   }
 
   &__icon,
   &__content,
   &__title {
-    line-height: px-to-rem(19);
+    line-height: fn.px-to-rem(19);
   }
 
   &__title {
@@ -126,23 +126,23 @@ const dismissAlert = () => (isDisplayed.value = false)
     font-weight: 600;
 
     &:not(:only-child) {
-      margin-bottom: $space-sm;
+      margin-bottom: sp.$space-sm;
     }
   }
 
   &__button {
     display: flex;
     position: absolute;
-    right: px-to-rem(7);
-    top: px-to-rem(7);
-    border-radius: px-to-rem(4);
-    padding: $space-sm;
+    right: fn.px-to-rem(7);
+    top: fn.px-to-rem(7);
+    border-radius: fn.px-to-rem(4);
+    padding: sp.$space-sm;
     color: inherit;
 
     svg {
       margin: 0;
-      width: px-to-rem(18);
-      height: px-to-rem(18);
+      width: fn.px-to-rem(18);
+      height: fn.px-to-rem(18);
     }
 
     &:hover {
@@ -150,9 +150,9 @@ const dismissAlert = () => (isDisplayed.value = false)
     }
   }
 
-  @include cp-alert-style($secondary-color, 'info');
-  @include cp-alert-style($success-color, 'success');
-  @include cp-alert-style($warning-color, 'warning');
-  @include cp-alert-style($error-color, 'critical');
+  @include cp-alert-style(colors.$secondary-color, 'info');
+  @include cp-alert-style(colors.$success-color, 'success');
+  @include cp-alert-style(colors.$warning-color, 'warning');
+  @include cp-alert-style(colors.$error-color, 'critical');
 }
 </style>

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

@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import anime from 'animejs'
+import { animate } from 'animejs'
 
 import { Intent } from '@/utils/constants'
 import { randomString } from '@/helpers'
 
-import CpHeading from '@/components/typography/CpHeading/index.vue'
+import CpHeading from '@/components/typography/CpHeading.vue'
 import CpIcon from '@/components/visual/CpIcon.vue'
 
 export default {
@@ -203,24 +203,22 @@ export default {
       }
     },
     async enter(el, done) {
-      anime({
-        targets: el,
+      animate(el, {
         translateY: [-60, 0],
         opacity: [0, 1],
         duration: 240,
-        easing: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
+        ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
         complete: function () {
           done()
         },
       })
     },
     async leave(el, done) {
-      anime({
-        targets: el,
+      animate(el, {
         scale: [1, 0.8],
         opacity: [1, 0],
         duration: 240,
-        easing: 'cubicBezier(0.0, 0.0, 0.2, 1)',
+        ease: 'cubicBezier(0.0, 0.0, 0.2, 1)',
         complete: function () {
           done()
         },
@@ -246,17 +244,17 @@ export default {
   box-shadow:
     rgba(67, 90, 111, 0.3) 0 0 1px,
     rgba(67, 90, 111, 0.47) 0 8px 10px -4px;
-  background: $neutral-light;
-  padding: $space-md;
+  background: colors.$neutral-light;
+  padding: sp.$space-md;
   overflow: hidden;
   width: max-content;
   max-width: 100%;
   margin: auto;
   pointer-events: auto;
-  font-size: px-to-rem(14);
+  font-size: fn.px-to-rem(14);
 
   @media (min-width: 769px) {
-    border-radius: px-to-rem(8);
+    border-radius: fn.px-to-rem(8);
   }
 
   @media (max-width: 768px) {
@@ -268,7 +266,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: px-to-rem(3);
+    width: fn.px-to-rem(3);
     height: 100%;
   }
 
@@ -279,12 +277,12 @@ export default {
     left: 0;
     right: 0;
     margin: auto;
-    padding: $space-lg;
-    max-width: px-to-rem(400);
+    padding: sp.$space-lg;
+    max-width: fn.px-to-rem(400);
     pointer-events: none;
 
     & > *:not(:last-child) {
-      margin-bottom: $space;
+      margin-bottom: sp.$space;
     }
 
     @media (max-width: 768px) {
@@ -299,71 +297,71 @@ export default {
 
   &__body {
     flex: 1;
-    margin-left: $space;
-    padding-right: calc(#{$space-lg} + #{$space-lg});
+    margin-left: sp.$space;
+    padding-right: calc(sp.$space-lg + sp.$space-lg);
   }
 
   &__icon {
     flex-shrink: 0;
-    height: px-to-rem(16);
-    width: px-to-rem(16);
+    height: fn.px-to-rem(16);
+    width: fn.px-to-rem(16);
   }
 
   &__content,
   &__title {
-    line-height: px-to-rem(16);
+    line-height: fn.px-to-rem(16);
   }
 
   &__title {
     font-weight: 600;
 
     &:not(:only-child) {
-      margin-bottom: $space-sm;
+      margin-bottom: sp.$space-sm;
     }
   }
 
   &__description {
-    font-size: px-to-rem(14);
+    font-size: fn.px-to-rem(14);
   }
 
   &__close {
     position: absolute;
-    right: $space;
-    top: $space;
+    right: sp.$space;
+    top: sp.$space;
     display: flex;
-    border-radius: px-to-rem(4);
-    padding: $space-sm;
-    color: $neutral-dark-1;
+    border-radius: fn.px-to-rem(4);
+    padding: sp.$space-sm;
+    color: colors.$neutral-dark-1;
 
     svg {
       margin: 0;
-      width: px-to-rem(18);
-      height: px-to-rem(18);
+      width: fn.px-to-rem(18);
+      height: fn.px-to-rem(18);
     }
 
     &:hover {
-      background-color: rgba($neutral-dark-1, 0.1);
+      background-color: rgba(colors.$neutral-dark-1, 0.1);
     }
   }
 
   &__footer {
     display: flex;
     justify-content: flex-end;
-    margin-top: $space-lg;
+    margin-top: sp.$space-lg;
   }
 
   &__button {
-    font-size: px-to-rem(12);
-    color: $secondary-color;
+    font-size: fn.px-to-rem(12);
+    color: colors.$secondary-color;
 
     &:not(:hover) {
       text-decoration: underline;
     }
   }
 
-  @include cp-toaster-style($secondary-color, 'info');
-  @include cp-toaster-style($warning-color, 'warning');
-  @include cp-toaster-style($success-color, 'success');
-  @include cp-toaster-style($error-color, 'critical');
+  @include cp-toaster-style(colors.$secondary-color, 'info');
+  @include cp-toaster-style(colors.$warning-color, 'warning');
+  @include cp-toaster-style(colors.$success-color, 'success');
+  @include cp-toaster-style(colors.$error-color, 'critical');
 }
 </style>

package/src/components/index.js

@@ -14,13 +14,13 @@ import CpDialogWrapper from './atomic-elements/CpDialogWrapper.vue'
 import CpTooltip from './atomic-elements/CpTooltip.vue'
 
 // Typography
-import CpHeading from './typography/CpHeading/index.vue'
+import CpHeading from './typography/CpHeading.vue'
 
 // Buttons
 import CpButton from './buttons/CpButton.vue'
 
 // Date pickers
-import CpDate from './date-pickers/CpDate/index.vue'
+import CpDate from './date-pickers/CpDate.vue'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpDatepicker from './date-pickers/CpDatepicker.vue'
 import CpCalendar from './date-pickers/CpCalendar.vue'
@@ -38,15 +38,15 @@ import CpTextarea from './inputs/CpTextarea.vue'
 
 // Selects
 import CpSelect from './selects/CpSelect.vue'
-import CpSelectMenu from './selects/CpSelectMenu/index.vue'
+import CpSelectMenu from './selects/CpSelectMenu.vue'
 
 // Toggles
-import CpCheckbox from './toggles/CpCheckbox/index.vue'
-import CpRadio from './toggles/CpRadio/index.vue'
-import CpSwitch from './toggles/CpSwitch/index.vue'
+import CpCheckbox from './toggles/CpCheckbox.vue'
+import CpRadio from './toggles/CpRadio.vue'
+import CpSwitch from './toggles/CpSwitch.vue'
 
 // List and Tables
-import CpTable from './lists-and-table/CpTable/index.vue'
+import CpTable from './lists-and-table/CpTable.vue'
 
 // Visual
 import CpIcon from './visual/CpIcon.vue'