penpot/frontend/resources/styles/main/partials/forms.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

input,
select,
textarea {
  &.invalid {
    border-color: $color-danger;
    color: $color-danger;
  }
}

.form-container,
.generic-form {
  display: flex;
  justify-content: center;
  flex-direction: column;

  .forms-container {
    display: flex;
    margin-top: 40px;
    width: 536px;
    justify-content: center;
  }

  form {
    display: flex;
    flex-direction: column;
    // flex-basis: 368px;
  }

  .fields-row {
    margin-bottom: 20px;
    flex-direction: column;

    .options {
      display: flex;
      justify-content: flex-end;
      font-size: $fs14;
      margin-top: 13px;
    }
  }

  .field {
    margin-bottom: 20px;
  }

  h1 {
    font-size: $fs36;
    color: #2c233e;
    margin-bottom: 20px;
  }

  .subtitle {
    font-size: $fs24;
    color: #2c233e;
    margin-bottom: 20px;
  }

  .notification-icon {
    justify-content: center;
    display: flex;
    margin-bottom: 3rem;

    svg {
      fill: $color-gray-60;
      height: 40%;
      width: 40%;
    }
  }

  .notification-text {
    font-size: $fs18;
    color: $color-gray-60;
    margin-bottom: 20px;
  }

  .notification-text-email {
    background: $color-gray-10;
    border-radius: $br3;
    color: $color-gray-60;
    font-size: $fs18;
    font-weight: $fw500;
    margin: 1.5rem 0 2.5rem 0;
    padding: 1rem;
    text-align: center;
  }

  h2 {
    font-size: $fs24;
    color: $color-gray-60;
    // height: 40px;
    display: flex;
    align-items: center;
  }

  a {
    &:hover {
      text-decoration: underline;
    }
  }

  p {
    color: $color-gray-60;
  }

  hr {
    border-color: $color-gray-20;
  }
}

.custom-input {
  display: flex;
  flex-direction: column;
  position: relative;

  input,
  textarea {
    background-color: $color-white;
    border-radius: $br2;
    border: 1px solid $color-gray-20;
    color: $color-gray-60;
    font-size: $fs14;
    height: 40px;
    margin: 0;
    padding: 15px 15px 0 15px;
    width: 100%;
  }

  textarea {
    height: auto;
    font-size: $fs14;
    font-family: "worksans", sans-serif;
    padding-top: 20px;
  }

  // Makes the background for autocomplete white
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px $color-white inset !important;
  }

  label {
    font-size: $fs12;
    color: $color-gray-50;
    position: absolute;
    left: 15px;
    top: 6px;
  }

  &.invalid {
    input {
      border-color: $color-danger;
    }
    label {
      color: $color-danger;
    }
  }

  &.valid {
    input {
      border-color: $color-success;
    }
  }

  &.focus {
    input {
      border-color: $color-gray-60;
    }
  }

  &.disabled {
    input {
      background-color: lighten($color-gray-10, 5%);
      user-select: none;
    }
  }

  &.empty {
    input {
      padding-top: 0;
    }

    label {
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      width: 1px;
    }
  }

  &.with-icon {
    input {
      padding-right: 50px;
    }
  }

  .help-icon {
    position: absolute;
    right: 15px;
    top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    svg {
      fill: $color-gray-30;
      width: 15px;
      height: 15px;
    }
  }

  .hint {
    color: $color-gray-40;
    padding: 4px;
    font-size: $fs12;
  }

  .error {
    color: $color-danger;
    padding: 4px;
    font-size: $fs12;
  }
}

.custom-multi-input {
  border-radius: $br2;
  border: 1px solid $color-gray-20;
  max-height: 300px;
  overflow-y: auto;

  &.invalid {
    label {
      color: unset;
    }
  }

  input {
    border: 0px;

    &.no-padding {
      padding-top: 0px;
    }
  }

  .selected-items {
    padding-top: 25px;
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
  }

  .selected-item {
    width: 100%;

    &:not(:last-child) {
      margin-right: 3px;
    }

    .around {
      border: 1px solid $color-gray-20;
      padding-left: 5px;
      border-radius: $br4;
      &.invalid {
        border: 1px solid $color-danger;
      }

      .text {
        display: inline-block;
        max-width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 16px;
        font-size: $fs14;
        color: $color-black;
      }
      .icon {
        cursor: pointer;
        margin-left: 10px;
        margin-right: 5px;
      }
    }
  }
}

.custom-select {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;

  label {
    font-size: $fs12;
    color: $color-gray-30;
  }

  select {
    cursor: pointer;
    font-size: $fs14;
    border: 0px;
    opacity: 0;
    z-index: 10;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    position: absolute;
    width: calc(100% - 1px);
    height: 100%;
    padding: 15px;
  }

  .main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 15px;
  }

  .input-container {
    display: flex;
    flex-direction: row;

    background-color: $color-white;
    border-radius: $br2;
    border: 1px solid $color-gray-20;
    height: 40px;

    &.invalid {
      border-color: $color-danger;
      label {
        color: $color-danger;
      }
    }

    &.valid {
      border-color: $color-success;
    }

    &.focus {
      border-color: $color-gray-60;
    }

    &.disabled {
      background-color: $color-gray-10;
      user-select: none;
    }
  }

  .value {
    color: $color-gray-60;
    font-size: $fs14;
    width: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    pointer-events: none;

    svg {
      fill: $color-gray-30;
      transform: rotate(90deg);
      width: 15px;
      height: 15px;
    }
  }
}