add messages page and style

2026-04-18 20:47:54 +00:00 · 2020-12-30 11:13:50 +01:00
parent 126abf2b18
commit ebc7132a38
18 changed files with 619 additions and 90 deletions
@@ -0,0 +1,166 @@
+@import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        background-color: #fff;
+        overflow:hidden;
+        padding: 30px 20px 0px 20px;
+        color:#000;
+        transform: translate3d(0, 1px, 0);
+        
+        .header-top{
+          width: 360px;
+          margin: 0px auto;
+          overflow: auto;
+          padding: 0 !important;
+          background: #fff;
+           .middle{
+            padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2.5px 0 0 5px;
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 310px;
+          overflow: auto;
+          margin: 0 auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+        .div-icon ion-icon{
+          float: right;
+          padding-left: 20px;
+        } 
+    }
+ }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    .incoming, .outgoing{
+      width: 305px;
+       padding: 15px 20px;
+       border-radius: 10px;
+    }
+
+     .incoming{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       
+       }
+     }
+     .outgoing{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+         display: inline;
+      color: #0782c9;
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+   .row{
+     width: 380px;
+    margin: 0 auto;
+   }
+
+  .chat-icon-options{
+    display:block !important;
+    font-size: 25px;
+    float: right !important;
+    margin-top: 10px;
+  }
+
+  .chat-icon-send{
+    font-size: 45px;
+    margin: 0 auto;
+    margin-top: 4px;
+  }
+
+   ion-col .type-message{
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+  }
+ }
+
+ .text-color-blue{
+    font-size: 15px;
+    color: #0782c9;
+    font-weight: 500;
+    letter-spacing: normal;
+ }
+ .user-status-online{
+     display: block;
+    float: left;
+    color:#99e47b;
+ }