patternfly-sass 3.23.2 → 3.31.1

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

@@ -30,7 +30,7 @@
     }
   }
   body {
-    background: $login-bg-color url("#{$img-path}/#{$img-bg-login}") repeat-x 50% 0;
+    background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0;
     background-size: auto;
     @media (min-width: $screen-sm-min) {
       background-size: 100% auto;
@@ -49,13 +49,9 @@
       position: absolute;
       width: 100%;
     }
-    [class^="alert"] {
-      background: transparent;
-      color: $color-pf-white;
-    }
     .details {
       p:first-child {
-        border-top: 1px solid rgba($color-pf-white, 0.3);
+        border-top: 1px solid rgba($color-pf-white, (30/100));
         padding-top: 25px;
         margin-top: 25px;
       }
@@ -65,7 +61,7 @@
           padding-top: 0;
           margin-top: 0;
         }
-        border-left: 1px solid rgba($color-pf-white, 0.3);
+        border-left: 1px solid rgba($color-pf-white, (30/100));
         padding-left: 40px;
       }
       p {

data/dist/sass/patternfly/_mixins.scss

@@ -0,0 +1,81 @@
+//
+// Patternfly Mixins
+// --------------------------------------------------
+// PatternFly-specific mixins
+
+// Patternfly button variants.
+@mixin button-variant($color, $background, $background-image-start, $background-image-stop, $border){
+  background-color: $background;
+  @include gradient-vertical($background-image-start, $background-image-stop);
+  border-color: $border;
+  color: $color;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open .dropdown-toggle#{&} {
+    background-color: $background;
+    background-image: none;
+    border-color: $border;
+    color: $color;
+  }
+  &:active,
+  &.active,
+  .open .dropdown-toggle#{&} {
+    background-image: none;
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: darken($background, 5%);
+          border-color: darken($border, 7%);
+    }
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background-color: $background;
+      border-color: $border;
+    }
+  }
+}
+
+// SASS CONVERSION FIX.
+// Allows inclusion of sr-only rules in nested media queries where @extends .sr-only
+// will not work.
+@mixin sr-only-pf(){
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+@mixin tab-indicator($background: $gray-light-pf, $left: 15px, $right: 15px){
+  &:before {
+    background: $background;
+    bottom: -1px;
+    content: "";
+    display: block;
+    height: 2px;
+    left: $left;
+    position: absolute;
+    right: $right;
+  }
+}
+
+// Ellipse overflow text
+.text-overflow-pf {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}

data/{assets/stylesheets → dist/sass}/patternfly/_nav-vertical-alt.scss

@@ -59,7 +59,7 @@
       display: none;
 
       &.show-mobile-nav {
-        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;
       }
     }

data/{assets/stylesheets → dist/sass}/patternfly/_navbar-vertical.scss

@@ -54,9 +54,16 @@
         cursor: pointer;
         font-size: ($font-size-base - 3);
         font-weight: 700;
-        margin: 0 0 -11px -12px;
-        min-width: 0;
+        left: 20px;
+        margin: 0;
         padding: 2px 4px;
+        position: absolute;
+        min-width: 10px;
+        min-height: 10px;
+        top: 18px;
+        &.badge-pf-bordered {
+          border: 1px solid $navbar-pf-vertical-bg-color;
+        }
       }
 
       .caret,

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

@@ -55,6 +55,30 @@
         }
       }
     }
+ .badge {
+    background-color: $notification-badge-color;
+    border-radius: 20px;
+    color: $navbar-pf-vertical-active-color;
+    cursor: pointer;
+    font-size: ($font-size-base - 3);
+    font-weight: 700;
+    left: 26px;
+    margin: 0;
+    padding: 2px 4px;
+    position: absolute;
+    min-width: 10px;
+    min-height: 10px;
+    top: 6px;
+    @media(min-width: $screen-sm-min) {
+      left: auto;
+      right: 6px;
+      top: 3px;
+    }
+    &.badge-pf-bordered {
+      border: 1px solid $navbar-pf-bg-color;
+    }
+}
+
     @media (max-width: $grid-float-breakpoint-max) {
       .active .dropdown-menu,
       .active .navbar-persistent,
@@ -169,7 +193,7 @@
               border-color: $dropdown-link-active-border-color !important;
               color: $color-pf-white !important;
               small {
-                color: rgba($color-pf-white, 0.5) !important;
+                color: fade($color-pf-white, 50%) !important;
               }
             }
           }
@@ -183,7 +207,7 @@
             }
             & a {
               &:active small {
-                color: rgba($color-pf-white, 0.5) !important;
+                color: fade($color-pf-white, 50%) !important;
               }
               &:hover,
               &:focus {

data/{assets/stylesheets → dist/sass}/patternfly/_notifications-drawer.scss

@@ -6,7 +6,7 @@
 .drawer-pf {
   background-color: $color-pf-black-100;
   border: 1px solid $card-pf-border-color;
-  @include box-shadow(0 6px 12px rgba($color-pf-black, 0.175));
+  @include box-shadow(0 6px 12px fade($color-pf-black, 17.5%));
   overflow-y: auto;
   position: absolute;
   right: 0;
@@ -42,39 +42,96 @@
     display: block;
   }
   &.drawer-pf-expanded {
-    left: 270px;
+    @media (max-width: $screen-xs-max) {
+      left:0;
+      width: 100%;
+    }
+    @media (min-width: $screen-xs-max) {
+      left: 270px;
+    } // if the drawer is expanded and the screen is reduced this ensures it switches to full width on smaller screens.
     width: inherit;
     .drawer-pf-toggle-expand:before {
       content: "\f101";
     }
   }
+  .blank-slate-pf {
+    border: 0;
+    margin-bottom: 0;
+    padding: 30px;
+
+    .blank-slate-pf-icon {
+      font-size: 3em;
+      line-height: 1em;
+    }
+
+    h1 {
+      font-size: 1em;
+      margin-bottom: 0;
+      margin-top: 15px;
+    }
+  }
 }
-.drawer-pf-toggle-expand {
-  color: inherit;
+.drawer-pf-close, .drawer-pf-toggle-expand {
+  color: $gray-darker;
   cursor: pointer;
-  left: 0;
-  padding: 2px 5px;
+  line-height: inherit;
+  padding: 2px 10px;
   position: absolute;
+  &:hover,
+  &:focus {
+    color: $color-pf-blue-400;
+    text-decoration: none;
+  }
+}
+.drawer-pf-toggle-expand {
+  left: 0;
   &:before {
     content: "\f100";
     font-family: "FontAwesome";
   }
-  &:hover,
-  &:focus {
-    color: inherit;
-    text-decoration: none;
+  &:hover {
+    color: $link-color;
   }
 }
+.drawer-pf-close {
+  right: 0;
+}
+
 
 .drawer-pf-action {
+  display: flex;
+  border-bottom: 1px solid $card-pf-border-color;
+
   .btn-link {
     color: $link-color;
     padding: 10px 0;
+    .pficon, .fa {
+      margin-right: 3px;
+    }
+    .pficon-close {
+      position: relative;
+      top: 1px;
+    }
 
     &:hover { color: $link-hover-color; }
   }
 }
 
+.drawer-pf-action-link {
+  border-left: solid 1px $color-pf-black-300;
+  flex: 1 1 0%;
+  margin: 10px 0;
+  text-align: center;
+
+  &:first-of-type {
+    border-left-width: 0;
+  }
+
+  .btn-link {
+    padding: 0;
+  }
+}
+
 .drawer-pf-loading {
   color: $gray-pf;
   font-size: ($font-size-base + 2);
@@ -91,6 +148,10 @@
     margin-right: 5px;
     padding-right: 9px;
   }
+  > .dropdown-kebab-pf {
+    margin-top: -3px;
+  }
+
   .pficon {
     font-size: $font-size-large;
     margin-top: 3px;
@@ -108,6 +169,10 @@
   }
 }
 
+.drawer-pf-notification-content {
+  cursor: default;
+}
+
 .drawer-pf-notification-info,
 .drawer-pf-notification-message {
   display: block;
@@ -126,7 +191,7 @@
   background-color: $color-pf-black-100;
   border-bottom: 1px solid $card-pf-border-color;
   position: absolute;
-  width: 318px;
+  width: 100%;
   h3 {
     font-size: $font-size-base;
     margin: 0;
@@ -134,11 +199,28 @@
   }
 }
 
+.drawer-pf-notification.expanded-notification {
+  .drawer-pf-notification-content {
+    display: flex;
+    @media (max-width: $screen-sm-max) {
+      flex-direction: column;
+    }
+    .drawer-pf-notification-message {
+      flex: 1 1;
+    }
+  }
+}
+
 /* Exclusive styles to work with Vertical Navigation */
 .navbar-pf-vertical {
   .drawer-pf {
-    height: calc(100vh - 80px);//to create a 20px offset bottom
-    top: 58px; //menu height;
+    height: unquote("calc(100vh - #{$drawer-pf-top-vertical} - 20px)");//to create a 20px offset bottom
+    top: $drawer-pf-top-vertical; //menu height;
+      @media (max-width: $screen-xs-max) {
+        width:100%;
+        height: calc(unquote("100vh - #{$drawer-pf-top-vertical}"));
+      }
+
   }
   .nav .drawer-pf-trigger {
     .drawer-pf-trigger-icon {
@@ -156,8 +238,13 @@
 /* Exclusive styles to work with Horizontal Navigation */
 .navbar-pf {
   .drawer-pf {
-    height: calc(100vh - 46px);
-    top: 26px;
+    height: unquote("calc(100vh - #{$drawer-pf-top-horizontal} - 20px)");
+    top: $drawer-pf-top-horizontal;
+    @media (max-width: $screen-xs-max) {
+      width:100%;
+      height: calc(unquote("100vh - #{$drawer-pf-top-horizontal} - 32px"));
+      top:calc(unquote("#{$drawer-pf-top-horizontal} + 8px"));
+    }
   }
   .drawer-pf-trigger-icon { cursor: pointer; }
 }

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

@@ -19,7 +19,7 @@
     }
     a:active {
       background-image: none;
-      @include box-shadow(inset 0 3px 5px rgba($color-pf-black, 0.125));
+      @include box-shadow(inset 0 3px 5px fade($color-pf-black, 12.5%));
       outline: 0;
     }
   }

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

@@ -20,7 +20,7 @@
   > li > a,
   > li > span {
     &:active {
-      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, 0.2));
+      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
     }
   }
   > .active > a,
@@ -30,7 +30,7 @@
     &:focus {
       background-color: $btn-default-bg;
       border-color: $pagination-border;
-      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, 0.2));
+      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
       color: $btn-default-color;
       @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop);
     }

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

@@ -28,6 +28,15 @@
     }
   }
 
+  .panel-info {
+    border-color: $panel-info-border;
+    .panel-heading {
+      background-color: $panel-group-pf-info-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-info-border;
+    }
+  }
   .panel-primary {
     border-color: $panel-primary-border;
     .panel-heading {
@@ -36,6 +45,9 @@
     + .panel-default {
       border-top-color: $panel-primary-border;
     }
+    + .panel-info {
+      border-top-color: $panel-primary-border;
+    }
   }
   .panel-success {
     border-color: $panel-success-border;
@@ -45,6 +57,9 @@
     + .panel-default {
       border-top-color: $panel-success-border;
     }
+    + .panel-info {
+      border-top-color: $panel-success-border;
+    }
     + .panel-primary {
       border-top-color: $panel-success-border;
     }
@@ -57,6 +72,9 @@
     + .panel-default {
       border-top-color: $panel-warning-border;
     }
+    + .panel-info {
+      border-top-color: $panel-warning-border;
+    }
     + .panel-primary {
       border-top-color: $panel-warning-border;
     }
@@ -72,6 +90,9 @@
     + .panel-default {
       border-top-color: $panel-danger-border;
     }
+    + .panel-info {
+      border-top-color: $panel-danger-border;
+    }
     + .panel-primary {
       border-top-color: $panel-danger-border;
     }