Align Vector link styles with Minerva

To make sure this is code-ified I have added the rule selector-max-specificity
to check specificity and error if we ever attempt to change this and to also
prevent us from writing overly complicated selectors (for now the default is
based on the status quo)
Additional change is required to skinStyle file to accomodate the new rule.

Bug: T373989
Change-Id: I3921d1fb3a098faae8f5a8bdc895783f1b298daa
This commit is contained in:
ksarabia 2024-10-21 15:29:02 -05:00 committed by Jdlrobson
parent 4f0137ff43
commit eb74bc6080
3 changed files with 23 additions and 7 deletions

View file

@ -8,6 +8,13 @@
"declaration-property-unit-disallowed-list": null,
"no-descending-specificity": null,
"selector-class-pattern": null,
"selector-max-id": null
}
"selector-max-id": null,
"selector-max-specificity": "1,4,2"
},
"overrides": [ {
"files": [ "resources/skins.vector.styles/links.less" ],
"rules": {
"selector-max-specificity": "0,0,1"
}
} ]
}

View file

@ -1,16 +1,21 @@
a {
/*
* This not does apply to links with role button per discussion on T373989
* The `where` it used here as specificity is important so support overriding
* in skins and extensions.
* When changing this file - DO NOT disable stylelint rule selector-max-specificity
*/
a:where( :not( [ role='button' ] ) ) {
.cdx-mixin-link-base();
/* T373989 */
border-radius: 0;
}
// Red links
a.new {
// Red links - DO NOT disable stylelint rule selector-max-specificity for this rule.
a:where( .new:not( [ role='button' ] ) ) {
.cdx-mixin-link-red();
}
// External links
// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage.
/* stylelint-disable selector-max-specificity */
.mw-parser-output {
a {
// Deal with long links (T327334, inspired by Minerva solution T62387)
@ -34,12 +39,14 @@ a.new {
}
}
}
/* stylelint-enable selector-max-specificity */
/**
* The following styles are copied from content.links.less
*/
/* self links */
/* stylelint-disable selector-max-specificity */
a.mw-selflink {
color: inherit;
font-weight: bold;
@ -65,3 +72,4 @@ a.mw-selflink {
background: none !important; /* stylelint-disable-line declaration-no-important */
padding: 0 !important; /* stylelint-disable-line declaration-no-important */
}
/* stylelint-enable selector-max-specificity */

View file

@ -1,3 +1,4 @@
/* stylelint-disable selector-max-specificity */
.skin-vector-legacy {
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {