patternfly-sass 3.1.0 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d6304c067481013f946c6396e99076af23ddaa74
-  data.tar.gz: a6a17ea1b028bf92483cc9b37bdc355adb2bf803
+  metadata.gz: 4c34f20b8ab4b9005ab5b6e3b01938d41d8a16b2
+  data.tar.gz: 46441e1fd8d66a2bbd8e0a85603fc9ea1bebb0f2
 SHA512:
-  metadata.gz: 6c1b5b6f88c644c6fecb826490ce428d1bda9cf3cb7b522168c8bb627e6f5bd216a94ba01b9864a8a3925aa4b7f6aa337b47369c2d7f10de9f580d86eab343f5
-  data.tar.gz: c178211cd8acd0d4e8831834878f417e7473e7fa1de7000cb88cd1266e22398ab6fe39973f26b3798b75857a3ff1b7f15847ae2021067bfd9f4a14abb1e22878
+  metadata.gz: 9f67615266da22bb7e3e897ea7b3b0bd253d4df3c52b88b6260060edbd9d58870825783bb4dfa3eeb026916e5f86b5d95d6836b56021977a7e45a9440c32bbd2
+  data.tar.gz: 80c0bf70991b0db46f7b96aca022f7dd91f88dbbddc0d3e9e2213d6870d6f45f5cf8ece3ce7527a2119aa5acd9fa0d053464ce7207d439348ebc7fc0f96ea9d9

data/assets/javascripts/patternfly.js

@@ -187,8 +187,8 @@
             i;
 
           for (i = 0; i < ien; i += 1) {
-            $('.paginate_input').val(iCurrentPage);
-            $('.paginate_of b').html(iPages);
+            $('.paginate_input', an[i]).val(iCurrentPage)
+              .siblings('.paginate_of').find('b').html(iPages);
 
             // Add / remove disabled classes from the static elements
             if (oPaging.iPage === 0) {
@@ -393,140 +393,491 @@
   };
 }(jQuery));
 
+// Util: PatternFly Palette colors
+(function ($) {
+  'use strict';
+
+  $.pfPaletteColors = {
+    black:         '#030303',
+    black100:      '#fafafa',
+    black200:      '#ededed',
+    black300:      '#d1d1d1',
+    black400:      '#bbbbbb',
+    black500:      '#8b8d8f',
+    black600:      '#72767b',
+    black700:      '#4d5258',
+    black800:      '#393f44',
+    black900:      '#292e34',
+    blue:          '#0088ce',
+    blue100:       '#bee1f4',
+    blue200:       '#7dc3e8',
+    blue300:       '#39a5dc',
+    blue400:       '#0088ce',
+    blue500:       '#00659c',
+    blue600:       '#004368',
+    blue700:       '#002235',
+    gold:          '#f0ab00',
+    gold100:       '#fbeabc',
+    gold200:       '#f9d67a',
+    gold300:       '#f5c12e',
+    gold400:       '#f0ab00',
+    gold500:       '#b58100',
+    gold600:       '#795600',
+    gold700:       '#3d2c00',
+    orange:        '#ec7a08',
+    orange100:     '#fbdebf',
+    orange200:     '#f7bd7f',
+    orange300:     '#f39d3c',
+    orange400:     '#ec7a08',
+    orange500:     '#b35c00',
+    orange600:     '#773d00',
+    orange700:     '#3b1f00',
+    lightBlue:     '#00b9e4',
+    lightBlue100:  '#beedf9',
+    lightBlue200:  '#7cdbf3',
+    lightBlue300:  '#35caed',
+    lightBlue400:  '#00b9e4',
+    lightBlue500:  '#008bad',
+    lightBlue600:  '#005c73',
+    lightBlue700:  '#002d39',
+    green:         '#3f9c35',
+    green100:      '#cfe7cd',
+    green200:      '#9ecf99',
+    green300:      '#6ec664',
+    green400:      '#3f9c35',
+    green500:      '#2d7623',
+    green600:      '#1e4f18',
+    green700:      '#0f280d',
+    lightGreen:    '#92d400',
+    lightGreen100: '#e4f5bc',
+    lightGreen200: '#c8eb79',
+    lightGreen300: '#ace12e',
+    lightGreen400: '#92d400',
+    lightGreen500: '#6ca100',
+    lightGreen600: '#486b00',
+    lightGreen700: '#253600',
+    cyan:          '#007a87',
+    cyan100:       '#bedee1',
+    cyan200:       '#7dbdc3',
+    cyan300:       '#3a9ca6',
+    cyan400:       '#007a87',
+    cyan500:       '#005c66',
+    cyan600:       '#003d44',
+    cyan700:       '#001f22',
+    purple:        '#703fec',
+    purple100:     '#c7bfff',
+    purple200:     '#a18fff',
+    purple300:     '#8461f7',
+    purple400:     '#703fec',
+    purple500:     '#582fc0',
+    purple600:     '#40199a',
+    purple700:     '#1f0066',
+    red:           '#cc0000',
+    red100:        '#cc0000',
+    red200:        '#a30000',
+    red300:        '#8b0000',
+    red400:        '#470000',
+    red500:        '#2c0000'
+  };
+}(jQuery));
+
 // Util: PatternFly C3 Chart Defaults
 (function ($) {
   'use strict';
 
-  $.fn.c3ChartDefaults = function () {
-    var getDefaultColors,
-      getDefaultDonut,
-      getDefaultDonutSize,
-      getDefaultDonutColors,
-      getDefaultDonutTooltip,
-      getDefaultDonutLegend,
-      getDefaultDonutConfig,
-      getDefaultSparklineArea,
-      getDefaultSparklineSize,
-      getDefaultSparklineAxis,
-      getDefaultSparklineLegend,
-      getDefaultSparklinePoint,
-      getDefaultSparklineTooltip,
-      getDefaultSparklineConfig;
-
-    getDefaultColors = function () {
-      return {
-        pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
-      };
-    };
-    getDefaultDonut = function (title) {
-      return {
-        title: title,
-        label: {
-          show: false
-        },
-        width: 11
-      };
-    };
-    getDefaultDonutSize = function () {
-      return {
-        height: 171 // produces a diameter of 150 and a centered chart
-      };
-    };
-    getDefaultDonutColors = function () {
-      return {
-        pattern: ['#0088CE', '#D1D1D1']
-      };
-    };
-    getDefaultDonutTooltip = function () {
-      return {
-        show: false
-      };
-    };
-    getDefaultDonutLegend = function () {
-      return {
-        show: false
-      };
-    };
-    getDefaultDonutConfig = function (title) {
-      return {
-        donut: this.getDefaultDonut(title),
-        size: this.getDefaultDonutSize(),
-        legend: this.getDefaultDonutLegend(),
-        color: this.getDefaultDonutColors(),
-        tooltip: this.getDefaultDonutTooltip()
-      };
+  $.fn.pfSetDonutChartTitle = function (selector, primary, secondary) {
+    var donutChartRightTitle = window.d3.select(selector).select('text.c3-chart-arcs-title');
+    donutChartRightTitle.text("");
+    donutChartRightTitle.insert('tspan').text(primary).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+    donutChartRightTitle.insert('tspan').text(secondary).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+  };
+
+  $.fn.pfDonutTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
+    return '<table class="c3-tooltip">' +
+      '  <tr>' +
+      '    <td><span style="background-color:' + color(d[0].id) + '"></span>' + '<strong>' + d[0].value + '</strong> ' + d[0].name + '</td>' +
+      '    <td>' + (Math.round(d[0].ratio * 1000) / 10) + '%</td>' +
+      '  </tr>' +
+      '</table>';
+  };
+
+  $.fn.pGetUtilizationDonutTooltipContentsFn = function (units) {
+    return function (d) {
+      return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+        (Math.round(d[0].ratio * 1000) / 10) + '%' + ' ' + units + ' ' + d[0].name +
+        '</span>';
     };
-    getDefaultSparklineArea = function () {
-      return {
-        zerobased: true
-      };
+  };
+
+  $.fn.pfGetBarChartTooltipContentsFn = function (categories) {
+    return function (d) {
+      var name = categories ? categories[d[0].index] : d[0].index;
+      return '<table class="c3-tooltip">' +
+        '  <tr>' +
+        '    <td><strong>' + name + ':</td>' +
+        '    <td>' + d[0].value + '</td>' +
+        '  </tr>' +
+        '</table>';
     };
-    getDefaultSparklineSize = function () {
-      return {
-        height: 60
-      };
+  };
+
+  $.fn.pfSingleLineChartTooltipContentsFn = function (categories) {
+    return function (d) {
+      var name = categories ? categories[d[0].index] : d[0].index;
+      return '<table class="c3-tooltip">' +
+        '  <tr>' +
+        '    <td><strong>' + name + ':</td>' +
+        '    <td>' + d[0].value + '</td>' +
+        '  </tr>' +
+        '</table>';
     };
-    getDefaultSparklineAxis = function () {
-      return {
-        x: {
+  };
+
+  $.fn.pfPieTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {
+    return $().pfDonutTooltipContents(d, defaultTitleFormat, defaultValueFormat, color);
+  };
+
+  $.fn.c3ChartDefaults = function () {
+    var
+      getDefaultColors = function () {
+        return {
+          pattern: [
+            $.pfPaletteColors.blue,
+            $.pfPaletteColors.blue300,
+            $.pfPaletteColors.green,
+            $.pfPaletteColors.orange,
+            $.pfPaletteColors.red
+          ]
+        };
+      },
+      getDefaultBarGrid = function () {
+        return {
+          y: {
+            show: true
+          }
+        };
+      },
+      getDefaultBarTooltip = function (categories) {
+        return {
+          contents: $().pfGetBarChartTooltipContentsFn(categories)
+        };
+      },
+      getDefaultBarLegend = function () {
+        return {
           show: false
-        },
-        y: {
+        };
+      },
+      getDefaultBarConfig = function (categories) {
+        return {
+          color: this.getDefaultColors(),
+          grid: this.getDefaultBarGrid(),
+          tooltip: this.getDefaultBarTooltip(categories),
+          legend: this.getDefaultBarLegend()
+        };
+      },
+      getDefaultGroupedBarGrid = function () {
+        return {
+          y: {
+            show: true
+          }
+        };
+      },
+      getDefaultGroupedBarLegend = function () {
+        return {
+          show: true,
+          position: 'bottom'
+        };
+      },
+      getDefaultGroupedBarConfig = function () {
+        return {
+          color: this.getDefaultColors(),
+          grid: this.getDefaultGroupedBarGrid(),
+          legend: this.getDefaultGroupedBarLegend()
+        };
+      },
+      getDefaultDonut = function (title) {
+        return {
+          title: title,
+          label: {
+            show: false
+          },
+          width: 11
+        };
+      },
+      getDefaultDonutSize = function () {
+        return {
+          height: 171, // produces a diameter of 150 and a centered chart when there is no legend
+          width: 171 // produces a diameter of 150 and a centered chart
+        };
+      },
+      getDefaultDonutColors = function () {
+        return {
+          pattern: [
+            $.pfPaletteColors.blue,
+            $.pfPaletteColors.black300
+          ]
+        };
+      },
+      getDefaultDonutTooltip = function () {
+        return {
           show: false
-        }
-      };
-    };
-    getDefaultSparklineLegend = function () {
-      return {
-        show: false
-      };
-    };
-    getDefaultSparklinePoint = function () {
-      return {
-        r: 1,
-        focus: {
-          expand: {
-            r: 4
+        };
+      },
+      getDefaultDonutLegend = function () {
+        return {
+          show: false
+        };
+      },
+      getDefaultDonutConfig = function (title) {
+        return {
+          donut: this.getDefaultDonut(title),
+          size: this.getDefaultDonutSize(),
+          legend: this.getDefaultDonutLegend(),
+          color: this.getDefaultDonutColors(),
+          tooltip: this.getDefaultDonutTooltip()
+        };
+      },
+      getDefaultPie = function () {
+        return {
+          expand: true,
+          label: {
+            show: false
           }
-        }
-      };
-    };
-    getDefaultSparklineTooltip = function () {
-      return {
-        // because a sparkline should only contain a single data column,
-        // the tooltip will only work for a single data column
-        contents: function (d) {
-          return '<span class="c3-tooltip-sparkline">' + d[0].value + ' ' + d[0].name + '</span>';
-        }
-      };
-    };
-    getDefaultSparklineConfig = function () {
-      return {
-        area: getDefaultSparklineArea(),
-        size: getDefaultSparklineSize(),
-        axis: getDefaultSparklineAxis(),
-        color: getDefaultColors(),
-        legend: getDefaultSparklineLegend(),
-        point: getDefaultSparklinePoint(),
-        tooltip: getDefaultSparklineTooltip()
+        };
+      },
+      getDefaultPieSize = function () {
+        return {
+          height: 171, // produces a diameter of 150 and a centered chart when there is no legend
+          width: 171 // produces a diameter of 150 and a centered chart
+        };
+      },
+      getDefaultPieColors = function () {
+        return {
+          pattern: [
+            $.pfPaletteColors.blue,
+            $.pfPaletteColors.black300
+          ]
+        };
+      },
+      getDefaultPieTooltip = function () {
+        return {
+          contents: $().pfPieTooltipContents
+        };
+      },
+      getDefaultPieLegend = function () {
+        return {
+          show: false
+        };
+      },
+      getDefaultPieConfig = function () {
+        return {
+          pie: this.getDefaultPie(),
+          size: this.getDefaultPieSize(),
+          legend: this.getDefaultPieLegend(),
+          color: this.getDefaultPieColors(),
+          tooltip: this.getDefaultPieTooltip()
+        };
+      },
+      getDefaultSparklineArea = function () {
+        return {
+          zerobased: true
+        };
+      },
+      getDefaultSparklineSize = function () {
+        return {
+          height: 60
+        };
+      },
+      getDefaultSparklineAxis = function () {
+        return {
+          x: {
+            show: false
+          },
+          y: {
+            show: false
+          }
+        };
+      },
+      getDefaultSparklineLegend = function () {
+        return {
+          show: false
+        };
+      },
+      getDefaultSparklinePoint = function () {
+        return {
+          r: 1,
+          focus: {
+            expand: {
+              r: 4
+            }
+          }
+        };
+      },
+      getDefaultSparklineTooltip = function () {
+        return {
+          // because a sparkline should only contain a single data column,
+          // the tooltip will only work for a single data column
+          contents: function (d) {
+            return '<span class="c3-tooltip-sparkline">' + d[0].value + ' ' + d[0].name + '</span>';
+          }
+        };
+      },
+      getDefaultSparklineConfig = function () {
+        return {
+          area: getDefaultSparklineArea(),
+          size: getDefaultSparklineSize(),
+          axis: getDefaultSparklineAxis(),
+          color: getDefaultColors(),
+          legend: getDefaultSparklineLegend(),
+          point: getDefaultSparklinePoint(),
+          tooltip: getDefaultSparklineTooltip()
+        };
+      },
+      getDefaultLineAxis = function () {
+        return {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        };
+      },
+      getDefaultLineGrid = function () {
+        return {
+          x: {
+            show: false
+          },
+          y: {
+            show: true
+          }
+        };
+      },
+      getDefaultLineLegend = function () {
+        return {
+          show: true
+        };
+      },
+      getDefaultLinePoint = function () {
+        return {
+          r: 3,
+          focus: {
+            expand: {
+              r: 5
+            }
+          }
+        };
+      },
+      getDefaultLineConfig = function () {
+        return {
+          axis: getDefaultLineAxis(),
+          grid: getDefaultLineGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultLineLegend(),
+          point: getDefaultLinePoint()
+        };
+      },
+      getDefaultSingleLineTooltip = function () {
+        return {
+          contents: $().pfGetBarChartTooltipContentsFn()
+        };
+      },
+      getDefaultSingleLineLegend = function () {
+        return {
+          show: false
+        };
+      },
+      getDefaultSingleLineConfig = function () {
+        return {
+          axis: getDefaultLineAxis(),
+          grid: getDefaultLineGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultSingleLineLegend(),
+          point: getDefaultLinePoint(),
+          tooltip: getDefaultSingleLineTooltip()
+        };
+      },
+      getDefaultAreaAxis = function () {
+        return getDefaultLineAxis();
+      },
+      getDefaultAreaGrid = function () {
+        return getDefaultLineGrid();
+      },
+      getDefaultAreaLegend = function () {
+        return getDefaultLineLegend();
+      },
+      getDefaultAreaPoint = function () {
+        return getDefaultLinePoint();
+      },
+      getDefaultAreaConfig = function () {
+        return {
+          axis: getDefaultAreaAxis(),
+          grid: getDefaultAreaGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultAreaLegend(),
+          point: getDefaultAreaPoint()
+        };
+      },
+      getDefaultSingleAreaTooltip = function () {
+        return {
+          contents: $().pfGetBarChartTooltipContentsFn()
+        };
+      },
+      getDefaultSingleAreaLegend = function () {
+        return getDefaultSingleLineLegend();
+      },
+      getDefaultSingleAreaConfig = function () {
+        return {
+          axis: getDefaultAreaAxis(),
+          grid: getDefaultAreaGrid(),
+          color: getDefaultColors(),
+          legend: getDefaultSingleAreaLegend(),
+          point: getDefaultAreaPoint(),
+          tooltip: getDefaultSingleAreaTooltip()
+        };
       };
-    };
-
     return {
       getDefaultColors: getDefaultColors,
+      getDefaultBarGrid: getDefaultBarGrid,
+      getDefaultBarTooltip: getDefaultBarTooltip,
+      getDefaultBarLegend: getDefaultBarLegend,
+      getDefaultBarConfig: getDefaultBarConfig,
+      getDefaultGroupedBarGrid: getDefaultGroupedBarGrid,
+      getDefaultGroupedBarLegend: getDefaultGroupedBarLegend,
+      getDefaultGroupedBarConfig: getDefaultGroupedBarConfig,
       getDefaultDonut: getDefaultDonut,
       getDefaultDonutSize: getDefaultDonutSize,
       getDefaultDonutColors: getDefaultDonutColors,
       getDefaultDonutTooltip: getDefaultDonutTooltip,
       getDefaultDonutLegend: getDefaultDonutLegend,
       getDefaultDonutConfig: getDefaultDonutConfig,
+      getDefaultPie: getDefaultPie,
+      getDefaultPieSize: getDefaultPieSize,
+      getDefaultPieColors: getDefaultPieColors,
+      getDefaultPieTooltip: getDefaultPieTooltip,
+      getDefaultPieLegend: getDefaultPieLegend,
+      getDefaultPieConfig: getDefaultPieConfig,
       getDefaultSparklineArea: getDefaultSparklineArea,
       getDefaultSparklineSize: getDefaultSparklineSize,
       getDefaultSparklineAxis: getDefaultSparklineAxis,
       getDefaultSparklineLegend: getDefaultSparklineLegend,
       getDefaultSparklinePoint: getDefaultSparklinePoint,
       getDefaultSparklineTooltip: getDefaultSparklineTooltip,
-      getDefaultSparklineConfig: getDefaultSparklineConfig
+      getDefaultSparklineConfig: getDefaultSparklineConfig,
+      getDefaultLineAxis: getDefaultLineAxis,
+      getDefaultLineGrid: getDefaultLineGrid,
+      getDefaultLineLegend: getDefaultLineLegend,
+      getDefaultLinePoint: getDefaultLinePoint,
+      getDefaultLineConfig: getDefaultLineConfig,
+      getDefaultSingleLineTooltip: getDefaultSingleLineTooltip,
+      getDefaultSingleLineConfig: getDefaultSingleLineConfig,
+      getDefaultAreaAxis: getDefaultAreaAxis,
+      getDefaultAreaGrid: getDefaultAreaGrid,
+      getDefaultAreaLegend: getDefaultAreaLegend,
+      getDefaultAreaPoint: getDefaultAreaPoint,
+      getDefaultAreaConfig: getDefaultAreaConfig,
+      getDefaultSingleAreaTooltip: getDefaultSingleAreaTooltip,
+      getDefaultSingleAreaConfig: getDefaultSingleAreaConfig
     };
   };
 }(jQuery));
@@ -767,6 +1118,28 @@
           navElement.find('.mobile-nav-item-pf').each(function (index, item) {
             $(item).removeClass('mobile-nav-item-pf');
           });
+        } else {
+          showSecondaryMenu();
+        }
+      },
+
+      updateSecondaryCollapsedState = function (setCollapsed, collapsedItem) {
+        if (setCollapsed) {
+          collapsedItem.addClass('collapsed');
+          navElement.addClass('collapsed-secondary-nav-pf');
+          bodyContentElement.addClass('collapsed-secondary-nav-pf');
+        } else {
+          if (collapsedItem) {
+            collapsedItem.removeClass('collapsed');
+          } else {
+            // Remove any collapsed secondary menus
+            navElement.find('[data-toggle="collapse-secondary-nav"]').each(function (index, element) {
+              var $e = $(element);
+              $e.removeClass('collapsed');
+            });
+          }
+          navElement.removeClass('collapsed-secondary-nav-pf');
+          bodyContentElement.removeClass('collapsed-secondary-nav-pf');
         }
       },
 
@@ -784,6 +1157,9 @@
             bodyContentElement.removeClass('collapsed-nav');
             bodyContentElement.addClass('hidden-nav');
 
+            // Reset the secondary collapsed state
+            updateSecondaryCollapsedState(false);
+
             explicitCollapse = false;
           }
         } else if (navElement.hasClass('hidden')) {
@@ -876,6 +1252,13 @@
         });
       },
 
+      forceHideSecondaryMenu = function () {
+        navElement.addClass('force-hide-secondary-nav-pf');
+        setTimeout(function () {
+          navElement.removeClass('force-hide-secondary-nav-pf');
+        }, 500);
+      },
+
       bindMenuItemsBehavior = function (handleSelection) {
         // Set main nav active item on click, and show secondary nav if it has a secondary nav bar
         $(document).on('click.pf.secondarynav.data-api', '.nav-pf-vertical > .list-group > .list-group-item', function (element) {
@@ -908,8 +1291,7 @@
 
           // Set the active items on an item click
           $e.on('click.pf.secondarynav.data-api', '.list-group > .list-group-item', function (event) {
-            var $this = $(this);
-            updateSecondaryMenuDisplayAfterSelection($this);
+            updateSecondaryMenuDisplayAfterSelection();
 
             if (handleSelection) {
               setSecondaryActiveItem($e, $(this));
@@ -920,12 +1302,25 @@
 
           // Collapse the secondary nav bar when the toggle is clicked
           $e.on('click.pf.secondarynav.data-api', '[data-toggle="collapse-secondary-nav"]', function (e) {
-            hideSecondaryMenu();
+            var $this = $(this);
+            if (inMobileState()) {
+              hideSecondaryMenu();
+              forceHideSecondaryMenu();
+            } else {
+              if ($this.hasClass('collapsed')) {
+                updateSecondaryCollapsedState(false, $this);
+                if ($(window).width() < breakpoints.desktop) {
+                  forceHideSecondaryMenu();
+                }
+              } else {
+                if ($this.parents('.persistent-secondary.active').length > 0) {
+                  updateSecondaryCollapsedState(true, $this);
+                } else {
+                  forceHideSecondaryMenu();
+                }
+              }
+            }
             navElement.removeClass('hover-secondary-nav-pf');
-            navElement.addClass('force-hide-secondary-nav-pf');
-            setTimeout(function () {
-              navElement.removeClass('force-hide-secondary-nav-pf');
-            }, 500);
             if (handleSelection) {
               // Don't process the click on the parent item
               e.stopImmediatePropagation();