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 "users-list.less";
|
||||||
@import "carousel.less";
|
@import "carousel.less";
|
||||||
@import "modal.less";
|
@import "modal.less";
|
||||||
|
@import "social-widgets.less";
|
||||||
|
|
||||||
//PAGES
|
//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 {
|
.modal-danger .modal-footer {
|
||||||
border-color: #c23321;
|
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
|
* Page: Mailbox
|
||||||
* -------------
|
* -------------
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1036,6 +1036,102 @@
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
</div><!-- /.row -->
|
</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 -->
|
</section><!-- /.content -->
|
||||||
</div><!-- /.content-wrapper -->
|
</div><!-- /.content-wrapper -->
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue