atst/styles/components/_progress_menu.scss
2018-08-03 09:09:07 -04:00

104 lines
1.8 KiB
SCSS

.progress-menu {
display: block;
ul {
list-style: none;
margin: 0;
padding: 0;
}
&--three {
.progress-menu__item {
width: 32%;
}
}
&--four {
.progress-menu__item {
width: 24%;
}
}
&--five {
.progress-menu__item {
width: 19%;
}
}
&__item {
display: inline-block;
font-weight: $font-bold;
position: relative;
vertical-align: top;
a {
display: block;
position: relative;
padding: ($gap * 4) ($gap * 2);
margin: 0 ($gap * 2);
text-decoration: none;
text-align: center;
z-index: 2;
color: $color-black;
}
a.active {
color: $color-blue;
}
&:first-child:after {
display: none;
}
&:after {
display: inline-block;
height: 1px;
content: " ";
color: $color-gray-lightest;
text-shadow: none;
background-color: $color-gray-light;
position: absolute;
top: 1.1rem;
width: 100%;
right: 50%;
border-right: 2.2rem solid transparent;
border-left: 2.2rem solid transparent;
background-clip: padding-box;
z-index: 1;
}
&:before {
content: "";
display: block;
text-align: center;
width: 2rem;
height: 2rem;
border: 1px solid $color-gray;
border-radius: 100%;
position: absolute;
left: 50%;
margin-left: -1rem;
z-index: 1;
}
&--active:before {
border: 2px solid $color-blue;
}
&--complete:before {
content: url('#{$asset-path}/icons/checkmark.svg');
background-color: $color-blue;
border: 2px solid $color-blue;
font-size: $h6-font-size;
padding: 1px 2px;
}
&--incomplete:before {
border: 2px solid $color-gray-light;
}
}
}