khanh.pndc/nextcloud-docs
1
0
Fork 0
mirror of https://github.com/nextcloud/documentation.git synced 2026-01-02 17:59:36 +07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12103 from nextcloud/update-border-radius-doc

Browse Source 
Update border radius documentation with new variables
This commit is contained in:
Ferdinand Thiessen
2024-08-13 18:32:36 +02:00
committed by GitHub
parent cd2c8ae1cd 9a87818f26
commit 4d15a995a0
2 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
View File

@@ -37,12 +37,12 @@ The size of the CSS variable ``--clickable-area`` variable has shrunk from ``44p
This will result in several regressions and paper-cuts in your app that will need to be manually fixed.
It's recommended to:
1) Link the @nextcloud/vue current master to your app (pull often cause fixes are getting in there too);
1) Link the ``@nextcloud/vue`` current master to your app (pull often cause fixes are getting in there too);
2) Do a codebase-wide search of `44px` and replace with the variable `--default-clickable-area` if appropriate;
3) Check for regressions and visual bugs;
4) Report the regression of your app in this issue (you can create a heading with the name of your own app);
5) Also report @nextlcoud/vue library regressions if they're not reported already in their list;
6) Fix regression in your app (only the ones that are unrelated to the @nextcloud/vue components);
5) Also report ``@nextlcoud/vue`` library regressions if they're not reported already in their list;
6) Fix regression in your app (only the ones that are unrelated to the ``@nextcloud/vue`` components);
Line height
^^^^^^^^^^^
@@ -58,6 +58,25 @@ Nextcloud now provides meaningful default styles for heading elements.
This can cause visual regressions if your code does not explicitly set font size and weight.
If you need to use heading elements outside of text content, you might need to adjust their styles.
Border radius
^^^^^^^^^^^^^
The border radius CSS variables have been refactored:
- Added
- ``--border-radius-small`` was added for smaller elements like chips.
- ``--border-radius-container`` was added for smaller containers like action menus.
- ``--border-radius-container-large`` was added for larger containers like body or modals.
- ``--border-radius-element`` was added for interactive elements such as buttons, input, navigation and list items.
- Deprecated
- ``--border-radius`` is deprecated now in favor of ``--border-radius-small``.
- ``--border-radius-large`` is deprecated now in favor of ``--border-radius-element``.
- ``--border-radius-pill`` is deprecated now in favor of ``--border-radius-element``.
- ``--border-radius-rounded`` is deprecated now in favor of ``--border-radius-container``.
Added APIs
^^^^^^^^^^

12
developer_manual/html_css_design/css.rst
View File

@@ -190,16 +190,14 @@ Element structure variables
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-width-element-focused`` | ``2px`` | Border width for interactive elements when focussed (adjusted for accessibility) |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius`` | ``3px`` | Default border radius |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-large`` | ``10px`` | Larger border radius |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-rounded`` | ``28px`` | Even larger border radius for elements which should be look rounded |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-pill`` | ``calc(var(--default-clickable-area) / 2)`` | Border radius for pill-style elements |
| ``--border-radius-small`` | ``4px`` | Border radius used for smaller elements |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-element`` | ``8px`` | Border radius of 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. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--default-clickable-area`` | ``34px`` | Default size (width and height) for interactive elements like buttons |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--clickable-area-large`` | ``48px`` | Larger size for the main UI elements |