@trutoo/funnel-graph
Version:
SVG Funnel Graph TypeScript Library.
178 lines (150 loc) • 3.3 kB
CSS
:root {
--text: MidnightBlue;
--primary: MidnightBlue;
--accent: Crimson;
--backdrop: rgba(0, 0, 0, 0.75);
--backdrop-text: #ffffff;
}
.fg {
position: relative;
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
Segoe UI Emoji
}
.fg svg {
display: block
}
.fg svg path,
.fg svg stop {
transition: all 400ms ease;
}
.fg.fg--vertical {
padding-left: 120px;
padding-right: 16px
}
.fg.fg--vertical .fg-labels {
flex-direction: column;
}
.fg.fg--vertical .fg-label {
padding-top: 24px
}
.fg.fg--vertical .fg-label:not(:first-child) {
border-top: 1px solid Crimson;
border-top: 1px solid var(--accent);
}
.fg.fg--vertical .fg-label .fg-segments {
margin-top: 0;
margin-left: 106px;
width: calc(100% - 106px)
}
.fg.fg--vertical .fg-label .fg-segments ul {
display: flex;
justify-content: space-around;
}
.fg:not(.fg--vertical) {
padding-top: 64px;
padding-bottom: 16px
}
.fg:not(.fg--vertical) .fg-label {
padding-left: 24px
}
.fg:not(.fg--vertical) .fg-label:not(:first-child) {
border-left: 1px solid rgba(0, 0, 0, 0.75);
border-left: 1px solid var(--backdrop);
}
.fg-container {
width: 100%;
height: 100%;
}
.fg-labels {
position: absolute;
display: flex;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
}
.fg-label {
flex: 1 1 0;
position: relative
}
.fg-label .fg-label__value {
font-size: 24px;
color: MidnightBlue;
color: var(--text);
line-height: 18px;
margin-bottom: 6px;
}
.fg-label .fg-label__title {
font-size: 12px;
font-weight: bold;
color: MidnightBlue;
color: var(--primary);
}
.fg-label .fg-label__percentage {
font-size: 16px;
font-weight: bold;
color: Crimson;
color: var(--accent);
}
.fg-label .fg-label__segments {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
left: 0;
padding: 8px 24px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.75);
background-color: var(--backdrop);
margin-top: 24px;
opacity: 0;
transition: opacity 0.1s ease;
cursor: default
}
.fg-label .fg-label__segments ul {
margin: 0;
padding: 0;
list-style-type: none
}
.fg-label .fg-label__segments ul li {
font-size: 13px;
line-height: 16px;
color: #ffffff;
color: var(--backdrop-text);
margin: 18px 0
}
.fg-label .fg-label__segments ul li span {
font-weight: bold;
color: Crimson;
color: var(--accent);
}
.fg-label:hover .fg-label__segments {
opacity: 1;
}
.fg-sub-labels {
display: flex;
justify-content: center;
margin-top: 24px;
position: absolute;
width: 100%;
left: 0;
}
.fg-sub-label {
display: flex;
font-size: 12px;
color: MidnightBlue;
color: var(--text);
line-height: 16px
}
.fg-sub-label:not(:first-child) {
margin-left: 16px;
}
.fg-sub-label .fg-sub-label__color {
margin: 2px 8px 2px 0;
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}