patternfly-sass 3.1.0 → 3.2.0

data/spec/html/vertical-navigation-without-icons.html

@@ -131,7 +131,7 @@
       </a>
       <div id="storage-secondary" class="nav-pf-persistent-secondary">
   <div class="persistent-secondary-header">
-    <a class="fa fa-arrow-circle-o-left" href="#" data-toggle="collapse-secondary-nav"></a>
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
     <span>Storage</span>
   </div>
   <h5>File</h5>
@@ -263,7 +263,7 @@
       </a>
       <div id="admin-secondary" class="nav-pf-persistent-secondary">
   <div class="persistent-secondary-header">
-    <a class="fa fa-arrow-circle-o-left" href="#" data-toggle="collapse-secondary-nav"></a>
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
     <span>Admin</span>
   </div>
   <h5>User Administration</h5>

data/spec/html/vertical-navigation.html

@@ -131,7 +131,7 @@
       </a>
       <div id="storage-secondary" class="nav-pf-persistent-secondary">
   <div class="persistent-secondary-header">
-    <a class="fa fa-arrow-circle-o-left" href="#" data-toggle="collapse-secondary-nav"></a>
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
     <span>Storage</span>
   </div>
   <h5>File</h5>
@@ -263,7 +263,7 @@
       </a>
       <div id="admin-secondary" class="nav-pf-persistent-secondary">
   <div class="persistent-secondary-header">
-    <a class="fa fa-arrow-circle-o-left" href="#" data-toggle="collapse-secondary-nav"></a>
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
     <span>Admin</span>
   </div>
   <h5>User Administration</h5>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: patternfly-sass
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.2.0
 platform: ruby
 authors:
 - Dávid Halász
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-25 00:00:00.000000000 Z
+date: 2016-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -275,6 +275,7 @@ files:
 - assets/stylesheets/patternfly/_cards.scss
 - assets/stylesheets/patternfly/_charts.scss
 - assets/stylesheets/patternfly/_close.scss
+- assets/stylesheets/patternfly/_color-variables.scss
 - assets/stylesheets/patternfly/_datatables.scss
 - assets/stylesheets/patternfly/_dropdowns.scss
 - assets/stylesheets/patternfly/_ext-bootstrap-combobox.scss
@@ -330,7 +331,9 @@ files:
 - spec/compare_spec.rb
 - spec/html/accordions.html
 - spec/html/alerts.html
+- spec/html/area-charts.html
 - spec/html/badges.html
+- spec/html/bar-charts.html
 - spec/html/basic.html
 - spec/html/blank-slate.html
 - spec/html/bootstrap-combobox.html
@@ -344,7 +347,6 @@ files:
 - spec/html/breadcrumbs.html
 - spec/html/buttons.html
 - spec/html/cards.html
-- spec/html/charts.html
 - spec/html/code.html
 - spec/html/dashboard.html
 - spec/html/datatables-columns.html
@@ -357,6 +359,7 @@ files:
 - spec/html/dist/css/patternfly.css.map
 - spec/html/dist/css/patternfly.min.css
 - spec/html/dist/css/patternfly.min.css.map
+- spec/html/donut-charts.html
 - spec/html/dropdowns.html
 - spec/html/form.html
 - spec/html/forms.html
@@ -369,6 +372,7 @@ files:
 - spec/html/layout-alt-fixed-with-footer-inner-scroll.html
 - spec/html/layout-alt-fixed-with-footer.html
 - spec/html/layout-alt-fixed.html
+- spec/html/line-charts.html
 - spec/html/list-group.html
 - spec/html/list-view.html
 - spec/html/login.html
@@ -376,6 +380,7 @@ files:
 - spec/html/navbar.html
 - spec/html/pagination.html
 - spec/html/panels.html
+- spec/html/pie-charts.html
 - spec/html/popovers.html
 - spec/html/progress-bars.html
 - spec/html/search.html
@@ -423,7 +428,9 @@ test_files:
 - spec/compare_spec.rb
 - spec/html/accordions.html
 - spec/html/alerts.html
+- spec/html/area-charts.html
 - spec/html/badges.html
+- spec/html/bar-charts.html
 - spec/html/basic.html
 - spec/html/blank-slate.html
 - spec/html/bootstrap-combobox.html
@@ -437,7 +444,6 @@ test_files:
 - spec/html/breadcrumbs.html
 - spec/html/buttons.html
 - spec/html/cards.html
-- spec/html/charts.html
 - spec/html/code.html
 - spec/html/dashboard.html
 - spec/html/datatables-columns.html
@@ -450,6 +456,7 @@ test_files:
 - spec/html/dist/css/patternfly.css.map
 - spec/html/dist/css/patternfly.min.css
 - spec/html/dist/css/patternfly.min.css.map
+- spec/html/donut-charts.html
 - spec/html/dropdowns.html
 - spec/html/form.html
 - spec/html/forms.html
@@ -462,6 +469,7 @@ test_files:
 - spec/html/layout-alt-fixed-with-footer-inner-scroll.html
 - spec/html/layout-alt-fixed-with-footer.html
 - spec/html/layout-alt-fixed.html
+- spec/html/line-charts.html
 - spec/html/list-group.html
 - spec/html/list-view.html
 - spec/html/login.html
@@ -469,6 +477,7 @@ test_files:
 - spec/html/navbar.html
 - spec/html/pagination.html
 - spec/html/panels.html
+- spec/html/pie-charts.html
 - spec/html/popovers.html
 - spec/html/progress-bars.html
 - spec/html/search.html

data/spec/html/charts.html

@@ -1,428 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us">
-<!--<![endif]-->
-  <head>
-    <title>Charts - PatternFly</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../dist/img/favicon.ico">
-    <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
-    <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
-    <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
-    <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
-    <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
-    <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
-    <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../dist/css/patternfly-additions.min.css" >
-    <link href="tests.css" rel="stylesheet" media="screen, print">
-    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
-    <script src="../dist/js/patternfly.min.js"></script>
-  </head>
-
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Charts</h1>
-      </div>
-      <div class="alert alert-warning">
-        <span class="pficon pficon-warning-triangle-o"></span>
-        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
-      </div>
-      <hr>
-      <h2>Line Chart</h2>
-      <h3>Default C3 Colors <small> don't use these</small></h3>
-      <div id="chart"></div>
-      <h3>Patternfly Colors <small>use these</small></h3>
-      <div id="chart1"></div>
-      <h2>Sparkline</h2>
-      <div class="row">
-        <div class="col-md-4">
-          <div class="chart-pf-sparkline" id="chart2"></div>
-          <div>Less than one year remaining</div>
-        </div>
-      </div>
-      <h2>Spline Chart</h2>
-      <div id="chart3"></div>
-      <h2>Area Chart</h2>
-      <div id="chart4"></div>
-      <h2>Stacked Area Chart</h2>
-      <div id="chart5"></div>
-      <h2>Bar Chart</h2>
-      <div id="chart6"></div>
-      <h2>Stacked Bar Chart, Rotated</h2>
-      <div id="chart7"></div>
-      <h2>Donut Chart</h2>
-      <div id="chart8"></div>
-      <h2>Custom Donut Chart</h2>
-      <div id="chart9"></div>
-      <script>
-        var chart = c3.generate({
-          axis: {
-            x: {
-              tick: {
-                outer: false
-              }
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart',
-          data: {
-            columns: [
-              ['data1', 30, 200, 100, 400, 150, 250],
-              ['data2', 50, 220, 310, 240, 115, 25],
-              ['data3', 70, 100, 390, 295, 170, 220],
-              ['data4', 10, 340, 30, 290, 35, 20],
-              ['data5', 90, 150, 160, 165, 180, 5]
-            ]
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          point: {
-            r: 4
-          }
-        });
-
-        var c3ChartDefaults = $().c3ChartDefaults();
-
-        var chart1 = c3.generate({
-          axis: {
-            x: {
-              tick: {
-                outer: false
-              }
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart1',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 30, 200, 100, 400, 150, 250],
-              ['data2', 50, 220, 310, 240, 115, 25],
-              ['data3', 70, 100, 390, 295, 170, 220],
-              ['data4', 10, 340, 30, 290, 35, 20],
-              ['data5', 90, 150, 160, 165, 180, 5]
-            ]
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          point: {
-            r: 4
-          }
-        });
-
-        // Sparkline Chart
-        var sparklineChartConfig = c3ChartDefaults.getDefaultSparklineConfig();
-        sparklineChartConfig.bindto = '#chart2';
-        sparklineChartConfig.data = {
-          columns: [
-            ['%', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
-          ],
-          type: 'area'
-        };
-        var chart2 = c3.generate(sparklineChartConfig);
-
-        // Spline Chart
-        var chart3 = c3.generate({
-          axis: {
-            x: {
-              tick: {
-                outer: false
-              }
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart3',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 30, 200, 100, 400, 150, 250],
-              ['data2', 50, 220, 310, 240, 115, 25],
-              ['data3', 70, 100, 390, 295, 170, 220],
-              ['data4', 10, 340, 30, 290, 35, 20],
-              ['data5', 90, 150, 160, 165, 180, 5]
-            ],
-            type: 'spline'
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          point: {
-            r: 4
-          }
-        });
-
-        // Area Chart
-        var chart4 = c3.generate({
-          axis: {
-            x: {
-              tick: {
-                outer: false
-              }
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart4',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 300, 350, 300, 0, 0, 0],
-              ['data2', 130, 100, 140, 200, 150, 50]
-            ],
-            types: {
-              data1: 'area-spline',
-              data2: 'area-spline'
-            }
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          point: {
-            r: 4
-          }
-        });
-
-        // Stacked Area Chart
-        var chart5 = c3.generate({
-          axis: {
-            x: {
-              tick: {
-                outer: false
-              }
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart5',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 300, 350, 300, 0, 0, 0],
-              ['data2', 130, 100, 140, 200, 150, 50]
-            ],
-            types: {
-              data1: 'area-spline',
-              data2: 'area-spline'
-            },
-            groups: [['data1', 'data2']]
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          point: {
-            r: 4
-          }
-        });
-
-        // Bar Chart
-        var chart6 = c3.generate({
-          axis: {
-            x: {
-              categories: ['Red', 'Orange', 'Green', 'Blue'],
-              tick: {
-                outer: false
-              },
-              type: 'category'
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bar: {
-            width: {
-              ratio: 0.5 // this makes bar width 50% of length between ticks
-            }
-          },
-          bindto: '#chart6',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 5, 200, 200, 400],
-              ['data2', 130, 100, 20, 200]
-            ],
-            // optional drilldown behavior
-            onclick: function (d, element) {
-              window.location = chart6Urls[d.id][d.index];
-            },
-            type: 'bar'
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          }
-        });
-        // URLs for optional drilldown behavior
-        var chart6Urls = {
-          data1: [
-            'https://www.gogole.com',
-            'https://www.yahoo.com',
-            'https://www.bing.com/',
-            'https://duckduckgo.com/'
-          ],
-          data2: [
-            'https://www.redhat.com',
-            'http://mozilla.org',
-            'https://www.acquia.com/',
-            'https://wordpress.org/'
-          ]
-        };
-
-        // Stacked Bar Chart, Rotated
-        var chart7 = c3.generate({
-          axis: {
-            rotated: true,
-            x: {
-              categories: ['Red', 'Orange', 'Green', 'Blue'],
-              tick: {
-                outer: false
-              },
-              type: 'category'
-            },
-            y: {
-              tick: {
-                outer: false
-              }
-            }
-          },
-          bindto: '#chart7',
-          color: c3ChartDefaults.getDefaultColors(),
-          data: {
-            columns: [
-              ['data1', 5, 200, 200, 400],
-              ['data2', 130, 100, 20, 200]
-            ],
-            groups: [
-              ['data1', 'data2']
-            ],
-            // optional drilldown behavior
-            onclick: function (d, element) {
-              window.location = chart7Urls[d.id][d.index];
-            },
-            type: 'bar'
-          },
-          grid: {
-            y: {
-              show: true
-            }
-          },
-          legend: {
-            position: 'right'
-          }
-        });
-        // URLs for optional drilldown behavior
-        var chart7Urls = {
-          data1: [
-            'https://www.gogole.com',
-            'https://www.yahoo.com',
-            'https://www.bing.com/',
-            'https://duckduckgo.com/'
-          ],
-          data2: [
-            'https://www.redhat.com',
-            'http://mozilla.org',
-            'https://www.acquia.com/',
-            'https://wordpress.org/'
-          ]
-        };
-
-        // Donut Chart
-        var donutChartConfig = c3ChartDefaults.getDefaultDonutConfig('29,210 Host Totals');
-        donutChartConfig.bindto = '#chart8';
-        donutChartConfig.tooltip = {show: true};
-        donutChartConfig.data = {
-          type : 'donut',
-          colors: {
-            Cloud: '#00659c',
-            Virtual: '#0088ce',
-            Baremetal: '#969696'
-          },
-          columns: [
-            ['Cloud', 4,828],
-            ['Virtual', 13,258],
-            ['Baremetal', 11,1124]
-          ],
-          onclick: function (d, i) { console.log("onclick", d, i); },
-          onmouseover: function (d, i) { console.log("onmouseover", d, i); },
-          onmouseout: function (d, i) { console.log("onmouseout", d, i); }
-        };
-        var chart8 = c3.generate(donutChartConfig);
-
-        // Custom Donut Chart
-        var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
-        customDonutChartConfig.bindto = '#chart9';
-        customDonutChartConfig.data = {
-          type: "donut",
-          columns: [
-            ["Used", 60],
-            ["Available", 40]
-          ],
-          groups: [
-            ["used", "available"]
-          ],
-          order: null
-        };
-        customDonutChartConfig.tooltip = {
-          contents: function (d) {
-            return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
-              Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
-              '</span>';
-          }
-        };
-        var chart9 = c3.generate(customDonutChartConfig);
-        var donutChartTitle = d3.select("#chart9").select('text.c3-chart-arcs-title');
-        donutChartTitle.text("");
-        donutChartTitle.insert('tspan').text("60").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-        donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
-      </script>
-
-    </div><!-- /container -->
-  </body>
-</html>