patternfly-sass 3.9.0 → 3.10.0

data/assets/stylesheets/patternfly/_layouts.scss

@@ -4,14 +4,11 @@
 .layout-pf {
   &,
   & body {
-    min-height: 100%
+    min-height: 100%;
   }
   &.layout-pf-fixed {
     &.transitions .container-pf-nav-pf-vertical {
       transition: $flyout-transition-pf;
-      -webkit-transition: margin-left $nav-pf-container-transition-period;
-      -moz-transition: margin-left $nav-pf-container-transition-period;
-      -o-transition: margin-left $nav-pf-container-transition-period;
     }
     body {
       padding-top: $navbar-pf-height; // make space for the navbar
@@ -25,6 +22,9 @@
     }
     .container-pf-nav-pf-vertical {
       margin-left: $nav-pf-vertical-width;
+      &.nav-pf-vertical-with-badges {
+        margin-left: $nav-pf-vertical-badges-width;
+      }
       &.collapsed-nav {
         margin-left: $nav-pf-vertical-collapsed-width;
         &.hidden-icons-pf {
@@ -34,27 +34,52 @@
       &.hidden-nav {
         margin-left: 0; // remove space as left nav is hidden
       }
-      &.container-pf-nav-pf-vertical-with-sub-menus {
-        &.hide-nav-pf {
-          margin-left: 0 !important;
-        }
-        &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf {
-          margin-left: $nav-pf-vertical-width;
+      &.hide-nav-pf {
+        margin-left: 0 !important;
+      }
+      &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf {
+        margin-left: $nav-pf-vertical-width;
+        &.nav-pf-vertical-with-badges {
+          margin-left: $nav-pf-vertical-badges-width;
         }
       }
       &.nav-pf-persistent-secondary.secondary-visible-pf {
         @media (min-width: 1200px) {
           margin-left: ($nav-pf-vertical-width + $nav-pf-vertical-width);
+          &.nav-pf-vertical-with-badges {
+            margin-left: ($nav-pf-vertical-badges-width + $nav-pf-vertical-badges-width);
+          }
           &.hidden-nav {
             margin-left: 0; // remove space as left nav is hidden
           }
           &.collapsed-secondary-nav-pf {
             margin-left: $nav-pf-vertical-width;
+            &.nav-pf-vertical-with-badges {
+              margin-left: $nav-pf-vertical-badges-width;
+            }
+          }
+          &.collapsed-tertiary-nav-pf {
+            margin-left: $nav-pf-vertical-width;
+            &.nav-pf-vertical-with-badges {
+              margin-left: $nav-pf-vertical-badges-width;
+            }
           }
           &.collapsed-nav {
             margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width);
+            &.nav-pf-vertical-with-badges {
+              margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-badges-width);
+            }
             &.collapsed-secondary-nav-pf {
               margin-left: $nav-pf-vertical-width;
+              &.nav-pf-vertical-with-badges {
+                margin-left: $nav-pf-vertical-badges-width;
+              }
+            }
+            &.collapsed-tertiary-nav-pf {
+              margin-left: $nav-pf-vertical-width;
+              &.nav-pf-vertical-with-badges {
+                margin-left: $nav-pf-vertical-badges-width;
+              }
             }
             &.hidden-icons-pf {
               margin-left: 0;
@@ -73,7 +98,7 @@
 .layout-pf-alt {
   &,
   & body {
-    min-height: 100%
+    min-height: 100%;
   }
   &.layout-pf-alt-fixed {
     &.layout-pf-alt-fixed-inner-scroll {

data/assets/stylesheets/patternfly/_list-group.scss

@@ -9,26 +9,10 @@
   }
 }
 .list-group-item {
-	border-top: 0;
   border-left: 0;
   border-right: 0;
-  margin-bottom: 0;
 }
 
 .list-group-item-heading {
   font-weight: 600;
 }
-
-.list-group-item {
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    border-top: solid 1px $list-group-active-border;
-    margin-top: -1px;
-    z-index: auto;
-  }
-  &.active:first-child{
-    border-top: 1px solid $list-group-active-border !important;
-    margin-top: -1px;
-  }
-}

data/assets/stylesheets/patternfly/_list-view.scss

@@ -7,13 +7,13 @@
   .list-group-item {
     align-items: flex-start;
     @include clearfix; //IE9 fallback
-    display: -ms-flexbox;// IE10 fallback
     display: flex;
     padding-bottom: 0;
     padding-top: 0;
     &.active {
       color: $list-group-link-color;
       background-color: $list-view-active-bg;
+      z-index:auto;
     }
     &:hover {
       background-color: $list-view-hover-bg;
@@ -26,11 +26,10 @@
     font-size: $font-size-h3;
     small {
       display: block;
-      font-size: ($font-size-base * 0.8);
+      font-size: ($font-size-base * .8);
       font-weight: 400;
     }
     @media (min-width: $screen-md-min) {
-      -ms-flex: 1 0 calc(25% - 20px); // IE10 fallback
       flex:     1 0 calc(25% - 20px);
       float: left; // IE9 fallback
       font-size: $font-size-base;
@@ -45,7 +44,6 @@
     color: currentColor !important; // to overwrite color change when active.
     margin-bottom: 10px;
     @media (min-width: $screen-md-min) {
-      -ms-flex: 1 0 auto; // IE10 prefix
       flex:     1 0 auto; // it covers whats left from the title
       float: left; // IE9 fallback
       margin: 0 $grid-gutter-width 0 0;
@@ -58,9 +56,9 @@
   margin-bottom: ($grid-gutter-width/2);
   margin-left: ($grid-gutter-width/2);
   margin-top: ($grid-gutter-width/2);
-  -ms-flex-order: 2;
-  order:          2;
-  button, > a {
+  order: 2;
+  button,
+  > a {
     margin-left: ($grid-gutter-width/4);
   }
   .list-view-pf-top-align & {
@@ -80,7 +78,9 @@
 .list-view-pf-additional-info-item {
   align-items: center;
   display: inline-block;
-  display: flex;
+  @supports (display: flex) {
+    display: flex;
+  }
   margin-right: ($grid-gutter-width/2);
   max-width:100%;
   text-align: center;
@@ -109,14 +109,12 @@
 .list-view-pf-body {
   align-items: center;
   display: table-cell; //IE9 fallback
-  -ms-flex: 1; // IE10 prefix
   flex:     1;
   min-width: 0;
   vertical-align: top; //IE9 fallback
   width: 100%; // IE9 fallback, it extends the cell to size of the container
   @media (min-width: $screen-md-min) {
     align-items: center;
-    display: -ms-flexbox;// IE10 fallback
     display: flex;
     flex-direction: row;
   }
@@ -133,7 +131,6 @@
   }
 }
 .list-view-pf-description {
-  -ms-flex: 1 0 50%; // IE10 prefix
   flex:     1 0 50%;
   .list-view-pf-stacked & {
     display: block;
@@ -206,9 +203,7 @@
 }
 .list-view-pf-main-info {
   align-items: flex-start;
-  display: -ms-flexbox; // IE10 fallback
   display: flex;
-  -ms-flex: 1; // IE10 prefix
   flex:     1;
   min-width: 0;
   padding-bottom: ($grid-gutter-width/2);

data/assets/stylesheets/patternfly/_login.scss

@@ -49,7 +49,7 @@
       position: absolute;
       width: 100%;
     }
-    [class^='alert'] {
+    [class^="alert"] {
       background: transparent;
       color: $color-pf-white;
     }

data/assets/stylesheets/patternfly/_mixin_overrides.scss

@@ -20,7 +20,6 @@
 
 
 @mixin gradient-striped($color: rgba($color-pf-black, 0.15), $angle: -45deg) {
-  background-image: -webkit-linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
   background-image: linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
 }
 
@@ -34,10 +33,13 @@
 
 // Placeholder text
 @mixin placeholder($color: $input-color-placeholder) {
-  &:-moz-placeholder            { color: $color; font-style: italic; } // Firefox 4-18
-  &::-moz-placeholder           { color: $color; font-style: italic; opacity: 1; } // Firefox 19+
-  &:-ms-input-placeholder       { color: $color; font-style: italic; } // Internet Explorer 10+
-  &::-webkit-input-placeholder  { color: $color; font-style: italic; } // Safari and Chrome
+  &::placeholder               { color: $color; }
+  &:-ms-input-placeholder      { color: $color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
 }
 
 // PatternFly-specific
@@ -47,7 +49,7 @@
   &:before {
     background: $background;
     bottom: -1px;
-    content: '';
+    content: "";
     display: block;
     height: 2px;
     left: $left;

data/assets/stylesheets/patternfly/_mixins.scss

@@ -56,7 +56,7 @@
     &:active,
     &.active {
       background-color: $background;
-      border-color: $border
+      border-color: $border;
     }
   }
 }
@@ -74,7 +74,6 @@
 // Gradients
 #gradient {
   @mixin striped($color: rgba($color-pf-black, 0.15), $angle: -45deg) {
-    background-image: -webkit-linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
     background-image: linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%);
   }
 }
@@ -89,10 +88,13 @@
 
 // Placeholder text
 @mixin placeholder($color: $input-color-placeholder) {
-  &:-moz-placeholder            { color: $color; font-style: italic; } // Firefox 4-18
-  &::-moz-placeholder           { color: $color; font-style: italic; opacity: 1; } // Firefox 19+
-  &:-ms-input-placeholder       { color: $color; font-style: italic; } // Internet Explorer 10+
-  &::-webkit-input-placeholder  { color: $color; font-style: italic; } // Safari and Chrome
+  &::placeholder               { color: $color; }
+  &:-ms-input-placeholder      { color: $color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
 }
 
 // PatternFly-specific
@@ -102,7 +104,7 @@
   &:before {
     background: $background;
     bottom: -1px;
-    content: '';
+    content: "";
     display: block;
     height: 2px;
     left: $left;

data/assets/stylesheets/patternfly/_nav-vertical-alt.scss

@@ -6,7 +6,7 @@
   transition: $flyout-transition-pf;
 
   &.collapsed .list-group-item .list-group-item-value {
-    transition: opacity 0s .1s, opacity .1s linear;
+    transition: opacity 0ms 100ms, opacity 100ms linear;
   }
 
   .list-group-item {
@@ -15,8 +15,8 @@
     }
 
     .list-group-item-value {
-      transition: opacity .5s ease-out;
-      transition-delay: .15s;
+      transition: opacity 500ms ease-out;
+      transition-delay: 150ms;
     }
   }
 }

data/assets/stylesheets/patternfly/_navbar-alt.scss

@@ -98,7 +98,8 @@
 
     .navbar-brand-name {
       display: inline;
-      margin: $navbar-pf-alt-navbar-brand-name-margin;
+      margin-left: $navbar-pf-alt-navbar-brand-name-margin;
+      margin-right: $navbar-pf-alt-navbar-brand-name-margin;
       // hide once screen gets too small
       @media (max-width: $navbar-pf-alt-navbar-brand-name-breakpoint) {
         display: none;
@@ -107,7 +108,8 @@
 
     .navbar-brand-icon {
       display: inline;
-      margin: $navbar-pf-alt-navbar-brand-icon-margin;
+      margin-left: $navbar-pf-alt-navbar-brand-icon-margin;
+      margin-right: $navbar-pf-alt-navbar-brand-icon-margin;
     }
   }
 

data/assets/stylesheets/patternfly/_navbar-vertical.scss

@@ -94,7 +94,7 @@
     padding: $navbar-pf-vertical-navbar-brand-padding;
 
     .navbar-brand-name {
-      display: inline;
+      display: inline-block;
       margin: $navbar-pf-vertical-navbar-brand-name-margin;
       // hide once screen gets too small
       @media (max-width: $navbar-pf-vertical-navbar-brand-name-breakpoint) {
@@ -103,7 +103,7 @@
     }
 
     .navbar-brand-icon {
-      display: inline;
+      display: inline-block;
       margin: $navbar-pf-vertical-navbar-brand-icon-margin;
     }
   }

data/assets/stylesheets/patternfly/_notifications-drawer.scss

@@ -17,7 +17,7 @@
     border-left: none;
     border-right: none;
   }
-  .panel-group .panel-heading+.panel-collapse .panel-body {
+  .panel-group .panel-heading + .panel-collapse .panel-body {
     border-top: none;
     border-bottom: 1px solid $card-pf-border-color;
     padding: 0;

data/assets/stylesheets/patternfly/_pager.scss

@@ -17,10 +17,6 @@
         margin: 2px 0;
       }
     }
-    > a:hover
-    > a:focus {
-      color: $gray-pf;
-    }
     a:active {
       background-image: none;
       @include box-shadow(inset 0 3px 5px rgba($color-pf-black, 0.125));

data/assets/stylesheets/patternfly/_progress-bars.scss

@@ -2,13 +2,6 @@
 // Progress Bar
 // --------------------------------------------------
 
-// WebKit
-@-webkit-keyframes progress-bar-stripes {
-  from  { background-position: 0 0; }
-  to    { background-position: 40px 0; }
-}
-
-// Spec and IE10+
 @keyframes progress-bar-stripes {
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }

data/assets/stylesheets/patternfly/_search.scss

@@ -27,7 +27,6 @@
   }
   .has-clear {
     .clear {
-      background: transparent; // IE8
       background: rgba($color-pf-white, 0.0); // to make the whole button clickable in IE9+
       border: 0;
       height: ($input-height-base - 1);
@@ -51,7 +50,7 @@
       height: ($input-height-large - 2);
       width: 28px;
     }
-    .input-sm  + .clear {
+    .input-sm + .clear {
       height: ($input-height-small - 2);
       width: 28px;
       span {

data/assets/stylesheets/patternfly/_sidebar.scss

@@ -48,7 +48,7 @@
           font-family: $icon-font-name-fa;
           display: block;
           position: absolute;
-          right: ($grid-gutter-width / 2 / 2) ;
+          right: ($grid-gutter-width / 2 / 2);
           top: 1px;
         }
       }

data/assets/stylesheets/patternfly/_spinner.scss

@@ -2,19 +2,13 @@
 // Spinner
 // --------------------------------------------------
 
-@-webkit-keyframes rotation {
-  from {-webkit-transform: rotate(0deg);}
-  to {-webkit-transform: rotate(359deg);}
-}
-
 @keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
 }
 
 .spinner {
-  -webkit-animation: rotation .6s infinite linear;
-  animation: rotation .6s infinite linear;
+  animation: rotation 600ms infinite linear;
   border-bottom: 4px solid rgba($color-pf-black, 0.25);
   border-left: 4px solid rgba($color-pf-black, 0.25);
   border-right: 4px solid rgba($color-pf-black, 0.25);
@@ -76,4 +70,3 @@
     background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}/#{$img-spinner-xs}"), "#{$img-path}/#{$img-spinner-xs}"));
   }
 }
-

data/assets/stylesheets/patternfly/_tables.scss

@@ -15,7 +15,7 @@
         }
       }
       > th {
-        font-family: 'Open Sans';
+        font-family: "Open Sans";
         font-style: normal;
         font-weight: 600;
       }
@@ -49,7 +49,7 @@
 }
 
 .table-striped {
-  > tbody > tr{
+  > tbody > tr {
     &:nth-of-type(even) {
       background-color: $table-bg-accent;
     }