houdini/app/assets/stylesheets/nonprofits/supporters/index/timeline.css.scss

81 lines
1.4 KiB
SCSS

@import 'mixins';
ul.timeline-activities {
margin: 0;
position: relative;
}
.timeline-activities:before {
left: 12px;
top: -20px;
height: 20px;
width: 1px;
}
.timeline-actions {
margin-bottom: 20px;
border: 1px solid rgba(black, 0.1);
background: rgba(black, 0.03);
}
.timeline-activity {
padding: 0 0 16px 32px;
position: relative;
}
.timeline-activities:before,
.timeline-activity:after,
.timeline-activity:before {
position: absolute;
content: '';
background: rgb(230, 230, 230);
}
.timeline-activity:after {
left: 25px;
top: 12px;
height: 1px;
width: 7px;
}
.timeline-activity:before {
left: 12px;
top: 0;
height: 100%;
width: 1px;
}
// line connecting the icons
.timeline-activity:last-of-type:before {
display: none;
}
.timeline-activity-icon {
background: #F8F7F2;
border: 1px solid rgb(230, 230, 230);
width: 25px; height: 25px;
@include border-radius(50%);
position: absolute;
text-align: center;
top: 0;
left: 0;
}
.timeline-activity-icon i {
font-size: 12px;
color: rgba(black, 0.4);
@include transform(translateY(-1px));
}
.timeline-activity-icon i.fa-ticket,
.timeline-activity-icon i.fa-pencil {
font-size: 14px;
@include transform(translateY(-2px));
}
.timeline .timeline-activity-card p {
margin-bottom: 0;
}
.timeline-activity-card {
background: white;
padding: 8px 10px;
line-height: 20px;
border: 1px solid rgba(black, 0.1);
}