Lint: compose-form.scss

app/styles/gabsocial/components/compose-form.scss

@@ -1,5 +1,6 @@
 .compose-form {
   padding: 10px;
+
   &__sensitive-button {
     padding: 10px;
     padding-top: 0;
@@ -7,6 +8,7 @@
     font-weight: 500;
     &.active {color: $highlight-text-color;}
     input[type=checkbox] {display: none;}
+
     .checkbox {
       display: inline-block;
       position: relative;
@@ -19,12 +21,14 @@
       top: -1px;
       border-radius: 4px;
       vertical-align: middle;
+
       &.active {
         border-color: $highlight-text-color;
         background: $highlight-text-color;
       }
     }
   }
+
   .compose-form__warning {
           color: $primary-text-color;
     margin-bottom: 10px;
@@ -34,6 +38,7 @@
     border-radius: 4px;
     font-size: 13px;
     font-weight: 400;
+
     strong {
       color: $inverted-text-color;
       font-weight: 500;
@@ -43,10 +48,12 @@
         }
       }
     }
+
     a {
       color: $lighter-text-color;
       font-weight: 500;
       text-decoration: underline;
+
       &:hover,
       &:active,
       &:focus {
@@ -54,30 +61,36 @@
       }
     }
   }
+
   .emoji-picker-dropdown {
     position: absolute;
     top: 5px;
     right: 5px;
     z-index: 1;
   }
+
   .compose-form__autosuggest-wrapper {
     position: relative;
   }
+
   .autosuggest-textarea,
   .autosuggest-input,
   .spoiler-input {
     position: relative;
   }
+
   .spoiler-input {
     height: 0;
     transform-origin: bottom;
-    opacity: 0.0;
+    opacity: 0;
+
     &.spoiler-input--visible {
       height: 36px;
       margin-bottom: 11px;
-      opacity: 1.0;
+      opacity: 1;
     }
   }
+
   .autosuggest-textarea__textarea,
   .spoiler-input__input {
     display: block;
@@ -96,6 +109,7 @@
     @media screen and (max-width: 600px) {font-size: 16px;}
   }
   .spoiler-input__input {border-radius: 4px;}
+
   .autosuggest-textarea__textarea {
     min-height: 100px;
     border-radius: 5px 5px 0 0;
@@ -109,17 +123,20 @@
       resize: vertical;
     }
   }
+
   &.condensed {
     .autosuggest-textarea__textarea {
       min-height: 46px;
       border-radius: 5px;
     }
   }
+
   .emoji-picker-wrapper,
   .autosuggest-textarea__suggestions-wrapper {
     position: relative;
     height: 0;
   }
+
   .autosuggest-textarea__suggestions {
     box-sizing: border-box;
     display: none;
@@ -135,15 +152,20 @@
     padding: 6px;
     &.autosuggest-textarea__suggestions--visible {display: block;}
   }
+
   .autosuggest-textarea__suggestions__item {
     padding: 10px;
     cursor: pointer;
     border-radius: 4px;
+
     &:hover,
     &:focus,
     &:active,
-    &.selected {background: darken($ui-secondary-color, 10%);}
+    &.selected {
+      background: darken($ui-secondary-color, 10%);
+    }
   }
+
   .autosuggest-account,
   .autosuggest-emoji {
     display: flex;
@@ -153,6 +175,7 @@
     line-height: 18px;
     font-size: 14px;
   }
+
   .autosuggest-account-icon,
   .autosuggest-emoji img {
     display: block;
@@ -161,21 +184,25 @@
     height: 16px;
   }
   .autosuggest-account .display-name__account {color: $lighter-text-color;}
+
   .compose-form__modifiers {
     color: $inverted-text-color;
     font-family: inherit;
     font-size: 14px;
     background: $simple-background-color;
     .compose-form__upload-wrapper {overflow: hidden;}
+
     .compose-form__uploads-wrapper {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
+
       &.contains-media {
         padding: 5px;
         border-top: 1px solid darken($simple-background-color, 8%);
       }
     }
+
     .compose-form__upload {
       flex: 1 1 0;
       min-width: 40%;
@@ -188,6 +215,7 @@
         justify-content: space-between;
         opacity: 0;
         transition: opacity .1s ease;
+
         .icon-button {
           flex: 0 1 auto;
           color: $gab-secondary-text;
@@ -195,12 +223,16 @@
           font-weight: 500;
           padding: 10px;
           font-family: inherit;
+
           &:hover,
           &:focus,
-          &:active {color: $gab-text-highlight;}
+          &:active {
+            color: $gab-text-highlight;
+          }
         }
         &.active {opacity: 1;}
       }
+
       &-description {
         position: absolute;
         z-index: 2;
@@ -212,8 +244,9 @@
         padding: 10px;
         opacity: 0;
         transition: opacity .1s ease;
+
         textarea {
-          background: rgba(0,0,0,0.3);
+          background: rgba(0, 0, 0, 0.3);
           box-sizing: border-box;
           background: transparent;
           color: $gab-secondary-text;
@@ -225,7 +258,9 @@
           font-family: inherit;
           font-size: 14px;
           font-weight: 500;
+
           &:focus {color: #fff;}
+
           &::placeholder {
             color: $gab-secondary-text;
           }
@@ -233,6 +268,7 @@
         &.active {opacity: 1;}
       }
     }
+
     .compose-form__upload-thumbnail {
       border-radius: 4px;
       background-position: center;
@@ -243,6 +279,7 @@
       overflow: hidden;
     }
   } // end .compose-form .compose-form__modifiers
+
   .compose-form__buttons-wrapper {
     padding: 10px;
     background: darken($simple-background-color, 8%);
@@ -250,22 +287,27 @@
     display: flex;
     justify-content: space-between;
     flex: 0 0 auto;
+
     .compose-form__buttons {
       display: flex;
       .compose-form__upload-button-icon {line-height: 27px;}
+
       .compose-form__sensitive-button {
         display: none;
         &.compose-form__sensitive-button--visible {display: block;}
         .compose-form__sensitive-button__icon {line-height: 27px;}
       }
     }
+
     .icon-button {
       box-sizing: content-box;
       padding: 0 3px;
     }
+
     .character-counter__wrapper {
       align-self: center;
       margin-right: 4px;
+
       .character-counter {
         cursor: default;
         font-family: $font-sans-serif, sans-serif;
@@ -276,11 +318,13 @@
       }
     }
   }
+
   .compose-form__publish {
     display: flex;
     justify-content: flex-end;
     min-width: 0;
     flex: 0 0 auto;
+
     .compose-form__publish-button-wrapper {
       overflow: hidden;
       padding-top: 10px;