diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css new file mode 100644 index 000000000..b7b6871d5 --- /dev/null +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css @@ -0,0 +1,17 @@ +/* Mimic Core-Styles settings/font--docs.css */ +/* FAQ: Design wants to increase base font from 12px to 14px */ +/* FAQ: This change ALMOST gives clients consistent font size variables */ +/* NOTE: + - tup-ui uses `--global-font-size--small` (is now 1.4rem) + - tup-cms uses `--global-font-size--medium` (has been 1.4rem) + - tacc-docs uses `--global-font-size--medium` (has been 1.6rem) +*/ +:root { + --global-font-size--x-small: 1.2rem; + --global-font-size--small: 1.4rem; + --global-font-size--medium: 1.6rem; + --global-font-size--large: 1.8rem; + --global-font-size--x-large: 2.1rem; + --global-font-size--xx-large: 2.8rem; + --global-font-size--xxx-large: 3.2rem; +} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css index 67ade64eb..e6f8ce97c 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css @@ -2,7 +2,7 @@ /* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */ /* SETTINGS */ -/* ... */ +@import url("./for-core-styles/settings/font--portal.css") layer(base); /* GENERICS */ @import url("./for-core-styles/generics/attributes.css") layer(base); diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index 262b579da..8b7556868 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -2,13 +2,15 @@ /* Layout styles */ .pairing-container { - --extra-space-below-panel-for-message: 50px; /* text copy input height ++ */ + composes: c-step-panels from '../../styles/c-step-panels.css'; - composes: c-step-panels c-step-panels--has-scroll-parent from '../../styles/c-step-panels.css'; + padding-bottom: var(--global-space--section-bottom); } .pairing-container > *:not(.pairing-separator) { - width: 365px; /* FAQ: static width, so .mfa-message is centered */ + /* To let panels easily become equal width so .mfa-message is centered */ + /* FAQ: Using a var makes width easy to change (e.g. in a @media query) */ + width: var(--panel-width, auto); } .pairing-separator { @@ -22,7 +24,7 @@ } .field-error { - /* so message with very littel text still appears beneath input */ + /* So message with very little text still appears beneath input */ display: flex; } @@ -59,17 +61,6 @@ label.qr-code-alt-label { } -/* Wide */ -@media screen and (--medium-and-above) { - .pairing-container { - composes: c-step-panels--horizontal from '../../styles/c-step-panels.css'; - } - .mfa-message { - composes: c-step-panels__message from '../../styles/c-step-panels.css'; - } -} - - .mfa-form { composes: c-step-panels__content from '../../styles/c-step-panels.css'; @@ -90,3 +81,76 @@ label.qr-code-alt-label { .mfa-success-container button { margin-top: 30px; /* match .mfa-type-selection */ } + + + +/* Responsive layout */ +@media screen and (--medium-and-below) { + .pairing-container { --panel-width: 365px; } +} +@media screen and (--medium-to-wide) { + .pairing-container { --panel-width: 330px; } +} +@media screen and (--wide-and-above) { + .pairing-container { --panel-width: 365px; } +} +@media screen and (--medium-and-above) { + .pairing-container { + /* To layout items on one left-aligned row */ + grid-auto-flow: column; + justify-content: start; + + /* To support `position: absolute` child */ + position: relative; + width: max-content; /* to not let wide child change parent width */ + } + + /* HACK: Add extra space to hold the .mfa-message "outside" of the panels */ + .pairing-container { + --space-below-panel-before-message: var(--global-space--section-bottom); + --space-below-panel-for-form-field: 50px; /* text copy input height++ */ + + /* FAQ: body font-size * body line-height + button vert. border + … */ + --space-below-panel-for-message: calc( + var(--global-font-size--small) * 1.4 + + (var(--global-border-width--normal) * 2) + + var(--space-below-panel-for-form-field) + + var(--space-below-panel-before-message) + ); + + padding-bottom: var(--space-below-panel-for-message); + } + + /* To not let message content stretch wider than necessary */ + /* FAQ: A TextCopyField in a message would stretch as wide as possible */ + .mfa-message { + width: max-content; + } + + /* HACK: Position .mfa-message at the bottom and "outside" of the panels */ + .pairing-container *:not(:only-child) .mfa-message { + /* To position message beneath both paring steps */ + position: absolute; + top: calc( + 100% + - var(--space-below-panel-for-message) + + var(--space-below-panel-before-message) + ); + + /* To not let message horizontally overflow .pairing-container */ + max-width: calc( + 100% + - var(--global-space--section-left) + - var(--global-space--section-right) + ); + + /* To horizontally center content (not text) */ + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + + /* To horizontally center text (not content) */ + text-align: center; + } +} diff --git a/libs/tup-components/src/news/UserNews.module.css b/libs/tup-components/src/news/UserNews.module.css index 68e527095..0a19f1401 100644 --- a/libs/tup-components/src/news/UserNews.module.css +++ b/libs/tup-components/src/news/UserNews.module.css @@ -1,5 +1,5 @@ .news-list { - font-size: var(--global-font-size--small); + font-size: var(--global-font-size--x-small); } .news-list-item { @@ -39,6 +39,8 @@ margin-top: 10px; margin-bottom: 5px; + + font-size: var(--global-font-size--small); } .news-error { diff --git a/libs/tup-components/src/system-status/details/SystemDetails.module.css b/libs/tup-components/src/system-status/details/SystemDetails.module.css index 4d3708fa0..66eafa9d1 100644 --- a/libs/tup-components/src/system-status/details/SystemDetails.module.css +++ b/libs/tup-components/src/system-status/details/SystemDetails.module.css @@ -6,12 +6,17 @@ /* To reproduce complex layout of design doc */ @media (--wide-and-above) { gap: 25px; - grid-template-columns: 0.5fr 0.5fr; grid-template-rows: auto 1fr; grid-template-areas: "monitor avgwait" "queue avgwait"; } + @media (--wide-to-x-wide) { + grid-template-columns: 0.75fr 0.25fr; + } + @media (--x-wide-and-above) { + grid-template-columns: 0.5fr 0.5fr; + } /* To reproduce simple layout of narrow screens like CEPv2 */ @media (--wide-and-below) { row-gap: 25px; diff --git a/libs/tup-components/styles/c-step-panels.css b/libs/tup-components/styles/c-step-panels.css index 0e1ed4861..86b613e56 100644 --- a/libs/tup-components/styles/c-step-panels.css +++ b/libs/tup-components/styles/c-step-panels.css @@ -3,30 +3,11 @@ .c-step-panels { display: grid; padding-inline: var(--global-space--section-left); - padding-bottom: var(--global-space--section-bottom); gap: var(--global-space--section-left); - - --space-below-panel-before-message: var(--global-space--section-bottom); - --extra-space: var(--extra-space-below-panel-for-message, 0px); - - /* FAQ: body font-size * body line-height + button vert. border + extra … */ - --space-below-panel-for-message: calc( - var(--global-font-size--small) - * 1.4 - + (var(--global-border-width--normal) * 2) - + var(--extra-space) - + var(--space-below-panel-before-message) - ) } ol.c-step-panels { margin-bottom: 0; /* overwrite core-styles.base.css */ } -/* HACK: Add space for c-step-panels__message to avoid causing scrollbar */ -.c-step-panels--has-scroll-parent { - padding-bottom: var(--space-below-panel-for-message); -} - - @@ -40,64 +21,12 @@ li.c-step-panels__separator { } /* To add space between "2." and separator */ -.c-step-panels__separator + li { +.c-step-panels__separator { /* This assumes `list-style-position: outside` (browser default) */ - margin-left: 1.25em; + margin-right: 1.25em; } .c-step-panels__content { padding-top: 10px; padding-bottom: 10px; } - - - - - -/* Modifiers */ - -/* Modifiers: Vertical */ - -.c-step-panels--vertical { - /* no extra styles required yet */ -} - - - -/* Modifiers: Horizontal */ - -.c-step-panels--horizontal { - /* To layout items on one left-aligned row */ - grid-auto-flow: column; - justify-content: start; - - /* To support `position: absolute` child */ - position: relative; - width: max-content; /* to not let wide child change parent width */ -} -.c-step-panels--horizontal li:not(:only-child) .c-step-panels__message { - /* To position message beneath both paring steps */ - position: absolute; - top: calc( - 100% - - var(--space-below-panel-for-message) - + var(--space-below-panel-before-message) - ); - - /* To stretch content */ - width: max-content; - max-width: calc( - 100% - - var(--global-space--section-left) - - var(--global-space--section-right) - ); - - /* To horizontally center content (not text) */ - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - - /* To horizontally center text (not content) */ - text-align: center; -}