From d0ce5114652c98b5050e1d0f425cf6fe965f78de Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 17 Jan 2022 11:58:19 -0600 Subject: [PATCH] css: fix stylelint errors. --- .stylelintrc.yml | 6 ++++ .../popup_menu_component.scss | 2 +- .../post_preview_component.scss | 2 +- .../post_votes_component.scss | 2 +- app/javascript/src/styles/base/010_reset.scss | 33 +++++++------------ app/javascript/src/styles/base/020_base.scss | 7 ++-- app/javascript/src/styles/base/030_links.scss | 2 +- app/javascript/src/styles/common/buttons.scss | 9 +++-- app/javascript/src/styles/common/dtext.scss | 2 +- .../src/styles/common/simple_form.scss | 6 ++-- .../src/styles/specific/comments.scss | 2 +- .../src/styles/specific/common_tooltips.scss | 4 +-- app/javascript/src/styles/specific/notes.scss | 3 +- app/javascript/src/styles/specific/posts.scss | 2 +- 14 files changed, 42 insertions(+), 40 deletions(-) diff --git a/.stylelintrc.yml b/.stylelintrc.yml index 2b567b824..4dabdd743 100644 --- a/.stylelintrc.yml +++ b/.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 diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss index 84163fcb5..272c85d02 100644 --- a/app/components/popup_menu_component/popup_menu_component.scss +++ b/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; diff --git a/app/components/post_preview_component/post_preview_component.scss b/app/components/post_preview_component/post_preview_component.scss index ea73a245e..dd39c0572 100644 --- a/app/components/post_preview_component/post_preview_component.scss +++ b/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 { diff --git a/app/components/post_votes_component/post_votes_component.scss b/app/components/post_votes_component/post_votes_component.scss index 6b7945144..87dcf9b95 100644 --- a/app/components/post_votes_component/post_votes_component.scss +++ b/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. diff --git a/app/javascript/src/styles/base/010_reset.scss b/app/javascript/src/styles/base/010_reset.scss index 574b54f39..e59af57c8 100644 --- a/app/javascript/src/styles/base/010_reset.scss +++ b/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%; - -ms-text-size-adjust: 100%; + 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; - // Cursors on all buttons applied consistently - -webkit-appearance: button; - // Style clickable inputs in iOS + cursor: pointer; // Cursors on all buttons applied consistently + appearance: button; // Style clickable inputs in iOS } input[type="search"] { - // Appearance in Safari/Chrome - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; + appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - // Inner-padding issues in Chrome OSX, Safari 5 + appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 } textarea { - overflow: auto; - // Remove vertical scrollbar in IE6-9 - vertical-align: top; - // Readability and alignment cross-browser + overflow: auto; // Remove vertical scrollbar in IE6-9 + vertical-align: top; // Readability and alignment cross-browser } diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index 4aae77cb0..981590eff 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/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; diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss index 6d5f3f531..2dd55f010 100644 --- a/app/javascript/src/styles/base/030_links.scss +++ b/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); diff --git a/app/javascript/src/styles/common/buttons.scss b/app/javascript/src/styles/common/buttons.scss index 640af3b09..82e643ad2 100644 --- a/app/javascript/src/styles/common/buttons.scss +++ b/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; - 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); + 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; + 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] { diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss index 3146a783e..8d8110f0d 100644 --- a/app/javascript/src/styles/common/dtext.scss +++ b/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; diff --git a/app/javascript/src/styles/common/simple_form.scss b/app/javascript/src/styles/common/simple_form.scss index 3be6f0948..1e6ea81e7 100644 --- a/app/javascript/src/styles/common/simple_form.scss +++ b/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) { diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss index 4530c5b9f..00ff3fef3 100644 --- a/app/javascript/src/styles/specific/comments.scss +++ b/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 { diff --git a/app/javascript/src/styles/specific/common_tooltips.scss b/app/javascript/src/styles/specific/common_tooltips.scss index 525aa19a7..ce18f4635 100644 --- a/app/javascript/src/styles/specific/common_tooltips.scss +++ b/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); } diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss index ee0a83b73..d53753c03 100644 --- a/app/javascript/src/styles/specific/notes.scss +++ b/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; } diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 6e8b3ebf2..30f85e5a4 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/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"); } }