patternfly-sass 3.45.3 → 3.46.0

data/dist/sass/rcue/_list-view-dnd.scss

@@ -0,0 +1,53 @@
+//
+// List View Drag and Drop
+// See: https://github.com/marceljuenemann/angular-drag-and-drop-lists
+// --------------------------------------------------
+
+.list-view-pf-dnd {
+  // Override dnd styles
+  .dndDragging {
+    &.drag-original {
+      display: none;
+      // Show when dragging original list items
+      .list-view-pf-dnd-original-items {
+        display: block;
+      }
+    }
+    // Show dragable list items during move operation
+    .list-view-pf-dnd-drag-items {
+      display: inline-block;
+    }
+    // Hide original list items during dnd move operation
+    .list-view-pf-dnd-original-items {
+      display: none;
+    }
+  }
+  // Override dnd placeholder element for dragging list items to
+  .dndPlaceholder {
+    background-color: $color-pf-black-200;
+    padding: 20px 0;
+  }
+  // A handle decoration shown to left of each list items row
+  .list-group-item-header {
+    margin-left: -10px;
+    &:before {
+      background-image: linear-gradient(to bottom, $color-pf-blue-400 60%, $color-pf-white 0%);
+      background-position: left;
+      background-repeat: repeat-y;
+      background-size: 2px 5px;
+      border: 4px solid $color-pf-blue-400;
+      border-color: $color-pf-blue-500;
+      content: "";
+      height: 55px;
+      left: 4px;
+      position: absolute;
+      top: 5px;
+      width: 10px;
+    }
+  }
+}
+
+// Always hide dragable list items until shown during dnd move operation
+.list-view-pf-dnd-drag-items {
+  display: none;
+}

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

@@ -0,0 +1,304 @@
+//
+// List View
+// --------------------------------------------------
+
+
+.list-view-pf {
+  .list-group-item {
+    align-items: flex-start;
+    background-clip: padding-box;
+    border-color: transparent #fff;
+    border-style: solid;
+    border-width: 1px;
+    @include clearfix(); //IE9 fallback
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 0;
+    padding-top: 0;
+    &.list-view-pf-expand-active {
+      background-color: $list-view-hover-bg;
+      box-shadow: 0 2px 6px rgba(3, 3, 3, .2);
+      z-index: 1;
+    }
+    &.active {
+      color: $list-group-link-color;
+      background-color: $list-view-active-bg;
+      background-clip: border-box;
+      border-color: $list-view-active-border transparent transparent;
+      z-index:auto;
+    }
+    &:hover {
+      background-color: $list-view-hover-bg;
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    &.list-view-pf-expand-active {
+      border: solid 1px $list-view-active-border;
+      &:first-child {
+        border-top-color: $list-view-active-border;
+      }
+    }
+    &:first-child {
+      border-top: 1px solid transparent;
+    }
+    @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 * .8);
+      font-weight: 400;
+    }
+    @media (min-width: $screen-md-min) {
+      flex:     1 0 unquote("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: unquote("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) {
+      flex:     1 0 auto; // it covers whats left from the title
+      float: left; // IE9 fallback
+      margin: 0 $grid-gutter-width 0 0;
+      width: unquote("calc(75% - 40px)") // IE9 fallback
+    }
+  }
+  .close {
+    float: none;
+    position: absolute;
+    right: 15px;
+  }
+}
+.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);
+  order: 2;
+  button,
+  > a,
+  .dropdown-kebab-pf {
+    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
+  flex:     1;
+  min-width: 0;
+  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: 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 {
+  flex:     1 0 50%;
+  .list-view-pf-stacked & {
+    display: block;
+    flex: none; // Fix FF
+  }
+  @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;
+      &:before {
+        display: block;
+        line-height: 26px;
+      }
+    }
+    &.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: flex;
+  flex: 1;
+  min-width: 0;
+  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;
+  }
+}
+.list-view-pf-view {
+  background: $list-group-top-border;
+  border: none;
+  margin-top: 30px;
+}
+.list-group-item-header {
+  box-sizing: content-box;
+  cursor: pointer;
+  margin: 0 -15px;
+  padding: 0 15px; //filling the width of the list item
+  width: 100%;
+}
+.list-view-pf-expand {
+  cursor: pointer;
+  float: left; //IE9 fallback
+  margin-bottom: ($grid-gutter-width/2);
+  margin-right: 2px;
+  margin-top: ($grid-gutter-width/2);
+  padding: 3px 0;
+  &.active,
+  &:hover {
+    color: $link-color;
+  }
+  .list-view-pf-additional-info-item & {
+    margin: 0;
+    padding: 0;
+  }
+  .fa-angle-right {
+    cursor: pointer;
+    font-size: ($font-size-large+3);
+    margin-right: 5px;
+    margin-top: 2px;
+    width: 10px;
+  }
+}
+.list-group-item-container {
+  background: #fff;
+  border-top: solid 1px $list-view-active-border;
+  box-sizing: content-box;
+  margin: -1px -15px 0;
+  order: 3;
+  padding: 15px;
+  position: relative;
+  width: 100%;
+}

data/dist/sass/rcue/_login.scss

@@ -0,0 +1,334 @@
+//
+// Login
+// --------------------------------------------------
+
+.login-pf {
+  height: 100%;
+  background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0;
+  background-size: auto;
+  @media (min-width: $screen-sm-min) {
+    background-size: 100% auto;
+  }
+  #brand {
+    position: relative;
+    top: -70px;
+    img {
+      display: block;
+      height: 18px;
+      margin: 0 auto;
+      max-width: 100%;
+      @media (min-width: $screen-sm-min) {
+        margin: 0;
+        text-align: left;
+      }
+    }
+  }
+  #badge {
+    display: block;
+    margin: 20px auto 70px;
+    position: relative;
+    text-align: center;
+    @media (min-width: $screen-sm-min) {
+      float: right;
+      margin-right: 64px;
+      margin-top: 50px;
+    }
+  }
+  body {
+    background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0;
+    background-size: auto;
+    @media (min-width: $screen-sm-min) {
+      background-size: 100% auto;
+    }
+  }
+  .container {
+    background-color: $login-container-bg-color-rgba;
+    clear: right;
+    color: $color-pf-white;
+    padding-bottom: 40px;
+    padding-top: 20px;
+    width: auto;
+    @media (min-width: $screen-sm-min) {
+      bottom: 13%;
+      padding-left: 80px;
+      position: absolute;
+      width: 100%;
+    }
+    .details {
+      p:first-child {
+        border-top: 1px solid rgba($color-pf-white, (30/100));
+        padding-top: 25px;
+        margin-top: 25px;
+      }
+      @media (min-width: $screen-sm-min) {
+        p:first-child {
+          border-top: 0;
+          padding-top: 0;
+          margin-top: 0;
+        }
+        border-left: 1px solid rgba($color-pf-white, (30/100));
+        padding-left: 40px;
+      }
+      p {
+        margin-bottom: 2px;
+      }
+    }
+    .form-horizontal {
+      .control-label {
+        font-size: ($font-size-base + 1);
+        font-weight: 400;
+        text-align: left;
+      }
+      .form-group:last-child {
+        &,
+        .help-block:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    .help-block {
+      color: $color-pf-white;
+    }
+    .login {
+      @media (min-width: $screen-sm-min) {
+        padding-right: 40px;
+      }
+    }
+    .submit {
+      text-align: right;
+    }
+  }
+}
+
+//
+// Login
+// The following styles are for the new login
+// --------------------------------------------------
+.login-pf-page {
+  .login-pf-brand {
+    margin-top: $login-pf-brand-margin-top;
+    max-width:360px;
+    width: 70%;
+    @media (min-width: $screen-sm-min) {
+      margin-top: $login-pf-brand-desktop-margin-top;
+    }
+  }
+  .login-pf-page-header {
+    margin-bottom: $login-pf-page-header-margin-bottom;
+      @media (min-width: $screen-sm-min) {
+        margin-bottom: $login-pf-page-header-desktop-margin-bottom;
+      }
+    text-align: center;
+    p {
+      color: $color-pf-white;
+      font-size: $font-size-large;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: $login-pf-page-header-paragraph-margin-top;
+    }
+  }
+  .card-pf {
+    padding: $login-pf-card-pf-padding;
+    margin-bottom: 0;
+    @media (min-width: $screen-sm-min) {
+      padding: $login-pf-card-pf-desktop-padding;
+    }
+    p {
+      color: $color-pf-black-600;
+    }
+  }
+  .form-control {
+    height: ceil(($input-height-base + 10px ));
+  }
+  .checkbox-label {
+    color: $color-pf-black-600;
+    font-weight: 300;
+    margin-bottom: $login-pf-checkbox-label-margin-bottom;
+    @media (min-width: $screen-sm-min) {
+      margin: 0;
+    }
+  }
+  .btn-primary {
+    margin-top: $login-pf-btn-primary-margin-top;
+  }
+  .login-pf-header {
+    margin-bottom: $login-pf-header-margin-bottom;
+    @media (min-width: $screen-sm-min) {
+      margin-bottom:$login-pf-header-desktop-margin-bottom;
+    }
+    display:flex;
+    flex-direction: column;
+    h1, p {
+      text-align: center;
+    }
+    h1 {
+      font-size: $font-size-h3;
+      @media (min-width: $screen-sm-min) {
+        font-size: $font-size-h1;
+      }
+    }
+    //this is ugly but neccessary to get the desired style :(
+    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+      width: auto;
+      align-self: flex-end;
+      .dropdown-toggle {
+        color: $color-pf-black-700;
+        background: none;
+        padding:0 $login-pf-dropdown-toggle-padding-right 0 0;
+        font-weight: 300;
+        &:not(:focus) {
+          box-shadow: none;
+          border: 1px solid transparent;
+        }
+          .caret {
+            right: 0;
+          }
+      }
+    }
+  }
+  .login-pf-signup {
+    margin: $login-pf-signup-margin-top 0 0;
+    font-size: ceil(($font-size-base * 1.25));
+    text-align: center;
+    a {
+      margin-left: $login-pf-signup-a-margin-left;
+    }
+  }
+  .login-pf-settings {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .login-pf-page-footer {
+    display: flex;
+    justify-content: center;
+    flex-wrap:wrap;
+    &-links {
+      display: flex;
+      margin: $login-pf-page-footer-links-margin-top 0 0 0;
+        li:not(:last-of-type) {
+          position: relative;
+          margin: 0 $login-pf-page-footer-links-li-margin-right 0 0;
+            &:after {
+              content:".";
+              color: $color-pf-white;
+              position: absolute;
+              top: 0px;
+              right: -10px;
+            }
+        }
+    }
+    &-link {
+      color: $color-pf-white;
+      font-size: $font-size-large;
+    }
+    &-sso-services {
+      flex: 1 0 100%;
+      margin-top: $login-pf-page-footer-sso-margin-top;
+      text-align: center;
+      color: $color-pf-white;
+      &-logos {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        justify-content: center;
+          li {
+            margin: 0 $login-pf-page-footer-sso-logos-li-margin $login-pf-page-footer-sso-logos-li-margin;
+          }
+      }
+    }
+  }//login-pf-footer
+
+
+  // The following styles are for the login page with different account options
+  // --------------------------------------------------------------------------
+
+  &.login-pf-page-accounts {
+    margin-left: $login-pf-page-accounts-margin;
+    margin-right: $login-pf-page-accounts-margin;
+  }
+  .login-pf-accounts {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .login-pf-header, .login-pf-signup {
+      flex-basis: 100%;
+    }
+    max-width: $login-pf-card-pf-max-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .login-pf-social-section {
+    flex-basis: 100%;
+    padding:0;
+    @media (min-width: $screen-sm-min) {
+    flex:0 1 50%;
+    max-width:50%;// this is for IE10/11 that doesn't consider padding with box-sizing on flex-children.
+    }
+    @media (min-width: $screen-sm-min) {
+      &:first-of-type {
+        padding-right: $login-pf-accounts-section-heading-desktop-padding-right;
+      }
+      &:last-of-type {
+        padding-left: ceil(($login-pf-accounts-section-heading-desktop-padding-left - 1px));
+        border-left: 1px solid $color-pf-black-300;
+      }
+    }
+  }//social-section
+  .login-pf-social {
+    margin: $login-pf-social-margin;
+    @media (min-width: $screen-sm-min) {
+      margin: 0;
+      &-double-col {
+        flex-wrap: wrap;
+        display: flex;
+        justify-content: space-between;
+        .login-pf-social-link {
+          flex-basis: 48%;
+        }
+      }
+    }
+
+    &:not(.login-pf-social-all) {
+      .login-pf-social-link-more {
+        display: none;
+      }
+    }
+
+    &-link {
+        margin-bottom: $login-pf-accounts-link-margin-bottom;
+      a {
+        display: block;
+        padding: $login-pf-accounts-link-a-padding 0;
+        font-size: $font-size-large;
+        background: $color-pf-black-150;
+        text-align: center;
+        color: $color-pf-black-600;
+          img {
+            margin: 0 $login-pf-accounts-link-img-margin-right 0 0;
+            width: 20px;
+            height: 20px;
+          }
+          &:hover {
+            text-decoration: none;
+            background: $color-pf-black-200;
+          }
+      }
+    }
+    &-toggle {
+      float: right;
+      padding: 0;
+      .caret {
+        margin-left: $login-pf-accounts-more-caret-margin-left;
+      }
+      &-active {
+        .caret {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+
+}//login-pf-page