@chat21/chat21-ionic 3.0.59-rc2 → 3.0.59-rc21

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -1,139 +1,302 @@
 ion-header {
-    border-bottom-style: solid;
-    border-color: var(--light-gray);
-    border-bottom-width: thin;
+  border-bottom-style: solid;
+  border-color: var(--light-gray);
+  border-bottom-width: thin;
 }
 
-
-
 ion-list {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 
-    ion-item {
-        cursor: pointer;
-        height: 64px;
+  ion-item {
+    cursor: pointer;
+    height: 64px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    .selected {
+      border-radius: 10px;
+      padding-left: 8px;
+      padding-right: 8px;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    ion-avatar {
+      position: relative;
+      padding: 0;
+      margin: 0 12px 0 8px;
+      height: 50px;
+      width: 50px;
+      min-width: 50px;
+      min-height: 50px;
+      line-height: 50px;
+      .avatar-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+      .avatar-profile {
         position: relative;
-        display: flex;
-        text-decoration: none;
-        padding-left: 8px;
-        padding-right: 8px;
-        --padding-start: 0;
-        --inner-padding-end: 0;
-        .selected {
-            border-radius: 10px;
-            padding-left: 8px;
-            padding-right: 8px;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index:-1;
-            background-color: rgba(0, 0, 0, .05);
-        }
-        ion-avatar {
-            position: relative;
-            padding:0;
-            margin:0 12px 0 8px;
-            height: 50px;
-            width: 50px;
-            min-width: 50px;
-            min-height: 50px;
-            line-height: 50px;
-            .avatar-placeholder {
-                position: absolute;
-                top:0;
-                left:0;
-                width: 100%;
-                height: 100%;
-                border-radius: 50%;
-                text-align: center;
-                font-size: 20px;
-                color:#ffffff;
-                font-weight: 500;
-            }
-            .avatar-profile {
-                position: relative;
-                display: inline-block;
-                width: 100%;
-                height: 100%;
-                background-color: transparent;
-                background-size: cover;
-                background-position: top center;
-                border-radius: 50%;
-                border-color: #c3c3c3;
-                border-style: solid;
-                border-width: 0px;
-            }
-        }
-        ion-label {
-            flex: 1 1 0px;
-            justify-content: center;
-            min-width: 0;
-            padding: 0;
-            font-family: Helvetica, Helvetica, Arial, sans-serif;
-            line-height: 1.28;
-            text-rendering: optimizeLegibility;
-            .conversation_with {
-                color: rgba(0, 0, 0, 1);
-                font-size: 15px;
-                font-weight: 400;
-                line-height: 1.4;
-            }
-            .conversation_message {
-                p {
-                    color: rgba(153, 153, 153, 1);
-                    font-size: 13px;
-                    font-weight: 400;
-                    height: 18px;
-                    &.not-read {
-                        font-weight:bold;
-                    }
-                }
-                
-            }
-            
-        }
-        ion-note {
-            position: absolute;
-            right: 8px;
-            top: 4px;
-            font-size: 10px;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        background-size: cover;
+        background-position: top center;
+        border-radius: 50%;
+        border-color: #c3c3c3;
+        border-style: solid;
+        border-width: 0px;
+      }
+    }
+    ion-label {
+      flex: 1 1 0px;
+      justify-content: center;
+      min-width: 0;
+      padding: 0;
+      font-family: Helvetica, Helvetica, Arial, sans-serif;
+      line-height: 1.28;
+      text-rendering: optimizeLegibility;
+      .conversation_with {
+        color: rgba(0, 0, 0, 1);
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 1.4;
+      }
+      .conversation_message {
+        p {
+          color: rgba(153, 153, 153, 1);
+          font-size: 13px;
+          font-weight: 400;
+          height: 18px;
+          &.not-read {
+            font-weight: bold;
+          }
         }
-        ion-buttons {
-            margin: 0;
-            ion-button {
-                padding: 0;
-                margin: 0;
-                height: 24px;
-                width: 24px;
-                font-size: 10px;
-                --padding-start: 0px;
-                --padding-end: 0px;
-                color: rgba(153, 153, 153, 1);
-                background-color: transparent;
-                &:hover {
-                    background-color: rgba(0, 0, 0, .05)
-                }
-            }
+      }
+    }
+    ion-note {
+      position: absolute;
+      right: 8px;
+      top: 4px;
+      font-size: 10px;
+    }
+    ion-buttons {
+      margin: 0;
+      ion-button {
+        padding: 0;
+        margin: 0;
+        height: 24px;
+        width: 24px;
+        font-size: 10px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        color: rgba(153, 153, 153, 1);
+        background-color: transparent;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
         }
+      }
+    }
 
-        .notification_point {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background-color: #0b5c89;
-            position: absolute;
-            right: 6px;
-            bottom: 8px;
-        }
+    .notification_point {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0b5c89;
+      position: absolute;
+      right: 6px;
+      bottom: 8px;
     }
+  }
+}
+
+.waiting-for-connection {
+  --background: #fdd764;
+  --min-height: 70px;
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+  // margin: 100px auto;
+  width: 25px;
+  height: 25px;
+  position: relative;
+  margin-left: 10px;
+  margin-top: 13px;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+#no-convs-wpr {
+  margin: 100px auto;
+}
 
-    
+.open-iframe-item {
+  padding-left: 0px !important ;
+  padding-right: 0px !important;
+  height: 55px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }