Add search modal (#132)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/search/Search.scss

@@ -0,0 +1,85 @@
+.search-dialog__model {
+  --modal-height: 380px;
+  height: 100%;
+  background-color: var(--bg-surface);
+}
+
+.search-dialog {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__input {
+    padding: var(--sp-normal);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    & > .ic-raw {
+      position: absolute;
+      left: calc(var(--sp-normal) + var(--sp-tight));
+      [dir=rtl] & {
+        left: unset;
+        right: calc(var(--sp-normal) + var(--sp-tight));
+      }
+    }
+    & > .ic-btn {
+      border-radius: calc(var(--bo-radius) / 2);
+      position: absolute;
+      right: calc(var(--sp-normal) + var(--sp-extra-tight));
+      [dir=rtl] & {
+        right: unset;
+        left: calc(var(--sp-normal) + var(--sp-extra-tight));
+      }
+    }
+    & .input-container {
+      min-width: 0;
+      flex: 1;
+    }
+
+    & input {
+      padding-left: 40px;
+      padding-right: 40px;
+      font-size: var(--fs-s1);
+      letter-spacing: var(--ls-s1);
+      line-height: var(--lh-s1);
+      color: var(--tc-surface-high);
+    }
+  }
+  &__content-wrapper {
+    min-height: 0;
+    flex: 1;
+    position: relative;
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      content: "";
+      display: inline-block;
+      width: 100%;
+      height: 8px;
+      background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-transparent));
+    }
+    &::after {
+      top: unset;
+      bottom: 0;
+      background-image: linear-gradient(to bottom, var(--bg-surface-transparent), var(--bg-surface));
+    }
+  }
+
+  &__content {
+    padding: var(--sp-extra-tight) var(--sp-normal);
+    padding-right: var(--sp-extra-tight);
+    
+    [dir=rtl] & {
+      padding-left: var(--sp-extra-tight);
+      padding-right: var(--sp-normal);
+    }
+  }
+
+  &__footer {
+    padding: var(--sp-tight) var(--sp-normal);
+    text-align: center;
+  }
+
+}