docs/src/components/CloudDeployURLGenerationForm/styles.module.scss - master - alt3rmann/graphql-engine

docs/src/components/CloudDeployURLGenerationForm/styles.module.scss

140 строк3 KB

Aaysha

Documentation for One Click Deploy to Hasura

07 фев 2023, 11:36

07 фев 2023, 11:361add19e

.form-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 5px;
  background: var(--ifm-color-emphasis-100);

  div {
    display: flex;
    flex-direction: column;
    margin: 10px;

    label {
      font-weight: var(--ifm-font-weight-bold);
    }

    input {
      border: none;
      border-radius: 6px;
      font-size: 1.1rem;
      padding: 0.75rem;
      font-family: var(--ifm-font-family-base);
      color: var(--color-gray-74);
      margin-top: 1rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--ifm-global-shadow-lw);
      width: 100%;

      &::placeholder {
        color: var(--color-gray-36);
      }
    }
  }

  small {
    color: var(--ifm-color-emphasis-800);
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
}

.button-container {
  display: flex;
  flex-direction: row !important;
  margin-left: auto;
  gap: 1rem;
  justify-content: end;
  align-self: end;
  align-content: flex-end;

  button {
    width: 150px;
    background: var(--ifm-color-primary);
    color: white;
    font-weight: 500;
    font-size: 16px;
    font-family: var(--ifm-font-family-base);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;

    &:hover {
      background: var(--ifm-color-primary-dark);
    }
  }

  button:first-child {
    background: var(--ifm-color-emphasis-600);

    &:hover {
      background: var(--ifm-color-emphasis-700);
    }
  }

  @media (max-width: 768px) {
    flex-direction: column !important;
    gap: 0.5rem;
    width: 100%;
    margin: 0.5rem;
    padding: 0.5rem;
    align-self: center;

    button {
      width: 100%;
    }
  }
}

.code-block {
  max-height: 0;
  overflow: hidden;
  transition: ease-in-out 0.3s;
  background: var(--ifm-color-primary);
  border-radius: 5px;

  code {
    display: grid;
    place-items: center center;
    border-radius: 5px;
    padding: 0.75rem;
    height: 70px;
    white-space: nowrap;
    overflow-x: scroll;
    margin: 0.5rem;
  }

  p {
    color: white;
    margin: 0.5rem;
  }
}

html[data-theme='dark'] {
  .form-container {
    background-color: var(--color-gray-82);
  }

  .form-container div input {
    background-color: var(--color-gray-74);
    color: var(--color-gray-20);
  }

  .button-container {
    button {
      &:hover {
        background: var(--ifm-color-primary-darker);
      }
    }

    button:first-child {
      background: var(--ifm-color-emphasis-800);
      color: var(--color-gray-60);

      &:hover {
        background: var(--ifm-color-emphasis-700);
      }
    }
  }
}