element-call/src/input/Input.module.css

/*
Copyright 2022 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.fieldRow {
  display: flex;
  margin-bottom: 32px;
  align-items: center;
}

.field {
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative;
}

.fieldRow.rightAlign {
  justify-content: flex-end;
}

.fieldRow > * {
  margin-right: 24px;
}

.fieldRow > :last-child {
  margin-right: 0;
}

.inputField {
  border-radius: 4px;
  transition: border-color 0.25s;
  border: 1px solid var(--cpd-color-border-interactive-primary);
}

.inputField input,
.inputField textarea {
  font-weight: 400;
  font-size: var(--font-size-body);
  border: none;
  border-radius: 4px;
  padding: 12px 9px 10px 9px;
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-canvas-default);
  flex: 1;
  min-width: 0;
}

.inputField.disabled input,
.inputField.disabled textarea,
.inputField.disabled span {
  color: var(--cpd-color-text-disabled);
}

.inputField span {
  padding: 11px 9px;
}

.inputField span:first-child {
  padding-right: 0;
}

.inputField input::placeholder,
.inputField textarea::placeholder {
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

.inputField input:placeholder-shown:focus::placeholder,
.inputField textarea:placeholder-shown:focus::placeholder {
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

.inputField label {
  transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
    top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
  color: var(--cpd-color-text-secondary);
  background-color: transparent;
  font-size: var(--font-size-body);
  position: absolute;
  left: 0;
  top: 0;
  margin: 9px 8px;
  padding: 2px;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}

.inputField:focus-within {
  border-color: var(--cpd-color-text-link-external);
}

.inputField input:focus,
.inputField textarea:focus {
  outline: 0;
}

.inputField input:focus + label,
.inputField input:not(:placeholder-shown) + label,
.inputField.prefix input + label,
.inputField textarea:focus + label,
.inputField textarea:not(:placeholder-shown) + label,
.inputField.prefix textarea + label {
  background-color: var(--cpd-color-bg-canvas-default);
  transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
    top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
  font-size: var(--font-size-micro);
  top: -13px;
  padding: 0 2px;
  pointer-events: auto;
}

.inputField input:focus + label,
.inputField textarea:focus + label {
  color: var(--cpd-color-border-focused);
}

.checkboxField {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.checkboxField label {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: var(--font-size-body);
  line-height: 24px;
}

.checkboxField input {
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  border: 1.5px solid rgba(185, 190, 198, 0.5);
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 10px;
}

.checkboxField.disabled,
.checkboxField.disabled .description {
  color: var(--cpd-color-text-disabled);
}

.checkboxField.disabled .checkbox {
  border-color: var(--cpd-color-border-disabled);
}

.checkbox svg {
  display: none;
}

.checkbox svg * {
  stroke: var(--stopgap-color-on-solid-accent);
}

.checkboxField input[type="checkbox"]:checked + label > .checkbox {
  background: var(--cpd-color-text-action-accent);
  border-color: var(--cpd-color-text-action-accent);
}

.checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
  display: flex;
}

.checkboxField:focus-within .checkbox {
  border: 1.5px solid var(--cpd-color-text-link-external) !important;
}

.errorMessage {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--cpd-color-text-critical-primary);
  font-weight: 600;
}

.description {
  color: var(--cpd-color-text-secondary);
  margin-left: 26px;
  width: 100%; /* Ensure that it breaks onto the next row */
}

.description.noLabel {
  margin-top: -20px; /* Ensures that there is no weired spacing if the checkbox doesn't have a label */
}