mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-07-19 13:46:37 +00:00
122 lines
2.8 KiB
CSS
122 lines
2.8 KiB
CSS
/* Copyright 2024 New Vector Ltd.
|
|
* Copyright 2023, 2024 The Matrix.cpd-form-org Foundation C.cpd-form-I.cpd-form-C.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
/**
|
|
* ROOT: Form Element
|
|
*/
|
|
|
|
.cpd-form-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cpd-space-5x);
|
|
}
|
|
|
|
/**
|
|
* FIELD: Wrapper around label, control and message
|
|
*/
|
|
|
|
.cpd-form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cpd-space-1x);
|
|
}
|
|
|
|
.cpd-form-inline-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--cpd-space-5x);
|
|
}
|
|
|
|
.cpd-form-inline-field-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cpd-form-inline-field-control {
|
|
/* The control should have the same height as the label */
|
|
block-size: calc(
|
|
var(--cpd-font-size-body-md) *
|
|
var(--cpd-font-line-height-regular)
|
|
);
|
|
|
|
/* Align the control in the middle of the label */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/**
|
|
* LABEL
|
|
*/
|
|
|
|
.cpd-form-label {
|
|
font: var(--cpd-font-body-md-medium);
|
|
letter-spacing: var(--cpd-font-letter-spacing-body-md);
|
|
}
|
|
|
|
.cpd-form-label[for] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cpd-form-label[data-invalid] {
|
|
color: var(--cpd-color-text-critical-primary);
|
|
}
|
|
|
|
.cpd-form-inline-field-body .cpd-form-label {
|
|
/* When the label is inline, it should be using regular font weight, not medium */
|
|
font: var(--cpd-font-body-md-regular);
|
|
}
|
|
|
|
/* Currently working everywhere but on Firefox (only behind a labs flag)
|
|
https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
|
|
.cpd-form-label:has(~ * input[disabled]),
|
|
.cpd-form-label:has(~ input[disabled]),
|
|
.cpd-form-inline-field-control:has(input[disabled])
|
|
~ .cpd-form-inline-field-body
|
|
.cpd-form-label {
|
|
color: var(--cpd-color-text-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/**
|
|
* Help and error messages
|
|
*/
|
|
|
|
.cpd-form-message {
|
|
font: var(--cpd-font-body-sm-regular);
|
|
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
|
|
margin-block-start: var(--cpd-space-1x);
|
|
}
|
|
|
|
.cpd-form-help-message {
|
|
color: var(--cpd-color-text-secondary);
|
|
}
|
|
|
|
.cpd-form-error-message {
|
|
color: var(--cpd-color-text-critical-primary);
|
|
}
|
|
|
|
/* Currently working everywhere but on Firefox (only behind a labs flag)
|
|
https://developer.cpd-form-mozilla.cpd-form-org/en-US/docs/Web/CSS/:has#browser_compatibility */
|
|
input[disabled] ~ .cpd-form-message,
|
|
*:has(input[disabled]) ~ .cpd-form-message,
|
|
.cpd-form-inline-field-control:has(input[disabled])
|
|
~ .cpd-form-inline-field-body
|
|
.cpd-form-message {
|
|
color: var(--cpd-color-text-disabled);
|
|
}
|
|
|
|
.cpd-form-message > svg {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
margin-inline-end: var(--cpd-space-2x);
|
|
|
|
/* Calculate the size of the icon based on the font size and line height */
|
|
block-size: calc(1em * var(--cpd-font-line-height-regular));
|
|
inline-size: calc(1em * var(--cpd-font-line-height-regular));
|
|
}
|