feature: new circles-admin panel

src/styles/admin-circles/_index.scss

@@ -0,0 +1,58 @@
+#admin-circles {
+
+  .masonry>div:nth-child(1) {
+    /* change from directory (nth-child(2))*/
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .circle-subtitle-custom {
+      height: 32px;
+    }
+  }
+
+  .segment.hover:hover {
+    box-shadow: 0 0 16px 0 rgba(46, 63, 88, 0.34);
+    bottom: 2px;
+  }
+
+  hubl-admin-circle-name:hover {
+    text-decoration: underline;
+  }
+
+  hubl-community-logo {
+    max-height: 76px;
+    width: 206px;
+    max-width: 100%;
+  }
+
+  .tab.active {
+    font-weight: bold;
+    border-bottom: 5px solid var(--color-third);
+    padding-bottom: 10px;
+  }
+
+  @media (max-width: 768px) {
+
+    .tabs {
+
+      &>li {
+        color: #3C3F57;
+        font-size: 13px;
+        letter-spacing: 0.18px;
+        line-height: 17px;
+
+        &>.tab {
+          border-radius: 5px;
+          box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.17);
+
+          &.active {
+            color: var(--color-primary);
+            border: 1px solid var(--color-primary);
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/index.scss

@@ -42,6 +42,7 @@ solid-display>div {
 @import 'chat';
 @import 'forms';
 @import 'communities';
+@import 'admin-circles';
 
 nav#main__menu {
   @media (min-width: 768.01px) {
@@ -125,4 +126,15 @@ hubl-create-contact {
       color: var(--color-secondary);
     }
   }
-}
+
+  @media (max-width: 768px) {
+
+    &.sm-full {
+
+      input,
+      button {
+        width: 100%;
+      }
+    }
+  }
+}