Fix glitch-soc SCSS code style and refactor closer to upstream

13 files changed, 47 insertions, 49 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 89faaae6a..b95cffbb4 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -62,11 +62,11 @@
 }
 
 .account__avatar {
-  @include avatar-radius();
+  @include avatar-radius;
+
   display: block;
   position: relative;
   cursor: pointer;
-
   width: 36px;
   height: 36px;
   background-size: 36px 36px;
@@ -79,11 +79,13 @@
 
   &-composite {
     @include avatar-radius;
+
     overflow: hidden;
     position: relative;
 
     & div {
       @include avatar-radius;
+
       float: left;
       position: relative;
       box-sizing: border-box;
@@ -104,24 +106,24 @@
 }
 
 .account__avatar-overlay {
-  position: relative;
   @include avatar-size(48px);
 
   position: relative;
 
   &-base {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(36px);
 
     img {
       @include avatar-radius;
+
       width: 100%;
       height: 100%;
     }
   }
 
   &-overlay {
-    @include avatar-radius();
+    @include avatar-radius;
     @include avatar-size(24px);
 
     position: absolute;
@@ -131,6 +133,7 @@
 
     img {
       @include avatar-radius;
+
       width: 100%;
       height: 100%;
     }
@@ -746,8 +749,6 @@
       display: block;
       box-sizing: border-box;
       width: calc(100% + 20px);
-      margin: 0;
-      margin-top: 5px;
       color: $secondary-text-color;
       background: $ui-base-color;
       padding: 10px;
@@ -774,6 +775,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+
   &__message {
     color: $darker-text-color;
     padding: 8px 0;
@@ -784,6 +786,7 @@
     text-align: center;
     margin-bottom: 16px;
   }
+
   &__action {
     display: flex;
     justify-content: space-between;
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 263a9ce78..fd4bb95b5 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -428,6 +428,7 @@ $ui-header-height: 55px;
 
   button {
     @extend .column-header__button;
+
     background: transparent;
     text-align: center;
     padding: 10px 5px;
@@ -491,6 +492,7 @@ $ui-header-height: 55px;
   // notif cleaning drawer
   &.ncd {
     transition: none;
+
     &.collapsed {
       max-height: 0;
       opacity: 0.7;
@@ -579,8 +581,8 @@ $ui-header-height: 55px;
   font-size: inherit;
   flex: auto;
   background-color: $ui-base-color;
-  transition-property: background-color, box-shadow;
   transition: all 0.2s ease;
+  transition-property: background-color, box-shadow;
 
   &[disabled] {
     cursor: not-allowed;
@@ -771,7 +773,7 @@ $ui-header-height: 55px;
 
   .column-select {
     &__control {
-      @include search-input();
+      @include search-input;
 
       &::placeholder {
         color: lighten($darker-text-color, 4%);
@@ -845,7 +847,8 @@ $ui-header-height: 55px;
     }
 
     &__menu {
-      @include search-popout();
+      @include search-popout;
+
       padding: 0;
       background: $ui-secondary-color;
     }
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 64fbe9e08..aa2cc664e 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -94,7 +94,6 @@
 .compose-form__sensitive-button {
   padding: 10px;
   padding-top: 0;
-
   font-size: 14px;
   font-weight: 500;
 
@@ -155,17 +154,14 @@
 
 .reply-indicator__content {
   position: relative;
-  margin: 10px 0;
-  padding: 0 12px;
   font-size: 14px;
   line-height: 20px;
-  color: $inverted-text-color;
   word-wrap: break-word;
   font-weight: 400;
-  overflow: visible;
-  white-space: pre-wrap;
-  padding-top: 5px;
   overflow: hidden;
+  padding-top: 5px;
+  color: $inverted-text-color;
+  white-space: pre-wrap;
 
   p,
   pre,
@@ -355,19 +351,18 @@
 }
 
 .autosuggest-textarea__suggestions {
-  display: block;
-  position: absolute;
   box-sizing: border-box;
+  display: none;
+  position: absolute;
   top: 100%;
-  border-radius: 0 0 4px 4px;
-  padding: 6px;
   width: 100%;
-  color: $inverted-text-color;
-  background: $ui-secondary-color;
+  z-index: 99;
   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  background: $ui-secondary-color;
+  border-radius: 0 0 4px 4px;
+  color: $inverted-text-color;
   font-size: 14px;
-  z-index: 99;
-  display: none;
+  padding: 6px;
 }
 
 .autosuggest-textarea__suggestions--visible {
diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss
index 4c914f163..5c763764d 100644
--- a/app/javascript/flavours/glitch/styles/components/directory.scss
+++ b/app/javascript/flavours/glitch/styles/components/directory.scss
@@ -37,7 +37,6 @@
   display: inline-block;
   padding: 6px 0;
   line-height: 18px;
-  cursor: default;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss
index eddc1a2a8..52c7cd54a 100644
--- a/app/javascript/flavours/glitch/styles/components/doodle.scss
+++ b/app/javascript/flavours/glitch/styles/components/doodle.scss
@@ -1,15 +1,17 @@
-$doodleBg: #d9e1e8;
+$doodle-background: #d9e1e8;
+
 .doodle-modal {
   @extend .boost-modal;
+
   width: unset;
 }
 
 .doodle-modal__container {
-  background: $doodleBg;
+  background: $doodle-background;
   text-align: center;
   line-height: 0; // remove weird gap under canvas
   canvas {
-    border: 5px solid $doodleBg;
+    border: 5px solid $doodle-background;
   }
 }
 
@@ -24,7 +26,6 @@ $doodleBg: #d9e1e8;
 
   .doodle-toolbar {
     line-height: 1;
-
     display: flex;
     flex-direction: column;
     flex-grow: 0;
@@ -42,6 +43,7 @@ $doodleBg: #d9e1e8;
       input[type='text'] {
         width: 40px;
       }
+
       span.val {
         display: inline-block;
         text-align: left;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index 2c2f25168..9de5a4435 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -98,7 +98,7 @@
 }
 
 .search-popout {
-  @include search-popout();
+  @include search-popout;
 }
 
 .navigation-bar {
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index c52f39512..dde5e4c74 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1321,12 +1321,10 @@ button.icon-button.active i.fa-retweet {
   right: 0;
   bottom: -1px;
   padding-left: 15px; // space for the box shadow to be visible
-
   z-index: 999;
   align-items: center;
   justify-content: flex-end;
   cursor: pointer;
-
   display: flex;
 
   .wrappy {
@@ -1554,7 +1552,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 @keyframes heartbeat {
-  from {
+  0% {
     transform: scale(1);
     transform-origin: center center;
     animation-timing-function: ease-out;
@@ -1804,9 +1802,11 @@ noscript {
   0% {
     opacity: 1;
   }
+
   30% {
     opacity: 0.75;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index cd441a0c0..52516cfb5 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -94,7 +94,7 @@
 .glitch.local-settings__page {
   display: block;
   flex: auto;
-  padding: 15px 20px 15px 20px;
+  padding: 15px 20px;
   width: 360px;
   overflow-y: auto;
 }
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 0216daa12..6d6b8bc0e 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -595,7 +595,6 @@
     .player-button {
       display: inline-block;
       outline: 0;
-
       flex: 0 0 auto;
       background: transparent;
       padding: 5px;
diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/app/javascript/flavours/glitch/styles/components/metadata.scss
+++ /dev/null
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index fc9ba3a18..65060f422 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -75,7 +75,6 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -99,7 +98,6 @@
     height: 100%;
     box-sizing: border-box;
     padding: 25px;
-    display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -685,7 +683,6 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    margin: 0;
     color: $inverted-text-color;
     background: $simple-background-color;
     padding: 10px;
@@ -820,7 +817,6 @@
     font-family: inherit;
     font-size: 14px;
     resize: none;
-    border: 0;
     outline: 0;
     border-radius: 4px;
     border: 1px solid $ui-secondary-color;
@@ -987,7 +983,6 @@
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 10px;
-
   font-size: 14px;
 
   label,
@@ -1135,7 +1130,7 @@
       width: 100%;
       border: 0;
       padding: 10px;
-      font-family: 'mastodon-font-monospace', monospace;
+      font-family: mastodon-font-monospace, monospace;
       background: $ui-base-color;
       color: $primary-text-color;
       font-size: 14px;
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index b8078bdb6..a6e98a868 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -4,7 +4,7 @@
 }
 
 .search__input {
-  @include search-input();
+  @include search-input;
 
   display: block;
   padding: 15px;
@@ -181,7 +181,7 @@
 
       path:first-child {
         fill: rgba($highlight-text-color, 0.25) !important;
-        fill-opacity: 100% !important;
+        fill-opacity: 1 !important;
       }
 
       path:last-child {
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 9280ef836..7f94b25e9 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -332,6 +332,7 @@
     0% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -417,7 +418,7 @@
       text-overflow: ellipsis;
       padding-top: 0;
 
-      &:after {
+      &::after {
         content: '';
         position: absolute;
         top: 0;
@@ -435,13 +436,15 @@
         text-decoration: none;
       }
     }
-    &:focus > .status__content:after {
+
+    &:focus > .status__content::after {
       background: linear-gradient(
         rgba(lighten($ui-base-color, 4%), 0),
         rgba(lighten($ui-base-color, 4%), 1)
       );
     }
-    &.status-direct > .status__content:after {
+
+    &.status-direct > .status__content::after {
       background: linear-gradient(
         rgba(lighten($ui-base-color, 8%), 0),
         rgba(lighten($ui-base-color, 8%), 1)
@@ -458,7 +461,7 @@
   }
 
   .notification__message {
-    margin: -10px 0px 10px 0;
+    margin: -10px 0 10px;
   }
 }
 
@@ -1098,7 +1101,6 @@ a.status-card.compact:hover {
       position: absolute;
       top: 0;
       left: 0;
-      pointer-events: 0;
       width: 100%;
       height: 100%;
       border-left: 4px solid $highlight-text-color;