Replace Less variables with base pf Less variables

dtaylor113 · dtaylor113 · commit 4e56efb735b5 · 2017-01-26T09:13:01.000-05:00
diff --git a/src/charts/charts.less b/src/charts/charts.less
@@ -8,23 +8,23 @@ pf-c3-chart {
   }
   span {
     vertical-align: middle;
-    width: @width6;
+    width: @width100;
   }
 }
 .utilization-trend-chart-pf {
   .donut-chart-pf {
     float: left;
     padding-top: 15px;
-    width: @width6;
+    width: @width100;
   }
   h3 {
     font-weight: 400;
   }
   .current-values {
-    border-bottom: 1px solid @color2;
+    border-bottom: 1px solid @color-pf-black-300;
     float: left;
     padding: 0 5px 10px 0;
-    width: @width6;
+    width: @width100;
   }
   .available-count {
     margin: 3px 0;
@@ -41,13 +41,13 @@ pf-c3-chart {
   .radial-chart {
     float: left;
     padding-top: 10px;
-    width: @width6;
+    width: @width100;
   }
   .sparkline-chart {
     float: left;
     margin-left: -5px;
     margin-right: -5px;
-    width: @width6;
+    width: @width100;
   }
   .legend-text {
     color: inherit;
@@ -155,8 +155,8 @@ pf-c3-chart {
   }
 }
 .heatmap-pf-svg {
-  height: @height2;
-  width: @width6;
+  height: @height100;
+  width: @width100;
 }
 .heatmap-pf-legend-container {
   list-style-type: none;
diff --git a/src/filters/filters.less b/src/filters/filters.less
@@ -11,9 +11,9 @@
 }
 .filter-select {
   .btn-default {
-    background-color: @color0;
+    background-color: @color-pf-white;
     background-image: none;
-    color: @color1;
+    color: @color-pf-black-500;
     font-size: 12px;
     font-style: italic;
     font-weight: 400;
@@ -22,9 +22,9 @@
 .input-group {
   .input-group-btn {
     .dropdown-menu>.selected>a {
-      background-color: @color5 !important;
+      background-color: @color-pf-blue !important;
       border-color: #0076b7 !important;
-      color: @color0 !important;
+      color: @color-pf-white !important;
     }
   }
 }
diff --git a/src/sort/sort.less b/src/sort/sort.less
@@ -6,7 +6,7 @@
     margin-left: 10px;
     padding: 4px 0;
     &:hover {
-      color: @color5;
+      color: @color-pf-blue;
     }
   }
 }
diff --git a/src/views/views.less b/src/views/views.less
@@ -4,7 +4,7 @@
   padding-top: 20px;
   .card {
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .175);
-    background: @color0;
+    background: @color-pf-white;
     border-top: 2px solid transparent;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.175);
     display: block;
@@ -27,7 +27,7 @@
     &:hover {
       -moz-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
       -webkit-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
-      border: 1px solid @color2;
+      border: 1px solid @color-pf-black-300;
       box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
       .card-check-box {
         visibility: visible;
@@ -36,15 +36,15 @@
     &:focus {
       -moz-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
       -webkit-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
-      border: 1px solid @color2;
+      border: 1px solid @color-pf-black-300;
       box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
     }
   }
   .card-content {
-    height: @height2;
+    height: @height100;
     margin: 2px 0 10px 0;
     overflow: auto;
-    width: @width6;
+    width: @width100;
   }
   .card-title {
     color: #1186C1;
@@ -54,21 +54,21 @@
     margin-top: 0px;
   }
   .card.active {
-    border: solid 3px @color4;
+    border: solid 3px @color-pf-blue-300;
     &:hover {
-      border: solid 3px @color4;
+      border: solid 3px @color-pf-blue-300;
       .pficon {
-        color: @color0;
+        color: @color-pf-white;
       }
     }
     &:focus {
-      border: solid 3px @color4;
+      border: solid 3px @color-pf-blue-300;
       .pficon {
-        color: @color0;
+        color: @color-pf-white;
       }
     }
     .pficon {
-      color: @color0;
+      color: @color-pf-white;
     }
     .card-check-box {
       visibility: visible;
@@ -77,33 +77,33 @@
   .card.disabled {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
-    border: 1px solid @color3;
+    border: 1px solid @color-pf-black-200;
     box-shadow: none;
-    color: @color1;
+    color: @color-pf-black-500;
     cursor: not-allowed;
   }
 }
 .card.disabled {
   &:hover {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
-    border: 1px solid @color3;
+    border: 1px solid @color-pf-black-200;
     box-shadow: none;
-    color: @color1;
+    color: @color-pf-black-500;
     cursor: not-allowed;
   }
   &:focus {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
-    border: 1px solid @color3;
+    border: 1px solid @color-pf-black-200;
     box-shadow: none;
-    color: @color1;
+    color: @color-pf-black-500;
     cursor: not-allowed;
   }
 }
 /* overriding pf base so that blank slate fills entire parent container */
 .blank-slate-pf {
-  height:@height2;
+  height:@height100;
   margin-bottom: 0px;
   button {
     margin-right: 4px;
diff --git a/styles/angular-patternfly.less b/styles/angular-patternfly.less
@@ -1,3 +1,4 @@
+@import "../node_modules/patternfly/dist/less/color-variables.less";
 @import "variables.less";
 @import "misc.less";
 @import "../src/card/card.less";
diff --git a/styles/variables.less b/styles/variables.less
@@ -1,13 +1,4 @@
-// Color variables (appears count calculates by raw css)
-@color0: #ffffff; // Appears 6 times
-@color1: #999999; // Appears 4 times
-@color2: #d1d1d1; // Appears 3 times
-@color3: #eeeeee; // Appears 3 times
-@color4: #00a8e1; // Appears 3 times
-@color5: #0099d3; // Appears 2 times
-
-// Width variables (appears count calculates by raw css)
-@width6: 100%; // Appears 7 times
-
-// Height variables (appears count calculates by raw css)
-@height2: 100%; // Appears 3 times
+@width100:  100%;
+@width0:    0;
+@height100: 100%;
+@height0:   0;

Original file line number	Diff line number	Diff line change
`@@ -8,23 +8,23 @@ pf-c3-chart {`
`8`	`8`	`}`
`9`	`9`	`span {`
`10`	`10`	`vertical-align: middle;`
`11`		`- width: @width6;`
	`11`	`+ width: @width100;`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`.utilization-trend-chart-pf {`
`15`	`15`	`.donut-chart-pf {`
`16`	`16`	`float: left;`
`17`	`17`	`padding-top: 15px;`
`18`		`- width: @width6;`
	`18`	`+ width: @width100;`
`19`	`19`	`}`
`20`	`20`	`h3 {`
`21`	`21`	`font-weight: 400;`
`22`	`22`	`}`
`23`	`23`	`.current-values {`
`24`		`- border-bottom: 1px solid @color2;`
	`24`	`+ border-bottom: 1px solid @color-pf-black-300;`
`25`	`25`	`float: left;`
`26`	`26`	`padding: 0 5px 10px 0;`
`27`		`- width: @width6;`
	`27`	`+ width: @width100;`
`28`	`28`	`}`
`29`	`29`	`.available-count {`
`30`	`30`	`margin: 3px 0;`
`@@ -41,13 +41,13 @@ pf-c3-chart {`
`41`	`41`	`.radial-chart {`
`42`	`42`	`float: left;`
`43`	`43`	`padding-top: 10px;`
`44`		`- width: @width6;`
	`44`	`+ width: @width100;`
`45`	`45`	`}`
`46`	`46`	`.sparkline-chart {`
`47`	`47`	`float: left;`
`48`	`48`	`margin-left: -5px;`
`49`	`49`	`margin-right: -5px;`
`50`		`- width: @width6;`
	`50`	`+ width: @width100;`
`51`	`51`	`}`
`52`	`52`	`.legend-text {`
`53`	`53`	`color: inherit;`
`@@ -155,8 +155,8 @@ pf-c3-chart {`
`155`	`155`	`}`
`156`	`156`	`}`
`157`	`157`	`.heatmap-pf-svg {`
`158`		`- height: @height2;`
`159`		`- width: @width6;`
	`158`	`+ height: @height100;`
	`159`	`+ width: @width100;`
`160`	`160`	`}`
`161`	`161`	`.heatmap-pf-legend-container {`
`162`	`162`	`list-style-type: none;`
Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,9 @@`
`11`	`11`	`}`
`12`	`12`	`.filter-select {`
`13`	`13`	`.btn-default {`
`14`		`- background-color: @color0;`
	`14`	`+ background-color: @color-pf-white;`
`15`	`15`	`background-image: none;`
`16`		`- color: @color1;`
	`16`	`+ color: @color-pf-black-500;`
`17`	`17`	`font-size: 12px;`
`18`	`18`	`font-style: italic;`
`19`	`19`	`font-weight: 400;`
`@@ -22,9 +22,9 @@`
`22`	`22`	`.input-group {`
`23`	`23`	`.input-group-btn {`
`24`	`24`	`.dropdown-menu>.selected>a {`
`25`		`- background-color: @color5 !important;`
	`25`	`+ background-color: @color-pf-blue !important;`
`26`	`26`	`border-color: #0076b7 !important;`
`27`		`- color: @color0 !important;`
	`27`	`+ color: @color-pf-white !important;`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`margin-left: 10px;`
`7`	`7`	`padding: 4px 0;`
`8`	`8`	`&:hover {`
`9`		`- color: @color5;`
	`9`	`+ color: @color-pf-blue;`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@import "../node_modules/patternfly/dist/less/color-variables.less";`
`1`	`2`	`@import "variables.less";`
`2`	`3`	`@import "misc.less";`
`3`	`4`	`@import "../src/card/card.less";`