Skip to content

Commit

Permalink
chore: Update border radius documentation with new variables
Browse files Browse the repository at this point in the history 
Signed-off-by: Marco Ambrosini <[email protected]>
  • Loading branch information
@marcoambrosini @susnux
marcoambrosini authored and susnux committed Aug 13, 2024
1 parent 49cabc4 commit 9a87818
Showing 1 changed file with 4 additions and 6 deletions.
10 changes: 4 additions & 6 deletions developer_manual/html_css_design/css.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,13 @@ 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-small`` | ``4px`` | Border radius used for smaller elements |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-large`` | ``10px`` | Larger border radius |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-rounded`` | ``28px`` | Even larger border radius for elements which should be look rounded |
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-pill`` | ``calc(var(--default-clickable-area) / 2)`` | Border radius for pill-style elements |
| ``--border-radius-container`` | ``12px`` | For smaller containers like action menus. |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
| ``--border-radius-element`` | ``8px`` | Border radius of interactive elements such as buttons, input, navigation and list items. |
| ``--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 |
+----------------------------------------------+------------------------------------------------+-----------------------------------------------------------------------------------------------------------+
Expand Down

0 comments on commit 9a87818

Please sign in to comment.