chore: fix contacts images, treeview and tooltip styles

Author: Dimitar-Goshev

TelerikMvcWebMail/Content/common.css

@@ -148,31 +148,29 @@ body > div:last-child {
       width: 120%;
       margin-left: -10%; }
 
-.k-widget.k-tooltip {
+.k-tooltip {
   font-size: 12px;
   top: 0; }
-  .k-widget.k-tooltip .k-tooltip-content {
+  .k-tooltip .k-tooltip-content {
     padding-right: 0;
     padding: 0 30px; }
-  .k-widget.k-tooltip .image-wrapper {
+  .k-tooltip .image-wrapper {
     width: 100px;
     height: 100px;
     margin: 25px auto 10px;
     border-radius: 50%;
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.15); }
-    .k-widget.k-tooltip .image-wrapper img {
+    .k-tooltip .image-wrapper img {
       width: 102%;
       margin-top: -5%; }
-  .k-widget.k-tooltip .k-callout-n {
-    top: -9px;
-    border-bottom-color: #fff;
+  .k-tooltip .k-callout-n {
     border-width: 0 9px 9px 9px;
     margin-left: -8px; }
-  .k-widget.k-tooltip .name {
+  .k-tooltip .name {
     font-size: 15px;
     margin: 5px; }
-  .k-widget.k-tooltip #signInButton {
+  .k-tooltip #signInButton {
     margin: 40px 0;
     padding: 5px 30px;
     white-space: nowrap;
@@ -259,4 +257,3 @@ body > div:last-child {
 tbody:empty:before {
   position: absolute;
   padding: 30px 17px; }
-

TelerikMvcWebMail/Content/common.scss

@@ -198,7 +198,7 @@ body > div:last-child {
     }
 }
 
-.k-widget.k-tooltip {
+.k-tooltip {
     font-size: 12px;
     top: 0;
 
@@ -222,14 +222,10 @@ body > div:last-child {
     }
 
     .k-callout-n {
-        top: -9px;
-        border-bottom-color: #fff;
         border-width: 0 9px 9px 9px;
         margin-left: -8px;
     }
 
-
-
     .name {
         font-size: 15px;
         margin: 5px;

TelerikMvcWebMail/Content/sidebar.css

@@ -1,53 +1,79 @@
 .main-sidebar {
-  width: 315px;
-  min-width: 200px;
-  display: flex;
-  flex-direction: column;
-  background: #fafafa;
-  overflow: auto; }
-  .main-sidebar .content {
-    flex: 1; }
-  .main-sidebar .new-btn {
+    width: 315px;
+    min-width: 200px;
     display: flex;
-    padding: 13px 16px;
-    font-size: 16px;
-    color: #0072c6;
-    cursor: pointer;
-    align-items: center; }
-    .main-sidebar .new-btn:before {
-      display: inline-block;
-      content: "\e11f";
-      margin: 0 5px 0 0;
-      font: 24px "WebComponentsIcons";
-      vertical-align: middle; }
-  .main-sidebar .k-treeview .k-treeview-item {
-    padding: 0; }
-  .main-sidebar .k-treeview, .k-treeview-item.k-treeview-leaf {
+    flex-direction: column;
+    background: #fafafa;
+    overflow: auto;
+}
+
+    .main-sidebar .content {
+        flex: 1;
+    }
+
+    .main-sidebar .new-btn {
+        display: flex;
+        padding: 13px 16px;
+        font-size: 16px;
+        color: #0072c6;
+        cursor: pointer;
+        align-items: center;
+    }
+
+        .main-sidebar .new-btn:before {
+            display: inline-block;
+            content: "\e11f";
+            margin: 0 5px 0 0;
+            font: 24px "WebComponentsIcons";
+            vertical-align: middle;
+        }
+
+    .main-sidebar .k-treeview .k-treeview-item {
+        padding: 0;
+    }
+
+    .main-sidebar .k-treeview .k-treeview-leaf {
+        display: block;
+        margin: 0;
+        padding: 10px 15px;
+    }
+
+        .main-sidebar .k-treeview .k-treeview-leaf:after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+
+.k-treeview-top, .k-treeview-mid, .k-treeview-bot {
     display: block;
-    margin: 0;
-    padding: 10px 15px; }
-    .main-sidebar .k-treeview, .k-treeview-item.k-treeview-leaf:after {
-      content: "";
-      display: block;
-      clear: both; }
-  .main-sidebar .k-treeview .folder-name {
-    float: left; 
-    padding-right: 10%;
-  }
-  .main-sidebar .k-treeview .number {
-    float: right; }
-  .main-sidebar .footer {
+}
+
+.main-sidebar .k-treeview .folder-name {
+    float: left;
+}
+
+.main-sidebar .k-treeview .number {
+    float: right;
+}
+
+.main-sidebar .footer {
     padding: 15px;
     font-size: 10px;
-    color: #b7b7b7; }
+    color: #b7b7b7;
+}
+
     .main-sidebar .footer .links {
-      color: #1e8edf;
-      font-size: 13px;
-      line-height: 26px;
-      margin-bottom: 10px;
-      cursor: pointer; }
-      .main-sidebar .footer .links p {
-        margin-bottom: 5px; }
-    .main-sidebar .footer > p {
-      margin-top: 10px; }
+        color: #1e8edf;
+        font-size: 13px;
+        line-height: 26px;
+        margin-bottom: 10px;
+        cursor: pointer;
+    }
+
+        .main-sidebar .footer .links p {
+            margin-bottom: 5px;
+        }
 
+    .main-sidebar .footer > p {
+        margin-top: 10px;
+    }

TelerikMvcWebMail/Content/sidebar.scss

@@ -31,11 +31,15 @@
 
     .k-treeview {
 
-        .k-item {
+        .k-treeview-item {
             padding: 0;
         }
 
-        .k-in {
+        .k-treeview-top, .k-treeview-mid, .k-treeview-bot {
+            display: block;
+        }
+
+        .k-treeview-leaf {
             display: block;
             margin: 0;
             padding: 10px 15px;
@@ -54,11 +58,8 @@
         .number {
             float: right;
         }
-
-
     }
 
-
     .footer {
         padding: 15px;
         font-size: 10px;

TelerikMvcWebMail/Views/Contacts/Contacts.cshtml

@@ -15,7 +15,7 @@
         <div class="header">
             <span class="hidden-email" style="display:none">#: Email #</span>
             <span class="image-wrapper">
-                <img src="# if (sessionStorage.getItem(EmployeeID)) {#data:image/png;base64,#:sessionStorage.getItem(EmployeeID)# # } else {#@(Url.Content("../../Contacts/Picture/"))#:EmployeeID# # } #" alt="#:EmployeeID # image"/>
+                <img src="# if (sessionStorage.getItem(EmployeeID)) {#data:image/png;base64,#:sessionStorage.getItem(EmployeeID)# # } else {#@(Url.Content("Contacts/Picture/"))#:EmployeeID# # } #" alt="#:EmployeeID # image"/>
             </span>
             <span class="name">#: Name #</span>
             <div class="edit-buttons">