diff options
| author | Julius Härtl <jus@bitgrid.net> | 2022-08-24 18:18:55 +0300 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2022-09-01 15:15:39 +0300 |
| commit | e4113b17798dec870954d2d52da076691d9ac51e (patch) | |
| tree | bd6c9c827c26cc1451dd41814f5b345faf2093a7 | |
| parent | ff219a7cd8f9dca527eff28093da0c473c6dbd6c (diff) | |
Adapt layout to new base css variables
Signed-off-by: Julius Härtl <jus@bitgrid.net>
| -rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 2 | ||||
| -rw-r--r-- | core/css/apps.scss | 13 |
2 files changed, 8 insertions, 7 deletions
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 42b335dbe08..56348069ff4 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -173,7 +173,9 @@ class DefaultTheme implements ITheme { // pill-style button, value is large so big buttons also have correct roundness '--border-radius-pill' => '100px', + '--default-clickable-area' => '44px', '--default-line-height' => '24px', + '--default-grid-baseline' => '4px', // various structure data '--header-height' => '50px', diff --git a/core/css/apps.scss b/core/css/apps.scss index bb6edfc0041..cb2cec662a4 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -21,8 +21,9 @@ :root { - --body-container-margin: 8px; - --body-container-radius: var(--border-radius-large); + --body-container-margin: calc(var(--default-grid-baseline) * 2); + /* - 2px is required for making it look nice */ + --body-container-radius: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px); --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin)); } @@ -125,7 +126,7 @@ kbd { -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none; position: sticky; height: 100%; - padding: 6px; + padding: calc(var(--default-grid-baseline) * 2); -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -166,11 +167,9 @@ kbd { flex-wrap: wrap; order: 1; flex-shrink: 0; - margin-left: 8px; - margin-right: 8px; - margin-top: 3px; + margin: 0; margin-bottom: 3px; - width: calc(100% - 16px); + width: 100%; overflow: hidden; border-radius: var(--border-radius-pill); |