@citizenplane/pimp 10.0.7 → 10.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citizenplane/pimp",
3
- "version": "10.0.7",
3
+ "version": "10.0.8",
4
4
  "scripts": {
5
5
  "dev": "storybook dev -p 8080",
6
6
  "build-storybook": "storybook build --output-dir ./docs",
@@ -34,6 +34,30 @@ label .u-asterisk {
34
34
  &:focus-visible {
35
35
  position: relative;
36
36
  z-index: 2;
37
- box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 70%);
37
+ outline: fn.px-to-rem(2) solid colors.$primary-color;
38
38
  }
39
39
  }
40
+
41
+ /* Scrolling Visual Cue */
42
+ .u-scrolling-visual-cue,
43
+ %u-scrolling-visual-cue {
44
+ background:
45
+ linear-gradient(90deg, #fff 30%, #fff0),
46
+ linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
47
+ radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
48
+ radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
49
+
50
+ background-attachment: local, local, scroll, scroll;
51
+ background-color: fn.v(background-primary);
52
+ background-position:
53
+ 0 0,
54
+ 100%,
55
+ 0 0,
56
+ 100%;
57
+ background-repeat: no-repeat;
58
+ background-size:
59
+ 40px 100%,
60
+ 40px 100%,
61
+ 14px 100%,
62
+ 14px 100%;
63
+ }
@@ -637,24 +637,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
637
637
 
638
638
  /* Scrolling Visual Cue */
639
639
  &__container[role='region'][aria-labelledby][tabindex] {
640
- background:
641
- linear-gradient(to right, colors.$neutral-light 30%, rgba(255, 255, 255, 0)),
642
- linear-gradient(to right, rgba(colors.$neutral-light, 0), colors.$neutral-light 70%) 0 100%,
643
- radial-gradient(farthest-side at 0% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)),
644
- radial-gradient(farthest-side at 100% 50%, rgba(colors.$neutral-dark, 0.2), rgba(colors.$neutral-dark, 0)) 0 100%;
645
- background-repeat: no-repeat;
646
- background-color: colors.$neutral-light;
647
- background-size:
648
- 40px 100%,
649
- 40px 100%,
650
- 14px 100%,
651
- 14px 100%;
652
- background-position:
653
- 0 0,
654
- 100%,
655
- 0 0,
656
- 100%;
657
- background-attachment: local, local, scroll, scroll;
640
+ @extend %u-scrolling-visual-cue;
658
641
  }
659
642
 
660
643
  &__caption {
@@ -125,29 +125,11 @@ watch(
125
125
 
126
126
  <style lang="scss">
127
127
  .cpTabs {
128
+ @extend %u-scrolling-visual-cue;
129
+
128
130
  position: relative;
129
131
  display: flex;
130
132
  align-items: center;
131
-
132
- /* Scrolling Visual Cue */
133
- background:
134
- linear-gradient(90deg, #fff 30%, #fff0),
135
- linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
136
- radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
137
- radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
138
- background-attachment: local, local, scroll, scroll;
139
- background-color: fn.v(background-primary);
140
- background-position:
141
- 0 0,
142
- 100%,
143
- 0 0,
144
- 100%;
145
- background-repeat: no-repeat;
146
- background-size:
147
- 40px 100%,
148
- 40px 100%,
149
- 14px 100%,
150
- 14px 100%;
151
133
  gap: fn.v(spacing-md);
152
134
 
153
135
  &__activeUnderline {
@@ -217,7 +199,6 @@ watch(
217
199
  @include mx.media-query-max(768px) {
218
200
  .cpTabs {
219
201
  margin-right: sp.$space-lg;
220
- padding: fn.px-to-rem(3) 0;
221
202
  overflow-x: auto;
222
203
 
223
204
  &__activeUnderline {