@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
66 lines (65 loc) • 1.69 kB
CSS
.chart-legend {
display: inline-block;
padding: 0;
width: auto ; }
.chart-legend .legend-title {
white-space: nowrap;
overflow: hidden;
margin-left: 10px;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold; }
.chart-legend ul, .chart-legend li {
padding: 0;
margin: 0;
list-style: none; }
.chart-legend .horizontal-legend li {
display: inline-block; }
.chart-legend .legend-wrap {
width: calc(100% - 10px); }
.chart-legend .legend-labels {
line-height: 85%;
list-style: none;
text-align: left;
float: left;
width: 100%;
border-radius: 3px;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
background: rgba(0, 0, 0, 0.05); }
.chart-legend .legend-label {
cursor: pointer;
font-size: 90%;
margin: 8px;
color: #AFB7C8; }
.chart-legend .legend-label:hover {
color: #000;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s; }
.chart-legend .legend-label .active .legend-label-text {
color: #000; }
.chart-legend .legend-label-color {
display: inline-block;
height: 15px;
width: 15px;
margin-right: 5px;
color: #5b646b;
border-radius: 3px; }
.chart-legend .legend-label-text {
display: inline-block;
vertical-align: top;
line-height: 15px;
font-size: 12px;
width: calc(100% - 20px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.chart-legend .legend-title-text {
vertical-align: bottom;
display: inline-block;
line-height: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }