diff options
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js')
| -rwxr-xr-x | users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js new file mode 100755 index 0000000..0bf3609 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js | |||
| @@ -0,0 +1,49 @@ | |||
| 1 | // Styles for /lib/components/data/graph.jsx component | ||
| 2 | export const graphStyles = /* css */ ` | ||
| 3 | .graph { | ||
| 4 | position: relative; | ||
| 5 | width: 100%; | ||
| 6 | height: 100%; | ||
| 7 | display: flex; | ||
| 8 | align-items: flex-end; | ||
| 9 | gap: 4px; | ||
| 10 | overflow: hidden; | ||
| 11 | border-radius: inherit; | ||
| 12 | } | ||
| 13 | .graph__bars { | ||
| 14 | flex: 1 1 100%; | ||
| 15 | height: 75%; | ||
| 16 | display: flex; | ||
| 17 | align-items: flex-end; | ||
| 18 | justify-content: flex-end; | ||
| 19 | pointer-events: none; | ||
| 20 | } | ||
| 21 | .graph__bar { | ||
| 22 | min-height: 1px; | ||
| 23 | opacity: 0.75; | ||
| 24 | } | ||
| 25 | .graph__data { | ||
| 26 | position: absolute; | ||
| 27 | top: 3px; | ||
| 28 | left: 3px; | ||
| 29 | width: calc(100% - 6px); | ||
| 30 | flex: 0 0 auto; | ||
| 31 | display: flex; | ||
| 32 | justify-content: space-between; | ||
| 33 | gap: 2px; | ||
| 34 | } | ||
| 35 | .graph__data-item { | ||
| 36 | display: flex; | ||
| 37 | align-items: center; | ||
| 38 | gap: 3px; | ||
| 39 | } | ||
| 40 | .graph__data-item-icon { | ||
| 41 | flex: 0 0 10px; | ||
| 42 | width: 10px; | ||
| 43 | height: 10px; | ||
| 44 | fill: currentColor; | ||
| 45 | } | ||
| 46 | .graph__data-item-value { | ||
| 47 | font-size: calc(var(--font-size) - 2px); | ||
| 48 | } | ||
| 49 | `; | ||
