Updated all component styles

new mixins, consolidated
all original styles files uncomitted

app/javascript/gabsocial/components/account/account.scss

@@ -17,7 +17,7 @@
       display: block;
       color: $primary-text-color;
 
-      @include text-overflow;
+      @include text-overflow(nowrap);
     }
   }
 

app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.scss

@@ -38,17 +38,14 @@
       outline: 0;
     }
 
-    @media screen and (max-width: 600px) {
-      font-size: 16px;
-    }
-
     &::-webkit-scrollbar {
       all: unset;
     }
 
-    @media screen and (max-width: 600px) {
+    @include breakpoint(sm) {
       max-height: 100px !important; // prevent auto-resize textarea
       resize: vertical;
+      font-size: 16px;
     }
   }
 

app/javascript/gabsocial/components/avatar/avatar.scss

@@ -1,9 +1,16 @@
-.avatar {
+.avatar,
+.account__avatar {
   // @include avatar-radius();
   display: block;
   position: relative;
   // background-color: $ui-base-color;
   object-fit: cover;
+  background-size: cover;
+
+  // TEMPORARY - need a default size for the avatars for now
+  // They are sized individually all over the application and need to change with breakpoints as well
+  // Might create a mixin to accept the size attribute and apply the various properties where necessary
+  @include size(56px);
 
   &--inline {
     display: inline-block;
@@ -22,4 +29,8 @@
       box-sizing: border-box;
     }
   }
+}
+
+a .account__avatar {
+  cursor: pointer;
 }

app/javascript/gabsocial/components/avatar_overlay/avatar_overlay.scss

@@ -1,4 +1,6 @@
 .avatar-overlay {
+  background-size: 48px 48px;
+
   @include circle(48px);
 
   &__base {
@@ -8,7 +10,7 @@
   &__overlay {
     @include circle(36px);
     @include abs-position(auto, 0, 0);
-    
+
     z-index: 1;
   }
-}
+}

app/javascript/gabsocial/components/button/button.scss

@@ -12,7 +12,7 @@
   @include border-design(transparent, 10px, 4px);
   @include text-sizing(14px, 500, 36px, center);
   @include size(auto, 36px);
-  @include text-overflow;
+  @include text-overflow(nowrap);
 
   &:active,
   &:focus,

app/javascript/gabsocial/components/column/column.scss

@@ -4,4 +4,19 @@
   box-sizing: border-box;
   flex-direction: column;
   width: 350px;
+  flex: 1 1 100%;
+  overflow: hidden;
+
+  @media screen and (min-width: 631px) {
+    flex: 0 0 auto;
+    padding: 10px 5px;
+
+    &:first-child {
+      padding-left: 10px;
+    }
+
+    &:last-child {
+      padding-right: 10px;
+    }
+  }
 }

app/javascript/gabsocial/components/column_indicator/column_indicator.scss

@@ -48,4 +48,46 @@
 
 .no-reduce-motion .column-indicator--loading .column-indicator__figure {
   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+
+@keyframes loader-label {
+  0% {
+    opacity: 0.25;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes loader-figure {
+  0% {
+    background-color: lighten($ui-base-color, 26%);
+
+    @include size(0);
+  }
+
+  29% {
+    background-color: lighten($ui-base-color, 26%);
+  }
+
+  30% {
+    background-color: transparent;
+    border-width: 21px;
+    opacity: 1;
+
+    @include size(42px);
+  }
+
+  100% {
+    border-width: 0;
+    opacity: 0;
+    background-color: transparent;
+
+    @include size(42px);
+  }
 }

app/javascript/gabsocial/components/column_inline_form/column_inline_form.scss

@@ -8,14 +8,13 @@
     flex: 1 1 auto;
   }
 
-  &__title {
-
-  }
+  &__title {}
 
   &__input {
-    width: 100%;
     margin-bottom: 6px;
 
+    @include size(100%, 36px);
+
     &:focus {
       outline: 0;
     }
@@ -24,5 +23,7 @@
   &__btn {
     flex: 0 0 auto;
     margin: 0 5px;
+    margin-left: 6px;
+    width: 112px;
   }
 }

app/javascript/gabsocial/components/column_subheading/column_subheading.scss

@@ -2,8 +2,8 @@
   background: $ui-base-color;
   color: $dark-text-color;
   padding: 8px 20px;
-  font-size: 12px;
-  font-weight: 500;
   text-transform: uppercase;
   cursor: default;
+
+  @include text-sizing(12px, 500);
 }

app/javascript/gabsocial/components/columns_area/columns_area.scss

@@ -24,25 +24,22 @@
 }
 
 .columns-area {
-  display: flex;
   flex: 1 1 auto;
-  flex-direction: row;
-  justify-content: flex-start;
   position: relative;
 
-  &__panels {
-    display: flex;
-    justify-content: center;
+  @include flex(center, stretch, row);
 
+  &__panels {
     @include size(100%);
+    @include flex(center);
 
     &__pane {
       height: 100%;
       pointer-events: none;
-      display: flex;
-      justify-content: flex-end;
       padding-top: 15px;
 
+      @include flex(flex-end);
+
       &--start {
         justify-content: flex-start;
       }
@@ -78,14 +75,12 @@
 @media screen and (min-width: 631px) {
   .columns-area {
     padding: 0;
-  }
 
-  .columns-area>div {
-
-    .column,
-    .drawer {
-      padding-left: 5px;
-      padding-right: 5px;
+    >div {
+      .column,
+      .drawer {
+        @include horizontal-padding(5px);
+      }
     }
   }
 }
@@ -104,9 +99,9 @@
   }
 
   .search__input {
-    line-height: 18px;
-    font-size: 16px;
     padding: 15px 30px 15px 15px;
+
+    @include text-sizing(16px, 400, 18px);
   }
 
   .search__icon .fa {
@@ -163,8 +158,7 @@
       }
 
       .account__avatar-wrapper {
-        margin-left: 17px;
-        margin-right: 15px;
+        @include horizontal-margin(17px, 15px);
       }
     }
   }

app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.scss

@@ -2,11 +2,11 @@
   z-index: 9999;
   position: absolute;
   background: $gab-background-container;
-  border-radius: 4px;
-  border: 1px solid $gab-placeholder-accent;
   padding: 4px 0;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
 
+  @include border-design($gab-placeholder-accent, 1px, 4px);
+
   &.left {
     transform-origin: 100% 50%;
   }
@@ -71,7 +71,7 @@
     text-transform: capitalize;
     color: $gab-secondary-text;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
     @include text-sizing(13px, 400, 26px);
 
     &:focus,

app/javascript/gabsocial/components/icon/icon.scss

@@ -0,0 +1,3 @@
+.star-icon.active {
+  color: $gold-star;
+}

app/javascript/gabsocial/components/link_footer/link_footer.scss

@@ -1,7 +1,6 @@
 .link-footer {
   flex: 0 0 auto;
-  padding: 10px;
-  padding-top: 20px;
+  padding: 20px 10px 10px 10px;
 
   ul {
     margin-bottom: 10px;

app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss

@@ -1,12 +1,10 @@
 .embed-modal {
-  max-width: 80vw;
-  max-height: 80vh;
+  @include max-size(80vw, 80vh);
 
   h4 {
     padding: 30px;
-    font-weight: 500;
-    font-size: 16px;
-    text-align: center;
+
+    @include text-sizing(16px, 500, 1, center);
   }
 
   .embed-modal__container {
@@ -44,7 +42,7 @@
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         font-size: 16px;
       }
     }

app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.scss

@@ -13,8 +13,7 @@
     position: relative;
     border-bottom: 1px solid lighten($classic-base-color, 8%);
     border-radius: 6px 6px 0 0;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding: 12px 0;
 
     &__title {
       display: block;
@@ -66,8 +65,8 @@
       display: inline-block;
       padding: 2px 8px;
       background-color: lighten($ui-base-color, 8%);
-      border: 1px solid darken($ui-base-color, 4%);
-      border-radius: 4px;
+
+      @include border-design(darken($ui-base-color, 4%), 1px, 4px);
     }
   }
 }

app/javascript/gabsocial/components/modal/modal.scss

@@ -26,8 +26,8 @@
   position: relative;
   border-bottom: 1px solid lighten($classic-base-color, 8%);
   border-radius: 6px 6px 0 0;
-  padding-top: 12px;
-  padding-bottom: 12px;
+
+  @include vertical-padding(12px);
 
   &__title {
     display: block;

app/javascript/gabsocial/components/modal/report_modal/report_modal.scss

@@ -0,0 +1,22 @@
+.setting-text {
+  color: $darker-text-color;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid $ui-primary-color;
+  box-sizing: border-box;
+  display: block;
+  font-family: inherit;
+  margin-bottom: 10px;
+  padding: 7px 0;
+  width: 100%;
+
+  &:focus,
+  &:active {
+    color: $primary-text-color;
+    border-bottom-color: $highlight-text-color;
+  }
+
+  @include breakpoint(sm) {
+    font-size: 16px;
+  }
+}

app/javascript/gabsocial/components/panel/panel.scss

@@ -1,12 +1,12 @@
 .panel {
   display: flex;
-  width: 100%;
   border-radius: 10px;
   flex-direction: column;
-  height: auto;
   box-sizing: border-box;
   background: $gab-background-container;
 
+  @include size(100%, auto);
+
   body.theme-gabsocial-light & {
     // @include light-theme-shadow();
     background: $gab-background-container-light;
@@ -66,11 +66,11 @@
       padding-right: 10px;
 
       &__avatar {
-        height: 46px;
-        width: 46px;
         background-color: red;
         left: -58px;
         position: absolute;
+
+        @include size(46px);
       }
 
       &__name {
@@ -81,18 +81,17 @@
 
         &__name {
           color: $primary-text-color;
-          font-size: 14px;
-          font-weight: bold;
-          line-height: 16px;
           margin-bottom: 2px;
           max-height: 32px; //2 lines of text
           overflow: hidden;
+
+          @include text-sizing(14px, 700, 16px);
         }
 
         &__username {
           color: $lighter-text-color;
-          font-size: 12px;
-          line-height: 14px;
+
+          @include text-sizing(12px, 400, 14px);
         }
       }
     }
@@ -125,8 +124,7 @@
   &__title {
     flex: 1 1;
     color: $primary-text-color;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: 19px;
+
+    @include text-sizing(16px, 700, 19px);
   }
 }

app/javascript/gabsocial/components/poll/poll.scss

@@ -26,7 +26,7 @@
     cursor: default;
     color: #fff;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
 
     body.theme-gabsocial-light & {
       color: $gab-default-text-light;
@@ -51,10 +51,10 @@
       outline: 0;
       font-family: inherit;
       background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
-      border-radius: 4px;
       padding: 6px 10px;
 
+      @include border-design(darken($simple-background-color, 14%), 1px, 4px);
+
       &:focus {
         border-color: $highlight-text-color;
       }
@@ -94,10 +94,10 @@
   }
 
   &__footer {
-    padding-top: 6px;
-    padding-bottom: 5px;
     color: $dark-text-color;
 
+    @include vertical-padding(6px, 5px);
+
     span {
       font-size: 14px;
     }

app/javascript/gabsocial/components/promo_panel/promo_panel.scss

@@ -17,11 +17,11 @@
 
   &__message {
     display: block;
-    font-size: 14px;
-    line-height: 16px;
     margin-top: 6px;
     color: $primary-text-color;
 
+    @include text-sizing(14px, 400, 16px);
+
     &--dark {
       color: $ui-secondary-color;
     }

app/javascript/gabsocial/components/search/search.scss

@@ -0,0 +1,69 @@
+.search {
+  position: relative;
+
+  &__input {
+    display: block;
+    padding: 7px 30px 6px 10px;
+    @include search-input();
+  }
+
+  &__icon {
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus {
+      outline: 0 !important;
+    }
+
+    .fa {
+      cursor: default;
+      display: inline-block;
+      position: absolute;
+      top: 8px;
+      right: 6px;
+      z-index: 2;
+      font-size: 16px;
+      color: $gab-placeholder-accent;
+      opacity: 0;
+      pointer-events: none;
+
+      @include size(18px);
+
+      &.active {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
+
+    .fa-search.active {
+      pointer-events: none;
+    }
+
+    .fa-times-circle {
+      cursor: pointer;
+      font-size: 17px;
+      color: $gab-alert-red;
+
+      &:hover {
+        color: lighten($gab-alert-red, 7%);
+      }
+    }
+  }
+
+  @media screen and (max-width: 630px) and (max-height: 400px) {
+    will-change: margin-top;
+    transition: margin-top 400ms 100ms;
+  }
+
+  @media screen and (min-width: 360px) {
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (min-width: 895px) {
+  .search-page .search {
+    display: none;
+  }
+}

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.scss

@@ -17,28 +17,25 @@
     flex: 1 1 auto;
     color: $secondary-text-color;
     padding: 15px 0;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
     text-decoration: none;
     position: relative;
 
+    @include text-sizing(14px, 500, 1, center);
+
     &.active {
       color: $primary-text-color;
 
       &::before,
       &::after {
-        display: block;
-        content: "";
-        position: absolute;
         bottom: 0;
         left: 50%;
-        width: 0;
-        height: 0;
         transform: translateX(-50%);
         border-style: solid;
         border-width: 0 10px 10px;
         border-color: transparent transparent lighten($ui-base-color, 8%);
+
+        @include pseudo;
+        @include size(0);
       }
 
       &::after {
@@ -47,4 +44,15 @@
       }
     }
   }
+}
+
+.account-section-headline {
+
+  button,
+  a {
+    flex: none;
+    padding: 18px 15px;
+
+    @include text-sizing(16px, 600);
+  }
 }

app/javascript/gabsocial/components/status/status.scss

@@ -1,6 +1,5 @@
 .status {
-  padding: 8px 10px;
-  padding-left: 68px;
+  padding: 8px 10px 8px 68px;
   position: relative;
   min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
@@ -120,17 +119,15 @@
 .status__wrapper--filtered {
   color: $dark-text-color;
   border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
   margin: 0;
   padding: 15px;
   box-sizing: border-box;
   width: 100%;
   clear: both;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
 
+  @include text-sizing(inherit, 400, inherit, center);
+}
 
 .status__prepend-icon-wrapper {
   left: -26px;
@@ -172,8 +169,8 @@
 
   >span {
     display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
+
+    @include text-overflow
   }
 }
 
@@ -184,18 +181,53 @@
 }
 
 .status__avatar {
-  height: 48px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 48px;
+  @include size(48px);
+  @include abs-position(10px, auto, auto, 10px);
 }
 
 .status__expand {
-  width: 68px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
   cursor: pointer;
+
+  @include size(68px, 100%);
+  @include abs-position(0, auto, auto, 0);
+}
+
+
+.media-spoiler-video {
+  cursor: pointer;
+  margin-top: 8px;
+  position: relative;
+  border: 0;
+  display: block;
+
+  @include background-image("");
+}
+
+.media-spoiler-video-play-icon {
+  border-radius: 100px;
+  color: rgba($primary-text-color, 0.8);
+  font-size: 36px;
+  padding: 5px;
+  transform: translate(-50%, -50%);
+
+  @include abs-position(50%, auto, auto, 50%);
+}
+
+
+.media-spoiler {
+  background: $base-overlay-background;
+  color: $darker-text-color;
+  border: 0;
+  padding: 0;
+  border-radius: 4px;
+  appearance: none;
+
+  @include size(100%);
+
+  &:hover,
+  &:active,
+  &:focus {
+    padding: 0;
+    color: lighten($darker-text-color, 8%);
+  }
 }

app/javascript/gabsocial/components/status_content/status_content.scss

@@ -4,12 +4,10 @@
 
 .status__content {
   position: relative;
-  word-wrap: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-top: 2px;
   color: $primary-text-color;
 
+  @include text-overflow(normal, break-word);
   @include text-sizing(15px, 400, 20px);
 
   &:focus {
@@ -103,8 +101,7 @@
   color: $gab-brand-default;
   border: 0;
   background: transparent;
-  padding: 0;
-  padding-top: 8px;
+  padding: 8px 0 0 0;
 
   @include text-sizing(15px, 400, 20px);
 

app/javascript/gabsocial/components/tabs_bar/tabs_bar.scss

@@ -124,6 +124,11 @@
   .flex {
     display: flex;
   }
+
+  @media screen and (max-width: 630px) and (max-height: 400px) {
+    will-change: margin-top;
+    transition: margin-top 400ms 100ms;
+  }
 }
 
 .tabs-bar-item {

app/javascript/gabsocial/components/toggle_switch/toggle_switch.scss

@@ -5,10 +5,11 @@
   background-color: transparent;
   border: 0;
   padding: 0;
-  user-select: none;
   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
 
+  @include unselectable;
+
   &--disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -19,17 +20,15 @@
 .react-toggle-screenreader-only {
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+
+  @include size(1px);
 }
 
 .react-toggle-track {
-  width: 50px;
-  height: 24px;
   padding: 0;
   border-radius: 30px;
   background-color: $ui-base-color;
@@ -51,14 +50,13 @@
 }
 
 .react-toggle-track-check {
-  margin-top: auto;
-  margin-bottom: auto;
   line-height: 0;
   opacity: 0;
   transition: opacity 0.25s ease;
 
   @include abs-position(0, auto, 0, 8px);
   @include size(14px, 10px);
+  @include vertical-margin(auto);
 }
 
 .react-toggle--checked .react-toggle-track-check {
@@ -67,14 +65,13 @@
 }
 
 .react-toggle-track-x {
-  margin-top: auto;
-  margin-bottom: auto;
   line-height: 0;
   opacity: 1;
   transition: opacity 0.25s ease;
 
   @include abs-position(0, 10px, 0);
   @include size(10px);
+  @include vertical-margin(auto);
 }
 
 .react-toggle--checked .react-toggle-track-x {

app/javascript/gabsocial/components/trending_item/trending_item.scss

@@ -12,7 +12,7 @@
     flex: 1 1 auto;
     color: $dark-text-color;
 
-    @include text-overflow;
+    @include text-overflow(nowrap);
 
     strong {
       font-weight: 500;
@@ -24,7 +24,7 @@
       text-decoration: none;
 
       @include text-sizing(14px, 500);
-      @include text-overflow;
+      @include text-overflow(nowrap);
 
       &:hover,
       &:focus,

app/javascript/gabsocial/components/user_panel/user_panel.scss

@@ -35,7 +35,7 @@
       display: block;
       border: 6px solid $gab-background-base;
       background-size: cover;
-      
+
       @include size(82px);
 
       body.theme-gabsocial-light & {
@@ -74,17 +74,17 @@
 
     &__username {
       display: block;
-      font-size: 14px;
-      line-height: 16px;
       color: $gab-secondary-text;
       text-decoration: none !important;
+
+      @include text-sizing(14px, 16px);
     }
   }
 
   &__stats-block {
-    display: flex;
-    justify-content: space-between;
     padding-top: 12px;
+
+    @include flex(space-between);
   }
 
   .user-panel-stats-item {