BOD-14 More CSS issues for messaging.

client/src/components/chat-conversation/chat-conversation.styles.scss

@@ -1,198 +0,0 @@
-// .chat-overlay-wrapper {
-//   width: 95vw;
-// }
-// .chat-overlay-scroller {
-//   overflow-x: scroll;
-//   overflow-y: hidden;
-//   vertical-align: bottom;
-// }
-// .chat-overlay {
-//   margin: 0px 12px;
-//   display: inline-block;
-// }
-// .chat-overlay-open {
-//   width: 400px;
-//   height: 33vh;
-//   display: flex;
-//   flex-flow: column;
-// }
-// .chat-overlay-closed {
-//   display: flex;
-//   justify-content: space-between;
-//   vertical-align: middle;
-//   width: 150px;
-//   cursor: pointer;
-// }
-
-// .chat-messages {
-//   height: 80%;
-//   overflow-x: hidden;
-//   overflow-y: scroll;
-//   flex-grow: 1;
-
-//   ul {
-//     list-style: none;
-//     margin: 0;
-//     padding: 0;
-//   }
-
-//   ul li {
-//     display: inline-block;
-//     clear: both;
-//     padding: 3px 10px;
-//     border-radius: 30px;
-//     margin-bottom: 2px;
-//   }
-
-//   .inbound {
-//     background: #eee;
-//     float: left;
-//   }
-
-//   .outbound {
-//     float: right;
-//     background: #0084ff;
-//     color: #fff;
-//   }
-
-//   .inbound + .outbound {
-//     border-bottom-right-radius: 5px;
-//   }
-
-//   .outbound + .outbound {
-//     border-top-right-radius: 5px;
-//     border-bottom-right-radius: 5px;
-//   }
-
-//   .outbound:last-of-type {
-//     border-bottom-right-radius: 30px;
-//   }
-// }
-
-.messages {
-  height: auto;
-  min-height: calc(100% - 10px);
-  max-height: calc(100% - 93px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-@media screen and (max-width: 735px) {
-  .messages {
-    max-height: calc(100% - 105px);
-  }
-}
-.messages::-webkit-scrollbar {
-  width: 8px;
-  background: transparent;
-}
-.messages::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.messages ul li {
-  display: inline-block;
-  clear: both;
-  //float: left;
-  margin: 5px;
-  width: calc(100% - 25px);
-  font-size: 0.9em;
-}
-.messages ul li:nth-last-child(1) {
-  margin-bottom: 20px;
-}
-.messages ul li.sent img {
-  margin: 6px 8px 0 0;
-}
-.messages ul li.sent p {
-  background: #435f7a;
-  color: #f5f5f5;
-}
-.messages ul li.replies img {
-  float: right;
-  margin: 6px 0 0 8px;
-}
-.messages ul li.replies p {
-  background: #f5f5f5;
-  float: right;
-}
-.messages ul li img {
-  width: 22px;
-  border-radius: 50%;
-  float: left;
-}
-.messages ul li p {
-  display: inline-block;
-  padding: 10px 15px;
-  border-radius: 20px;
-  max-width: 205px;
-  line-height: 130%;
-}
-@media screen and (min-width: 735px) {
-  .messages ul li p {
-    max-width: 300px;
-  }
-}
-.message-input {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 99;
-}
-.message-input .wrap {
-  position: relative;
-}
-.message-input .wrap input {
-  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
-  float: left;
-  border: none;
-  width: calc(100% - 90px);
-  padding: 11px 32px 10px 8px;
-  font-size: 0.8em;
-  color: #32465a;
-}
-@media screen and (max-width: 735px) {
-  .message-input .wrap input {
-    padding: 15px 32px 16px 8px;
-  }
-}
-.message-input .wrap input:focus {
-  outline: none;
-}
-.message-input .wrap .attachment {
-  position: absolute;
-  right: 60px;
-  z-index: 4;
-  margin-top: 10px;
-  font-size: 1.1em;
-  color: #435f7a;
-  opacity: 0.5;
-  cursor: pointer;
-}
-@media screen and (max-width: 735px) {
-  .message-input .wrap .attachment {
-    margin-top: 17px;
-    right: 65px;
-  }
-}
-.message-input .wrap .attachment:hover {
-  opacity: 1;
-}
-.message-input .wrap button {
-  float: right;
-  border: none;
-  width: 50px;
-  padding: 12px 0;
-  cursor: pointer;
-  background: #32465a;
-  color: #f5f5f5;
-}
-@media screen and (max-width: 735px) {
-  .message-input .wrap button {
-    padding: 16px 0;
-  }
-}
-.message-input .wrap button:hover {
-  background: #435f7a;
-}
-.message-input .wrap button:focus {
-  outline: none;
-}