Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

traffic chart styles fix

Browse source
This commit is contained in:
nixa 2016-05-04 18:52:44 +03:00
parent 4b3665007b
commit 21cd0bc433
2 changed files with 28 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/dashboard/dashboard.html
View file

@ -1,12 +1,12 @@
<div class="row">
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<pie-chart></pie-chart>
</div>
</div>
<div class="row">
<ba-card class="col-lg-6 col-md-12 col-sm-12"
title="Acquisition Channels" baCardClass="popular-app medium-card">
<ba-card class="col-xl-6 col-lg-12 col-md-12 col-sm-12"
title="Acquisition Channels" baCardClass="traffic-panel medium-card">
<traffic-chart></traffic-chart>
</ba-card>
</div>

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

@ -12,10 +12,11 @@
.channels-info {
display: inline-block;
width: calc(100% - 400px);
width: calc(100% - 370px);
margin-left: 70px;
margin-top: -20px;
}
.small-container {
.channels-info {
display: none;
@ -28,7 +29,7 @@
font-size: 18px;
opacity: 0.9;
}
.channel-number{
.channel-number {
display: inline-block;
float: right;
}
@ -109,28 +110,28 @@
width: 100%;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.25);
.progress-bar{
.progress-bar {
height: 4px;
background-color: white;
}
}
.legend-color{
.legend-color {
width: 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;
top: 27px;
border-radius: 15px;
left: -45px;
}
.traffic-chart canvas{
border: 10px solid rgba(0,0,0,0.0);
.traffic-chart canvas {
border: 10px solid rgba(0, 0, 0, 0.0);
border-radius: 150px;
}
.chart-bg{
.chart-bg {
background-color: $view-total;
position: absolute;
border-radius: 100px;
@ -141,47 +142,46 @@
}
@media (max-width: $resM) {
div.channels-info{
div.channels-info {
display: block;
width: calc(100% - 88px);
margin-top: -65px;
margin-bottom: 10px;
}
.panel.medium-panel.traffic-panel{
.card.medium-card.traffic-panel {
height: auto;
}
.traffic-chart{
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg{
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 1465px) and (min-width: 1199px){
.channels-info{
@media (max-width: 1465px) and (min-width: 1199px) {
.channels-info {
display: none;
}
.traffic-chart{
.traffic-chart {
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg{
.chart-bg {
left: calc(50% - 90px);
}
}
@media (max-width: 380px) {
@media (max-width: 380px){
.traffic-chart{
.traffic-chart {
width: 240px;
}
.canvas-holder{
.canvas-holder {
width: 240px;
height: 240px;
}
@ -190,7 +190,8 @@
top: 30px;
}
}
@media (max-width: 320px){
@media (max-width: 320px) {
.chart-bg {
left: 50px;
top: 50px;
@ -199,10 +200,9 @@
}
}
body.badmin-transparent{
.traffic-chart canvas{
border: 10px solid rgba(0,0,0,0.35);
body.badmin-transparent {
.traffic-chart canvas {
border: 10px solid rgba(0, 0, 0, 0.35);
box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
border-radius: 150px;
}