css: fix stylelint errors.

.stylelintrc.yml

@@ -7,3 +7,9 @@ rules:
   no-descending-specificity: null
   selector-descendant-combinator-no-non-space: null
   selector-list-comma-newline-after: null
+  selector-class-pattern: "[a-z_-]+"
+  selector-id-pattern: "[a-z_-]+"
+  scss/dollar-variable-pattern: "[a-z_-]+"
+  scss/operator-no-unspaced: null
+  scss/comment-no-empty: null
+  shorthand-property-no-redundant-values: null

app/components/popup_menu_component/popup_menu_component.scss

@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/000_vars.scss";
+@import "../../javascript/src/styles/base/000_vars";
 
 div.popup-menu {
   display: inline-block;

app/components/post_preview_component/post_preview_component.scss

@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/000_vars.scss";
+@import "../../javascript/src/styles/base/000_vars";
 
 article.post-preview {
   .post-preview-link {

app/components/post_votes_component/post_votes_component.scss

@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/000_vars.scss";
+@import "../../javascript/src/styles/base/000_vars";
 
 .post-votes {
   // Fix it so that the vote buttons don't move when the score changes width.

app/javascript/src/styles/base/010_reset.scss

@@ -13,7 +13,10 @@ html, body {
   padding: 0;
 }
 
-h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite,
+code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var,
+dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
@@ -45,8 +48,7 @@ q::before, q::after, blockquote::before, blockquote::after {
 html {
   overflow-y: scroll;
   font-size: 100%;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
 }
 
 // Focus states
@@ -103,7 +105,7 @@ sub {
 // Source: http://github.com/necolas/normalize.css
 img {
   border: 0;
-  -ms-interpolation-mode: bicubic;
+  image-rendering: smooth;
 }
 
 // Forms
@@ -124,9 +126,6 @@ textarea {
 button,
 input {
   line-height: normal;
-  // FF3/4 have !important on line-height in UA stylesheet
-  *overflow: visible;
-  // Inner spacing ie IE6/7
 }
 
 button::-moz-focus-inner,
@@ -140,28 +139,20 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  cursor: pointer;
+  cursor: pointer; // Cursors on all buttons applied consistently
-  // Cursors on all buttons applied consistently
+  appearance: button; // Style clickable inputs in iOS
-  -webkit-appearance: button;
-  // Style clickable inputs in iOS
 }
 
 input[type="search"] {
-  // Appearance in Safari/Chrome
+  appearance: textfield;
-  -webkit-appearance: textfield;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
 
 input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
-  // Inner-padding issues in Chrome OSX, Safari 5
 }
 
 textarea {
-  overflow: auto;
+  overflow: auto; // Remove vertical scrollbar in IE6-9
-  // Remove vertical scrollbar in IE6-9
+  vertical-align: top; // Readability and alignment cross-browser
-  vertical-align: top;
-  // Readability and alignment cross-browser
 }

app/javascript/src/styles/base/020_base.scss

@@ -18,7 +18,7 @@ body {
   line-height: 1.25em;
 }
 
-abbr[title=required] {
+abbr[title="required"] {
   display: none;
 }
 
@@ -82,7 +82,8 @@ textarea {
   padding-left: 0.5em;
 }
 
-/* Highlight link anchor targets (e.g. /forum_topics/123#forum_post_456). Use !important to override even table row backgrounds. */
+/* Highlight link anchor targets (e.g. /forum_topics/123#forum_post_456). Use
+ * !important to override even table row backgrounds. */
 :target {
   background: var(--target-background) !important;
 }
@@ -118,7 +119,7 @@ details {
   }
 }
 
-.fineprint {
+.fineprint, %fineprint {
   color: var(--muted-text-color);
   font-style: italic;
   font-size: 0.8em;

app/javascript/src/styles/base/030_links.scss

@@ -1,4 +1,4 @@
-@import "./000_vars.scss";
+@import "./000_vars";
 
 a:link {
   color: var(--link-color);

app/javascript/src/styles/common/buttons.scss

@@ -38,12 +38,15 @@ a, button, input[type="submit"] {
     background-color: var(--button-primary-background-color);
     border: none;
 
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition:
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+      background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: 0 3px 1px -2px rgba(0 0 0 / 20%), 0 2px 2px 0 rgba(0 0 0 / 14%), 0 1px 5px 0 rgba(0 0 0 / 12%);
 
     &:hover:not([disabled]) {
       background-color: var(--button-primary-hover-background-color);
-      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 4px -1px rgba(0 0 0 / 20%), 0 4px 5px 0 rgba(0 0 0 / 14%), 0 1px 10px 0 rgba(0 0 0 / 12%);
     }
 
     &[disabled] {

app/javascript/src/styles/common/dtext.scss

@@ -1,4 +1,4 @@
-@import "../base/000_vars.scss";
+@import "../base/000_vars";
 
 div.prose {
   line-height: 1.4em;

app/javascript/src/styles/common/simple_form.scss

@@ -1,4 +1,4 @@
-@import "../base/020_base.scss";
+@import "../base/020_base";
 
 form.simple_form {
   margin: 0 0 1em 0;
@@ -30,13 +30,13 @@ form.simple_form {
   div.input {
     margin-bottom: 1em;
 
-    input[type=text], input[type=file], input[type=password], input[type=email], input[type=url] {
+    input[type="text"], input[type="file"], input[type="password"], input[type="email"], input[type="url"] {
       width: 100%;
       max-width: 25em;
     }
 
     .hint {
-      @extend .fineprint;
+      @extend %fineprint;
       padding-left: 1em;
 
       @media (max-width: 660px) {

app/javascript/src/styles/specific/comments.scss

@@ -1,4 +1,4 @@
-@import "../base/000_vars.scss";
+@import "../base/000_vars";
 
 div#c-comments {
   div#a-index {

app/javascript/src/styles/specific/common_tooltips.scss

@@ -12,7 +12,7 @@ div[data-tippy-root].tooltip-loading {
   box-shadow: var(--shadow-lg);
 
   /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
-  &[data-placement^=bottom] {
+  &[data-placement^="bottom"] {
     > .tippy-arrow::before {
       border-bottom-color: var(--post-tooltip-background-color);
       bottom: 16px;
@@ -26,7 +26,7 @@ div[data-tippy-root].tooltip-loading {
     }
   }
 
-  &[data-placement^=top] {
+  &[data-placement^="top"] {
     > .tippy-arrow::before {
       border-top-color: var(--post-tooltip-background-color);
     }

app/javascript/src/styles/specific/notes.scss

@@ -29,7 +29,8 @@
   div.note-body, div.note-box.embedded div.note-box-inner-border {
     box-sizing: content-box;
 
-    h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
+    h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em,
+    strong, small, big, b, i, font, u, s, code, center {
       line-height: 1.25;
     }
 

app/javascript/src/styles/specific/posts.scss

@@ -150,7 +150,7 @@ div#c-posts {
         top: -16%;
         width: 100%;
         height: 100%;
-        background: top left/20% no-repeat url(../../../../../public/images/danbirthday.png);
+        background: top left/20% no-repeat url("../../../../../public/images/danbirthday.png");
       }
     }