more proposal timeline styling

This commit is contained in:
Marty Alcala 2016-10-11 18:05:00 -04:00
parent 908bbdff9c
commit dd6a55a5a1
2 changed files with 80 additions and 7 deletions

View File

@ -4,9 +4,8 @@
$item-border-color: #EFEFEF;
$item-label-color: #6C6C6E;
.wallet-color-header-bar {
border: 0;
background: none;
.list {
background: #f5f5f5;
}
.slide-to-pay {
bottom: 100px;
@ -122,6 +121,9 @@
}
.timeline-item {
border: 0;
padding: 17px $item-lateral-padding;
> * {
padding-right: 0;
}
@ -131,6 +133,56 @@
display: flex;
align-items: center;
&__icon {
display: flex;
align-items: center;
min-width: 40px;
padding-right: 1rem;
padding-left: 1rem;
margin-right: .5rem;
position: relative;
&::before {
content: '';
background: #D2D2D2;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-100%);
top: 0;
}
&::after {
content: '';
background: #D2D2D2;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(100%);
bottom: 0;
}
&::after {
}
> div {
border: 3px solid #09C286;
border-radius: 50%;
display: flex;
height: 26px;
width: 26px;
font-size: 13px;
align-items: center;
justify-content: center;
font-weight: 600;
vertical-align: middle;
color: #09C286;
}
}
&__label {
flex-grow: 1;

View File

@ -133,9 +133,9 @@
<div class="item item-divider" translate>Timeline</div>
<div class="item timeline-item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
<div class="row">
<div class="col col-10">
<span class="timeline-icon">{{$index + 1}}</span>
<!-- <div class="row">
<div class="col col-10 timeline-icon">
<div>{{$index + 1}}</div>
</div>
<div class="col timeline-content">
<div class="timeline-content__label">
@ -148,7 +148,28 @@
</span>
</div>
</div>
</div>
</div> -->
<!-- <div class="row">
<div class="col col-10 timeline-icon">
<div>{{$index + 1}}</div>
</div> -->
<div class="timeline-content">
<div class="timeline-content__icon">
<div>{{$index + 1}}</div>
</div>
<div class="timeline-content__label">
<div class="action">{{a.description}}</div>
<div class="name">{{a.by}}</div>
</div>
<div>
<span class="item-note">
<time>{{ a.time * 1000 | amDateFormat:'HH:mm a'}}</time>
</span>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>