Updated all component styles

new mixins, consolidated
all original styles files uncomitted

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

@@ -0,0 +1,169 @@
+.status-card {
+  display: flex;
+  font-size: 14px;
+  color: $dark-text-color;
+  margin-top: 14px;
+  text-decoration: none;
+  overflow: hidden;
+
+  @include border-design(lighten($ui-base-color, 8%), 1px, 4px);
+
+  &__actions {
+    @include flex(center, center);
+    @include abs-position(0, 0, 0, 0);
+
+    &>div {
+      background: rgba($base-shadow-color, 0.6);
+      border-radius: 8px;
+      padding: 12px 9px;
+      flex: 0 0 auto;
+
+      @include flex(center, center);
+    }
+
+    button,
+    a {
+      display: inline;
+      color: $secondary-text-color;
+      background: transparent;
+      border: 0;
+      padding: 0 8px;
+      text-decoration: none;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $primary-text-color;
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
+  }
+
+  &__title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: $darker-text-color;
+    text-decoration: none;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding: 14px 14px 14px 8px;
+  }
+
+  &__description {
+    color: $darker-text-color;
+  }
+
+  &__host {
+    display: block;
+    margin-top: 5px;
+    font-size: 13px;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__image {
+    flex: 0 0 100px;
+    background: lighten($ui-base-color, 8%);
+    position: relative;
+
+    &>.fa {
+      font-size: 21px;
+      position: absolute;
+      transform-origin: 50% 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__image-image {
+    border-radius: 4px 0 0 4px;
+    display: block;
+    margin: 0;
+    object-fit: cover;
+    background-size: cover;
+    background-position: center center;
+
+    @include size(100%);
+  }
+
+  &.horizontal {
+    display: block;
+  }
+
+  &.horizontal & {
+    &__image {
+      width: 100%;
+    }
+
+    &__image-image {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__title {
+      white-space: inherit;
+    }
+  }
+
+  &.compact {
+    border-color: lighten($ui-base-color, 4%);
+
+    &.interactive {
+      border: 0;
+    }
+  }
+
+  &.compact & {
+    &__content {
+      padding: 10px 8px 8px 8px;
+    }
+
+    &__title {
+      white-space: nowrap;
+    }
+
+    &__image {
+      flex: 0 0 60px;
+    }
+  }
+}
+
+a.status-card {
+  cursor: pointer;
+
+  &:hover {
+    background: lighten($ui-base-color, 8%);
+  }
+
+  &.compact:hover {
+    background-color: lighten($ui-base-color, 4%);
+  }
+}
+
+.status-card-photo {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+  margin: 0;
+
+  @include size(100%, auto);
+}
+
+.status-card-video {
+  iframe {
+    @include size(100%);
+  }
+}

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

@@ -0,0 +1,96 @@
+.detailed-status {
+  background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+
+  &--flex {
+    @include flex(space-between, flex-start, row, wrap);
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
+  }
+
+  .status__content {
+    @include text-sizing(19px, 400, 24px);
+
+    .emojione {
+      margin: -1px 0 0;
+
+      @include size(24px);
+    }
+
+    .status__content__spoiler-link {
+      line-height: 24px;
+      margin: -1px 0 0;
+    }
+  }
+
+  .video-player {
+    margin-top: 8px;
+  }
+
+
+  &__meta {
+    margin-top: 15px;
+    color: $dark-text-color;
+
+    @include text-sizing(14px, 400, 18px);
+  }
+
+  &__datetime {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__favorites,
+  &__reblogs {
+    display: inline-block;
+    margin-left: 6px;
+
+    @include text-sizing(12px, 500);
+  }
+
+  &__display-name,
+  &__datetime,
+  &__application {
+    text-decoration: none;
+  }
+
+  &__display-name {
+    &:hover strong {
+      text-decoration: underline;
+    }
+  }
+
+  &__application,
+  &__datetime {
+    color: inherit;
+  }
+
+  &__display-name {
+    color: $secondary-text-color;
+    display: block;
+    line-height: 24px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    strong,
+    span {
+      display: block;
+
+      @include text-overflow;
+    }
+
+    strong {
+      font-size: 16px;
+      color: $primary-text-color;
+    }
+  }
+
+  &__display-avatar {
+    float: left;
+    margin-right: 10px;
+  }
+}