penpot/frontend/src/app/main/ui/auth/common.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

@use "common/refactor/common-refactor.scss" as *;

.auth-form-wrapper {
  width: 100%;
  padding-block-end: 0;
  display: grid;
  gap: $s-12;
  form {
    display: flex;
    flex-direction: column;
    gap: $s-12;
    margin-top: $s-12;
  }
}

.auth-title-wrapper {
  width: 100%;
  padding-block-end: 0;
  display: grid;
  gap: $s-8;
}

.separator {
  border-color: var(--modal-separator-backogrund-color);
  margin: 0;
}

.auth-title {
  @include bigTitleTipography;
  color: var(--title-foreground-color-hover);
}

.auth-subtitle {
  @include smallTitleTipography;
  color: var(--title-foreground-color);
}

.auth-tagline {
  @include smallTitleTipography;
  margin: 0;
  color: var(--title-foreground-color);
}

.form-field {
  --input-width: 100%;
  --input-height: #{$s-40};
  --input-min-width: 100%;
}

.buttons-stack {
  display: grid;
  gap: $s-8;
}

.login-button,
.login-ldap-button {
  @extend .button-primary;
  @include uppercaseTitleTipography;
  height: $s-40;
  width: 100%;
}

.go-back {
  display: flex;
  flex-direction: column;
  gap: $s-12;
  padding: 0;
  border-block-start: none;
}

.go-back-link {
  @extend .button-secondary;
  @include uppercaseTitleTipography;
  height: $s-40;
}

.links {
  display: grid;
  gap: $s-24;
}

.register,
.account,
.recovery-request,
.demo-account {
  display: flex;
  justify-content: center;
  gap: $s-8;
  padding: 0;
}

.register-text,
.account-text,
.recovery-text,
.demo-account-text {
  @include smallTitleTipography;
  text-align: right;
  color: var(--title-foreground-color);
}

.register-link,
.account-link,
.recovery-link,
.forgot-pass-link,
.demo-account-link {
  @include smallTitleTipography;
  text-align: left;
  background-color: transparent;
  border: none;
  display: inline;
  color: var(--link-foreground-color);

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

.forgot-password {
  display: flex;
  justify-content: flex-end;
}

.submit-btn,
.register-btn,
.recover-btn {
  @extend .button-primary;
  @include uppercaseTitleTipography;
  height: $s-40;
  width: 100%;
}

.login-btn {
  @include smallTitleTipography;
  display: flex;
  align-items: center;
  gap: $s-6;
  width: 100%;
  border-radius: $br-8;
  background-color: var(--button-secondary-background-color-rest);
  color: var(--button-foreground-color-focus);
  span {
    padding-block-start: $s-2;
  }

  &:hover {
    color: var(--button-foreground-color-focus);
    background-color: var(--button-secondary-background-color-hover);
  }
}

.auth-buttons {
  display: flex;
  gap: $s-8;
}