2024-10-10
This commit is contained in:
111
web/bsadmin/assets/sass/timeline.scss
Normal file
111
web/bsadmin/assets/sass/timeline.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@import "variable"; // variable
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: $border;
|
||||
left: 25px;
|
||||
margin-right: -1.5px;
|
||||
}
|
||||
|
||||
.timeline > li {
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline > li:before,
|
||||
.timeline > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel {
|
||||
width: #{"calc(100% - 70px)"};
|
||||
float: right;
|
||||
border: 1px solid $border;
|
||||
border-radius: 2px;
|
||||
padding: 5px 20px;
|
||||
position: relative;
|
||||
// -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
|
||||
// box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:before {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
left: -15px;
|
||||
display: inline-block;
|
||||
border-top: 15px solid transparent;
|
||||
border-right: 15px solid $border;
|
||||
border-left: 0 solid $border;
|
||||
border-bottom: 15px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-panel:after {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: -14px;
|
||||
display: inline-block;
|
||||
border-top: 14px solid transparent;
|
||||
border-right: 14px solid$white;
|
||||
border-left: 0 solid$white;
|
||||
border-bottom: 14px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.timeline > li > .timeline-badge {
|
||||
color:$white;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 8px;
|
||||
margin-right: -25px;
|
||||
background-color: $pink;
|
||||
z-index: 100;
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
|
||||
.timeline-body > p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.timeline-badge.primary {
|
||||
background-color: $primary !important;
|
||||
}
|
||||
|
||||
.timeline-badge.success {
|
||||
background-color: $success !important;
|
||||
}
|
||||
|
||||
.timeline-badge.warning {
|
||||
background-color: $warning !important;
|
||||
}
|
||||
|
||||
.timeline-badge.danger {
|
||||
background-color: $danger !important;
|
||||
}
|
||||
|
||||
.timeline-badge.info {
|
||||
background-color: $info !important;
|
||||
}
|
||||
Reference in New Issue
Block a user