diff --git a/content/developer/reference/user_interface/icons.rst b/content/developer/reference/user_interface/icons.rst index 3debe6e6f..6b8b28ed5 100644 --- a/content/developer/reference/user_interface/icons.rst +++ b/content/developer/reference/user_interface/icons.rst @@ -1,5 +1,3 @@ -:hide-page-toc: - .. _reference/user_interface/ui_icons: ======== @@ -18,99 +16,345 @@ icon class. +Icons +===== + .. raw:: html
-
-
- - oi-apps -
-
+
+
+ + oi-odoo +
+
-
-
- - oi-group -
-
+
+
+ + oi-view +
+
-
-
- - oi-launch -
-
+
+
+ + oi-view-kanban +
+
-
-
- - oi-odoo -
-
+
+
+ + oi-view-list +
+
-
-
- - oi-panel-right -
-
+
+
+ + oi-view-cohort +
+
-
-
- - oi-search -
-
+
+
+ + oi-view-pivot +
+
-
-
- - oi-settings-adjust -
-
+
+
+ + oi-text-break +
+
-
-
- - oi-studio -
-
+
+
+ + oi-text-inline +
+
-
-
- - oi-view-cohort -
-
+
+
+ + oi-text-wrap +
+
-
-
- - oi-view-kanban -
-
+
+
+ + oi-text-effect +
+
-
-
- - oi-view-list -
-
+
+
+ + oi-search +
+
-
-
- - oi-view-pivot -
-
+
+
+ + oi-group +
+
-
-
- - oi-voip -
-
+
+
+ + oi-settings-adjust +
+
+ +
+
+ + oi-panel-right +
+
+ +
+
+ + oi-launch +
+
+ +
+
+ + oi-apps +
+
+ +
+
+ + oi-studio +
+
+ +
+
+ + oi-voip +
+
+ +
+
+ + oi-gif-picker +
+
+ +
+
+ + oi-close +
+
+ +
+
+ + oi-chevron-down +
+
+ +
+
+ + oi-chevron-left +
+
+ +
+
+ + oi-chevron-right +
+
+ +
+
+ + oi-chevron-up +
+
+ +
+
+ + oi-arrows-h +
+
+ +
+
+ + oi-arrows-v +
+
+ +
+
+ + oi-arrow-down-left +
+
+ +
+
+ + oi-arrow-down-right +
+
+ +
+
+ + oi-arrow-down +
+
+ +
+
+ + oi-arrow-left +
+
+ +
+
+ + oi-arrow-right +
+
+ +
+
+ + oi-arrow-up-left +
+
+ +
+
+ + oi-arrow-up-right +
+
+ +
+
+ + oi-arrow-up +
+
+ +
+
+ + oi-draggable +
+
+ +
+
+ + oi-archive +
+
+ +
+
+ + oi-unarchive +
+
+ +
+
+ + oi-smile-add +
+
+ +
+ +RTL adaptations +=============== + +Directional icons have :abbr:`RTL (right-to-left)` adaptations which flip the icons by 180 degrees +when an :abbr:`RTL (right-to-left)` language is selected. + +.. raw:: html + +
+ +
+
+ + oi-chevron-left +
+
+ +
+
+ + oi-chevron-right +
+
+ +
+
+ + oi-arrow-down-left +
+
+ +
+
+ + oi-arrow-down-right +
+
+ +
+
+ + oi-arrow-left +
+
+ +
+
+ + oi-arrow-right +
+
+ +
+
+ + oi-arrow-up-left +
+
+ +
+
+ + oi-arrow-up-right +
+
diff --git a/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff b/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff index 4aabae4df..55ff5fec9 100644 Binary files a/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff and b/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff differ diff --git a/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 b/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 index 3e567234b..3b8146156 100644 Binary files a/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 and b/extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 differ diff --git a/extensions/odoo_theme/static/lib/odoo_ui_icons/style.css b/extensions/odoo_theme/static/lib/odoo_ui_icons/style.css index 6162ee039..5f2e17481 100644 --- a/extensions/odoo_theme/static/lib/odoo_ui_icons/style.css +++ b/extensions/odoo_theme/static/lib/odoo_ui_icons/style.css @@ -7,6 +7,7 @@ } .oi { + display: inline-block; font-family: 'odoo_ui_icons'; speak: never; font-style: normal; @@ -20,13 +21,9 @@ -moz-osx-font-smoothing: grayscale; } -.oi-close:before { - content: '\00d7'; - font-family: sans-serif; - font-weight: bold; -} - .oi-view-pivot:before { content: '\e800'; } +.oi-text-break:before { content: '\e801'; } +.oi-text-inline:before { content: '\e802'; } .oi-voip:before { content: '\e803'; } .oi-odoo:before { content: '\e806'; } .oi-search:before { content: '\e808'; } @@ -37,5 +34,42 @@ .oi-launch:before { content: '\e812'; } .oi-studio:before { content: '\e813'; } .oi-view-kanban:before { content: '\e814'; } +.oi-text-wrap:before { content: '\e815'; } .oi-view-cohort:before { content: '\e816'; } .oi-view-list:before { content: '\e817'; } +.oi-gif-picker:before { content: '\e82e'; } +.oi-chevron-down:before { content: '\e839'; } +.oi-chevron-left:before { content: '\e83a'; } +.oi-chevron-right:before { content: '\e83b'; } +.oi-chevron-up:before { content: '\e83c'; } +.oi-arrows-h:before { content: '\e83d'; } +.oi-arrows-v:before { content: '\e83e'; } +.oi-arrow-down-left:before { content: '\e83f'; } +.oi-arrow-down-right:before { content: '\e840'; } +.oi-arrow-down:before { content: '\e841'; } +.oi-arrow-left:before { content: '\e842'; } +.oi-arrow-right:before { content: '\e843'; } +.oi-arrow-up-left:before { content: '\e844'; } +.oi-arrow-up-right:before { content: '\e845'; } +.oi-arrow-up:before { content: '\e846'; } +.oi-draggable:before { content: '\e847'; } +.oi-view:before { content: '\e861'; } +.oi-archive:before { content: '\e862'; } +.oi-unarchive:before { content: '\e863'; } +.oi-text-effect:before { content: '\e827'; } +.oi-smile-add:before { content: '\e84e'; } +.oi-close:before { content: '\e852'; } + +/* RTL adaptations. */ +/* Flip directional icons by 180 degree. */ +/* ---------------------------------------------------------------------------- */ +.o_rtl .oi-chevron-left, +.o_rtl .oi-chevron-right, +.o_rtl .oi-arrow-down-left, +.o_rtl .oi-arrow-down-right, +.o_rtl .oi-arrow-left, +.o_rtl .oi-arrow-right, +.o_rtl .oi-arrow-up-left, +.o_rtl .oi-arrow-up-right { + transform: rotate(180deg); +}