patternfly-sass 2.9.0 → 2.10.0

data/assets/stylesheets/patternfly/_dropdowns.scss

@@ -146,3 +146,65 @@
     display: block;
   }
 }
+
+// Kebab dropmenu
+.dropdown-kebab-pf {
+  .btn-link {
+    color: $gray-darker;
+    font-size: ($font-size-base + 4);
+    line-height: 1;
+    padding: 4px 0;
+    &:active,
+    &:focus,
+    &:hover {
+      color: $link-color;
+    }
+  }
+  .dropdown-menu {
+    left: -15px;
+    margin-top: 11px;
+    &.dropdown-menu-right {
+      left: auto;
+      right: -15px;
+      &:after,
+      &:before {
+        left: auto;
+        right: 6px;
+      }
+    }
+    &:after,
+    &:before {
+      border-bottom-color: $dropdown-border;
+      border-bottom-style: solid;
+      border-bottom-width: 10px;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      content: "";
+      display: inline-block;
+      left: 6px;
+      position: absolute;
+      top: -11px;
+    }
+    &:after {
+      border-bottom-color: $dropdown-bg;
+      top: -10px;
+    }
+  }
+  &.dropup .dropdown-menu {
+    margin-bottom: 11px;
+    margin-top: 0;
+    &:after,
+    &:before {
+      border-bottom: none;
+      border-top-color: $dropdown-border;
+      border-top-style: solid;
+      border-top-width: 10px;
+      bottom: -11px;
+      top: auto;
+    }
+    &:after {
+      border-top-color: $dropdown-bg;
+      bottom: -10px;
+    }
+  }
+}

data/assets/stylesheets/patternfly/_icons.scss

@@ -41,18 +41,30 @@
 .#{$icon-prefix}-close:before {
   content: $pficon-var-close;
 }
+.#{$icon-prefix}-cloud-security:before {
+  content: $pficon-var-cloud-security;
+}
+.#{$icon-prefix}-cloud-tenant:before {
+  content: $pficon-var-cloud-tenant;
+}
 .#{$icon-prefix}-cluster:before {
   content: $pficon-var-cluster;
 }
 .#{$icon-prefix}-container-node:before {
   content: $pficon-var-container-node;
 }
+.#{$icon-prefix}-cpu:before {
+  content: $pficon-var-cpu;
+}
 .#{$icon-prefix}-delete:before {
   content: $pficon-var-delete;
 }
 .#{$icon-prefix}-edit:before {
   content: $pficon-var-edit;
 }
+.#{$icon-prefix}-enterprise:before {
+  content: $pficon-var-enterprise;
+}
 .#{$icon-prefix}-error-circle-o:before {
   color: $brand-danger;
   content: $pficon-var-error-circle-o;
@@ -64,6 +76,9 @@
 .#{$icon-prefix}-messages:before { // class name deprecated
   content: $pficon-var-flag;
 }
+.#{$icon-prefix}-flavor:before {
+  content: $pficon-var-flavor;
+}
 .#{$icon-prefix}-folder-close:before {
   content: $pficon-var-folder-close;
 }
@@ -91,6 +106,12 @@
 .#{$icon-prefix}-kubernetes:before {
   content: $pficon-var-kubernetes;
 }
+.#{$icon-prefix}-memory:before {
+  content: $pficon-var-memory;
+}
+.#{$icon-prefix}-network:before {
+  content: $pficon-var-network;
+}
 .#{$icon-prefix}-ok:before {
   color: $brand-success;
   content: $pficon-var-ok;
@@ -108,12 +129,21 @@
 .#{$icon-prefix}-restart:before {
   content: $pficon-var-restart;
 }
+.#{$icon-prefix}-regions:before {
+  content: $pficon-var-regions;
+}
 .#{$icon-prefix}-registry:before {
   content: $pficon-var-registry;
 }
 .#{$icon-prefix}-replicator:before {
   content: $pficon-var-replicator;
 }
+.#{$icon-prefix}-repository:before {
+  content: $pficon-var-repository;
+}
+.#{$icon-prefix}-resource-pool:before {
+  content: $pficon-var-resource-pool;
+}
 .#{$icon-prefix}-route:before {
   content: $pficon-var-route;
 }
@@ -126,12 +156,18 @@
 .#{$icon-prefix}-screen:before {
   content: $pficon-var-screen;
 }
+.#{$icon-prefix}-server:before {
+  content: $pficon-var-server;
+}
 .#{$icon-prefix}-service:before {
   content: $pficon-var-service;
 }
 .#{$icon-prefix}-settings:before {
   content: $pficon-var-settings;
 }
+.#{$icon-prefix}-storage-domain:before {
+  content: $pficon-var-storage-domain;
+}
 .#{$icon-prefix}-thumb-tack-o:before {
   content: $pficon-var-thumb-tack-o;
 }
@@ -150,7 +186,16 @@
 .#{$icon-prefix}-users:before {
   content: $pficon-var-users;
 }
+.#{$icon-prefix}-virtual-machine:before {
+  content: $pficon-var-virtual-machine;
+}
+.#{$icon-prefix}-volume:before {
+  content: $pficon-var-volume;
+}
 .#{$icon-prefix}-warning-triangle-o:before {
   color: $brand-warning;
   content: $pficon-var-warning-triangle-o;
 }
+.#{$icon-prefix}-zone:before {
+  content: $pficon-var-zone;
+}

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

@@ -14,5 +14,5 @@
 }
 
 .list-group-item-heading {
-  font-weight: 700;
+  font-weight: 600;
 }

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

@@ -0,0 +1,230 @@
+//
+// List View
+// --------------------------------------------------
+
+
+.list-view-pf {
+  .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;
+    }
+    &:hover {
+      background-color: $list-view-hover-bg;
+    }
+    @media (min-width: $screen-md-min) {
+      align-items: center;
+    }
+  }
+  .list-group-item-heading {
+    font-size: $font-size-h3;
+    small {
+      display: block;
+      font-size: ($font-size-base * 0.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;
+      margin: 0 ($grid-gutter-width/2) 0 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: calc(25% - 20px); // IE9 fallback
+    }
+  }
+  .list-group-item-text {
+    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;
+      width: calc(75% - 40px); // IE9 fallback
+    }
+  }
+}
+.list-view-pf-actions {
+  float: right; // IE9 fallback
+  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 {
+    margin-left: ($grid-gutter-width/4);
+  }
+  .list-view-pf-top-align & {
+    align-self: flex-start;
+  }  
+}
+.list-view-pf-additional-info {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  @media (min-width: $screen-md-min) {
+    flex: 1 0 auto; // it covers whats left from summary
+    float: left; // IE9 fallback
+    width: 50%; // IE9 fallback
+  }
+}
+.list-view-pf-additional-info-item {
+  align-items: center;
+  display: inline-block;
+  display: flex;
+  margin-right: ($grid-gutter-width/2);
+  max-width:100%;
+  text-align: center;
+  &.list-view-pf-additional-info-item-stacked {
+    text-align: center;
+    flex-direction: column;
+    strong {
+      font-size: $font-size-h5;
+      line-height: 1em;
+    }
+  }
+  .pficon, .fa {
+    font-size: $font-size-h3;
+    margin-right: ($grid-gutter-width/4);
+  }
+  strong {
+    font-size: $font-size-h3;
+    font-weight: 600;
+    margin-right: 5px;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.list-view-pf-additional-info-item-donut-chart { width: 60px; }
+.list-view-pf-body {
+  align-items: center;
+  display: table-cell; //IE9 fallback
+  -ms-flex: 1; // IE10 prefix
+  flex:     1;
+  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;
+  }
+}
+.list-view-pf-checkbox {
+  border-right: 1px solid $list-view-divider;
+  float: left; //IE9 fallback
+  margin-bottom: ($grid-gutter-width/2);
+  margin-right: 15px;
+  margin-top: ($grid-gutter-width/2);
+  padding: 3px ($grid-gutter-width/4) 3px 0;
+  .list-view-pf-top-align & {
+    align-self: flex-start;
+  }
+}
+.list-view-pf-description {
+  -ms-flex: 1 0 50%; // IE10 prefix
+  flex:     1 0 50%;
+  .list-view-pf-stacked & {
+    display: block;
+  }
+  @media (min-width: $screen-md-min) {
+    align-items: center;
+    display: flex;
+    float: left; //IE9 fallback
+    width: 50%; //IE9 fallback
+  }
+}
+.list-view-pf-left {
+  display: table-cell; //IE9 fallback
+  padding-right: ($grid-gutter-width/2);
+  text-align: center;
+  vertical-align: top; //IE9 fallback
+  .list-view-pf-calendar {
+    font-size: $font-size-small;
+    line-height: 1em;
+    strong {
+      display: block;
+      font-size: ($font-size-h2 * 2);
+      font-weight: 300;
+      line-height: 1em;
+    }
+  }
+  .pficon, .fa {
+    border-radius: 50%;
+    font-size: 2em;
+    // -md is out of alpha order to get correct bg on -danger
+    &.list-view-pf-icon-md {
+      background-color: $alert-info-bg;
+      height: 50px;
+      line-height: 50px;
+      width: 50px;
+    }
+    &.list-view-pf-icon-danger {
+      background-color: $alert-danger-bg;
+      color: $alert-danger-border;
+    }
+    &.list-view-pf-icon-info {
+      color: $alert-info-border;
+    }
+    &.list-view-pf-icon-lg {
+      background-color: $alert-info-bg;
+      height: 60px;
+      line-height: 60px;
+      width: 60px;
+    }
+    &.list-view-pf-icon-sm {
+      border: 2px solid $list-view-accented-border;
+      font-size: 1.4em;
+      height: 30px;
+      line-height: 30px;
+      width: 30px;
+    }
+    &.list-view-pf-icon-success {
+      background-color: $alert-success-bg;
+      color: $alert-success-border;
+    }
+    &.list-view-pf-icon-warning {
+      background-color: $alert-warning-bg;
+      color: $alert-warning-border;
+    }
+  }
+}
+.list-view-pf-main-info {
+  align-items: flex-start;
+  display: -ms-flexbox; // IE10 fallback
+  display: flex;
+  -ms-flex: 1; // IE10 prefix
+  flex:     1;
+  padding-bottom: ($grid-gutter-width/2);
+  padding-top: ($grid-gutter-width/2);
+  @media (min-width: $screen-md-min) {
+    align-items: center;
+    .list-view-pf-top-align & {
+      align-items: flex-start;
+    }
+  }
+}
+.list-view-pf-stacked {
+  .list-group-item-heading {
+    float: none; // IE9 fallback
+    font-size: $font-size-h3;
+    line-height: 1.2em;
+    margin-bottom: 5px;
+    margin-right: $grid-gutter-width;
+    width: auto; // IE9 fallback
+  }
+  .list-group-item-text {
+    float: none;
+    width: auto;
+  }
+}

data/assets/stylesheets/patternfly/_mixins.scss

@@ -71,10 +71,12 @@
   }
 }
 
-
-@mixin gradient-striped($color: rgba(0,0,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%);
+// Gradients
+#gradient {
+  @mixin striped($color: rgba(0,0,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%);
+  }
 }
 
 // Horizontal dividers

data/assets/stylesheets/patternfly/_toast.scss

@@ -11,45 +11,7 @@
   &.alert-info > .pficon    { background-color: $alert-info-border; }
   &.alert-success > .pficon { background-color: $alert-success-border; }
   &.alert-warning > .pficon { background-color: $alert-warning-border; }
-  .dropdown {
-    float: right;
-    margin: -11px 0px -12px 12px;
-    .btn-link {
-      color: $gray-darker;
-      font-size: ($font-size-base + 4);
-      line-height: 1;
-      padding: 13px 5px 13px 5px;
-      &:active,
-      &:focus,
-      &:hover {
-        color: $link-color;
-      }
-    }
-    .dropdown-menu {
-      right: -15px;
-      &:before {
-        border-right: 11px solid transparent;
-        border-bottom: 11px solid #ccc;
-        border-left: 11px solid transparent;
-        border-bottom-color: rgba(0, 0, 0, 0.2);
-        content: '';
-        display: inline-block;
-        position: absolute;
-        right: 11px;
-        top: -11px;
-      }
-      &:after {
-        border-right: 10px solid transparent;
-        border-bottom: 10px solid #ffffff;
-        border-left: 10px solid transparent;
-        content: '';
-        display: inline-block;
-        position: absolute;
-        right: 12px;
-        top: -10px;
-      }
-    }
-  }
+  .dropdown-kebab-pf { margin-left: 10px; }
   > .pficon {
     background-color: $gray-pf;
     bottom:  -1px;
@@ -69,7 +31,7 @@
     display: inline-block;
   }
 }
-// To set max width on toast notifications
+// Sets max width on toast notifications
 .toast-pf-max-width {
  @media (min-width: $screen-md-min) {
     max-width: 31.1% ; // sets the size to 4 cols;