patternfly-sass 3.45.3 → 3.46.0

data/dist/sass/rcue/_infotip.scss

@@ -0,0 +1,145 @@
+//
+// Info Tip
+// --------------------------------------------------
+
+// Overwrites for navbar.less
+.navbar-nav > li > .dropdown-menu.infotip {
+  border-top-width: 1px !important;
+  margin-top: $popover-arrow-width;
+}
+
+// Overwrites for PatternFly - navbar.less
+@media (max-width: $grid-float-breakpoint-max) {
+  .navbar-pf .navbar-nav .open .dropdown-menu.infotip {
+    background-color: $color-pf-white !important;
+    margin-top: 0;
+  }
+}
+
+// Extends "dropdown-menu"
+.infotip {
+  min-width: 235px;
+  padding: 0;
+  .list-group {
+    border-top: 0;
+    margin: 0;
+    padding: 8px 0;
+    .list-group-item {
+      border: none;
+      margin: 0 15px 0 34px;
+      padding: 5px 0;
+      > .i {
+        color: $gray-pf;
+        font-size: 13px;
+        left: -20px;
+        position: absolute;
+        top: 8px;
+      }
+      > a {
+        color: $gray-pf;
+        line-height: 13px;
+      }
+      > .close {
+        float: right;
+      }
+    }
+  }
+  .footer {
+    background-color: $color-pf-black-150;
+    padding: 6px 15px;
+    a:hover {
+      color: $link-color;
+    }
+  }
+}
+
+// Arrows (Copy from popovers.less)
+//
+// .arrow is outer, .arrow:after is inner
+
+.infotip .arrow {
+  &,
+  &:after {
+    border-color: transparent;
+    border-style: solid;
+    display: block;
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+}
+.infotip .arrow {
+  border-width: $popover-arrow-outer-width;
+}
+.infotip .arrow:after {
+  border-width: $popover-arrow-width;
+  content: "";
+}
+
+.infotip {
+  &.bottom .arrow,
+  &.bottom-left .arrow,
+  &.bottom-right .arrow {
+    border-bottom-color: $popover-arrow-outer-color;
+    border-top-width: 0;
+    left: 50%;
+    margin-left: -$popover-arrow-outer-width;
+    top: -$popover-arrow-outer-width;
+    &:after {
+      border-top-width: 0;
+      border-bottom-color: $popover-arrow-color;
+      content: " ";
+      margin-left: -$popover-arrow-width;
+      top: 1px;
+    }
+  }
+  &.bottom-left .arrow {
+    left: 20%;
+  }
+  // Default:
+  &.bottom-right .arrow {
+    left: 80%;
+  }
+  &.top .arrow {
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-outer-color;
+    bottom: -$popover-arrow-outer-width;
+    left: 50%;
+    margin-left: -$popover-arrow-outer-width;
+    &:after {
+      border-bottom-width: 0;
+      border-top-color: $color-pf-black-150;
+      bottom: 1px;
+      content: " ";
+      margin-left: -$popover-arrow-width;
+    }
+  }
+  &.right .arrow {
+    border-left-width: 0;
+    border-right-color: $popover-arrow-outer-color;
+    left: -$popover-arrow-outer-width;
+    margin-top: -$popover-arrow-outer-width;
+    top: 50%;
+    &:after {
+      bottom: -$popover-arrow-width;
+      border-left-width: 0;
+      border-right-color: $popover-arrow-color;
+      content: " ";
+      left: 1px;
+    }
+  }
+  &.left .arrow {
+    border-left-color: $popover-arrow-outer-color;
+    border-right-width: 0;
+    margin-top: -$popover-arrow-outer-width;
+    right: -$popover-arrow-outer-width;
+    top: 50%;
+    &:after {
+      border-left-color: $popover-arrow-color;
+      border-right-width: 0;
+      bottom: -$popover-arrow-width;
+      content: " ";
+      right: 1px;
+    }
+  }
+}

data/dist/sass/rcue/_labels.scss

@@ -0,0 +1,17 @@
+//
+// Labels
+// --------------------------------------------------
+
+.label {
+  border-radius: 0;
+  font-size: 100%;
+  font-weight: 600;
+  h1 &,
+  h2 &,
+  h3 &,
+  h4 &,
+  h5 &,
+  h6 & {
+    font-size: 75%;
+  }
+}

data/dist/sass/rcue/_layouts.scss

@@ -0,0 +1,140 @@
+//
+// Layouts
+// --------------------------------------------------
+.layout-pf {
+  &,
+  & body {
+    min-height: 100%;
+  }
+  &.layout-pf-fixed {
+    &.transitions .container-pf-nav-pf-vertical {
+      transition: $flyout-transition-pf;
+    }
+    body {
+      padding-top: $navbar-pf-height; // make space for the navbar
+    }
+    .navbar-pf {
+      left: 0;
+      position: fixed;
+      top:0;
+      right: 0;
+      z-index: 1030;
+    }
+    .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 {
+          margin-left: 0;
+        }
+      }
+      &.hidden-nav {
+        margin-left: 0; // remove space as left nav is hidden
+      }
+      &.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;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.layout-pf-fixed-with-footer {
+    body {
+      padding-bottom: $footer-pf-height;
+    }
+  }
+}
+.layout-pf-alt {
+  &,
+  & body {
+    min-height: 100%;
+  }
+  &.layout-pf-alt-fixed {
+    &.layout-pf-alt-fixed-inner-scroll {
+      &,
+      & body {
+        height: 100%;
+        min-height: 0;
+      }
+      .container-pf-alt-nav-pf-vertical-alt {
+        height: 100%;
+        overflow: auto;
+        &.container-cards-pf {
+          margin-top: 0;
+          padding-top: ($grid-gutter-width/2);
+        }
+      }
+    }
+    &.transitions .container-pf-alt-nav-pf-vertical-alt {
+      transition: $flyout-transition-pf;
+    }
+    body {
+      padding-top: $navbar-pf-alt-height; // make space for the navbar
+    }
+    .container-pf-alt-nav-pf-vertical-alt {
+      margin-left: ($nav-pf-vertical-alt-width);
+      &.collapsed-nav {
+        margin-left: ($nav-pf-vertical-alt-collapsed-width); // adjust space for the collapsed left nav
+      }
+      &.hidden-nav {
+        margin-left: 0; // remove space as left nav is hidden
+      }
+    }
+  }
+  &.layout-pf-alt-fixed-with-footer {
+    body {
+      padding-bottom: $footer-pf-alt-height;
+    }
+  }
+}

data/dist/sass/rcue/_links.scss

@@ -0,0 +1,5 @@
+a.disabled {
+  color: $color-pf-black-500;
+  cursor: $cursor-disabled;
+  text-decoration: none;
+}

data/dist/sass/rcue/_list-group.scss

@@ -0,0 +1,18 @@
+//
+// List groups
+// --------------------------------------------------
+
+.list-group {
+  border-top: 1px solid $list-group-top-border;
+  .list-group-item:first-child {
+    border-top: 0;
+  }
+}
+.list-group-item {
+  border-left: 0;
+  border-right: 0;
+}
+
+.list-group-item-heading {
+  font-weight: 600;
+}

data/dist/sass/rcue/_list-pf.scss

@@ -0,0 +1,177 @@
+//
+// PatternFly List
+// --------------------------------------------------
+
+.list-pf {
+  border-bottom: 1px solid $list-pf-border-color;
+}
+
+.list-pf-item {
+  border-color: $list-pf-border-color;
+  border-left-color: $color-pf-white;
+  border-right-color: $color-pf-white;
+  border-style: solid;
+  border-width: 1px;
+  border-bottom: none;
+  &:hover {
+    background-color: $list-pf-hover-background-color;
+  }
+  &.active {
+    background-color: $list-pf-header-background-color;
+    border-color: $list-pf-active-border-color;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+}
+
+.list-pf-expansion {
+  background-color: $color-pf-white;
+}
+
+.list-pf-container {
+  align-items: flex-start;
+  display: flex;
+  padding: $list-pf-padding;
+  .list-pf-expansion & {
+    border-top: 1px solid $list-pf-active-border-color;
+  }
+  // when wide enough, if the list is not stacked, then center items vertically
+  @media (min-width: $screen-md-min) {
+    .list-pf:not(.list-pf-stacked) & {
+      align-items: center;
+    }
+  }
+}
+
+.list-pf-chevron {
+  min-width: 1.2em; // ensures that the width does not shift when the chevron is sideways
+}
+
+.list-pf-chevron,
+.list-pf-select {
+  margin-right: 10px;
+  //add the divider line if there is a chevron or a select
+  + .list-pf-content {
+    border-left: 1px solid $color-pf-black-300;
+    padding-left: ($grid-gutter-width/2);
+  }
+  .fa {
+    font-size: 22px;
+  }
+}
+
+// add this class to manage flexed contents in the list item content
+.list-pf-content-flex {
+  align-items: flex-start;
+  display:flex;
+  flex-grow: 1;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  min-width: 0;
+  // when wide enough, if the list is not stacked, then center items vertically
+  @media (min-width: $screen-md-min) {
+    .list-pf:not(.list-pf-stacked) & {
+      align-items: center;
+    }
+  }
+}
+
+.list-pf-left {
+  flex-grow: 0;
+  margin-left: 0;
+  margin-right: ($grid-gutter-width/2);
+}
+.list-pf-icon {
+  align-items: center;
+  display:flex;
+  justify-content: center;
+}
+.list-pf-icon-bordered {
+  border-radius: 50%;
+  border: 2px solid $list-view-accented-border;
+}
+.list-pf-icon-small {
+  font-size: 1.4em;
+  height: 30px;
+  line-height: 30px;
+  width: 30px;
+}
+
+
+.list-pf-content-wrapper {
+  align-items: center;
+  display:flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+  // when at larger breakpoints, don't stack the contents and add some space between the children
+  @media (min-width: $screen-md-min) {
+    flex-wrap: nowrap;
+    & > * + * {
+      margin-left: $grid-gutter-width;
+    }
+  }
+  // if the list is stacked, then align the contents to the top
+  .list-pf-stacked & {
+    align-items: flex-start;
+  }
+
+}
+
+.list-pf-main-content {
+  align-items: center;
+  display: flex;
+  flex-basis: $list-pf-main-content-width;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+// at larger breakpoints, if the list is not stacked, then don't wrap the main contents and add some space between them
+.list-pf:not(.list-pf-stacked) .list-pf-main-content {
+  @media (min-width: $screen-md-min) {
+      flex-wrap: nowrap;
+      width: auto;
+      & > * + * {
+        margin-left: $grid-gutter-width;
+      }
+  }
+}
+
+// Title and description are break-word wrapped; add .text-overflow-pf to truncate and ellipse instead
+.list-pf-title {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 100%;
+  font-weight: bold;
+  min-width: 0;
+  word-wrap: break-word;
+}
+.list-pf-description {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 100%;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.list-pf-additional-content {
+  display: flex;
+  flex-basis: ((100% - $list-pf-main-content-width) + 1%); // this adjusts the proportions but adding up to > 100% allows for proper wrapping
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.list-pf-actions {
+  display: flex;
+  align-items: flex-start;
+  flex-grow: 0;
+  margin-left: $grid-gutter-width;
+  //by default, space contents apart
+  & > * + * {
+    margin-left: ($grid-gutter-width / 4);
+  }
+
+}