umputun#5 use css custom properties instead of color constant

Mavrin · Feb 13, 2020 · 2c31b24 · 2c31b24
1 parent 1334048
commit 2c31b24
Show file tree

Hide file tree

Showing 16 changed files with 1,528 additions and 70 deletions.
diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["@mavrin/stylelint-declaration-use-css-custom-properties"],
+  "rules": {
+    "mavrin/stylelint-declaration-use-css-custom-properties": {
+      "cssDefinitions": ["color"],
+      "ignoreProperties": ["/^\\$/"],
+      "ignoreValues": ["/\\$/"]
+    }
+  }
+}
diff --git a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss
@@ -36,7 +36,7 @@
   margin-left: 0.1rem;
   margin-bottom: 0.5rem;
 
-  &:before {
+  &::before {
     content: '◄';
     display: inline-block;
     margin-right: 3px;

diff --git a/...nd/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss b/...nd/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss
@@ -28,9 +28,11 @@
   margin-top: 10px;
   flex-grow: 1;
 }
+
 .comment-form__subscribe-by-email__preloader {
   margin: 0 auto;
 }
+
 .comment-form__subscribe-by-email__token-input {
   resize: vertical;
   border: 1px solid #c4c4c4;

diff --git a/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss b/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss
@@ -1,6 +1,7 @@
 .comment-form__rss-dropdown {
   text-align: left;
 }
+
 .comment-form__rss-dropdown__link {
   font-weight: 700;
   white-space: nowrap;

diff --git a/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss b/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss
@@ -38,6 +38,7 @@
 
   .comment-form__toolbar-item {
     color: #ddd;
+
     &:hover {
       color: #0aa;
     }

diff --git a/frontend/app/components/comment-form/text-expander.module.pcss b/frontend/app/components/comment-form/text-expander.module.pcss
@@ -28,8 +28,6 @@
   border-bottom: 1px solid #dfe2e5;
 }
 
-
-
 .suggesterItemDark {
   border-bottom: 1px solid #333;
 }
@@ -45,6 +43,7 @@
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 }
+
 .suggesterItem:last-child {
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;

diff --git a/frontend/app/components/comment/_collapsed/comment_collapsed.scss b/frontend/app/components/comment/_collapsed/comment_collapsed.scss
@@ -7,11 +7,13 @@
       display: none;
     }
   }
+
   .comment__info {
     margin-bottom: 0;
     opacity: 0.8;
     min-height: 20px;
   }
+
   .comment__avatar {
     width: 20px;
     height: 20px;

diff --git a/frontend/app/components/comment/_replying/comment_replying.scss b/frontend/app/components/comment/_replying/comment_replying.scss
@@ -15,6 +15,7 @@
     .comment__info {
       padding-left: 8px;
     }
+
     .comment__body {
       padding: 8px 8px 0;
     }

diff --git a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
@@ -32,6 +32,7 @@
 
   .comment__edit-timer {
     color: #a6a6a6;
+
     + .comment__controls {
       &::before {
         color: #eee;

diff --git a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
@@ -32,6 +32,7 @@
 
   .comment__edit-timer {
     color: #a6a6a6;
+
     + .comment__controls {
       &::before {
         color: #777;

diff --git a/frontend/app/components/raw-content/code-highlight.scss b/frontend/app/components/raw-content/code-highlight.scss
@@ -25,6 +25,7 @@ pre {
   .kd {
     color: var(--chroma-07);
   }
+
   .kn,
   .k,
   .kc,

diff --git a/frontend/app/components/raw-content/raw-content.scss b/frontend/app/components/raw-content/raw-content.scss
@@ -66,7 +66,7 @@
       margin-top: 0;
     }
   }
-
+  /* stylelint-disable-next-line no-descending-specificity */
   blockquote {
     padding: 12px 8px 12px 16px;
     border-left: 2px solid;

diff --git a/frontend/app/components/thread/__collapse/thread__collapse.scss b/frontend/app/components/thread/__collapse/thread__collapse.scss
@@ -6,7 +6,7 @@
   left: -4px;
   cursor: pointer;
 
-  &:after {
+  &::after {
     display: block;
     content: '';
     position: absolute;
@@ -16,7 +16,7 @@
     height: 100%;
   }
 
-  &:hover:after {
+  &:hover::after {
     transform: translateX(-1px);
     border-left: 3px solid #777;
     z-index: 10;
@@ -29,21 +29,20 @@
   top: 12px;
   left: 0;
   display: flex;
-  border-radius: 2px;
   text-align: center;
   opacity: 0.8;
   border-radius: 2px;
   border: 1px solid;
 
-  &:after {
+  &::after {
     display: none;
   }
 
   &:hover {
     opacity: 1;
   }
 
-  &:hover:after {
+  &:hover::after {
     transform: translateX(0);
   }
 }
@@ -56,8 +55,8 @@
   height: 2px;
   border-bottom: 2px solid;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     width: 100%;
     height: 2px;
@@ -66,7 +65,8 @@
     top: -4px;
     left: 0;
   }
-  &:after {
+
+  &::after {
     top: 4px !important;
   }
 }
diff --git a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss
@@ -1,10 +1,10 @@
 .thread_theme_dark {
   .thread__collapse {
-    &:after {
+    &::after {
       border-color: #505050;
     }
 
-    &:hover:after {
+    &:hover::after {
       border-color: #fff;
     }
   }