AdminLTE/build/scss/_timeline.scss

156 lines
2.8 KiB
SCSS
Raw Normal View History

//
// Component: Timeline
//
2015-10-31 21:00:16 +00:00
.timeline {
margin: 0 0 45px;
2015-10-31 21:00:16 +00:00
padding: 0;
position: relative;
2015-10-31 21:00:16 +00:00
// The line
&::before {
@include border-radius($border-radius);
background-color: $gray-300;
bottom: 0;
content: "";
left: 31px;
margin: 0;
2015-10-31 21:00:16 +00:00
position: absolute;
top: 0;
width: 4px;
}
// Element
> div {
&::before,
&::after {
content: "";
display: table;
}
2015-10-31 21:00:16 +00:00
margin-bottom: 15px;
margin-right: 10px;
position: relative;
2015-10-31 21:00:16 +00:00
// The content
> .timeline-item {
2018-03-17 17:07:55 +00:00
@include box-shadow($card-shadow);
@include border-radius($border-radius);
background-color: $white;
color: $gray-700;
2015-10-31 21:00:16 +00:00
margin-left: 60px;
margin-right: 15px;
margin-top: 0;
2015-10-31 21:00:16 +00:00
padding: 0;
position: relative;
// The time and header
> .time {
color: #999;
float: right;
font-size: 12px;
padding: 10px;
2015-10-31 21:00:16 +00:00
}
// Header
2015-10-31 21:00:16 +00:00
> .timeline-header {
2018-03-17 17:07:55 +00:00
border-bottom: 1px solid $card-border-color;
color: $gray-700;
2015-10-31 21:00:16 +00:00
font-size: 16px;
line-height: 1.1;
margin: 0;
padding: 10px;
// Link in header
2015-10-31 21:00:16 +00:00
> a {
font-weight: 600;
}
}
// Item body and footer
> .timeline-body,
> .timeline-footer {
2015-10-31 21:00:16 +00:00
padding: 10px;
}
> .timeline-body {
> img {
margin: 10px;
}
> dl,
ol,
ul {
margin: 0;
}
}
2015-10-31 21:00:16 +00:00
> .timeline-footer {
> a {
color: $white;
}
}
}
// The icons at line
2015-10-31 21:00:16 +00:00
> .fa,
> .fas,
> .far,
> .fab,
> .fal,
> .fad,
> .svg-inline--fa,
2015-10-31 21:00:16 +00:00
> .ion {
background-color: $gray-500;
border-radius: 50%;
font-size: 16px;
height: 30px;
left: 18px;
2015-10-31 21:00:16 +00:00
line-height: 30px;
position: absolute;
text-align: center;
top: 0;
width: 30px;
2015-10-31 21:00:16 +00:00
}
> .svg-inline--fa {
padding: 7px;
}
2015-10-31 21:00:16 +00:00
}
// Time label
> .time-label {
> span {
@include border-radius(4px);
background-color: $white;
display: inline-block;
2015-10-31 21:00:16 +00:00
font-weight: 600;
padding: 5px;
}
}
}
2019-08-17 09:20:47 +00:00
.timeline-inverse {
> div {
> .timeline-item {
@include box-shadow(none);
background-color: $gray-100;
2019-08-17 09:20:47 +00:00
border: 1px solid $gray-300;
> .timeline-header {
border-bottom-color: $gray-300;
}
}
}
}
2020-09-23 14:08:15 +00:00
@include dark-mode () {
2020-09-24 07:08:20 +00:00
.timeline {
&::before {
background-color: $gray-600;
}
> div > .timeline-item {
background-color: $dark;
color: $white;
border-color: $gray-600;
2020-09-23 14:08:15 +00:00
2020-09-24 07:08:20 +00:00
> .timeline-header {
color: $gray-400;
border-color: $gray-600;
}
> .time {
color: $gray-400;
}
2020-09-23 14:08:15 +00:00
}
}
}