summaryrefslogtreecommitdiff
path: root/addons/web_editor/static/src/scss/web_editor.variables.scss
AgeCommit message (Collapse)Author
2020-11-25[IMP] web_editor: shape - merge some style + fix colorJeremy Kersten
Blocks and Rainy / Airy and Zigs merged together Fix color of Bold 5 and bold 6 shape that are not easy to use due to contrast with black, now it is grey by default. task-2357174 closes odoo/odoo#62338 Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
2020-11-25[FIX] web_editor: make Bold shapes 10 & 11 transparentBenoit Socias
Before this commit Bold shape 10 & 11 had no transparent color After this commit Bold shape 10 & 11 have a transparent color instead of their former color #3 (#F6F6F6) task-2357174 https://github.com/odoo/odoo/pull/59613
2020-10-07[IMP] web_editor: replace some bottom shape colors with transparentSamuel Degueldre
Previously, rainy 05 and wavy 06 had a bottom color with a hard edge. This means that in order to not have a harsh color transition in the section, the user would have to match the bottom color to the background color of the section or vice versa. This commit makes it so that this color is transparent by default instead. This means that the user can now simply choose the background color and have the same result, without having to configure two separate colors. Part of: odoo/odoo#58333 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-09-28[IMP] web_editor, *: automatically increase default link color contrastqsm-odoo
*: website Inside a color combination (or outside, as considered the same as inside color combination number 1), the link color can be configured. It is set by themes to one of the 5 theme colors. Sometimes, no color of those 5 colors contrast enough with the color combination's background and we accepted that before, relying on the fact the user can change the link color if he wants too. Now we automatically increase the contrast of those link colors, except if the user overrides it. This system might be extended to all foreground colors in the future but the system has to be improved for that. closes odoo/odoo#58538 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-09-04[FIX] web_editor: various shape fixes (hide on mobile, bad joint, ...)Samuel Degueldre
This commit fixes various things with the shapes: shapes are now hidden on mobile by default, the shapes "blobs 02" and "blobs 03" now connect properly, and the shape pager now shows the name of the current page. Airy shapes now have embedded media-queries so that they're more visible in the shape selector. The order of the pages in the shape selector has been adapted so that shapes that are easier to use are on the first few pages. A number of shapes have been "cut" differently to leave more space for content, and some shapes have had their top/bottom anchoring swapped. task-2319484 closes odoo/odoo#56567 Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
2020-08-27[IMP] website: add footer "scroll-to-top" button optionqsm-odoo
Part of https://github.com/odoo/odoo/pull/56427 task-2264627 Co-authored-by: stefanorigano (SRI) <sri@odoo.com> Co-authored-by: Cocographique <nmi@odoo.com>
2020-08-22[IMP] web_editor, website: introduce foldable zones in the editor UIqsm-odoo
Now any set of widgets and rows can be placed in a we-collapse element so that those elements can be foldable. The first element inside (or the mentioned "string" on the we-collapse element itself) is used as the always shown element (with a toggler on its left to toggle the visibility of the other items). we-collapse inside other we-collapse is supported as well. Limitations / Other infos: - The use of '⌙' and &emsp; characters is not automatic (yet?). Sometimes it actually make sense to use them without a we-collapse or to not use them in a we-collapse. - The use of we-collapse is limited to widgets inside the same option. So unfortunately, there is no current way to add all bg image options in a folable section as those contain many different options. Maybe in the future. Part of https://github.com/odoo/odoo/pull/56350 closes odoo/odoo#56350 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-08-14[IMP] web_editor, website, *: adjust general ui spacing/alignmentstefanorigano (SRI)
*: website_form Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[IMP] web_editor, *: add caret icon to dropdowns & colorpicker modalqsm-odoo
*: website Part of https://github.com/odoo/odoo/pull/55959 task-2157252 Co-authored-by: stefanorigano (SRI) <sri@odoo.com>
2020-08-14[IMP] web_editor: refine overlay handlers design and behaviorstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[IMP] web_editor, *: make general adaptations of the editor UIstefanorigano (SRI)
*: website Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[IMP] web_editor: increase font-size/spacing of the editor UIstefanorigano (SRI)
11px was set as default font-size when achieving 5 or 6 edition levels in the sidebar was the norm. Thanks to the snippet's cleanup, resulting in a reduced number of editable elements, we can now increase the default fon-size and, consequentially, all general spacings. Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[IMP] web_editor, *: review 'options' tab specific components designstefanorigano (SRI)
*: website Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[REF] web_editor, website: allow reusing tabs designstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-14[IMP] web_editor: review we-customizeblock-options borderstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55959 task-2157252
2020-08-07[IMP] web_editor: restore bootstrap's default monospace font-familystefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55645 task-2157252 closes odoo/odoo#55645 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-08-07[IMP] web_editor: review dropdown designstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55645 task-2157252
2020-08-07[FIX] web_editor: fix typos on variable definitionsstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55645 task-2157252
2020-08-07[IMP] web_editor: review range widget dimensionsstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55645 task-2157252
2020-08-07[IMP] web_editor: make some color adjustments for editor panelstefanorigano (SRI)
Part of https://github.com/odoo/odoo/pull/55645 task-2157252
2020-08-07[IMP] web_editor, website: add background shapes snippet optionSamuel Degueldre
This commit adds a new snippet option allowing the user to choose one of a series of SVG shapes as their background, or to be overlaid over the background image of a snippet and to customize the colors of those shapes. Part of https://github.com/odoo/odoo/pull/53017 task-2210790 closes odoo/odoo#53017 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-07-30[IMP] web_editor: render inline svg icons, apply css stylestefanorigano (SRI)
Render inline SVG inside buttons in order to allow CSS styling. Define SVG icons design for normal/hover status applying the same colors as default text buttons. In order to support multi-colors SVGs, this commits will affect inner shapes in different ways: - '.o_graphic' shapes: will gets the UI btns colors (default/hover) - '.o_subdle' shapes: will gets a slightly reduced default text color Shapes without '.o_graphic/.o_subdle' classes will be rendered normally, as defined in the svg code. Part of https://github.com/odoo/odoo/pull/54913 task-2157252 Co-authored-by: qsm-odoo <qsm@odoo.com>
2020-07-14[IMP] web_editor, *: introduce new "button group" editor widgetqsm-odoo
*: website, website_form Basically work just as a we-select but with a different design. Part of https://github.com/odoo/odoo/pull/53930 task-2157252
2020-07-14[IMP] web_editor, *: review the editor design CSSqsm-odoo
*: web, mass_mailing, website, website_form, website_sale New CSS design of the editor (step 1/x). This work is unfortunately far from perfect but is a first step towards what we want. In particular, much CSS linked to elements that are meant to be removed/moved in the upcoming weeks was done in a huge rush but will thus hopefully be removed/reviewed before the 14.0 release. As the design is now far more complex including gradients and other "complex" elements, it was also very difficult to keep a design based on css-variable so this system was removed, which means that the editor now appears the same everywhere (backend, frontend, ...). The original goal of this system was to have an adapted style for backend, frontend and website visitors. Unfortunately, the current result was a very good frontend editor design, a not-so-good backend editor design (for mass mailing at least) and a totally unadapted design for the website visitors. Making this perfect will be achievable by loading different assets for those 3 areas and hopefully those assets will only differ by the values of editor scss variables. Part of https://github.com/odoo/odoo/pull/53930 task-2157252
2020-07-09[REF] web_editor, *: review how html properties are printed (scss)qsm-odoo
*: website Make sure strings are printed quoted and null values are not printed. Part of https://github.com/odoo/odoo/pull/54065 task-2291398
2020-07-06[FIX] web_editor: prevent o-apply-colors to force important rulesqsm-odoo
The mixin was inconsistent: depending on the color, the created rules were `!important` or not. This causes bugs with new master features. closes odoo/odoo#54151 X-original-commit: 83d8c8b66bd9e58b08fe0aa66d2be7bab691ce3e Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-07-06[FIX] web, web_editor, *: review chess-like bg for transparency previewqsm-odoo
*: website The style to achieve the chess-like bg result was duplicated at many places. The 'web' app was also actually using an image from the 'web_editor' app (we can live with it in stable as web_editor always comes with web in auto_install but this was still a mistake). closes odoo/odoo#54154 Also: fix some layout issue in the colorpicker widget. Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-06-30[IMP] web, *: replace the bootstrap backdrop element with a bg on modalsBenjamin Vray
*: web_editor Do not display the backdrop element added by bootstrap in the body and add a background on the modal to keep the same effect. The bootstrap backdrop was probably useful for compatibility with <IE9 but is no longer needed. This also avoids z-index issues because modals could be opened in an element (e.g. the website #wrapwrap) whose stacking context is different of the body one (where the backdrop is opened). This would make the backdrop appears on top of the modal. Part of https://github.com/odoo/odoo/pull/49142 Related to task-2229551 Co-authored-by: qsm-odoo <qsm@odoo.com>
2020-06-12[IMP] web_editor: use the same style for snippet overlay in previewLaurent Stukkens (LTU)
Before this commit, hovering options of a parent snippet displayed two overlays: it's confusing. After this commit, when hovering a parent property, only the parent overlay is displayed, with the same style. task-2182911 closes odoo/odoo#51476 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com> Co-authored-by: qsm-odoo <qsm@odoo.com>
2020-06-02[IMP] website, *: define 17 generic color palettesstefanorigano (SRI)
*: web_editor Those will be shared by all themes. Part of https://github.com/odoo/odoo/pull/52224 task-2197038 closes odoo/odoo#52224 Related: odoo/design-themes#290 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-06-02[IMP] website, *: refine default theme designstefanorigano (SRI)
*: web_editor Part of https://github.com/odoo/odoo/pull/52223 task-2197038
2020-06-02[IMP] website, *: allow to use a color preset for menu and footerqsm-odoo
*: web_editor, web Also now allows to control the copyright section color. This commit also allows to use color name alias when the user choose one of the 5 main colors or a gray color for one component (e.g. if the user picks 'o-color-1' as the color for its text in preset 4, then it will no longer be linked to the current css color of 'o-color-1' but to 'o-color-1' directly; meaning that if that color changes in the future, so will the text of preset 4). Part of https://github.com/odoo/odoo/pull/52223 task-2197038
2020-06-02[IMP] website, *: allow presets user editionqsm-odoo
*: web, web_editor Now, the user can edit each individual component of each color preset thanks to the third tab of the left panel. The edition of the first preset is the same as the others for the users but it is actually also used for "no-preset" areas, meaning that they impact the whole website by default (*without impacting the other presets*). The website thus appears as areas using presets, preset 1 being the default (in the future all areas will be customizable with a different preset). The only difference between "using preset 1 explicitely" and "not using a preset" will be that background color is transparent in no-preset, leaving the body background appear. If the body background has no image, then there is no difference at all as the background color of the body is set to be the background color of the preset 1. In boxed mode, that color is used for the "box" and the website body uses a different customizable color. Note: before this commit, the "text" color edition was used to set the main text color and one of the constrasting color for the color-yiq function (the darkest if a dark color or the lightest if a light color). That last part has been removed and automatic colors will now always use $gray-900 and $white as contrasting colors, unless changed by the theme explicitely. This needed to be removed as now the "text color" edition has been moved in the "preset 1" config and should thus only impact the "no-preset / preset 1" areas instead of all the presets. Part of https://github.com/odoo/odoo/pull/45856 task-2197038
2020-06-02[IMP] web_editor, website, *: use new color namesqsm-odoo
*: mass_mailing, website_blog, website_forum, website_hr_recruitment Deprecate alpha, beta, gamma, delta and espilon color names and now use a new color system: o-color-x, with x from 1 to 5. This will allow to review the colors of all themes to have nice visuals for the new color combinations classes, without breaking the current uses of bg-alpha, alert-delta, etc in current websites of customers (by keeping the old color and classes for compatibility). This will also allow to uniformize all themes under the same conventions to enforce BS color override: - o-color-1 used as primary (as before, for alpha) - o-color-2 used as secondary (as before, for beta) Before, some themes were not following the 2 guidelines. The users using those themes will simply have the possibility to choose o-color-1 and o-color-2 colors accordingly to restore their website without breaking the new system features. Another change is that those colors are defined through color palettes and not theme color palettes. This will avoid them to generate automatic bootstrap classes which we don't want (alert, btn) and generate the one we want by ourself. Note: for mass mailing, the colors and classes also have been renamed but the system stays unchanged. Part of https://github.com/odoo/odoo/pull/45856 task-2197038
2020-06-02[IMP] web_editor: allow color combinations specific override and accessqsm-odoo
Now, the colors used in a color combination are accessible and possible to override through the BS $colors map, with a specific prefix (o-cc for "color combination"). So, to access the 'headings' color of the color combination 3, use: color('o-cc3-headings'); If you don't need to completely override a color combinations preset, you can override what you want through a color palette: $o-color-palettes: ( ( 'text': red, 'o-cc4-btn-primary': 'alpha', // ... ) ); As our current system allows the user to customize colors of the color palette (like for menu, default text, etc), this will allow to easily give them the possibility to override combinations colors in a future update. Part of https://github.com/odoo/odoo/pull/45856 task-2197038
2020-06-02[IMP] website, *: introduce new classes to color snippetsqsm-odoo
*: web, web_editor, website_blog, website_event New o_cc${xxx} classes where ${xxx} is a number [1-5] to style snippets: they come with a background color, a text color, headings colors, a link color, primary button colors and secondary button colors which will later be possible to customize by the user. The classes are made so that they are working on two levels. So if a column receives a color class and the snippet too, everything will work fine. More than 2 levels are not supported and the editor is made so those cases should not appear. See o_colored_level class. Part of https://github.com/odoo/odoo/pull/45856 task-2197038
2020-06-01[IMP] website, web, *: allow to choose website font-sizeqsm-odoo
*: web_editor Note: this work also prepare the code to be able to support different font configs per font family. Part of https://github.com/odoo/odoo/pull/52220 task-2197038
2020-05-05[FIX] web_editor: add access to all grays in bootstrap_overridden filesqsm-odoo
Before this commit, and in 13.0, you had access to gray colors in bootstrap_overridden.scss files through the `palette-gray` function but only if the gray was explicitely defined in the theme palette. This was fine as only those were used at that time. Now, some themes want to use the default BS gray values in those files to customize other variables. The solution is to "force" all grays in the selected gray palette, using the BS values by default. closes odoo/odoo#50640 X-original-commit: fcb62edf3118d2d615296f293e6694b0e533bc99 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-03-07[FIX] web_editor, website: review default palette systemqsm-odoo
Before this commit, this was done: 1) Primary variables (app order): (a) web_editor: define palettes (color + theme + gray), only 1 empty one. Mark the first ones as the selected ones. (b) website: fill all defined palettes with the website-related color key and values (body, menu, logo-height, etc). + define "website values" palette. 2) Secondary variables (reverse app order): (c) website: merge the user palettes on top of the selected palettes (so user values overriding values added in (a) and (b)), the resulting palettes are added in palettes lists and the selected palette numbers are set to select those ones. + final selection of "website values" palette. (d) web_editor: final selection of the selected color palette amongst the color palettes. -- The problem with all of this is that the definition of palettes in themes (occuring between step (b) and (c)) never received the website-related color key and values of step (b) and were thus forced to redefine all of those by themself even if they wanted to use the default website one. This commit changes the system so that step (a) and (b) now define "base" palettes (color, theme, gray, website values) and step (c) and (d) now merge the final selected palettes with those "base" palettes. This is in fact theoratically more efficient and allows to not force themes to define every possible palette value we might introduce. closes odoo/odoo#47097 Related: odoo/design-themes#216 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-11-18[IMP] web_editor, website: generalize colorpickerfja-odoo
Currently we have: - a colorpicker for background color of snippets - a colorpicker for foreground and background text (topbar) - a colorpicker for menu/footer/navbar/etc These 3 are separate colorpickers with different options. After this Commit All 3 will use the same color palette wich allow you to select theme color, common colors, custom color and transparent filter. Part of https://github.com/odoo/odoo/pull/38959 maintask-2066614 task-2087383
2019-11-18[IMP] web_editor, *: introduce select & checkboxes for the left panel UIqsm-odoo
* website, website_blog, website_form, website_sale + introduce default UI for snippet options + refactor style of icon buttons Part of https://github.com/odoo/odoo/pull/38959 task-2066614
2019-10-10[FIX] website, *: force website UI dropdown styleAndrea Ulliana
* web_editor The purpose is to force our dropdown style in our UI so that themes do not break it anymore (same way all the other elements are forced (cards, headings, etc)). task-2059538 closes odoo/odoo#38321 X-original-commit: 4ef0eac5ba134f462f72f3e9c60e5c9fc95f3a8c Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com> Co-authored-by: qsm-odoo <qsm@odoo.com>
2019-08-29[FIX] web_editor, *: review editor elements zindexqsm-odoo
* website_mass_mailing The overlay has to go over content dropdowns and modal but below technical modal and dropdowns.
2019-08-28[IMP] web_editor, *: introduce and restore new web_editor UIqsm-odoo
* mass_mailing, note, website, website_blog, website_form, website_mass_mailing, website_sale This commit, unfortunately, mixes three things: - Restoring as much as possible the scss organisation to allow styling the web_editor UI properly. - Fixing some bugs like a border around the page once the editor is loaded, no ability to scroll the snippets, etc - Introducing a whole new UI for snippet options: a left panel instead of the old dropdown & button overlay. Note: this commit also do some linting and ES6 convertion even though some of it has been done in the parent commit. Note 2: some elements that were removed are still styled in the POS apps but this is because part of a feature was removed while leaving dead code behind, this is handled in another PR which is to be merged (https://github.com/odoo/odoo/pull/36136). Part of https://github.com/odoo/odoo/pull/36068 task-1942370 closes odoo/odoo#36068 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-08-28[FIX] web_editor, *: review assets organisationqsm-odoo
* mass_mailing, point_of_sale, website - Lib files were included twice - Variables files were split but added multiple times in the same assets bundle - Useless assets templates were defined or split - ... Part of https://github.com/odoo/odoo/pull/36068 Related to task-1942370
2019-02-22[MERGE] forward port branch saas-12.1 up to 0f4abc5c228Christophe Simonis
2019-02-21[MERGE] forward port branch 12.0 up to 84143a34b31Christophe Simonis
2019-02-14[FIX] website, *: restore and enforce Odoo UI designqsm-odoo
* web_editor BS conflicts with our UI again: btn sizes and form controls are more difficult to force with BS4, this commit adapts the controls to use less problematic sizes, and adds/adapts some more forcing rules. Part of https://github.com/odoo/odoo/pull/31117 task-1941156
2018-12-04[REF] web_editor, web_unsplash: review load more featureqsm-odoo
* Simplify the code * Make the feature mork without unsplash * Handle corner cases task-1896705
2018-11-14[FIX] website, *: enforce correct UI text-muted colorqsm-odoo
* web_editor - Restore the preservation of Odoo text-muted color (the rule became !important with BS4 and had thus to become !important in the preservation mixin). - Preserve base design in the "new content" menu (which now uses text-muted). Indeed, in some themes, the "new content" links were not even visible anymore. closes odoo/odoo#28666