@citizenplane/pimp 8.9.5 → 8.11.0

package/src/assets/styl/colors.styl

@@ -1,39 +0,0 @@
-// CitizenPlane colors
-$astronaut = #3E3E5B
-$gray-1 = #8B8B9D
-$gray-2 = #B2B2BD
-$gray-3 = #C6C6CE
-$gray-4 = #D8D8DE
-$gray-5 = #ECECEF
-
-$red = #FC5959
-$yellow = #FFD00B
-$green-2 = #00C582
-$green-1 = #00F8A4
-
-$purple = #5341F9
-$blue = #144DC2
-$blue-1 = #56C1FE
-$pink = #FF7DC1
-
-// Main colors
-$primary-color = $purple
-$secondary-color = $blue
-$tertiary-color = $pink
-
-// Accent colors
-$error-color = $red
-$success-color = $green-2
-$success-color-light = $green-1
-$accent-color-1 = $blue-1
-
-// Neutral colors
-$neutral-dark = $astronaut
-// Gray
-$neutral-dark-1 = $gray-1
-$neutral-dark-2 = $gray-2
-$neutral-dark-3 = $gray-3
-$neutral-dark-4 = $gray-4
-$neutral-dark-5 = $gray-5
-// White
-$neutral-light = #FFFFFF

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

@@ -1,165 +0,0 @@
-// Reset default input style
-.cpDate {
-  input,
-  select {
-    background-color: transparent;
-    color: $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: $neutral-dark;
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    margin-bottom: px-to-em(6);
-    font-size: px-to-em(14);
-    font-weight: 600;
-
-    i {
-      margin-left: $space-sm;
-      width: px-to-rem(16);
-      height: px-to-rem(16);
-      color: $error-color;
-    }
-  }
-
-  &__inputs {
-    display: flex;
-    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 px-to-em(1) px-to-em(2) rgba($neutral-dark, 0.12);
-
-    &:hover,
-    &:focus-within {
-      border-color: $secondary-color;
-      background-color: $neutral-light;
-    }
-
-    &:focus-within {
-      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: px-to-rem(1);
-    height: 100%;
-    background-color: $border-color;
-  }
-
-  &__month,
-  &__day,
-  &__year {
-    min-width: 0;
-  }
-
-  &__month {
-    position: relative;
-    flex: 1 1 50%;
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      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%);
-      content: '';
-      pointer-events: none;
-    }
-
-    select {
-      @extend %u-text-ellipsis;
-      width: 100%;
-      padding: px-to-em(12) px-to-em(40) px-to-em(12) px-to-em(12);
-      color: inherit;
-      cursor: pointer;
-
-      &:focus-visible {
-        text-decoration: underline;
-        font-weight: 500;
-      }
-    }
-
-    select > option:not(:disabled) {
-      color: $neutral-dark;
-    }
-  }
-
-  &__day,
-  &__year {
-    flex: 0 0 25%;
-    padding: $space-md;
-  }
-
-  &--isInvalid {
-    .cpDate__inputs,
-    .cpDate__inputs:hover,
-    .cpDate__inputs:focus-within {
-      border-color: $error-color;
-    }
-
-    .cpDate__inputs:focus-within {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
-    }
-
-    .cpDate__divider {
-      background-color: $error-color;
-    }
-  }
-
-  &--isDisabled {
-    .cpDate__inputs {
-      border-color: $neutral-dark-4;
-      background: $neutral-light-1;
-    }
-
-    .cpDate__inputs * {
-      color: $neutral-dark-2 !important;
-      cursor: not-allowed !important;
-    }
-
-    .cpDate__month::after {
-      opacity: 0.4;
-    }
-  }
-
-  &__errorMessage {
-    margin-top: px-to-rem(6);
-    color: $error-color;
-    font-weight: 500;
-    font-size: px-to-em(14);
-  }
-}

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

@@ -1,325 +0,0 @@
-@import '/src/assets/styles/main';
-
-.cpTable {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  &__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    &--hasPagination {
-      border-bottom: px-to-rem(1) solid $border-color;
-    }
-  }
-
-  /* Standard Tables */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    overflow: auto;
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex]:focus {
-    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 {
-    margin: 0;
-    border: none;
-  }
-
-  /* Scrolling Visual Cue */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    background:
-      linear-gradient(to right, $neutral-light 30%, rgba(255, 255, 255, 0)),
-      linear-gradient(to right, rgba($neutral-light, 0), $neutral-light 70%) 0 100%,
-      radial-gradient(farthest-side at 0% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)),
-      radial-gradient(farthest-side at 100% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)) 0 100%;
-    background-repeat: no-repeat;
-    background-color: $neutral-light;
-    background-size:
-      40px 100%,
-      40px 100%,
-      14px 100%,
-      14px 100%;
-    background-position:
-      0 0,
-      100%,
-      0 0,
-      100%;
-    background-attachment: local, local, scroll, scroll;
-  }
-
-  &__caption {
-    position: sticky;
-    left: 0;
-    margin-bottom: $space-lg;
-    text-align: left;
-    font-size: px-to-em(18);
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  &__table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  &__row {
-    &--body:not(:last-of-type) {
-      border-bottom: px-to-rem(1) solid $border-color;
-    }
-
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
-      background-color: rgba($neutral-dark, 0.05);
-      transition: background-color 0.1s ease-in-out;
-    }
-
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
-      color: $primary-color;
-    }
-
-    &--isFullWidth td {
-      padding: $space;
-      background-color: rgba($neutral-dark, 0.03);
-    }
-
-    &--isClickable {
-      cursor: pointer;
-    }
-
-    &--isSelected {
-      background-color: rgba($primary-color, 0.1);
-      color: $primary-color;
-    }
-
-    &--body td {
-      font-size: px-to-em(14);
-    }
-  }
-
-  &__column {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    background-color: $neutral-light;
-    padding: $space $space-md;
-    text-align: left;
-    white-space: nowrap;
-    font-size: px-to-em(12);
-    font-weight: normal;
-    color: $neutral-dark-1;
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-
-    /* Workaround for sticky header border-bottom */
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: px-to-rem(1);
-      background-color: $border-color;
-    }
-  }
-
-  &__body {
-    vertical-align: middle;
-  }
-
-  &__row--body,
-  &__cell {
-    vertical-align: inherit;
-  }
-
-  &__cell {
-    &:not(#{&}--isFullWidth):not(#{&}--isOptions) {
-      padding: $space-lg $space-md;
-      white-space: nowrap;
-    }
-
-    &--isFullWidth span,
-    &--isOptions {
-      position: sticky;
-    }
-
-    &--isFullWidth span {
-      left: 50%;
-      transform: translateX(-50%);
-      display: inline-block;
-    }
-
-    &--isOptions {
-      right: 0;
-      padding: 0 $space-md;
-    }
-
-    &--isOptions button {
-      border: px-to-rem(1) solid $border-color;
-      border-radius: px-to-rem(8);
-      background-color: $neutral-light;
-      display: inline-flex;
-      padding: $space-sm;
-      color: $neutral-dark-1;
-
-      &:hover {
-        background-color: scale-color($neutral-dark, $lightness: 98%);
-        color: $neutral-dark;
-      }
-
-      &:focus {
-        outline: none !important;
-        box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
-      }
-    }
-
-    &--isOptions i {
-      width: px-to-rem(16);
-      height: px-to-rem(16);
-    }
-  }
-
-  // On desktop devices, display options only on row focus or hover
-  @media (hover: hover) and (pointer: fine) {
-    &__cell--isOptions {
-      opacity: 0;
-      transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175);
-    }
-
-    &__row:focus &__cell--isOptions,
-    &__row:focus-within &__cell--isOptions,
-    &__row:hover &__cell--isOptions {
-      opacity: 1;
-    }
-  }
-
-  &__emptyState {
-    flex: 1;
-  }
-
-  &--isLoading &__overlay {
-    opacity: 0.5;
-    pointer-events: all;
-  }
-
-  &__overlay {
-    position: absolute;
-    overflow: hidden;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border-radius: px-to-rem(10);
-    background-color: $neutral-light;
-    z-index: 4;
-    opacity: 0;
-    transition: 0.15s opacity ease-in-out;
-    cursor: wait;
-    pointer-events: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      transform: translateX(-100%);
-      background-image: linear-gradient(
-        90deg,
-        rgba($neutral-dark-3, 0) 0,
-        rgba($neutral-dark-3, 0.2) 20%,
-        rgba($neutral-dark-3, 0.5) 60%,
-        rgba($neutral-dark-3, 0)
-      );
-      animation: shimmer 2s infinite;
-    }
-
-    @keyframes shimmer {
-      100% {
-        transform: translateX(100%);
-      }
-    }
-  }
-
-  &__loader {
-    width: px-to-rem(32);
-    height: px-to-rem(32);
-
-    &--isSmall {
-      display: inline-block;
-      vertical-align: middle;
-      width: px-to-rem(24);
-      height: px-to-rem(24);
-    }
-  }
-
-  &__footer {
-    padding: $space-lg $space-md 0;
-    display: flex;
-    align-items: center;
-    font-size: px-to-em(14);
-  }
-
-  .footer {
-    &__details,
-    &__pagination {
-      flex: 1;
-    }
-
-    &__results {
-      font-variant-numeric: tabular-nums;
-      color: $neutral-dark-1;
-    }
-
-    &__results strong {
-      color: $neutral-dark;
-    }
-
-    &__pagination {
-      text-align: right;
-    }
-
-    &__pagination button {
-      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;
-      background-color: $neutral-light;
-
-      &:hover {
-        background-color: rgba($neutral-dark, 0.05);
-      }
-
-      &:focus {
-        outline: none !important;
-        box-shadow: 0 0 0 px-to-em(3) scale-color($blue, $lightness: 70%);
-      }
-
-      &:disabled {
-        box-shadow: none;
-        border-color: $neutral-light-1;
-        background-color: $neutral-light-1;
-        color: $neutral-dark-2;
-        cursor: not-allowed;
-        user-select: none;
-      }
-
-      &:last-of-type {
-        margin-left: $space;
-      }
-    }
-  }
-}