watcha
/
watcha-matrix-react-sdk
mirror of https://github.com/watcha-fr/matrix-react-sdk
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Style lint: Disallow shorthand `&` selectors (#8131)

Browse Source 
* Impose and apply rule to prevent shorthand selectors

* Put one back to test the CI

* Put it back to pass CI
watcha-feature/make-nextcloud-documents-integration-a-local-widget
Travis Ralston 4 years ago committed by GitHub
parent 3bb0dc08e8
commit 39a08e1f4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 54 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      .stylelintrc.js
  2. 44
      res/css/structures/_SpaceRoomView.scss
  3. 64
      res/css/views/elements/_AccessibleButton.scss

5
.stylelintrc.js
Unescape View File

@ -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": "^((&[ :.\\\[,])|([^&]))"
}
}

44
res/css/structures/_SpaceRoomView.scss
Unescape View File

@ -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;

64
res/css/views/elements/_AccessibleButton.scss
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save