mirror of
https://github.com/goauthentik/authentik.git
synced 2026-06-17 19:09:11 +03:00
Dominic R
c75eed630a
* web: remove native fieldset borders from action groups Refs:\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1775085687040019\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1774988472501059 * Use consistent naming. * Fix up styles, selector specifics, compatibility mode. * Fix field autocapitalization, keyboard behavior. * Fix default height. * Fix for mid-size tablet viewports. - Helped with debugging on mobile. * Fix linter warning. --------- Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
133 lines
3.4 KiB
CSS
133 lines
3.4 KiB
CSS
/* #region Buttons */
|
|
|
|
.ak-c-dialog__close-button {
|
|
position: absolute;
|
|
top: var(--ak-c-dialog--c-button--Top);
|
|
right: var(--ak-c-dialog--c-button--Right);
|
|
}
|
|
|
|
.ak-c-dialog__close-button + .ak-c-dialog__header {
|
|
margin-right: var(--ak-c-dialog--c-button--sibling--MarginRight);
|
|
}
|
|
|
|
/* #endregion */
|
|
|
|
/* #region Header */
|
|
|
|
.ak-c-dialog__header {
|
|
container: ak-dialog-header / inline-size;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
padding-block-start: var(--ak-c-dialog__header--PaddingBlockStart);
|
|
padding-block-end: var(--ak-c-dialog__header--PaddingBlockEnd);
|
|
padding-inline-end: var(--ak-c-dialog__header--PaddingInlineEnd);
|
|
padding-inline-start: var(--ak-c-dialog__header--PaddingInlineStart);
|
|
}
|
|
|
|
.ak-c-dialog__header.pf-m-help {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ak-c-dialog__header:last-child {
|
|
padding-block-end: var(--ak-c-dialog__header--last-child--PaddingBlockEnd);
|
|
}
|
|
|
|
.ak-c-dialog__header-main {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* #endregion */
|
|
|
|
/* #region Title */
|
|
|
|
.ak-c-dialog__title,
|
|
.ak-c-dialog__title-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ak-c-dialog__title {
|
|
flex: 0 0 auto;
|
|
font-family: var(--ak-c-dialog__title--FontFamily);
|
|
font-size: var(--ak-c-dialog__title--FontSize);
|
|
line-height: var(--ak-c-dialog__title--LineHeight);
|
|
}
|
|
|
|
.ak-c-dialog__title.pf-m-icon {
|
|
display: flex;
|
|
}
|
|
|
|
.ak-c-dialog__title-icon {
|
|
margin-right: var(--ak-c-dialog__title-icon--MarginRight);
|
|
color: var(--ak-c-dialog__title-icon--Color);
|
|
}
|
|
|
|
.ak-c-dialog__description {
|
|
padding-block-start: var(--ak-c-dialog__description--PaddingBlockStart);
|
|
}
|
|
|
|
/* #endregion */
|
|
|
|
/* #region Body */
|
|
|
|
.ak-c-dialog__body {
|
|
min-height: var(--ak-c-dialog__body--MinHeight);
|
|
padding-block-start: var(--ak-c-dialog__body--PaddingBlockStart);
|
|
padding-inline-end: var(--ak-c-dialog__body--PaddingInlineEnd);
|
|
padding-inline-start: var(--ak-c-dialog__body--PaddingInlineStart);
|
|
padding-block-end: var(--ak-c-dialog__body--PaddingBlockEnd);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
word-break: break-word;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.ak-c-dialog__body:last-child {
|
|
padding-block-end: var(--ak-c-dialog__body--last-child--PaddingBlockEnd);
|
|
}
|
|
|
|
.ak-c-dialog__footer {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: end;
|
|
|
|
padding-block-start: var(--ak-c-dialog__footer--PaddingBlockStart);
|
|
padding-inline-end: var(--ak-c-dialog__footer--PaddingInlineEnd);
|
|
padding-block-end: var(--ak-c-dialog__footer--PaddingBlockEnd);
|
|
padding-inline-start: var(--ak-c-dialog__footer--PaddingInlineStart);
|
|
|
|
gap: var(--pf-global--spacer--xs);
|
|
|
|
@media screen and (min-width: 576px) {
|
|
gap: var(--pf-global--spacer--sm);
|
|
}
|
|
}
|
|
|
|
/* #endregion */
|
|
|
|
/* #region Footer */
|
|
|
|
fieldset.ak-c-dialog__footer {
|
|
--ak-c-fieldset__legend--PaddingInlineBase: var(--pf-global--spacer--md);
|
|
padding-block: calc(var(--ak-c-fieldset__legend--PaddingInlineBase) / 2);
|
|
border-inline: none;
|
|
border-block-end: none;
|
|
|
|
--ak-c-dialog__footer--c-button--sm--MarginRight: var(
|
|
--ak-c-dialog__footer--c-button--MarginRight
|
|
);
|
|
|
|
& > ak-spinner-button:not(:last-child) {
|
|
margin-right: var(--ak-c-dialog__footer--c-button--MarginRight);
|
|
}
|
|
}
|
|
|
|
/* #endregion */
|