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

Feat: update border radius variables

Browse source 
Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
This commit is contained in:
Marco Ambrosini 2024-07-31 17:22:09 +02:00 committed by Ferdinand Thiessen
parent 1d147ac274
commit 92e27a24f8
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
2 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
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;

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

@ -172,12 +172,18 @@ 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',
'--border-radius-pill' => '100px',
'--default-clickable-area' => '34px',
'--clickable-area-large' => '48px',