app/assets/stylesheets/budgets/phases.scss
.budget-phases {
@include grid-column-gutter;
@include full-width-background;
@include full-width-border(top, 2px solid $border);
background: $light;
padding-bottom: $line-height * 2;
h2 {
font-size: $base-font-size;
text-align: center;
}
.phases-list {
counter-reset: phases;
display: flex;
flex-wrap: wrap;
.phase-name::before {
content: counter(phases);
counter-increment: phases;
display: block;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: calc(#{$line-height} / 2);
}
}
.phase-title {
@include tabs-title;
margin: calc(#{$line-height} / 6);
margin-left: 0;
position: relative;
text-align: center;
@supports(clip-path: polygon(0 0, 50% 50%, 0% 100%)) {
$triangle-width: 1em;
$item-margin: rem-calc(3);
margin-left: calc(-1 * (#{$triangle-width} - #{$item-margin}));
margin-right: 0;
transform: translateX(calc(#{$triangle-width} - #{$item-margin}));
&,
a {
clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
}
&:first-child {
&,
a {
clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, 0 0);
}
a {
border-bottom-left-radius: rem-calc(6);
border-top-left-radius: rem-calc(6);
}
}
&:last-child {
&,
a {
clip-path: polygon(100% 0, 100% 100%, 0 100%, #{$triangle-width} 50%, 0 0);
}
a {
border-bottom-right-radius: rem-calc(6);
border-top-right-radius: rem-calc(6);
}
}
}
a {
background: $body-background;
color: inherit;
height: 100%;
padding: $line-height $line-height * 1.5;
&:hover {
background: #e6e6e6;
color: inherit;
}
&:focus {
@include no-outline;
}
&[aria-selected="true"],
&.is-active {
@include brand-secondary-background;
font-weight: normal;
}
&[aria-selected="true"]::after,
&.is-active::after {
content: none;
}
}
&.current-phase-tab a {
@include brand-secondary-background;
padding-top: calc(#{$line-height} / 2);
}
}
.current-phase-timeline {
display: block;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: calc(#{$line-height} / 2);
text-transform: uppercase;
}
.tabs,
.tabs-content {
background: none;
border: 0;
}
.tabs-panel {
padding: 0;
h3 {
font-size: rem-calc(36);
}
}
.tabs-controls {
display: flex;
.budget-prev-phase,
.budget-next-phase,
.budget-prev-phase-disabled,
.budget-next-phase-disabled {
@extend %brand-background;
border-radius: rem-calc(3);
display: flex;
font-size: rem-calc(36);
height: calc(4em / 3);
width: calc(4em / 3);
&::before {
margin: auto;
}
span {
@include element-invisible;
}
}
> :first-child {
margin-right: 0.2em;
}
.budget-prev-phase-disabled,
.budget-next-phase-disabled {
background: none;
color: #acb6b6;
}
.budget-prev-phase,
.budget-prev-phase-disabled {
@include has-fa-icon(angle-left, solid);
}
.budget-next-phase,
.budget-next-phase-disabled {
@include has-fa-icon(angle-right, solid);
}
}
.budget-phase {
margin-top: $line-height;
@include breakpoint(medium) {
@include flex-with-gap;
> * {
width: 50%;
}
.budget-phase-image {
text-align: center;
}
}
.main-link {
@include has-fa-icon(chevron-right, solid, "after");
@include regular-button;
font-size: map-get($button-sizes, large);
margin-top: $line-height;
padding-right: 0.5em;
&::after {
font-weight: bold;
margin-left: 0.5em;
}
}
}
}