consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change budget phases design

Browse Source 
Co-authored-by: Javi Martín <javim@elretirao.net>
This commit is contained in:
decabeza
2020-03-16 12:54:00 +01:00
committed by Javi Martín
parent 014d29b991
commit c0f9e4f045
9 changed files with 278 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
app/assets/stylesheets/budgets/phases.scss
View File

@@ -1,56 +1,187 @@
.budget-phases {
border-left: 3px solid $budget;
margin-left: $line-height / 2;
padding: $line-height $line-height / 2;
background: $light;
border-top: 2px solid $border;
padding-bottom: $line-height * 2;
h3,
span,
p {
padding: 0 $line-height / 4;
> * {
@include grid-column-gutter;
@include grid-row;
}
h3 {
margin-bottom: 0;
h2 {
font-size: $base-font-size;
text-align: center;
}
span {
color: $text-medium;
.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: $line-height / 2;
}
}
.phase-title {
@include tabs-title;
margin: $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: $white;
color: $black;
height: 100%;
padding: $line-height $line-height * 1.5;
&:hover {
background: #e6e6e6;
color: $black;
}
&:focus {
outline: none;
}
&[aria-selected="true"],
&.is-active {
background: $dark;
color: $white;
font-weight: normal;
}
&[aria-selected="true"]::after,
&.is-active::after {
content: none;
}
}
&.current-phase-tab a {
background: $brand;
color: $white;
padding-top: $line-height / 2;
&:hover {
background: $dark;
}
}
}
.current-phase-timeline {
display: block;
font-size: $small-font-size;
font-weight: bold;
margin-bottom: $line-height / 2;
text-transform: uppercase;
}
.phase {
position: relative;
.tabs,
.tabs-content {
background: none;
border: 0;
}
&:not(:first-child) {
margin-top: $line-height * 1.5;
.tabs-panel {
padding: 0;
h3 {
font-size: rem-calc(36);
}
}
&::before {
background-color: #fff;
border: 4px solid $budget;
border-radius: 100%;
content: "";
height: 16px;
left: -22px;
position: absolute;
top: 6px;
width: 16px;
z-index: 99;
}
.tabs-controls {
display: flex;
&.is-active {
h3 {
background: $budget;
color: #fff;
display: inline-block;
}
.budget-prev-phase,
.budget-next-phase,
.budget-prev-phase-disabled,
.budget-next-phase-disabled {
background: $brand;
border-radius: rem-calc(3);
color: $white;
display: flex;
font-size: rem-calc(36);
height: 1em * 4 / 3;
width: 1em * 4 / 3;
&::before {
background-color: $budget;
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 {
@include breakpoint(medium) {
width: 50%;
}
}
}