symphony-integration-commons/components/SetupInstructions/styles/styles.less

Common components for 3rd party developers build the user facing application for Symphony Integrations.

.setup-instructions {
  display: block;
  width: 90%;
  max-height: 4.375rem;
  padding: 0 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(180, 180, 180, 0.4);
  border-radius: 0.125rem;
  box-sizing: border-box;
  transition: max-height 1s ease;

  h1 {
    margin: 0 0 0.3125rem 0;
    padding: 0;
  }

  .setup-instructions-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4.375rem;

    .show-hide-instructions {
      width: 1.25rem;
      height: 3.75rem;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer; 
    }
  }

  .setup-instructions-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 3.75rem;

    &.wrap {
      justify-content: center;
      height: 4.375rem;

      p { margin: 0; }
    }

    p {
      margin-bottom: 1.25rem;
      line-height: 1.313rem;
    }
  }

}

.dark, .dark-contrast {
  .setup-instructions {
      h1, p, i {
        color: #fff;
      }
    }
}

.light, .light-contrast {
  .setup-instructions {
      h1, p, i {
        color: #000;
      }
    }
}