397 lines
6 KiB
Text
397 lines
6 KiB
Text
/** dashboard info and stats mini boxes **/
|
|
.infobox-container {
|
|
text-align:center;
|
|
font-size:0;
|
|
}
|
|
.infobox {
|
|
|
|
|
|
display:inline-block;
|
|
width:210px; height:66px;
|
|
|
|
color:#555;
|
|
background-color:#FFF;
|
|
box-shadow:none;
|
|
border-radius:0;
|
|
|
|
|
|
margin:-1px 0 0 -1px;
|
|
|
|
padding:8px 3px 6px 9px;
|
|
border:1px dotted;
|
|
border-color:#D8D8D8 !important;
|
|
|
|
vertical-align:middle;
|
|
text-align:left;
|
|
|
|
position:relative;
|
|
|
|
|
|
> .infobox-icon {
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
|
|
width:44px;
|
|
|
|
> [class*="icon-"] {
|
|
display:inline-block;
|
|
height:42px;
|
|
margin:0;
|
|
padding:1px 1px 0 2px;
|
|
|
|
background-color:transparent;
|
|
border:none;
|
|
|
|
text-align:center;
|
|
|
|
position:relative;
|
|
|
|
.border-radius(100%);
|
|
.box-shadow(~"1px 1px 0 rgba(0,0,0,0.2)");
|
|
|
|
&:before {
|
|
font-size:24px;
|
|
display:block;
|
|
padding:6px 0 7px; width:40px; text-align:center;
|
|
.border-radius(100%);
|
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.14);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.infobox-content {
|
|
color:#555;
|
|
&:first-child {/* like in small infoboxes that have no number data etc */
|
|
font-weight:bold;
|
|
}
|
|
}
|
|
|
|
|
|
> .infobox-data {
|
|
display:inline-block;
|
|
|
|
border:none;
|
|
border-top-width:0;
|
|
|
|
font-size:13px;
|
|
|
|
text-align:left;
|
|
|
|
line-height:21px;
|
|
min-width:130px;
|
|
|
|
padding-left:8px;
|
|
|
|
position:relative;
|
|
top:0;
|
|
|
|
> .infobox-data-number {
|
|
display:block;
|
|
font-size:22px;
|
|
margin:2px 0 4px;
|
|
|
|
position:relative;
|
|
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
> .infobox-text {
|
|
display:block;
|
|
font-size:16px;
|
|
margin:2px 0 4px;
|
|
|
|
position:relative;
|
|
text-shadow:none;
|
|
}
|
|
}
|
|
|
|
|
|
&.no-border {
|
|
border:none !important;
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 460px) {//@screen-topbar-down
|
|
.infobox {
|
|
min-width:95%;
|
|
margin-top:2px;
|
|
margin-bottom:2px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//infobox color
|
|
.infobox-color(@color) {
|
|
@infobox-class:~`"infobox-@{color}"`;
|
|
@infobox-bg:~`"infobox-@{color}"`;
|
|
@infobox-cl:@@infobox-bg;
|
|
|
|
.@{infobox-class} {
|
|
color:@infobox-cl;
|
|
border-color:@infobox-cl;
|
|
> .infobox-icon > [class*="icon-"] {
|
|
background-color:@infobox-cl;
|
|
}
|
|
|
|
&.infobox-dark {
|
|
background-color:@infobox-cl;
|
|
border-color:@infobox-cl;
|
|
}
|
|
}
|
|
}
|
|
.infobox-color(~"purple");
|
|
.infobox-color(~"purple2");
|
|
.infobox-color(~"pink");
|
|
.infobox-color(~"blue");
|
|
.infobox-color(~"blue2");
|
|
.infobox-color(~"blue3");
|
|
.infobox-color(~"red");
|
|
.infobox-color(~"brown");
|
|
.infobox-color(~"wood");
|
|
.infobox-color(~"light-brown");
|
|
.infobox-color(~"orange");
|
|
.infobox-color(~"orange2");
|
|
.infobox-color(~"green");
|
|
.infobox-color(~"green2");
|
|
.infobox-color(~"grey");
|
|
.infobox-color(~"black");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.infobox-dark {
|
|
margin:1px 1px 0 0;
|
|
border-color:transparent !important;
|
|
border:none;
|
|
|
|
color:#FFF;
|
|
padding:4px;
|
|
> .infobox-icon > [class*="icon-"] {
|
|
& , &:before {
|
|
background-color:transparent;
|
|
box-shadow:none; text-shadow:none;
|
|
border-radius:0;
|
|
font-size:30px;
|
|
}
|
|
&:before {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
|
|
.infobox-content {
|
|
color:#FFF;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.infobox {
|
|
> .infobox-progress {
|
|
padding-top:0;
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
|
|
width:44px;
|
|
}
|
|
|
|
> .infobox-chart {
|
|
padding-top:0;
|
|
display:inline-block;
|
|
vertical-align:text-bottom;
|
|
width:44px;
|
|
text-align:center;
|
|
|
|
> .sparkline {
|
|
font-size:24px;
|
|
}
|
|
canvas {
|
|
vertical-align:middle !important;
|
|
}
|
|
}
|
|
|
|
|
|
/* stat trend indicators and badges */
|
|
> .stat {
|
|
display:inline-block;
|
|
position:absolute; right:20px; top:11px;
|
|
|
|
text-shadow:none;
|
|
color:#ABBAC3;
|
|
|
|
font-size:13px; font-weight:bold;
|
|
|
|
padding-right:18px; padding-top:3px;
|
|
|
|
&:before {
|
|
display:inline-block;
|
|
content:"";
|
|
|
|
width:8px; height:11px;
|
|
background-color:#ABBAC3;
|
|
|
|
position:absolute; right:4px; top:7px;
|
|
}
|
|
&:after {
|
|
display:inline-block;
|
|
content:"";
|
|
|
|
position:absolute; right:1px; top:-8px;
|
|
|
|
border:12px solid transparent;
|
|
border-width:8px 7px;
|
|
border-bottom-color:#ABBAC3;
|
|
}
|
|
|
|
&.stat-success {/*pointing up*/
|
|
color:#77C646;
|
|
&:before {
|
|
background-color:#77C646;
|
|
}
|
|
&:after {
|
|
border-bottom-color:#77C646;
|
|
}
|
|
}
|
|
|
|
&.stat-important {/*pointing down*/
|
|
color:#E4564F;
|
|
&:before {
|
|
background-color:#E4564F;
|
|
top:3px;
|
|
}
|
|
&:after {
|
|
border-top-color:#E4564F;
|
|
border-bottom-color:transparent;
|
|
bottom:-6px; top:auto;
|
|
}
|
|
}
|
|
}
|
|
&.infobox-dark > .stat {
|
|
color:#FFF;
|
|
&:before {
|
|
background-color:#E1E5E8;
|
|
}
|
|
&:after {
|
|
border-bottom-color:#E1E5E8;
|
|
}
|
|
|
|
&.stat-success {
|
|
color:#FFF;
|
|
&:before {
|
|
background-color:#D0E29E;
|
|
}
|
|
&:after {
|
|
border-bottom-color:#D0E29E;
|
|
}
|
|
}
|
|
&.stat-important {
|
|
color:#FFF;
|
|
&:before {
|
|
background-color:#FF8482;
|
|
top:3px;
|
|
}
|
|
&:after {
|
|
border-top-color:#FF8482;
|
|
border-bottom-color:transparent;
|
|
bottom:-6px; top:auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
> .badge {
|
|
position:absolute; right:20px; top:11px;
|
|
border-radius:0;
|
|
|
|
text-shadow:none;
|
|
color:#FFF;
|
|
|
|
font-size:11px; font-weight:bold;
|
|
line-height:15px; height:16px;
|
|
|
|
padding:0 1px;
|
|
}
|
|
&.infobox-dark > .badge {
|
|
color:#FFF;
|
|
background-color:rgba(255,255,255,0.2) !important;
|
|
border:1px solid #F1F1F1;
|
|
|
|
top:2px; right:2px;
|
|
|
|
&.badge-success > [class*="icon-"]{
|
|
color:#C6E9A1;
|
|
}
|
|
&.badge-important > [class*="icon-"]{
|
|
color:#ECB792;
|
|
}
|
|
&.badge-warning > [class*="icon-"]{
|
|
color:#ECB792;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infobox-small {
|
|
width:135px;
|
|
height:52px;
|
|
text-align:left;
|
|
|
|
padding-bottom:5px;
|
|
|
|
> .infobox-icon , > .infobox-chart , > .infobox-progress {
|
|
display:inline-block;
|
|
width:40px;
|
|
max-width:40px;
|
|
height:42px;
|
|
line-height:38px;
|
|
|
|
vertical-align:middle;
|
|
}
|
|
|
|
> .infobox-data {
|
|
display:inline-block;
|
|
text-align:left;
|
|
|
|
vertical-align:middle;
|
|
max-width:72px; min-width:0;
|
|
}
|
|
> .infobox-chart > .sparkline {
|
|
font-size:14px;
|
|
margin-left:2px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.percentage {
|
|
font-size:14px;
|
|
font-weight:bold;
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
|
|
.infobox-small & {
|
|
font-size:13px; font-weight:normal;
|
|
margin-top:2px; margin-left:2px;
|
|
}
|
|
}
|
|
|
|
|
|
|