initial commit

src/app/organisms/public-channels/PublicChannels.scss

@@ -0,0 +1,87 @@
+.public-channels {
+  margin: 0 var(--sp-normal);
+  margin-right: var(--sp-extra-tight);
+  margin-top: var(--sp-extra-tight);
+
+  &__form {
+    display: flex;
+    align-items: flex-end;
+
+    & .btn-primary {
+      padding: {
+        top: 11px;
+        bottom: 11px;
+      }
+    }
+  }
+  &__input-wrapper {
+    flex: 1;
+    min-width: 0;
+
+    display: flex;
+    margin-right: var(--sp-normal);
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: var(--sp-normal);
+    }
+
+    & > div:first-child {
+      flex: 1;
+      min-width: 0;
+
+      & .input {
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+        [dir=rtl] & {
+          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+        }
+      }
+    }
+
+    & > div:last-child .input {
+      width: 120px;
+      border-left-width: 0;
+      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      [dir=rtl] & {
+        border-left-width: 1px;
+        border-right-width: 0;
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      }
+    }
+  }
+
+  &__search-status {
+    margin-top: var(--sp-extra-loose);
+    margin-bottom: var(--sp-tight);
+    & .donut-spinner {
+      margin: 0 var(--sp-tight);
+    }
+  }
+  &__search-error {
+    color: var(--bg-danger);
+  }
+  &__content {
+    border-top: 1px solid var(--bg-surface-border);
+  }
+  &__view-more {
+    margin-top: var(--sp-loose);
+    margin-left: calc(var(--av-normal) + var(--sp-normal));
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: calc(var(--av-normal) + var(--sp-normal));
+    }
+  }
+  
+  & .channel-tile {
+    margin-top: var(--sp-normal);
+    &__options {
+      align-self: flex-end;
+    }
+  }
+
+  [dir=rtl] & {
+    margin: {
+      left: var(--sp-extra-tight);
+      right: var(--sp-normal);
+    }
+  }
+}