mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-10-16 00:11:57 +00:00
Apply prettier to all files in the frontend
This commit is contained in:
Quentin Gliech
@@ -15,128 +15,133 @@
|
||||
|
||||
.overlay,
|
||||
.scroll-container {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(3 12 27 / 52.8%);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(3 12 27 / 52.8%);
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
/* To position the close icon */
|
||||
position: relative;
|
||||
margin: var(--cpd-space-4x);
|
||||
min-width: 0;
|
||||
flex: 0 1 520px;
|
||||
/* To position the close icon */
|
||||
position: relative;
|
||||
margin: var(--cpd-space-4x);
|
||||
min-width: 0;
|
||||
flex: 0 1 520px;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--cpd-font-heading-md-semibold);
|
||||
letter-spacing: var(--cpd-font-letter-spacing-heading-md);
|
||||
color: var(--cpd-color-text-primary);
|
||||
margin-block-start: var(--cpd-space-4x);
|
||||
font: var(--cpd-font-heading-md-semibold);
|
||||
letter-spacing: var(--cpd-font-letter-spacing-heading-md);
|
||||
color: var(--cpd-color-text-primary);
|
||||
margin-block-start: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.dialog .body {
|
||||
padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
|
||||
padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
|
||||
}
|
||||
|
||||
.dialog .title {
|
||||
/* This adds a padding to the title to make sure it overflows correctly
|
||||
/* This adds a padding to the title to make sure it overflows correctly
|
||||
* and not behind the close button */
|
||||
padding-inline-end: var(--cpd-space-7x);
|
||||
padding-inline-end: var(--cpd-space-7x);
|
||||
}
|
||||
|
||||
.dialog .close {
|
||||
position: absolute;
|
||||
inset-block-start: var(--cpd-space-7x);
|
||||
inset-inline-end: var(--cpd-space-7x);
|
||||
padding: var(--cpd-space-1x);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
position: absolute;
|
||||
inset-block-start: var(--cpd-space-7x);
|
||||
inset-inline-end: var(--cpd-space-7x);
|
||||
padding: var(--cpd-space-1x);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
|
||||
&>svg {
|
||||
inline-size: var(--cpd-space-5x);
|
||||
block-size: var(--cpd-space-5x);
|
||||
}
|
||||
& > svg {
|
||||
inline-size: var(--cpd-space-5x);
|
||||
block-size: var(--cpd-space-5x);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
position: fixed;
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
inset-block-end: 0;
|
||||
inset-inline: 0;
|
||||
position: fixed;
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
inset-block-end: 0;
|
||||
inset-inline: 0;
|
||||
|
||||
/* Cap the inline content size at 520px, filling the rest of the space with
|
||||
/* Cap the inline content size at 520px, filling the rest of the space with
|
||||
padding */
|
||||
padding-inline: max(0px, calc((100% - 520px) / 2));
|
||||
border-start-start-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-inline: max(0px, calc((100% - 520px) / 2));
|
||||
border-start-start-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Drawer comes in the Android style by default */
|
||||
--border-radius: 28px;
|
||||
--handle-block-size: 4px;
|
||||
--handle-inline-size: 32px;
|
||||
--handle-inset-block-start: var(--cpd-space-4x);
|
||||
--handle-inset-block-end: 0px;
|
||||
--content-inset-block-start: calc(var(--handle-inset-block-start) + var(--handle-block-size) + var(--handle-inset-block-end));
|
||||
/* Drawer comes in the Android style by default */
|
||||
--border-radius: 28px;
|
||||
--handle-block-size: 4px;
|
||||
--handle-inline-size: 32px;
|
||||
--handle-inset-block-start: var(--cpd-space-4x);
|
||||
--handle-inset-block-end: 0px;
|
||||
--content-inset-block-start: calc(
|
||||
var(--handle-inset-block-start) + var(--handle-block-size) +
|
||||
var(--handle-inset-block-end)
|
||||
);
|
||||
}
|
||||
|
||||
.drawer[data-platform="ios"] {
|
||||
--border-radius: 10px;
|
||||
--handle-block-size: 5px;
|
||||
--handle-inline-size: 36px;
|
||||
--handle-inset-block-start: var(--cpd-space-1-5x);
|
||||
--handle-inset-block-end: 1px;
|
||||
--border-radius: 10px;
|
||||
--handle-block-size: 5px;
|
||||
--handle-inline-size: 36px;
|
||||
--handle-inset-block-start: var(--cpd-space-1-5x);
|
||||
--handle-inset-block-end: 1px;
|
||||
}
|
||||
|
||||
.drawer .body {
|
||||
padding-inline: var(--cpd-space-4x);
|
||||
padding-block-start: calc(var(--content-inset-block-start) + var(--cpd-space-6x));
|
||||
padding-block-end: var(--cpd-space-12x);
|
||||
border-start-start-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
padding-inline: var(--cpd-space-4x);
|
||||
padding-block-start: calc(
|
||||
var(--content-inset-block-start) + var(--cpd-space-6x)
|
||||
);
|
||||
padding-block-end: var(--cpd-space-12x);
|
||||
border-start-start-radius: var(--border-radius);
|
||||
border-start-end-radius: var(--border-radius);
|
||||
|
||||
/* Even with overflow: auto, the content can still overflow at the corners
|
||||
/* Even with overflow: auto, the content can still overflow at the corners
|
||||
where it meets with the curved border. A contain: paint fixes that. */
|
||||
contain: paint;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
contain: paint;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
|
||||
--cpd-separator-spacing: 0;
|
||||
--cpd-separator-inset: var(--cpd-space-4x);
|
||||
--cpd-separator-spacing: 0;
|
||||
--cpd-separator-inset: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.drawer .body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
block-size: var(--handle-block-size);
|
||||
inset-inline: calc((100% - var(--handle-inline-size)) / 2);
|
||||
inset-block-start: var(--handle-inset-block-start);
|
||||
background: var(--cpd-color-icon-secondary);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
content: "";
|
||||
position: absolute;
|
||||
block-size: var(--handle-block-size);
|
||||
inset-inline: calc((100% - var(--handle-inline-size)) / 2);
|
||||
inset-block-start: var(--handle-inset-block-start);
|
||||
background: var(--cpd-color-icon-secondary);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user