patternfly-sass 3.45.3 → 3.46.0

data/dist/sass/rcue/_wizard.scss

@@ -0,0 +1,576 @@
+//
+// Wizard
+// --------------------------------------------------
+.wizard-pf {
+  padding: 10px;
+  margin: 0 auto;
+  max-height: 900px;
+  width: auto;
+  .modal-content {
+    min-height:100%;
+  }
+}
+
+// Wizard header
+// Top section of the wizard w/ title and dismiss
+
+.wizard-pf-body {
+    background:$color-pf-white;
+    padding: 0;
+    position: static;
+}
+/* styles the sidebard containing the sub-steps */
+.wizard-pf-sidebar {
+    background: $color-pf-black-100;
+    border-right: 1px solid $color-pf-black-300;
+    display:none;
+  @media (min-width: $screen-sm-min) {
+    display:inherit;
+    flex:0 0 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .list-group {
+      border-top: 0;
+      margin-bottom: 0;
+    }
+      .list-group-item {
+        background-color: transparent;
+        border-color: $color-pf-black-200;
+        padding: 0;
+        > a {
+          color: $color-pf-black;
+          cursor: pointer;
+          display: block;
+          font-size: 14px;
+          font-weight: 700;
+          height: 50px;
+          outline: 0;
+          padding-top: 11px;
+          padding-left: 20px;
+          position: relative;
+          white-space: nowrap;
+          width: 14em;
+          &:hover {
+            text-decoration: none;
+            background-color: $color-pf-black-200;
+          }
+          &:focus {
+            //corrects odd behavior when hover and focus are combined.
+            text-decoration: none;
+            span {
+              text-decoration: underline;
+            }
+          }
+        }
+        &.active {
+          background-color: $color-pf-black-200;
+
+          //override default behavior
+          &:hover {
+            border-color: $color-pf-black-200;
+          }
+          > a {
+            color: $color-pf-blue-300;
+            cursor: default;
+          }
+          // line to left side showing active substep
+          > a:before {
+            content: " ";
+            background: $color-pf-blue-300;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 3px;
+          }
+          // caret to right showing active substep
+          > a:after {
+            color: $color-pf-blue-300;
+            content: "\f105"; // right caret
+            display: block;
+            font-family: FontAwesome;
+            font-size: 24px;
+            font-weight: 500;
+            line-height: 30px;
+            padding-top: 10px;
+            position: absolute;
+            right: 23px;
+            top: 0;
+          }
+        }
+      }
+    }
+}
+.wizard-pf-substep-number {
+  display:inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+  width: 25px;
+}
+.wizard-pf-substep-title {
+  display:inline-block;
+  margin-right: 5px;
+  text-align: left;
+  vertical-align: middle;
+}
+/* styles the steps indicator across the top of the wizard */
+.wizard-pf-steps {
+  border-bottom: solid 1px $color-pf-black-300;
+    @media (min-width: $screen-sm-min) {
+      text-align: center;
+    }
+}
+
+.wizard-pf-steps-indicator {
+  background: $color-pf-black-200;
+  border-top: 1px solid $color-pf-black-300;
+  display: inline-block;
+  display: flex;
+  font-size: ceil(($font-size-base * 1.3333));
+  list-style: none;
+  margin-bottom: 0;
+  padding: 15px 0;
+    @media (min-width: $screen-sm-min) {
+      background: $color-pf-white;
+      height: 120px;
+      padding: 38px 0 0;
+      justify-content: space-around;
+    }
+
+  li {
+    counter-increment: section;
+    float:left; /* float for IE9 since it doesn't support flex. If items wrap, they overlap */
+    flex-grow: 1;
+    flex-basis: 0;
+    line-height: 15px;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-align: center;
+    &:not(.active) {
+      display: none;
+      @media (min-width: $screen-sm-min) {
+        display: block;
+      }
+    }
+    a {
+        align-items: center;
+        display: flex;
+        flex-wrap:wrap;
+        font-weight: 700;
+        @media (min-width: $screen-sm-min) {
+          font-weight: normal;
+          justify-content: center;
+        }
+          .wizard-pf-step-title {
+            margin-left: 10px;
+            @media(min-width: $screen-sm-min) {
+              margin-left: 0;
+            }
+
+            &-substep {
+              font-weight: normal;
+              margin-left: 10px;
+              text-transform: capitalize;
+              &:before {
+                content:"\00BB";
+                font-size: 20px;
+                margin-right: 10px;
+              }
+              &:not(.active) {
+                display: none;
+              }
+            }
+          }
+    }
+    /* draw the line between the circles */
+    @media (min-width: $screen-sm-min) {
+      .wizard-pf-step-title-substep {
+        display: none;
+      }
+      &:before {
+        background-color: $color-pf-black-400;
+        content: "";
+        height: 2px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before
+        //otherwise, use top: calc(50% - 1px);
+      }
+      /* don't draw the line between the circles on the ends */
+      &:first-child:before {
+        left: 50%;
+        right: 0;
+      }
+      &:last-child:before {
+        left: 0;
+        right: 50%;
+      }
+      &:only-of-type:before {
+        background-color: transparent;
+      }
+    }
+    a {
+      color: $color-pf-black;
+      cursor: pointer;
+      font-size: 16px;
+      margin-left:1em;
+      margin-right:1em;
+      text-decoration: none;
+      &:hover {
+        .wizard-pf-step-number {
+          background-color: $color-pf-black-400;
+          border-color: $color-pf-black-400;
+          color: $color-pf-white;
+        }
+      }
+    }
+}
+  /* draw the step number in the circle */
+
+  .wizard-pf-step-number {
+    background-color: $color-pf-white;
+    border-radius: 50%;
+    border: solid 2px $color-pf-black-400;
+    color: $color-pf-black-400;
+    font-size: $font-size-base;
+    font-weight: 700;
+    height: 25px;
+    line-height: 22px;
+      @media (min-width: $screen-sm-min) {
+        left: unquote("calc(50% - 13px)");
+        position: absolute;
+        top: 27px;
+      }
+    width: 25px;
+  }
+  .active .wizard-pf-step-number {
+    background-color: $color-pf-blue-300;
+    border-color: $color-pf-blue-300;
+    cursor: default;
+    color: $color-pf-white;
+  }
+
+  .viewed-pf .wizard-pf-step-number {
+    color: $color-pf-black;
+    background-color: $color-pf-white;
+    border-color: $color-pf-blue-300;
+  }
+
+}
+
+/* styles the main content portion of the wizard */
+.wizard-pf-main {
+  height: 100%;
+  padding:1em;
+  vertical-align: top;
+  width:100%;
+  @media (min-width: $screen-sm-min) {
+    overflow: auto;
+    padding:3em;
+    flex:1 1 auto;
+  }
+  .blank-slate-pf {
+    background-color: transparent;
+    border: none;
+    left: 0;
+    right: 0;
+  }
+}
+
+.wizard-pf-contents textarea {
+  resize: vertical;
+}
+
+/* styles the content of a review page */
+.wizard-pf-review-steps {
+  list-style: none;
+  .list-group, .list-group-item {
+    border: none;
+    margin-bottom: 0;
+  }
+  > ul {
+    > li {
+      float: left;
+      line-height: 15px;
+      margin: 0;
+      padding-top: 0;
+      position: relative;
+      width: 100%;
+      > a {
+        color: #030303;
+        cursor: pointer;
+        font-size: 16px;
+        padding-left: 30px;
+        padding-right: 5px;
+        text-decoration: none;
+        transition: 250ms;
+        &:before {
+          content: "\f107";
+          display: block;
+          font-family: FontAwesome;
+          font-size: 24px;
+          font-weight: 500;
+          left: 20px;
+          position: absolute;
+          top: 0;
+        }
+        &.collapsed {
+          &:before {
+            content: "\f105";
+          }
+        }
+      }
+    }
+  }
+}
+
+.wizard-pf-review-substeps {
+  padding-left: 22px;
+  > ul {
+    > li {
+      float: left;
+      line-height: 15px;
+      margin: 0;
+      position: relative;
+      width: 100%;
+      a {
+        color: #030303;
+        cursor: pointer;
+        font-size: 16px;
+        padding-left: 30px;
+        padding-right: 5px;
+        text-decoration: none;
+        transition: 250ms;
+        &:before {
+          content: "\f107";
+          display: block;
+          font-family: FontAwesome;
+          font-size: 24px;
+          font-weight: 500;
+          left: 20px;
+          position: absolute;
+          top: 10px;
+        }
+        &.collapsed {
+          &:before {
+            content: "\f105";
+          }
+        }
+      }
+    }
+  }
+}
+
+.wizard-pf-review-content {
+  padding-top: 10px;
+  padding-left: 40px;
+  .wizard-pf-review-item {
+    padding: 5px 0;
+    &.sub-item {
+      margin-left: 10px;
+    }
+    .wizard-pf-review-item-label {
+      font-weight: 700;
+      padding-right: 10px;
+    }
+    .wizard-pf-review-item-field {
+      font-weight: 700;
+      margin: 5px 0;
+      padding-right: 10px;
+      &:first-of-type {
+        margin-top: 0;
+      }
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      &.sub-field {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+.wizard-pf-success-icon {
+  color: $color-pf-green-400;
+  font-size: ($font-size-base * 5.6);
+  line-height: ($font-size-base * 5.6);
+}
+
+/* styles the footer */
+.wizard-pf-footer {
+  background:$color-pf-white;
+  border-top: 1px solid $color-pf-black-300;
+  margin-top: 0;
+  padding-bottom: 17px;
+  .btn-cancel {
+    margin-right:25px;
+  }
+}
+
+.wizard-pf-row {
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      width:100%;
+      height: 900px;
+      max-height: 65vh;
+    }
+}
+
+// Scale up the modal
+@media (min-width: $screen-md-min) {
+  // increasing space around modal for larger viewports
+  .wizard-pf {
+    padding: 30px 0;
+    width: 900px;
+  }
+  // increasing width of sidebar for larger viewports
+  .wizard-pf-sidebar .list-group-item > a {
+    width: 18em;
+  }
+}
+
+//
+//
+// This is for the new wizard that is more robust on mobile.
+// --------------------------------------------------
+
+.wizard-pf-steps-alt, .wizard-pf-steps-alt ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.wizard-pf-steps-alt {
+  margin-left: 15px;
+  margin-top: 15px;
+  background-image: linear-gradient(to right, transparent 11px, $color-pf-black-300 11px, $color-pf-black-300 13px, transparent 13px);
+  @media (min-width: $screen-sm-min) {
+    display:none;
+  }
+  &-indicator {
+    position: relative;
+    // caret to top showing active substep
+    &:after {
+      color: $color-pf-black-700;
+      content: "\f107"; // top caret
+      display: block;
+      font-family: FontAwesome;
+      font-size: 24px;
+      font-weight: 500;
+      position: absolute;
+      right: 17px;
+      top: 50%;
+      transform:translateY(-50%);
+      @media (min-width: $screen-sm-min) {
+        display:none;
+      }
+    }
+    &.active {
+      &:after {
+        content: "\f106";
+      }
+    }
+  }//indicator
+}//.wizard-pf-steps-alt
+
+.wizard-pf-step-alt {
+  margin-bottom: 10px;
+  a {
+    display:flex;
+    flex:1;
+    &:hover {
+      text-decoration: none;
+      .wizard-pf-step-alt-title {
+        color: $color-pf-blue-300;
+      }
+    }
+  }
+  ul {
+    margin-left: 11px;
+  }
+  .wizard-pf-step-alt-title {
+    margin-left: 5px;
+    align-self:center;
+  }
+  .wizard-pf-step-alt-number {
+    flex:0 0 auto;
+  }
+
+  &.active {
+    .wizard-pf-step-alt-number {
+      background-color: $color-pf-blue-300;
+      border-color: $color-pf-blue-300;
+      cursor: default;
+      color: $color-pf-white;
+    }
+    .wizard-pf-step-alt-title {
+      color: $color-pf-blue-300;
+    }
+    .wizard-pf-step-alt-substep:first-of-type {
+      margin-top: 2px; // gives proper spacing below number in circle active state
+    }
+
+
+  }
+  &.viewed {
+    .wizard-pf-step-alt-number {
+      color: $color-pf-black;
+      background-color: $color-pf-white;
+      border-color: $color-pf-blue-300;
+    }
+  }
+
+}//.wizard-pf-step-alt
+
+.wizard-pf-step-alt-number {
+  background-color: $color-pf-white;
+  border-radius: 50%;
+  border: solid 2px $color-pf-black-400;
+  color: $color-pf-black-400;
+  font-size: $font-size-base;
+  font-weight: 700;
+  height: 24px;
+  width: 24px;
+  display: inline-block;
+  text-align: center;
+}
+
+
+.wizard-pf-step-alt-title {
+  color: $color-pf-black;
+  font-weight: 700;
+  text-transform: capitalize;
+  display:inline-block;
+
+}//.wizard-pf-steps-alt-title
+
+.wizard-pf-step-alt-substep {
+    display:flex;
+  a {
+    padding:5px 0 5px 18px;
+    color: $color-pf-black-800;
+  }
+
+&:not(.disabled) {
+  &.active, &:hover {
+    background-color: $color-pf-black-200;
+    background-image: linear-gradient(to right, $color-pf-blue-300 2px, transparent 2px);
+    a {
+      color:$color-pf-blue-300;
+    }
+  }
+}
+  &.active {
+    a {
+      font-weight:700;
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    a {
+      pointer-events: none;
+    }
+  }
+}