Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

traffic chart bg position fix

Browse source
This commit is contained in:
nixa 2016-05-19 13:25:59 +03:00
parent 69acf25d43
commit be05565bdd
1 changed files with 72 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/app/pages/dashboard/trafficChart/trafficChart.scss
View file

@ -6,22 +6,20 @@
} }
.ng2, .blur { .ng2, .blur {
.channels-block { .traffic-chart canvas {
.traffic-chart canvas{ border: 15px solid rgba(0, 0, 0, 0.2);
border: 15px solid rgba(0,0,0,0.2); //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
//box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset; border-radius: 150px;
border-radius: 150px; }
}
.chart-bg{ .chart-bg {
position: absolute; position: absolute;
width: 180px; width: 180px;
height: 180px; height: 180px;
left: 60px; left: 60px;
top: 60px; top: 60px;
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
border-radius: 100px; border-radius: 100px;
}
} }
} }
@ -31,6 +29,7 @@
margin-left: 70px; margin-left: 70px;
margin-top: -20px; margin-top: -20px;
} }
.small-container { .small-container {
.channels-info { .channels-info {
display: none; display: none;
@ -43,7 +42,7 @@
font-size: 18px; font-size: 18px;
opacity: 0.9; opacity: 0.9;
} }
.channel-number{ .channel-number {
display: inline-block; display: inline-block;
float: right; float: right;
} }
@ -121,17 +120,17 @@
margin-bottom: 0; margin-bottom: 0;
background-color: $progress-background; background-color: $progress-background;
box-shadow: none; box-shadow: none;
.progress-bar{ .progress-bar {
height: 4px; height: 4px;
background-color: $progress-default; background-color: $progress-default;
box-shadow: none; box-shadow: none;
} }
} }
.legend-color{ .legend-color {
width: 30px; width: 30px;
height: 30px; height: 30px;
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
position: relative; position: relative;
top: 27px; top: 27px;
border-radius: 15px; border-radius: 15px;
@ -139,60 +138,72 @@
} }
@media (max-width: $resM) { @media (max-width: $resM) {
div.channels-info{
display: block; .card.medium-card.traffic-panel {
width: calc(100% - 88px);
margin-top: -65px;
margin-bottom: 10px;
}
.card.medium-card.traffic-panel{
height: auto; height: auto;
} }
.traffic-chart{
position: inherit; .channels-block {
float: none; div.channels-info {
margin: 0 auto; display: block;
} width: calc(100% - 88px);
.chart-bg{ margin-top: -65px;
left: calc(50% - 90px); margin-bottom: 10px;
}
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg {
left: calc(50% - 90px);
}
} }
} }
@media (max-width: 1465px) and (min-width: 1199px){ @media (max-width: 1465px) and (min-width: 1199px) {
.channels-info{
display: none; .channels-block {
} .channels-info {
.traffic-chart{ display: none;
position: inherit; }
float: none; .traffic-chart {
margin: 0 auto; position: inherit;
} float: none;
.chart-bg{ margin: 0 auto;
left: calc(50% - 90px); }
.chart-bg {
left: calc(50% - 90px);
}
} }
} }
@media (max-width: 380px) {
@media (max-width: 380px){ .channels-block {
.traffic-chart {
width: 240px;
}
.traffic-chart{ .canvas-holder {
width: 240px; width: 240px;
} height: 240px;
}
.canvas-holder{ .chart-bg {
width: 240px; top: 30px;
height: 240px; }
}
.chart-bg {
top: 30px;
} }
} }
@media (max-width: 320px){
.chart-bg { @media (max-width: 320px) {
left: 50px; .channels-block {
top: 50px; .chart-bg {
width: 142px; left: 50px;
height: 142px; top: 50px;
width: 142px;
height: 142px;
}
} }
} }