web.lib.components.info-picker.info-picker.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of code-quarkus Show documentation
Customize a Web Interface to generate Quarkus starter projects.
There is a newer version: 37
@import "../_config.scss";

.info-picker {
  height: 118px;


  .base-settings {
    flex-basis: 350px;
    margin: 0 20px 0 0;
    padding: 0;
  }
  .extended-settings {
    margin: 0 0 0 20px;
    padding: 0;
  }

  @media screen and (max-width: $tabletWidth) {
    .extended-settings,
    .toggle-button {
      display: none;
    }
  }

  a.toggle-button {
    cursor: pointer;
    color: var(--topContainerTextColor);
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    svg {
      margin-right: 5px;
      color: var(--topContainerTextColor);
    }
  }

  .form {
    display: grid;
    grid-gap: 10px;
    .form-group-select {
      cursor: pointer;
      svg {
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: -1;
      }
    }
    .form-group {
      display: flex;
      flex-direction: row;
      position: relative;
      font-family: overpass,open sans,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
      border-bottom: 1px solid var(--fieldLabelAndBorderColor);

      &:focus-within {
        border-bottom: 1px solid var(--fieldLabelAndBorderHoverColor);
      }
      &.is-invalid {
        border-bottom: 1px solid var(--warningColor);
      }
      .form-group-label {
        white-space: nowrap;
        display: inline-block;
        flex-basis: 100px;
        width: 100px;
        color: var(--fieldLabelAndBorderColor);
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 8px;
        margin-bottom: 0;
        text-transform: capitalize;

        .codestart-icon {
          margin-right: 5px;
          height: 12px;
          width: 15px;
        }
      }

      .is-invalid-icon {
        position: absolute;
        right: 5px;
        top: 8px;
        color: var(--warningColor);
      }

      input.form-group-control,
      select.form-group-control {
        border: none;
        font-size: 14px;
        flex: 1;
        height: 30px;
        padding: 0 0 8px;
        background-color: transparent;
        color: var(--fieldTextColor);
        outline: none;
        font-family: var(--inputFont);
        -webkit-appearance:none;
      }

      select.form-group-control > option {
        color: var(--selectOptionsTextColor);
      }

      .code-switch-control:checked ~ .code-switch-label:after {
        content: 'Yes';
      }

      input.form-group-control:focus {
        outline: none;
      }


    }

    .form-group.code-switch {

      input {
        z-index: -1;
        opacity: 0;
        width: 0;
      }

      .code-switch-label {
        cursor: pointer;
        width: 100%;
        .code-switch-inner-label {
          display: inline-block;
          width: 100px;
        }
      }

      .code-switch-label:after {
        content: 'No';
        display: inline-block;
        color: var(--fieldTextColor);
        font-family: var(--inputFont);
        font-weight: 400;
      }

      .code-switch-control:checked ~ .code-switch-label:after {
        content: 'Yes';
      }
    }

    &.base-settings .form-group {
      .form-group-label {
      }
      .form-group-control {
      }
      input.form-group-control,
      select.form-group-control {
      }
    }
  }

  &.horizontal {
    display: flex;

    .base-settings {
      order: 1;
      flex-grow: 1;
      padding: 0 7px;
      align-self: flex-start;
      margin: 0;
    }

    .toggle-panel {
      align-self: flex-start;
      order: 4;
      flex-grow: 1;
      padding: 0 7px;
    }

    .toggle-panel.open {
      order: 2;
    }

    .toggle-button {
      flex-shrink: 1;
      order: 3;
      align-self: flex-end;
      padding: 0 10px;
    }
  }
}