skill-assessment-app/app/assets/stylesheets/molecules/_progressbar.scss

42 lines
695 B
SCSS
Raw Permalink Normal View History

2016-07-28 12:52:54 -05:00
.progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 84px;
}
.progress-bar {
2016-08-04 08:50:12 -05:00
// background-color: $primary-color;
background-color: #39bd9a;
2016-07-28 12:52:54 -05:00
color:white;
text-align: right;
line-height: 8vw;
font-weight: 900;
min-width: 50px;
position: relative;
transform: skewX(-16.5deg);
span {
display: inline-block;
transform: skewX(16.5deg);
margin-right: .85rem;
font-size: 3vw;
line-height: 8vw;
}
}
@media screen and (min-width: 500px) {
.progress-bar span {
font-size: 16px;
}
}
@media only screen and (min-width: $desktop) {
.progress-bar,
.progress-bar span {
line-height: 84px;
max-height: 84px;
}
}