天津投入产出系统后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

439 lines
7.0 KiB

.enable_infobox() when (@enable-infobox = true) {
//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;
> .@{icon} {
display: inline-block;
height: 42px;
margin: 0;
padding: 1px 1px 0 2px;
background-color: transparent;
border-width: 0;
text-align: center;
position: relative;
.border-radius(100%);
.box-shadow(~"1px 1px 0 rgba(0,0,0,0.2)");
&:before {
font-size: @font-size-infobox-icon;
display: block;
padding: 6px 0 7px;
width: 40px;
text-align: center;
border-radius: 100%;
color: #FFF;
color: rgba(255, 255, 255, 0.9);
background-color: transparent;
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-width: 0;
border-top-width: 0;
font-size: @font-size-infobox-data;
text-align: left;
line-height: 21px;
min-width: 130px;
padding-left: 8px;
position: relative;
top: 0;
> .infobox-data-number {
display: block;
font-size: @font-size-infobox-data-number;
margin: 2px 0 4px;
position: relative;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}
> .infobox-text {
display: block;
font-size: @font-size-infobox-text;
margin: 2px 0 4px;
position: relative;
text-shadow: none;
}
}
&.no-border {
border-width: 0 !important;
}
}
@media only screen and (max-width: @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 > .@{icon} {
background-color: @infobox-cl;
}
.enable_infobox_dark_colors() when (@enable-infobox-dark = true) {
&.infobox-dark {
background-color: @infobox-cl;
border-color: @infobox-cl;
}
}
.enable_infobox_dark_colors();
}
}
.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");
.enable_infobox_dark() when(@enable-infobox-dark = true) {
.infobox-dark {
margin: 1px 1px 0 0;
border-color: transparent !important;
border-width: 0;
color: #FFF;
padding: 4px;
> .infobox-icon > .@{icon} {
& , &:before {
background-color: transparent;
box-shadow: none !important;//to override .rtl's
text-shadow: none;
border-radius: 0;
font-size: @font-size-infobox-dark-icon;
}
&:before {
.opacity(1);
}
}
.infobox-content {
color: #FFF;
}
}
}
.enable_infobox_dark();
.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: @font-size-infobox-sparkline;
}
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: @font-size-infobox-stat;
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;
}
}
}
.enable_infobox_dark_stats() when (@enable-infobox-dark = true) {
&.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;
}
}
}
}
.enable_infobox_dark_stats();
> .badge {
position: absolute;
right: 20px;
top: 11px;
border-radius: 0;
text-shadow: none;
color: #FFF;
font-size: @font-size-infobox-badge;
font-weight: bold;
line-height: 15px;
height: 16px;
padding: 0 1px;
}
.enable_infobox_dark_badge() when (@enable-infobox-dark = true) {
&.infobox-dark > .badge {
color: #FFF;
background-color: rgba(255,255,255,0.2) !important;
border: 1px solid #F1F1F1;
top: 2px;
right: 2px;
&.badge-success > .@{icon}{
color: #C6E9A1;
}
&.badge-important > .@{icon}{
color: #ECB792;
}
&.badge-warning > .@{icon}{
color: #ECB792;
}
}
}
.enable_infobox_dark_badge();
}
.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: floor(@font-size-infobox-sparkline * 0.6);
margin-left: 2px;
}
}
}
.enable_infobox();
.percentage {
font-size: @baseFontSize + 1;
font-weight: bold;
display: inline-block;
vertical-align: top;
.infobox-small & {
font-size: @baseFontSize;
font-weight: normal;
margin-top: 2px;
margin-left: 2px;
}
}