@financial-times/qanda-ui 0.0.1-beta.20 → 0.0.1-beta.21

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.
Files changed (4) hide show
  1. package/dist/cjs/components/QandaBlock/index.js +2 -1
  2. package/dist/esm/components/QandaBlock/index.js +2 -1
  3. package/dist/qanda.scss +4 -4
  4. package/package.json +1 -1
package/dist/cjs/components/QandaBlock/index.js CHANGED
@@ -55,7 +55,8 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
55
55
  const scale = 1 + 0.04 * factorRef.current;
56
56
  const shadow = interpolateColor(factorRef.current);
57
57
  currentBubble.style.transform = `scale(${scale})`;
58
- currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
58
+ // NB: drop-shadow blur radius is not calculated the same way as box-shadow blur radius, halving it matches
59
+ currentBubble.style.filter = `drop-shadow(0px 2px 4px ${shadow})`;
59
60
  if (factorRef.current < 0.001 && distanceRatio > 0.95) {
60
61
  currentBubble.removeAttribute('style');
61
62
  currentBubble = null;
package/dist/esm/components/QandaBlock/index.js CHANGED
@@ -50,7 +50,8 @@ function QandaBlock({ id, body, children, byline, subtitle, showAnswerTime = fal
50
50
  const scale = 1 + 0.04 * factorRef.current;
51
51
  const shadow = interpolateColor(factorRef.current);
52
52
  currentBubble.style.transform = `scale(${scale})`;
53
- currentBubble.style.filter = `drop-shadow(0px 2px 8px ${shadow})`;
53
+ // NB: drop-shadow blur radius is not calculated the same way as box-shadow blur radius, halving it matches
54
+ currentBubble.style.filter = `drop-shadow(0px 2px 4px ${shadow})`;
54
55
  if (factorRef.current < 0.001 && distanceRatio > 0.95) {
55
56
  currentBubble.removeAttribute('style');
56
57
  currentBubble = null;
package/dist/qanda.scss CHANGED
@@ -507,7 +507,7 @@ $app-header-color: #007acc;
507
507
 
508
508
  :root {
509
509
  --speech-triangle-width: 24px;
510
- --speech-triangle-height: 16px;
510
+ --speech-triangle-height: 17px;
511
511
  }
512
512
 
513
513
  .qanda-container {
@@ -520,7 +520,7 @@ $app-header-color: #007acc;
520
520
  .qanda-block__comment {
521
521
  padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
522
522
  position: relative;
523
- filter: drop-shadow(0px 2px 8px #ccc1b7);
523
+ filter: drop-shadow(0 1px 2px var(--o3-color-palette-black-20, #ccc1b7));
524
524
  will-change: filter;
525
525
  }
526
526
 
@@ -537,7 +537,7 @@ $app-header-color: #007acc;
537
537
  .qanda-block__question::after {
538
538
  content: '';
539
539
  position: absolute;
540
- bottom: calc(var(--speech-triangle-height) * -1);
540
+ bottom: calc(var(--speech-triangle-height) * -1 + 1px);
541
541
  right: 0;
542
542
  border-left: var(--speech-triangle-width) solid transparent;
543
543
  border-top: var(--speech-triangle-height) solid
@@ -547,7 +547,7 @@ $app-header-color: #007acc;
547
547
  .qanda-block__answer::before {
548
548
  content: '';
549
549
  position: absolute;
550
- top: calc(var(--speech-triangle-height) * -1);
550
+ top: calc(var(--speech-triangle-height) * -1 + 1px);
551
551
  left: 0;
552
552
  border-right: var(--speech-triangle-width) solid transparent;
553
553
  border-bottom: var(--speech-triangle-height) solid
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/qanda-ui",
3
- "version": "0.0.1-beta.20",
3
+ "version": "0.0.1-beta.21",
4
4
  "description": "Components for the Live Q&A UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",