RubyGems - patternfly-sass - Versions diffs - 3.23.2 → 3.31.1 - Mend

patternfly-sass 3.23.2 → 3.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

data/spec/html/alerts.html DELETED Viewed

@@ -1,106 +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>Alerts - 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.7/js/bootstrap.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Alerts</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> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-      </div>
-      <hr>
-<div class="alert alert-danger">
-  <span class="pficon pficon-error-circle-o"></span>
-  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
-</div>
-<div class="alert alert-warning">
-  <span class="pficon pficon-warning-triangle-o"></span>
-  <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>.
-</div>
-      <div class="alert alert-success">
-        <span class="pficon pficon-ok"></span>
-        <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
-      </div>
-      <div class="alert alert-info">
-        <span class="pficon pficon-info"></span>
-        <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
-      </div>
-      <hr>
-<div class="alert alert-danger alert-dismissable">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-    <span class="pficon pficon-close"></span>
-  </button>
-  <span class="pficon pficon-error-circle-o"></span>
-  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
-</div>
-<div class="alert alert-warning alert-dismissable">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-    <span class="pficon pficon-close"></span>
-  </button>
-  <span class="pficon pficon-warning-triangle-o"></span>
-  <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>.
-</div>
-<div class="alert alert-success alert-dismissable">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-    <span class="pficon pficon-close"></span>
-  </button>
-  <span class="pficon pficon-ok"></span>
-  <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
-</div>
-<div class="alert alert-info alert-dismissable">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
-    <span class="pficon pficon-close"></span>
-  </button>
-  <span class="pficon pficon-info"></span>
-  <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
-</div>
-      <hr>
-<div class="alert alert-success">
-  <button class="btn btn-default pull-right" type="submit">Button</button>
-  <span class="pficon pficon-ok"></span>
-  <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
-</div>
-    </div><!-- /container -->
-  </body>
-</html>

data/spec/html/area-charts.html DELETED Viewed

@@ -1,103 +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>Area 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.7/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Area 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>Area Chart</h2>
-<div class="row">
-  <div class="col-lg-6 col-sm-12">
-    <div id="areaChart" class="line-chart-pf"></div>
-<script>
-  var areaChartDataColumns = [
-    ['data1', 350, 400, 350, 0],
-    ['data2', 140, 100, 150, 205, 145, 50],
-    ['data3', 10, 60, 90, 10, 325, 400],
-    ['data4', 260, 10, 305, 100, 50, 150]
-  ];
-  var singleAreaChartDataColumns = [
-    ['data2', 140, 100, 150, 205, 145, 50]
-  ];
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var areaChartConfig = c3ChartDefaults.getDefaultAreaConfig();
-  areaChartConfig.bindto = '#areaChart';
-  areaChartConfig.data = {
-    columns: areaChartDataColumns,
-    type: 'area-spline'
-  };
-  var areaChart = c3.generate(areaChartConfig);
-</script>
-  </div>
-</div>
-<h2>Single Area Chart</h2>
-<div class="row">
-  <div class="col-lg-6 col-sm-12">
-    <div id="singleAreaChart" class="line-chart-pf"></div>
-<script>
-  var areaChartDataColumns = [
-    ['data1', 350, 400, 350, 0],
-    ['data2', 140, 100, 150, 205, 145, 50],
-    ['data3', 10, 60, 90, 10, 325, 400],
-    ['data4', 260, 10, 305, 100, 50, 150]
-  ];
-  var singleAreaChartDataColumns = [
-    ['data2', 140, 100, 150, 205, 145, 50]
-  ];
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var singleAreaChartConfig = c3ChartDefaults.getDefaultSingleAreaConfig();
-  singleAreaChartConfig.bindto = '#singleAreaChart';
-  singleAreaChartConfig.data = {
-    columns: singleAreaChartDataColumns,
-    type: 'area-spline'
-  };
-  var singleAreaChart = c3.generate(singleAreaChartConfig);
-</script>
-  </div>
-</div>
-    </div><!-- /container -->
-  </body>
-</html>

data/spec/html/badges.html DELETED Viewed

@@ -1,73 +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>Badges - 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.7/js/bootstrap.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Badges</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> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-      </div>
-      <hr>
-      <a href="#">Inbox <span class="badge">42</span></a>
-      <hr>
-      <ul class="nav nav-pills">
-        <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
-        <li><a href="#">Profile</a></li>
-        <li><a href="#">Messages <span class="badge">3</span></a></li>
-      </ul>
-      <hr>
-      <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
-        <li class="active">
-          <a href="#">
-            <span class="badge pull-right">42</span>
-            Home
-          </a>
-        </li>
-        <li><a href="#">Profile</a></li>
-        <li>
-          <a href="#">
-            <span class="badge pull-right">3</span>
-            Messages
-          </a>
-        </li>
-      </ul>
-      <hr>
-      <button class="btn btn-primary" type="button">
-        Messages <span class="badge">4</span>
-      </button>
-    </div><!-- /container -->
-  </body>
-</html>

data/spec/html/bar-charts.html DELETED Viewed

@@ -1,350 +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>Bar 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.7/js/bootstrap.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Bar 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>Vertical Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="verticalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.gogole.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
-  var columnsData = [
-    ['data1', 400, 360, 320, 175]
-  ];
-  var verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
-  verticalBarChartConfig.bindto = '#verticalBarChart';
-  verticalBarChartConfig.axis = {
-    x: {
-      categories: categories,
-      type: 'category'
-    }
-  };
-  verticalBarChartConfig.data = {
-    type: 'bar',
-    columns: columnsData,
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    }
-  };
-  var verticalBarChart = c3.generate(verticalBarChartConfig);
-</script>
-  </div>
-</div>
-<h2>Grouped Vertical Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="groupedVerticalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.gogole.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
-  var columnsData = [
-    ['data1', 400, 360, 320, 175]
-  ];
-  var groupedcCategories = ['2013', '2014', '2015'];
-  var groupedColumnsData = [
-    ['Q1', 400, 250, 375],
-    ['Q2', 355, 305, 300],
-    ['Q3', 315, 340, 276],
-    ['Q4', 180, 390, 190]
-  ];
-  var groupedColors = {
-    pattern: [
-      $.pfPaletteColors.red,
-      $.pfPaletteColors.blue,
-      $.pfPaletteColors.orange,
-      $.pfPaletteColors.green
-    ]
-  };
-  var groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
-  groupedVerticalBarChartConfig.bindto = '#groupedVerticalBarChart';
-  groupedVerticalBarChartConfig.axis = {
-    x: {
-      categories: groupedcCategories,
-      type: 'category'
-    }
-  };
-  groupedVerticalBarChartConfig.data = {
-    type: 'bar',
-    columns: groupedColumnsData,
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    }
-  };
-  groupedVerticalBarChartConfig.color = groupedColors;
-  var groupedVerticalBarChart = c3.generate(groupedVerticalBarChartConfig);
-</script>
-  </div>
-</div>
-<h2>Stacked Vertical Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="stackedVerticalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.google.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var stackedColumnsData = [
-    ['Q1', 400, 250, 375],
-    ['Q2', 355, 305, 300],
-    ['Q3', 315, 340, 276],
-    ['Q4', 180, 390, 190]
-  ];
-  var stackedGroups = [['Q1', 'Q2', 'Q3', 'Q4']];
-  var stackedCategories = ['2013', '2014', '2015'];
-  var stackedColors = {
-    pattern: [
-      $.pfPaletteColors.red,
-      $.pfPaletteColors.blue,
-      $.pfPaletteColors.orange,
-      $.pfPaletteColors.green
-    ]
-  };
-  var stackedVerticalBarChartConfig = c3ChartDefaults.getDefaultStackedBarConfig();
-  stackedVerticalBarChartConfig.axis = {
-    x: {
-      categories: stackedCategories,
-      type: 'category'
-    }
-  };
-  stackedVerticalBarChartConfig.bindto = '#stackedVerticalBarChart';
-  stackedVerticalBarChartConfig.color = stackedColors;
-  stackedVerticalBarChartConfig.data = {
-    columns: stackedColumnsData,
-    groups: stackedGroups,
-    type: 'bar',
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    },
-    order: null
-  };
-  var stackedVerticalBarChart = c3.generate(stackedVerticalBarChartConfig);
-</script>
-  </div>
-</div>
-<h2>Horizontal Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="horizontalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.gogole.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
-  var columnsData = [
-    ['data1', 400, 360, 320, 175]
-  ];
-  var horizontalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
-  horizontalBarChartConfig.bindto = '#horizontalBarChart';
-  horizontalBarChartConfig.axis = {
-    rotated: true,
-    x: {
-      categories: categories,
-      type: 'category'
-    }
-  };
-  horizontalBarChartConfig.data = {
-    type: 'bar',
-    columns: columnsData,
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    }
-  };
-  var horizontalBarChart = c3.generate(horizontalBarChartConfig);
-</script>
-  </div>
-</div>
-<h2>Grouped Horizontal Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="groupedHorizontalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.gogole.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
-  var columnsData = [
-    ['data1', 400, 360, 320, 175]
-  ];
-  var groupedcCategories = ['2013', '2014', '2015'];
-  var groupedColumnsData = [
-    ['Q1', 400, 250, 375],
-    ['Q2', 355, 305, 300],
-    ['Q3', 315, 340, 276],
-    ['Q4', 180, 390, 190]
-  ];
-  var groupedColors = {
-    pattern: [
-      $.pfPaletteColors.red,
-      $.pfPaletteColors.blue,
-      $.pfPaletteColors.orange,
-      $.pfPaletteColors.green
-    ]
-  };
-  var groupedHorizontalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
-  groupedHorizontalBarChartConfig.bindto = '#groupedHorizontalBarChart';
-  groupedHorizontalBarChartConfig.axis = {
-    rotated: true,
-    x: {
-      categories: groupedcCategories,
-      type: 'category'
-    }
-  };
-  groupedHorizontalBarChartConfig.data = {
-    type: 'bar',
-    columns: groupedColumnsData,
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    }
-  };
-  groupedHorizontalBarChartConfig.color = groupedColors;
-  var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
-</script>
-  </div>
-</div>
-<h2>Stacked Horizontal Bar Chart</h2>
-<div class="row">
-  <div class="col-lg-4 col-sm-6 col-xs-12">
-    <div id="stackedHorizontalBarChart"></div>
-<script>
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var chartUrls = [
-    'https://www.google.com',
-    'https://www.yahoo.com',
-    'https://www.bing.com/',
-    'https://duckduckgo.com/'
-  ];
-  var stackedColumnsData = [
-    ['Q1', 400, 250, 375],
-    ['Q2', 355, 305, 300],
-    ['Q3', 315, 340, 276],
-    ['Q4', 180, 390, 190]
-  ];
-  var stackedGroups = [['Q1', 'Q2', 'Q3', 'Q4']];
-  var stackedCategories = ['2013', '2014', '2015'];
-  var stackedColors = {
-    pattern: [
-      $.pfPaletteColors.red,
-      $.pfPaletteColors.blue,
-      $.pfPaletteColors.orange,
-      $.pfPaletteColors.green
-    ]
-  };
-  var stackedHorizontalBarChartConfig = c3ChartDefaults.getDefaultStackedBarConfig();
-  stackedHorizontalBarChartConfig.axis = {
-    rotated: true,
-    x: {
-      categories: stackedCategories,
-      type: 'category'
-    }
-  };
-  stackedHorizontalBarChartConfig.bindto = '#stackedHorizontalBarChart';
-  stackedHorizontalBarChartConfig.color = stackedColors;
-  stackedHorizontalBarChartConfig.data = {
-    columns: stackedColumnsData,
-    groups: stackedGroups,
-    type: 'bar',
-    // optional drilldown behavior
-    onclick: function (d, element) {
-      window.location = chartUrls[d.index];
-    },
-    order: null
-  };
-  var stackedVerticalBarChart = c3.generate(stackedHorizontalBarChartConfig);
-</script>
-  </div>
-</div>
-    </div><!-- /container -->
-  </body>
-</html>