upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-09 00:32:29 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 35

Merge pull request #46923 from nextcloud/feat/update-border-radius-variables

Browse source 
Feat: update border radius variables
This commit is contained in:
Marco 2024-08-02 00:26:24 +02:00 committed by GitHub
commit d58fc0f645
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/theming/css/default.css
View file

@ -57,12 +57,19 @@
/** Border width for input elements such as text fields and selects */
--border-width-input: 1px;
--border-width-input-focused: 2px;
--border-radius: 3px;
--border-radius-large: 10px;
/* Border radii (new values) */
--border-radius-small: 4px; /* For smaller elements */
--border-radius-element: 8px; /* For interactive elements such as buttons, input, navigation and list items */
--border-radius-container: 12px; /* For smaller containers like action menus */
--border-radius-container-large: 16px; /* For larger containers like body or modals */
/* Border radii (deprecated) */
--border-radius: var(--border-radius-small);
--border-radius-large: var(--border-radius-element);
--border-radius-rounded: 28px;
/* Border radius of interactive elements such as buttons, input, navigation and list items. Available since Nextcloud 30. */
--border-radius-element: 8px;
--border-radius-pill: 100px;
--default-clickable-area: 34px;
--clickable-area-large: 48px;
--clickable-area-small: 24px;
@ -73,7 +80,7 @@
--sidebar-min-width: 300px;
--sidebar-max-width: 500px;
/* Border radius of the body container */
--body-container-radius: calc(var(--default-grid-baseline) * 3);
--body-container-radius: var(--border-radius-container-large);
/* Margin of the body container */
--body-container-margin: calc(var(--default-grid-baseline) * 2);
/* Height of the body container to fully fill the view port */

16
apps/theming/lib/Themes/DefaultTheme.php
View file

@ -172,11 +172,17 @@ class DefaultTheme implements ITheme {
// Border width for input elements such as text fields and selects
'--border-width-input' => '1px',
'--border-width-input-focused' => '2px',
'--border-radius' => '3px',
'--border-radius-large' => '10px',
// Border radii (new values)
'--border-radius-small' => '4px', // For smaller elements
'--border-radius-element' => '8px', // For interactive elements such as buttons, input, navigation and list items
'--border-radius-container' => '12px', // For smaller containers like action menus
'--border-radius-container-large' => '16px', // For bigger containers like body or modals
// Border radii (deprecated)
'--border-radius' => 'var(--border-radius-small)',
'--border-radius-large' => 'var(--border-radius-element)',
'--border-radius-rounded' => '28px',
'--border-radius-element' => '8px',
// pill-style button, value is large so big buttons also have correct roundness
'--border-radius-pill' => '100px',
'--default-clickable-area' => '34px',
@ -193,7 +199,7 @@ class DefaultTheme implements ITheme {
'--sidebar-max-width' => '500px',
// Border radius of the body container
'--body-container-radius' => 'calc(var(--default-grid-baseline) * 3)',
'--body-container-radius' => 'var(--border-radius-container-large)',
// Margin of the body container
'--body-container-margin' => 'calc(var(--default-grid-baseline) * 2)',
// Height of the body container to fully fill the view port

2
apps/theming/tests/Themes/DefaultThemeTest.php
View file

@ -152,6 +152,8 @@ class DefaultThemeTest extends AccessibleThemeTestCase {
$fallbackCss = file_get_contents(__DIR__ . '/../../css/default.css');
// Remove comments
$fallbackCss = preg_replace('/\s*\/\*[\s\S]*?\*\//m', '', $fallbackCss);
// Remove blank lines
$fallbackCss = preg_replace('/\s*\n\n/', "\n", $fallbackCss);
$this->assertEquals($css, $fallbackCss);
}