patternfly-sass 3.45.3 → 3.46.0

data/dist/sass/rcue/_notifications-drawer.scss

@@ -0,0 +1,249 @@
+//
+// Notifications Drawer
+// --------------------------------------------------
+
+
+.drawer-pf {
+  background-color: $color-pf-black-100;
+  border: 1px solid $card-pf-border-color;
+  @include box-shadow(0 6px 12px rgba($color-pf-black, (17.5/100)));
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  width: 320px;
+  z-index: 2;
+  .panel {
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+  }
+  .panel-group .panel-heading + .panel-collapse .panel-body {
+    border-top: none;
+    border-bottom: 1px solid $card-pf-border-color;
+    padding: 0;
+  }
+  .panel-counter {
+    display: block;
+    font-style: italic;
+    line-height: 1.2;
+    padding-left: 18px;
+    padding-top: 5px;
+  }
+  .panel-heading { border-bottom: 1px solid $card-pf-border-color; }
+  .panel-group {
+    bottom: 0;
+    margin-bottom: 0;
+    position: absolute;
+    top: 25px; // Height of Notifications Drawer box.
+    width: 100%;
+  }
+  .panel-title a {
+    cursor: pointer;
+    display: block;
+  }
+  &.drawer-pf-expanded {
+    @media (max-width: $screen-xs-max) {
+      left:0;
+      width: 100%;
+    }
+    @media (min-width: $screen-xs-max) {
+      left: 270px;
+    } // if the drawer is expanded and the screen is reduced this ensures it switches to full width on smaller screens.
+    width: inherit;
+    .drawer-pf-toggle-expand:before {
+      content: "\f101";
+    }
+  }
+  .blank-slate-pf {
+    border: 0;
+    margin-bottom: 0;
+    padding: 30px;
+
+    .blank-slate-pf-icon {
+      font-size: 3em;
+      line-height: 1em;
+    }
+
+    h1 {
+      font-size: 1em;
+      margin-bottom: 0;
+      margin-top: 15px;
+    }
+  }
+}
+.drawer-pf-close, .drawer-pf-toggle-expand {
+  color: $gray-darker;
+  cursor: pointer;
+  line-height: inherit;
+  padding: 2px 10px;
+  position: absolute;
+  &:hover,
+  &:focus {
+    color: $color-pf-blue-400;
+    text-decoration: none;
+  }
+}
+.drawer-pf-toggle-expand {
+  left: 0;
+  &:before {
+    content: "\f100";
+    font-family: "FontAwesome";
+  }
+  &:hover {
+    color: $link-color;
+  }
+}
+.drawer-pf-close {
+  right: 0;
+}
+
+
+.drawer-pf-action {
+  display: flex;
+  border-bottom: 1px solid $card-pf-border-color;
+
+  .btn-link {
+    color: $link-color;
+    padding: 10px 0;
+    .pficon, .fa {
+      margin-right: 3px;
+    }
+    .pficon-close {
+      position: relative;
+      top: 1px;
+    }
+
+    &:hover { color: $link-hover-color; }
+  }
+}
+
+.drawer-pf-action-link {
+  border-left: solid 1px $color-pf-black-300;
+  flex: 1 1 0%;
+  margin: 10px 0;
+  text-align: center;
+
+  &:first-of-type {
+    border-left-width: 0;
+  }
+
+  .btn-link {
+    padding: 0;
+  }
+}
+
+.drawer-pf-loading {
+  color: $gray-pf;
+  font-size: ($font-size-base + 2);
+  padding: 20px 15px;
+}
+
+.drawer-pf-notification {
+  border-bottom: 1px solid $card-pf-border-color;
+  padding: 15px;
+  .date {
+    border-right: 1px solid #aaa;
+    display: inline-block;
+    line-height: 1;
+    margin-right: 5px;
+    padding-right: 9px;
+  }
+  > .dropdown-kebab-pf {
+    margin-top: -3px;
+  }
+
+  .pficon {
+    font-size: $font-size-large;
+    margin-top: 3px;
+  }
+  &:last-of-type {
+    border-bottom: none;
+  }
+  &:hover { background-color: $color-pf-blue-50; }
+  &.unread .drawer-pf-notification-message {
+    font-weight: bold;
+    cursor: pointer;
+  }
+  &.expanded-notification {
+    .date {
+      border-right: none;
+      padding-right: 0;
+    }
+  }
+}
+
+.drawer-pf-notification-content {
+  cursor: default;
+}
+
+.drawer-pf-notification-info,
+.drawer-pf-notification-message {
+  display: block;
+  padding-left: 27px;
+  padding-right: 19px;
+  .expanded-notification & {
+    display: inline-block;
+  }
+}
+
+.drawer-pf-title {
+  background-color: $color-pf-black-100;
+  border-bottom: 1px solid $card-pf-border-color;
+  position: absolute;
+  width: 100%;
+  h3 {
+    font-size: $font-size-base;
+    margin: 0;
+    padding: 6px 15px;
+  }
+}
+
+.drawer-pf-notification.expanded-notification {
+  .drawer-pf-notification-content {
+    display: flex;
+    @media (max-width: $screen-sm-max) {
+      flex-direction: column;
+    }
+    .drawer-pf-notification-message {
+      flex: 1 1;
+    }
+  }
+}
+
+/* Exclusive styles to work with Vertical Navigation */
+.navbar-pf-vertical {
+  .drawer-pf {
+    height: unquote("calc(100vh - #{$drawer-pf-top-vertical} - 20px)");//to create a 20px offset bottom
+    top: $drawer-pf-top-vertical; //menu height;
+      @media (max-width: $screen-xs-max) {
+        width:100%;
+        height: calc(unquote("100vh - #{$drawer-pf-top-vertical}"));
+      }
+
+  }
+  .nav .drawer-pf-trigger {
+    .drawer-pf-trigger-icon {
+      border-left: 1px solid $navbar-pf-navbar-utility-border-color;
+      border-right: 1px solid $navbar-pf-navbar-utility-border-color;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    &.open .drawer-pf-trigger-icon {
+      background-color: $navbar-pf-navbar-utility-hover-bg-color;
+    }
+  }
+}
+
+/* Exclusive styles to work with Horizontal Navigation */
+.navbar-pf {
+  .drawer-pf {
+    height: unquote("calc(100vh - #{$drawer-pf-top-horizontal} - 20px)");
+    top: $drawer-pf-top-horizontal;
+    @media (max-width: $screen-xs-max) {
+      width:100%;
+      height: calc(unquote("100vh - #{$drawer-pf-top-horizontal} - 32px"));
+      top:calc(unquote("#{$drawer-pf-top-horizontal} + 8px"));
+    }
+  }
+  .drawer-pf-trigger-icon { cursor: pointer; }
+}

data/dist/sass/rcue/_pager.scss

@@ -0,0 +1,68 @@
+//
+// Pager
+// --------------------------------------------------
+
+.pager {
+  li {
+    > a,
+    > span {
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border);
+      color: $gray-pf;
+      font-weight: 600;
+      line-height: 22px;
+      padding: 2px 14px;
+      > .i {
+        font-size: 18px;
+        vertical-align: top;
+        margin: 2px 0;
+      }
+    }
+    a:active {
+      background-image: none;
+      @include box-shadow(inset 0 3px 5px rgba($color-pf-black, (12.5/100)));
+      outline: 0;
+    }
+  }
+  .disabled {
+    > a,
+    > a:hover,
+    > a:focus,
+    > a:active,
+    > span {
+      background: $pagination-bg;
+      @include box-shadow(none);
+      color: $pager-disabled-color;
+      cursor: not-allowed;
+    }
+  }
+  .next {
+     > a,
+     > span {
+       > .i {
+          margin-left: 5px;
+       }
+     }
+  }
+  .previous {
+     > a,
+     > span {
+       > .i {
+          margin-right: 5px;
+       }
+     }
+  }
+}
+
+.pager-sm {
+  li {
+    > a,
+    > span {
+      font-weight: 400;
+      line-height: 16px;
+      padding: 1px 10px;
+      > .i {
+        font-size: 12px;
+      }
+    }
+  }
+}

data/dist/sass/rcue/_pagination.scss

@@ -0,0 +1,121 @@
+//
+// Pagination
+// --------------------------------------------------
+
+.pagination {
+  > li {
+    > a,
+    > span {
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border);
+      cursor: default;
+      font-weight: 600;
+      padding: $padding-base-vertical $padding-large-horizontal;
+      > .i {
+        font-size: 15px;
+        vertical-align: top;
+        margin: 2px 0;
+      }
+    }
+  }
+  > li > a,
+  > li > span {
+    &:active {
+      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
+    }
+  }
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      background-color: $btn-default-bg;
+      border-color: $pagination-border;
+      @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100)));
+      color: $btn-default-color;
+      @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop);
+    }
+  }
+  > .disabled {
+    > span,
+    > span:hover,
+    > span:focus,
+    > a,
+    > a:hover,
+    > a:focus {
+      @include box-shadow(none);
+      cursor: not-allowed;
+      @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop);
+    }
+  }
+}
+
+.pagination-sm {
+  @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
+  > li {
+    > a,
+    > span {
+      font-weight: 400;
+      > .i {
+        font-size: 12px;
+        margin-top: 2px;
+      }
+    }
+  }
+}
+
+.content-view-pf-pagination {
+  background-color: $table-bg-accent;
+  border: 1px solid $table-border-color;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &.table-view-pf-pagination {
+    border-top: none;
+  }
+  .form-group {
+    align-items: baseline;
+    display: flex;
+    flex-grow: 1;
+    float: left; //IE9 fallback
+    @supports (display: flex) {
+      float: none;
+    }
+    margin: 5px;
+    &:last-child {
+      justify-content: flex-end; // if pagination controls wrap, pagination buttons stay on the right
+      float: right; //IE9 fallback
+      @supports (display: flex) {
+        float: none;
+      }
+    }
+    .pagination-pf-pagesize.bootstrap-select.btn-group,
+    .pagination-pf-pagesize.btn-group {
+      display: flex;
+      float: none;
+      margin-bottom: 0;
+      margin-left: 0;
+      margin-right: 5px;
+      width: auto;
+    }
+    .dropdown-menu {
+      min-width: auto;
+    }
+  }
+  .pagination-pf-page {
+    margin-left: 10px;
+    margin-right: 5px;
+    padding: 0 2px 2px;
+    text-align: right;
+    width: 2.5em;
+  }
+  .pagination {
+    display: flex;
+    margin: 0 0 0 10px;
+    a {
+      float: none;
+      @supports (display: flex) {
+        display: block;
+      }
+    }
+  }
+}

data/dist/sass/rcue/_panels.scss

@@ -0,0 +1,134 @@
+//
+// Panels
+// --------------------------------------------------
+
+.panel-title {
+  font-weight: 700;
+}
+
+//
+// Collapsable panels (aka, accordion)
+// --------------------------------------------------
+
+.panel-group {
+  .panel {
+    color: $gray-pf;
+    + .panel {
+      margin-top: -1px;
+    }
+  }
+  .panel-default {
+    border-color: $panel-default-border-color;
+    border-top-color: $panel-default-border-color;
+    .panel-heading {
+      @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop);
+      + .panel-collapse .panel-body {
+        border-top: 1px solid $panel-inner-border;
+      }
+    }
+  }
+
+  .panel-info {
+    border-color: $panel-info-border;
+    .panel-heading {
+      background-color: $panel-group-pf-info-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-info-border;
+    }
+  }
+  .panel-primary {
+    border-color: $panel-primary-border;
+    .panel-heading {
+      background-color: $panel-group-pf-primary-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-primary-border;
+    }
+    + .panel-info {
+      border-top-color: $panel-primary-border;
+    }
+  }
+  .panel-success {
+    border-color: $panel-success-border;
+    .panel-heading {
+      background-color: $panel-group-pf-success-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-success-border;
+    }
+    + .panel-info {
+      border-top-color: $panel-success-border;
+    }
+    + .panel-primary {
+      border-top-color: $panel-success-border;
+    }
+  }
+  .panel-warning {
+    border-color: $panel-warning-border;
+    .panel-heading {
+      background-color: $panel-group-pf-warning-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-warning-border;
+    }
+    + .panel-info {
+      border-top-color: $panel-warning-border;
+    }
+    + .panel-primary {
+      border-top-color: $panel-warning-border;
+    }
+    + .panel-success {
+      border-top-color: $panel-warning-border;
+    }
+  }
+  .panel-danger {
+    border-color: $panel-danger-border;
+    .panel-heading {
+      background-color: $panel-group-pf-danger-heading-bg;
+    }
+    + .panel-default {
+      border-top-color: $panel-danger-border;
+    }
+    + .panel-info {
+      border-top-color: $panel-danger-border;
+    }
+    + .panel-primary {
+      border-top-color: $panel-danger-border;
+    }
+    + .panel-success {
+      border-top-color: $panel-danger-border;
+    }
+    + .panel-warning {
+      border-top-color: $panel-danger-border;
+    }
+  }
+  .panel-title {
+    font-weight: 500;
+    line-height: 1;
+    > a {
+      color: $gray-pf;
+      font-weight: $btn-font-weight;
+      &:before {
+        content: "\f107";
+        display: inline-block;
+        font-family: $icon-font-name-fa;
+        font-size: 13px;
+        margin-right: 5px;
+        text-align: center;
+        vertical-align: 0;
+        width: 8px;
+      }
+      &:focus {
+        outline: none;
+        text-decoration: none;
+      }
+      &:hover {
+        text-decoration: none;
+      }
+      &.collapsed:before {
+        content: "\f105";
+      }
+    }
+  }
+}