Sha256: 5e0d445b91fcb7cd328cb751c3cad365d0521843b4df136a5a370defc8f4eaf9
Contents?: true
Size: 1.81 KB
Versions: 6
Compression:
Stored size: 1.81 KB
Contents
.icon-group{
font-size: 1.75rem;
line-height: 3rem;
display: block;
text-align: center;
&__blue-icon{
color: $brand-blue-light;
}
&__grey-icon{
color: $smoke;
}
}
.graph{
width: 100%;
height: 50px;
position: relative;
&__cap{
border-radius: 100%;
height: 100%;
width: 50px;
display: block;
float: left;
position: absolute;
background-color: $stone;
&--right{
@extend .graph__cap;
right: 0;
}
&--filled{
background-color: $brand-blue-light;
}
}
&__middle{
height: 100%;
width: calc(100% - 50px);
background-color: $stone;
display: block;
float: left;
margin-left: 27px;
position: relative;
&--filled{
background-color: $brand-blue-light;
min-width: 20%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 3;
display: table;
}
&--filled-fourth{
@extend .graph__middle--filled;
width: 20%
}
&--filled-half{
@extend .graph__middle--filled;
width: 50%
}
&--filled-full{
@extend .graph__middle--filled;
width: 100%
}
}
&__middle-text{
color: $slate;
position: absolute;
right: 0;
font-size: .85rem;
display: table;
z-index: 5;
margin-top: 15px;
margin-bottom: 15px;
vertical-align: middle;
&--half{
@extend .graph__middle-text;
width: 47%;
margin-top: $base-margin;
margin-bottom: $base-margin;
}
&--full{
@extend .graph__middle-text;
color: $white;
width: 100%;
text-align: center;
}
}
&-label{
text-align: center;
color: $slate;
margin-top: $base-margin;
strong{
font-size: 0.85rem;
}
p{
@extend .small-text;
line-height: 0.8rem;
}
}
}
Version data entries
6 entries across 6 versions & 1 rubygems