From 4ebba438735bedb1b7d3b55bca0dec49c9e01af7 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 9 Jul 2019 18:09:31 +0100 Subject: [PATCH 1/5] Run stylelint on all SCSS files This adds quotes so that globbing actually works as intended with `stylelint`. Previously, we were relying on whatever a shell does with `**` style globs, which meant that many files weren't picked up. This means many files weren't being linted before, so the remaining commits will fix those new errors. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 68a1b13a1e..ad6aed99fc 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "lint": "eslint src/", "lintall": "eslint src/ test/", "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test", - "stylelint": "stylelint res/css/**/*.scss", + "stylelint": "stylelint 'res/css/**/*.scss'", "clean": "rimraf lib", "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt", "test": "karma start --single-run=true --browsers VectorChromeHeadless", From dd2079bffc03523b2214d39aec32f94f74a82a3b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 9 Jul 2019 18:15:10 +0100 Subject: [PATCH 2/5] Auto-fix stylelint issues These `stylelint` issues were autofixed by the tool itself and look sane to me. --- res/css/_common.scss | 14 +++--- .../context_menus/_RoomTileContextMenu.scss | 2 +- .../context_menus/_TagTileContextMenu.scss | 2 +- res/css/views/context_menus/_TopLeftMenu.scss | 1 - .../views/dialogs/_AddressPickerDialog.scss | 5 +- res/css/views/dialogs/_DevtoolsDialog.scss | 49 +++++++++---------- .../views/dialogs/_GroupAddressPicker.scss | 2 +- .../views/dialogs/_RoomSettingsDialog.scss | 8 +-- .../views/dialogs/_UserSettingsDialog.scss | 16 +++--- .../keybackup/_CreateKeyBackupDialog.scss | 4 +- .../keybackup/_KeyBackupFailedDialog.scss | 2 +- .../keybackup/_RestoreKeyBackupDialog.scss | 6 +-- res/css/views/directory/_NetworkDropdown.scss | 2 +- res/css/views/elements/_AddressSelector.scss | 6 +-- res/css/views/elements/_ImageView.scss | 4 +- res/css/views/elements/_RichText.scss | 6 +-- res/css/views/elements/_Spinner.scss | 2 +- res/css/views/elements/_TextWithTooltip.scss | 2 +- res/css/views/elements/_Tooltip.scss | 4 +- res/css/views/globals/_MatrixToolbar.scss | 7 ++- res/css/views/messages/_RoomAvatarEvent.scss | 2 +- .../views/room_settings/_ColorSettings.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 16 +++--- res/css/views/rooms/_Autocomplete.scss | 6 +-- res/css/views/rooms/_EntityTile.scss | 9 ++-- res/css/views/rooms/_EventTile.scss | 47 ++++++++---------- res/css/views/rooms/_JumpToBottomButton.scss | 2 +- res/css/views/rooms/_MemberInfo.scss | 2 +- res/css/views/rooms/_MemberList.scss | 3 +- res/css/views/rooms/_MessageComposer.scss | 11 ++--- res/css/views/rooms/_PinnedEventTile.scss | 2 +- res/css/views/rooms/_PresenceLabel.scss | 2 +- res/css/views/rooms/_ReplyPreview.scss | 2 +- res/css/views/rooms/_RoomHeader.scss | 8 +-- res/css/views/rooms/_RoomList.scss | 2 +- res/css/views/rooms/_RoomPreviewBar.scss | 8 +-- res/css/views/rooms/_RoomTile.scss | 3 +- .../views/rooms/_TopUnreadMessagesBar.scss | 4 +- res/css/views/settings/_DevicesPanel.scss | 2 +- .../views/settings/_IntegrationsManager.scss | 2 +- res/css/views/settings/_Notifications.scss | 8 ++- res/css/views/settings/_ProfileSettings.scss | 4 +- res/css/views/settings/tabs/_SettingsTab.scss | 2 +- .../tabs/room/_RolesRoomSettingsTab.scss | 2 +- .../tabs/room/_SecurityRoomSettingsTab.scss | 2 +- .../tabs/user/_HelpUserSettingsTab.scss | 2 +- .../user/_NotificationUserSettingsTab.scss | 2 +- .../tabs/user/_SecurityUserSettingsTab.scss | 2 +- res/css/views/voip/_CallView.scss | 2 +- 49 files changed, 143 insertions(+), 162 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 973103899d..639764150b 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -209,25 +209,25 @@ textarea { /* Expand thumbs on hoverover */ .gm-scrollbar { - border-radius: 5px ! important; + border-radius: 5px !important; } .gm-scrollbar.-vertical { width: 6px; - transition: width 120ms ease-out ! important; + transition: width 120ms ease-out !important; } .gm-scrollbar.-vertical:hover, .gm-scrollbar.-vertical:active { width: 8px; - transition: width 120ms ease-out ! important; + transition: width 120ms ease-out !important; } .gm-scrollbar.-horizontal { height: 6px; - transition: height 120ms ease-out ! important; + transition: height 120ms ease-out !important; } .gm-scrollbar.-horizontal:hover, .gm-scrollbar.-horizontal:active { height: 8px; - transition: height 120ms ease-out ! important; + transition: height 120ms ease-out !important; } // These are magic constants which are excluded from tinting, to let themes @@ -390,7 +390,7 @@ textarea { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color !important; color: $accent-color; background-color: $button-secondary-bg-color; } @@ -407,7 +407,7 @@ textarea { filter: brightness($focus-brightness); } -.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { +.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { color: $accent-fg-color; background-color: $accent-color; min-width: 156px; diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index f832691be4..4246474de3 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -48,7 +48,7 @@ limitations under the License. .mx_RoomTileContextMenu_tag_icon { padding-right: 8px; padding-left: 4px; - display: inline-block + display: inline-block; } .mx_RoomTileContextMenu_tag_icon_set { diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss index 799151b198..46b279ce2d 100644 --- a/res/css/views/context_menus/_TagTileContextMenu.scss +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -33,7 +33,7 @@ limitations under the License. .mx_TagTileContextMenu_item_icon { padding-right: 8px; padding-left: 4px; - display: inline-block + display: inline-block; } .mx_TagTileContextMenu_separator { diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index 113da004b8..9d258bcf55 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -89,5 +89,4 @@ limitations under the License. background-color: $menu-selected-color; } } - } diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index b4d4a74cb5..2771ac4052 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -17,8 +17,7 @@ limitations under the License. /* Using a textarea for this element, to circumvent autofill */ .mx_AddressPickerDialog_input, -.mx_AddressPickerDialog_input:focus -{ +.mx_AddressPickerDialog_input:focus { height: 26px; font-size: 14px; font-family: $font-family; @@ -36,7 +35,7 @@ limitations under the License. } .mx_AddressPickerDialog .mx_Dialog_content { - min-height: 50px + min-height: 50px; } .mx_AddressPickerDialog_inputContainer { diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index c63a1b8e7d..9d58c999c3 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -45,13 +45,11 @@ limitations under the License. border-bottom: 1px solid #e5e5e5; } -.mx_DevTools_inputRow -{ +.mx_DevTools_inputRow { display: table-row; } -.mx_DevTools_inputLabelCell -{ +.mx_DevTools_inputLabelCell { display: table-cell; font-weight: bold; padding-right: 24px; @@ -62,8 +60,7 @@ limitations under the License. width: 240px; } -.mx_DevTools_inputCell input -{ +.mx_DevTools_inputCell input { display: inline-block; border: 0; border-bottom: 1px solid $input-underline-color; @@ -95,11 +92,11 @@ limitations under the License. // add default box-sizing for this scope &, - &:after, - &:before, + &::after, + &::before, & *, - & *:after, - & *:before, + & *::after, + & *::before, & + .mx_DevTools_tgl-btn { box-sizing: border-box; &::selection { @@ -115,8 +112,8 @@ limitations under the License. position: relative; cursor: pointer; user-select: none; - &:after, - &:before { + &::after, + &::before { position: relative; display: block; content: ""; @@ -124,16 +121,16 @@ limitations under the License. height: 100%; } - &:after { + &::after { left: 0; } - &:before { + &::before { display: none; } } - &:checked + .mx_DevTools_tgl-btn:after { + &:checked + .mx_DevTools_tgl-btn::after { left: 50%; } } @@ -144,8 +141,8 @@ limitations under the License. transition: all .2s ease; font-family: sans-serif; perspective: 100px; - &:after, - &:before { + &::after, + &::before { display: inline-block; transition: all .4s ease; width: 100%; @@ -160,34 +157,34 @@ limitations under the License. border-radius: 4px; } - &:after { + &::after { content: attr(data-tg-on); - background: #02C66F; + background: #02c66f; transform: rotateY(-180deg); } - &:before { - background: #FF3A19; + &::before { + background: #ff3a19; content: attr(data-tg-off); } - &:active:before { + &:active::before { transform: rotateY(-20deg); } } &:checked + .mx_DevTools_tgl-btn { - &:before { + &::before { transform: rotateY(180deg); } - &:after { + &::after { transform: rotateY(0); left: 0; - background: #7FC6A6; + background: #7fc6a6; } - &:active:after { + &:active::after { transform: rotateY(20deg); } } diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss index d6c961c0ec..20a7cc1047 100644 --- a/res/css/views/dialogs/_GroupAddressPicker.scss +++ b/res/css/views/dialogs/_GroupAddressPicker.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_GroupAddressPicker_checkboxContainer{ +.mx_GroupAddressPicker_checkboxContainer { margin-top: 10px; display: flex; } diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index 60b35528a1..723eb237ad 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -17,19 +17,19 @@ limitations under the License. // ICONS // ========================================================== -.mx_RoomSettingsDialog_settingsIcon:before { +.mx_RoomSettingsDialog_settingsIcon::before { mask-image: url('$(res)/img/feather-customised/settings.svg'); } -.mx_RoomSettingsDialog_securityIcon:before { +.mx_RoomSettingsDialog_securityIcon::before { mask-image: url('$(res)/img/feather-customised/lock.svg'); } -.mx_RoomSettingsDialog_rolesIcon:before { +.mx_RoomSettingsDialog_rolesIcon::before { mask-image: url('$(res)/img/feather-customised/users-sm.svg'); } -.mx_RoomSettingsDialog_warningIcon:before { +.mx_RoomSettingsDialog_warningIcon::before { mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); } diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index 9665ee06b4..2a046ff501 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -17,34 +17,34 @@ limitations under the License. // ICONS // ========================================================== -.mx_UserSettingsDialog_settingsIcon:before { +.mx_UserSettingsDialog_settingsIcon::before { mask-image: url('$(res)/img/feather-customised/settings.svg'); } -.mx_UserSettingsDialog_voiceIcon:before { +.mx_UserSettingsDialog_voiceIcon::before { mask-image: url('$(res)/img/feather-customised/phone.svg'); } -.mx_UserSettingsDialog_bellIcon:before { +.mx_UserSettingsDialog_bellIcon::before { mask-image: url('$(res)/img/feather-customised/notifications.svg'); } -.mx_UserSettingsDialog_preferencesIcon:before { +.mx_UserSettingsDialog_preferencesIcon::before { mask-image: url('$(res)/img/feather-customised/sliders.svg'); } -.mx_UserSettingsDialog_securityIcon:before { +.mx_UserSettingsDialog_securityIcon::before { mask-image: url('$(res)/img/feather-customised/lock.svg'); } -.mx_UserSettingsDialog_helpIcon:before { +.mx_UserSettingsDialog_helpIcon::before { mask-image: url('$(res)/img/feather-customised/help-circle.svg'); } -.mx_UserSettingsDialog_labsIcon:before { +.mx_UserSettingsDialog_labsIcon::before { mask-image: url('$(res)/img/feather-customised/flag.svg'); } -.mx_UserSettingsDialog_flairIcon:before { +.mx_UserSettingsDialog_flairIcon::before { mask-image: url('$(res)/img/feather-customised/flair.svg'); } diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss index 3f4c8d2da4..7ba5f01a76 100644 --- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss +++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss @@ -20,8 +20,8 @@ limitations under the License. } .mx_CreateKeyBackupDialog_primaryContainer { - /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/ - padding: 20px + /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + padding: 20px; } .mx_CreateKeyBackupDialog_primaryContainer::after { diff --git a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss index f905516bd4..05ce158413 100644 --- a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss +++ b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss @@ -23,7 +23,7 @@ limitations under the License. padding-left: 45px; padding-bottom: 10px; - &:before { + &::before { mask: url("$(res)/img/e2e/lock-warning-filled.svg"); mask-repeat: no-repeat; background-color: $primary-fg-color; diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss index 612c921038..415a2021cc 100644 --- a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss +++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss @@ -13,10 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - + .mx_RestoreKeyBackupDialog_primaryContainer { - /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/ - padding: 20px + /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + padding: 20px; } .mx_RestoreKeyBackupDialog_passPhraseInput, diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 8d5fa5dc7b..d402f6c48f 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -36,7 +36,7 @@ limitations under the License. position: absolute; right: 10px; top: 16px; - width: 0 + width: 0; } .mx_NetworkDropdown_networkoption { diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss index 9871a7e881..d60aeeff62 100644 --- a/res/css/views/elements/_AddressSelector.scss +++ b/res/css/views/elements/_AddressSelector.scss @@ -20,9 +20,9 @@ limitations under the License. width: 485px; max-height: 116px; overflow-y: auto; - border-radius: 3px; - background-color: $primary-bg-color; - border: solid 1px $accent-color; + border-radius: 3px; + background-color: $primary-bg-color; + border: solid 1px $accent-color; cursor: pointer; } diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 88cf2ce8ba..67b0d6d7df 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -128,8 +128,8 @@ limitations under the License. } .mx_ImageView_link { - color: $lightbox-fg-color ! important; - text-decoration: none ! important; + color: $lightbox-fg-color !important; + text-decoration: none !important; } .mx_ImageView_button { diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index cf2c066589..262d78d880 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -33,7 +33,7 @@ } .mx_UserPill_selected { - background-color: $accent-color ! important; + background-color: $accent-color !important; } /* More specific to override `.markdown-body a` color */ @@ -79,7 +79,7 @@ .mx_Markdown_ITALIC { font-style: italic; -/* + /* // interestingly, *not* using the explicit italic font // variant seems yield better results. @@ -87,7 +87,7 @@ // https://github.com/google/fonts/issues/1726 transform: skewX(-14deg); display: inline-block; -*/ + */ } .mx_Markdown_CODE { diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss index aea5737918..01b4f23c2c 100644 --- a/res/css/views/elements/_Spinner.scss +++ b/res/css/views/elements/_Spinner.scss @@ -25,4 +25,4 @@ limitations under the License. .mx_MatrixChat_middlePanel .mx_Spinner { height: auto; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_TextWithTooltip.scss b/res/css/views/elements/_TextWithTooltip.scss index 5b34e7a3be..a7f9cb7483 100644 --- a/res/css/views/elements/_TextWithTooltip.scss +++ b/res/css/views/elements/_TextWithTooltip.scss @@ -16,4 +16,4 @@ limitations under the License. .mx_TextWithTooltip_tooltip { display: none; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 3a6b6fb936..8f6204c942 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -36,8 +36,8 @@ limitations under the License. border-bottom: 7px solid transparent; } -.mx_Tooltip_chevron:after { - content:''; +.mx_Tooltip_chevron::after { + content: ''; width: 0; height: 0; border-top: 6px solid transparent; diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss index 1791d619ae..5fdf572f99 100644 --- a/res/css/views/globals/_MatrixToolbar.scss +++ b/res/css/views/globals/_MatrixToolbar.scss @@ -44,10 +44,9 @@ limitations under the License. flex: 1; } -.mx_MatrixToolbar_link -{ - color: $accent-fg-color ! important; - text-decoration: underline ! important; +.mx_MatrixToolbar_link { + color: $accent-fg-color !important; + text-decoration: underline !important; cursor: pointer; } diff --git a/res/css/views/messages/_RoomAvatarEvent.scss b/res/css/views/messages/_RoomAvatarEvent.scss index 9adce42eef..3db18c1d10 100644 --- a/res/css/views/messages/_RoomAvatarEvent.scss +++ b/res/css/views/messages/_RoomAvatarEvent.scss @@ -23,4 +23,4 @@ limitations under the License. display: inline; position: relative; top: 5px; -} \ No newline at end of file +} diff --git a/res/css/views/room_settings/_ColorSettings.scss b/res/css/views/room_settings/_ColorSettings.scss index 39b087653d..fc6a4443ad 100644 --- a/res/css/views/room_settings/_ColorSettings.scss +++ b/res/css/views/room_settings/_ColorSettings.scss @@ -28,7 +28,7 @@ limitations under the License. position: absolute; left: 10px; top: 4px; - cursor: default ! important; + cursor: default !important; } .mx_ColorSettings_roomColorPrimary { diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index db38eebfca..09fdc28e78 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -198,7 +198,7 @@ $AppsDrawerBodyHeight: 273px; border-radius: 2px; } -.mx_AppTileBody{ +.mx_AppTileBody { height: $AppsDrawerBodyHeight; width: 100%; overflow: hidden; @@ -234,7 +234,7 @@ $AppsDrawerBodyHeight: 273px; background-color: $lightbox-bg-color; border: 1px solid rgba(0, 0, 0, 0); width: 200px; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 3px; margin: 5px; @@ -248,7 +248,7 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile:hover { border: 1px solid $accent-color; - box-shadow: 0 0 10px 5px rgba(200,200,200,0.5); + box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5); } .mx_AppIconTile_content { @@ -271,8 +271,8 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile_image { padding: 10px; width: 75%; - max-width:100px; - max-height:100px; + max-width: 100px; + max-height: 100px; width: auto; height: auto; } @@ -361,11 +361,11 @@ form.mx_Custom_Widget_Form div { } @keyframes mx_AppLoading_spinner_fadeIn_animation { - from { opacity: 0 } - to { opacity: 1 } + from { opacity: 0; } + to { opacity: 1; } } .mx_AppLoading iframe { - display: none; + display: none; } diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 3bc0ea25a4..2d57a1783a 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -8,7 +8,7 @@ border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; - overflow: auto + overflow: auto; } .mx_Autocomplete_ProviderSection { @@ -32,7 +32,7 @@ } .mx_Autocomplete_Completion_block * { - margin: 0 3px; + margin: 0 3px; } .mx_Autocomplete_Completion_pill { @@ -54,7 +54,7 @@ .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_description { - /* Ellipsis for long names/subtitles/descriptions*/ + /* Ellipsis for long names/subtitles/descriptions */ max-width: 150px; white-space: nowrap; overflow: hidden; diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 44528a5624..6b2f0d8567 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -102,20 +102,17 @@ limitations under the License. .mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, -.mx_EntityTile_offline_beenactive .mx_EntityTile_name -{ +.mx_EntityTile_offline_beenactive .mx_EntityTile_name { opacity: 0.5; } .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, -.mx_EntityTile_offline_neveractive .mx_EntityTile_name -{ +.mx_EntityTile_offline_neveractive .mx_EntityTile_name { opacity: 0.25; } .mx_EntityTile_unknown .mx_EntityTile_avatar, -.mx_EntityTile_unknown .mx_EntityTile_name -{ +.mx_EntityTile_unknown .mx_EntityTile_name { opacity: 0.25; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 9f14cf1b00..ba667a272b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -122,8 +122,8 @@ limitations under the License. /* HACK to override line-height which is already marked important elsewhere */ .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 48px ! important; - line-height: 57px ! important; + font-size: 48px !important; + line-height: 57px !important; } /* this is used for the tile for the event which is selected via the URL. @@ -136,8 +136,7 @@ limitations under the License. } .mx_EventTile:hover .mx_EventTile_line, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line -{ +.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line { background-color: $event-selected-color; } @@ -156,7 +155,7 @@ limitations under the License. } .mx_EventTile_encrypting { - color: $event-encrypting-color ! important; + color: $event-encrypting-color !important; } .mx_EventTile_sending { @@ -189,7 +188,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { height: 22px; width: 250px; border-radius: 11px; - background: repeating-linear-gradient( + background: + repeating-linear-gradient( -45deg, var(--lozenge-color), var(--lozenge-color) 3px, @@ -200,8 +200,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body -{ +.mx_EventTile_highlight .markdown-body { color: $event-highlight-fg-color; .mx_EventTile_line { @@ -418,9 +417,9 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* Various markdown overrides */ .mx_EventTile_content .markdown-body { - font-family: inherit ! important; - white-space: normal ! important; - line-height: inherit ! important; + font-family: inherit !important; + white-space: normal !important; + line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) font-size: 14px; } @@ -442,7 +441,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_content .markdown-body { pre, code { - font-family: $monospace-font-family ! important; + font-family: $monospace-font-family !important; // deliberate constants as we're behind an invert filter color: #333; } @@ -470,13 +469,11 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { border: 1px solid transparent; } -.mx_EventTile:hover .mx_EventTile_body pre -{ +.mx_EventTile:hover .mx_EventTile_body pre { border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter } -.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton -{ +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { visibility: visible; } @@ -485,19 +482,17 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_content .markdown-body h3, .mx_EventTile_content .markdown-body h4, .mx_EventTile_content .markdown-body h5, -.mx_EventTile_content .markdown-body h6 -{ - font-family: inherit ! important; +.mx_EventTile_content .markdown-body h6 { + font-family: inherit !important; color: inherit; } /* Make h1 and h2 the same size as h3. */ .mx_EventTile_content .markdown-body h1, -.mx_EventTile_content .markdown-body h2 -{ +.mx_EventTile_content .markdown-body h2 { font-size: 1.5em; - border-bottom: none ! important; // override GFM + border-bottom: none !important; // override GFM } .mx_EventTile_content .markdown-body a { @@ -506,7 +501,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile_content .markdown-body .hljs { - display: inline ! important; + display: inline !important; } /* @@ -595,8 +590,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } .mx_EventTile_content .markdown-body { - p, ul, ol, dl, blockquote, pre, table { - margin-bottom: 4px; // 1/4 of the non-compact margin-bottom - } + p, ul, ol, dl, blockquote, pre, table { + margin-bottom: 4px; // 1/4 of the non-compact margin-bottom + } } } diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 968139671f..7f458092fb 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -55,7 +55,7 @@ limitations under the License. cursor: pointer; } -.mx_JumpToBottomButton_scrollDown:before { +.mx_JumpToBottomButton_scrollDown::before { content: ""; position: absolute; top: 0; diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index bb38c41581..4a0a5fada7 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -126,7 +126,7 @@ limitations under the License. } .mx_MemberInfo_createRoom_label { - width: initial ! important; + width: initial !important; cursor: pointer; } diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 0b9c7e2368..6e4465583c 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -88,7 +88,7 @@ limitations under the License. } .mx_MemberList_invite.mx_AccessibleButton_disabled { - background-color: $greyed-fg-color;; + background-color: $greyed-fg-color; cursor: not-allowed; } @@ -97,5 +97,4 @@ limitations under the License. background-repeat: no-repeat; background-position: center left; padding-left: 25px; - } diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 708c29bb3e..6e17251cb0 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -122,16 +122,15 @@ limitations under the License. // FIXME: rather unpleasant hack to get rid of

margins. // really we should be mixing in markdown-body from gfm.css instead .mx_MessageComposer_editor > :first-child { - margin-top: 0 ! important; + margin-top: 0 !important; } .mx_MessageComposer_editor > :last-child { - margin-bottom: 0 ! important; + margin-bottom: 0 !important; } -@keyframes visualbell -{ - from { background-color: #faa } - to { background-color: $primary-bg-color } +@keyframes visualbell { + from { background-color: #faa; } + to { background-color: $primary-bg-color; } } .mx_MessageComposer_input_error { diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index f7417272b6..695d3fe006 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -74,4 +74,4 @@ limitations under the License. position: relative; top: 0; left: 0; -} \ No newline at end of file +} diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss index 682c849cee..26ed1aa6a3 100644 --- a/res/css/views/rooms/_PresenceLabel.scss +++ b/res/css/views/rooms/_PresenceLabel.scss @@ -17,4 +17,4 @@ limitations under the License. .mx_PresenceLabel { font-size: 11px; opacity: 0.5; -} \ No newline at end of file +} diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 5bf4adff27..4dc4cb2c40 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -24,7 +24,7 @@ limitations under the License. border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; - overflow: auto + overflow: auto; } .mx_ReplyPreview_section { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index e7589f0e90..0ade689054 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -107,7 +107,7 @@ limitations under the License. } .mx_RoomHeader_settingsHint { - color: $settings-grey-fg-color ! important; + color: $settings-grey-fg-color !important; } .mx_RoomHeader_searchStatus { @@ -134,17 +134,17 @@ limitations under the License. } .mx_RoomHeader_placeholder { - color: $settings-grey-fg-color ! important; + color: $settings-grey-fg-color !important; } .mx_RoomHeader_editable { - border-bottom: 1px solid $strong-input-border-color ! important; + border-bottom: 1px solid $strong-input-border-color !important; min-width: 150px; cursor: text; } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid $accent-color ! important; + border-bottom: 1px solid $accent-color !important; outline: none; box-shadow: none; } diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 886f10dc4c..b51d720e4d 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -32,7 +32,7 @@ limitations under the License. } /* hide resize handles next to collapsed / empty sublists */ -.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { +.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { display: none; } diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index 6ac5546f78..c7d03e3523 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -80,7 +80,7 @@ limitations under the License. flex-direction: row; padding: 3px 8px; - &>* { + & > * { margin-left: 12px; } } @@ -91,7 +91,7 @@ limitations under the License. display: flex; flex-direction: column; - &>* { + & > * { margin: 4px; } } @@ -109,7 +109,7 @@ limitations under the License. .mx_RoomPreviewBar_message { flex-direction: column; - &>* { + & > * { margin: 5px 0 20px 0; } } @@ -120,7 +120,7 @@ limitations under the License. padding: 7px 50px;//extra wide } - &>* { + & > * { margin-top: 12px; } } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index a1fc9bdca1..c13b988b8e 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -150,8 +150,7 @@ limitations under the License. } .mx_RoomTile_highlight .mx_RoomTile_badge, -.mx_RoomTile_badge.mx_RoomTile_badgeRed -{ +.mx_RoomTile_badge.mx_RoomTile_badgeRed { background-color: $warning-color; } diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index a4b7a6aa51..77f19dac1c 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -24,7 +24,7 @@ limitations under the License. width: 38px; } -.mx_TopUnreadMessagesBar:after { +.mx_TopUnreadMessagesBar::after { content: "ยท"; position: absolute; top: -8px; @@ -49,7 +49,7 @@ limitations under the License. cursor: pointer; } -.mx_TopUnreadMessagesBar_scrollUp:before { +.mx_TopUnreadMessagesBar_scrollUp::before { content: ""; position: absolute; width: 38px; diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss index e4856531d9..4113fc4ebc 100644 --- a/res/css/views/settings/_DevicesPanel.scss +++ b/res/css/views/settings/_DevicesPanel.scss @@ -48,4 +48,4 @@ limitations under the License. .mx_DevicesPanel_myDevice { font-weight: bold; -} \ No newline at end of file +} diff --git a/res/css/views/settings/_IntegrationsManager.scss b/res/css/views/settings/_IntegrationsManager.scss index c5769d3645..8b51eb272e 100644 --- a/res/css/views/settings/_IntegrationsManager.scss +++ b/res/css/views/settings/_IntegrationsManager.scss @@ -41,4 +41,4 @@ limitations under the License. .mx_IntegrationsManager_error h3 { color: $warning-color; -} \ No newline at end of file +} diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index 773ea055df..e6d09b9a2a 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/res/css/views/settings/_Notifications.scss @@ -14,8 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_UserNotifSettings_tableRow -{ +.mx_UserNotifSettings_tableRow { display: table-row; } @@ -26,8 +25,7 @@ limitations under the License. width: 16px; } -.mx_UserNotifSettings_labelCell -{ +.mx_UserNotifSettings_labelCell { padding-bottom: 8px; width: 400px; display: table-cell; @@ -93,4 +91,4 @@ limitations under the License. color: white; border: $warning-color; background-color: $warning-color; -} \ No newline at end of file +} diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index a972162618..3e97a0ff6d 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -105,7 +105,7 @@ limitations under the License. margin: auto; } -.mx_ProfileSettings_avatarOverlayImg:before { +.mx_ProfileSettings_avatarOverlayImg::before { background-color: $settings-profile-overlay-placeholder-fg-color; mask: url("$(res)/img/feather-customised/upload.svg"); mask-repeat: no-repeat; @@ -119,7 +119,7 @@ limitations under the License. right: 0; } -.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before { +.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before { background-color: $settings-profile-overlay-fg-color !important; } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index def28bfbd2..7755ee6053 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -75,4 +75,4 @@ limitations under the License. .mx_SettingsTab a { color: $accent-color-alt; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss index 8bfc792dc3..5d0a8ed142 100644 --- a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss @@ -21,4 +21,4 @@ limitations under the License. .mx_RolesRoomSettingsTab_unbanBtn { margin-right: 10px; margin-bottom: 5px; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss index dfd046e672..b5a57dfefb 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss @@ -31,4 +31,4 @@ limitations under the License. .mx_SecurityRoomSettingsTab_encryptionSection { margin-bottom: 25px; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss index fa0d0edeb7..109edfff81 100644 --- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss @@ -21,4 +21,4 @@ limitations under the License. .mx_HelpUserSettingsTab span.mx_AccessibleButton { word-break: break-word; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss index 3cebd2958e..b57c46a1d9 100644 --- a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss @@ -16,4 +16,4 @@ limitations under the License. .mx_NotificationUserSettingsTab .mx_SettingsTab_heading { margin-bottom: 10px; // Give some spacing between the title and the first elements -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss index 1c0a4b5864..b5a6693006 100644 --- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss @@ -54,4 +54,4 @@ limitations under the License. .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton { margin-right: 10px; -} \ No newline at end of file +} diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index deb89a837c..b01fbf8c66 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -22,4 +22,4 @@ limitations under the License. padding: 6px; font-weight: bold; font-size: 13px; -} \ No newline at end of file +} From 6c9bf25199515861766d33aabb3ec09073b1bed2 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 9 Jul 2019 18:35:57 +0100 Subject: [PATCH 3/5] Add stylelint-scss plugin This adds extra SCSS-specific rules. In particular, there's a modified at rule processing rule which understands `mixin` and friends. --- .stylelintrc.js | 5 +++++ package.json | 1 + yarn.lock | 30 ++++++++++++++++++++++++++++++ 3 files changed, 36 insertions(+) diff --git a/.stylelintrc.js b/.stylelintrc.js index fc00b643a0..97e1ec8023 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,5 +1,8 @@ module.exports = { "extends": "stylelint-config-standard", + "plugins": [ + "stylelint-scss", + ], "rules": { "indentation": 4, "comment-empty-line-before": null, @@ -11,5 +14,7 @@ module.exports = { "number-no-trailing-zeros": null, "number-leading-zero": null, "selector-list-comma-newline-after": null, + "at-rule-no-unknown": null, + "scss/at-rule-no-unknown": true, } } diff --git a/package.json b/package.json index ad6aed99fc..8e0c3c0a9c 100644 --- a/package.json +++ b/package.json @@ -153,6 +153,7 @@ "source-map-loader": "^0.2.3", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", + "stylelint-scss": "^3.9.0", "walk": "^2.3.9", "webpack": "^4.20.2", "webpack-cli": "^3.1.1" diff --git a/yarn.lock b/yarn.lock index 06ec733636..642e21fcfa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2295,6 +2295,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -5977,6 +5982,15 @@ postcss-selector-parser@^3.1.0: indexes-of "^1.0.1" uniq "^1.0.1" +postcss-selector-parser@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" + integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg== + dependencies: + cssesc "^3.0.0" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss-syntax@^0.36.2: version "0.36.2" resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c" @@ -5987,6 +6001,11 @@ postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== +postcss-value-parser@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d" + integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ== + postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.7: version "7.0.17" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f" @@ -7364,6 +7383,17 @@ stylelint-config-standard@^18.2.0: dependencies: stylelint-config-recommended "^2.2.0" +stylelint-scss@^3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.9.0.tgz#45e5e42c28c180ec410ac95ab70fb0b49688cbb6" + integrity sha512-6uB2TPfIA/HybB7gERPFaBWHDBWhoLSjKoG0rQtsQ4LNOvWzJ205Q8JA2x9zZSXOJXatonlT9aGA1tyNBJrmcg== + dependencies: + lodash "^4.17.11" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.1" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.0.0" + stylelint@^9.10.1: version "9.10.1" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.10.1.tgz#5f0ee3701461dff1d68284e1386efe8f0677a75d" From 38d6953bf6df7980e78feaf2912671caf06e7eb3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 10 Jul 2019 16:55:03 +0100 Subject: [PATCH 4/5] Manually fix remaining stylelint issues --- res/css/_common.scss | 42 +++-- res/css/views/auth/_AuthBody.scss | 6 +- .../context_menus/_RoomTileContextMenu.scss | 28 ++- res/css/views/dialogs/_DevtoolsDialog.scss | 2 + res/css/views/dialogs/_SetEmailDialog.scss | 3 - res/css/views/elements/_AccessibleButton.scss | 8 +- res/css/views/elements/_AddressSelector.scss | 1 - res/css/views/elements/_Dropdown.scss | 14 +- res/css/views/elements/_Field.scss | 8 +- .../views/elements/_ManageIntegsButton.scss | 21 +-- res/css/views/elements/_RichText.scss | 12 +- res/css/views/elements/_ToggleSwitch.scss | 8 +- res/css/views/messages/_CreateEvent.scss | 3 - res/css/views/messages/_DateSeparator.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 2 - res/css/views/rooms/_Autocomplete.scss | 39 ++-- res/css/views/rooms/_EntityTile.scss | 8 +- res/css/views/rooms/_EventTile.scss | 167 +++++++++--------- res/css/views/rooms/_MemberInfo.scss | 3 - res/css/views/rooms/_PinnedEventTile.scss | 12 +- res/css/views/rooms/_RoomBreadcrumbs.scss | 17 +- res/css/views/rooms/_RoomHeader.scss | 1 - res/css/views/rooms/_RoomTile.scss | 40 ++--- .../views/messages/DateSeparator.js | 2 +- 24 files changed, 210 insertions(+), 239 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 639764150b..d6c61b48d1 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -104,17 +104,17 @@ input[type=text], input[type=password], textarea { color: $primary-fg-color; } -input[type=text]:focus, input[type=password]:focus, textarea:focus { - outline: none; - box-shadow: none; -} - /* Required by Firefox */ textarea { font-family: $font-family; color: $primary-fg-color; } +input[type=text]:focus, input[type=password]:focus, textarea:focus { + outline: none; + box-shadow: none; +} + // This is used to hide the standard outline added by browsers for // accessible (focusable) components. Not intended for buttons, but // should be used on things like focusable containers where the outline @@ -129,6 +129,13 @@ textarea { // appear to be part of the input .mx_Dialog, .mx_MatrixChat { + .mx_textinput > input[type=text], + .mx_textinput > input[type=search] { + border: none; + flex: 1; + color: $primary-fg-color; + } + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { @@ -147,13 +154,6 @@ textarea { .mx_textinput { display: flex; align-items: center; - - > input[type=text], - > input[type=search] { - border: none; - flex: 1; - color: $primary-fg-color; - } } :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, @@ -166,9 +166,7 @@ textarea { /*** panels ***/ .dark-panel { background-color: $dark-panel-bg-color; -} -.dark-panel { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { @@ -271,14 +269,6 @@ textarea { justify-content: center; } -/* Spinner Dialog overide */ -.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { - width: auto; - border-radius: 8px; - padding: 0px; - box-shadow: none; -} - .mx_Dialog { background-color: $primary-bg-color; color: $light-fg-color; @@ -425,6 +415,14 @@ textarea { opacity: 0.7; } +/* Spinner Dialog overide */ +.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { + width: auto; + border-radius: 8px; + padding: 0px; + box-shadow: none; +} + // TODO: Review mx_GeneralButton usage to see if it can use a different class // These classes were brought in from the old UserSettings and are included here to avoid // breaking the app. diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index cce3b5dbf5..ca50766324 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -58,12 +58,12 @@ limitations under the License. color: $authpage-primary-color; } + .mx_Field_labelAlwaysTopLeft label, + .mx_Field select + label, /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, - .mx_Field textarea:not(:placeholder-shown) + label, - .mx_Field select + label /* Always show a select's label on top to not collide with the value */, - .mx_Field_labelAlwaysTopLeft label { + .mx_Field textarea:not(:placeholder-shown) + label { background-color: $authpage-body-bg-color; } diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index 4246474de3..308cecfe1e 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -18,6 +18,18 @@ limitations under the License. padding: 6px; } +.mx_RoomTileContextMenu_tag_icon { + padding-right: 8px; + padding-left: 4px; + display: inline-block; +} + +.mx_RoomTileContextMenu_tag_icon_set { + padding-right: 8px; + padding-left: 4px; + display: none; +} + .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { padding-top: 8px; padding-right: 20px; @@ -45,18 +57,6 @@ limitations under the License. color: rgba(0, 0, 0, 0.2); } -.mx_RoomTileContextMenu_tag_icon { - padding-right: 8px; - padding-left: 4px; - display: inline-block; -} - -.mx_RoomTileContextMenu_tag_icon_set { - padding-right: 8px; - padding-left: 4px; - display: none; -} - .mx_RoomTileContextMenu_separator { margin-top: 0; margin-bottom: 0; @@ -72,10 +72,6 @@ limitations under the License. color: $warning-color; } -.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon { - /* Something to indicate that the icon is the set tag */ -} - .mx_RoomTileContextMenu_notif_picker { position: absolute; top: 16px; diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 9d58c999c3..0ed84f227b 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -135,6 +135,7 @@ limitations under the License. } } +/* stylelint-disable no-descending-specificity */ .mx_DevTools_tgl-flip { + .mx_DevTools_tgl-btn { padding: 2px; @@ -189,3 +190,4 @@ limitations under the License. } } } +/* stylelint-enable no-descending-specificity */ diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index 588f10c9cb..9d09a208df 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -31,6 +31,3 @@ limitations under the License. box-shadow: none; border: 1px solid $accent-color; } - -.mx_SetEmailDialog_email_input_placeholder { -} diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index fe1f283009..106867eb19 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -14,14 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_AccessibleButton:focus { - outline: 0; -} - .mx_AccessibleButton { cursor: pointer; } +.mx_AccessibleButton:focus { + outline: 0; +} + .mx_AccessibleButton_disabled { cursor: default; } diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss index d60aeeff62..dd78fcc0f0 100644 --- a/res/css/views/elements/_AddressSelector.scss +++ b/res/css/views/elements/_AddressSelector.scss @@ -21,7 +21,6 @@ limitations under the License. max-height: 116px; overflow-y: auto; border-radius: 3px; - background-color: $primary-bg-color; border: solid 1px $accent-color; cursor: pointer; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 2a59393499..102ac56bf9 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -51,13 +51,6 @@ limitations under the License. background: $primary-fg-color; } -.mx_Dropdown_input > .mx_Dropdown_option { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - .mx_Dropdown_option { height: 35px; line-height: 35px; @@ -65,6 +58,13 @@ limitations under the License. padding-right: 8px; } +.mx_Dropdown_input > .mx_Dropdown_option { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; +} + .mx_Dropdown_option div { overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index a6ac680116..1bc961d1f8 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -110,12 +110,12 @@ limitations under the License. max-width: calc(100% - 20px); // 100% of parent minus margin and padding } +.mx_Field_labelAlwaysTopLeft label, +.mx_Field select + label, /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, -.mx_Field textarea:not(:placeholder-shown) + label, -.mx_Field select + label /* Always show a select's label on top to not collide with the value */, -.mx_Field_labelAlwaysTopLeft label { +.mx_Field textarea:not(:placeholder-shown) + label { transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, @@ -144,6 +144,7 @@ limitations under the License. color: $greyed-fg-color; } +/* stylelint-disable no-descending-specificity */ .mx_Field_valid { &.mx_Field, &.mx_Field:focus-within { @@ -167,6 +168,7 @@ limitations under the License. color: $input-invalid-border-color; } } +/* stylelint-enable no-descending-specificity */ .mx_Field_tooltip { margin-top: -12px; diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.scss index 7c91b9dbde..fe8c76003b 100644 --- a/res/css/views/elements/_ManageIntegsButton.scss +++ b/res/css/views/elements/_ManageIntegsButton.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_ManageIntegsButton_error { position: relative; + float: right; cursor: not-allowed; } @@ -25,18 +26,6 @@ limitations under the License. top: -5px; } -.mx_ManageIntegsButton_error { - float: right; -} - -.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { - display: none; -} - -.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { - display: inline; -} - .mx_ManageIntegsButton_errorPopup { position: absolute; top: 110%; @@ -51,3 +40,11 @@ limitations under the License. text-align: center; z-index: 1000; } + +.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { + display: none; +} + +.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { + display: inline; +} diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index 262d78d880..73f0be291f 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -13,12 +13,6 @@ padding-left: 5px; } -.mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill, -.mx_EventTile_body .mx_GroupPill { - cursor: pointer; -} - /* More specific to override `.markdown-body a` text-decoration */ .mx_EventTile_content .markdown-body a.mx_Pill { text-decoration: none; @@ -64,6 +58,12 @@ padding-right: 5px; } +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { + cursor: pointer; +} + .mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar, diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 1bb3a74ab1..1f4445b88c 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -44,10 +44,10 @@ limitations under the License. top: 0; } -.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { - left: 2px; -} - .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { left: 23px; // 48px switch - 20px ball - 5px padding = 23px } + +.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { + left: 2px; +} diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss index adf16d6c4a..d45645863f 100644 --- a/res/css/views/messages/_CreateEvent.scss +++ b/res/css/views/messages/_CreateEvent.scss @@ -37,6 +37,3 @@ limitations under the License. .mx_CreateEvent_header { font-weight: bold; } - -.mx_CreateEvent_link { -} diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index f8738f10e3..935ee1aba3 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -30,7 +30,7 @@ limitations under the License. border-bottom: 1px solid $panel-divider-color; } -.mx_DateSeparator > date { +.mx_DateSeparator > div { margin: 0 25px; flex: 0 0 auto; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 09fdc28e78..e426598b0f 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -42,7 +42,6 @@ $AppsDrawerBodyHeight: 273px; .mx_AddWidget_button { order: 2; cursor: pointer; - padding-right: 12px; padding: 0; margin: 5px auto 5px auto; color: $accent-color; @@ -270,7 +269,6 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile_image { padding: 10px; - width: 75%; max-width: 100px; max-height: 100px; width: auto; diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 2d57a1783a..e5316f5a46 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -15,11 +15,6 @@ border-bottom: 1px solid $primary-hairline-color; } -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; -} - /* a "block" completion takes up a whole line */ .mx_Autocomplete_Completion_block { height: 34px; @@ -50,6 +45,22 @@ margin: 0 3px; } +/* styling for common completion elements */ +.mx_Autocomplete_Completion_subtitle { + font-style: italic; + flex: 1; +} + +.mx_Autocomplete_Completion_description { + color: gray; +} + +.mx_Autocomplete_Completion_container_pill { + margin: 12px; + display: flex; + flex-flow: wrap; +} + .mx_Autocomplete_Completion_container_truncate { .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_subtitle, @@ -62,13 +73,6 @@ } } -/* container for pill-style completions */ -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; - flex-flow: wrap; -} - .mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover { background: $selected-color; @@ -81,14 +85,3 @@ font-weight: 400; opacity: 0.4; } - -/* styling for common completion elements */ -.mx_Autocomplete_Completion_subtitle { - font-style: italic; - flex: 1; -} - -.mx_Autocomplete_Completion_description { - color: gray; -} - diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 6b2f0d8567..2b6b31acb4 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -85,10 +85,6 @@ limitations under the License. overflow: hidden; } -.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { - font-size: 13px; -} - .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; color: $primary-fg-color; @@ -116,6 +112,10 @@ limitations under the License. opacity: 0.25; } +.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { + font-size: 13px; +} + .mx_EntityTile_subtext { font-size: 11px; opacity: 0.5; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ba667a272b..c97ce0c584 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -126,6 +126,27 @@ limitations under the License. line-height: 57px !important; } +.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: 3px; + width: auto; +} + +// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) +.mx_EventTile_last > div > a > .mx_MessageTimestamp, +.mx_EventTile:hover > div > a > .mx_MessageTimestamp, +.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile:hover .mx_MessageActionBar, +.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { + visibility: visible; +} + /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ @@ -135,6 +156,15 @@ limitations under the License. background-color: $event-selected-color; } +.mx_EventTile_highlight, +.mx_EventTile_highlight .markdown-body { + color: $event-highlight-fg-color; + + .mx_EventTile_line { + background-color: $event-highlight-bg-color; + } +} + .mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line { background-color: $event-selected-color; @@ -166,14 +196,6 @@ limitations under the License. .mx_EventTile_sending .mx_RoomPill { opacity: 0.5; } -.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody { - opacity: 0.4; -} - -div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { - --lozenge-color: $event-notsent-color !important; - --lozenge-border-color: $event-notsent-color !important; -} .mx_EventTile_notSent { color: $event-notsent-color; @@ -184,28 +206,27 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { --lozenge-color: $event-redacted-fg-color; --lozenge-border-color: $event-redacted-border-color; display: block; - width: 100%; height: 22px; width: 250px; border-radius: 11px; background: - repeating-linear-gradient( - -45deg, - var(--lozenge-color), - var(--lozenge-color) 3px, - transparent 3px, - transparent 6px - ); + repeating-linear-gradient( + -45deg, + var(--lozenge-color), + var(--lozenge-color) 3px, + transparent 3px, + transparent 6px + ); box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; } -.mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body { - color: $event-highlight-fg-color; +.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody { + opacity: 0.4; +} - .mx_EventTile_line { - background-color: $event-highlight-bg-color; - } +div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { + --lozenge-color: $event-notsent-color; + --lozenge-border-color: $event-notsent-color; } .mx_EventTile_contextual { @@ -230,27 +251,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { text-decoration: none; } -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile_last > div > a > .mx_MessageTimestamp, -.mx_EventTile:hover > div > a > .mx_MessageTimestamp, -.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { - visibility: visible; -} - -.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { - visibility: visible; -} - -.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - left: 3px; - width: auto; -} - -.mx_EventTile:hover .mx_MessageActionBar, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { - visibility: visible; -} - .mx_EventTile_readAvatars { position: relative; display: inline-block; @@ -296,11 +296,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { overflow-y: hidden; } -/* End to end encryption stuff */ -.mx_EventTile:hover .mx_EventTile_e2eIcon { - opacity: 1; -} - .mx_EventTile_e2eIcon { display: block; position: absolute; @@ -367,22 +362,31 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { padding-left: 5px; } +.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + padding-left: 78px; +} + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { padding-left: 60px; } -.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color 5px solid; +} + +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color 5px solid; +} + .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line { padding-left: 78px; } -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; -} -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; +/* End to end encryption stuff */ +.mx_EventTile:hover .mx_EventTile_e2eIcon { + opacity: 1; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) @@ -392,12 +396,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { width: auto; } -/* -.mx_EventTile_verified .mx_EventTile_e2eIcon { - display: none; -} -*/ - // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon { @@ -416,35 +414,40 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* Various markdown overrides */ +.mx_EventTile_body pre { + border: 1px solid transparent; +} + .mx_EventTile_content .markdown-body { font-family: inherit !important; white-space: normal !important; line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) font-size: 14px; -} -/* have to use overlay rather than auto otherwise Linux and Windows - Chrome gets very confused about vertical spacing: - https://github.com/vector-im/vector-web/issues/754 -*/ -.mx_EventTile_content .markdown-body pre { - overflow-x: overlay; - overflow-y: visible; - max-height: 30vh; -} - -.mx_EventTile_content .markdown-body code { - // deliberate constants as we're behind an invert filter - background-color: #f8f8f8; -} - -.mx_EventTile_content .markdown-body { pre, code { font-family: $monospace-font-family !important; // deliberate constants as we're behind an invert filter color: #333; } + + pre { + // have to use overlay rather than auto otherwise Linux and Windows + // Chrome gets very confused about vertical spacing: + // https://github.com/vector-im/vector-web/issues/754 + overflow-x: overlay; + overflow-y: visible; + max-height: 30vh; + } + + code { + // deliberate constants as we're behind an invert filter + background-color: #f8f8f8; + } +} + +.mx_EventTile:hover .mx_EventTile_body pre { + border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter } .mx_EventTile_pre_container { @@ -465,14 +468,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { background-image: url($copy-button-url); } -.mx_EventTile_body pre { - border: 1px solid transparent; -} - -.mx_EventTile:hover .mx_EventTile_body pre { - border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter -} - .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { visibility: visible; } @@ -518,6 +513,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* end of overrides */ +/* stylelint-disable no-descending-specificity */ .mx_MatrixChat_useCompactLayout { .mx_EventTile { padding-top: 4px; @@ -595,3 +591,4 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } } } +/* stylelint-enable no-descending-specificity */ diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index 4a0a5fada7..e3f746e9d3 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -82,9 +82,6 @@ limitations under the License. display: block; } -.mx_MemberInfo_avatar .mx_BaseAvatar { -} - .mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { cursor: zoom-in; } diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index 695d3fe006..030a76674a 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -44,6 +44,12 @@ limitations under the License. margin-right: 10px; } +.mx_PinnedEventTile_actions { + float: right; + margin-right: 10px; + display: none; +} + .mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp { display: inline-block; } @@ -52,12 +58,6 @@ limitations under the License. display: block; } -.mx_PinnedEventTile_actions { - float: right; - margin-right: 10px; - display: none; -} - .mx_PinnedEventTile_unpinButton { display: inline-block; cursor: pointer; diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index 6c3eb0420a..13fcbf2529 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -78,6 +78,14 @@ limitations under the License. display: none; } + .mx_IndicatorScrollbar_leftOverflowIndicator { + background: linear-gradient(to left, $panel-gradient); + } + + .mx_IndicatorScrollbar_rightOverflowIndicator { + background: linear-gradient(to right, $panel-gradient); + } + &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator, &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator { position: absolute; @@ -88,13 +96,4 @@ limitations under the License. pointer-events: none; z-index: 100; } - - .mx_IndicatorScrollbar_leftOverflowIndicator { - background: linear-gradient(to left, $panel-gradient); - } - - .mx_IndicatorScrollbar_rightOverflowIndicator { - background: linear-gradient(to right, $panel-gradient); - } } - diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 0ade689054..2ee991cac7 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -22,7 +22,6 @@ limitations under the License. .mx_RoomHeader_wrapper { margin: auto; height: 52px; - align-items: center; display: flex; align-items: center; min-width: 0; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index c13b988b8e..b3d752df5e 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -25,6 +25,11 @@ limitations under the License. position: relative; } +.mx_RoomTile:focus { + filter: none !important; + background-color: $roomtile-focused-bg-color; +} + .mx_RoomTile_menuButton { display: none; flex: 0 0 16px; @@ -34,13 +39,6 @@ limitations under the License. background-position: center; } -// toggle menuButton and badge on hover/menu displayed -.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { - .mx_RoomTile_menuButton { - display: block; - } -} - .mx_RoomTile_tooltip { display: inline-block; position: relative; @@ -48,7 +46,6 @@ limitations under the License. left: -12px; } - .mx_RoomTile_nameContainer { display: flex; align-items: center; @@ -109,6 +106,15 @@ limitations under the License. text-overflow: ellipsis; } +.mx_RoomTile_badge { + flex: 0 1 content; + border-radius: 0.8em; + padding: 0 0.4em; + color: $accent-fg-color; + font-weight: 600; + font-size: 12px; +} + .collapsed { .mx_RoomTile { margin: 0 2px; @@ -135,13 +141,12 @@ limitations under the License. } } -.mx_RoomTile_badge { - flex: 0 1 content; - border-radius: 0.8em; - padding: 0 0.4em; - color: $accent-fg-color; - font-weight: 600; - font-size: 12px; +// toggle menuButton and badge on hover/menu displayed +.mx_RoomTile_menuDisplayed, +.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover { + .mx_RoomTile_menuButton { + display: block; + } } .mx_RoomTile_unreadNotify .mx_RoomTile_badge, @@ -175,11 +180,6 @@ limitations under the License. transform: scale(1.05, 1.05); } -.mx_RoomTile:focus { - filter: none !important; - background-color: $roomtile-focused-bg-color; -} - .mx_RoomTile_arrow { position: absolute; right: 0px; diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js index 6d99b54ce2..9cea4c5cd6 100644 --- a/src/components/views/messages/DateSeparator.js +++ b/src/components/views/messages/DateSeparator.js @@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component { } render() { - return

{ this.getLabel() }

; + return

{ this.getLabel() }

; } } From ca1e5bb3ae4fe741ee3f5e5122cb990430f36d37 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 11 Jul 2019 09:30:01 +0100 Subject: [PATCH 5/5] Comment disabled rules --- res/css/views/dialogs/_DevtoolsDialog.scss | 2 ++ res/css/views/elements/_Field.scss | 2 ++ res/css/views/rooms/_EventTile.scss | 2 ++ 3 files changed, 6 insertions(+) diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 0ed84f227b..417d0d6744 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -135,6 +135,8 @@ limitations under the License. } } +/* Ordering this block by specificity would require breaking it up into several + chunks, which seems like it would be more confusing to read. */ /* stylelint-disable no-descending-specificity */ .mx_DevTools_tgl-flip { + .mx_DevTools_tgl-btn { diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 1bc961d1f8..975f7c2e78 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -144,6 +144,8 @@ limitations under the License. color: $greyed-fg-color; } +/* Ordering this block by specificity would require breaking it up into several + chunks, which seems like it would be more confusing to read. */ /* stylelint-disable no-descending-specificity */ .mx_Field_valid { &.mx_Field, diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index c97ce0c584..5e01c32147 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -513,6 +513,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { /* end of overrides */ +/* Ordering this block by specificity would require breaking it up into several + chunks, which seems like it would be more confusing to read. */ /* stylelint-disable no-descending-specificity */ .mx_MatrixChat_useCompactLayout { .mx_EventTile {