patternfly-sass 3.23.2 → 3.31.1

data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-select.scss

@@ -7,38 +7,46 @@
     margin-bottom: 0;
   }
   .btn {
+    // TODO Create global variable for validation state box shadows?
+    $input-validation-focus-box-shadow: fade($color-pf-black, 7.5%);
     &:hover {
       border-color: $input-border-hover;
     }
     .caret {
       margin-top: -4px;
     }
-    @include form-control-outline;
+    @include form-control-outline();
     .has-error & {
       border-color: $state-danger-text;
       &:focus {
+        // TODO Create global variable for validation state box shadows?
+        $state-danger-input-focus: lighten($state-danger-text, 20%);
+        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-danger-input-focus}");
         border-color: darken($state-danger-text, 10%);
-        $shadow: inset 0 1px 1px rgba($color-pf-black, 0.075), 0 0 6px lighten($state-danger-text, 20%);
         @include box-shadow($shadow);
       }
     }
     .has-success & {
       border-color: $state-success-text;
       &:focus {
+        // TODO Create global variable for validation state box shadows?
+        $state-success-input-focus: lighten($state-success-text, 20%);
+        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-success-input-focus}");
         border-color: darken($state-success-text, 10%);
-        $shadow: inset 0 1px 1px rgba($color-pf-black, 0.075), 0 0 6px lighten($state-success-text, 20%);
         @include box-shadow($shadow);
       }
     }
     .has-warning & {
       border-color: $state-warning-text;
       &:focus {
+        // TODO Create global variable for validation state box shadows?
+        $state-warning-input-focus: lighten($state-warning-text, 20%);
+        $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-warning-input-focus}");
         border-color: darken($state-warning-text, 10%);
-        $shadow: inset 0 1px 1px rgba($color-pf-black, 0.075), 0 0 6px lighten($state-warning-text, 20%);
         @include box-shadow($shadow);
       }
     }
-    @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+    @include transition(unquote("border-color ease-in-out .15s, box-shadow ease-in-out .15s"));
   }
   .dropdown-menu { // Also see navbar.less
     > .active > a {
@@ -60,7 +68,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;
       }
     }
     .divider {
@@ -78,7 +86,7 @@
       }
       & a {
         &:active small {
-          color: rgba($color-pf-white, 0.5) !important;
+          color: fade($color-pf-white, 50%) !important;
         }
         &:hover,
         &:focus {

data/dist/sass/patternfly/_bootstrap-slider.scss

@@ -0,0 +1,66 @@
+//
+// Bootstrap slider
+// --------------------------------------------------
+// https://github.com/seiyria/bootstrap-slider
+
+
+// Overwrites and fixes to Bootstrap slider
+
+// https //github.com/seiyria/bootstrap-slider/issues/797
+.slider-tick-label-container {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 0!important;
+}
+
+.slider-tick-label {
+  width: auto !important;
+}
+
+.slider {
+  .tooltip {
+    top: -10px;
+  }
+}
+.slider-track {
+  background-color: $color-pf-black-200;
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1), 0 0px 2px $color-pf-black-200;
+  border: 1px solid $color-pf-black-400;
+}
+
+.slider-selection {
+  @include gradient-vertical($slider-secondary-top, $slider-secondary-bottom);
+}
+
+.slider-handle {
+  width: $slider-line-height;
+  height: $slider-line-height;
+  border: 1px solid $color-pf-black-400; //THIS!
+}
+
+.slider-tick {
+  background-color: transparent !important;
+  background-image:
+    radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 2px, transparent 2px) !important;
+  @include box-shadow(none);
+}
+
+
+// Styles to create the pf slider
+.slider-pf {
+  display: flex;
+  align-items: center;
+
+  * {
+    margin-right: 10px;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  .slider {
+    width: auto;
+    flex: 1 1 100%;
+  }
+}

data/{assets/stylesheets → dist/sass}/patternfly/_bootstrap-switch.scss

@@ -11,7 +11,7 @@
   }
   .#{$bootstrap-switch-base}-label {
     background: $bootstrap-switch-bg-color;
-    box-shadow: 0 0 2px rgba($color-pf-black, 0.4);
+    box-shadow: 0 0 2px rgba($color-pf-black, (40/100));
     @include gradient-vertical($bootstrap-switch-bg-color-start, $bootstrap-switch-bg-color-stop);
     position: relative;
     z-index: 9;

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

@@ -3,9 +3,9 @@
 // --------------------------------------------------
 
 .btn {
-  @include box-shadow(0 2px 3px rgba($color-pf-black, 0.1));
+  @include box-shadow(0 2px 3px rgba($color-pf-black, (10/100)));
   &: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)));
   }
   &.disabled,
   &[disabled],

data/{assets/stylesheets → dist/sass}/patternfly/_card-view.scss

@@ -86,7 +86,7 @@
   }
   &.card-pf-view-select {
     position: relative;
-    &:hover { @include box-shadow(0 1px 6px rgba($color-pf-black, 0.35)); }
+    &:hover { @include box-shadow(0 1px 6px rgba($color-pf-black, (35/100))); }
     &.active { border: 2px solid $card-pf-selected-border-color; }
   }
   &.card-pf-view-single-select { cursor: pointer; }

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

@@ -5,7 +5,7 @@
 .card-pf {
   background: $card-pf-bg-color;
   border-top: 2px solid $card-pf-border-top-color;
-  @include box-shadow(0 1px 1px rgba($color-pf-black, 0.175));
+  @include box-shadow(0 1px 1px fade($color-pf-black, 17.5%));
   margin: 0 (-($grid-gutter-width / 4)) ($grid-gutter-width / 2);
   padding: 0 ($grid-gutter-width / 2);
   &.card-pf-accented {
@@ -90,7 +90,7 @@
 .card-pf-footer {
   background-color: $card-pf-footer-bg-color;
   border-top: 1px solid $card-pf-border-color;
-  margin: 0 (-($grid-gutter-width / 2)) !important;
+  margin: 0 (-($grid-gutter-width / 2) !important);
   padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 4);
   a > {
     .fa,

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

@@ -95,3 +95,31 @@
     stroke-width: 1px;
   }
 }
+
+.pct-donut-chart-pf {
+
+  .pct-donut-chart-pf-label {
+    display: block;
+  }
+
+  &.pct-donut-chart-pf-left,
+  &.pct-donut-chart-pf-right,
+  .pct-donut-chart-pf-left,
+  .pct-donut-chart-pf-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.pct-donut-chart-pf-left,
+  &.pct-donut-chart-pf-right {
+    display: inline-flex;
+  }
+
+  &.pct-donut-chart-pf-left,
+  .pct-donut-chart-pf-left {
+    flex-direction: row-reverse;
+  }
+}
+

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

@@ -2,6 +2,7 @@
 // Close icons
 // --------------------------------------------------
 
+//this should no longer be needed and be replaced with pficon-close. This is here for legacy. For further info see https://github.com/patternfly/patternfly/pull/781
 
 .close {
   text-shadow: none;

data/dist/sass/patternfly/_color-variables.scss

@@ -0,0 +1,85 @@
+$color-pf-black-100:             #fafafa !default;
+$color-pf-black-150:             #f5f5f5 !default;
+$color-pf-black-200:             #ededed !default;
+$color-pf-black-300:             #d1d1d1 !default;
+$color-pf-black-400:             #bbb !default;
+$color-pf-black-500:             #8b8d8f !default;
+$color-pf-black-600:             #72767b !default;
+$color-pf-black-700:             #4d5258 !default;
+$color-pf-black-800:             #393f44 !default;
+$color-pf-black-900:             #292e34 !default;
+$color-pf-blue-25:               #edf8ff !default;
+$color-pf-blue-50:               #def3ff !default;
+$color-pf-blue-100:              #bee1f4 !default;
+$color-pf-blue-200:              #7dc3e8 !default;
+$color-pf-blue-300:              #39a5dc !default;
+$color-pf-blue-400:              #0088ce !default;
+$color-pf-blue-500:              #00659c !default;
+$color-pf-blue-600:              #004368 !default;
+$color-pf-blue-700:              #002235 !default;
+$color-pf-cyan-100:              #bedee1 !default;
+$color-pf-cyan-200:              #7dbdc3 !default;
+$color-pf-cyan-300:              #3a9ca6 !default;
+$color-pf-cyan-400:              #007a87 !default;
+$color-pf-cyan-500:              #005c66 !default;
+$color-pf-cyan-600:              #003d44 !default;
+$color-pf-cyan-700:              #001f22 !default;
+$color-pf-gold-100:              #fbeabc !default;
+$color-pf-gold-200:              #f9d67a !default;
+$color-pf-gold-300:              #f5c12e !default;
+$color-pf-gold-400:              #f0ab00 !default;
+$color-pf-gold-500:              #b58100 !default;
+$color-pf-gold-600:              #795600 !default;
+$color-pf-gold-700:              #3d2c00 !default;
+$color-pf-green-100:             #cfe7cd !default;
+$color-pf-green-200:             #9ecf99 !default;
+$color-pf-green-300:             #6ec664 !default;
+$color-pf-green-400:             #3f9c35 !default;
+$color-pf-green-500:             #2d7623 !default;
+$color-pf-green-600:             #1e4f18 !default;
+$color-pf-green-700:             #0f280d !default;
+$color-pf-light-blue-100:        #beedf9 !default;
+$color-pf-light-blue-200:        #7cdbf3 !default;
+$color-pf-light-blue-300:        #35caed !default;
+$color-pf-light-blue-400:        #00b9e4 !default;
+$color-pf-light-blue-500:        #008bad !default;
+$color-pf-light-blue-600:        #005c73 !default;
+$color-pf-light-blue-700:        #002d39 !default;
+$color-pf-light-green-100:       #e4f5bc !default;
+$color-pf-light-green-200:       #c8eb79 !default;
+$color-pf-light-green-300:       #ace12e !default;
+$color-pf-light-green-400:       #92d400 !default;
+$color-pf-light-green-500:       #6ca100 !default;
+$color-pf-light-green-600:       #486b00 !default;
+$color-pf-light-green-700:       #253600 !default;
+$color-pf-orange-100:            #fbdebf !default;
+$color-pf-orange-200:            #f7bd7f !default;
+$color-pf-orange-300:            #f39d3c !default;
+$color-pf-orange-400:            #ec7a08 !default;
+$color-pf-orange-500:            #b35c00 !default;
+$color-pf-orange-600:            #773d00 !default;
+$color-pf-orange-700:            #3b1f00 !default;
+$color-pf-purple-100:            #c7bfff !default;
+$color-pf-purple-200:            #a18fff !default;
+$color-pf-purple-300:            #8461f7 !default;
+$color-pf-purple-400:            #703fec !default;
+$color-pf-purple-500:            #582fc0 !default;
+$color-pf-purple-600:            #40199a !default;
+$color-pf-purple-700:            #1f0066 !default;
+$color-pf-red-100:               #cc0000 !default;
+$color-pf-red-200:               #a30000 !default;
+$color-pf-red-300:               #8b0000 !default;
+$color-pf-red-400:               #470000 !default;
+$color-pf-red-500:               #2c0000 !default;
+
+$color-pf-black:                 #030303 !default;
+$color-pf-blue:                  $color-pf-blue-400 !default;
+$color-pf-cyan:                  $color-pf-cyan-400 !default;
+$color-pf-gold:                  $color-pf-gold-400 !default;
+$color-pf-green:                 $color-pf-green-400 !default;
+$color-pf-light-blue:            $color-pf-light-blue-400 !default;
+$color-pf-light-green:           $color-pf-light-green-400 !default;
+$color-pf-orange:                $color-pf-orange-400 !default;
+$color-pf-purple:                $color-pf-purple-400 !default;
+$color-pf-red:                   $color-pf-red-100 !default;
+$color-pf-white:                 #fff !default;

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

@@ -22,7 +22,7 @@
   background-color: $dropdown-bg;
   border: 1px solid $dropdown-border;
   border-radius: $border-radius-base;
-  @include box-shadow(0 6px 12px rgba($color-pf-black, 0.175));
+  @include box-shadow(0 6px 12px fade($color-pf-black, 17.5%));
   background-clip: padding-box;
   list-style: none;
   margin: -1px 0 0 0;
@@ -117,7 +117,7 @@
         width: 31px;
         &:hover,
         &:focus {
-          @include reset-filter;
+          @include reset-filter();
         }
       }
       &.last > span {
@@ -127,7 +127,7 @@
         background: $color-pf-black-150;
         border-left-color: $color-pf-black-200;
         border-right-color: $color-pf-black-200;
-        @include reset-filter;
+        @include reset-filter();
       }
     }
   }
@@ -139,7 +139,7 @@
     text-align: right;
     .paginate_input {
       border: 1px solid $color-pf-black-300;
-      @include box-shadow(inset 0 1px 1px rgba($color-pf-black, 0.075));
+      @include box-shadow(inset 0 1px 1px fade($color-pf-black, 7.5%));
       font-size: $font-size-base;
       font-weight: 600;
       height: 19px;
@@ -174,7 +174,7 @@
 
 // Not in use with latest example: May be used with column reordering?
 .DTCR_clonedTable {
-  background-color: rgba($color-pf-white, 0.7);
+  background-color: rgba($color-pf-white, (70/100));
   z-index: 202;
 }
 

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

@@ -29,6 +29,11 @@
   }
 }
 
+// Bootstrap removes the focus ring on dropdowns; this replaces it for better accessibility
+.dropdown-toggle:focus {
+  @include tab-focus();
+}
+
 // The dropdown menu (ul)
 .dropdown-menu {
   // Dividers (basically an hr) within the dropdown
@@ -49,13 +54,13 @@
   &:hover,
   &:focus {
     border-color: $dropdown-link-hover-border-color;
-    @include reset-filter;
+    @include reset-filter();
   }
   &:active {
     background-color: $dropdown-link-focus-bg;
     border-color: $dropdown-link-active-border-color;
     color: $dropdown-link-focus-color !important;
-    @include reset-filter;
+    @include reset-filter();
   }
 }
 
@@ -66,7 +71,7 @@
   &:focus {
     background-color: $dropdown-link-active-bg !important;
     border-color: $dropdown-link-active-border-color !important;
-    @include reset-filter;
+    @include reset-filter();
   }
 }
 
@@ -85,7 +90,7 @@
   border-color: $dropdown-link-active-border-color;
   color: $color-pf-white;
   small {
-    color: rgba($color-pf-white, 0.5);
+    color: rgba($color-pf-white, (50/100));
   }
 }
 

data/dist/sass/patternfly/_experimental-features.scss

@@ -0,0 +1,48 @@
+.experimental-pf > * {
+  border: 2px solid $color-pf-light-green-400;
+}
+
+.experimental-pf-bar {
+  background-color: $color-pf-light-green-400;
+  border: none;
+  text-align: center;
+  position: relative;
+}
+
+.experimental-pf-more-info {
+  background-color: $color-pf-light-green-400;
+  border: 0;
+  color: $color-pf-black;
+  display: block;
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: static;
+  @media (min-width: $screen-md-min) {
+    padding: 0 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+  }
+}
+
+.experimental-pf-text {
+  @media (min-width: $screen-md-min) {
+    padding-left: 150px;
+    padding-right: 150px;
+  }
+
+  a {
+    color: $color-pf-black;
+    text-decoration: underline;
+    &:hover {
+      color: $color-pf-black;
+      cursor: pointer;
+    }
+  }
+}
+
+.btn-experimental-pf {
+  @include button-variant($btn-default-color, $color-pf-light-green-400, $color-pf-light-green-300, $color-pf-light-green-400, $color-pf-light-green-400);
+}