patternfly-sass 3.23.2 → 3.31.1

data/{assets/stylesheets → dist/sass}/patternfly/_vertical-nav.scss

@@ -49,7 +49,7 @@
     box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box
   }
    &.hidden.show-mobile-nav {  // Mobile mode open
-    box-shadow: 0 0 3px rgba($color-pf-black, 0.15);
+    box-shadow: 0 0 3px rgba($color-pf-black, (15/100));
     display: block !important;
   }
   &.hide-nav-pf {  // Used to hide navigation initially to avoid startup flicker
@@ -72,7 +72,6 @@
       font-weight: $nav-pf-vertical-font-weight;
       height: $nav-pf-vertical-link-height;
       line-height: 26px;
-      outline: 0;
       padding: $nav-pf-vertical-link-padding;
       position: relative;
       white-space: nowrap;
@@ -217,34 +216,34 @@
   }
 }
 .hover-secondary-nav-pf {
-  width: calc(#{$nav-pf-vertical-width} * 2);
+  width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
   &.nav-pf-vertical-with-badges {
-    width: calc(#{$nav-pf-vertical-badges-width} * 2);
+    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
   }
 }
 .hover-tertiary-nav-pf {
-  width: calc(#{$nav-pf-vertical-width} * 3);
+  width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
   &.nav-pf-vertical-with-badges {
-    width: calc(#{$nav-pf-vertical-badges-width} * 3);
+    width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)");
   }
   .nav-pf-secondary-nav {
-    width: calc(#{$nav-pf-vertical-width} * 2);
+    width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
     .collapsed-tertiary-nav-pf {
       width: $nav-pf-vertical-width;
     }
   }
   .nav-pf-tertiary-nav {
-    left: calc(#{$nav-pf-vertical-width} * 2);
+    left: unquote("calc(#{$nav-pf-vertical-width} * 2)");
   }
   &.nav-pf-vertical-with-badges {
     .nav-pf-secondary-nav {
-      width: calc(#{$nav-pf-vertical-badges-width} * 2);
+      width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
       .collapsed-tertiary-nav-pf {
         width: $nav-pf-vertical-badges-width;
       }
     }
     .nav-pf-tertiary-nav {
-      left: calc(#{$nav-pf-vertical-badges-width} * 2);
+      left: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
     }
   }
 }
@@ -263,15 +262,15 @@
     }
   }
   &.hover-secondary-nav-pf {
-    width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
     &.nav-pf-vertical-with-badges {
-      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
     }
   }
   &.hover-tertiary-nav-pf {
-    width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
     &.nav-pf-vertical-with-badges {
-      width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2));
+      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))");
     }
   }
 }
@@ -348,7 +347,7 @@
   &.active,
   &:hover {
     > a {
-      width: calc(#{$nav-pf-vertical-width} + 1px);
+      width: unquote("calc(#{$nav-pf-vertical-width} + 1px)");
       z-index: ($zindex-navbar-fixed + 1);
       &:after {
         right: 21px;
@@ -365,7 +364,7 @@
     &.active,
     &:hover {
       > a {
-        width: calc(#{$nav-pf-vertical-badges-width} + 1px);
+        width: unquote("calc(#{$nav-pf-vertical-badges-width} + 1px)");
       }
     }
   }
@@ -424,9 +423,9 @@
 }
 .nav-pf-vertical.nav-pf-persistent-secondary.secondary-visible-pf {  // Persistent secondary nav settings
   @media (min-width: $screen-lg-min) { // secondary menu only persistent at lg screen
-    width: calc(#{$nav-pf-vertical-width} * 2);
+    width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
     &.nav-pf-vertical-with-badges {
-      width: calc(#{$nav-pf-vertical-badges-width} * 2);
+      width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
     }
     &.collapsed-secondary-nav-pf {
       width: $nav-pf-vertical-width;
@@ -434,9 +433,9 @@
         width: $nav-pf-vertical-badges-width;
       }
       &.hover-tertiary-nav-pf {
-        width: calc(#{$nav-pf-vertical-width} * 2);
+        width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
         &.nav-pf-vertical-with-badges {
-          width: calc(#{$nav-pf-vertical-badges-width} * 2);
+          width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)");
         }
       }
     }
@@ -447,7 +446,7 @@
       }
     }
     &.collapsed {
-      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
       &.collapsed-secondary-nav-pf {
         width: $nav-pf-vertical-width;
         &.nav-pf-vertical-with-badges {
@@ -461,16 +460,16 @@
         }
       }
       &.hover-tertiary-nav-pf {
-        width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+        width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
         &.nav-pf-vertical-with-badges {
-          width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2));
+          width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))");
         }
       }
     }
     &.hover-tertiary-nav-pf {
-      width: calc(#{$nav-pf-vertical-width} * 3);
+      width: unquote("calc(#{$nav-pf-vertical-width} * 3)");
       &.nav-pf-vertical-with-badges {
-        width: calc(#{$nav-pf-vertical-badges-width} * 3);
+        width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)");
       }
     }
     .secondary-nav-item-pf.active {
@@ -580,7 +579,7 @@
       height: inherit;
       padding: $nav-pf-vertical-secondary-link-padding;
       margin-left: 20px;
-      width: calc(#{$nav-pf-vertical-width} - 20px);
+      width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
 
       &:hover {
         .list-group-item-value {
@@ -633,7 +632,7 @@
       &.active,
       &:hover {
         > a {
-          width: calc(#{$nav-pf-vertical-width} - 19px);
+          width: unquote("calc(#{$nav-pf-vertical-width} - 19px)");
           z-index: ($zindex-navbar-fixed + 3);
           &:after {
             right: 21px;
@@ -648,13 +647,13 @@
     .list-group-item {
       width: $nav-pf-vertical-badges-width;
       > a {
-        width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+        width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
       }
       &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus
         &.active,
         &:hover {
           > a {
-            width: calc(#{$nav-pf-vertical-badges-width} - 19px);
+            width: unquote("calc(#{$nav-pf-vertical-badges-width} - 19px)");
           }
         }
       }
@@ -668,7 +667,7 @@
   border-top: none;
   bottom: 0;
   display: block;
-  left: calc(#{$nav-pf-vertical-width} * 2);
+  left: unquote("calc(#{$nav-pf-vertical-width} * 2)");
   opacity: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -754,7 +753,7 @@
     left: $nav-pf-vertical-collapsed-width;
     .list-group-item {
       > a {
-        width: calc(#{$nav-pf-vertical-width} - 20px);
+        width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
         > .list-group-item-value { // Continue to show labels for secondary menu items
           display: inline-block;
         }
@@ -765,10 +764,10 @@
     }
   }
   .nav-pf-tertiary-nav { // Adjust left placement
-    left: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+    left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
     .list-group-item {
       > a {
-        width: calc(#{$nav-pf-vertical-width} - 20px);
+        width: unquote("calc(#{$nav-pf-vertical-width} - 20px)");
         > .list-group-item-value { // Continue to show labels for tertiary menu items
           display: inline-block;
         }
@@ -803,7 +802,7 @@
     }
   }
   &.hover-secondary-nav-pf {
-    width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width});
+    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})");
 
     &.collapsed-secondary-nav-pf,
     &.collapsed-tertiary-nav-pf {
@@ -811,9 +810,9 @@
     }
   }
   &.hover-tertiary-nav-pf {
-    width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+    width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
     &.collapsed-secondary-nav-pf {
-      width: calc(#{$nav-pf-vertical-width} * 2);
+      width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
     }
     &.collapsed-tertiary-nav-pf {
       width: $nav-pf-vertical-width;
@@ -823,15 +822,15 @@
     .nav-pf-secondary-nav {
       .list-group-item {
         > a {
-          width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+          width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
         }
       }
     }
     .nav-pf-tertiary-nav {
-      left: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+      left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
       .list-group-item {
         > a {
-          width: calc(#{$nav-pf-vertical-badges-width} - 20px);
+          width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)");
         }
       }
     }
@@ -845,16 +844,16 @@
       }
     }
     &.hover-secondary-nav-pf {
-      width: calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width});
+      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})");
       &.collapsed-secondary-nav-pf,
       &.collapsed-tertiary-nav-pf {
         width: $nav-pf-vertical-badges-width;
       }
     }
     &.hover-tertiary-nav-pf {
-      width: calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2));
+      width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))");
       &.collapsed-secondary-nav-pf {
-        width: calc(#{$nav-pf-vertical-width} * 2);
+        width: unquote("calc(#{$nav-pf-vertical-width} * 2)");
       }
       &.collapsed-tertiary-nav-pf {
         width: $nav-pf-vertical-width;

data/{assets/stylesheets → dist/sass}/patternfly/_wizard.scss

@@ -2,13 +2,12 @@
 // Wizard
 // --------------------------------------------------
 .wizard-pf {
-  height:100%;
+  padding: 10px;
   margin: 0 auto;
   max-height: 900px;
-  padding: 10px;
   width: auto;
   .modal-content {
-    height:100%;
+    min-height:100%;
   }
 }
 
@@ -16,78 +15,80 @@
 // Top section of the wizard w/ title and dismiss
 
 .wizard-pf-body {
+    background:$color-pf-white;
     padding: 0;
     position: static;
 }
 /* styles the sidebard containing the sub-steps */
 .wizard-pf-sidebar {
-  background: $color-pf-black-100;
-  border-right: 1px solid $color-pf-black-300;
-  bottom: 0;
-  left: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  .list-group {
-    border-top: 0;
-    margin-bottom: 0;
-  }
-    .list-group-item {
-      background-color: transparent;
-      border-color: $color-pf-black-200;
-      padding: 0;
-      > a {
-        color: $color-pf-black;
-        cursor: pointer;
-        display: block;
-        font-size: 14px;
-        font-weight: 700;
-        height: 50px;
-        outline: 0;
-        padding-top: 11px;
-        padding-left: 20px;
-        position: relative;
-        white-space: nowrap;
-        width: 14em;
-        &:hover {
-          text-decoration: none;
-        }
-      }
-      &.active {
-        background-color: $color-pf-black-200;
-
-        //override default behavior
-        &:hover {
-          border-color: $color-pf-black-200;
-        }
+    background: $color-pf-black-100;
+    border-right: 1px solid $color-pf-black-300;
+    display:none;
+  @media (min-width: $screen-sm-min) {
+    display:inherit;
+    flex:0 0 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .list-group {
+      border-top: 0;
+      margin-bottom: 0;
+    }
+      .list-group-item {
+        background-color: transparent;
+        border-color: $color-pf-black-200;
+        padding: 0;
         > a {
-          color: $color-pf-blue-300;
-          cursor: default;
-        }
-        // line to left side showing active substep
-        > a:before {
-          background: $color-pf-blue-300;
-          content: " ";
-          height: 100%;
-          left: 0;
-          position: absolute;
-          top: 0;
-          width: 3px;
-        }
-        // caret to right showing active substep
-        > a:after {
-          color: $color-pf-blue-300;
-          content: "\f105"; // right caret
+          color: $color-pf-black;
+          cursor: pointer;
           display: block;
-          font-family: FontAwesome;
-          font-size: 24px;
-          font-weight: 500;
-          line-height: 30px;
-          padding-top: 10px;
-          position: absolute;
-          right: 23px;
-          top: 0;
+          font-size: 14px;
+          font-weight: 700;
+          height: 50px;
+          outline: 0;
+          padding-top: 11px;
+          padding-left: 20px;
+          position: relative;
+          white-space: nowrap;
+          width: 14em;
+          &:hover {
+            text-decoration: none;
+          }
+        }
+        &.active {
+          background-color: $color-pf-black-200;
+
+          //override default behavior
+          &:hover {
+            border-color: $color-pf-black-200;
+          }
+          > a {
+            color: $color-pf-blue-300;
+            cursor: default;
+          }
+          // line to left side showing active substep
+          > a:before {
+            content: " ";
+            background: $color-pf-blue-300;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 3px;
+          }
+          // caret to right showing active substep
+          > a:after {
+            color: $color-pf-blue-300;
+            content: "\f105"; // right caret
+            display: block;
+            font-family: FontAwesome;
+            font-size: 24px;
+            font-weight: 500;
+            line-height: 30px;
+            padding-top: 10px;
+            position: absolute;
+            right: 23px;
+            top: 0;
+          }
         }
       }
     }
@@ -107,18 +108,27 @@
 /* styles the steps indicator across the top of the wizard */
 .wizard-pf-steps {
   border-bottom: solid 1px $color-pf-black-300;
-  text-align: center;
+    @media (min-width: $screen-sm-min) {
+      text-align: center;
+    }
 }
+
 .wizard-pf-steps-indicator {
-  font-size: ceil(($font-size-base * 1.3333));
+  background: $color-pf-black-200;
+  border-top: 1px solid $color-pf-black-300;
   display: inline-block;
-  @supports(display: flex) {
-    display: flex;
-  }
-  height: 120px;
-  justify-content: space-around;
+  display: flex;
+  font-size: ceil(($font-size-base * 1.3333));
   list-style: none;
-  padding: 38px 0 0;
+  margin-bottom: 0;
+  padding: 15px 0;
+    @media (min-width: $screen-sm-min) {
+      background: $color-pf-white;
+      height: 120px;
+      padding: 38px 0 0;
+      justify-content: space-around;
+    }
+
   li {
     counter-increment: section;
     float:left; /* float for IE9 since it doesn't support flex. If items wrap, they overlap */
@@ -129,33 +139,73 @@
     padding: 0;
     position: relative;
     text-align: center;
-    /* draw the line between the circles */
-    &:before {
-      background-color: $color-pf-black-400;
-      content: "";
-      height: 2px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before
-      //otherwise, use top: calc(50% - 1px);
-    }
-    /* don't draw the line between the circles on the ends */
-    &:first-child:before {
-      left: 50%;
-      right: 0;
+    &:not(.active) {
+      display: none;
+      @media (min-width: $screen-sm-min) {
+        display: block;
+      }
     }
-    &:last-child:before {
-      left: 0;
-      right: 50%;
+    a {
+        align-items: center;
+        display: flex;
+        font-weight: 700;
+        @media (min-width: $screen-sm-min) {
+          font-weight: normal;
+          justify-content: center;
+        }
+          .wizard-pf-step-title {
+            margin-left: 10px;
+            @media(min-width: $screen-sm-min) {
+              margin-left: 0;
+            }
+
+            &-substep {
+              font-weight: normal;
+              margin-left: 10px;
+              text-transform: capitalize;
+              &:before {
+                content:"\00BB";
+                font-size: 20px;
+                margin-right: 10px;
+              }
+              &:not(.active) {
+                display: none;
+              }
+            }
+          }
     }
-    &:only-of-type:before {
-      background-color: transparent;
+    /* draw the line between the circles */
+    @media (min-width: $screen-sm-min) {
+      .wizard-pf-step-title-substep {
+        display: none;
+      }
+      &:before {
+        background-color: $color-pf-black-400;
+        content: "";
+        height: 2px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before
+        //otherwise, use top: calc(50% - 1px);
+      }
+      /* don't draw the line between the circles on the ends */
+      &:first-child:before {
+        left: 50%;
+        right: 0;
+      }
+      &:last-child:before {
+        left: 0;
+        right: 50%;
+      }
+      &:only-of-type:before {
+        background-color: transparent;
+      }
     }
     a {
       color: $color-pf-black;
-      font-size: 16px;
       cursor: pointer;
+      font-size: 16px;
       margin-left:1em;
       margin-right:1em;
       text-decoration: none;
@@ -166,10 +216,10 @@
           color: $color-pf-white;
         }
       }
-
     }
-  }
+}
   /* draw the step number in the circle */
+
   .wizard-pf-step-number {
     background-color: $color-pf-white;
     border-radius: 50%;
@@ -178,35 +228,40 @@
     font-size: $font-size-base;
     font-weight: 700;
     height: 25px;
-    left: #{calc(50% - 13px)};
     line-height: 22px;
-    position: absolute;
-    top: 27px;
+      @media (min-width: $screen-sm-min) {
+        left: unquote("calc(50% - 13px)");
+        position: absolute;
+        top: 27px;
+      }
     width: 25px;
   }
   .active .wizard-pf-step-number {
+    background-color: $color-pf-blue-300;
+    border-color: $color-pf-blue-300;
     cursor: default;
-      background-color: $color-pf-blue-300;
-      border-color: $color-pf-blue-300;
-      color: $color-pf-white;
+    color: $color-pf-white;
   }
 
   .viewed-pf .wizard-pf-step-number {
-      background-color: $color-pf-white;
-      border-color: $color-pf-blue-300;
-      color: $color-pf-black;
+    color: $color-pf-black;
+    background-color: $color-pf-white;
+    border-color: $color-pf-blue-300;
   }
+
 }
 
 /* styles the main content portion of the wizard */
 .wizard-pf-main {
-  // display: table-cell;
   height: 100%;
-  margin-left: 253px; /* this value is updated by js */
-  overflow: auto;
-  padding: 3em;
+  padding:1em;
   vertical-align: top;
-  // width: 10000px;
+  width:100%;
+  @media (min-width: $screen-sm-min) {
+    overflow: auto;
+    padding:3em;
+    flex:1 1 auto;
+  }
   .blank-slate-pf {
     background-color: transparent;
     border: none;
@@ -336,25 +391,22 @@
 
 /* styles the footer */
 .wizard-pf-footer {
+  background:$color-pf-white;
   border-top: 1px solid $color-pf-black-300;
-  bottom: 0;
-  left: 0;
   margin-top: 0;
   padding-bottom: 17px;
-  position: absolute;
-  right: 0;
-
   .btn-cancel {
     margin-right:25px;
   }
 }
 
 .wizard-pf-row {
-  bottom: 58px; /* this value is updated by js */
-  position: absolute;
-  overflow: hidden;
-  top: 172px; /* this value is updated by js */
-  width:100%;
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      width:100%;
+      height: 900px;
+      max-height: 65vh;
+    }
 }
 
 // Scale up the modal