Add css class for card view and circle animation

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@101788 ce508802-f39f-4f6c-b175-0d175dae99d5

webitm-dashboard/GWT-Component/war/GwtDashboardPage.css

@@ -1441,17 +1441,19 @@ color: #999; !important;
 }
 /*End Added new Code by sachin on 28 sep 15 for  Showing scroll bar to auto suggest box  of autocomplete filter */
 
-/*Add code for Card square format by Dhanendra on Date 01-04-2016*/
+/*Add code for Card New format by Dhanendra on Date 01-04-2016*/
 .cardSqrLbl
 {
 	text-align:right;
-	padding-right:5px;
+	padding-right:3px;
+	width : 16%;
 }
 
 .cardProdLbl
 {
 	text-align:right;
 	padding-right:5px;
+	
 }
 
 .cardSqrProdVal
@@ -1461,20 +1463,64 @@ color: #999; !important;
 	color: #fff;
 	width:100px;
 	padding: 4px;
+	font-weight: normal;
 }
 .cardSqrVal
 {
 	text-align:center;
 	border-radius:3px;
 	color: #fff;
-	width:100px;
+	width:20%;
 	margin-right:20px;
 	padding: 4px;
+	font-weight: normal;
 }
 .cardProdImg
 {
 	border-radius: 50%;
-    margin-left: 5px;
+    /* margin-left: 5px; */
     padding: 2px;
+    width: 25px;
+    height: 25px;
+}
+.defaultUserImg
+{
+	height: 25px;
+	width: 25px;
+	border-radius: 50%;
+	background: gray;
+	padding: 2px;
+	text-align: center;
+	color: white;
+	padding-top: 2px;
+}
+.cardSalesPersonTitle
+{
+	height: 25px;
+	background-color: #f0eff5;
+}
+.cardMTDLbl
+{
+	text-align:right;
+	padding-right:3px;
+	width : 24%;
+}
+.cardMTDVal
+{
+	text-align:center;
+	border-radius:3px;
+	color: #fff;
+	width:34%;
+	margin-right:20px;
+	padding: 4px;
+	font-weight: normal;
+}
+.cardTable
+{
+	cursor: pointer;
+}
+.cardNoDataLbl
+{
+	text-align: center;
 }
-/*End code for Card square format by Dhanendra on Date 01-04-2016*/
\ No newline at end of file
+/*End code for Card new format by Dhanendra on Date 01-04-2016*/
\ No newline at end of file

webitm-dashboard/GWT-Component/war/circle.css

@@ -717,7 +717,7 @@
 }
 .c100.p55 .bar {
   -webkit-transform: rotate(198deg);
-  -moz-transform: rotate(198deg);.cardViewTableVer
+  -moz-transform: rotate(198deg);
   -ms-transform: rotate(198deg);
   -o-transform: rotate(198deg);
   transform: rotate(198deg);
@@ -1850,10 +1850,14 @@
 }
 
 /*Add New Css By Dhanendra on 28-07-15 */
+.cardViewTable
+{
+	color: gray;
+}
+/*Add By Swati on Date 16-05-16*/
 .cardViewTableVer
 {
 	padding-top:0px;
-	/* padding-bottom:10px; */
 	color: gray;
 	font-size:16px;
 }
@@ -1866,6 +1870,7 @@
 	margin-left:2px
 	
 }
+/*End By Swati on Date 16-05-16*/
 .topAlign
 {
 	vertical-align: top;
@@ -1938,7 +1943,7 @@
 }
 /*End New Css By Dhanendra on 28-07-15 */
 
-/*Start New Css for serdia card view By Nikhil on 17-05-16 */
+/*Start New Css for Animation circle view By Nikhil on 17-05-16 */
 
 /* Load animation */
 
@@ -2024,17 +2029,74 @@ stroke-dashoffset:0
   -o-animation: load 2s;
   animation: load 2s;
 }
-#temp1
-{
 
+/*End New Css for Animation circle view By Nikhil on 17-05-16 */
+
+/*Start Animation Circle Css Small Size By Nikhil On Date 06-06-2016*/
+
+.animationSmallCircle {
+  position: relative;
+  display: inline-block;
+  padding: 0;
+  text-align: center;
+  padding-left:1px;
+  margin-top:0;
+  
 }
 
-/*End New Css for serdia card view  By Nikhil on 17-05-16 */
+.animationSmallCircle>li {
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  color: black;
+  font-family: Lato;
+  font-weight: 100;
+}
 
+.animationSmallCircle>li:before {
+  content: attr(data-name);
+  position: absolute;
+  width: 100%;
+  bottom: -11px;
+  font-weight: 400;
+}
 
+.animationSmallCircle>li:after {
+  content: attr(data-percent);
+  position: absolute;
+  width: 100%;
+  top: 2.9rem;
+  left: 0;
+  font-size: 2rem;
+  text-align: center;
+}
 
+.animationSmallCircle svg {
+  width: 7rem;
+  height: 8rem;
+}
 
+.animationSmallCircle svg:nth-child(2) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+}
 
+.animationSmallCircle svg:nth-child(2) path {
+  fill: none;
+  stroke-width: 25;
+  stroke-dasharray: 629;
+  stroke: rgba(255, 255, 255, 0.9);
+  -webkit-animation: load 2s;
+  -moz-animation: load 2s;
+  -o-animation: load 2s;
+  animation: load 2s;
+}
+/*End Animation Circle Css Small Size By Nikhil On Date 06-06-2016*/