Updated all component styles

new mixins, consolidated all original styles files uncomitted
2019-08-12 16:48:46 -04:00
parent 3d509c84a2
commit 47b43d78d9
45 changed files with 829 additions and 202 deletions
--- a/app/javascript/gabsocial/features/status/components/card/card.scss
+++ b/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%);
+  }
+}