WIP <Compose> Refactor; SCSS ed.

1 files changed, 315 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
new file mode 100644
index 000000000..a8d688ea5
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -0,0 +1,315 @@
+.composer {
+  padding: 10px;
+
+  .composer--spoiler {
+    display: block;
+    box-sizing: border-box;
+    margin: 0;
+    border: none;
+    border-radius: 4px;
+    padding: 10px;
+    width: 100%;
+    outline: 0;
+    color: $ui-base-color;
+    background: $simple-background-color;
+    font-size: 14px;
+    font-family: inherit;
+    resize: vertical;
+
+    &:focus { outline: 0 }
+    @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+  }
+
+  .composer--warning {
+    color: darken($ui-secondary-color, 65%);
+    margin-bottom: 15px;
+    background: $ui-primary-color;
+    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
+    padding: 8px 10px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 400;
+
+    a {
+      color: darken($ui-primary-color, 33%);
+      font-weight: 500;
+      text-decoration: underline;
+
+      &:active,
+      &:focus,
+      &:hover { text-decoration: none }
+    }
+  }
+
+  .composer--reply {
+    margin: 0 0 -2px;
+    border-radius: 4px 4px 0 0;
+    padding: 10px;
+    background: $ui-primary-color;
+
+    & > header {
+      margin-bottom: 5px;
+      overflow: hidden;
+
+      & > .account {
+        & > .avatar {
+          float: left;
+          margin-right: 5px;
+        }
+
+        & > .display_name {
+          color: $ui-base-color;
+          display: block;
+          padding-right: 25px;
+          max-width: 100%;
+          line-height: 24px;
+          text-decoration: none;
+          overflow: hidden;
+        }
+      }
+
+      & > .cancel {
+        float: right;
+        line-height: 24px;
+      }
+    }
+
+    & > .content {
+      position: relative;
+      margin: 10px 0;
+      padding: 0 12px;
+      font-size: 14px;
+      line-height: 20px;
+      color: $ui-base-color;
+      word-wrap: break-word;
+      font-weight: 400;
+      overflow: visible;
+      white-space: pre-wrap;
+      padding-top: 5px;
+    }
+
+    .emojione {
+      width: 20px;
+      height: 20px;
+      margin: -5px 0 0;
+    }
+
+    p {
+      margin-bottom: 20px;
+
+      &:last-child { margin-bottom: 0 }
+    }
+
+    a {
+      color: lighten($ui-base-color, 20%);
+      text-decoration: none;
+
+      &:hover { text-decoration: underline }
+
+      &.mention {
+        &:hover {
+          text-decoration: none;
+
+          span { text-decoration: underline }
+        }
+      }
+    }
+  }
+
+  .composer--textarea {
+    background: $simple-background-color;
+    position: relative;
+
+    &:disabled { background: $ui-secondary-color }
+
+    & > .textarea {
+      display: block;
+      box-sizing: border-box;
+      margin: 0;
+      border: none;
+      border-radius: 4px 4px 0 0;
+      padding: 10px 32px 0 10px;
+      width: 100%;
+      min-height: 100px;
+      outline: 0;
+      color: $ui-base-color;
+      background: $simple-background-color;
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+
+      &:focus { outline: 0 }
+      @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+
+      @include limited-single-column('screen and (max-width: 600px)') {
+        height: 100px !important; // prevent auto-resize textarea
+        resize: vertical;
+      }
+    }
+
+    .composer--textarea--suggestions {
+      display: block;
+      position: absolute;
+      box-sizing: border-box;
+      top: 100%;
+      border-radius: 0 0 4px 4px;
+      padding: 6px;
+      width: 100%;
+      color: $ui-base-color;
+      background: $ui-secondary-color;
+      box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+      font-size: 14px;
+      z-index: 99;
+
+      &[hidden] { display: none }
+
+      .composer--textarea--suggestions--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        border-radius: 4px;
+        padding: 10px;
+        font-size: 14px;
+        line-height: 18px;
+        cursor: pointer;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active { background: darken($ui-secondary-color, 10%) }
+
+        & > .emoji {
+          img {
+            display: block;
+            float: left;
+            margin-right: 8px;
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .composer--upload_form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 5px;
+    color: $ui-base-color;
+    background: $simple-background-color;
+    font-size: 14px;
+    font-family: inherit;
+    overflow: hidden;
+
+    .composer--upload_form--item {
+      flex: 1 1 0;
+      margin: 5px;
+      min-width: 40%;
+
+      & > div {
+        position: relative;
+        border-radius: 4px;
+        height: 100px;
+        width: 100%;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        input {
+          display: block;
+          position: absolute;
+          box-sizing: border-box;
+          bottom: 0;
+          left: 0;
+          margin: 0;
+          border: 0;
+          padding: 10px;
+          width: 100%;
+          color: $ui-secondary-color;
+          background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+          font-size: 14px;
+          font-family: inherit;
+          font-weight: 500;
+          opacity: 0;
+          z-index: 2;
+          transition: opacity .1s ease;
+
+          &:focus { color: $white }
+
+          &::placeholder {
+            opacity: 0.54;
+            color: $ui-secondary-color;
+          }
+        }
+
+        & > .close { mix-blend-mode: difference }
+      }
+
+      &.active {
+        & > div {
+          input { opacity: 1 }
+        }
+      }
+    }
+  }
+
+  .composer--options {
+    padding: 10px;
+    background: darken($simple-background-color, 8%);
+    box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
+    border-radius: 0 0 4px 4px;
+
+    & > * {
+      display: inline-block;
+      box-sizing: content-box;
+      padding: 0 3px;
+      line-height: 27px;
+    }
+
+    & > hr {
+      display: inline-block;
+      margin: 0 3px;
+      border-width: 0 0 0 1px;
+      border-style: none none none solid;
+      border-color: transparent transparent transparent darken($simple-background-color, 24%);
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  .composer--publisher {
+    padding-top: 10px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+
+    & > .count {
+      display: inline-block;
+      margin: 0 16px 0 8px;
+      padding-top: 10px;
+      font-size: 16px;
+      line-height: 36px;
+    }
+
+    & > .primary {
+      display: inline-block;
+      margin: 0;
+      padding: 0 10px;
+      text-align: center;
+    }
+
+    & > .side_arm {
+      display: inline-block;
+      margin: 0 2px 0 0;
+      padding: 0;
+      width: 36px;
+      text-align: center;
+    }
+
+    &.over {
+      & > .count { color: $warning-red }
+    }
+  }
+}