Style lint: Disallow shorthand & selectors (#8131)
* Impose and apply rule to prevent shorthand selectors * Put one back to test the CI * Put it back to pass CI
This commit is contained in:
Travis Ralston
GitHub
parent
3bb0dc08e8
commit
39a08e1f4f
3 changed files with 59 additions and 54 deletions
|
|
@ -23,5 +23,10 @@ module.exports = {
|
|||
// https://github.com/vector-im/element-web/issues/10544
|
||||
"ignoreAtRules": ["define-mixin"],
|
||||
}],
|
||||
// Disable `&_kind`-style selectors while our unused CSS approach is "Find & Replace All"
|
||||
// rather than a CI thing. Shorthand selectors are harder to detect when searching for a
|
||||
// class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
|
||||
// `&.mx_Class`, etc.
|
||||
"selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
|
||||
// XXX remove this when spaces leaves Beta
|
||||
&_spaceBetaPrompt {
|
||||
.mx_SpaceRoomView_preview_spaceBetaPrompt {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-14px;
|
||||
line-height: $font-24px;
|
||||
|
|
@ -184,7 +184,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_inviter {
|
||||
.mx_SpaceRoomView_preview_inviter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -214,7 +214,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
margin: 20px 0 !important; // override default margin from above
|
||||
}
|
||||
|
||||
&_topic {
|
||||
.mx_SpaceRoomView_preview_topic {
|
||||
font-size: $font-14px;
|
||||
line-height: $font-22px;
|
||||
color: $secondary-content;
|
||||
|
|
@ -223,7 +223,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&_joinButtons {
|
||||
.mx_SpaceRoomView_preview_joinButtons {
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
|
|
@ -243,14 +243,14 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
&_header {
|
||||
.mx_SpaceRoomView_landing_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
width: 80px;
|
||||
|
||||
&_image {
|
||||
.mx_BaseAvatar_image {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -266,7 +266,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_name {
|
||||
.mx_SpaceRoomView_landing_name {
|
||||
margin: 24px 0 16px;
|
||||
font-size: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
|
@ -289,7 +289,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_infoBar {
|
||||
.mx_SpaceRoomView_landing_infoBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -302,8 +302,8 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
font-size: $font-15px;
|
||||
display: inline-block;
|
||||
|
||||
&_public,
|
||||
&_private {
|
||||
.mx_SpaceRoomView_info_public,
|
||||
.mx_SpaceRoomView_info_private {
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -320,17 +320,17 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_public::before {
|
||||
.mx_SpaceRoomView_info_public::before {
|
||||
mask-size: 12px;
|
||||
mask-image: url("$(res)/img/globe.svg");
|
||||
}
|
||||
|
||||
&_private::before {
|
||||
.mx_SpaceRoomView_info_private::before {
|
||||
mask-size: 14px;
|
||||
mask-image: url("$(res)/img/element-icons/lock.svg");
|
||||
}
|
||||
|
||||
&_memberCount {
|
||||
.mx_SpaceRoomView_info_memberCount {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
padding: 0 0 0 16px;
|
||||
|
|
@ -360,8 +360,8 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
|
||||
.mx_SpaceRoomView_landing {
|
||||
&_inviteButton,
|
||||
&_settingsButton {
|
||||
.mx_SpaceRoomView_landing_inviteButton,
|
||||
.mx_SpaceRoomView_landing_settingsButton {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
|
|
@ -372,7 +372,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_inviteButton {
|
||||
.mx_SpaceRoomView_landing_inviteButton {
|
||||
padding: 4px 18px 4px 40px;
|
||||
height: min-content;
|
||||
|
||||
|
|
@ -386,7 +386,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_settingsButton {
|
||||
.mx_SpaceRoomView_landing_settingsButton {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
|
|
@ -404,7 +404,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_topic {
|
||||
.mx_SpaceRoomView_landing_topic {
|
||||
font-size: $font-15px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -423,18 +423,18 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
@mixin SpacePillButton;
|
||||
}
|
||||
|
||||
&_justMeButton::before {
|
||||
.mx_SpaceRoomView_privateScope_justMeButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/members.svg');
|
||||
}
|
||||
|
||||
&_meAndMyTeammatesButton::before {
|
||||
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
|
||||
mask-image: url('$(res)/img/element-icons/community-members.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_inviteTeammates {
|
||||
// XXX remove this when spaces leaves Beta
|
||||
&_betaDisclaimer {
|
||||
.mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
|
@ -450,7 +450,7 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
}
|
||||
}
|
||||
|
||||
&_buttons {
|
||||
.mx_SpaceRoomView_inviteTeammates_buttons {
|
||||
color: $secondary-content;
|
||||
margin-top: 28px;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,22 +17,22 @@ limitations under the License.
|
|||
.mx_AccessibleButton {
|
||||
cursor: pointer;
|
||||
|
||||
&_disabled {
|
||||
.mx_AccessibleButton_disabled {
|
||||
cursor: default;
|
||||
|
||||
&.mx_AccessibleButton_kind {
|
||||
&_primary,
|
||||
&_primary_outline,
|
||||
&_primary_sm,
|
||||
&_link,
|
||||
&_link_inline,
|
||||
&_link_sm {
|
||||
.mx_AccessibleButton_kind_primary,
|
||||
.mx_AccessibleButton_kind_primary_outline,
|
||||
.mx_AccessibleButton_kind_primary_sm,
|
||||
.mx_AccessibleButton_kind_link,
|
||||
.mx_AccessibleButton_kind_link_inline,
|
||||
.mx_AccessibleButton_kind_link_sm {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_hasKind {
|
||||
.mx_AccessibleButton_hasKind {
|
||||
padding: 7px 18px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
|
|
@ -43,27 +43,27 @@ limitations under the License.
|
|||
border: none; // override default <button /> styles
|
||||
|
||||
&.mx_AccessibleButton_kind {
|
||||
&_primary_sm,
|
||||
&_danger_sm,
|
||||
&_link_sm {
|
||||
.mx_AccessibleButton_kind_primary_sm,
|
||||
.mx_AccessibleButton_kind_danger_sm,
|
||||
.mx_AccessibleButton_kind_link_sm {
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
&_primary_sm {
|
||||
.mx_AccessibleButton_kind_primary_sm {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
&_danger_sm {
|
||||
.mx_AccessibleButton_kind_danger_sm {
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $alert;
|
||||
}
|
||||
|
||||
&_link_sm {
|
||||
.mx_AccessibleButton_kind_link_sm {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&_confirm_sm {
|
||||
.mx_AccessibleButton_kind_confirm_sm {
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
|
|
@ -71,7 +71,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&_cancel_sm {
|
||||
.mx_AccessibleButton_kind_cancel_sm {
|
||||
background-color: $alert;
|
||||
|
||||
&::before {
|
||||
|
|
@ -81,33 +81,33 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&_kind {
|
||||
&_primary,
|
||||
&_primary_outline,
|
||||
&_secondary {
|
||||
.mx_AccessibleButton_kind {
|
||||
.mx_AccessibleButton_kind_primary,
|
||||
.mx_AccessibleButton_kind_primary_outline,
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&_primary,
|
||||
&_primary_outline {
|
||||
.mx_AccessibleButton_kind_primary,
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
border: 1px solid $accent;
|
||||
}
|
||||
|
||||
&_primary {
|
||||
.mx_AccessibleButton_kind_primary {
|
||||
color: $button-primary-fg-color;
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
&_primary_outline {
|
||||
.mx_AccessibleButton_kind_primary_outline {
|
||||
color: $accent;
|
||||
background-color: $button-secondary-bg-color;
|
||||
}
|
||||
|
||||
&_secondary {
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&_danger {
|
||||
.mx_AccessibleButton_kind_danger {
|
||||
color: $button-danger-fg-color;
|
||||
background-color: $alert;
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ limitations under the License.
|
|||
background-color: $button-danger-disabled-bg-color;
|
||||
}
|
||||
|
||||
&_outline {
|
||||
.mx_AccessibleButton_kind_danger_outline {
|
||||
color: $alert;
|
||||
background-color: transparent;
|
||||
border: 1px solid $alert;
|
||||
|
|
@ -127,7 +127,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&_sm {
|
||||
.mx_AccessibleButton_kind_danger_sm {
|
||||
&.mx_AccessibleButton_disabled {
|
||||
color: $button-danger-disabled-fg-color;
|
||||
background-color: $button-danger-disabled-bg-color;
|
||||
|
|
@ -135,19 +135,19 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
&_link {
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: $accent;
|
||||
padding: 0;
|
||||
|
||||
&_inline {
|
||||
.mx_AccessibleButton_kind_link_inline {
|
||||
color: $accent;
|
||||
font-size: inherit;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&_confirm_sm,
|
||||
&_cancel_sm {
|
||||
.mx_AccessibleButton_kind_confirm_sm,
|
||||
.mx_AccessibleButton_kind_cancel_sm {
|
||||
padding: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue