@holokit/charts
Version:
Chart styles & components
4 lines (2 loc) • 3.79 kB
CSS
.DataUsedChartD3{background:#ffffff}.DataUsedChartD3 .tooltip{opacity:0;position:absolute;z-index:3;display:flex;background:#091334;box-shadow:rgba(0,0,0,0.4) 1px 1px 1px -1px;border-radius:2px;min-width:50px;text-align:center;padding:5px;font-size:12px;font-weight:bold;white-space:nowrap;color:#ffffff;width:80px;justify-content:center}.DataUsedChartD3 .tooltip:before{content:'';display:block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:7px solid #091334;position:absolute;left:36px;bottom:-9px;transform:rotate(-90deg)}.DataUsedChartD3 .tooltip-date{color:#d4dbff;text-transform:uppercase}.DataUsedChartD3 .tooltip-date span{display:block}.DataUsedChartD3 .tooltip hr{height:1px;background-color:#ffffff;border:none}.DataUsedChartD3 .chart{position:relative;text-align:center}.DataUsedChartD3 .chart .inner-chart-container{fill:#0a1435;fill-opacity:15%}.DataUsedChartD3 .chart__message{font-size:14px;opacity:0.8}.DataUsedChartD3 .chart__maxDataCallout{text-transform:uppercase;letter-spacing:0.8px;font-size:10px;font-weight:500;fill:#f7f8fb}.DataUsedChartD3 .chart .y-axis-grid,.DataUsedChartD3 .chart .x-axis-grid{color:#f1f1f1;opacity:0.8}.DataUsedChartD3 .chart .x-axis,.DataUsedChartD3 .chart .y-axis{color:#606677}.DataUsedChartD3 .chart .x-axis path,.DataUsedChartD3 .chart .y-axis path{stroke:transparent}.DataUsedChartD3 .chart .x-axis .x-label-text,.DataUsedChartD3 .chart .y-axis .x-label-text{text-align:center}.DataUsedChartD3 .chart .bar{width:8px;fill:#2f6aff}.DataUsedChartD3--alerts{background:#253054}.DataUsedChartD3--alerts .tooltip{background:#ffffff;border-radius:2px;padding:8px 0 5px 0;display:block}.DataUsedChartD3--alerts .tooltip:before{border-right-color:#ffffff}.DataUsedChartD3--alerts .tooltip-date{color:#2f6aff;font-weight:500;padding:0 4px}.DataUsedChartD3--alerts .tooltip hr{background-color:#e1e5eb}.DataUsedChartD3--alerts .tooltip-data{color:#0a1435;font-weight:400;padding:0 4px}.DataUsedChartD3--alerts .chart{font-weight:300;font-size:24px;text-align:center}.DataUsedChartD3--alerts .chart svg{background:#253054}.DataUsedChartD3--alerts .chart .x-axis-grid path{stroke:rgba(250,250,255,0.1)}.DataUsedChartD3--alerts .chart .x-axis-grid .tick{color:transparent}.DataUsedChartD3--alerts .chart .y-axis-grid{color:transparent}.DataUsedChartD3--alerts .chart .x-axis path{stroke:rgba(250,250,255,0.1)}.DataUsedChartD3--alerts .chart .x-axis .tick{font-size:10px;line-height:12px;padding-top:10px;text-transform:uppercase;font-weight:500;color:#969fb1;letter-spacing:0.6px;font-family:'DINNextLTPro', sans-serif }.DataUsedChartD3--alerts .chart .y-axis{display:none}.DataUsedChartD3--alerts-drawer{padding-left:16px;padding-right:16px}.HorizontalStackedBarChart{display:flex;width:100%;border-radius:4px;height:8px}.HorizontalStackedBarChart--has-backdrop{background:#1c2545}.HorizontalStackedBarChart--loading{animation:1000ms linear infinite alternate skeleton-glow}.HorizontalStackedBarChart__bar{height:8px;transition:height 0.2s cubic-bezier(0.22, 1, 0.36, 1),margin-top 0.2s cubic-bezier(0.22, 1, 0.36, 1);margin-left:1px;margin-right:1px;flex-shrink:0}.HorizontalStackedBarChart__bar:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.HorizontalStackedBarChart__bar:last-child{margin-right:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.HorizontalStackedBarChart__bar--active{height:14px;margin-top:-3px}.HorizontalStackedBarChart__bar--active:first-child{border-radius:7px 0 0 7px}.HorizontalStackedBarChart__bar--active:last-child{border-radius:0 7px 7px 0}.HorizontalStackedBarChart__bar--active:first-child.HorizontalStackedBarChart__bar--active:last-child{border-radius:7px 7px 7px 7px}
/*# sourceMappingURL=styles.css.map*/