Dashboard UI
This commit is contained in:
saravanakumarkandasami
parent
529f5c6a2c
commit
a1ec93cc06
@ -1,8 +1,6 @@
|
||||
<div class="pad-wrap">
|
||||
|
||||
<!-- doughnut -->
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card style="min-height: 110%;">
|
||||
<mat-card-title>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
{{dashboardTitle}}
|
||||
@ -47,7 +45,7 @@
|
||||
</mat-card-title>
|
||||
<!-- <pre> Full - {{doughnutChartDataForFullPD}} Smart -{{doughnutChartDataForSmartPD}} TELE -{{doughnutChartDataForTelePD}} </pre> -->
|
||||
<mat-card-content>
|
||||
<div fxLayout="row">
|
||||
<div fxLayout="row" style="min-height:280px;">
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart" id="FullCanvas" name="FullCanvas"
|
||||
height="280px" width="280px"
|
||||
@ -59,9 +57,8 @@
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="5" fxFlex="100">
|
||||
</div>
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
|
||||
<div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart" id="SmartCanvas" name="SmartCanvas"
|
||||
height="280px" width="280px"
|
||||
[data]="doughnutChartDataForSmartPD"
|
||||
@ -72,9 +69,7 @@
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="5" fxFlex="100">
|
||||
</div>
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
<div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart" id="TeleCanvas" name="TeleCanvas"
|
||||
height="280px" width="280px"
|
||||
[data]="doughnutChartDataForTelePD"
|
||||
@ -86,11 +81,8 @@
|
||||
<div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row">
|
||||
<div fxFlex.gt-sm="100" fxFlex="100">
|
||||
<br><br><br><br><br><br>
|
||||
|
||||
<ul class="lengend-list">
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> </span> Draft</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#f44336"> </span> Triggered</li>
|
||||
|
||||
@ -5,34 +5,17 @@ $p: 12px;
|
||||
mat-card-title{
|
||||
background-color:#E00201 !important;
|
||||
color:#fff;
|
||||
//padding-bottom: 1rem;
|
||||
//margin-bottom: 0px;
|
||||
}
|
||||
.mat-input-wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
// .example-form {
|
||||
// min-width: 150px;
|
||||
// max-width: 500px;
|
||||
// width: 95%;
|
||||
// }
|
||||
|
||||
li
|
||||
{
|
||||
display:block;
|
||||
float:left;
|
||||
display:inline;
|
||||
//float:left;
|
||||
}
|
||||
|
||||
//::ng-deep {
|
||||
// .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
// color: white;
|
||||
//}
|
||||
//mat-form-field {
|
||||
// .mat-hint, input, ::placeholder, .mat-form-field-label {
|
||||
// color: white;
|
||||
//}
|
||||
//}
|
||||
//}
|
||||
|
||||
.example-full-width {
|
||||
width: 95%;
|
||||
}
|
||||
@ -49,23 +32,21 @@ li
|
||||
|
||||
.lengend-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
//margin: 0;
|
||||
// padding: 0;
|
||||
overflow: hidden;
|
||||
text-align:justify;
|
||||
}
|
||||
|
||||
.lengend-element {
|
||||
font-size: 1rem;
|
||||
//font-size: 1rem;
|
||||
padding-right: 3%;
|
||||
}
|
||||
|
||||
.donut-inner{
|
||||
margin-top: -171px;
|
||||
margin-left: 120px;
|
||||
//margin-bottom: 154px;
|
||||
//margin-top: -221px;
|
||||
//margin-left: 145px;
|
||||
|
||||
}
|
||||
|
||||
.donut-inner h5 {
|
||||
@ -77,545 +58,10 @@ li
|
||||
font-size:1rems;
|
||||
}
|
||||
|
||||
// .profile {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background: rgba(white, .25);
|
||||
// border-radius: 2px;
|
||||
// overflow: hidden;
|
||||
// box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
|
||||
// &.pre-enter {
|
||||
// transform-origin: center center;
|
||||
// transform: scaleY(0);
|
||||
// .avatar {
|
||||
// transform-origin: center top;
|
||||
// transform: scaleY(0);
|
||||
// }
|
||||
// h1,
|
||||
// h2,
|
||||
// a.follow,
|
||||
// a.link {
|
||||
// opacity: 0;
|
||||
// transform: translateY(300px);
|
||||
// }
|
||||
// }
|
||||
// &.on-enter {
|
||||
// animation: scaleYIn 1000ms ease-out forwards;
|
||||
// .avatar {
|
||||
// animation: scaleYIn-small 750ms ease-out forwards 1000ms;
|
||||
// }
|
||||
// h1,
|
||||
// h2,
|
||||
// a.follow,
|
||||
// a.link {
|
||||
// opacity: 1;
|
||||
// animation: slideInUp 1000ms ease-out forwards;
|
||||
// }
|
||||
// h1 {
|
||||
// animation-delay: 1050ms;
|
||||
// }
|
||||
// h2 {
|
||||
// animation-delay: 1100ms;
|
||||
// }
|
||||
// a.follow {
|
||||
// animation-delay: 1250ms;
|
||||
// }
|
||||
// li {
|
||||
// &:nth-child(1) {
|
||||
// a.link {
|
||||
// animation-delay: 1300ms;
|
||||
// }
|
||||
// }
|
||||
// &:nth-child(2) {
|
||||
// a.link {
|
||||
// animation-delay: 1350ms;
|
||||
// }
|
||||
// }
|
||||
// &:nth-child(3) {
|
||||
// a.link {
|
||||
// animation-delay: 1400ms;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .background {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background: white;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
|
||||
// .avatar,
|
||||
// .info {
|
||||
// width: 100%;
|
||||
// height: 50%;
|
||||
// }
|
||||
|
||||
// .avatar {
|
||||
// background: url('../../assets/images/1.jpg') no-repeat center center / cover;
|
||||
// clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
|
||||
// }
|
||||
|
||||
// .prof-list {
|
||||
// li {
|
||||
// display: inline-block;
|
||||
// list-style: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .info {
|
||||
// display: flex;
|
||||
// flex-flow: row wrap;
|
||||
// align-items: center;
|
||||
// align-content: center;
|
||||
// justify-content: center;
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// h1 {
|
||||
// padding: $p $p 0;
|
||||
// width: 100%;
|
||||
// font-size: 24px;
|
||||
// font-weight: 800;
|
||||
// letter-spacing: 2px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// h2,
|
||||
// a.follow {
|
||||
// display: block;
|
||||
|
||||
// border-radius: 2px;
|
||||
// padding: $p/2;
|
||||
// color: white;
|
||||
// font-size: 12px;
|
||||
// font-weight: 500;
|
||||
// letter-spacing: 1px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// h2 {
|
||||
// background: $red;
|
||||
// background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
|
||||
// }
|
||||
// a.follow {
|
||||
// margin-left: $p;
|
||||
// background: $blue;
|
||||
// background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: #05c8e0;
|
||||
// background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
|
||||
// }
|
||||
// &:active {
|
||||
// background: #057fe0;
|
||||
// background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
|
||||
// }
|
||||
// }
|
||||
// ul {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// padding: $p/2;
|
||||
// width: 100%;
|
||||
// li {
|
||||
// padding: $p/2;
|
||||
// }
|
||||
// }
|
||||
// a.link {
|
||||
// display: block;
|
||||
// border-radius: 100%;
|
||||
// background: $blue;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
|
||||
// a.link {
|
||||
// &.portfolio {
|
||||
// background: #f5c8bf;
|
||||
// background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: lighten(#f5c8bf, 5%);
|
||||
// background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
|
||||
// }
|
||||
// &:active {
|
||||
// background: darken(#f5c8bf, 5%);
|
||||
// background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
|
||||
// }
|
||||
// }
|
||||
// &.codepen {
|
||||
// background: #fcd000;
|
||||
// background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: lighten(#fcd000, 5%);
|
||||
// background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
|
||||
// }
|
||||
// &:active {
|
||||
// background: darken(#fcd000, 5%);
|
||||
// background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
|
||||
// }
|
||||
// }
|
||||
// &.github {
|
||||
// background: #41adc4;
|
||||
// background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(#4183c4, .5);
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: lighten(#41adc4, 5%);
|
||||
// background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
|
||||
// }
|
||||
// &:active {
|
||||
// background: darken(#41adc4, 5%);
|
||||
// background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
|
||||
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
|
||||
// box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media only screen and (min-width: 470px) {
|
||||
// .profile {
|
||||
// display: flex;
|
||||
// &.pre-enter {
|
||||
// transform: scaleX(0);
|
||||
// .avatar {
|
||||
// transform-origin: left center;
|
||||
// transform: scaleX(0);
|
||||
// }
|
||||
// h1,
|
||||
// h2,
|
||||
// a.follow,
|
||||
// a.link {
|
||||
// transform: translateX(300px);
|
||||
// }
|
||||
// }
|
||||
// &.on-enter {
|
||||
// animation-name: scaleXIn;
|
||||
// .avatar {
|
||||
// animation-name: scaleXIn-small;
|
||||
// }
|
||||
// h1,
|
||||
// h2,
|
||||
// a.follow,
|
||||
// a.link {
|
||||
// animation-name: slideInLeft;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .background {
|
||||
// mix-blend-mode: overlay;
|
||||
// }
|
||||
// .avatar,
|
||||
// .info {
|
||||
// width: 50%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// .avatar {
|
||||
// clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media only screen and (min-width: 470px) and (min-height: 600px) {
|
||||
// .profile {
|
||||
// max-height: 400px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/jIUq3E */
|
||||
|
||||
// @keyframes scaleXIn {
|
||||
// 0% {
|
||||
// transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 4.7% {
|
||||
// transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 9.41% {
|
||||
// transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 14.11% {
|
||||
// transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 18.72% {
|
||||
// transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 24.32% {
|
||||
// transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 29.93% {
|
||||
// transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 35.54% {
|
||||
// transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 41.04% {
|
||||
// transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 52.15% {
|
||||
// transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 63.26% {
|
||||
// transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 85.49% {
|
||||
// transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/auuhcg */
|
||||
|
||||
// @keyframes scaleYIn {
|
||||
// 0% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 4.7% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 9.41% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 14.11% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 18.72% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 24.32% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 29.93% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 35.54% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 41.04% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 52.15% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 63.26% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 85.49% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/dNBqrt */
|
||||
|
||||
// @keyframes scaleXIn-small {
|
||||
// 0% {
|
||||
// transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 6.31% {
|
||||
// transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 12.51% {
|
||||
// transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 18.82% {
|
||||
// transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 25.03% {
|
||||
// transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 37.54% {
|
||||
// transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 50.05% {
|
||||
// transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 75.08% {
|
||||
// transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/jZL0uj */
|
||||
|
||||
// @keyframes scaleYIn-small {
|
||||
// 0% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 6.31% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 12.51% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 18.82% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 25.03% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 37.54% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 50.05% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 75.08% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/Ne0Mkr */
|
||||
|
||||
// @keyframes slideInLeft {
|
||||
// 0% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
|
||||
// }
|
||||
// 6.31% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
|
||||
// }
|
||||
// 12.51% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
|
||||
// }
|
||||
// 18.82% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
|
||||
// }
|
||||
// 25.03% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
|
||||
// }
|
||||
// 37.54% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
|
||||
// }
|
||||
// 50.05% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
|
||||
// }
|
||||
// 75.08% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /* https://goo.gl/MSqtd5 */
|
||||
|
||||
// @keyframes slideInUp {
|
||||
// 0% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
|
||||
// }
|
||||
// 6.31% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
|
||||
// }
|
||||
// 12.51% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
|
||||
// }
|
||||
// 18.82% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
|
||||
// }
|
||||
// 25.03% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
|
||||
// }
|
||||
// 37.54% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
|
||||
// }
|
||||
// 50.05% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
|
||||
// }
|
||||
// 75.08% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
|
||||
// }
|
||||
// 100% {
|
||||
// transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
// //wheather
|
||||
// .card-wheather {
|
||||
// height: 220px;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// .city {
|
||||
|
||||
// font-size: 26px;
|
||||
// }
|
||||
|
||||
// .date {
|
||||
// font-size: 20px;
|
||||
// line-height: 40px;
|
||||
// }
|
||||
|
||||
// .sun {
|
||||
// height: 70px;
|
||||
// }
|
||||
|
||||
// .grad-blue {
|
||||
// background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .grad-green {
|
||||
// background: linear-gradient(58deg, #009688, #673ab7);
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .grad-red {
|
||||
// background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
// color: #fff;
|
||||
// }
|
||||
// .card-wheather{
|
||||
// padding: 2rem;
|
||||
// }
|
||||
// .temp {
|
||||
// font-size: 50px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
mat-card-content{
|
||||
min-height: 400px;
|
||||
}
|
||||
.chart{
|
||||
|
||||
padding: 0.8rem;
|
||||
}
|
||||
@ -312,7 +312,7 @@
|
||||
<div class="body-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
|
||||
<mat-sidenav #end position="end" mode="over" opened="false">
|
||||
<div style="text-align: center;">Not Yet Scheduled</div>
|
||||
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user