users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js
0ce4331f742863ec03c711c27b0a0dee7e8cc187
· 873 B · 49 lines
raw
| 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 | `; |