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