mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
Enable stylelint rule no-unknown-custom-properties (#28473)
* Enable stylelint rule no-unknown-custom-properties Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix cpd css vars Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove dead styling Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove invalid css Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
cafa02ccc2
commit
abf6d58b7b
12 changed files with 58 additions and 88 deletions
|
|
@ -1,7 +1,7 @@
|
|||
module.exports = {
|
||||
extends: ["stylelint-config-standard"],
|
||||
customSyntax: "postcss-scss",
|
||||
plugins: ["stylelint-scss"],
|
||||
plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
|
||||
rules: {
|
||||
"comment-empty-line-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
|
|
@ -46,5 +46,33 @@ module.exports = {
|
|||
"number-max-precision": null,
|
||||
"no-invalid-double-slash-comments": true,
|
||||
"media-feature-range-notation": null,
|
||||
"csstools/value-no-unknown-custom-properties": [
|
||||
true,
|
||||
{
|
||||
importFrom: [
|
||||
{ from: "res/css/_common.pcss", type: "css" },
|
||||
{ from: "res/themes/light/css/_light.pcss", type: "css" },
|
||||
// Right now our styles share vars all over the place, this is not ideal but acceptable for now
|
||||
{ from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
|
||||
{ from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
|
||||
{ from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
|
||||
{ from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
|
||||
{ from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
|
||||
{ from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
|
||||
{ from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
|
||||
{ from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
|
||||
{ from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
|
||||
{ from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
|
||||
{ from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
|
||||
{ from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
|
||||
{ from: "res/css/structures/_RoomView.pcss", type: "css" },
|
||||
// Compound vars
|
||||
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
|
||||
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
|
||||
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
|
||||
"node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -276,6 +276,7 @@
|
|||
"stylelint": "^16.1.0",
|
||||
"stylelint-config-standard": "^36.0.0",
|
||||
"stylelint-scss": "^6.0.0",
|
||||
"stylelint-value-no-unknown-custom-properties": "^6.0.1",
|
||||
"terser-webpack-plugin": "^5.3.9",
|
||||
"ts-node": "^10.9.1",
|
||||
"ts-prune": "^0.10.3",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
|
|||
font-size: $font-12px;
|
||||
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
|
||||
overflow-y: scroll;
|
||||
.mx_AppPermission_bolder {
|
||||
.mx_AppPermission_bolder,
|
||||
.mx_AppPermission_content_bolder {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
.mx_AppPermission_content {
|
||||
|
|
@ -21,10 +22,6 @@ Please see LICENSE files in the repository root for full details.
|
|||
margin-block: 12px;
|
||||
}
|
||||
|
||||
.mx_AppPermission_content_bolder {
|
||||
font-weight: var(--font-semi-bold);
|
||||
}
|
||||
|
||||
.mx_TextWithTooltip_target--helpIcon {
|
||||
display: inline-block;
|
||||
height: $font-14px; /* align with characters on the same line */
|
||||
|
|
|
|||
|
|
@ -207,62 +207,3 @@ Please see LICENSE files in the repository root for full details.
|
|||
min-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_Indicator_pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_Indicator_pulse_shadow {
|
||||
0% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(2.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Indicator {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
width: var(--RoomHeader-indicator-dot-size);
|
||||
height: var(--RoomHeader-indicator-dot-size);
|
||||
border-radius: 50%;
|
||||
transform: scale(1);
|
||||
background: var(--RoomHeader-indicator-pulseColor);
|
||||
box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
|
||||
animation: mx_Indicator_pulse 2s infinite;
|
||||
animation-iteration-count: 1;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(1);
|
||||
transform-origin: center center;
|
||||
animation-name: mx_Indicator_pulse_shadow;
|
||||
animation-duration: inherit;
|
||||
animation-iteration-count: inherit;
|
||||
border-radius: 50%;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--cpd-color-bg-interactive-primary-rest);
|
||||
border-color: var(--cpd-color-bg-action-primary-rest);
|
||||
|
||||
&::before {
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
|
|
|
|||
|
|
@ -28,10 +28,11 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
/* Waveforms are present in live recording only */
|
||||
.mx_Waveform {
|
||||
/* default, overridden in JS */
|
||||
--barHeight: 1;
|
||||
.mx_Waveform_bar {
|
||||
background-color: $quaternary-content;
|
||||
height: 100%;
|
||||
/* Variable set by a JS component */
|
||||
transform: scaleY(max(0.05, var(--barHeight)));
|
||||
|
||||
&.mx_Waveform_bar_100pct {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ Please see LICENSE files in the repository root for full details.
|
|||
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
|
||||
|
||||
.mx_SeekBar {
|
||||
/* default, overridden in JS */
|
||||
--fillTo: 1;
|
||||
|
||||
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
|
||||
/* need to support IE. */
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,7 @@ progress.mx_ProgressBar {
|
|||
@mixin ProgressBarBorderRadius 6px;
|
||||
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
|
||||
@mixin ProgressBarBgColour $progressbar-bg-color;
|
||||
::-webkit-progress-value {
|
||||
&::-webkit-progress-value {
|
||||
transition: width 1s;
|
||||
}
|
||||
::-moz-progress-bar {
|
||||
transition: padding-bottom 1s;
|
||||
padding-bottom: var(--value);
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-90deg) translateX(-15px);
|
||||
padding-left: 15px;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
|
|||
*/
|
||||
|
||||
.mx_BasicMessageComposer {
|
||||
/* These are set in Javascript */
|
||||
--avatar-letter: "";
|
||||
--avatar-background: unset;
|
||||
--placeholder: "";
|
||||
|
||||
position: relative;
|
||||
|
||||
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
|
||||
|
|
|
|||
|
|
@ -1017,16 +1017,6 @@ $left-gutter: 64px;
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Inverse of the above to *disable* the animation on any indicators. This approach */
|
||||
/* is less pretty, but is easier to target because otherwise we need to define the */
|
||||
/* animation for when it's shown which means duplicating the style definition in */
|
||||
/* multiple places. */
|
||||
.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
|
||||
&:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile[data-shape="ThreadsList"],
|
||||
.mx_EventTile[data-shape="Notification"] {
|
||||
--topOffset: $spacing-12;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
|
|||
*/
|
||||
|
||||
.mx_WysiwygComposer_Editor_container {
|
||||
/* These are set in Javascript */
|
||||
--avatar-letter: "";
|
||||
--avatar-background: unset;
|
||||
--placeholder: "";
|
||||
|
||||
@keyframes visualbell {
|
||||
from {
|
||||
background-color: $visual-bell-bg-color;
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -10385,7 +10385,7 @@ resolve.exports@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
|
||||
integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
|
||||
|
||||
resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.4:
|
||||
resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.22.8:
|
||||
version "1.22.8"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
|
||||
integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
|
||||
|
|
@ -11127,6 +11127,14 @@ stylelint-scss@^6.0.0:
|
|||
postcss-selector-parser "^6.1.2"
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
stylelint-value-no-unknown-custom-properties@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-6.0.1.tgz#526cc20344f4fc5e33231152767a432b6ed8f957"
|
||||
integrity sha512-N60PTdaTknB35j6D4FhW0GL2LlBRV++bRpXMMldWMQZ240yFQaoltzlLY4lXXs7Z0J5mNUYZQ/gjyVtU2DhCMA==
|
||||
dependencies:
|
||||
postcss-value-parser "^4.2.0"
|
||||
resolve "^1.22.8"
|
||||
|
||||
stylelint@^16.1.0:
|
||||
version "16.10.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.10.0.tgz#452b42a5d82f2ad910954eb2ba2b3a2ec583cd75"
|
||||
|
|
|
|||
Loading…
Reference in a new issue