55 lines
2.0 KiB
SCSS
55 lines
2.0 KiB
SCSS
.lovely-chart--header {
|
|
height: 30px;
|
|
font-weight: bold;
|
|
margin: 0 10px;
|
|
|
|
&-title, &-caption {
|
|
color: var(--text-color);
|
|
line-height: 30px;
|
|
// transition: color 300ms ease;
|
|
|
|
&.lovely-chart--state-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: 16px;
|
|
float: left;
|
|
margin-right: 2em;
|
|
text-transform: lowercase;
|
|
|
|
&:first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
&-caption {
|
|
font-size: 12px;
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
&-zoom-out-control {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--zoom-out-text);
|
|
cursor: pointer;
|
|
text-transform: none;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' width='512px' height='512px'%3E%3Cg%3E%3Cg%3E%3Cpath d='M497.938,430.063l-112-112c-0.367-0.367-0.805-0.613-1.18-0.965C404.438,285.332,416,248.035,416,208 C416,93.313,322.695,0,208,0S0,93.313,0,208s93.305,208,208,208c40.035,0,77.332-11.563,109.098-31.242 c0.354,0.375,0.598,0.813,0.965,1.18l112,112C439.43,507.313,451.719,512,464,512c12.281,0,24.57-4.688,33.938-14.063 C516.688,479.203,516.688,448.797,497.938,430.063z M64,208c0-79.406,64.602-144,144-144s144,64.594,144,144 c0,79.406-64.602,144-144,144S64,287.406,64,208z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3Cpath d='M272,176H144c-17.672,0-32,14.328-32,32s14.328,32,32,32h128c17.672,0,32-14.328,32-32S289.672,176,272,176z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
}
|