Fix lint:css

simonihmig · simonihmig · commit 6aa23cd41ab1 · 2024-01-08T23:40:24.000+01:00
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -2,4 +2,7 @@
 
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  rules: {
+    'selector-class-pattern': null,
+  }
 };
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1,18 +1,18 @@
-@import "components/addon-tabs.css";
-@import "components/brand-logos.css";
-@import "components/ecosystem-icons.css";
-@import "components/cta-emberconf.css";
-@import "components/faqs.css";
-@import "components/homepage-image-grid.css";
-@import "components/homepage-hero-callout.css";
-@import "components/lts-table.css";
-@import "components/release-timeline.css";
-@import "components/survey-section.css";
-@import "components/surveys.css";
-@import "components/team-list.css";
-@import "components/terminal-code.css";
-@import "components/callout-banner.css";
-@import "legacy/form.css";
+@import url("components/addon-tabs.css");
+@import url("components/brand-logos.css");
+@import url("components/ecosystem-icons.css");
+@import url("components/cta-emberconf.css");
+@import url("components/faqs.css");
+@import url("components/homepage-image-grid.css");
+@import url("components/homepage-hero-callout.css");
+@import url("components/lts-table.css");
+@import url("components/release-timeline.css");
+@import url("components/survey-section.css");
+@import url("components/surveys.css");
+@import url("components/team-list.css");
+@import url("components/terminal-code.css");
+@import url("components/callout-banner.css");
+@import url("legacy/form.css");
 
 @media only percy {
   .hide-in-percy {
diff --git a/app/styles/components/addon-tabs.css b/app/styles/components/addon-tabs.css
@@ -1,7 +1,11 @@
 .addon-tabs {
-  background: linear-gradient(0deg, rgba(52, 55, 62, 1) 0%, rgba(66, 69, 77, 1) 100%);
+  background: linear-gradient(
+    0deg,
+    rgb(52 55 62 / 100%) 0%,
+    rgb(66 69 77 / 100%) 100%
+  );
   border-radius: 15px;
-  box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.75);
+  box-shadow: 0 5px 15px -10px rgb(0 0 0 / 75%);
   min-height: 364px;
   width: 100%;
 }
diff --git a/app/styles/components/brand-logos.css b/app/styles/components/brand-logos.css
@@ -13,7 +13,7 @@
 
 .brand-logos > li {
   border: 1px solid rgba($black, 0.3);
-  background-image: url('/images/brand/brand-bg.png');
+  background-image: url("/images/brand/brand-bg.png");
   border-radius: 4px;
   padding: 1rem 1.5rem;
 }
@@ -27,5 +27,5 @@
 }
 
 .brand-logos > li:nth-child(3) {
-  background-color: rgba(199, 52, 31, 0.9);
+  background-color: rgb(199 52 31 / 90%);
 }
diff --git a/app/styles/components/callout-banner.css b/app/styles/components/callout-banner.css
@@ -22,7 +22,7 @@
 }
 
 .callout-banner a + a::before {
-  content: '';
+  content: "";
   width: 3px;
   height: 3px;
   background: white;
diff --git a/app/styles/components/cta-emberconf.css b/app/styles/components/cta-emberconf.css
@@ -27,7 +27,7 @@
   margin-top: 1rem;
 }
 
-@media screen and (min-width: 450px) {
+@media screen and (width >= 450px) {
   .emberconf-announcement {
     padding-top: 3rem;
     margin-top: -5rem;
diff --git a/app/styles/components/ecosystem-icons.css b/app/styles/components/ecosystem-icons.css
@@ -17,7 +17,7 @@
   margin: auto;
 }
 
-@media (max-width: 1007px) {
+@media (width <= 1007px) {
   .ecosystem-icons {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     width: inherit;
diff --git a/app/styles/components/homepage-hero-callout.css b/app/styles/components/homepage-hero-callout.css
@@ -21,7 +21,7 @@
 }
 
 .hero-callout-text > a:link {
-  color: #74B0CE;
+  color: #74b0ce;
   background: none;
   text-decoration: underline;
 }
diff --git a/app/styles/components/homepage-image-grid.css b/app/styles/components/homepage-image-grid.css
@@ -27,13 +27,11 @@
 }
 
 .homepage-image-grid__img-tall-bottom {
-  grid-row-start: 2;
-  grid-row-end: 5;
+  grid-row: 2 / 5;
 }
 
 .homepage-image-grid__img-tall-top {
-  grid-row-start: 1;
-  grid-row-end: 4;
+  grid-row: 1 / 4;
 }
 
 .homepage-image-grid__img-short {
@@ -45,13 +43,13 @@
   width: max-content;
 }
 
-[class*=well-] img {
-  width: auto;
-}
-
-/* IN ht estyleguides */
-
 img {
   max-width: 100%;
   height: auto;
 }
+
+[class*="well-"] img {
+  width: auto;
+}
+
+/* IN ht estyleguides */
diff --git a/app/styles/components/survey-section.css b/app/styles/components/survey-section.css
@@ -8,10 +8,7 @@
   align-items: flex-start;
   display: grid;
   grid-column-gap: 0.5rem;
-  grid-template-areas:
-    "hyperlink title";
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr;
+  grid-template: "hyperlink title" 1fr / auto 1fr;
 }
 
 .survey-section__title-container__title {
diff --git a/app/styles/components/surveys.css b/app/styles/components/surveys.css
@@ -2,7 +2,7 @@
   height: 160px;
 }
 
- /* TODO this could be better, probably */
+/* TODO this could be better, probably */
 .survey-sponsor-link {
   background: transparent !important;
 }
diff --git a/app/styles/components/terminal-code.css b/app/styles/components/terminal-code.css
@@ -13,15 +13,15 @@
 }
 
 .terminal-code .dot.red {
-  background-color: rgb(238, 90, 90);
+  background-color: rgb(238 90 90);
 }
 
 .terminal-code .dot.yellow {
-  background-color: rgb(250, 208, 109);
+  background-color: rgb(250 208 109);
 }
 
 .terminal-code .dot.green {
-  background-color: rgb(116, 173, 111);
+  background-color: rgb(116 173 111);
 }
 
 .terminal-code code {
diff --git a/app/styles/legacy/form.css b/app/styles/legacy/form.css
@@ -1,9 +1,8 @@
-
 .tomster-form {
   margin-top: 1.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form {
     padding: 0.5em;
   }
@@ -40,14 +39,14 @@
   color: #c7341f;
 }
 
-.tomster-form input[type=radio] {
+.tomster-form input[type="radio"] {
   display: inline-block;
   margin-right: 20px;
 }
 
-.tomster-form input[type=text],
-.tomster-form input[type=email],
-.tomster-form input[type=file],
+.tomster-form input[type="text"],
+.tomster-form input[type="email"],
+.tomster-form input[type="file"],
 .tomster-form textarea {
   border: none;
   margin: 0;
@@ -58,10 +57,10 @@
   outline: 0;
   width: 100%;
   border-radius: 6px;
-  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgb(0 0 0 / 10%);
 }
 
-.tomster-form input[type=file] {
+.tomster-form input[type="file"] {
   padding: 15px 10px;
   background-color: transparent;
   cursor: pointer;
@@ -72,21 +71,21 @@
   height: 100px;
 }
 
-.tomster-form input[type=text]:focus,
-.tomster-form input[type=email]:focus,
-.tomster-form input[type=file]:focus,
+.tomster-form input[type="text"]:focus,
+.tomster-form input[type="email"]:focus,
+.tomster-form input[type="file"]:focus,
 .tomster-form textarea:focus {
   border-color: #888;
 }
 
-.tomster-form input[type=text].error,
-.tomster-form input[type=email].error,
-.tomster-form input[type=file].error,
+.tomster-form input[type="text"].error,
+.tomster-form input[type="email"].error,
+.tomster-form input[type="file"].error,
 .tomster-form textarea.error {
   border-color: #c7341f;
 }
 
-.tomster-form input[type=file]:focus {
+.tomster-form input[type="file"]:focus {
   border-color: #ddd;
 }
 
@@ -101,7 +100,7 @@
   margin-top: 0.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form fieldset .choice {
     text-align: left;
   }
@@ -120,7 +119,7 @@
   width: calc(100% - 20px);
 }
 
-.tomster-form input[type=submit] {
+.tomster-form input[type="submit"] {
   margin-top: 2em;
 }
 
@@ -130,7 +129,7 @@
   line-height: 40px;
 }
 
-.tomster-form .inline-field input[type=text] {
+.tomster-form .inline-field input[type="text"] {
   width: auto;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`
`14`	`14`	`.brand-logos > li {`
`15`	`15`	`border: 1px solid rgba($black, 0.3);`
`16`		`- background-image: url('/images/brand/brand-bg.png');`
	`16`	`+ background-image: url("/images/brand/brand-bg.png");`
`17`	`17`	`border-radius: 4px;`
`18`	`18`	`padding: 1rem 1.5rem;`
`19`	`19`	`}`
`@@ -27,5 +27,5 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.brand-logos > li:nth-child(3) {`
`30`		`- background-color: rgba(199, 52, 31, 0.9);`
	`30`	`+ background-color: rgb(199 52 31 / 90%);`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.callout-banner a + a::before {`
`25`		`- content: '';`
	`25`	`+ content: "";`
`26`	`26`	`width: 3px;`
`27`	`27`	`height: 3px;`
`28`	`28`	`background: white;`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`margin-top: 1rem;`
`28`	`28`	`}`
`29`	`29`
`30`		`-@media screen and (min-width: 450px) {`
	`30`	`+@media screen and (width >= 450px) {`
`31`	`31`	`.emberconf-announcement {`
`32`	`32`	`padding-top: 3rem;`
`33`	`33`	`margin-top: -5rem;`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`margin: auto;`
`18`	`18`	`}`
`19`	`19`
`20`		`-@media (max-width: 1007px) {`
	`20`	`+@media (width <= 1007px) {`
`21`	`21`	`.ecosystem-icons {`
`22`	`22`	`grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));`
`23`	`23`	`width: inherit;`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.hero-callout-text > a:link {`
`24`		`- color: #74B0CE;`
	`24`	`+ color: #74b0ce;`
`25`	`25`	`background: none;`
`26`	`26`	`text-decoration: underline;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`height: 160px;`
`3`	`3`	`}`
`4`	`4`
`5`		`- /* TODO this could be better, probably */`
	`5`	`+/* TODO this could be better, probably */`
`6`	`6`	`.survey-sponsor-link {`
`7`	`7`	`background: transparent !important;`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,15 +13,15 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.terminal-code .dot.red {`
`16`		`- background-color: rgb(238, 90, 90);`
	`16`	`+ background-color: rgb(238 90 90);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.terminal-code .dot.yellow {`
`20`		`- background-color: rgb(250, 208, 109);`
	`20`	`+ background-color: rgb(250 208 109);`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.terminal-code .dot.green {`
`24`		`- background-color: rgb(116, 173, 111);`
	`24`	`+ background-color: rgb(116 173 111);`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.terminal-code code {`