diff options
| author | qsm-odoo <qsm@odoo.com> | 2020-07-06 15:22:12 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2020-07-06 15:47:06 +0000 |
| commit | 94b59b1972e1a18e18dfcd6c2ded495391380b9a (patch) | |
| tree | bcc8c43f5081a97189df18fda94deaab62f733b0 /addons/web/static/src/scss/utils.scss | |
| parent | d6a23e49e2cf73c0fc7db9e348fc51e0d81ca14c (diff) | |
[FIX] web, web_editor, *: review chess-like bg for transparency preview
*: 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>
Diffstat (limited to 'addons/web/static/src/scss/utils.scss')
| -rw-r--r-- | addons/web/static/src/scss/utils.scss | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 89c38290da3..a3b41471777 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -98,6 +98,31 @@ @return if($luma > $threshold, $-dark, $-light); } +// Extend placeholder which adds a chess-like background below the color and +// image of an element to preview the transparency of that color and image. +// This is done thanks to both ::before and ::after elements so they must both +// be available. +%o-preview-alpha-background { + position: relative; + z-index: 0; + + &::before { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + z-index: -1; + background-image: url('/web/static/src/img/transparent.png'); + background-size: 10px auto; + border-radius: inherit; + } + &::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + z-index: -1; + background: inherit; // Inherit all background properties + border-radius: inherit; + } +} + // ------------------------------------------------------------------ // Padding // ------------------------------------------------------------------ |