1
0
Fork 0

ui borders

This commit is contained in:
Heiko Kernbach 2015-07-24 13:51:29 +02:00
parent 1e5c7b02c4
commit 959040d3c5
10 changed files with 1102 additions and 904 deletions

View File

@ -39,15 +39,17 @@
<% } %>
<% var mediumChart = function(name, title, arrows) { %>
<div class="dashboard-medium-chart">
<% enlargeButton(name, true); %>
<div class="dashboard-medium-chart-inner dashboard-chart" id="<%= name %>Container">
<div id="<%= name %>" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
<div class="dashboard-medium-chart-outer">
<div class="dashboard-medium-chart">
<% enlargeButton(name, true); %>
<div class="dashboard-medium-chart-inner dashboard-chart" id="<%= name %>Container">
<div id="<%= name %>" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
</div>
</div>
<% subBar(title) %>
</div>
<% subBar(title) %>
</div>
<% } %>

View File

@ -26,15 +26,17 @@
<% } %>
<% var mediumChart = function(name, title, arrows) { %>
<div class="dashboard-medium-chart">
<% enlargeButton(name, true); %>
<div class="dashboard-medium-chart-inner dashboard-chart" id="<%= name %>Container">
<div id="<%= name %>" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
<div class="dashboard-medium-chart-outer">
<div class="dashboard-medium-chart">
<% enlargeButton(name, true); %>
<div class="dashboard-medium-chart-inner dashboard-chart" id="<%= name %>Container">
<div id="<%= name %>" class="dashboard-interior-chart"></div>
<div class="dashboard-legend">
<div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
</div>
</div>
<% subBar(title) %>
</div>
<% subBar(title) %>
</div>
<% } %>

View File

@ -1,6 +1,6 @@
body {
/*background: #DEE8D0 !important;*/
background: #e4ecd9 !important;
background: $c-lightgreen-2-bg !important;
color: $c-body-color;
display: block;
font-family: 'Open Sans', sans-serif !important;

View File

@ -1,9 +1,14 @@
$c-body-color: #333;
$c-lightgreen-bg: rgba(222, 233, 207, 1);
/*
$c-lightgreen-2-bg: #e4ecd9;;
$c-lightgreen-transp-bg: rgba(222, 233, 207, 0.8);
$c-lightgreen-2-transp-bg: rgba(228, 236, 217, 0.8);
*/
$c-lightgreen-2-bg: #F5F8F0;
$c-lightgreen-transp-bg: #F5F8F0;
$c-lightgreen-2-transp-bg: #F5F8F0;
$c-positive: #8aa051;
$c-positive-hover: #788f3d;

View File

@ -13,6 +13,7 @@
min-height: 200px;
background-color: $c-white;
border-radius: 3px;
border: 1px solid rgba(243,247,237,0.75);
padding-top: 13px;
}

View File

@ -7,7 +7,7 @@ input.search-input {
line-height: 18px;
margin-top: 4px;
margin-right: -1px;
width: 115px;
width: 80px;
outline: none;
outline-color: $c-transp;
outline-style: none;
@ -74,6 +74,7 @@ input.search-input {
div.headerBar {
background-color: $c-white;
border-radius: 3px;
border: 1px solid rgba(243,247,237,0.75);
color: $c-white;
font-size: 16px;
height: 36px;

View File

@ -42,6 +42,8 @@
.dashboard-large-chart {
@extend %dashboard-chart-basic;
margin-right: 12px;
border: 1px solid rgba(243,247,237,0.75);
border-radius: 3px;
.dashboard-large-chart-inner {
@extend %dashboard-chart-box;
@ -50,7 +52,7 @@
border-left: $dashboard-borderwidth solid $c-white;
border-right: $dashboard-borderwidth solid $c-white;
border-top: $dashboard-borderwidth solid $c-white;
padding-top: $dashboard-padding;
padding-top: $dashboard-padding + 2px;
padding-bottom: $dashboard-padding;
.dashboard-interior-chart {
@ -63,6 +65,8 @@
.dashboard-small-chart {
@extend %dashboard-chart-basic;
border: 1px solid rgba(243,247,237,0.75);
border-radius: 3px;
.dashboard-small-chart-inner {
@extend %dashboard-chart-box;
@ -86,7 +90,11 @@
}
}
.dashboard-medium-chart-outer {
&:first-child {
margin-right: 25px;
}
}
.dashboard-medium-chart {
@extend %dashboard-chart-box;
@extend %dashboard-chart-basic;
@ -104,7 +112,12 @@
@extend %pull-left;
margin-bottom: 0;
}
.dashboard-medium-chart-outer {
border: 1px solid rgba(243,247,237,0.75);
border-radius: 3px;
}
.dashboard-medium-chart-menu {
@extend %clear-float;
@include border-radius(2px);
@ -138,6 +151,8 @@
.dashboard-tendency-container {
@extend %dashboard-chart-box;
@extend %dashboard-chart-basic;
border: 1px solid rgba(243,247,237,0.75);
border-radius: 3px;
.dashboard-tendency-chart {
@extend %clear-float;
@ -178,6 +193,8 @@
.dashboard-bar-chart-container {
@extend %dashboard-chart-box;
@extend %dashboard-chart-basic;
border: 1px solid rgba(243,247,237,0.75);
border-radius: 3px;
.dashboard-bar-chart {
@extend %clear-float;
@ -246,7 +263,7 @@
.headerBar.dashboard-headerbar {
margin: 15px 0 10px;
margin: 15px 0 20px;
}

View File

@ -145,7 +145,7 @@ div.resizecontainer {
}
.dashboard-large-chart {
$int-width: ($content-size * 2 / 3) - 4px;
$int-width: ($content-size * 2 / 3) - 4px - 2px;
width: $int-width;
.dashboard-sub-bar {
@ -164,8 +164,14 @@ div.resizecontainer {
font-size: $subbar-font + 2px;
}
.dashboard-medium-chart-outer {
$int-width: ($content-size / 2) - 16px - 2px;
width: $int-width;
float: left;
}
.dashboard-medium-chart {
$int-width: ($content-size / 2) - 16px;
$int-width: ($content-size / 2) - 16px - 2px;
width: $int-width;
.dashboard-sub-bar {
@ -195,7 +201,7 @@ div.resizecontainer {
}
.dashboard-small-chart {
$int-width: ($content-size / 3) - 8px;
$int-width: ($content-size / 3) - 8px - 2px;
width: $int-width;
.dashboard-sub-bar {
@ -206,7 +212,7 @@ div.resizecontainer {
width: $int-width - 10px;
.dashboard-interior-chart {
height: $dashboard-height - $smallchart-height-corrector;
height: $dashboard-height - $smallchart-height-corrector + 2px;
width: $int-width - 10px;
.nv-axis text {
@ -221,7 +227,7 @@ div.resizecontainer {
}
.dashboard-tendency-container {
$int-width: ($content-size / 3) - 20px;
$int-width: ($content-size / 3) - 22px;
.dashboard-tendency-chart {
$int-height: (($dashboard-height - 29px) / 2) - $tendency-height-corrector;
@ -253,9 +259,9 @@ div.resizecontainer {
}
.dashboard-bar-chart-container {
$int-width: ($content-size / 3) - 18px;
$int-width: ($content-size / 3) - 18px - 2px;
$int-height: (($dashboard-height - 30px) / 2) - $tendency-height-corrector;
height: $int-height;
height: $int-height + 2px;
.dashboard-bar-chart {
height: $int-height;
@ -338,8 +344,14 @@ div.resizecontainer {
}
}
.dashboard-medium-chart-outer {
$int-width: ($content-size / 2) - 21px - 2px;
width: $int-width;
float: left;
}
.dashboard-medium-chart {
$int-width: ($content-size / 2) - 21px;
$int-width: ($content-size / 2) - 21px - 2px;
width: $int-width;
.dashboard-sub-bar {
@ -356,7 +368,7 @@ div.resizecontainer {
}
.dashboard-small-chart {
$int-width: ($content-size / 3) - 13px;
$int-width: ($content-size / 3) - 13px - 2px;
width: $int-width;
.dashboard-sub-bar {
@ -390,7 +402,7 @@ div.resizecontainer {
}
.dashboard-bar-chart-container {
$int-width: ($content-size / 3) - 18px;
$int-width: ($content-size / 3) - 18px - 2px;
.dashboard-bar-chart {
width: $int-width;

View File

@ -16,6 +16,7 @@ $iconsize: 50px;
background-color: $c-white;
border-radius: 3px;
border: 1px solid rgba(243,247,237,0.75);
font-size: 14px;
list-style: none;
margin: {
@ -241,7 +242,7 @@ div {
& .tile {
@extend %tile;
height: 100px;
width: $tile-width - 12px;
width: $tile-width - 14px;
}
& .tile-graph {
@ -254,7 +255,7 @@ div {
@extend %clickable;
@extend %tile;
height: 309px;
width: 2 * ($tile-width - 12px);
width: 2 * ($tile-width - 14px);
div.shardContainer {
font-size: 30px;