676 lines
12 KiB
SCSS
Executable File
676 lines
12 KiB
SCSS
Executable File
/* ================= */
|
|
/* = Dashboard = */
|
|
/* ================= */
|
|
|
|
$green: #a6e19d;
|
|
$red: #ca6040;
|
|
$blue: #2ba6cb;
|
|
$grey: #5d5751;
|
|
|
|
.snapshot {
|
|
|
|
.since {
|
|
margin: -1em 0 1em 0;
|
|
}
|
|
|
|
h5 {
|
|
color: $blue;
|
|
margin: 0;
|
|
|
|
a {
|
|
color: $blue;
|
|
}
|
|
|
|
span {
|
|
color: $grey;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
margin: 0 0 0.5em 0;
|
|
}
|
|
|
|
.paid {
|
|
h4, a {
|
|
color: $green;
|
|
}
|
|
}
|
|
|
|
.unpaid {
|
|
h4, a {
|
|
color: $grey;
|
|
}
|
|
}
|
|
|
|
.overdue, .outstanding {
|
|
h4, a {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.lead-text {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#main .task-tag {
|
|
display: inline-block;
|
|
line-height: .9;
|
|
background: $secondGrey;
|
|
color: #333;
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
padding: 4px 8px 3px;
|
|
text-transform: uppercase;
|
|
@include border-radius(3px);
|
|
&.tag-active {
|
|
background: $pancakeGreen;
|
|
color: #fff;
|
|
}
|
|
&.tag-urgent {
|
|
background: $pancakeRed;
|
|
color: #fff;
|
|
}
|
|
&.tag-maintenance {
|
|
background: purple;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
#main #dashboard-content .task-tag {
|
|
float: right;
|
|
}
|
|
|
|
// Top counters
|
|
.counters {
|
|
margin-bottom: 0;
|
|
text-shadow: none;
|
|
color: white;
|
|
.columns {
|
|
margin-bottom: 15px;
|
|
}
|
|
a {
|
|
color: $white;
|
|
}
|
|
|
|
small.small-title {
|
|
display: block;
|
|
font-size: .75em;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.collect, .outstanding, .expenses, .paid {
|
|
display: block;
|
|
background: $pancakeBlack;
|
|
line-height: 1;
|
|
text-align: center;
|
|
padding: 10px;
|
|
@include border-radius(4px);
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
*, *:before, *:after {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.collect:hover {
|
|
background: $brightGreen;
|
|
}
|
|
.outstanding:hover {
|
|
background: $brightOrange;
|
|
}
|
|
.expenses:hover {
|
|
background: $brightBlue;
|
|
}
|
|
|
|
.paid {
|
|
background: #7ac87b;
|
|
border: 1px solid #52af54;
|
|
@include box-shadow(0px 1px 1px 0px #3d9b3f);
|
|
}
|
|
|
|
.big-money {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
display: block;
|
|
i {
|
|
//font-size: 120%;
|
|
//line-height: .7;
|
|
}
|
|
}
|
|
|
|
.medium-money {
|
|
font-size: 1.6em;
|
|
font-weight: 500;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Account Stats
|
|
.account-stats {
|
|
background: $firstGrey;
|
|
border-color: $darkGrey;
|
|
margin: 0 0 15px;
|
|
padding: 5px;
|
|
@include border-radius(4px);
|
|
@include clearfix;
|
|
dl.account-stat-item {
|
|
color: $darkGrey;
|
|
float: left;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
text-align: left;
|
|
text-indent: 0;
|
|
width: 16.6667%;
|
|
a {
|
|
color: $darkGrey;
|
|
}
|
|
dt, dd {
|
|
// font-size: 10px;
|
|
display: inline;
|
|
}
|
|
dt {
|
|
font-weight: 700;
|
|
margin-right: 1em;
|
|
}
|
|
dd {
|
|
float: right;
|
|
}
|
|
@include breakpoint(tablet-wide) {
|
|
width: 33.3333%;
|
|
}
|
|
@include breakpoint(mobile-wide) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.expenses-total-column {
|
|
@include breakpoint(tablet-narrow) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Primary Dashboard Container
|
|
#dashboard-main {
|
|
.panel {
|
|
border: 0;
|
|
padding: 10px;
|
|
text-shadow: none;
|
|
@include clearfix;
|
|
overflow: visible;
|
|
&#my-discussions,
|
|
&#my-tickets {
|
|
border: 0;
|
|
}
|
|
header {
|
|
border-bottom: 1px dotted lighten($darkGrey, 50);
|
|
margin: 0 0 10px;
|
|
padding: 0 0 10px;
|
|
overflow: auto;
|
|
h4 {
|
|
font-size: 1.25em;
|
|
margin: 0;
|
|
padding: 0;
|
|
i {
|
|
color: $pancakeBlue;
|
|
font-size: 110%;
|
|
}
|
|
}
|
|
img.avatar {
|
|
float: right;
|
|
margin-left: 6px;
|
|
width: 24px;
|
|
@include border-radius(24px);
|
|
}
|
|
}
|
|
ol.task-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-indent: 0;
|
|
@include clearfix;
|
|
li.task-item {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 6px;
|
|
@include clearfix;
|
|
* {
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
input[type=checkbox],
|
|
label,
|
|
span.task-info {
|
|
_float: left;
|
|
display: inline-block;
|
|
line-height: .9;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
width: 40%;
|
|
}
|
|
span.task-project {
|
|
font-size: 11px;
|
|
}
|
|
span.task-info {
|
|
display: none;
|
|
font-size: 12px;
|
|
&.running-timer {
|
|
display: inline-block;
|
|
}
|
|
span.task-timer {
|
|
margin-right: 12px;
|
|
.time {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover, &.hover {
|
|
.task-info {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
&:nth-of-type(even) {
|
|
background: $firstGrey;
|
|
}
|
|
}
|
|
}
|
|
ol.discussion-list,
|
|
ol.ticket-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-indent: 0;
|
|
li.discussion-details,
|
|
li.ticket-details {
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0 0 12px;
|
|
padding: 0 0 12px;
|
|
@include clearfix;
|
|
&:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
* {
|
|
line-height: 1.3;
|
|
}
|
|
h4 {
|
|
font-size: 1em;
|
|
margin: 0 0 3px;
|
|
padding: 0;
|
|
span {
|
|
display: block;
|
|
font-size: 75%;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
p {
|
|
font-size: .9em;
|
|
margin: 0 0 3px;
|
|
}
|
|
div.ticket-meta {
|
|
color: #aaa;
|
|
font-size: .7em;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
a.load-more {
|
|
background: $pancakeLightGrey;
|
|
color: $pancakeGrey;
|
|
clear: both;
|
|
display: block;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
padding: 4px 8px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
background: $pancakeLightGrey;
|
|
color: $pancakeDarkGrey;
|
|
}
|
|
}
|
|
a.view-more {
|
|
background: #fff;
|
|
color: $pancakeBlue;
|
|
border: 1px solid $pancakeBlue;
|
|
clear: both;
|
|
float: right;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
padding: 0 8px;
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
@include border-radius(3px);
|
|
&:hover {
|
|
background: #fff;
|
|
color: $pancakeGreen;
|
|
border: 1px solid $pancakeGreen;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ledger {
|
|
border-left: 1px solid #ccc;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
.time-sheet-ledger li {
|
|
padding-left: 1em;
|
|
list-style: none;
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
.time-logged {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.previous {
|
|
font-size: 0.6em;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#my-teams {
|
|
|
|
&.view-all .team-activity {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
ul.team-activity {
|
|
list-style: none;
|
|
h5 {
|
|
font-size: 1em;
|
|
margin: 0 0 .5em;
|
|
img.avatar {
|
|
float: left;
|
|
margin-right: 6px;
|
|
width: 20px;
|
|
@include border-radius(24px);
|
|
}
|
|
}
|
|
ul.tasks {
|
|
list-style: square;
|
|
margin: 0 0 1em 1.5em;
|
|
padding: 0;
|
|
text-indent: 0;
|
|
li {
|
|
font-size: .85em;
|
|
span.task-name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.client-activity {
|
|
ol.activity {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-indent: 0;
|
|
li {
|
|
border-left: 5px solid transparent;
|
|
font-size: .85em;
|
|
line-height: 1.4;
|
|
margin: 0 0 .2em;
|
|
padding: 5px 5px 5px 28px;
|
|
position: relative;
|
|
@mixin activity($color) {
|
|
background: lighten($color, 33);
|
|
border-left-color: $color;
|
|
}
|
|
@mixin activityIcon($color) {
|
|
color: rgba($color, .75);
|
|
font: normal 1em/1 FontAwesome;
|
|
line-height: 1;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 6px;
|
|
left: 6px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
@include border-radius(25px);
|
|
}
|
|
&.activity-invoice-viewed {
|
|
$color: $secondGrey;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f06e"; // fa-eye
|
|
@include activityIcon($darkGrey);
|
|
}
|
|
}
|
|
&.activity-invoice-paid {
|
|
$color: $pancakeGreen;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f0d6"; // fa-money
|
|
@include activityIcon(darken($pancakeGreen, 20%));
|
|
}
|
|
}
|
|
&.activity-proposal-accept {
|
|
$color: $pancakeBlue;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f05d"; // fa-check-circle-o
|
|
@include activityIcon($color);
|
|
}
|
|
}
|
|
&.activity-comment {
|
|
$color: $pancakeBlue;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f086"; // fa-comments
|
|
@include activityIcon($color);
|
|
}
|
|
}
|
|
|
|
&.activity-ticket {
|
|
$color: $pancakeBlue;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f1cd"; // fa-comments
|
|
@include activityIcon($color);
|
|
}
|
|
}
|
|
|
|
&.activity-proposal-reject {
|
|
$color: $pancakeRed;
|
|
@include activity($color);
|
|
&:after {
|
|
content: "\f05e"; // fa-ban
|
|
@include activityIcon($color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Statistic items
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 15px 5px 11px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.sous-item, .stat-item {
|
|
background: $white;
|
|
border: 1px solid $babyBlueBorder;
|
|
position: relative;
|
|
@include border-radius($borderRadius);
|
|
@include box-shadow(0px 1px 1px 0px $babyBlueBorder);
|
|
}
|
|
|
|
.stat-item:hover {
|
|
background: $babyBlue;
|
|
}
|
|
|
|
.stat-name {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
color: #777;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
color: #4a4a4a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 3. Sous System */
|
|
#sous-wrap {
|
|
margin-top: -14px;
|
|
h3 {
|
|
font-weight: 400;
|
|
color: #777;
|
|
}
|
|
h4 {
|
|
font-weight: 400;
|
|
color: #777;
|
|
}
|
|
h5 {
|
|
font-weight: 400;
|
|
padding: 8px 10px;
|
|
line-height: 2em;
|
|
background: $white;
|
|
color: $brightOrange;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
line-height: 1.5;
|
|
li {
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sous-header {
|
|
font-size: 22px;
|
|
font-size: 2.2rem;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
.sous-sub-header {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.sous-item-title {
|
|
font-size: 15px;
|
|
font-size: 1.5rem;
|
|
color: $altBlue;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.sous-item {
|
|
padding: 15px 15px 11px;
|
|
margin-bottom: 20px;
|
|
|
|
.sous-item-header {
|
|
background: $altBlue;
|
|
padding: 5px 20px 4px;
|
|
margin: -15px -15px 12px;
|
|
border-bottom: 1px solid $babyBlueBorder;
|
|
position: relative;
|
|
|
|
.members-pic {
|
|
float: left;
|
|
margin-top: 21px;
|
|
margin-right: 14px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
h4 {
|
|
float: left;
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 20px;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
@include rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.user-icon {
|
|
float: right;
|
|
margin: -9px -9px 0 12px;
|
|
}
|
|
}
|
|
|
|
.task-name {
|
|
small {
|
|
display: block;
|
|
margin-top: -4px;
|
|
}
|
|
}
|
|
|
|
.sous-tasks {
|
|
list-style: square !important;
|
|
margin-left: 20px
|
|
}
|
|
|
|
.half-width {
|
|
width: 48%;
|
|
margin-right: 4%;
|
|
margin-bottom: 20px !important;
|
|
float: left;
|
|
}
|
|
|
|
.dashboard-title {
|
|
border-bottom: 1px solid #5C5651;
|
|
}
|
|
|
|
.row .dashboard-content-wrapper {
|
|
margin-top: 1em;
|
|
width: 33%;
|
|
margin-right: 1%;
|
|
|
|
&:last-child {
|
|
width: 32%;
|
|
margin-right: 0px;
|
|
float: right;
|
|
}
|
|
|
|
@include breakpoint(tablet-narrow) {
|
|
margin-left: 1%;
|
|
|
|
&:last-child {
|
|
margin-right: 1%;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 360px) and (max-width: 768px) {
|
|
.half-width {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
}
|
|
}
|