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

patternfly-sass 3.23.2 → 3.31.1

Files changed (369) hide show

data/spec/html/list-view-rows.html DELETED Viewed

@@ -1,597 +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>List View Rows - 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>List View Rows</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="list-group list-view-pf">
-  <div class="list-group-item">
-    <div class="list-view-pf-checkbox">
-      <input type="checkbox">
-    </div>
-    <div class="list-view-pf-actions">
-      <button class="btn btn-default">Action</button>
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="fa fa-plane list-view-pf-icon-sm"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>8</strong> Clusters
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-container-node"></span>
-            <strong>18</strong> Nodes
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-image"></span>
-            <strong>4</strong> Images
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Row Checkbox Selection
-  $(document).ready(function () {
-    $("input[type='checkbox']").change(function (e) {
-      if ($(this).is(":checked")) {
-        $(this).closest('.list-group-item').addClass("active");
-      } else {
-        $(this).closest('.list-group-item').removeClass("active");
-      }
-    });
-  });
-</script>
-<h2>Row Variations</h2>
-<div class="list-group list-view-pf">
-  <div class="list-group-item list-view-pf-stacked">
-    <div class="list-view-pf-actions">
-      <button class="btn btn-default">Action</button>
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="fa fa-plane list-view-pf-icon-lg"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
-            <small>Feb 23, 2015 12:32 am</small>
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="donut-chart-1"></span>
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="donut-chart-2"></span>
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="donut-chart-3"></span>
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
-              <span id="donut-chart-4"></span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Donut Charts
-  var c3ChartDefaults = $().c3ChartDefaults();
-  var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
-  customDonutChartConfig.size.height = 71;
-  customDonutChartConfig.size.width = 60;
-  customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#donut-chart-1';
-  customDonutChartConfig.data = {
-    type: "donut",
-    columns: [
-      ["Used", 34],
-      ["Available", 86]
-    ],
-    groups: [
-      ["used", "available"]
-    ],
-    order: null
-  };
-  c3.generate(customDonutChartConfig);
-  var donutChartTitle = d3.select("#donut-chart-1").select('text.c3-chart-arcs-title');
-  donutChartTitle.text("");
-  donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
-  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
-  customDonutChartConfig.size.height = 71;
-  customDonutChartConfig.size.width = 60;
-  customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#donut-chart-2';
-  customDonutChartConfig.data = {
-    type: "donut",
-    columns: [
-      ["Used", 21],
-      ["Available", 79]
-    ],
-    groups: [
-      ["used", "available"]
-    ],
-    order: null
-  };
-  c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#donut-chart-2").select('text.c3-chart-arcs-title');
-  donutChartTitle.text("");
-  donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
-  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
-  customDonutChartConfig.size.height = 71;
-  customDonutChartConfig.size.width = 60;
-  customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#donut-chart-3';
-  customDonutChartConfig.data = {
-    type: "donut",
-    columns: [
-      ["Used", 14],
-      ["Available", 86]
-    ],
-    groups: [
-      ["used", "available"]
-    ],
-    order: null
-  };
-  c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#donut-chart-3").select('text.c3-chart-arcs-title');
-  donutChartTitle.text("");
-  donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
-  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
-  customDonutChartConfig.size.height = 71;
-  customDonutChartConfig.size.width = 60;
-  customDonutChartConfig.donut.width = 5;
-  customDonutChartConfig.bindto = '#donut-chart-4';
-  customDonutChartConfig.data = {
-    type: "donut",
-    columns: [
-      ["Used", 25],
-      ["Available", 75]
-    ],
-    groups: [
-      ["used", "available"]
-    ],
-    order: null
-  };
-  c3.generate(customDonutChartConfig);
-  donutChartTitle = d3.select("#donut-chart-4").select('text.c3-chart-arcs-title');
-  donutChartTitle.text("");
-  donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
-</script>
-<div class="list-group list-view-pf">
-  <div class="list-group-item list-view-pf-stacked">
-    <div class="list-view-pf-actions">
-      <button class="btn btn-default">Action</button>
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight2">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <div class="list-view-pf-calendar">
-          March
-          <strong>29</strong>
-        </div>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Clusters
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-container-node"></span>
-            <strong>18</strong>
-            Nodes
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-image"></span>
-            <strong>4</strong> Images
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="list-group list-view-pf">
-  <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
-    <div class="list-view-pf-checkbox">
-      <input type="checkbox">
-    </div>
-    <div class="list-view-pf-actions">
-      <button class="btn btn-default">Action</button>
-      <button class="btn btn-default">Action</button>
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight3">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event Ones
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
-            <strong>113,735</strong> Service One
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
-            <strong>35%</strong> Service Two
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
-            <strong>22.0%</strong> Service Three
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Row Checkbox Selection
-  $(document).ready(function () {
-    $("input[type='checkbox']").change(function (e) {
-      if ($(this).is(":checked")) {
-        $(this).closest('.list-group-item').addClass("active");
-      } else {
-        $(this).closest('.list-group-item').removeClass("active");
-      }
-    });
-  });
-</script>
-<div class="list-group list-view-pf">
-  <div class="list-group-item">
-    <div class="list-view-pf-checkbox">
-      <input type="checkbox">
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="fa fa-plane list-view-pf-icon-sm"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>8</strong> Clusters
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Row Checkbox Selection
-  $(document).ready(function () {
-    $("input[type='checkbox']").change(function (e) {
-      if ($(this).is(":checked")) {
-        $(this).closest('.list-group-item').addClass("active");
-      } else {
-        $(this).closest('.list-group-item').removeClass("active");
-      }
-    });
-  });
-</script>
-<div class="list-group list-view-pf list-view-pf-equalized-column">
-  <div class="list-group-item">
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="pficon pficon-ok list-view-pf-icon-md list-view-pf-icon-success"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>108</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>28</strong> Clusters
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="list-group-item">
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="pficon pficon-info list-view-pf-icon-md list-view-pf-icon-info"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>28</strong> Clusters
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="list-group-item">
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="pficon pficon-warning-triangle-o list-view-pf-icon-md list-view-pf-icon-warning"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>108</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>28</strong> Clusters
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="list-group-item">
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="pficon pficon-error-circle-o list-view-pf-icon-md list-view-pf-icon-danger"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>28</strong> Clusters
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Equalize column width
-  $(document).ready(function () {
-  	var widest = 0;
-  	$('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
-  		widest = $(this).width() > widest ? $(this).width() : widest;
-  	}).width(widest);
-  });
-</script>
-<div class="list-group list-view-pf">
-  <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
-    <div class="list-view-pf-checkbox">
-      <input type="checkbox">
-    </div>
-    <div class="list-view-pf-actions">
-      <button class="btn btn-default">Action</button>
-      <button class="btn btn-default">Action</button>
-      <div class="dropdown pull-right dropdown-kebab-pf">
-  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="fa fa-ellipsis-v"></span>
-  </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight4">
-    <li><a href="#">Action</a></li>
-    <li><a href="#">Another action</a></li>
-    <li><a href="#">Something else here</a></li>
-    <li role="separator" class="divider"></li>
-    <li><a href="#">Separated link</a></li>
-  </ul>
-</div>
-    </div>
-    <div class="list-view-pf-main-info">
-      <div class="list-view-pf-left">
-        <span class="fa fa-plane list-view-pf-icon-sm"></span>
-      </div>
-      <div class="list-view-pf-body">
-        <div class="list-view-pf-description">
-          <div class="list-group-item-heading">
-            Event One
-          </div>
-          <div class="list-group-item-text">
-            The following snippet of text is <a href="#">rendered as link text</a>.
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-          </div>
-        </div>
-        <div class="list-view-pf-additional-info">
-          <div class="list-view-pf-additional-info-item">
-            <img src="http://placehold.it/60x60" alt="placeholder image">
-          </div>
-          <div class="list-view-pf-additional-info-item">
-            <span class="pficon pficon-cluster"></span>
-            <strong>8</strong> Clusters
-          </div>
-          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-stacked">
-            <strong>35%</strong> Service Two
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  // Row Checkbox Selection
-  $(document).ready(function () {
-    $("input[type='checkbox']").change(function (e) {
-      if ($(this).is(":checked")) {
-        $(this).closest('.list-group-item').addClass("active");
-      } else {
-        $(this).closest('.list-group-item').removeClass("active");
-      }
-    });
-  });
-</script>
-    </div><!-- /container -->
-  </body>
-</html>