3270 lines
68 KiB
Plaintext
3270 lines
68 KiB
Plaintext
/*
|
|
Themes: Ninja Admin
|
|
Version 2.0
|
|
[Table of contents]
|
|
-------------------------------------------------------------------------
|
|
1. Footer
|
|
2. Box Content
|
|
3. Calendar
|
|
4. Chartist Chart
|
|
5. Checkbox
|
|
6. Data Tables
|
|
7. Dropcap
|
|
8. Example Content
|
|
9. Inbox List
|
|
10. Jquery UI
|
|
11. Menu Mobile Button
|
|
12. Morris Chart
|
|
13. Notice
|
|
14. noUiSlider
|
|
15. Process Bar
|
|
16. Radio
|
|
17. Search Form
|
|
18. Statistics Box
|
|
19. Switch
|
|
20. Tabs
|
|
21. Timepicke
|
|
22. Title
|
|
23. User Info
|
|
24. Widget Stat
|
|
25. Widget Stat Chart
|
|
26. Misc
|
|
27. Mailbox
|
|
28. Login, Register, ... Form
|
|
29. 404,500 Page
|
|
30. Projects Page
|
|
31. Task Board
|
|
32. Profile
|
|
33. Contact List
|
|
34. Pricing Plan
|
|
35. Invoice
|
|
36. Gallery
|
|
37. Modal
|
|
38. Form Control
|
|
39. Reviews Widget
|
|
40. Activity Widget
|
|
41. Todo Widget
|
|
42. X-Editable
|
|
43. Sparkline Chart
|
|
44. SweetAlert
|
|
-------------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
1. Footer
|
|
*/
|
|
.footer{
|
|
padding: 19px 30px 20px 30px;
|
|
margin: 0px -20px 0px -20px;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
a{ color: rgba(0, 0, 0, 0.7);
|
|
@media (min-width: 1025px) { &:hover{ color: @blue; } }
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
2. Box Content
|
|
*/
|
|
.box-content{
|
|
position: relative;
|
|
padding: 20px;
|
|
margin: 0px 0px 20px 0px;
|
|
background: @white;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
|
|
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
|
|
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
.box-title{
|
|
margin: 0px 0px 30px 0px;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
font-weight: 600;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
.ico{
|
|
margin-right: 8px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
&.with-control{
|
|
.controls{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
font-size: 0px;
|
|
line-height: 16px;
|
|
}
|
|
.control{
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
height: 16px;
|
|
font-size: 14px;
|
|
}
|
|
.fa-times{
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
.content:after{
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
.dropdown.js__drop_down{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
.dropdown-icon{ color: @brown;
|
|
@media (min-width: 1025px) { &:hover{ color: @dark; } }
|
|
}
|
|
.sub-menu{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 100%;
|
|
margin-right: 5px;
|
|
z-index: 20;
|
|
width: 200px;
|
|
margin-top: 2px;
|
|
padding: 10px 0px;
|
|
border: 1px solid rgba(152, 166, 173, 0.15);
|
|
background: @white;
|
|
list-style: none;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
transform: translate(0, 20px);
|
|
-webkit-transform: translate(0, 20px);
|
|
-moz-transform: translate(0, 20px);
|
|
-o-transform: translate(0, 20px);
|
|
-ms-transform: translate(0, 20px);
|
|
box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
-moz-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
-webkit-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
a{
|
|
display: block;
|
|
padding: 6px 20px 6px 20px;
|
|
color: @dark;
|
|
@media (min-width: 1025px) { &:hover{ color: @blue; }}
|
|
}
|
|
|
|
.split{
|
|
margin: 9px 0px 9px 0px;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #e5e5e5;
|
|
}
|
|
}
|
|
&.active{
|
|
.dropdown-icon{ color: @dark; }
|
|
.sub-menu{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(0, 0);
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* State */
|
|
&.card-closed{
|
|
.box-title{ margin-bottom: 0px !important;
|
|
&.with-control{
|
|
.fa-minus:before{ content: "\f067"; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Style */
|
|
&.bordered{
|
|
border-top: 4px solid @dark;
|
|
-webkit-border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
&.bordered-all{
|
|
border: 1px solid @dark;
|
|
border-top: 4px solid @dark;
|
|
-webkit-border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
&.card{
|
|
padding: 0px;
|
|
-webkit-border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
.box-title{
|
|
margin-bottom: 0px;
|
|
padding: 10px 20px 10px 20px;
|
|
line-height: 30px;
|
|
color: @white !important;
|
|
background-color: @dark;
|
|
.ico{ line-height: 30px; }
|
|
.controls{ top: 17px; }
|
|
}
|
|
.dropdown{ top: 15px;
|
|
.dropdown-icon{ color: @white; }
|
|
}
|
|
.card-content{ padding: 20px; }
|
|
&.bordered-all{ border-top: none; }
|
|
.dropdown.js__drop_down .dropdown-icon{ color: @white !important; }
|
|
&.white{
|
|
.box-title{
|
|
color: @dark!important;
|
|
background: @white;
|
|
border-bottom: 1px solid #e6e9ed;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Color */
|
|
&.primary{ border-color: @navy;
|
|
.box-title{ color: @navy; }
|
|
}
|
|
&.success{ border-color: @success;
|
|
.box-title{ color: @success; }
|
|
}
|
|
&.info{ border-color: @info;
|
|
.box-title{ color: @info; }
|
|
}
|
|
&.warning{ border-color: @warning;
|
|
.box-title{ color: @warning; }
|
|
}
|
|
&.danger{ border-color: @danger;
|
|
.box-title{ color: @danger; }
|
|
}
|
|
&.muted{ border-color: @muted;
|
|
.box-title{ color: @muted; }
|
|
}
|
|
&.inverse{ border-color: @inverse;
|
|
.box-title{ color: @inverse; }
|
|
}
|
|
&.purple{ border-color: @purple;
|
|
.box-title{ color: @purple; }
|
|
}
|
|
&.pink{ border-color: @pink;
|
|
.box-title{ color: @pink; }
|
|
}
|
|
&.lightdark{ border-color: @muted;
|
|
.box-title{ color: @muted; }
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
3. Calendar
|
|
*/
|
|
.calendar {
|
|
float: left;
|
|
margin-bottom: 0px;
|
|
}
|
|
.fc-view { margin-top: 30px; }
|
|
.none-border .modal-footer { border-top: none; }
|
|
.fc-toolbar {
|
|
margin-bottom: 5px;
|
|
margin-top: 15px;
|
|
h2{
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
.fc-state-active,.ui-state-active,button:focus,button:hover{ z-index: 0; }
|
|
}
|
|
.fc-widget-header,.fc-widget-content { border: 1px solid @border; }
|
|
.fc{
|
|
th.fc-widget-header {
|
|
background: #f5f5f5;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
padding: 10px 0px 10px 0px;
|
|
text-transform: uppercase;
|
|
a{
|
|
color: #505458;
|
|
}
|
|
}
|
|
.fc-event{
|
|
.fc-bg{
|
|
display: none;
|
|
}
|
|
}
|
|
.fc-list-item{
|
|
&[class*=" bg-"]{
|
|
color: @white;
|
|
&:hover td{
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fc-button {
|
|
background: @white;
|
|
border: 1px solid @border;
|
|
color: #555;
|
|
text-transform: capitalize;
|
|
}
|
|
.fc-text-arrow { font-size: 16px; }
|
|
.fc-state-hover { background: #f3f3f3; }
|
|
.fc-state-highlight,.fc-cell-overlay { background: #f0f0f0; }
|
|
|
|
.fc-unthemed .fc-today { background: @white; }
|
|
.fc .fc-event ,#external-events .fc-event{
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
border: none;
|
|
cursor: move;
|
|
font-size: 12px;
|
|
margin: 5px 7px 5px 7px;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
.external-event {
|
|
color: @white;
|
|
cursor: move;
|
|
margin: 10px 0px 10px 0px;
|
|
padding: 6px 10px 6px 10px;
|
|
}
|
|
.fc-basic-view{
|
|
td.fc-week-number span, td.fc-day-number { padding-right: 5px; }
|
|
}
|
|
.fc-toolbar .fc-button-group .fc-button{
|
|
background: #ffffff;
|
|
&:hover{
|
|
background: #F5F5F5;
|
|
}
|
|
}
|
|
.fc .fc-event,.fc .fc-event-dot{
|
|
background: @blue;
|
|
transition: none;
|
|
-moz-transition: none;
|
|
-webkit-transition: none;
|
|
}
|
|
.fc .fc-event-dot{
|
|
background: @white;
|
|
}
|
|
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
|
|
color: @dark;
|
|
}
|
|
.fc.fc-ltr .fc-h-event.fc-not-start, .fc.fc-rtl .fc-h-event.fc-not-end{
|
|
margin-left: 7px;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
4. Chartist Chart
|
|
*/
|
|
.chartist-chart{
|
|
.ct-label{ font-size: 12px; }
|
|
&-pie{
|
|
.ct-label{
|
|
font-size: 14px;
|
|
color: @white;
|
|
fill: #fff;
|
|
}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
5. Checkbox
|
|
*/
|
|
.checkbox{
|
|
input[type="checkbox"]{ display: none;
|
|
&:checked + label:before{
|
|
border-color: #415dfb;
|
|
background: #415dfb;
|
|
}
|
|
&:checked + label:after{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
&:disabled + label{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
|
-moz-opacity: 0.6;
|
|
-khtml-opacity: 0.6;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
label{
|
|
position: relative;
|
|
padding-left: 25px;
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0px;
|
|
width: 17px;
|
|
height: 17px;
|
|
border: 1px solid #ccc;
|
|
background: @white;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
&:after{
|
|
content: "\f00c";
|
|
font-family: 'FontAwesome';
|
|
font-size: 12px;
|
|
line-height: 15px;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
color: @white;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
}
|
|
|
|
&.primary input[type="checkbox"]:checked + label:before{
|
|
background: @navy;
|
|
border-color: @navy;
|
|
}
|
|
&.success input[type="checkbox"]:checked + label:before{
|
|
background: @success;
|
|
border-color: @success;
|
|
}
|
|
&.info input[type="checkbox"]:checked + label:before{
|
|
background: @info;
|
|
border-color: @info;
|
|
}
|
|
&.warning input[type="checkbox"]:checked + label:before{
|
|
background: @warning;
|
|
border-color: @warning;
|
|
}
|
|
&.danger input[type="checkbox"]:checked + label:before{
|
|
background: @danger;
|
|
border-color: @danger;
|
|
}
|
|
&.purple input[type="checkbox"]:checked + label:before{
|
|
background: @purple;
|
|
border-color: @purple;
|
|
}
|
|
&.pink input[type="checkbox"]:checked + label:before{
|
|
background: @pink;
|
|
border-color: @pink;
|
|
}
|
|
&.inverse input[type="checkbox"]:checked + label:before{
|
|
background: @inverse;
|
|
border-color: @inverse;
|
|
}
|
|
|
|
&.circled label:before{
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
6. Data Tables
|
|
*/
|
|
.dataTables_wrapper{
|
|
.dataTables_paginate .pagination{
|
|
margin: 0;
|
|
.paginate_button{
|
|
padding: 0px;
|
|
min-width: 0px;
|
|
margin-left: 10px;
|
|
border: none !important;
|
|
background: none !important;
|
|
&:first-child{ margin-left: 0px; }
|
|
}
|
|
}
|
|
.dataTable{
|
|
margin-top: 10px!important;
|
|
margin-bottom: 18px!important;
|
|
.group{
|
|
background-color: @blue !important;
|
|
color: @white !important;
|
|
}
|
|
}
|
|
.dataTables_scrollBody .dataTable{
|
|
margin-top: 0px!important;
|
|
margin-bottom: 0px!important;
|
|
}
|
|
.dataTables_scrollFoot .dataTable{
|
|
margin-top: 0px!important;
|
|
}
|
|
table.dataTable thead , table.dataTable thead{
|
|
th,td{
|
|
border-bottom-color: #ddd;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
table.focus-on tbody tr.focused th, table.focus-on tbody tr.focused td{
|
|
background: @blue!important;
|
|
color: @white!important;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
7. Dropcap
|
|
*/
|
|
.dropcap,.dropcap-circle,.dropcap-square {
|
|
display: block;
|
|
float: left;
|
|
font-weight: 400;
|
|
line-height: 36px;
|
|
margin-right: 6px;
|
|
text-shadow: none;
|
|
}
|
|
.dropcap {
|
|
font-size: 3.1em;
|
|
}
|
|
.dropcap-circle{
|
|
font-size: 26px;
|
|
line-height: 36px;
|
|
width: 36px;
|
|
text-align: center;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
.dropcap-square{
|
|
font-size: 26px;
|
|
line-height: 36px;
|
|
width: 36px;
|
|
text-align: center;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
8. Example Content
|
|
*/
|
|
.example-content{
|
|
position: relative;
|
|
padding: 15px;
|
|
background: #f5f5f5;
|
|
.modal{
|
|
display: block;
|
|
position: relative;
|
|
top: auto;
|
|
left: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
z-index: 10;
|
|
}
|
|
.modal-dialog{
|
|
left: auto;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.bs-example{
|
|
position: relative;
|
|
padding: 45px 15px 15px 15px;
|
|
margin: 0px;
|
|
border: 1px solid #ddd;
|
|
background: #f4f4f4;
|
|
.bs-title{
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: @dark;
|
|
text-transform: uppercase;
|
|
}
|
|
> .dropdown{
|
|
> .dropdown-toggle{ float: left; }
|
|
> .dropdown-menu{
|
|
position: static;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
clear: left;
|
|
}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
9. Inbox List
|
|
*/
|
|
.inbox-list{
|
|
margin-bottom: 15px;
|
|
list-style: none;
|
|
padding: 0px;
|
|
li{ border-bottom: 1px solid #f3f3f3; }
|
|
.avatar{
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0px;
|
|
width: 40px;
|
|
height: 40px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
.inbox-item{
|
|
position: relative;
|
|
min-height: 40px;
|
|
padding: 10px 0px 10px 55px;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
.name{
|
|
color: @blue;
|
|
margin: 0px;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
@media (min-width: 1025px) { &:hover{ color: @dark_blue; } }
|
|
}
|
|
.text{
|
|
color: #656d78;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin: 0px;
|
|
font-weight: 500;
|
|
}
|
|
.time{
|
|
font-size: 11px;
|
|
color: @brown;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0px;
|
|
}
|
|
|
|
.full-text .text{ white-space: normal; }
|
|
}
|
|
.inbox-read-more{
|
|
display: block;
|
|
color: @dark;
|
|
text-align: center;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
10. Jquery UI
|
|
*/
|
|
.ui-sortable-placeholder{
|
|
border: 2px dashed @dark;
|
|
background: #ccc;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
|
-moz-opacity: 0.7;
|
|
-khtml-opacity: 0.7;
|
|
opacity: 0.7;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
11. Menu Mobile Button
|
|
*/
|
|
.menu-mobile-button{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 75px;
|
|
width: 70px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 20px;
|
|
line-height: 75px;
|
|
color: @white;
|
|
background: @mobile_bg;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
12. Morris Chart
|
|
*/
|
|
.morris-chart-detail-list{ margin-top: 10px;
|
|
.fa{ margin-right: 5px; }
|
|
li:nth-child(1){ color: #fcb03b; }
|
|
li:nth-child(2){ color: #ea65a2; }
|
|
li:nth-child(3){ color: #566FC9; }
|
|
li:nth-child(4){ color: #333333; }
|
|
}
|
|
.morris-chart-realtime{
|
|
.morris-hover-row-label{ display: none; }
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
13. Notice
|
|
*/
|
|
.notice{
|
|
display: inline-block;
|
|
-webkit-border-radius: 0.25em;
|
|
-moz-border-radius: 0.25em;
|
|
border-radius: 0.25em;
|
|
padding: 2px 6px 0;
|
|
font-size: 75%;
|
|
}
|
|
.notice-blue{
|
|
color: @white;
|
|
background: @blue;
|
|
}
|
|
.notice-purple{
|
|
color: @white;
|
|
background: @purple;
|
|
}
|
|
.notice-yellow{
|
|
color: @white;
|
|
background: @warning;
|
|
}
|
|
.notice-danger{
|
|
color: @white;
|
|
background: #ff1744;
|
|
}
|
|
|
|
/* Notice List */
|
|
.notice-list{
|
|
list-style: none;
|
|
padding: 0px;
|
|
li{ border-bottom: 1px solid #eaedef; }
|
|
a{
|
|
display: block;
|
|
position: relative;
|
|
padding: 14px 15px 14px 85px;
|
|
min-height: 75px;
|
|
&:hover{ background: #f5f7fa; }
|
|
}
|
|
|
|
.avatar{
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 15px;
|
|
width: 55px;
|
|
height: 55px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
i{
|
|
font-size: 24px;
|
|
line-height: 55px;
|
|
color: @white;
|
|
top: 0px;
|
|
}
|
|
}
|
|
.desc{
|
|
color: #90a4ae;
|
|
font-size: 13px;
|
|
line-height: 23px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.name{
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
font-weight: 500;
|
|
color: #212121;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
display: block;
|
|
@media (min-width: 1025px) { &:hover{ color: @blue; } }
|
|
}
|
|
.time{
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
color: @brown;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 17px;
|
|
}
|
|
}
|
|
|
|
/* Notice Popup */
|
|
.notice-popup{
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: fixed;
|
|
top: 75px;
|
|
right: 20px;
|
|
z-index: 40;
|
|
background: @white;
|
|
width: 450px;
|
|
max-width: 100%;
|
|
padding-top: 50px;
|
|
transform: translate(0, 30px);
|
|
-webkit-transform: translate(0, 30px);
|
|
-moz-transform: translate(0, 30px);
|
|
-o-transform: translate(0, 30px);
|
|
-ms-transform: translate(0, 30px);
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
-webkit-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
-moz-box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
|
@media(max-width: 550px){
|
|
width: 100%;
|
|
right: 0;
|
|
&#message-popup{
|
|
right: 0
|
|
}
|
|
}
|
|
&.active{
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(0, 0);
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
}
|
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
|
background: @brown!important
|
|
}
|
|
&:hover .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
.content{
|
|
overflow: auto;
|
|
height: 100%;
|
|
.notice-list{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.popup-title{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 11px 10px 11px 18px;
|
|
color: #1b1f20;
|
|
margin: 0px;
|
|
border-bottom: 1px solid #e6e9ed;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
line-height: 27px;
|
|
a{
|
|
text-transform: initial;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.popup-close{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
z-index: 10;
|
|
font-size: 18px;
|
|
line-height: 59px;
|
|
padding: 0px 10px 0px 10px;
|
|
color: @dark;
|
|
@media (min-width: 1025px) { &:hover{ color: @danger; } }
|
|
}
|
|
.notice-read-more{
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
color: #212121;
|
|
padding: 3px 10px 13px;
|
|
text-align: center;
|
|
display: block;
|
|
&:hover{
|
|
color: @blue;
|
|
}
|
|
}
|
|
}
|
|
#message-popup{
|
|
right: 60px;
|
|
}
|
|
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
14. noUiSlider
|
|
*/
|
|
.noui-connect{
|
|
.noUi-origin{
|
|
right: auto;
|
|
width: 0px;
|
|
}
|
|
.connect{
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
background: #80C9F5;
|
|
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
|
|
-moz-box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
|
|
-webkit-box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
|
|
}
|
|
&.noUi-state-tap{
|
|
.connect{
|
|
-webkit-transition: left 300ms, right 300ms;
|
|
-moz-transition: left 300ms, right 300ms;
|
|
transition: left 300ms, right 300ms;
|
|
}
|
|
}
|
|
}
|
|
.noui-select,.noui-number{
|
|
padding: 7px;
|
|
margin: 15px 5px 5px 5px;
|
|
width: 70px;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
15. Process Bar
|
|
*/
|
|
.process-bar{
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 5px;
|
|
margin-top: 12px;
|
|
background: @white;
|
|
overflow: hidden;
|
|
.bar{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: 5px;
|
|
z-index: 2;
|
|
}
|
|
.bar-bg{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 5px;
|
|
z-index: 1;
|
|
opacity: 0.2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
16. Radio
|
|
*/
|
|
.radio{
|
|
input[type="radio"]{ display: none;
|
|
&:checked + label:before{ border-color: @dark; }
|
|
&:checked + label:after{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
&:disabled + label{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
|
-moz-opacity: 0.6;
|
|
-khtml-opacity: 0.6;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
label{
|
|
position: relative;
|
|
padding-left: 25px;
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0px;
|
|
width: 17px;
|
|
height: 17px;
|
|
border: 1px solid #ccc;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
&:after{
|
|
content: "";
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 3px;
|
|
width: 11px;
|
|
height: 11px;
|
|
background: @dark;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
}
|
|
|
|
&.primary label:after{ background: @blue; }
|
|
&.success label:after{ background: @success; }
|
|
&.info label:after{ background: @info; }
|
|
&.warning label:after{ background: @warning; }
|
|
&.danger label:after{ background: @danger; }
|
|
&.purple label:after{ background: @purple; }
|
|
&.pink label:after{ background: @pink; }
|
|
&.inverse label:after{ background: @inverse; }
|
|
|
|
&.primary input[type="radio"]:checked + label:before{ border-color: @blue; }
|
|
&.success input[type="radio"]:checked + label:before{ border-color: @success; }
|
|
&.info input[type="radio"]:checked + label:before{ border-color: @info; }
|
|
&.warning input[type="radio"]:checked + label:before{ border-color: @warning; }
|
|
&.danger input[type="radio"]:checked + label:before{ border-color: @danger; }
|
|
&.purple input[type="radio"]:checked + label:before{ order-color: @purple; }
|
|
&.pink input[type="radio"]:checked + label:before{ border-color: @pink; }
|
|
&.inverse input[type="radio"]:checked + label:before{ border-color: @inverse; }
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
17. Search Form
|
|
*/
|
|
.searchform{
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-left: 20px;
|
|
padding: 13px 0px 13px 0px;
|
|
.input-search{
|
|
border: none;
|
|
width: 190px;
|
|
height: 34px;
|
|
padding: 7px 40px 7px 20px;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
color: @main;
|
|
background: @white;
|
|
-webkit-border-radius: 30px;
|
|
-moz-border-radius: 30px;
|
|
border-radius: 30px;
|
|
&::-webkit-input-placeholder{ color: #999999; }
|
|
&:-moz-input-placeholder{ color: #999999; }
|
|
&::-moz-input-placeholder{ color: #999999; }
|
|
&:-ms-input-placeholder{ color: #999999; }
|
|
}
|
|
|
|
.button-search{
|
|
position: absolute;
|
|
top: 22px;
|
|
right: 10px;
|
|
color: @dark;
|
|
z-index: 10;
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
@media (min-width: 1025px) { &:hover{ color: @blue; } }
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
18. Statistics Box
|
|
*/
|
|
.statistics-box{
|
|
padding-top: 14px;
|
|
min-height: 80px;
|
|
text-align: center;
|
|
&.with-icon{
|
|
position: relative;
|
|
padding-left: 80px;
|
|
text-align: right;
|
|
.ico{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 80px;
|
|
height: 80px;
|
|
font-size: 70px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
&.small{
|
|
font-size: 42px;
|
|
}
|
|
}
|
|
}
|
|
.counter{
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.text{
|
|
color: @brown;
|
|
margin: 0px
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
19. Switch
|
|
*/
|
|
.switch{
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
input[type="checkbox"]{ display: none;
|
|
&:checked + label:before{
|
|
background: @dark;
|
|
border-color: @dark;
|
|
}
|
|
&:checked + label:after{ left: 14px; }
|
|
}
|
|
label{
|
|
position: relative;
|
|
padding-left: 40px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
margin: 0px;
|
|
min-height: 20px;
|
|
&:before{
|
|
content: "";
|
|
width: 30px;
|
|
height: 18px;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0px;
|
|
border: 1px solid #ddd;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
background: #f1f1f1;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
&:after{
|
|
content: "";
|
|
width: 16px;
|
|
height: 16px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
background: @white;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
&.primary input[type="checkbox"]:checked + label:before{
|
|
background: @blue;
|
|
border-color: @blue;
|
|
}
|
|
&.success input[type="checkbox"]:checked + label:before{
|
|
background: @success;
|
|
border-color: @success;
|
|
}
|
|
&.info input[type="checkbox"]:checked + label:before{
|
|
background: @info;
|
|
border-color: @info;
|
|
}
|
|
&.warning input[type="checkbox"]:checked + label:before{
|
|
background: @warning;
|
|
border-color: @warning;
|
|
}
|
|
&.danger input[type="checkbox"]:checked + label:before{
|
|
background: @danger;
|
|
border-color: @danger;
|
|
}
|
|
&.purple input[type="checkbox"]:checked + label:before{
|
|
background: @purple;
|
|
border-color: @purple;
|
|
}
|
|
&.pink input[type="checkbox"]:checked + label:before{
|
|
background: @pink;
|
|
border-color: @pink;
|
|
}
|
|
&.inverse input[type="checkbox"]:checked + label:before{
|
|
background: @inverse;
|
|
border-color: @inverse;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
20. Tabs
|
|
*/
|
|
.tab-content{
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-top: none;
|
|
}
|
|
.tab-header{
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
.navbar{
|
|
margin-bottom: 0px;
|
|
border: none;
|
|
min-height: auto;
|
|
}
|
|
|
|
&.pill{
|
|
border: none;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
21. Timepicke
|
|
*/
|
|
.bootstrap-timepicker-widget table td{
|
|
a:hover {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
border-radius: 4px;
|
|
color: @navy;
|
|
text-decoration: none;
|
|
}
|
|
input { border: none; }
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
22. Title
|
|
*/
|
|
.page-title{
|
|
display: inline-block;
|
|
margin: 0px;
|
|
font-size: 18px;
|
|
line-height: 75px;
|
|
font-weight: 500;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
23. User Info
|
|
*/
|
|
.user-info{
|
|
.avatar{
|
|
float: left;
|
|
width: 78px;
|
|
img{
|
|
border: 3px solid @white;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
.name,p,.text-custom{
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.text-custom{
|
|
font-weight: 500;
|
|
}
|
|
.name{
|
|
margin: 0px 0px 5px 0px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
.right-content{ margin-left: 90px; }
|
|
|
|
p{
|
|
font-size: 13px;
|
|
line-height: 22px;
|
|
margin-bottom: 5px;
|
|
}
|
|
a{
|
|
color: #2962ff;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
24. Widget Stat
|
|
*/
|
|
.widget-stat{
|
|
padding-bottom: 10px;
|
|
text-align: right;
|
|
.counter{
|
|
padding-top: 10px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
color: #434a54;
|
|
}
|
|
.percent{
|
|
float: left;
|
|
padding: 0px 10px 0px 10px;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
color: @white;
|
|
-webkit-border-radius: 10px;
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
i{
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
.left-content{
|
|
float: left;
|
|
}
|
|
.right-content{ margin-left: 130px; }
|
|
.text{
|
|
color: @brown;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
25. Widget Stat Chart
|
|
*/
|
|
.widget-stat-chart{
|
|
padding-bottom: 10px;
|
|
text-align: right;
|
|
.c100{ margin: 0px; }
|
|
.counter{
|
|
padding-top: 10px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.right-content{ margin-left: 80px; }
|
|
.text{
|
|
color: @brown;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
26. Misc
|
|
*/
|
|
.form-inline .checkbox label, .form-inline .radio label{ padding-left: 25px; }
|
|
.label{
|
|
padding: .2em .6em .2em;
|
|
font-weight: 400;
|
|
}
|
|
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
|
|
padding: 9px;
|
|
}
|
|
@media (min-width: 768px){
|
|
.form-horizontal .control-label{
|
|
padding-top: 12px
|
|
}
|
|
}
|
|
.ui-accordion .ui-accordion-header{
|
|
outline: none;
|
|
}
|
|
.list-group-item,
|
|
.list-group-item:first-child,
|
|
.list-group-item:last-child {
|
|
border-radius: 0px;
|
|
border-color: rgba(120, 130, 140, 0.13);
|
|
}
|
|
.table-purchases{
|
|
a{
|
|
color: #ccc;
|
|
&:hover{
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
27. Mailbox
|
|
*/
|
|
.box {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
background: @white;
|
|
border: 1px solid #e1e3e5;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
|
|
&.collapsed-box{
|
|
.box-body,.box-footer{ display: none; }
|
|
}
|
|
.nav-stacked{
|
|
> li{
|
|
border-bottom: 1px solid #f4f4f4;
|
|
margin: 0px;
|
|
&:last-of-type{ border-bottom: none; }
|
|
}
|
|
}
|
|
|
|
.border-right{ border-right: 1px solid #f4f4f4; }
|
|
.border-left{ border-left: 1px solid #f4f4f4; }
|
|
|
|
&.box-solid{ border-top: none;
|
|
> .box-header{
|
|
.btn{
|
|
&.btn-default{ background: none; }
|
|
}
|
|
.btn:hover,a:hover{ background: rgba(0, 0, 0, 0.1); }
|
|
}
|
|
|
|
&.box-default{ border: 1px solid #d2d6de;
|
|
> .box-header{
|
|
color: #444;
|
|
background-color: #d2d6de;
|
|
a,.btn{ color: #444; }
|
|
}
|
|
}
|
|
&.box-primary{ border: 1px solid @blue;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @blue;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-success{ border: 1px solid @success;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @success;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-info{ border: 1px solid @info;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @info;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-warning{ border: 1px solid @warning;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @warning;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-danger{ border: 1px solid @danger;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @danger;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-purple{ border: 1px solid @purple;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @purple;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-pink{ border: 1px solid @pink;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @pink;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&.box-inverse{ border: 1px solid @inverse;
|
|
> .box-header{
|
|
color: @white;
|
|
background-color: @inverse;
|
|
a,.btn{ color: @white; }
|
|
}
|
|
}
|
|
&[class*='bg'] > .box-header{color: @white; }
|
|
}
|
|
> .box-header{
|
|
> .box-tools{
|
|
.btn{
|
|
border: none;
|
|
box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
.box-header:before,.box-body:before,.box-footer:before,.box-header:after,.box-body:after,.box-footer:after{
|
|
content: "";
|
|
display: table;
|
|
}
|
|
.box-header:after,.box-body:after,.box-footer:after{ clear: both; }
|
|
|
|
.box-header{
|
|
display: block;
|
|
position: relative;
|
|
padding: 14px 20px;
|
|
color: #444;
|
|
&.with-border{ border-bottom: 1px solid #f2f4f6; }
|
|
> .fa,> .glyphicon,.box-title, .ico{
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
margin: 0px;
|
|
margin-right: 5px;
|
|
font-weight: 500;
|
|
}
|
|
> .box-tools{
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 20px;
|
|
[data-toggle="tooltip"]{ position: relative; }
|
|
&.pull-right .dropdown-menu{
|
|
right: 0px;
|
|
left: auto;
|
|
}
|
|
}
|
|
.has-feedback{
|
|
.form-control{
|
|
width: 300px;
|
|
height: 35px;
|
|
}
|
|
.form-control-feedback{
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #656d78;
|
|
}
|
|
}
|
|
}
|
|
&.collapsed-box .box-header.with-border{ border-bottom: none; }
|
|
}
|
|
.btn-mail-main{
|
|
height: 50px;
|
|
font-size: 14px;
|
|
line-height: 34px;
|
|
}
|
|
.btn-box-tool {
|
|
padding: 5px;
|
|
font-size: 12px;
|
|
background: none;
|
|
color: #97a0b3;
|
|
&.btn:active{
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
}
|
|
}
|
|
.open .btn-box-tool,.btn-box-tool:hover { color: #606c84; }
|
|
|
|
.box-body {
|
|
padding: 0px 20px;
|
|
-moz-border-radius-topleft: 0px;
|
|
-webkit-border-top-left-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
-moz-border-radius-topright: 0px;
|
|
-webkit-border-top-right-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
-moz-border-radius-bottomleft: 3px;
|
|
-webkit-border-bottom-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
-moz-border-radius-bottomright: 3px;
|
|
-webkit-border-bottom-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
> .table { margin-bottom: 0px; }
|
|
.nav{
|
|
li.active a{
|
|
background: @white;
|
|
color: @blue;
|
|
}
|
|
a{
|
|
padding: 13px 0;
|
|
color: #212121;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
font-weight: 500;
|
|
&:hover{
|
|
background: @white;
|
|
color: @blue;
|
|
}
|
|
}
|
|
.fa{
|
|
display: inline-block;
|
|
width: 35px;
|
|
line-height: 26px;
|
|
font-size: 17px;
|
|
}
|
|
.label-text-right{
|
|
color: #656d78;
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
}
|
|
.label-right{
|
|
padding: 0px 7px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
margin-top: 2px;
|
|
padding-top: 2px;
|
|
border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.box-footer {
|
|
padding: 10px 20px;
|
|
background: @white;
|
|
-moz-border-radius-topleft: 0px;
|
|
-webkit-border-top-left-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
-moz-border-radius-topright: 0px;
|
|
-webkit-border-top-right-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
-moz-border-radius-bottomleft: 3px;
|
|
-webkit-border-bottom-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
-moz-border-radius-bottomright: 3px;
|
|
-webkit-border-bottom-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
.mailbox-messages{
|
|
.table{
|
|
margin-bottom: 0;
|
|
border-collapse: separate;
|
|
border-spacing: 0px 1px;
|
|
>tbody>tr>td{ border-top: none }
|
|
.mailbox-subject{
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 500px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.mailbox-star{
|
|
a{
|
|
color: #ccd1d9;
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
.mailbox-name{
|
|
a{
|
|
color: #212121;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.mailbox-subject{
|
|
color: #90a4ae;
|
|
span{
|
|
color: #656d78;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.table-striped>tbody>tr:nth-of-type(odd){ background: #f5f7fa }
|
|
.unread{
|
|
> td:first-of-type{ border-left: 5px solid @blue;}
|
|
.mailbox-subject span{ color: #212121 }
|
|
}
|
|
tr > td:first-of-type{ border-left: 5px solid transparent;}
|
|
}
|
|
|
|
.mailbox-read-info {
|
|
border-bottom: 1px solid #f4f4f4;
|
|
padding: 10px 20px;
|
|
h3{
|
|
font-size: 20px;
|
|
margin: 0px;
|
|
}
|
|
h5{
|
|
padding: 5px 0px 0px 0px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
.mailbox-read-time{
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
.mailbox-controls{
|
|
border-bottom: 1px solid #f4f4f4;
|
|
padding: 8px 20px 1px 15px;
|
|
&:after{
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.btn{
|
|
padding: 0;
|
|
line-height: 35px;
|
|
height: 35px;
|
|
min-width: 80px;
|
|
margin: 0 5px 7px;
|
|
font-size: 18px;
|
|
color: #656d78;
|
|
background: #f5f7fa;
|
|
border-color: #ccd1d9;
|
|
}
|
|
.btn-group{
|
|
font-size: 0;
|
|
.btn{
|
|
min-width: 40px;
|
|
color: #aab2bd;
|
|
font-size: 26px;
|
|
background: #f5f7fa;
|
|
border: 1px solid #ccd1d9;
|
|
margin: 0!important;
|
|
z-index: 1!important;
|
|
&:first-child{
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
.inbox-text{
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
line-height: 35px;
|
|
margin-right: 8px;
|
|
}
|
|
@media(max-width: 929px){
|
|
.pull-right{
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
.icheckbox_square-blue{
|
|
transform: scale(0.7);
|
|
}
|
|
.mailbox-read-message{ padding: 10px 20px; }
|
|
.mailbox-footer{
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid #f4f4f4;
|
|
border-top: 1px solid #f4f4f4;
|
|
}
|
|
.mailbox-attachments{
|
|
list-style: none;
|
|
padding: 0px;
|
|
li {
|
|
float: left;
|
|
width: 200px;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.mailbox-attachment-name {
|
|
font-weight: 700;
|
|
color: #666;
|
|
}
|
|
.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size { display: block; }
|
|
.mailbox-attachment-info {
|
|
padding: 10px;
|
|
background: #f4f4f4;
|
|
}
|
|
.mailbox-attachment-size {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
.mailbox-attachment-icon {
|
|
text-align: center;
|
|
font-size: 65px;
|
|
color: #666;
|
|
padding: 20px 10px 20px 10px;
|
|
}
|
|
.mailbox-attachment-icon.has-img { padding: 0px; }
|
|
.mailbox-attachment-icon.has-img > img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
28. Login, Register, ... Form
|
|
*/
|
|
#single-wrapper{
|
|
min-height: 100%;
|
|
background: url('../images/sativa.png') top center repeat;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 0px 15px 0px 15px;
|
|
}
|
|
.frm-single{
|
|
width: 100%;
|
|
max-width: 400px;
|
|
display: block;
|
|
margin: 60px auto 60px;
|
|
float: none;
|
|
position: relative;
|
|
|
|
&:before,&:after{
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: @white;
|
|
transform: rotate(2deg);
|
|
-webkit-transform: rotate(2deg);
|
|
-moz-transform: rotate(2deg);
|
|
-o-transform: rotate(2deg);
|
|
-ms-transform: rotate(2deg);
|
|
box-shadow: 0 0 1px 0 #ccc;
|
|
-webkit-box-shadow: 0 0 1px 0 #ccc;
|
|
-moz-box-shadow: 0 0 1px 0 #ccc;
|
|
}
|
|
&:after{
|
|
transform: rotate(1deg);
|
|
-webkit-transform: rotate(1deg);
|
|
-moz-transform: rotate(1deg);
|
|
-o-transform: rotate(1deg);
|
|
-ms-transform: rotate(1deg);
|
|
}
|
|
.inside{
|
|
background: @white;
|
|
position: relative;
|
|
padding: 20px;
|
|
z-index: 20;
|
|
box-shadow: 0 0 1px 0 #ccc;
|
|
-webkit-box-shadow: 0 0 1px 0 #ccc;
|
|
-moz-box-shadow: 0 0 1px 0 #ccc;
|
|
}
|
|
|
|
.title{
|
|
margin-bottom: 5px;
|
|
font-family: "Poppins", sans-serif;
|
|
font-size: 20px;
|
|
line-height: 34px;
|
|
white-space: nowrap;
|
|
color: @dark;
|
|
text-align: center;
|
|
}
|
|
.a-link{
|
|
color: #999;
|
|
&:hover{
|
|
color: #435966;
|
|
}
|
|
}
|
|
|
|
.frm-title{
|
|
color: #999;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.frm-input{
|
|
display: block;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
.frm-inp{
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0px;
|
|
padding-left: 30px;
|
|
border: 1px solid #ccc;
|
|
font-size: 14px;
|
|
line-height: 38px;
|
|
border-left: 3px solid #999;
|
|
&:focus{
|
|
border-color: @blue;
|
|
padding-left: 10px;
|
|
+ .frm-ico{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
transform: scale(0.8, 0.8);
|
|
-webkit-transform: scale(0.8, 0.8);
|
|
-moz-transform: scale(0.8, 0.8);
|
|
-o-transform: scale(0.8, 0.8);
|
|
-ms-transform: scale(0.8, 0.8);
|
|
}
|
|
}
|
|
}
|
|
.frm-ico{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 3px;
|
|
width: 30px;
|
|
font-size: 18px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
color: #999;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
}
|
|
.checkbox{ margin: 0px; }
|
|
.a-link i{ margin-right: 5px; }
|
|
.frm-submit{
|
|
display: block;
|
|
width: 100%;
|
|
height: 36px;
|
|
border: none;
|
|
background: @blue;
|
|
color: @white;
|
|
margin-bottom: 15px;
|
|
@media (min-width: 1025px) { &:hover{ background: @dark_blue; } }
|
|
i{ margin-left: 5px; }
|
|
}
|
|
.frm-footer{
|
|
padding: 20px 0px 0px 0px;
|
|
margin-top: 15px;
|
|
border-top: 1px solid #ccc;
|
|
color: #999;
|
|
}
|
|
.avatar{
|
|
display: block;
|
|
margin: 0px auto 20px;
|
|
float: none;
|
|
position: relative;
|
|
width: 70px;
|
|
height: 70px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.ico-email{
|
|
display: block;
|
|
margin: 0px auto 20px;
|
|
float: none;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.txt-login-with{
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
color: #999;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
29. 404,500 Page
|
|
*/
|
|
#page-404{
|
|
height: 100%;
|
|
background: url('../images/404.jpg') top center repeat;
|
|
background-position: center center;
|
|
background-attachment: fixed;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 0px 15px 0px 15px;
|
|
.content{
|
|
width: 100%;
|
|
max-width: 600px;
|
|
display: block;
|
|
margin: 0px auto 0px;
|
|
float: none;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
-o-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
p{
|
|
padding: 30px 0px 30px 0px;
|
|
color: #777;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
margin: 0px;
|
|
}
|
|
@media(max-height: 359px){
|
|
min-height: 100%;
|
|
height: auto;
|
|
.content{
|
|
transform: translate(0, 0);
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
top: 0px;
|
|
margin-top: 60px;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
}
|
|
.title-on-desktop{ position: relative;
|
|
.title{
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.title-on-mobile{ display: none; }
|
|
@media(max-width: 649px){
|
|
.title-on-desktop{ display: none; }
|
|
.title-on-mobile{ display: block; }
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
30. Projects Page
|
|
*/
|
|
.prj-header{
|
|
position: relative;
|
|
min-height: 64px;
|
|
padding: 0 130px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
.btn-submit-prj{
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0px;
|
|
}
|
|
.result-count{
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0px;
|
|
font-size: 14px;
|
|
line-height: 34px;
|
|
}
|
|
.filters{
|
|
list-style: none;
|
|
padding: 0px;
|
|
font-size: 0px;
|
|
text-align: center;
|
|
margin-bottom: 0px;
|
|
li{
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
line-height: 34px;
|
|
margin: 0px 5px 0px 5px;
|
|
}
|
|
a{
|
|
display: block;
|
|
color: @dark;
|
|
position: relative;
|
|
padding: 10px 10px 20px;
|
|
&:before{
|
|
content: "";
|
|
width: 100%;
|
|
height: 2px;
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0px;
|
|
background: @navy;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
&:hover,&.active{ color: @navy;
|
|
&:before{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media(max-width: 999px){
|
|
padding: 65px 0 0;
|
|
}
|
|
}
|
|
|
|
.prj-item{
|
|
display: block;
|
|
position: relative;
|
|
background: @white;
|
|
border: 1px solid #e9e9e9;
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
.top-project-section{
|
|
height: 220px;
|
|
padding: 40px 20px 20px 20px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
h3{
|
|
margin: 20px 0px 0px 0px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
color: #3a3a3a;
|
|
}
|
|
.meta{
|
|
font-size: 13px;
|
|
color: #b2b2b2;
|
|
span{ color: #767676; }
|
|
}
|
|
}
|
|
.project-icon{ height: 90px;
|
|
img{
|
|
display: block;
|
|
margin: 0px auto 0px;
|
|
float: none;
|
|
max-width: 80px;
|
|
height: auto;
|
|
}
|
|
}
|
|
.bottom-project-section{
|
|
padding: 15px 20px 15px 20px;
|
|
font-size: 13px;
|
|
color: #767676;
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
.points{
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
.views{
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
.feedable-time{ float: right; }
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
31. Task Board
|
|
*/
|
|
.task-item{
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
padding: 10px 15px 10px 15px;
|
|
border: 1px solid #e9e9e9;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
.title{
|
|
font-weight: 600;
|
|
color: @dark;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
@media (min-width: 1025px) { &:hover{ color: @navy; } }
|
|
}
|
|
.metas{
|
|
padding-top: 5px;
|
|
color: #bbb;
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
.meta{
|
|
margin-right: 10px;
|
|
float: left;
|
|
}
|
|
.ico{
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
.progress{
|
|
margin-bottom: 5px;
|
|
height: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.task-icon{
|
|
font-size: 40px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
.task-user{
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: auto;
|
|
.name{ margin-bottom: 5px; }
|
|
}
|
|
.user-assign-list{
|
|
li{ vertical-align: top; }
|
|
.avatar{
|
|
display: block;
|
|
width: 34px;
|
|
height: 34px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
.add_new{
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
.user-attach-list{
|
|
.thumbs{
|
|
display: block;
|
|
padding: 5px;
|
|
width: 100px;
|
|
border: 1px solid #e9e9e9;
|
|
}
|
|
.add_new{
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
.frm-comment{
|
|
position: relative;
|
|
padding: 10px 0px 10px 55px;
|
|
.avatar{
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 0px;
|
|
width: 44px;
|
|
height: 44px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
32. Profile
|
|
*/
|
|
.profile-avatar{
|
|
.btn{
|
|
margin: 0px;
|
|
-webkit-border-radius: 0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
color: #fff;
|
|
}
|
|
.btn-friend{ background: @info; }
|
|
.btn-inbox{ background: @blue; }
|
|
}
|
|
.profile-friends-list{
|
|
li{ margin-bottom: 10px;
|
|
.avatar{
|
|
width: 48px;
|
|
height: 48px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.dot-list{
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
li{
|
|
margin-bottom: 15px;
|
|
padding: 0px 0px 0px 30px;
|
|
position: relative;
|
|
&:before{
|
|
content: "\f10c";
|
|
font-family: 'FontAwesome';
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.date{
|
|
font-size: 12px;
|
|
color: #939ba2;
|
|
display: block;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
33. Contact List
|
|
*/
|
|
.box-contact{
|
|
position: relative;
|
|
margin-top: 60px;
|
|
padding: 60px 20px 20px 20px;
|
|
border: 1px solid #e0e0e0;
|
|
background: @white;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
.avatar{
|
|
width: 108px;
|
|
height: 108px;
|
|
position: absolute;
|
|
top: -54px;
|
|
border: 4px solid #e7e6e6;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
-o-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
.name{
|
|
font-size: 24px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.job{
|
|
font-size: 16px;
|
|
color: #a8a8a8;
|
|
font-weight: 700;
|
|
padding-bottom: 15px;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
-o-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
width: 75px;
|
|
height: 2px;
|
|
background: @warning;
|
|
}
|
|
}
|
|
p{
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.contact-social{
|
|
a{
|
|
display: block;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
border-radius: 100%;
|
|
color: #fff;
|
|
}
|
|
.fa-phone{ background: @info; }
|
|
.fa-envelope{ background: @success; }
|
|
.fa-facebook{ background: #3b5999; }
|
|
.fa-twitter{ background: #55acee; }
|
|
.fa-google-plus{ background: #dd4b39; }
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
34. Pricing Plan
|
|
*/
|
|
.pricing-table{
|
|
display: table;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
text-align: center;
|
|
&:after{
|
|
content: "";
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
.pricing-table-row{display: table-row;}
|
|
.col{
|
|
display: table-cell;
|
|
position: relative;
|
|
width: 20%;
|
|
vertical-align: top;
|
|
&:before{
|
|
content: "";
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -7px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 7px;
|
|
background: #ffcd03;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
}
|
|
.col-first{
|
|
&:before{ display: none; }
|
|
.thead{
|
|
border: 1px solid #e9eaeb;
|
|
background: none;
|
|
color: #304ffe;
|
|
text-transform: uppercase;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
}
|
|
.td{ border-left: 1px solid #e9eaeb; }
|
|
}
|
|
.thead{
|
|
height: 110px;
|
|
padding: 13px;
|
|
background: @blue;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
h4{
|
|
margin: 0px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
line-height: 34px;
|
|
white-space: nowrap;
|
|
}
|
|
&.bg-main-2{background-color: @blue}
|
|
&.bg-blue-1{background-color: #2444f9}
|
|
&.bg-blue-2{background-color: #1e3def}
|
|
&.bg-blue-3{background-color: @blue}
|
|
}
|
|
.price{
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 0px 45px 0px 15px;
|
|
.number{
|
|
font-size: 45px;
|
|
line-height: 50px;
|
|
font-weight: 700;
|
|
}
|
|
.currency{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
font-weight: 700;
|
|
}
|
|
.small_number{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 5px;
|
|
width: 40px;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
}
|
|
.time{
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 0px;
|
|
width: 40px;
|
|
text-align: left;
|
|
font-size: 16px;
|
|
color: #fcd20b;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
.td{
|
|
left: 24px;
|
|
height: 62px;
|
|
padding: 7px;
|
|
border-right: 1px solid #e9eaeb;
|
|
border-bottom: 1px solid #e9eaeb;
|
|
font-size: 14px;
|
|
line-height: 48px;
|
|
color: #222222;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
&:last-child{ height: 100px; }
|
|
.fa-times{
|
|
color: #666666;
|
|
font-size: 24px;
|
|
line-height: 48px;
|
|
}
|
|
.fa-check{
|
|
color: @blue;
|
|
font-size: 24px;
|
|
line-height: 48px;
|
|
}
|
|
.btn-order{
|
|
display: inline-block;
|
|
width: 125px;
|
|
color: #fff;
|
|
background: #212121;
|
|
font-size: 12px;
|
|
line-height: 40px;
|
|
font-weight: 700;
|
|
margin: 23px 0px 23px 0px;
|
|
}
|
|
}
|
|
.center-v{
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
-o-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
position: relative;
|
|
}
|
|
.col-featured{
|
|
top: -10px;
|
|
-webkit-box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
|
|
-moz-box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
|
|
box-shadow: 0px 1px 12px 0px rgba(34, 34, 34, 0.25);
|
|
|
|
.thead{
|
|
height: 120px;
|
|
padding-top: 23px;
|
|
}
|
|
.td{
|
|
&:last-child{ height: 110px; }
|
|
.btn-order{ background: @blue; }
|
|
}
|
|
}
|
|
@media(min-width: 1025px){
|
|
.td .btn-order:hover{background: @blue}
|
|
.col:hover:before{opacity: 1;}
|
|
}
|
|
@media(max-width: 1199px){
|
|
.thead h4{font-size: 14px;}
|
|
}
|
|
@media(max-width: 991px){
|
|
.col-first{display: none!important;}
|
|
.col:nth-child(2) .td{border-left: 1px solid #E9EAEB;}
|
|
}
|
|
@media(max-width: 991px){
|
|
.col{
|
|
width: 100%;
|
|
display: block;
|
|
margin: 0 auto 50px;
|
|
max-width: 300px;
|
|
&:last-child{margin-bottom: 0}
|
|
.td{border-left: 1px solid #E9EAEB;}
|
|
}
|
|
.thead h4{font-size: 18px}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
35. Invoice
|
|
*/
|
|
.invoice-box{
|
|
max-width: 800px;
|
|
margin: auto;
|
|
padding: 30px;
|
|
border: 1px solid #eee;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: #555;
|
|
background: @white;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
|
|
.logo{
|
|
color: @dark;
|
|
font-weight: 600;
|
|
span{ font-weight: 400; }
|
|
}
|
|
|
|
table{
|
|
width: 100%;
|
|
text-align: left;
|
|
td{
|
|
padding: 5px;
|
|
vertical-align: top;
|
|
}
|
|
tr{
|
|
td:nth-child(2){ text-align: right; }
|
|
&.top table td{ padding-bottom: 20px;
|
|
&.title{
|
|
font-size: 45px;
|
|
line-height: 45px;
|
|
color: #333;
|
|
}
|
|
}
|
|
&.information table td{ padding-bottom: 40px; }
|
|
&.heading td{
|
|
background: #eee;
|
|
border-bottom: 1px solid #ddd;
|
|
font-weight: 700;
|
|
}
|
|
&.details td{ padding-bottom: 20px; }
|
|
&.item{
|
|
td{ border-bottom: 1px solid #eee; }
|
|
&.last td{ border-bottom: none; }
|
|
}
|
|
&.total td:nth-child(2){
|
|
border-top: 2px solid #eee;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
table tr{
|
|
&.information table td,&.top table td{
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
36. Gallery
|
|
*/
|
|
.item-gallery{
|
|
display: block;
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
border: 10px solid @white;
|
|
background: #222;
|
|
-webkit-box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
|
|
-moz-box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
|
|
box-shadow: 0px 0px 5px 0px rgba(14, 14, 14, 0.1);
|
|
&:before{
|
|
content: "\f065";
|
|
font-family: 'FontAwesome';
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 5px;
|
|
color: #a5a5a5;
|
|
z-index: 10;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
img{
|
|
min-width: 100%;
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
.title{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
-moz-opacity: 0;
|
|
-khtml-opacity: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0px;
|
|
z-index: 20;
|
|
width: 100%;
|
|
margin: 0px;
|
|
text-align: center;
|
|
color: @white;
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
font-weight: 500;
|
|
transform: translate(0, -40%);
|
|
-webkit-transform: translate(0, -40%);
|
|
-moz-transform: translate(0, -40%);
|
|
-o-transform: translate(0, -40%);
|
|
-ms-transform: translate(0, -40%);
|
|
transition: all 0.4s ease;
|
|
-moz-transition: all 0.4s ease;
|
|
-o-transition: all 0.4s ease;
|
|
-ms-transition: all 0.4s ease;
|
|
-webkit-transition: all 0.4s ease;
|
|
}
|
|
@media(min-width: 1025px){&:hover{
|
|
&:before{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
.title{
|
|
transform: translate(0, -50%);
|
|
-webkit-transform: translate(0, -50%);
|
|
-moz-transform: translate(0, -50%);
|
|
-o-transform: translate(0, -50%);
|
|
-ms-transform: translate(0, -50%);
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
-moz-opacity: 1;
|
|
-khtml-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
img{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
|
|
-moz-opacity: 0.35;
|
|
-khtml-opacity: 0.35;
|
|
opacity: 0.35;
|
|
}
|
|
}}
|
|
}
|
|
/* .item-gallery */
|
|
|
|
.isotope-filter{
|
|
.filter-controls{
|
|
padding-top: 8px;
|
|
margin-bottom: 43px;
|
|
font-size: 0px;
|
|
padding-left: 0px;
|
|
text-align: center;
|
|
li{
|
|
display: inline-block;
|
|
padding: 10px 15px 0px 15px;
|
|
}
|
|
a{
|
|
display: block;
|
|
color: @dark;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
font-weight: 500;
|
|
@media (min-width: 1025px) { &:hover{ color: @blue; } }
|
|
}
|
|
.js__active{ color: @blue; }
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
37. Modal
|
|
*/
|
|
.modal-content{
|
|
padding: 0 15px;
|
|
box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
border-radius: 0;
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
}
|
|
.modal-dialog{
|
|
max-width: 100%;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
38. Form Control
|
|
*/
|
|
.form-control {
|
|
line-height: 24px;
|
|
padding: 9px 14px;
|
|
height: 45px;
|
|
border-color: #ccd1d9;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
&.input-sm{
|
|
padding: 0 10px;
|
|
height: 30px;
|
|
}
|
|
&:focus{
|
|
border-color: @info!important;
|
|
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
|
|
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12)!important;
|
|
}
|
|
}
|
|
textarea.form-control {
|
|
height: 105px;
|
|
}
|
|
.has-success .form-control {
|
|
border-color: #00bf4f;
|
|
}
|
|
.has-warning .form-control {
|
|
border-color: @warning;
|
|
}
|
|
.has-error .form-control {
|
|
border-color: @danger;
|
|
}
|
|
.has-inverse .form-control {
|
|
border-color: #435966;
|
|
}
|
|
.form-with-icon {
|
|
position: relative;
|
|
}
|
|
.form-with-icon .item-icon-right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 50px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
transform: translateY(-50%);
|
|
-moz-transform: translateY(-50%);
|
|
-webkit-transform: translateY(-50%);
|
|
}
|
|
.form-with-icon .form-control {
|
|
padding-right: 50px;
|
|
}
|
|
.has-success .form-with-icon .item-icon {
|
|
color: #00bf4f;
|
|
}
|
|
.has-warning .form-with-icon .item-icon {
|
|
color: @warning;
|
|
}
|
|
.has-error .form-with-icon .item-icon {
|
|
color: @danger;
|
|
}
|
|
.has-inverse .form-with-icon .item-icon {
|
|
color: #435966;
|
|
}
|
|
.input-group-btn > .btn {
|
|
min-width: 50px;
|
|
padding: 7px 10px;
|
|
font-size: 18px;
|
|
line-height: 29px;
|
|
color: #656d78;
|
|
border: 1px solid #ccd1d9;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
height: 45px;
|
|
}
|
|
.input-group-btn > .btn.no-border {
|
|
border: none;
|
|
line-height: 31px;
|
|
}
|
|
.input-group-btn > .btn span {
|
|
font-size: 14px;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
39. Reviews Widget
|
|
*/
|
|
.review-list{
|
|
color: #adadad;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
.review-item{
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
.top{
|
|
padding-bottom: 5px;
|
|
&:after{
|
|
content: '';
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
.name{
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
color: @dark;
|
|
}
|
|
.date{
|
|
display: inline-block;
|
|
}
|
|
.star-rating{
|
|
float: right;
|
|
white-space: nowrap;
|
|
@media (max-width: 1299px) and(min-width: 1199px){
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.desc{
|
|
font-size: 13px;
|
|
line-height: 23px;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
40. Activity Widget
|
|
*/
|
|
.activity-list{
|
|
color: @dark;
|
|
margin-bottom: 20px;
|
|
}
|
|
.activity-item{
|
|
position: relative;
|
|
padding-left: 35px;
|
|
padding-bottom: 20px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
.bar{
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 10px;
|
|
width: 1px;
|
|
}
|
|
.dot{
|
|
position: absolute;
|
|
top: 0;
|
|
left: -4px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
}
|
|
.last-dot{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: -2px;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
}
|
|
.date{
|
|
font-size: 12px;
|
|
color: #adadad;
|
|
}
|
|
}
|
|
.activity-link{
|
|
display: block;
|
|
padding: 8px 10px 5px;
|
|
text-align: center;
|
|
color: @dark;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
41. Todo Widget
|
|
*/
|
|
.todo-list{
|
|
margin-bottom: 15px;
|
|
}
|
|
.todo-item{
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #eee;
|
|
.checkbox{
|
|
margin: 0;
|
|
input:checked + label{
|
|
color: #adadad;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
.todo-form{
|
|
padding-top: 10px;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
42. X-Editable
|
|
*/
|
|
.editableform{
|
|
select.form-control,input.form-control{
|
|
padding: 4px 10px;
|
|
height: 32px;
|
|
}
|
|
.btn-sm{
|
|
height: 32px;
|
|
padding: 0 20px;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
43. Sparkline Chart
|
|
*/
|
|
.jqstooltip{
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
/*---------------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
/*-----------------------------------------------------------------------
|
|
44. SweetAlert
|
|
*/
|
|
.sweet-alert{
|
|
.sa-button-container button{
|
|
background: #e4e7ea;
|
|
outline: none !important;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
padding: 8px 25px;
|
|
border: none;
|
|
font-weight: 500;
|
|
font-family: "Poppins";
|
|
box-shadow: none!important;
|
|
-moz-box-shadow: none!important;
|
|
-webkit-box-shadow: none!important;
|
|
border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
&.cancel{
|
|
background: #e4e7ea;
|
|
color: @dark;
|
|
&:hover{
|
|
background: #e4e7ea;
|
|
}
|
|
}
|
|
&.confirm{
|
|
background: @danger;
|
|
}
|
|
}
|
|
&.visible .sa-icon{
|
|
&.sa-success .sa-line{
|
|
background: @success;
|
|
}
|
|
&.sa-warning{
|
|
border-color: @warning;
|
|
}
|
|
&.sa-error{
|
|
border-color: @danger;
|
|
.sa-line{
|
|
background: @danger;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*---------------------------------------------------------------------*/ |