Search - overlay

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/manager/staging/css/manager.css">
<div class="pure docsie docsie-blue">
  <div id="container">
    <div id="library" data-component="library" class="docsie-g" data-docsie-tag="library">
      <div class="library-shelves docsie-border-right docsie-border-2x docsie-bg-gray-light" style="position: sticky; user-select: auto; top: 0px; width: 230px; height: 100vh; max-width: 320px; min-width: 180px; box-sizing: border-box; flex-shrink: 0;">
        <nav class="docsie-menu docsie-txt-small" data-docsie-tag="navigation">
          <ul class="docsie-menu-list library-shelves-actions" style="padding-top: 6px;">
            <li class="docsie-menu-item  docsie-form no-space" data-component="librarytoolbarsort">
              <div class="h-space">
                ...
              </div>
            </li>
            <li class="docsie-menu-separator docsie-txt-small"></li>
            <li class="docsie-menu-item "><a data-component="routedlink" class="docsie-menu-link docsie-menu-wrap docsie-ellipsis" href="#/home"><span class="docsie-g docsie-g-align-center docsie-g-nowrap"><span class="docsie-u docsie-g"><strong class="menu-link-label"><svg class="icon icon--home " viewBox="0 0 20 20" width="16" height="16">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use>
                      </svg>&nbsp;&nbsp;Workspace home</strong></span></span></a></li>
            <li class="docsie-menu-item "><a data-component="routedlink" class="docsie-menu-link docsie-menu-wrap docsie-ellipsis " href="#/notifications"><span class="docsie-g docsie-g-align-center docsie-g-nowrap"><span class="docsie-u docsie-g"><strong class="menu-link-label"><svg class="icon icon--notification-feed " viewBox="0 0 20 20" width="16" height="16">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-notification-feed"></use>
                     ...

SCSS

.docsie-g-gap {
  gap: 1em;
  &.gap-1-2 {
    gap: 0.5em;
  }
}
/**
 * Header / Searchbox
 */
/**
 * Body
 */
/**
 * Sidebar / Filters
 */
@keyframes "fadein" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.docsie-search-plugin {
	.docsie-search-overlay {
		/* background: none; */
	}
	.docsie-search {
		border: 2px solid var(--docsie-border-color);
	}
	/**
	 * Main / Results
	 */
	.sui-layout {
		width: 100%;
/* 		display: flex;
		flex-direction: column; */
		* {
			box-sizing: border-box;
			box-sizing: inherit;
			&:before {
				box-sizing: inherit;
			}
			&:after {
				box-sizing: inherit;
			}
		}
	}
	.sui-layout-header {
		border-bottom: 1px solid var(--docsie-border-color);
	}
	.sui-layout-body {
		border-top: 1px solid #eeeeee;
		background: #fcfcfc;
		&:after {
			content: "";
			height: 80px;
			width: 100%;
			display: block;
			position: relative;
			background: -moz-linear-gradient(top, #fcfcfc 0%, #ffffff 100%);
			background: -webkit-linear-gradient(top, #fcfcfc 0%, #ffffff 100%);
			background: linear-gradient(to bottom, #fcfcfc 0%, #ffffff 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fcfcfc", endColorstr="#ffffff",GradientType=0 );
		}
	}
	.sui-layout-body__inner {
		max-width: 1300px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		padding: 0 24px;
	}
	.sui-layout-sidebar {
		width: 28%;
		padding: 16px 16px 0 0;
	}
	.sui-layout-sidebar--toggled {
		display: block;
		animation: fadein 0.2s ease-out;
	}
	.sui-layout-main {
		margin: 1em
	}
	.sui-layout-main-header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.sui-layout-main-header__inner {
		font-size: 12px;
		color: #4a4b4b;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.sui-layout-main-footer {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.sui-search-error {
		line-height: 1.5;
		font-weight: 400;
		color:...

JavaScript

fetch(new Request("https://appcdn2.docsie.io/images/icons.svg"), {
  headers: {
    "Content-Type": "text/plain",
  },
}).then((response) => response.text()).then((assets) => {
  const asset = document.createElement("div");
  asset.style.display = "none";
  asset.innerHTML = assets;
  document.body.append(asset);
});