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/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>