@citizenplane/pimp 10.0.6 → 10.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.0.6",
+  "version": "10.0.8",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/styles/utilities/_index.scss

@@ -34,6 +34,30 @@ label .u-asterisk {
   &:focus-visible {
     position: relative;
     z-index: 2;
-    box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 70%);
+    outline: fn.px-to-rem(2) solid colors.$primary-color;
   }
 }
+
+/* Scrolling Visual Cue */
+.u-scrolling-visual-cue,
+%u-scrolling-visual-cue {
+  background:
+    linear-gradient(90deg, #fff 30%, #fff0),
+    linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
+    radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
+    radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
+
+  background-attachment: local, local, scroll, scroll;
+  background-color: fn.v(background-primary);
+  background-position:
+    0 0,
+    100%,
+    0 0,
+    100%;
+  background-repeat: no-repeat;
+  background-size:
+    40px 100%,
+    40px 100%,
+    14px 100%,
+    14px 100%;
+}

package/src/components/CpTable.vue

@@ -637,24 +637,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
   /* Scrolling Visual Cue */
   &__container[role='region'][aria-labelledby][tabindex] {
-    background:
-      linear-gradient(to right, colors.$neutral-light 30%, rgba(255, 255, 255, 0)),
-      linear-gradient(to right, rgba(colors.$neutral-light, 0), colors.$neutral-light 70%) 0 100%,
-      radial-gradient(farthest-side at 0% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)),
-      radial-gradient(farthest-side at 100% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)) 0 100%;
-    background-repeat: no-repeat;
-    background-color: colors.$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;
+    @extend %u-scrolling-visual-cue;
   }
 
   &__caption {

package/src/components/CpTabs.vue

@@ -125,38 +125,11 @@ watch(
 
 <style lang="scss">
 .cpTabs {
+  @extend %u-scrolling-visual-cue;
+
   position: relative;
   display: flex;
   align-items: center;
-
-  /* Scrolling Visual Cue */
-  background:
-    linear-gradient(to right, fn.v(background-primary) 30%, rgba(255, 255, 255, 0%)),
-    linear-gradient(to right, rgba(fn.v(background-primary), 0), fn.v(background-primary) 70%) 0 100%,
-    radial-gradient(
-      farthest-side at 0% 50%,
-      rgba(fn.v(foreground-secondary), 0.2),
-      rgba(fn.v(foreground-secondary), 0)
-    ),
-    radial-gradient(
-        farthest-side at 100% 50%,
-        rgba(fn.v(foreground-secondary), 0.2),
-        rgba(fn.v(foreground-secondary), 0)
-      )
-      0 100%;
-  background-attachment: local, local, scroll, scroll;
-  background-color: fn.v(background-primary);
-  background-position:
-    0 0,
-    100%,
-    0 0,
-    100%;
-  background-repeat: no-repeat;
-  background-size:
-    40px 100%,
-    40px 100%,
-    14px 100%,
-    14px 100%;
   gap: fn.v(spacing-md);
 
   &__activeUnderline {
@@ -225,6 +198,9 @@ watch(
 
 @include mx.media-query-max(768px) {
   .cpTabs {
+    margin-right: sp.$space-lg;
+    overflow-x: auto;
+
     &__activeUnderline {
       top: auto;
       bottom: auto;