patch: conflict resolved

src/styles/admin-circles/_index.scss

@@ -0,0 +1,92 @@
+#admin-circles,
+#admin-circles-leave {
+
+  .form.search-button :not(.add-member)+button[type=submit] {
+    background-color: #E9F2FF;
+    border: none;
+    color: var(--color-secondary);
+
+    &:before {
+      font-size: 15px;
+      margin-right: 6px;
+      content: "\e079";
+      font-family: simple-line-icons;
+      font-style: normal;
+      font-weight: 400;
+      speak: none;
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      text-align: center;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1em;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }  
+
+  .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-admin-community-logo {
+    height: 76px;
+    width: 100%;
+    display: block;
+    div {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+  }
+
+  .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) {
@@ -92,6 +93,7 @@ hubl-menu-empty+hubl-menu-empty {
 /* And no I can't add that stupid icon because it'a an input. */
 /* But now, with 0.16, it's a button and you can :D */
 .join-button {
+
   input,
   button {
     padding: 9px 20px;
@@ -104,9 +106,44 @@ hubl-menu-empty+hubl-menu-empty {
     color: white;
     border: 1px solid var(--color-secondary);
 
+    &:before {
+      font-size: 15px;
+      margin-right: 6px;
+      content: "\e079";
+      font-family: simple-line-icons;
+      font-style: normal;
+      font-weight: 400;
+      speak: none;
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      text-align: center;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1em;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
     &:hover {
       background: white;
       color: var(--color-secondary);
     }
   }
-}
+
+  @media (max-width: 768px) {
+
+    &.sm-full {
+
+      input,
+      button {
+        width: 100%;
+      }
+    }
+  }
+}
+
+/* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
+.two-lines-ellipsis {
+  display: -webkit-box !important;
+}