react-led-digit 0.0.11 → 0.0.13

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 (15) hide show
  1. package/README.md +28 -4
  2. package/lib/Blinker/Blinker.js +2 -2
  3. package/lib/Digit/Digit.stories.d.ts +1 -0
  4. package/lib/Digit/Digit.stories.js +18 -3
  5. package/lib/Digit/UnstyledDigit.d.ts +1 -1
  6. package/lib/Digit/UnstyledDigit.js +1 -1
  7. package/lib/Digit/UnstyledDigit.stories.js +1 -1
  8. package/lib/Digit/components/AmpmSegments.js +1 -1
  9. package/lib/Digit/components/ColonSegments.js +1 -1
  10. package/lib/Digit/components/DigitSegments.js +1 -1
  11. package/lib/Digit/components/DotSegments.js +1 -1
  12. package/lib/Digit/digit.css +160 -110
  13. package/lib/Digit/digit.css.generated.js +161 -111
  14. package/lib/Digit/useStyleInjector.js +1 -1
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -1,16 +1,13 @@
1
1
  <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
2
2
 
3
- # React Seven-Segment Digit Component
3
+ # Led Digit (Seven-Segment) React Component → [![npm version](https://img.shields.io/npm/v/react-led-digit.svg)](https://www.npmjs.com/package/react-led-digit)
4
4
 
5
- Intended to use in digital clock or calculator.
6
- HTML and CSS only.
7
5
  → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
8
6
 
9
7
  Use example:
10
8
 
11
9
  ```tsx
12
10
  import { Digit, BlinkingDigit } from 'react-led-digit';
13
- import 'react-led-digit/lib/Digit/digit.css';
14
11
 
15
12
  <div className="digital-clock">
16
13
  <Digit value="0" />
@@ -21,3 +18,30 @@ import 'react-led-digit/lib/Digit/digit.css';
21
18
  <Digit value="am" />
22
19
  </div>;
23
20
  ```
21
+
22
+ Segment style example ([sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
23
+
24
+ ```tsx
25
+ import { Digit, BlinkingDigit } from 'react-led-digit';
26
+
27
+ <>
28
+ <Digit
29
+ value="0"
30
+ segmentStyle={{
31
+ color: 'red',
32
+ colorOff: 'blue',
33
+ length: '1em',
34
+ thickness: '.5em',
35
+ cornerShift: '-.1em',
36
+ spacing: '-.1em',
37
+ shiftAD: '.1em',
38
+ opacityOn: 1,
39
+ opacityOff: 0.25,
40
+ transitionDuration: '.5s',
41
+ }}
42
+ />
43
+ <Digit value="1" shape="rect" />
44
+ <Digit value="2" shape="pill" />
45
+ <Digit value="3" shape="round" />
46
+ </>;
47
+ ```
package/lib/Blinker/Blinker.js CHANGED
@@ -24,7 +24,7 @@ const defaultOptions = {
24
24
  singleton: true,
25
25
  };
26
26
  class Blinker {
27
- constructor(options = defaultOptions) {
27
+ constructor(options) {
28
28
  _Blinker_instances.add(this);
29
29
  _Blinker_options.set(this, defaultOptions); // initial options
30
30
  _Blinker_state.set(this, {
@@ -42,7 +42,7 @@ class Blinker {
42
42
  if (__classPrivateFieldGet(this, _Blinker_options, "f").autoRun)
43
43
  this.start();
44
44
  };
45
- if (options.singleton === false) {
45
+ if ((options === null || options === void 0 ? void 0 : options.singleton) === false) {
46
46
  init();
47
47
  return this;
48
48
  }
package/lib/Digit/Digit.stories.d.ts CHANGED
@@ -23,3 +23,4 @@ export type DisplayProps = React.HTMLAttributes<HTMLDivElement> & {
23
23
  export declare const Clock: Story;
24
24
  export declare const Digits: Story;
25
25
  export declare const Blinking: Story;
26
+ export declare const Firefox: Story;
package/lib/Digit/Digit.stories.js CHANGED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.Blinking = exports.Digits = exports.Clock = void 0;
14
+ exports.Firefox = exports.Blinking = exports.Digits = exports.Clock = void 0;
15
15
  const jsx_runtime_1 = require("react/jsx-runtime");
16
16
  const react_1 = require("react");
17
17
  const __1 = require("../");
@@ -40,7 +40,7 @@ const CustomDigit = (_a) => {
40
40
  thickness: '.25rem',
41
41
  length: '1.5rem',
42
42
  spacing: '0.25rem',
43
- filament: '.0625rem',
43
+ shiftAD: '.0625rem',
44
44
  } })));
45
45
  };
46
46
  const DigitTest = () => {
@@ -128,7 +128,7 @@ const Display = (_a) => {
128
128
  },
129
129
  segmentStyle: {
130
130
  color: 'green',
131
- cornerShift: 'calc(var(--thickness) / 8)',
131
+ cornerShift: 'calc(var(--thickness) / 4)',
132
132
  },
133
133
  };
134
134
  if (digit === ':') {
@@ -152,6 +152,15 @@ const SimpleClock = () => {
152
152
  }, []);
153
153
  return (0, jsx_runtime_1.jsx)(Display, { scale: 2, style: grid, value: time });
154
154
  };
155
+ const FirefoxSubpixelTest = () => {
156
+ const DigitFF = (props) => ((0, jsx_runtime_1.jsx)(__1.Digit, { value: props.v || 8, segmentStyle: {
157
+ color: 'green',
158
+ thickness: '1em',
159
+ length: '5em',
160
+ spacing: '0.1em',
161
+ } }));
162
+ return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign({}, grid), children: [(0, jsx_runtime_1.jsx)(DigitFF, { v: 2 }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, { v: ":" }), (0, jsx_runtime_1.jsx)(DigitFF, {}), (0, jsx_runtime_1.jsx)(DigitFF, {})] }));
163
+ };
155
164
  exports.Clock = {
156
165
  args: {
157
166
  value: '0',
@@ -170,3 +179,9 @@ exports.Blinking = {
170
179
  },
171
180
  render: BlinkingDigitTest,
172
181
  };
182
+ exports.Firefox = {
183
+ args: {
184
+ value: '0',
185
+ },
186
+ render: FirefoxSubpixelTest,
187
+ };
package/lib/Digit/UnstyledDigit.d.ts CHANGED
@@ -14,7 +14,7 @@ type SegmentStyle = {
14
14
  length?: CSSProperties['width'];
15
15
  thickness?: CSSProperties['width'];
16
16
  spacing?: CSSProperties['width'];
17
- filament?: CSSProperties['width'];
17
+ shiftAD?: CSSProperties['width'];
18
18
  opacityOn?: CSSProperties['opacity'];
19
19
  opacityOff?: CSSProperties['opacity'];
20
20
  transitionDuration?: CSSProperties['transitionDuration'];
package/lib/Digit/UnstyledDigit.js CHANGED
@@ -24,7 +24,7 @@ const Digit = (_a) => {
24
24
  const v = value.toString();
25
25
  const type = valueToType(value);
26
26
  const segments = type && valueToSegments(value); // {A: true, ...}
27
- const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-filament': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.filament, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
27
+ const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
28
28
  if (type === 'digit')
29
29
  return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));
30
30
  if (type === 'colon')
package/lib/Digit/UnstyledDigit.stories.js CHANGED
@@ -39,7 +39,7 @@ const CustomDigit = (_a) => {
39
39
  thickness: '.25rem',
40
40
  length: '1.5rem',
41
41
  spacing: '0.25rem',
42
- filament: '.0625rem',
42
+ shiftAD: '.0625rem',
43
43
  } })));
44
44
  };
45
45
  const UnstyledDigitTest = () => {
package/lib/Digit/components/AmpmSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const AmpmSegments = (_a) => {
22
22
  var { className, off, shape = 'default', AM, PM } = _a, rest = __rest(_a, ["className", "off", "shape", "AM", "PM"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit ampm', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment AM', (0, utils_1.onOffCx)(AM, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment PM', (0, utils_1.onOffCx)(PM, off)) })] })] })));
24
24
  };
25
25
  exports.AmpmSegments = AmpmSegments;
package/lib/Digit/components/ColonSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const ColonSegments = (_a) => {
22
22
  var { className, off, shape = 'default', D1, D2 } = _a, rest = __rest(_a, ["className", "off", "shape", "D1", "D2"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit colon', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D1', (0, utils_1.onOffCx)(D1, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D2', (0, utils_1.onOffCx)(D2, off)) })] })] })));
24
24
  };
25
25
  exports.ColonSegments = ColonSegments;
package/lib/Digit/components/DigitSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const DigitSegments = (_a) => {
22
22
  var { className, off, shape = 'default', A, B, C, D, E, F, G } = _a, rest = __rest(_a, ["className", "off", "shape", "A", "B", "C", "D", "E", "F", "G"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsxs)("div", { className: "opacity-wrapper off", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: [(0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment A horizontal', (0, utils_1.onOffCx)(A, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment B vertical', (0, utils_1.onOffCx)(B, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment C vertical', (0, utils_1.onOffCx)(C, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment D horizontal', (0, utils_1.onOffCx)(D, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment E vertical', (0, utils_1.onOffCx)(E, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment F vertical', (0, utils_1.onOffCx)(F, off)) }), (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment G horizontal', (0, utils_1.onOffCx)(G, off)) })] })] })));
24
24
  };
25
25
  exports.DigitSegments = DigitSegments;
package/lib/Digit/components/DotSegments.js CHANGED
@@ -20,6 +20,6 @@ const clsx_1 = __importDefault(require("clsx"));
20
20
  const utils_1 = require("./utils");
21
21
  const DotSegments = (_a) => {
22
22
  var { className, off, shape = 'default', DP } = _a, rest = __rest(_a, ["className", "off", "shape", "DP"]);
23
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "hidden-value", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
23
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, clsx_1.default)('digit dot', (0, utils_1.shapeCx)(shape), className) }, rest, { children: [(0, jsx_runtime_1.jsx)("code", { className: "aria-label", children: rest['aria-label'] }), (0, jsx_runtime_1.jsx)("div", { className: "opacity-wrapper off", children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('opacity-wrapper on', off && 'off'), children: (0, jsx_runtime_1.jsx)("i", { className: (0, clsx_1.default)('segment DP', (0, utils_1.onOffCx)(DP, off)) }) })] })));
24
24
  };
25
25
  exports.DotSegments = DotSegments;
package/lib/Digit/digit.css CHANGED
@@ -7,51 +7,64 @@
7
7
  */
8
8
 
9
9
  .digit {
10
+ --scale: 1;
11
+ --thickness: calc(var(--segment-thickness, 0.25em) * var(--scale)); /* 4px */
12
+ --length: calc(var(--segment-length, 1em) * var(--scale));
13
+ --spacing: calc(var(--segment-spacing, 0.0625em) * var(--scale)); /* 1px */
14
+ --ad: calc(
15
+ var(--segment-shift-ad, 0em) * var(--scale)
16
+ ); /* moves segments A, D in vertical direction */
17
+ --corner-shift: var(
18
+ --segment-corner-shift,
19
+ 0em
20
+ ); /* distortion of outer corners of a digit */
21
+
10
22
  --color: var(--segment-color, currentColor);
11
23
  --color-off: var(--segment-color-off, var(--color));
12
- --thickness: var(--segment-thickness, 0.25em); /* =4px */
13
- --length: var(--segment-length, 1em);
14
- --spacing: var(--segment-spacing, 0.0625em); /* =1px */
15
- --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
16
24
  --opacity-on: var(--segment-opacity-on, 1);
17
25
  --opacity-off: var(--segment-opacity-off, 0.1);
18
26
  --transition-duration: var(--segment-transition-duration, 0.25s);
19
- /* distortion of diamond corners */
20
- --corner-shift: var(--segment-corner-shift, 0em);
21
27
 
22
28
  --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
23
29
  --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
24
30
 
25
31
  /* computed values */
26
- --thick: var(--thickness);
27
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
28
- --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
32
+ --len: var(--length);
33
+ --thk: var(--thickness);
34
+ --thk-minus: calc(var(--thk) * -1);
35
+ --thk-half: calc(var(--thk) / 2);
36
+ --thk-half-minus: calc(var(--thk) / -2);
29
37
 
30
- --thick-minus: calc(var(--thick) * -1);
31
- --th-half: calc(var(--thick) / 2);
32
- --th-half-minus: calc(var(--th-half) * -1);
33
- --spacing-minus: calc(var(--spacing) * -1);
34
- --sp-half: calc(var(--spacing) / 2);
35
- --sp-half-minus: calc(var(--sp-half) * -1);
38
+ --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
39
+ --spc-minus: calc(var(--spc) * -1);
40
+ --crn: var(--corner-shift);
36
41
 
37
- --radius-round: calc(var(--thick) * 0.33);
38
- --radius-pill: 100em;
42
+ --radius-round: calc(var(--thk) * 0.33);
43
+ --radius-pill: var(--thk, 10em);
39
44
 
40
45
  display: inline-block;
41
46
  position: relative;
47
+
48
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
49
+ --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
50
+
42
51
  width: var(--digit-width);
43
52
  height: var(--digit-height);
44
-
45
- /* prevents flex-shrink effect */
46
- min-width: var(--digit-width);
53
+ min-width: var(--digit-width); /* to prevent flex-shrink effects */
47
54
  min-height: var(--digit-height);
48
55
 
56
+ &.ampm {
57
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc));
58
+ }
59
+ &.dot,
60
+ &.colon {
61
+ --digit-width: calc(var(--thk) * 3);
62
+ }
49
63
  &.unknown {
50
- width: var(--thick);
51
- min-width: var(--thick);
64
+ --digit-width: var(--len);
52
65
  }
53
66
 
54
- .hidden-value {
67
+ .aria-label {
55
68
  display: none;
56
69
  }
57
70
 
@@ -61,9 +74,10 @@
61
74
  height: 100%;
62
75
  }
63
76
 
77
+ &.digit,
64
78
  .opacity-wrapper,
65
79
  .opacity-wrapper .segment {
66
- transition-property: background-color, border-color, opacity, visibility;
80
+ transition-property: all;
67
81
  transition-duration: var(--transition-duration);
68
82
  }
69
83
 
@@ -93,11 +107,8 @@
93
107
  opacity: 0;
94
108
  }
95
109
 
96
- /* segments */
110
+ /* segments pos */
97
111
  .segment {
98
- --th-half-100: calc(100% - var(--th-half));
99
- --shft: var(--corner-shift);
100
-
101
112
  background-color: var(--color);
102
113
  display: block;
103
114
  position: absolute;
@@ -106,158 +117,173 @@
106
117
  background-color: var(--color-off);
107
118
  border-color: var(--color-off);
108
119
  }
109
- /* vertical segments */
120
+
121
+ /* vertical segments pos */
110
122
  &.vertical {
111
- width: var(--thick);
112
- height: var(--length);
123
+ --x100--thk-half: var(--thk-half);
124
+ --y100--thk-half: calc(var(--len) - var(--thk-half));
125
+ width: var(--thk);
126
+ height: var(--len);
113
127
  left: 0;
114
128
 
115
129
  &.B,
116
130
  &.C {
117
- left: auto;
118
- right: 0;
131
+ left: calc(var(--len) + var(--spc) * 2);
119
132
  }
120
133
  }
121
- &.E,
122
- &.C {
123
- bottom: calc(var(--th-half) + var(--sp-half));
124
- }
125
134
  &.F,
126
135
  &.B {
127
- top: calc(var(--th-half) + var(--sp-half));
136
+ top: calc(var(--thk-half) + var(--spc));
137
+ }
138
+ &.E,
139
+ &.C {
140
+ top: calc(var(--thk-half) + var(--len) + var(--spc) * 3);
128
141
  }
129
142
 
130
- /* horizontal segments */
143
+ /* horizontal segments pos */
131
144
  &.horizontal {
132
- width: var(--length);
133
- height: var(--thick);
134
- left: calc(var(--th-half) + var(--sp-half));
145
+ --x100--thk-half: calc(var(--len) - var(--thk-half));
146
+ --y100--thk-half: var(--thk-half);
147
+
148
+ width: var(--len);
149
+ height: var(--thk);
150
+ left: calc(var(--thk-half) + var(--spc));
135
151
 
136
152
  &.A,
137
153
  &.D {
138
- width: calc(var(--length) + var(--shft) * 2);
139
- left: calc(var(--th-half) + var(--sp-half) - var(--shft));
154
+ width: calc(var(--len) + var(--crn) * 2);
155
+ left: calc(var(--thk-half) + var(--spc) - var(--crn));
140
156
  }
141
157
  &.A {
142
- top: calc(var(--filament) + var(--shft));
158
+ top: calc(var(--ad) + var(--crn));
143
159
  }
144
160
  &.D {
145
- bottom: calc(var(--filament) + var(--shft));
161
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
146
162
  }
147
163
  &.G {
148
- bottom: calc(var(--length) + var(--spacing));
164
+ top: calc(var(--len) + var(--spc) * 2);
149
165
  }
150
166
  }
151
167
 
152
168
  /* spearheads */
153
169
  &.horizontal {
154
- clip-path: polygon(
155
- 0 50%,
156
- var(--th-half) 0,
157
- var(--th-half-100) 0,
158
- 100% 50%,
159
- var(--th-half-100) 100%,
160
- var(--th-half) 100%
161
- );
162
170
  &.A {
163
171
  /* x y */
164
172
  clip-path: polygon(
165
- 0 calc(50% - var(--shft)),
166
- calc(var(--th-half) - var(--shft)) 0,
167
- calc(var(--th-half-100) + var(--shft)) 0,
168
- 100% calc(50% - var(--shft)),
169
- calc(var(--th-half-100) - var(--shft)) 100%,
170
- calc(var(--th-half) + var(--shft)) 100%
173
+ 0% calc(50% - var(--crn)),
174
+ calc(var(--thk-half) - var(--crn)) 0%,
175
+ calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
176
+ 100% calc(50% - var(--crn)),
177
+ calc(var(--x100--thk-half) + var(--crn)) 100%,
178
+ calc(var(--thk-half) + var(--crn)) 100%
179
+ );
180
+ }
181
+ &.G {
182
+ clip-path: polygon(
183
+ 0% 50%,
184
+ var(--thk-half) 0%,
185
+ var(--x100--thk-half) 0%,
186
+ 100% 50%,
187
+ var(--x100--thk-half) 100%,
188
+ var(--thk-half) 100%
171
189
  );
172
190
  }
173
191
  &.D {
174
192
  /* x y */
175
193
  clip-path: polygon(
176
- 0 calc(50% + var(--shft)),
177
- calc(var(--th-half) + var(--shft)) 0,
178
- calc(var(--th-half-100) - var(--shft)) 0,
179
- 100% calc(50% + var(--shft)),
180
- calc(var(--th-half-100) + var(--shft)) 100%,
181
- calc(var(--th-half) - var(--shft)) 100%
194
+ 0% calc(50% + var(--crn)),
195
+ calc(var(--thk-half) + var(--crn)) 0%,
196
+ calc(var(--x100--thk-half) + var(--crn)) 0%,
197
+ 100% calc(50% + var(--crn)),
198
+ calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
199
+ calc(var(--thk-half) - var(--crn)) 100%
182
200
  );
183
201
  }
184
202
  }
185
203
  &.vertical {
186
204
  clip-path: polygon(
187
- 50% 0,
188
- 0 var(--th-half),
189
- 0 var(--th-half-100),
205
+ 50% 0%,
206
+ 0% var(--thk-half),
207
+ 0% var(--y100--thk-half),
190
208
  50% 100%,
191
- 100% var(--th-half-100),
192
- 100% var(--th-half)
209
+ 100% var(--y100--thk-half),
210
+ 100% var(--thk-half)
193
211
  );
194
212
  &.B {
195
213
  /* x y */
196
214
  clip-path: polygon(
197
- calc(50% + var(--shft)) 0,
198
- 0 calc(var(--th-half) + var(--shft)),
199
- 0 var(--th-half-100),
215
+ calc(50% + var(--crn)) 0%,
216
+ 0% calc(var(--thk-half) + var(--crn)),
217
+ 0% var(--y100--thk-half),
200
218
  50% 100%,
201
- 100% var(--th-half-100),
202
- 100% calc(var(--th-half) - var(--shft))
219
+ 100% var(--y100--thk-half),
220
+ 100% calc(var(--thk-half) - var(--crn))
203
221
  );
204
222
  }
205
223
  &.C {
206
224
  /* x y */
207
225
  clip-path: polygon(
208
- 50% 0,
209
- 0 var(--th-half),
210
- 0 calc(var(--th-half-100) - var(--shft)),
211
- calc(50% + var(--shft)) 100%,
212
- 100% calc(var(--th-half-100) + var(--shft)),
213
- 100% var(--th-half)
226
+ 50% 0%,
227
+ 0% var(--thk-half),
228
+ 0% calc(var(--y100--thk-half) - var(--crn)),
229
+ calc(50% + var(--crn)) 100%,
230
+ 100% calc(var(--y100--thk-half) + var(--crn)),
231
+ 100% var(--thk-half)
214
232
  );
215
233
  }
216
234
  &.E {
217
235
  /* x y */
218
236
  clip-path: polygon(
219
- 50% 0,
220
- 0 var(--th-half),
221
- 0 calc(var(--th-half-100) + var(--shft)),
222
- calc(50% - var(--shft)) 100%,
223
- 100% calc(var(--th-half-100) - var(--shft)),
224
- 100% var(--th-half)
237
+ 50% 0%,
238
+ 0% var(--thk-half),
239
+ 0% calc(var(--y100--thk-half) + var(--crn)),
240
+ calc(50% - var(--crn)) 100%,
241
+ 100% calc(var(--y100--thk-half) - var(--crn)),
242
+ 100% var(--thk-half)
225
243
  );
226
244
  }
227
245
  &.F {
228
246
  /* x y */
229
247
  clip-path: polygon(
230
- calc(50% - var(--shft)) 0,
231
- 0 calc(var(--th-half) - var(--shft)),
232
- 0 var(--th-half-100),
248
+ calc(50% - var(--crn)) 0%,
249
+ 0% calc(var(--thk-half) - var(--crn)),
250
+ 0% var(--y100--thk-half),
233
251
  50% 100%,
234
- 100% var(--th-half-100),
235
- 100% calc(var(--th-half) + var(--shft))
252
+ 100% var(--y100--thk-half),
253
+ 100% calc(var(--thk-half) + var(--crn))
236
254
  );
237
255
  }
238
256
  }
239
257
  }
240
258
 
241
259
  /* segment shapes */
260
+ &.shape-default .segment.segment,
242
261
  &.shape-rect .segment.segment {
243
- clip-path: unset;
262
+ border-radius: 0;
244
263
  }
245
264
  &.shape-round .segment.segment {
246
265
  border-radius: var(--radius-round);
247
- clip-path: unset;
248
266
  }
249
267
  &.shape-pill .segment.segment {
250
268
  border-radius: var(--radius-pill);
251
- clip-path: unset;
252
269
  }
253
270
 
254
- &.ampm {
255
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
271
+ &.shape-rect,
272
+ &.shape-round,
273
+ &.shape-pill {
274
+ .segment.segment.horizontal {
275
+ clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
276
+ }
277
+ .segment.segment.vertical {
278
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
279
+ }
280
+ }
256
281
 
282
+ &.ampm {
257
283
  .segment {
258
284
  background: var(--color);
259
285
  width: var(--digit-width);
260
- height: var(--length);
286
+ height: var(--len);
261
287
 
262
288
  mask-origin: fill-box;
263
289
  mask-position: center;
@@ -268,7 +294,7 @@
268
294
  }
269
295
 
270
296
  .AM {
271
- bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
297
+ top: calc(var(--digit-height) / 2 - var(--thk) / 4 - var(--len));
272
298
  mask-image: var(--svg-am);
273
299
  }
274
300
  &.shape-rect .AM,
@@ -278,7 +304,7 @@
278
304
  mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
279
305
  }
280
306
  .PM {
281
- top: calc(var(--digit-height) / 2 + var(--thick) / 4);
307
+ top: calc(var(--digit-height) / 2 + var(--thk) / 4);
282
308
  mask-image: var(--svg-pm);
283
309
  }
284
310
  &.shape-rect .PM,
@@ -297,24 +323,25 @@
297
323
 
298
324
  &.dot,
299
325
  &.colon {
300
- --digit-width: calc(var(--thick) * 3);
301
-
302
326
  & .segment {
303
- --dot-border-width: calc(var(--thick) * 0.6);
327
+ --dot-border-width: calc(var(--thk) * 0.6);
328
+ --dot-size: calc(var(--dot-border-width) * 2);
329
+ --dots-distance: calc(var(--thk) / 2);
304
330
 
305
- border: var(--dot-border-width) solid var(--color); /* dot made from border to have same size on zoom */
306
331
  position: absolute;
307
- width: 0;
308
- height: 0;
332
+ width: var(--dot-size);
333
+ height: var(--dot-size);
309
334
  left: calc(var(--digit-width) / 2 - var(--dot-border-width));
310
335
  }
311
336
  /* lower part of a colon */
312
337
  .segment.D1 {
313
- top: calc(var(--digit-height) / 3 - var(--thick) / 2);
338
+ top: calc(
339
+ var(--digit-height) / 2 - var(--dots-distance) - var(--dot-size)
340
+ );
314
341
  }
315
342
  /* upper part of a colon */
316
343
  .segment.D2 {
317
- bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
344
+ top: calc(var(--digit-height) / 2 + var(--dots-distance));
318
345
  }
319
346
  /* dot itself */
320
347
  .segment.DP {
@@ -325,3 +352,26 @@
325
352
  }
326
353
  }
327
354
  }
355
+
356
+ /* better subpixel rendering (Chrome) */
357
+ .digit {
358
+ transform: rotate3d(1, -1, 0, 0.025deg);
359
+ }
360
+
361
+ /* better subpixel rendering (Firefox) */
362
+ @-moz-document url-prefix() {
363
+ .digit {
364
+ --scale: 4;
365
+ --descale: calc(1 / var(--scale));
366
+ --descaled-width: calc(var(--digit-width) / var(--scale));
367
+ --descaled-height: calc(var(--digit-height) / var(--scale));
368
+
369
+ transform: scale(var(--descale)) rotate3d(1, -1, 0, 0.025deg);
370
+ transform-origin: 0% 0%;
371
+
372
+ width: var(--descaled-width);
373
+ height: var(--descaled-height);
374
+ min-width: var(--descaled-width);
375
+ min-height: var(--descaled-height);
376
+ }
377
+ }
package/lib/Digit/digit.css.generated.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  const css = {
4
4
  src: `src/Digit/digit.css`,
5
- hash: `3775688054381318`,
5
+ hash: `y5tdgosc5m`,
6
6
  content: `
7
7
  /**
8
8
  * A
@@ -13,51 +13,64 @@ const css = {
13
13
  */
14
14
 
15
15
  .digit {
16
+ --scale: 1;
17
+ --thickness: calc(var(--segment-thickness, 0.25em) * var(--scale)); /* 4px */
18
+ --length: calc(var(--segment-length, 1em) * var(--scale));
19
+ --spacing: calc(var(--segment-spacing, 0.0625em) * var(--scale)); /* 1px */
20
+ --ad: calc(
21
+ var(--segment-shift-ad, 0em) * var(--scale)
22
+ ); /* moves segments A, D in vertical direction */
23
+ --corner-shift: var(
24
+ --segment-corner-shift,
25
+ 0em
26
+ ); /* distortion of outer corners of a digit */
27
+
16
28
  --color: var(--segment-color, currentColor);
17
29
  --color-off: var(--segment-color-off, var(--color));
18
- --thickness: var(--segment-thickness, 0.25em); /* =4px */
19
- --length: var(--segment-length, 1em);
20
- --spacing: var(--segment-spacing, 0.0625em); /* =1px */
21
- --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
22
30
  --opacity-on: var(--segment-opacity-on, 1);
23
31
  --opacity-off: var(--segment-opacity-off, 0.1);
24
32
  --transition-duration: var(--segment-transition-duration, 0.25s);
25
- /* distortion of diamond corners */
26
- --corner-shift: var(--segment-corner-shift, 0em);
27
33
 
28
34
  --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
29
35
  --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
30
36
 
31
37
  /* computed values */
32
- --thick: var(--thickness);
33
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
34
- --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
38
+ --len: var(--length);
39
+ --thk: var(--thickness);
40
+ --thk-minus: calc(var(--thk) * -1);
41
+ --thk-half: calc(var(--thk) / 2);
42
+ --thk-half-minus: calc(var(--thk) / -2);
35
43
 
36
- --thick-minus: calc(var(--thick) * -1);
37
- --th-half: calc(var(--thick) / 2);
38
- --th-half-minus: calc(var(--th-half) * -1);
39
- --spacing-minus: calc(var(--spacing) * -1);
40
- --sp-half: calc(var(--spacing) / 2);
41
- --sp-half-minus: calc(var(--sp-half) * -1);
44
+ --spc: calc(var(--spacing) / 1.4142); /* divided by sqrt(2) */
45
+ --spc-minus: calc(var(--spc) * -1);
46
+ --crn: var(--corner-shift);
42
47
 
43
- --radius-round: calc(var(--thick) * 0.33);
44
- --radius-pill: 100em;
48
+ --radius-round: calc(var(--thk) * 0.33);
49
+ --radius-pill: var(--thk, 10em);
45
50
 
46
51
  display: inline-block;
47
52
  position: relative;
53
+
54
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc) * 2);
55
+ --digit-height: calc(var(--len) * 2 + var(--thk) + var(--spc) * 4);
56
+
48
57
  width: var(--digit-width);
49
58
  height: var(--digit-height);
50
-
51
- /* prevents flex-shrink effect */
52
- min-width: var(--digit-width);
59
+ min-width: var(--digit-width); /* to prevent flex-shrink effects */
53
60
  min-height: var(--digit-height);
54
61
 
62
+ &.ampm {
63
+ --digit-width: calc(var(--len) + var(--thk) + var(--spc));
64
+ }
65
+ &.dot,
66
+ &.colon {
67
+ --digit-width: calc(var(--thk) * 3);
68
+ }
55
69
  &.unknown {
56
- width: var(--thick);
57
- min-width: var(--thick);
70
+ --digit-width: var(--len);
58
71
  }
59
72
 
60
- .hidden-value {
73
+ .aria-label {
61
74
  display: none;
62
75
  }
63
76
 
@@ -67,9 +80,10 @@ const css = {
67
80
  height: 100%;
68
81
  }
69
82
 
83
+ &.digit,
70
84
  .opacity-wrapper,
71
85
  .opacity-wrapper .segment {
72
- transition-property: background-color, border-color, opacity, visibility;
86
+ transition-property: all;
73
87
  transition-duration: var(--transition-duration);
74
88
  }
75
89
 
@@ -99,11 +113,8 @@ const css = {
99
113
  opacity: 0;
100
114
  }
101
115
 
102
- /* segments */
116
+ /* segments pos */
103
117
  .segment {
104
- --th-half-100: calc(100% - var(--th-half));
105
- --shft: var(--corner-shift);
106
-
107
118
  background-color: var(--color);
108
119
  display: block;
109
120
  position: absolute;
@@ -112,158 +123,173 @@ const css = {
112
123
  background-color: var(--color-off);
113
124
  border-color: var(--color-off);
114
125
  }
115
- /* vertical segments */
126
+
127
+ /* vertical segments pos */
116
128
  &.vertical {
117
- width: var(--thick);
118
- height: var(--length);
129
+ --x100--thk-half: var(--thk-half);
130
+ --y100--thk-half: calc(var(--len) - var(--thk-half));
131
+ width: var(--thk);
132
+ height: var(--len);
119
133
  left: 0;
120
134
 
121
135
  &.B,
122
136
  &.C {
123
- left: auto;
124
- right: 0;
137
+ left: calc(var(--len) + var(--spc) * 2);
125
138
  }
126
139
  }
127
- &.E,
128
- &.C {
129
- bottom: calc(var(--th-half) + var(--sp-half));
130
- }
131
140
  &.F,
132
141
  &.B {
133
- top: calc(var(--th-half) + var(--sp-half));
142
+ top: calc(var(--thk-half) + var(--spc));
143
+ }
144
+ &.E,
145
+ &.C {
146
+ top: calc(var(--thk-half) + var(--len) + var(--spc) * 3);
134
147
  }
135
148
 
136
- /* horizontal segments */
149
+ /* horizontal segments pos */
137
150
  &.horizontal {
138
- width: var(--length);
139
- height: var(--thick);
140
- left: calc(var(--th-half) + var(--sp-half));
151
+ --x100--thk-half: calc(var(--len) - var(--thk-half));
152
+ --y100--thk-half: var(--thk-half);
153
+
154
+ width: var(--len);
155
+ height: var(--thk);
156
+ left: calc(var(--thk-half) + var(--spc));
141
157
 
142
158
  &.A,
143
159
  &.D {
144
- width: calc(var(--length) + var(--shft) * 2);
145
- left: calc(var(--th-half) + var(--sp-half) - var(--shft));
160
+ width: calc(var(--len) + var(--crn) * 2);
161
+ left: calc(var(--thk-half) + var(--spc) - var(--crn));
146
162
  }
147
163
  &.A {
148
- top: calc(var(--filament) + var(--shft));
164
+ top: calc(var(--ad) + var(--crn));
149
165
  }
150
166
  &.D {
151
- bottom: calc(var(--filament) + var(--shft));
167
+ top: calc(var(--len) * 2 + var(--spc) * 4 - var(--ad) - var(--crn));
152
168
  }
153
169
  &.G {
154
- bottom: calc(var(--length) + var(--spacing));
170
+ top: calc(var(--len) + var(--spc) * 2);
155
171
  }
156
172
  }
157
173
 
158
174
  /* spearheads */
159
175
  &.horizontal {
160
- clip-path: polygon(
161
- 0 50%,
162
- var(--th-half) 0,
163
- var(--th-half-100) 0,
164
- 100% 50%,
165
- var(--th-half-100) 100%,
166
- var(--th-half) 100%
167
- );
168
176
  &.A {
169
177
  /* x y */
170
178
  clip-path: polygon(
171
- 0 calc(50% - var(--shft)),
172
- calc(var(--th-half) - var(--shft)) 0,
173
- calc(var(--th-half-100) + var(--shft)) 0,
174
- 100% calc(50% - var(--shft)),
175
- calc(var(--th-half-100) - var(--shft)) 100%,
176
- calc(var(--th-half) + var(--shft)) 100%
179
+ 0% calc(50% - var(--crn)),
180
+ calc(var(--thk-half) - var(--crn)) 0%,
181
+ calc(var(--x100--thk-half) + var(--crn) * 3) 0%,
182
+ 100% calc(50% - var(--crn)),
183
+ calc(var(--x100--thk-half) + var(--crn)) 100%,
184
+ calc(var(--thk-half) + var(--crn)) 100%
185
+ );
186
+ }
187
+ &.G {
188
+ clip-path: polygon(
189
+ 0% 50%,
190
+ var(--thk-half) 0%,
191
+ var(--x100--thk-half) 0%,
192
+ 100% 50%,
193
+ var(--x100--thk-half) 100%,
194
+ var(--thk-half) 100%
177
195
  );
178
196
  }
179
197
  &.D {
180
198
  /* x y */
181
199
  clip-path: polygon(
182
- 0 calc(50% + var(--shft)),
183
- calc(var(--th-half) + var(--shft)) 0,
184
- calc(var(--th-half-100) - var(--shft)) 0,
185
- 100% calc(50% + var(--shft)),
186
- calc(var(--th-half-100) + var(--shft)) 100%,
187
- calc(var(--th-half) - var(--shft)) 100%
200
+ 0% calc(50% + var(--crn)),
201
+ calc(var(--thk-half) + var(--crn)) 0%,
202
+ calc(var(--x100--thk-half) + var(--crn)) 0%,
203
+ 100% calc(50% + var(--crn)),
204
+ calc(var(--x100--thk-half) + var(--crn) * 3) 100%,
205
+ calc(var(--thk-half) - var(--crn)) 100%
188
206
  );
189
207
  }
190
208
  }
191
209
  &.vertical {
192
210
  clip-path: polygon(
193
- 50% 0,
194
- 0 var(--th-half),
195
- 0 var(--th-half-100),
211
+ 50% 0%,
212
+ 0% var(--thk-half),
213
+ 0% var(--y100--thk-half),
196
214
  50% 100%,
197
- 100% var(--th-half-100),
198
- 100% var(--th-half)
215
+ 100% var(--y100--thk-half),
216
+ 100% var(--thk-half)
199
217
  );
200
218
  &.B {
201
219
  /* x y */
202
220
  clip-path: polygon(
203
- calc(50% + var(--shft)) 0,
204
- 0 calc(var(--th-half) + var(--shft)),
205
- 0 var(--th-half-100),
221
+ calc(50% + var(--crn)) 0%,
222
+ 0% calc(var(--thk-half) + var(--crn)),
223
+ 0% var(--y100--thk-half),
206
224
  50% 100%,
207
- 100% var(--th-half-100),
208
- 100% calc(var(--th-half) - var(--shft))
225
+ 100% var(--y100--thk-half),
226
+ 100% calc(var(--thk-half) - var(--crn))
209
227
  );
210
228
  }
211
229
  &.C {
212
230
  /* x y */
213
231
  clip-path: polygon(
214
- 50% 0,
215
- 0 var(--th-half),
216
- 0 calc(var(--th-half-100) - var(--shft)),
217
- calc(50% + var(--shft)) 100%,
218
- 100% calc(var(--th-half-100) + var(--shft)),
219
- 100% var(--th-half)
232
+ 50% 0%,
233
+ 0% var(--thk-half),
234
+ 0% calc(var(--y100--thk-half) - var(--crn)),
235
+ calc(50% + var(--crn)) 100%,
236
+ 100% calc(var(--y100--thk-half) + var(--crn)),
237
+ 100% var(--thk-half)
220
238
  );
221
239
  }
222
240
  &.E {
223
241
  /* x y */
224
242
  clip-path: polygon(
225
- 50% 0,
226
- 0 var(--th-half),
227
- 0 calc(var(--th-half-100) + var(--shft)),
228
- calc(50% - var(--shft)) 100%,
229
- 100% calc(var(--th-half-100) - var(--shft)),
230
- 100% var(--th-half)
243
+ 50% 0%,
244
+ 0% var(--thk-half),
245
+ 0% calc(var(--y100--thk-half) + var(--crn)),
246
+ calc(50% - var(--crn)) 100%,
247
+ 100% calc(var(--y100--thk-half) - var(--crn)),
248
+ 100% var(--thk-half)
231
249
  );
232
250
  }
233
251
  &.F {
234
252
  /* x y */
235
253
  clip-path: polygon(
236
- calc(50% - var(--shft)) 0,
237
- 0 calc(var(--th-half) - var(--shft)),
238
- 0 var(--th-half-100),
254
+ calc(50% - var(--crn)) 0%,
255
+ 0% calc(var(--thk-half) - var(--crn)),
256
+ 0% var(--y100--thk-half),
239
257
  50% 100%,
240
- 100% var(--th-half-100),
241
- 100% calc(var(--th-half) + var(--shft))
258
+ 100% var(--y100--thk-half),
259
+ 100% calc(var(--thk-half) + var(--crn))
242
260
  );
243
261
  }
244
262
  }
245
263
  }
246
264
 
247
265
  /* segment shapes */
266
+ &.shape-default .segment.segment,
248
267
  &.shape-rect .segment.segment {
249
- clip-path: unset;
268
+ border-radius: 0;
250
269
  }
251
270
  &.shape-round .segment.segment {
252
271
  border-radius: var(--radius-round);
253
- clip-path: unset;
254
272
  }
255
273
  &.shape-pill .segment.segment {
256
274
  border-radius: var(--radius-pill);
257
- clip-path: unset;
258
275
  }
259
276
 
260
- &.ampm {
261
- --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
277
+ &.shape-rect,
278
+ &.shape-round,
279
+ &.shape-pill {
280
+ .segment.segment.horizontal {
281
+ clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
282
+ }
283
+ .segment.segment.vertical {
284
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
285
+ }
286
+ }
262
287
 
288
+ &.ampm {
263
289
  .segment {
264
290
  background: var(--color);
265
291
  width: var(--digit-width);
266
- height: var(--length);
292
+ height: var(--len);
267
293
 
268
294
  mask-origin: fill-box;
269
295
  mask-position: center;
@@ -274,7 +300,7 @@ const css = {
274
300
  }
275
301
 
276
302
  .AM {
277
- bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
303
+ top: calc(var(--digit-height) / 2 - var(--thk) / 4 - var(--len));
278
304
  mask-image: var(--svg-am);
279
305
  }
280
306
  &.shape-rect .AM,
@@ -284,7 +310,7 @@ const css = {
284
310
  mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
285
311
  }
286
312
  .PM {
287
- top: calc(var(--digit-height) / 2 + var(--thick) / 4);
313
+ top: calc(var(--digit-height) / 2 + var(--thk) / 4);
288
314
  mask-image: var(--svg-pm);
289
315
  }
290
316
  &.shape-rect .PM,
@@ -303,24 +329,25 @@ const css = {
303
329
 
304
330
  &.dot,
305
331
  &.colon {
306
- --digit-width: calc(var(--thick) * 3);
307
-
308
332
  & .segment {
309
- --dot-border-width: calc(var(--thick) * 0.6);
333
+ --dot-border-width: calc(var(--thk) * 0.6);
334
+ --dot-size: calc(var(--dot-border-width) * 2);
335
+ --dots-distance: calc(var(--thk) / 2);
310
336
 
311
- border: var(--dot-border-width) solid var(--color); /* dot made from border to have same size on zoom */
312
337
  position: absolute;
313
- width: 0;
314
- height: 0;
338
+ width: var(--dot-size);
339
+ height: var(--dot-size);
315
340
  left: calc(var(--digit-width) / 2 - var(--dot-border-width));
316
341
  }
317
342
  /* lower part of a colon */
318
343
  .segment.D1 {
319
- top: calc(var(--digit-height) / 3 - var(--thick) / 2);
344
+ top: calc(
345
+ var(--digit-height) / 2 - var(--dots-distance) - var(--dot-size)
346
+ );
320
347
  }
321
348
  /* upper part of a colon */
322
349
  .segment.D2 {
323
- bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
350
+ top: calc(var(--digit-height) / 2 + var(--dots-distance));
324
351
  }
325
352
  /* dot itself */
326
353
  .segment.DP {
@@ -331,6 +358,29 @@ const css = {
331
358
  }
332
359
  }
333
360
  }
361
+
362
+ /* better subpixel rendering (Chrome) */
363
+ .digit {
364
+ transform: rotate3d(1, -1, 0, 0.025deg);
365
+ }
366
+
367
+ /* better subpixel rendering (Firefox) */
368
+ @-moz-document url-prefix() {
369
+ .digit {
370
+ --scale: 4;
371
+ --descale: calc(1 / var(--scale));
372
+ --descaled-width: calc(var(--digit-width) / var(--scale));
373
+ --descaled-height: calc(var(--digit-height) / var(--scale));
374
+
375
+ transform: scale(var(--descale)) rotate3d(1, -1, 0, 0.025deg);
376
+ transform-origin: 0% 0%;
377
+
378
+ width: var(--descaled-width);
379
+ height: var(--descaled-height);
380
+ min-width: var(--descaled-width);
381
+ min-height: var(--descaled-height);
382
+ }
383
+ }
334
384
  `,
335
385
  };
336
386
 
package/lib/Digit/useStyleInjector.js CHANGED
@@ -30,7 +30,7 @@ const useStyleInjector = (css, dependencies = [], options) => {
30
30
  [scopeAttribute]: o.scopeID ? true : undefined,
31
31
  };
32
32
  };
33
- // Inject style into head if it
33
+ // Inject style into head
34
34
  class StyleInjector {
35
35
  constructor() {
36
36
  _StyleInjector_styles.set(this, new Map());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-led-digit",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
5
5
  "main": "./lib/index.js",
6
6
  "files": [