@citizenplane/pimp 6.3.1 → 6.4.0

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

@@ -0,0 +1,308 @@
+@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: pxToRem(1) solid $border-color;
+    }
+  }
+
+  /* Standard Tables */
+  &__container[role='region'][aria-labelledby][tabindex] {
+    overflow: auto;
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex]:focus {
+    border-radius: pxToRem(10);
+    box-shadow: 0 0 0 pxToEm(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: pxToEm(18);
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+
+  &__table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  &__row {
+    &--body:not(:last-of-type) {
+      border-bottom: pxToRem(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: pxToEm(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: pxToEm(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: pxToRem(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: pxToRem(1) solid $border-color;
+      border-radius: pxToRem(8);
+      background-color: $neutral-light;
+      padding: $space-sm;
+      color: $neutral-dark-1;
+
+      &:hover {
+        background-color: scale-color($neutral-dark, $lightness: 98%);
+        color: $neutral-dark;
+      }
+    }
+
+    &--isOptions svg {
+      width: pxToRem(16);
+      height: pxToRem(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: pxToRem(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: pxToRem(32);
+    height: pxToRem(32);
+
+    &--isSmall {
+      display: inline-block;
+      vertical-align: middle;
+      width: pxToRem(24);
+      height: pxToRem(24);
+    }
+  }
+
+  &__footer {
+    padding: $space-lg $space-md 0;
+    display: flex;
+    align-items: center;
+    font-size: pxToEm(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 pxToRem(1) pxToRem(2) rgba($neutral-dark, 0.08);
+      border-radius: pxToRem(10);
+      border: pxToRem(1) solid $border-color;
+      padding: pxToRem(6) pxToRem(10);
+      transition: background-color 0.15s;
+
+      &:hover {
+        background-color: rgba($neutral-dark, 0.05);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 pxToEm(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;
+      }
+    }
+  }
+}

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

@@ -54,7 +54,7 @@
                   <template v-else>{{ cellValue }}</template>
                 </slot>
               </td>
-              <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell--isOptions">
+              <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell cpTable__cell--isOptions">
                 <button @click.stop="handleRowRightClick({ rowData, rowIndex }, $event)"><more-vertical-icon /></button>
               </td>
             </slot>
@@ -428,310 +428,5 @@ export default {
 </script>
 
 <style lang="scss">
-.cpTable {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  &__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    &--hasPagination {
-      border-bottom: pxToRem(1) solid $border-color;
-    }
-  }
-
-  /* Standard Tables */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    overflow: auto;
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex]:focus {
-    border-radius: pxToRem(10);
-    box-shadow: 0 0 0 pxToEm(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: $spacing-unit * 2;
-    text-align: left;
-    font-size: pxToEm(18);
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  &__table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  &__row {
-    &--body:not(:last-of-type) {
-      border-bottom: pxToRem(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: $spacing-unit;
-      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: pxToEm(14);
-    }
-  }
-
-  &__column {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    background-color: $neutral-light;
-    padding: $spacing-unit $spacing-unit * 1.5;
-    text-align: left;
-    white-space: nowrap;
-    font-size: pxToEm(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: pxToRem(1);
-      background-color: $border-color;
-    }
-  }
-
-  &__body {
-    vertical-align: middle;
-  }
-
-  &__row--body,
-  &__cell {
-    vertical-align: inherit;
-  }
-
-  &__cell {
-    &:not(#{&}--isFullWidth) {
-      padding: $spacing-unit * 2 $spacing-unit * 1.5;
-      white-space: nowrap;
-    }
-
-    &--isFullWidth span,
-    &--isOptions {
-      position: sticky;
-    }
-
-    &--isFullWidth span {
-      left: 50%;
-      transform: translateX(-50%);
-      display: inline-block;
-    }
-
-    &--isOptions {
-      right: $spacing-unit * 1.5;
-      padding-left: $spacing-unit * 1.5;
-    }
-
-    &--isOptions button {
-      border: pxToRem(1) solid $border-color;
-      border-radius: pxToRem(8);
-      background-color: $neutral-light;
-      padding: $spacing-unit / 2;
-      color: $neutral-dark-1;
-
-      &:hover {
-        background-color: scale-color($neutral-dark, $lightness: 98%);
-        color: $neutral-dark;
-      }
-    }
-
-    &--isOptions svg {
-      width: pxToRem(16);
-      height: pxToRem(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: pxToRem(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: pxToRem(32);
-    height: pxToRem(32);
-
-    &--isSmall {
-      display: inline-block;
-      vertical-align: middle;
-      width: pxToRem(24);
-      height: pxToRem(24);
-    }
-  }
-
-  &__footer {
-    padding: $spacing-unit * 2 $spacing-unit * 1.5 0;
-    display: flex;
-    align-items: center;
-    font-size: pxToEm(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 pxToRem(1) pxToRem(2) rgba($neutral-dark, 0.08);
-      border-radius: pxToRem(10);
-      border: pxToRem(1) solid $border-color;
-      padding: pxToRem(6) pxToRem(10);
-      transition: background-color 0.15s;
-
-      &:hover {
-        background-color: rgba($neutral-dark, 0.05);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 pxToEm(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: $spacing-unit;
-      }
-    }
-  }
-}
+@import 'index';
 </style>