@kineticdata/react 5.1.1 → 6.0.0

package/assets/discussions/styles/_discussion.scss

@@ -1,506 +0,0 @@
-/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- *   Discussion ~ Discussions
- *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-.discussion-messages-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-.date-divider {
-  @include ms-respond(font-size, -1);
-
-  display: flex;
-  align-items: center;
-  margin: 1.5rem 0;
-  color: $blue-lake;
-  font-weight: bold;
-  text-align: center;
-
-  hr {
-    flex: 1 0 auto;
-    border: 2px solid $blue3;
-  }
-
-  span {
-    margin: 0 0.75rem;
-  }
-}
-
-.btn--banner {
-  position: absolute;
-  bottom: 3.75rem;
-  left: 50%;
-  display: flex;
-  justify-content: center;
-  width: 20%;
-  margin-left: -90px;
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-
-  .fa {
-    line-height: 1.5rem;
-  }
-}
-
-.banner {
-  padding-top: 1.5rem;
-  text-align: center;
-
-  &__title {
-    @include ms-respond(font-size, 2);
-
-    margin-top: 0;
-    color: $gray80;
-    font-weight: 600;
-    line-height: 1.5rem;
-    font-size: 1.25rem;
-    margin-bottom: 1.5rem;
-  }
-
-  &__subtitle {
-    @include ms-respond(font-size, -1);
-
-    margin-top: 0;
-    color: $gray60;
-    line-height: 1.5rem;
-    font-size: 1.125rem;
-    margin-bottom: 1.5rem;
-  }
-}
-
-.message-form {
-  display: flex;
-  padding: 0;
-  overflow: visible;
-
-  &.is-editing,
-  &.is-replying {
-    background-color: rgba(245, 166, 35, 0.15);
-
-    .message-form__input {
-      background-color: rgba(245, 166, 35, 0.15);
-    }
-
-    .btn-subtle,
-    .btn-send {
-      background-color: rgba(245, 166, 35, 0.05);
-    }
-  }
-
-  &--default {
-    background-color: rgba(240, 240, 240, 0.75);
-
-    .message-form__input {
-      background-color: rgba(240, 240, 240, 0.75);
-    }
-  }
-
-  button {
-    border-radius: 0;
-
-    &.btn-subtle {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 48px;
-      background-color: $blue3;
-      border-width: 0;
-      opacity: 0.5;
-    }
-
-    &.btn-send {
-      color: $primary;
-      background-color: $blue3;
-      cursor: pointer;
-      opacity: 1;
-
-      &:disabled {
-        color: $gray;
-        cursor: not-allowed;
-      }
-    }
-
-    &.btn {
-      &.disabled,
-      &:disabled {
-        opacity: 1;
-      }
-    }
-  }
-
-  .show > .dropdown-menu {
-    display: flex;
-  }
-
-  .dropdown-menu {
-    flex-direction: column;
-    margin: 0.5rem;
-    padding: 0.5rem;
-    border: 0;
-    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 3px 4px);
-
-    button {
-      width: auto;
-      padding: 0.25rem 0.5rem;
-      font-size: 12px;
-      cursor: pointer;
-
-      .icon {
-        margin-right: 0.5rem;
-      }
-    }
-
-    &::after {
-      position: absolute;
-      bottom: -8px;
-      left: 8px;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-      border-width: 8px 8px 0;
-      border-top-color: white;
-      content: ' ';
-    }
-  }
-
-  &__input {
-    flex: 1 1 100%;
-    padding: 0.75rem 1rem;
-    background-color: $blue3;
-  }
-
-  &__placeholder {
-    position: absolute;
-    color: $gray60;
-    pointer-events: none;
-
-    &.is-hidden {
-      display: none;
-    }
-  }
-
-  &__editor {
-    min-height: 24px;
-    max-height: 25vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    color: $gray90;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-
-    &:focus {
-      outline: unset;
-    }
-
-    &.is-disabled {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    &.is-disabled.text-danger {
-      color: $danger70 !important;
-    }
-  }
-}
-
-.message-versions-controls {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid $gray4;
-
-  .timestamp,
-  .page-info {
-    font-size: 0.875rem;
-  }
-}
-
-.message-versions {
-  padding: 1.5rem;
-}
-
-.messages__grouping {
-  display: flex;
-  margin-bottom: 1.5rem;
-
-  .sb-avatar {
-    display: flex;
-    flex: 1 0 auto;
-    margin: 0.375rem 0.75rem 0 0;
-
-    img {
-      box-shadow: inset 0 0 10px rgba($black, 0.9);
-    }
-
-    img,
-    .sb-avatar__text {
-      border: 2px solid rgba($present, 0);
-      transition: border-color 300ms;
-    }
-
-    &.present img,
-    &.present .sb-avatar__text {
-      border-color: rgba($present, 1);
-    }
-  }
-
-  .message-list {
-    @include ms-respond(font-size, 0);
-
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-    align-items: stretch;
-    color: $gray90;
-
-    &__item {
-      // border: 1px solid green;
-      position: relative;
-      display: flex;
-      flex: 0 1 auto;
-
-      &:hover {
-        background-color: $white;
-        border-radius: 3px;
-
-        .message-list__actions {
-          justify-content: flex-end;
-          visibility: visible;
-          opacity: 1;
-          transition: opacity 0.3s;
-        }
-      }
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 1px 4px rgba($orange-kinops, 0.25);
-      }
-
-      &.editing,
-      &.replying {
-        background-color: rgba(245, 166, 35, 0.15);
-
-        &:hover {
-          background-color: rgba(245, 166, 35, 0.15);
-        }
-      }
-    }
-
-    &__actions {
-      position: absolute;
-      top: -1rem;
-      right: 1rem;
-      z-index: 30;
-      display: inline-flex;
-      align-items: center;
-      min-height: 16px;
-      margin: 0;
-      padding: 0 1rem;
-      padding: 1px 4px;
-      list-style: none;
-      background: rgb(255, 255, 255);
-      border: 1px solid rgb(222, 222, 222);
-      border-radius: 6px;
-      // Show on hover
-      visibility: hidden;
-      cursor: pointer;
-      opacity: 0;
-      transition: all 0.3s;
-
-      li + li::before {
-        padding: 0 0.5rem;
-        content: '\2022';
-      }
-    }
-
-    .message-bubble {
-      position: relative;
-      // IE11 requires max-width due to flexbox bug which results
-      // in the message never wrapping and scrolling horizontally
-      max-width: 100%;
-      margin: 0.375rem 0.5rem;
-      padding: 0.75rem;
-      white-space: pre-wrap;
-      background-color: $gray4;
-      border-radius: 0.5rem;
-
-      &::after {
-        position: absolute;
-        top: 8px;
-        bottom: auto;
-        width: 0;
-        height: 0;
-        border: 4px solid;
-        content: ' ';
-      }
-
-      .message {
-        &.is-edited {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        p,
-        pre {
-          margin: 0;
-
-          a {
-            color: $blue-sky;
-            overflow-wrap: break-word;
-          }
-        }
-
-        img {
-          max-width: 100%;
-        }
-
-        p,
-        pre {
-          &:not(:last-child) {
-            margin-bottom: 0.75rem;
-          }
-        }
-
-        &--parent {
-          margin-top: 0.5rem;
-          padding-left: 0.5rem;
-          border-left: 2px solid $blue-lake;
-        }
-      }
-    }
-
-    .meta {
-      @include ms-respond(font-size, -2);
-
-      line-height: 1.5rem;
-
-      .author {
-        margin-right: 1rem;
-      }
-
-      .timestamp {
-        color: $gray60;
-      }
-    }
-  }
-
-  &.is-mine {
-    .message-list {
-      &__item {
-        justify-content: flex-end;
-
-        &:hover {
-          background-color: $white;
-          border-radius: 3px;
-
-          ul.actions {
-            justify-content: flex-start;
-            visibility: visible;
-            opacity: 1;
-            transition: opacity 0.3s;
-          }
-        }
-      }
-
-      .message-bubble {
-        background-color: $blue3;
-
-        &::after {
-          right: -8px;
-          left: auto;
-          border-color: $blue3 transparent transparent $blue3;
-        }
-      }
-
-      .meta {
-        align-self: flex-end;
-      }
-    }
-  }
-
-  &.is-other {
-    .message-list {
-      .message-bubble {
-        &::after {
-          right: auto;
-          left: -8px;
-          border-color: $gray4 $gray4 transparent transparent;
-        }
-      }
-    }
-  }
-
-  .system-message-list {
-    color: $blue1;
-
-    .system-message {
-      @include ms-respond(font-size, -1);
-
-      margin-bottom: 0.5rem;
-      margin-left: 3rem;
-
-      .timestamp {
-        margin-left: 1rem;
-        color: $gray60;
-      }
-
-      .text-token {
-        font-style: italic;
-      }
-
-      .user-token {
-        font-weight: bold;
-      }
-
-      .message-token {
-        cursor: pointer;
-
-        &:hover {
-          color: $blue-lake;
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-.popover.reply-popover {
-  max-width: none;
-
-  .popover-body {
-    color: $blue-lake;
-    font-family: 'Open Sans';
-
-    i {
-      margin-right: 0.75rem;
-    }
-  }
-}
-
-// Markdown Helper for Messages Form
-.markdown-help {
-  position: absolute;
-  top: -2.3125rem;
-  width: 100%;
-  padding: 0.5rem 0.5rem;
-  color: $blue-lake;
-  background-color: rgba($white, 0.9);
-  font-size: 0.875rem;
-
-  &__sample + &__sample {
-    margin-left: 0.5rem;
-  }
-}