mirror of https://github.com/ColorlibHQ/AdminLTE
Updated the style of Timeline to match the rest of the template
Abdullah Almsaeed
parent
ba74d2f179
commit
3efb12b93f
|
|
@ -9,18 +9,17 @@
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// The line
|
||||
// The line
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
width: 4px;
|
||||
background: #ddd;
|
||||
left: 30px;
|
||||
border: 1px solid #eee;
|
||||
left: 31px;
|
||||
margin: 0;
|
||||
.border-radius(2px);
|
||||
.border-radius(2px);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -30,29 +29,30 @@
|
|||
margin-bottom: 15px;
|
||||
.clearfix();
|
||||
|
||||
// The content
|
||||
// The content
|
||||
> .timeline-item {
|
||||
margin-top: 10px;
|
||||
border: 0px solid #dfdfdf;
|
||||
.box-shadow(@box-boxshadow);
|
||||
.border-radius(@box-border-radius);
|
||||
margin-top: 0px;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
color: #444;
|
||||
margin-left: 60px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// The time and header
|
||||
// The time and header
|
||||
> .time {
|
||||
color: #999;
|
||||
float: right;
|
||||
margin: 2px 0 0 0;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
> .timeline-header {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid @box-border-color;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
> a {
|
||||
|
|
@ -66,35 +66,33 @@
|
|||
|
||||
}
|
||||
|
||||
// Time label
|
||||
// Time label
|
||||
&.time-label {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.border-radius(4px);
|
||||
}
|
||||
}
|
||||
|
||||
// The icons
|
||||
// The icons
|
||||
> .fa,
|
||||
> .glyphicon,
|
||||
> .ion {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
color: #666;
|
||||
background: #eee;
|
||||
background: @gray;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
left: 18px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1662,10 +1662,9 @@ a:focus {
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
width: 4px;
|
||||
background: #ddd;
|
||||
left: 30px;
|
||||
border: 1px solid #eee;
|
||||
left: 31px;
|
||||
margin: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -1683,26 +1682,28 @@ a:focus {
|
|||
clear: both;
|
||||
}
|
||||
.timeline > li > .timeline-item {
|
||||
margin-top: 10px;
|
||||
border: 0px solid #dfdfdf;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
margin-top: 0px;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
color: #444;
|
||||
margin-left: 60px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.timeline > li > .timeline-item > .time {
|
||||
color: #999;
|
||||
float: right;
|
||||
margin: 2px 0 0 0;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.timeline > li > .timeline-item > .timeline-header {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
padding: 5px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
|
@ -1718,20 +1719,18 @@ a:focus {
|
|||
padding: 5px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.timeline > li > .fa,
|
||||
.timeline > li > .glyphicon,
|
||||
.timeline > li > .ion {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
color: #666;
|
||||
background: #eee;
|
||||
background: #d2d6de;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
left: 18px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -534,7 +534,9 @@
|
|||
<span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
|
||||
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
|
||||
<div class="timeline-body">
|
||||
<iframe width="300" height="169" src="//www.youtube.com/embed/fLe_qO4AE-M" frameborder="0" allowfullscreen></iframe>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a href="#" class="btn btn-xs bg-maroon">See comments</a>
|
||||
|
|
@ -543,7 +545,7 @@
|
|||
</li>
|
||||
<!-- END timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<i class="fa fa-clock-o bg-gray"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.col -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue