mirror of https://github.com/ColorlibHQ/AdminLTE
Add social widgets
Abdullah Almsaeed
parent
361db6d391
commit
af4deafa7c
|
|
@ -45,6 +45,7 @@
|
|||
@import "users-list.less";
|
||||
@import "carousel.less";
|
||||
@import "modal.less";
|
||||
@import "social-widgets.less";
|
||||
|
||||
//PAGES
|
||||
//------
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
* Component: Social Widgets
|
||||
* -------------------------
|
||||
*/
|
||||
//General widget style
|
||||
.box-widget {
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//User Widget Style 1
|
||||
.widget-user {
|
||||
//User name container
|
||||
.widget-user-header {
|
||||
padding: 20px;
|
||||
height: 120px;
|
||||
.border-top-radius(@box-border-radius);
|
||||
}
|
||||
//User name
|
||||
.widget-user-username {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
//User single line description
|
||||
.widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
//User image container
|
||||
.widget-user-image {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
> img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
.box-footer {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//User Widget Style 2
|
||||
.widget-user-2 {
|
||||
//User name container
|
||||
.widget-user-header {
|
||||
padding: 20px;
|
||||
.border-top-radius(@box-border-radius);
|
||||
}
|
||||
//User name
|
||||
.widget-user-username {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
//User single line description
|
||||
.widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
.widget-user-username,
|
||||
.widget-user-desc {
|
||||
margin-left: 75px;
|
||||
}
|
||||
//User image container
|
||||
.widget-user-image {
|
||||
> img {
|
||||
width: 65px;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2909,6 +2909,67 @@ table.text-center th {
|
|||
.modal-danger .modal-footer {
|
||||
border-color: #c23321;
|
||||
}
|
||||
/*
|
||||
* Component: Social Widgets
|
||||
* -------------------------
|
||||
*/
|
||||
.box-widget {
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
.widget-user .widget-user-header {
|
||||
padding: 20px;
|
||||
height: 120px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.widget-user .widget-user-username {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.widget-user .widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
.widget-user .widget-user-image {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
}
|
||||
.widget-user .widget-user-image > img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
.widget-user .box-footer {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.widget-user-2 .widget-user-header {
|
||||
padding: 20px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.widget-user-2 .widget-user-username {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.widget-user-2 .widget-user-desc {
|
||||
margin-top: 0;
|
||||
}
|
||||
.widget-user-2 .widget-user-username,
|
||||
.widget-user-2 .widget-user-desc {
|
||||
margin-left: 75px;
|
||||
}
|
||||
.widget-user-2 .widget-user-image > img {
|
||||
width: 65px;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
/*
|
||||
* Page: Mailbox
|
||||
* -------------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1036,6 +1036,102 @@
|
|||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
<h2 class="page-header">Social Widgets</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<!-- Widget: user widget style 1 -->
|
||||
<div class="box box-widget widget-user-2">
|
||||
<!-- Add the bg color to the header using any of the bg-* classes -->
|
||||
<div class="widget-user-header bg-yellow">
|
||||
<div class="widget-user-image">
|
||||
<img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar"/>
|
||||
</div><!-- /.widget-user-image -->
|
||||
<h3 class="widget-user-username">Nadia Carmichael</h3>
|
||||
<h5 class="widget-user-desc">Lead Developer</h5>
|
||||
</div>
|
||||
<div class="box-footer no-padding">
|
||||
<ul class="nav nav-stacked">
|
||||
<li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
|
||||
<li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
|
||||
<li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
|
||||
<li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.widget-user -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<!-- Widget: user widget style 1 -->
|
||||
<div class="box box-widget widget-user">
|
||||
<!-- Add the bg color to the header using any of the bg-* classes -->
|
||||
<div class="widget-user-header bg-aqua-active">
|
||||
<h3 class="widget-user-username">Alexander Pierce</h3>
|
||||
<h5 class="widget-user-desc">Founder & CEO</h5>
|
||||
</div>
|
||||
<div class="widget-user-image">
|
||||
<img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar"/>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">3,200</h5>
|
||||
<span class="description-text">SALES</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">13,000</h5>
|
||||
<span class="description-text">FOLLOWERS</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">35</h5>
|
||||
<span class="description-text">PRODUCTS</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
</div>
|
||||
</div><!-- /.widget-user -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<!-- Widget: user widget style 1 -->
|
||||
<div class="box box-widget widget-user">
|
||||
<!-- Add the bg color to the header using any of the bg-* classes -->
|
||||
<div class="widget-user-header bg-black" style="background: url('../dist/img/photo1.png') center center;">
|
||||
<h3 class="widget-user-username">Elizabeth Pierce</h3>
|
||||
<h5 class="widget-user-desc">Web Designer</h5>
|
||||
</div>
|
||||
<div class="widget-user-image">
|
||||
<img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar"/>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">3,200</h5>
|
||||
<span class="description-text">SALES</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">13,000</h5>
|
||||
<span class="description-text">FOLLOWERS</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">35</h5>
|
||||
<span class="description-text">PRODUCTS</span>
|
||||
</div><!-- /.description-block -->
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
</div>
|
||||
</div><!-- /.widget-user -->
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
</section><!-- /.content -->
|
||||
</div><!-- /.content-wrapper -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue