patternfly-sass 3.11.0 → 3.12.0

data/spec/html/card-view-multi-select.html

@@ -157,11 +157,9 @@
                   <div class="input-group-btn">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                     <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
-                      <li role="separator" class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li class="selected"><a href="#">Name</a></li>
+                      <li><a href="#">Type</a></li>
+                      <li><a href="#">Color</a></li>
                     </ul>
                   </div><!-- /btn-group -->
                   <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -171,11 +169,9 @@
                 <div class="dropdown btn-group">
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                   <ul class="dropdown-menu">
-                    <li><a href="#">Action</a></li>
-                    <li><a href="#">Another action</a></li>
-                    <li><a href="#">Something else here</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a href="#">Separated link</a></li>
+                    <li class="selected"><a href="#">Name</a></li>
+                    <li><a href="#">Type</a></li>
+                    <li><a href="#">Last Modified</a></li>
                   </ul>
                 </div>
                 <button class="btn btn-link" type="button">
@@ -257,21 +253,7 @@
           </div><!-- /col -->
         </div><!-- /row -->
       </div><!-- /container -->
-      <script>
-      (function($) {
-        $(document).ready(function() {
-          // Upon clicking the find button, show the find dropdown content
-          $(".btn-find").click(function () {
-            $(".find-pf-dropdown-container").toggle();
-          });
-          // Upon clicking the find close button, hide the find dropdown content
-          $(".btn-find-close").click(function () {
-            $(".find-pf-dropdown-container").hide();
-          });
 
-        });
-      })(jQuery);
-    </script>
 <div class="container-fluid container-cards-pf">
   <div class="row row-cards-pf">
     <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">

data/spec/html/card-view-single-select.html

@@ -157,11 +157,9 @@
                   <div class="input-group-btn">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                     <ul class="dropdown-menu">
-                      <li><a href="#">Action</a></li>
-                      <li><a href="#">Another action</a></li>
-                      <li><a href="#">Something else here</a></li>
-                      <li role="separator" class="divider"></li>
-                      <li><a href="#">Separated link</a></li>
+                      <li class="selected"><a href="#">Name</a></li>
+                      <li><a href="#">Type</a></li>
+                      <li><a href="#">Color</a></li>
                     </ul>
                   </div><!-- /btn-group -->
                   <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
@@ -171,11 +169,9 @@
                 <div class="dropdown btn-group">
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                   <ul class="dropdown-menu">
-                    <li><a href="#">Action</a></li>
-                    <li><a href="#">Another action</a></li>
-                    <li><a href="#">Something else here</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a href="#">Separated link</a></li>
+                    <li class="selected"><a href="#">Name</a></li>
+                    <li><a href="#">Type</a></li>
+                    <li><a href="#">Last Modified</a></li>
                   </ul>
                 </div>
                 <button class="btn btn-link" type="button">
@@ -257,21 +253,7 @@
           </div><!-- /col -->
         </div><!-- /row -->
       </div><!-- /container -->
-      <script>
-      (function($) {
-        $(document).ready(function() {
-          // Upon clicking the find button, show the find dropdown content
-          $(".btn-find").click(function () {
-            $(".find-pf-dropdown-container").toggle();
-          });
-          // Upon clicking the find close button, hide the find dropdown content
-          $(".btn-find-close").click(function () {
-            $(".find-pf-dropdown-container").hide();
-          });
 
-        });
-      })(jQuery);
-    </script>
 <div class="container-fluid container-cards-pf">
   <div class="row row-cards-pf">
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

data/spec/html/cards.html

@@ -753,6 +753,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -781,6 +782,7 @@
         Last 30 Days <span class="caret"></span>
       </button>
       <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li class="selected"><a href="#">Last 30 Days</a></li>
         <li><a href="#">Last 60 Days</a></li>
         <li><a href="#">Last 90 Days</a></li>
       </ul>
@@ -811,6 +813,7 @@
                   Last 30 Days <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li class="selected"><a href="#">Last 30 Days</a></li>
                   <li><a href="#">Last 60 Days</a></li>
                   <li><a href="#">Last 90 Days</a></li>
                 </ul>

data/spec/html/dist/css/patternfly-additions.css

@@ -1143,7 +1143,6 @@ select.selectpicker {
   display: inline-block;
   top: 0;
   border-radius: 1px;
-  -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
 .bootstrap-switch .bootstrap-switch-handle-on,
@@ -2263,6 +2262,7 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   background: transparent;
   border-bottom: 1px solid transparent !important;
   border-top: 1px solid transparent !important;
+  cursor: default !important;
   margin-bottom: 0;
   overflow: hidden;
   padding: 0 10px;
@@ -2270,13 +2270,12 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   white-space: nowrap;
 }
 .treeview .list-group-item:hover {
-  background: #def3ff !important;
-  border-color: #bee1f4 !important;
+  background: none !important;
 }
 .treeview .list-group-item.node-selected {
-  background: #0088ce !important;
-  border-color: #0088ce !important;
-  color: #fff !important;
+  background: none !important;
+  border-color: transparent !important;
+  color: inherit !important;
 }
 .treeview .list-group-item.node-check-changed span.node-icon,
 .treeview .list-group-item.node-check-changed span.text {
@@ -2294,6 +2293,9 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
 .treeview span.icon.check-icon {
   margin-right: 10px;
 }
+.treeview span.icon.expand-icon {
+  cursor: pointer !important;
+}
 .treeview span.image {
   background-repeat: no-repeat;
   background-size: contain;
@@ -2311,9 +2313,27 @@ fieldset[disabled] .combobox-container .input-group-addon.active {
   color: #d1d1d1;
   cursor: not-allowed;
 }
+.treeview .node-disabled span.expand-icon {
+  cursor: default !important;
+}
 .treeview .node-hidden {
   display: none;
 }
+.treeview-pf-hover .list-group-item {
+  cursor: pointer !important;
+}
+.treeview-pf-hover .list-group-item:hover {
+  background-color: #def3ff !important;
+  border-color: #bee1f4 !important;
+}
+.treeview-pf-select .list-group-item {
+  cursor: pointer !important;
+}
+.treeview-pf-select .list-group-item.node-selected {
+  background: #0088ce !important;
+  border-color: #0088ce !important;
+  color: #fff !important;
+}
 .card-pf {
   background: #fff;
   border-top: 2px solid transparent;
@@ -3424,12 +3444,16 @@ a.disabled {
   text-decoration: none;
 }
 .list-view-pf .list-group-item {
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-flex;
+  -ms-flex-align: start;
+      align-items: flex-start;
+  background-clip: padding-box;
+  border-color: transparent #fff;
+  border-style: solid;
+  border-width: 1px;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   padding-bottom: 0;
   padding-top: 0;
 }
@@ -3441,20 +3465,34 @@ a.disabled {
 .list-view-pf .list-group-item:after {
   clear: both;
 }
+.list-view-pf .list-group-item.list-view-pf-expand-active {
+  background-color: #ededed;
+}
 .list-view-pf .list-group-item.active {
   color: #555;
   background-color: #def3ff;
+  background-clip: border-box;
+  border-color: #39a5dc transparent transparent;
   z-index: auto;
 }
 .list-view-pf .list-group-item:hover {
   background-color: #ededed;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.list-view-pf .list-group-item.list-view-pf-expand-active {
+  border: solid 1px #39a5dc;
+}
+.list-view-pf .list-group-item.list-view-pf-expand-active:first-child {
+  border-top-color: #39a5dc;
+}
+.list-view-pf .list-group-item:first-child {
+  border-top: 1px solid transparent;
 }
 @media (min-width: 992px) {
   .list-view-pf .list-group-item {
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-                -ms-grid-row-align: center;
-            align-items: center;
+    -ms-flex-align: center;
+        align-items: center;
   }
 }
 .list-view-pf .list-group-item-heading {
@@ -3467,9 +3505,8 @@ a.disabled {
 }
 @media (min-width: 992px) {
   .list-view-pf .list-group-item-heading {
-    -webkit-flex: 1 0 calc(25% - 20px);
-        -ms-flex: 1 0 calc(25% - 20px);
-            flex: 1 0 calc(25% - 20px);
+    -ms-flex: 1 0 calc(25% - 20px);
+        flex: 1 0 calc(25% - 20px);
     float: left;
     font-size: 12px;
     margin: 0 20px 0 0;
@@ -3485,9 +3522,8 @@ a.disabled {
 }
 @media (min-width: 992px) {
   .list-view-pf .list-group-item-text {
-    -webkit-flex: 1 0 auto;
-        -ms-flex: 1 0 auto;
-            flex: 1 0 auto;
+    -ms-flex: 1 0 auto;
+        flex: 1 0 auto;
     float: left;
     margin: 0 40px 0 0;
     width: calc(75% - 40px);
@@ -3498,44 +3534,36 @@ a.disabled {
   margin-bottom: 20px;
   margin-left: 20px;
   margin-top: 20px;
-  -webkit-order: 2;
-      -ms-flex-order: 2;
-          order: 2;
+  -ms-flex-order: 2;
+      order: 2;
 }
 .list-view-pf-actions button,
 .list-view-pf-actions > a {
   margin-left: 10px;
 }
 .list-view-pf-top-align .list-view-pf-actions {
-  -webkit-align-self: flex-start;
-      -ms-flex-item-align: start;
-          align-self: flex-start;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
 }
 .list-view-pf-additional-info {
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-flex;
+  -ms-flex-align: center;
+      align-items: center;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 @media (min-width: 992px) {
   .list-view-pf-additional-info {
-    -webkit-flex: 1 0 auto;
-        -ms-flex: 1 0 auto;
-            flex: 1 0 auto;
+    -ms-flex: 1 0 auto;
+        flex: 1 0 auto;
     float: left;
     width: 50%;
   }
 }
 .list-view-pf-additional-info-item {
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-              -ms-grid-row-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   display: inline-block;
   margin-right: 20px;
   max-width: 100%;
@@ -3543,16 +3571,14 @@ a.disabled {
 }
 @supports (display: flex) {
   .list-view-pf-additional-info-item {
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 }
 .list-view-pf-additional-info-item.list-view-pf-additional-info-item-stacked {
   text-align: center;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+      flex-direction: column;
 }
 .list-view-pf-additional-info-item.list-view-pf-additional-info-item-stacked strong {
   font-size: 13px;
@@ -3575,29 +3601,23 @@ a.disabled {
   width: 60px;
 }
 .list-view-pf-body {
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-              -ms-grid-row-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   display: table-cell;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+      flex: 1;
   min-width: 0;
   vertical-align: top;
   width: 100%;
 }
 @media (min-width: 992px) {
   .list-view-pf-body {
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-flex;
+    -ms-flex-align: center;
+        align-items: center;
     display: -ms-flexbox;
     display: flex;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
+    -ms-flex-direction: row;
+        flex-direction: row;
   }
 }
 .list-view-pf-checkbox {
@@ -3609,24 +3629,20 @@ a.disabled {
   padding: 3px 10px 3px 0;
 }
 .list-view-pf-top-align .list-view-pf-checkbox {
-  -webkit-align-self: flex-start;
-      -ms-flex-item-align: start;
-          align-self: flex-start;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
 }
 .list-view-pf-description {
-  -webkit-flex: 1 0 50%;
-      -ms-flex: 1 0 50%;
-          flex: 1 0 50%;
+  -ms-flex: 1 0 50%;
+      flex: 1 0 50%;
 }
 .list-view-pf-stacked .list-view-pf-description {
   display: block;
 }
 @media (min-width: 992px) {
   .list-view-pf-description {
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-flex;
+    -ms-flex-align: center;
+        align-items: center;
     display: -ms-flexbox;
     display: flex;
     float: left;
@@ -3701,31 +3717,24 @@ a.disabled {
   color: #ec7a08;
 }
 .list-view-pf-main-info {
-  -webkit-align-items: flex-start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-flex;
+  -ms-flex-align: start;
+      align-items: flex-start;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -ms-flex: 1;
+      flex: 1;
   min-width: 0;
   padding-bottom: 20px;
   padding-top: 20px;
 }
 @media (min-width: 992px) {
   .list-view-pf-main-info {
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-                -ms-grid-row-align: center;
-            align-items: center;
+    -ms-flex-align: center;
+        align-items: center;
   }
   .list-view-pf-top-align .list-view-pf-main-info {
-    -webkit-align-items: flex-start;
-        -ms-flex-align: start;
-                -ms-grid-row-align: flex-start;
-            align-items: flex-start;
+    -ms-flex-align: start;
+        align-items: flex-start;
   }
 }
 .list-view-pf-stacked .list-group-item-heading {
@@ -3741,8 +3750,51 @@ a.disabled {
   width: auto;
 }
 .list-view-pf-view {
+  background: #ededed;
+  border: none;
   margin-top: 30px;
 }
+.list-group-item-header {
+  box-sizing: content-box;
+  cursor: pointer;
+  margin: 0 -15px;
+  padding: 0 15px;
+  width: 100%;
+}
+.list-view-pf-expand {
+  cursor: pointer;
+  float: left;
+  margin-bottom: 20px;
+  margin-right: 2px;
+  margin-top: 20px;
+  padding: 3px 0;
+}
+.list-view-pf-expand.active,
+.list-view-pf-expand:hover {
+  color: #0088ce;
+}
+.list-view-pf-additional-info-item .list-view-pf-expand {
+  margin: 0;
+  padding: 0;
+}
+.list-view-pf-expand .fa-angle-right {
+  cursor: pointer;
+  font-size: 17px;
+  margin-right: 5px;
+  margin-top: 2px;
+  width: 10px;
+}
+.list-group-item-container {
+  background: #fff;
+  border-top: solid 1px #39a5dc;
+  box-sizing: content-box;
+  margin: -1px -15px 0;
+  -ms-flex-order: 3;
+      order: 3;
+  padding: 10px 15px;
+  position: relative;
+  width: 100%;
+}
 .login-pf {
   height: 100%;
 }
@@ -5118,29 +5170,16 @@ a.disabled {
     margin-top: 5px;
   }
 }
-@-webkit-keyframes rotation {
-  from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
-  }
-}
 @keyframes rotation {
   from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
+    transform: rotate(359deg);
   }
 }
 .spinner {
-  -webkit-animation: rotation 600ms infinite linear;
-          animation: rotation 600ms infinite linear;
+  animation: rotation 600ms infinite linear;
   border-bottom: 4px solid rgba(3, 3, 3, 0.25);
   border-left: 4px solid rgba(3, 3, 3, 0.25);
   border-right: 4px solid rgba(3, 3, 3, 0.25);
@@ -5465,7 +5504,7 @@ a.disabled {
   background: #fff;
   border: solid 1px #bbb;
   display: none;
-  left: -200px;
+  right: -20px;
   padding: 5px;
   position: absolute;
   top: 35px;
@@ -5488,15 +5527,19 @@ a.disabled {
   border-bottom: 11px solid #bbb;
   border-left: 11px solid transparent;
   border-right: 11px solid transparent;
-  left: 215px;
+  right: 35px;
   top: -12px;
 }
+.toolbar-pf-find:last-child .find-pf-dropdown-container:before {
+  right: 15px;
+}
 @media (max-width: 768px) {
   .find-pf-dropdown-container:before {
     border-bottom: 11px solid transparent;
     border-right: 11px solid #bbb;
     border-top: 11px solid transparent;
     left: -22px;
+    right: initial;
     top: 8px;
   }
 }
@@ -5504,15 +5547,19 @@ a.disabled {
   border-bottom: 10px solid #fff;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  left: 216px;
+  right: 36px;
   top: -10px;
 }
+.toolbar-pf-find:last-child .find-pf-dropdown-container:after {
+  right: 16px;
+}
 @media (max-width: 768px) {
   .find-pf-dropdown-container:after {
     border-bottom: 10px solid transparent;
     border-right: 10px solid #fff;
     border-top: 10px solid transparent;
     left: -20px;
+    right: initial;
     top: 9px;
   }
 }
@@ -6371,21 +6418,30 @@ a.disabled {
 .nav-pf-vertical.transitions .nav-pf-tertiary-nav {
   transition: visibility 100ms, opacity 100ms linear;
 }
+.wizard-pf {
+  height: 100%;
+  margin: 0 auto;
+  max-height: 900px;
+  padding: 10px;
+  width: auto;
+}
+.wizard-pf .modal-content {
+  height: 100%;
+}
 .wizard-pf-body {
   padding: 0;
+  position: static;
 }
 /* styles the sidebard containing the sub-steps */
 .wizard-pf-sidebar {
   background: #fafafa;
   border-right: 1px solid #d1d1d1;
   bottom: 0;
-  display: table-cell;
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  position: relative;
+  position: absolute;
   top: 0;
-  vertical-align: top;
 }
 .wizard-pf-sidebar .list-group {
   border-top: 0;
@@ -6408,7 +6464,7 @@ a.disabled {
   padding-left: 20px;
   position: relative;
   white-space: nowrap;
-  width: 18em;
+  width: 14em;
 }
 .wizard-pf-sidebar .list-group-item > a:hover {
   text-decoration: none;
@@ -6466,16 +6522,14 @@ a.disabled {
   font-size: 16px;
   display: inline-block;
   height: 120px;
-  -webkit-justify-content: space-around;
-      -ms-flex-pack: distribute;
-          justify-content: space-around;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
   list-style: none;
   padding: 38px 0 0;
   /* draw the step number in the circle */
 }
 @supports (display: flex) {
   .wizard-pf-steps-indicator {
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
@@ -6484,12 +6538,10 @@ a.disabled {
   counter-increment: section;
   float: left;
   /* float for IE9 since it doesn't support flex. If items wrap, they overlap */
-  -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-          flex-basis: 0;
+  -ms-flex-positive: 1;
+      flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+      flex-basis: 0;
   line-height: 15px;
   margin: 0;
   padding: 0;
@@ -6558,10 +6610,12 @@ a.disabled {
 }
 /* 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;
   vertical-align: top;
-  width: 10000px;
 }
 .wizard-pf-main .blank-slate-pf {
   background-color: transparent;
@@ -6676,9 +6730,31 @@ a.disabled {
 /* styles the footer */
 .wizard-pf-footer {
   border-top: 1px solid #d1d1d1;
+  bottom: 0;
+  left: 0;
   margin-top: 0;
   padding-bottom: 17px;
+  position: absolute;
+  right: 0;
 }
 .wizard-pf-footer .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: 992px) {
+  .wizard-pf {
+    padding: 30px 0;
+    width: 900px;
+  }
+  .wizard-pf-sidebar .list-group-item > a {
+    width: 18em;
+  }
 }