Updated all component styles

new mixins, consolidated
all original styles files uncomitted

app/javascript/gabsocial/features/compose/components/compose_form/compose_form.scss

@@ -0,0 +1,144 @@
+.compose-form {
+  padding: 10px;
+
+  &__sensitive-button {
+    padding: 0 10px 10px 10px;
+
+    @include text-sizing(14px, 500);
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    .checkbox {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      margin-right: 10px;
+      top: -1px;
+      vertical-align: middle;
+
+      @include size(18px);
+      @include border-design($ui-primary-color, 1px, 4px);
+
+      &.active {
+        border-color: $highlight-text-color;
+        background: $highlight-text-color;
+      }
+    }
+  }
+
+  .emoji-picker-dropdown {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+  }
+
+  &.condensed {
+    .autosuggest-textarea__textarea {
+      min-height: 46px;
+      border-radius: 5px;
+    }
+  }
+
+  .emoji-picker-wrapper {
+    position: relative;
+    height: 0;
+  }
+
+  &__modifiers {
+    color: $inverted-text-color;
+    font-family: inherit;
+    font-size: 14px;
+    background: $simple-background-color;
+  }
+
+  &__buttons-wrapper {
+    padding: 10px;
+    background: darken($simple-background-color, 8%);
+    border-radius: 0 0 4px 4px;
+    flex: 0 0 auto;
+
+    @include flex(space-between);
+
+    .compose-form__buttons {
+      display: flex;
+
+      .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;
+    }
+  }
+
+  &__publish {
+    min-width: 0;
+    flex: 0 0 auto;
+
+    @include flex(flex-end);
+  }
+
+  &__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
+  }
+}
+
+.spoiler-input {
+  height: 0;
+  transform-origin: bottom;
+  opacity: 0.0;
+  position: relative;
+
+  &--visible {
+    height: 36px;
+    margin-bottom: 11px;
+    opacity: 1.0;
+  }
+
+  &__input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    color: $inverted-text-color;
+    background: $simple-background-color;
+    padding: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+    border: 0;
+    outline: 0;
+    border-radius: 4px;
+
+    &:focus {
+      outline: 0;
+    }
+
+    @include breakpoint(sm) {
+      font-size: 16px;
+    }
+  }
+}
+
+.no-reduce-motion .spoiler-input {
+  transition: height 0.4s ease, opacity 0.4s ease;
+}

app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.scss

@@ -53,13 +53,13 @@
 
 .emoji-button {
   display: block;
-  font-size: 24px;
-  line-height: 24px;
   margin-left: 2px;
   width: 24px;
   outline: 0;
   cursor: pointer;
 
+  @include text-sizing(24px, 400, 24px);
+
   &:active,
   &:focus {
     outline: 0 !important;
@@ -69,10 +69,9 @@
     filter: grayscale(100%);
     opacity: 0.8;
     display: block;
-    margin: 0;
-    width: 22px;
-    height: 22px;
-    margin-top: 2px;
+    margin: 2px 0 0 0;
+
+    @include size(22px);
   }
 
   &:hover,
@@ -83,4 +82,36 @@
       filter: none;
     }
   }
+}
+
+.no-reduce-motion .pulse-loading {
+  transform-origin: center center;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+@keyframes heartbeat {
+  from {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    transform: scale(0.91);
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    transform: scale(0.98);
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    transform: scale(0.87);
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
 }

app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.scss

@@ -47,7 +47,7 @@
     display: block;
     font-weight: 500;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
   }
 
   &__profile-edit {

app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.scss

@@ -48,15 +48,12 @@
 
 .reply-indicator-content {
   position: relative;
-  font-size: 15px;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-top: 2px;
   color: $primary-text-color;
 
+  @include text-sizing(15px, 400, 20px);
+  @include text-overflow(normal, break-word);
+
   &:focus {
     outline: 0;
   }
@@ -70,9 +67,9 @@
   }
 
   .emojione {
-    width: 20px;
-    height: 20px;
     margin: -3px 0 0;
+
+    @include size(20px);
   }
 
   p {

app/javascript/gabsocial/features/compose/compose.scss

@@ -41,8 +41,8 @@
   flex-direction: column;
   overflow: hidden;
   overflow-y: auto;
-  width: 100%;
-  height: 100%;
+
+  @include size(100%);
 
   &.darker {
     background: $ui-base-color;
@@ -59,11 +59,11 @@
     display: block;
     object-fit: contain;
     object-position: bottom left;
-    width: 100%;
-    height: 100%;
     pointer-events: none;
     user-drag: none;
-    user-select: none;
+
+    @include unselectable;
+    @include size(100%);
   }
 
   @media screen and (min-height: 640px) {
@@ -93,8 +93,8 @@
   .drawer {
     flex: 0 0 auto;
     padding: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
+
+    @include horizontal-padding(5px);
 
     &:first-child {
       padding-left: 10px;