From 959931bf7cd15c3a15d992d0a8e6c9c24d33aa5f Mon Sep 17 00:00:00 2001 From: Aleksandr Grenishin Date: Tue, 2 Aug 2022 18:27:22 +0300 Subject: [PATCH] fix: use zero specific css selectors for common classes to allow user to override styles (#209) --- blocks/CloudImageEditor/src/css/common.css | 15 ++++++++------- blocks/CloudImageEditor/src/css/icons.css | 9 ++++----- blocks/CloudImageEditor/src/css/l10n.css | 3 +-- blocks/themes/lr-basic/common.css | 3 +-- blocks/themes/lr-basic/icons.css | 3 +-- blocks/themes/lr-basic/l10n.css | 3 +-- blocks/themes/lr-basic/theme.css | 9 +++------ solutions/file-uploader/minimal/index.css | 2 +- 8 files changed, 20 insertions(+), 27 deletions(-) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index 0c3f07452..239a2dbb9 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -1,4 +1,4 @@ -.lr-cldtr-common, +:where(.lr-cldtr-common), :host { /* Theme settings >>> */ --rgb-primary-accent: 6, 2, 196; @@ -61,38 +61,39 @@ --shadow-base: 0px 5px 15px rgba(var(--rgb-shadow), 0.1), 0px 1px 4px rgba(var(--rgb-shadow), 0.15); } -.lr-cldtr-common :is([can-handle-paste]:hover, [can-handle-paste]:focus), +:where(.lr-cldtr-common) :is([can-handle-paste]:hover, [can-handle-paste]:focus), :host :is([can-handle-paste]:hover, [can-handle-paste]:focus) { --can-handle-paste: 'true'; } -.lr-cldtr-common :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover), +:where(.lr-cldtr-common) + :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover), :host :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) { --filter-effect: var(--hover-filter) !important; --opacity-effect: var(--hover-opacity) !important; --color-effect: var(--hover-color-rgb) !important; } -.lr-cldtr-common :is([tabindex]:active, [with-effects]:active), +:where(.lr-cldtr-common) :is([tabindex]:active, [with-effects]:active), :host :is([tabindex]:active, [with-effects]:active) { --filter-effect: var(--down-filter) !important; --opacity-effect: var(--down-opacity) !important; --color-effect: var(--down-color-rgb) !important; } -.lr-cldtr-common :is([tabindex][active], [with-effects][active]), +:where(.lr-cldtr-common) :is([tabindex][active], [with-effects][active]), :host :is([tabindex][active], [with-effects][active]) { --filter-effect: var(--active-filter) !important; --opacity-effect: var(--active-opacity) !important; --color-effect: var(--active-color-rgb) !important; } -.lr-cldtr-common [hidden-scrollbar]::-webkit-scrollbar, +:where(.lr-cldtr-common) [hidden-scrollbar]::-webkit-scrollbar, :host [hidden-scrollbar]::-webkit-scrollbar { display: none; } -.lr-cldtr-common [hidden-scrollbar], +:where(.lr-cldtr-common) [hidden-scrollbar], :host [hidden-scrollbar] { -ms-overflow-style: none; scrollbar-width: none; diff --git a/blocks/CloudImageEditor/src/css/icons.css b/blocks/CloudImageEditor/src/css/icons.css index 150e6e035..33ccbc00d 100644 --- a/blocks/CloudImageEditor/src/css/icons.css +++ b/blocks/CloudImageEditor/src/css/icons.css @@ -1,5 +1,5 @@ /* stylelint-disable string-no-newline */ -.lr-cldtr-common lr-icon { +:where(.lr-cldtr-common) lr-icon { display: flex; align-items: center; justify-content: center; @@ -7,20 +7,19 @@ height: 100%; } -.lr-cldtr-common lr-icon svg { +:where(.lr-cldtr-common) lr-icon svg { width: unset; height: unset; } -.lr-cldtr-common lr-icon:not([raw]) path { +:where(.lr-cldtr-common) lr-icon:not([raw]) path { stroke-linejoin: round; fill: none; stroke: currentColor; stroke-width: 1.2; } -.lr-cldtr-icons, -.lr-cldtr-common, +:where(.lr-cldtr-icons, .lr-cldtr-common), :host { --icon-rotate: 'M13.5.399902L12 1.9999l1.5 1.6M12.0234 2H14.4C16.3882 2 18 3.61178 18 5.6V8M4 17h9c.5523 0 1-.4477 1-1V7c0-.55228-.4477-1-1-1H4c-.55228 0-1 .44771-1 1v9c0 .5523.44771 1 1 1z'; --icon-mirror: 'M5.00042.399902l-1.5 1.599998 1.5 1.6M15.0004.399902l1.5 1.599998-1.5 1.6M3.51995 2H16.477M8.50042 16.7V6.04604c0-.30141-.39466-.41459-.5544-.159L1.28729 16.541c-.12488.1998.01877.459.2544.459h6.65873c.16568 0 .3-.1343.3-.3zm2.99998 0V6.04604c0-.30141.3947-.41459.5544-.159L18.7135 16.541c.1249.1998-.0187.459-.2544.459h-6.6587c-.1657 0-.3-.1343-.3-.3z'; diff --git a/blocks/CloudImageEditor/src/css/l10n.css b/blocks/CloudImageEditor/src/css/l10n.css index 4a84f8a08..d4b75a803 100644 --- a/blocks/CloudImageEditor/src/css/l10n.css +++ b/blocks/CloudImageEditor/src/css/l10n.css @@ -1,5 +1,4 @@ -.lr-cldtr-l10n_en-US, -.lr-cldtr-common, +:where(.lr-cldtr-l10n_en-US, .lr-cldtr-common), :host { --l10n-cancel: 'Cancel'; --l10n-apply: 'Apply'; diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css index d63cdedeb..46fb78ac2 100644 --- a/blocks/themes/lr-basic/common.css +++ b/blocks/themes/lr-basic/common.css @@ -1,5 +1,4 @@ -.lr-wgt-theme, -.lr-wgt-common, +:where(.lr-wgt-theme, .lr-wgt-common), :host { color: var(--clr-txt); diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 2236ad3bb..08674a8d4 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -1,5 +1,4 @@ -.lr-wgt-icons, -.lr-wgt-common, +:where(.lr-wgt-icons, .lr-wgt-common), :host { --icon-default: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z'; --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z'; diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css index c4cbdbc05..2474de84d 100644 --- a/blocks/themes/lr-basic/l10n.css +++ b/blocks/themes/lr-basic/l10n.css @@ -1,5 +1,4 @@ -.lr-wgt-l10n_en-US, -.lr-wgt-common, +:where(.lr-wgt-l10n_en-US, .lr-wgt-common), :host { --l10n-upload-file: 'Upload file'; --l10n-upload-files: 'Upload files'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 209ec962f..f48365b9f 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -1,5 +1,4 @@ -.lr-wgt-theme, -.lr-wgt-common, +:where(.lr-wgt-theme, .lr-wgt-common), :host { /* Base values */ @@ -166,16 +165,14 @@ } @media only screen and (max-height: 600px) { - .lr-wgt-theme, - .lr-wgt-common, + :where(.lr-wgt-theme, .lr-wgt-common), :host { --modal-max-h: 100%; } } @media only screen and (max-width: 800px) { - .lr-wgt-theme, - .lr-wgt-common, + :where(.lr-wgt-theme, .lr-wgt-common), :host { --modal-max-w: 100%; --modal-max-h: 100%; diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 27362dde6..d9ffe2bc9 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -1,6 +1,6 @@ @import url('../../../blocks/themes/lr-basic/index.css'); -.lr-wgt-common, +:where(.lr-wgt-common), :host { --cfg-multiple: 0; --cfg-confirm-upload: 0;