Merge pull request #3200 from matrix-org/jryans/stylelint-all-files

Run stylelint on all SCSS files

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

res/css/views/elements/_AddressSelector.scss

@@ -20,9 +20,8 @@ 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;
+    border: solid 1px $accent-color;
     cursor: pointer;
 }
 

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;

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,9 @@ 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,
     &.mx_Field:focus-within {
@@ -167,6 +170,7 @@ limitations under the License.
         color: $input-invalid-border-color;
     }
 }
+/* stylelint-enable no-descending-specificity */
 
 .mx_Field_tooltip {
     margin-top: -12px;

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 {

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;
+}

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;
@@ -33,7 +27,7 @@
 }
 
 .mx_UserPill_selected {
-    background-color: $accent-color ! important;
+    background-color: $accent-color !important;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -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,
@@ -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 {

res/css/views/elements/_Spinner.scss

@@ -25,4 +25,4 @@ limitations under the License.
 
 .mx_MatrixChat_middlePanel .mx_Spinner {
     height: auto;
-}
+}

res/css/views/elements/_TextWithTooltip.scss

@@ -16,4 +16,4 @@ limitations under the License.
 
 .mx_TextWithTooltip_tooltip {
     display: none;
-}
+}

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;
+}

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;