Move some partials around to more descriptive locations
This commit is contained in:
6
scss/components/_footer.scss
Normal file
6
scss/components/_footer.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.app-footer {
|
||||
background-color: $color-gray-lightest;
|
||||
border-top: 1px solid $color-gray-lighter;
|
||||
padding-left: $gap*4;
|
||||
padding-bottom: $gap*2;
|
||||
}
|
103
scss/components/_progress_menu.scss
Normal file
103
scss/components/_progress_menu.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
.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('/static/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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user