Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created May 4, 2023 08:16
Show Gist options
  • Save neisdev/bea141170e1077fe1ae7538483ebb8e0 to your computer and use it in GitHub Desktop.
Save neisdev/bea141170e1077fe1ae7538483ebb8e0 to your computer and use it in GitHub Desktop.
Download ZIP
Word Plugin
Raw
index.html
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
</style>
<div class="side-pane">
<p class="title-txt">
Flowcite
</p>
<div class="mainpanel">
<ul class="tab-panel">
<li class="active">
<a href="">Reference(102)</a>
</li>
<li>
<a href="">Citation(2204)</a>
</li>
<li>
<a href="">URL(34)</a>
</li>
<li class="filter">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 26.25C5 25.9185 5.1317 25.6005 5.36612 25.3661C5.60054 25.1317 5.91848 25 6.25 25H13.75C14.0815 25 14.3995 25.1317 14.6339 25.3661C14.8683 25.6005 15 25.9185 15 26.25C15 26.5815 14.8683 26.8995 14.6339 27.1339C14.3995 27.3683 14.0815 27.5 13.75 27.5H6.25C5.91848 27.5 5.60054 27.3683 5.36612 27.1339C5.1317 26.8995 5 26.5815 5 26.25ZM5 18.75C5 18.4185 5.1317 18.1005 5.36612 17.8661C5.60054 17.6317 5.91848 17.5 6.25 17.5H23.75C24.0815 17.5 24.3995 17.6317 24.6339 17.8661C24.8683 18.1005 25 18.4185 25 18.75C25 19.0815 24.8683 19.3995 24.6339 19.6339C24.3995 19.8683 24.0815 20 23.75 20H6.25C5.91848 20 5.60054 19.8683 5.36612 19.6339C5.1317 19.3995 5 19.0815 5 18.75ZM5 11.25C5 10.9185 5.1317 10.6005 5.36612 10.3661C5.60054 10.1317 5.91848 10 6.25 10H33.75C34.0815 10 34.3995 10.1317 34.6339 10.3661C34.8683 10.6005 35 10.9185 35 11.25C35 11.5815 34.8683 11.8995 34.6339 12.1339C34.3995 12.3683 34.0815 12.5 33.75 12.5H6.25C5.91848 12.5 5.60054 12.3683 5.36612 12.1339C5.1317 11.8995 5 11.5815 5 11.25Z" fill="black"/>
</svg>
</li>
</ul>
<div class="search-bar">
<input type="text">
<a href="" class="cross-s">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 6.5L6.5 18.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.5 6.5L18.5 18.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
<div class="select-bar">
<select name="" id="">
<option value="">Select</option>
</select>
</div>
<div class="selected-tags">
<span class="tag">
One tag
<span class="cross">x</span>
</span>
<span class="tag">
One tag
<span class="cross">x</span>
</span>
<span class="tag">
One tag
<span class="cross">x</span>
</span>
<span class="tag">
One tag
<span class="cross">x</span>
</span>
<span class="tag">
One tag
<span class="cross">x</span>
</span>
</div>
<div class="navigate-back">
<a href="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.67 3.8701L9.9 2.1001L0 12.0001L9.9 21.9001L11.67 20.1301L3.54 12.0001L11.67 3.8701Z" fill="black"/>
</svg>
Back
</a>
</div>
<div class="content-area">
<div class="extra-filters">
<label for="">Filter by tags</label>
<input type="text">
<label for="">Source type</label>
<input type="text">
<label for="">Date of creation</label>
<input type="text">
<label for="">Author</label>
<input type="text">
<label for="">Publication</label>
<input type="text">
<button class="btn-apply">Apply</button>
<button class="btn-reset">Reset</button>
</div>
<table class="table-ref">
<tr>
<td width="10%">
<input type="checkbox">
</td>
<td>
<p class="cite-txt">
Survey sequencing and compare the things
</p>
<p class="authors">
John doe, Y. Lean, Henna B, Raster Ghyl
</p>
<p class="publisher">
Plos 1, 2007
</p>
</td>
<td width="7%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C9.85652 15 11.637 14.2625 12.9497 12.9497C14.2625 11.637 15 9.85652 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8C1 9.85652 1.7375 11.637 3.05025 12.9497C4.36301 14.2625 6.14348 15 8 15V15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16V16Z" fill="black"/>
<path d="M8.92995 6.58801L6.63995 6.87501L6.55795 7.25501L7.00795 7.33801C7.30195 7.40801 7.35995 7.51401 7.29595 7.80701L6.55795 11.275C6.36395 12.172 6.66295 12.594 7.36595 12.594C7.91095 12.594 8.54395 12.342 8.83095 11.996L8.91895 11.58C8.71895 11.756 8.42695 11.826 8.23295 11.826C7.95795 11.826 7.85795 11.633 7.92895 11.293L8.92995 6.58801Z" fill="black"/>
<path d="M8 5.5C8.55228 5.5 9 5.05228 9 4.5C9 3.94772 8.55228 3.5 8 3.5C7.44772 3.5 7 3.94772 7 4.5C7 5.05228 7.44772 5.5 8 5.5Z" fill="black"/>
</svg>
</td>
</tr>
<tr>
<td width="10%">
<input type="checkbox">
</td>
<td>
<p class="cite-txt">
Survey sequencing and compare the things the jay joe
</p>
<p class="authors">
John doe, Y. Lean, Henna B, Raster Ghyl
</p>
<p class="publisher">
Plos 1, 2007
</p>
</td>
<td width="7%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C9.85652 15 11.637 14.2625 12.9497 12.9497C14.2625 11.637 15 9.85652 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8C1 9.85652 1.7375 11.637 3.05025 12.9497C4.36301 14.2625 6.14348 15 8 15V15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16V16Z" fill="black"/>
<path d="M8.92995 6.58801L6.63995 6.87501L6.55795 7.25501L7.00795 7.33801C7.30195 7.40801 7.35995 7.51401 7.29595 7.80701L6.55795 11.275C6.36395 12.172 6.66295 12.594 7.36595 12.594C7.91095 12.594 8.54395 12.342 8.83095 11.996L8.91895 11.58C8.71895 11.756 8.42695 11.826 8.23295 11.826C7.95795 11.826 7.85795 11.633 7.92895 11.293L8.92995 6.58801Z" fill="black"/>
<path d="M8 5.5C8.55228 5.5 9 5.05228 9 4.5C9 3.94772 8.55228 3.5 8 3.5C7.44772 3.5 7 3.94772 7 4.5C7 5.05228 7.44772 5.5 8 5.5Z" fill="black"/>
</svg>
</td>
</tr>
<tr>
<td width="10%">
<input type="checkbox">
</td>
<td class="expanded">
<p class="cite-txt">
Survey sequencing and compare the things the jay joe
</p>
<p class="authors">
John doe, Y. Lean, Henna B, Raster Ghyl, Zane Markthon
</p>
<p class="publisher">
Plos 1, 2007
</p>
</td>
<td width="7%">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C9.85652 15 11.637 14.2625 12.9497 12.9497C14.2625 11.637 15 9.85652 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8C1 9.85652 1.7375 11.637 3.05025 12.9497C4.36301 14.2625 6.14348 15 8 15V15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16V16Z" fill="black"/>
<path d="M8.92995 6.58801L6.63995 6.87501L6.55795 7.25501L7.00795 7.33801C7.30195 7.40801 7.35995 7.51401 7.29595 7.80701L6.55795 11.275C6.36395 12.172 6.66295 12.594 7.36595 12.594C7.91095 12.594 8.54395 12.342 8.83095 11.996L8.91895 11.58C8.71895 11.756 8.42695 11.826 8.23295 11.826C7.95795 11.826 7.85795 11.633 7.92895 11.293L8.92995 6.58801Z" fill="black"/>
<path d="M8 5.5C8.55228 5.5 9 5.05228 9 4.5C9 3.94772 8.55228 3.5 8 3.5C7.44772 3.5 7 3.94772 7 4.5C7 5.05228 7.44772 5.5 8 5.5Z" fill="black"/>
</svg>
</td>
</tr>
</table>
</div>
</div>
</div>
Raw
style.scss
body{
margin: 0px;
padding: 0px;
}
*, ::after, ::before {
box-sizing: border-box;
}
.side-pane{
background: #fff;
border-left: 1px solid #ccc;
width: 365px;
height: 100%;
position: absolute;
right: 0px;
padding:7px;
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
.title-txt{
margin: 0px;
position: relative;
height: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.mainpanel{
display: block;
background: #fff;
width: 100%;
min-height: 20px;
height: calc(100% - 20px);
box-sizing: border-box;
}
.tab-panel{
margin: 0px;
padding: 2px 5px;
list-style: none;
position: relative;
width: 100%;
display:block;
background: #43b9c5;
li.filter{
position: absolute;
right: 5px;
top: 4px;
cursor: pointer;
svg{
width: 27px;
height: 30px;
fill: #fff;
path{
fill: #fff;
}
}
}
li{
display: inline-block;
margin: 3px 0px;
// border-bottom: 2px solid #fff;
&.active{
// border-bottom: 2px solid #000;
background: #0f8594;
}
a{
display: inline-block;
text-decoration: none;
padding: 7px 7px;
color: #fff;
font-size: 13px;
}
}
}
.search-bar{
padding: 5px;
position: relative;
display: block;
box-sizing: border-box;
input{
width: 100%;
height: 30px;
box-sizing: border-box;
border: 1px solid #a9a9a9;
border-radius: 0px;
padding-left: 5px;
border-radius: 3px;
&:focus{
border-radius: 0px;
box-shadow: none;
outline: none;
}
}
.cross-s{
position: absolute;
top: 7px;
right: 6px;
svg{
opacity: 0.5;
}
}
}
.select-bar{
padding: 5px;
position: relative;
display: block;
box-sizing: border-box;
select{
width: 100%;
height: 30px;
box-sizing: border-box;
border: 1px solid #a9a9a9;
border-radius: 0px;
padding-left: 5px;
border-radius: 3px;
&:focus{
border-radius: 0px;
box-shadow: none;
outline: none;
}
}
}
.content-area{
position: relative;
height: calc(100% - 130px);
width: 100%;
padding: 5px;
background: #fff;
box-sizing: border-box;
overflow-y: auto;
padding-top: 20px;
overflow-x: hidden;
}
}
.table-ref{
border: 0px;
border-color: #fff;
width: 100%;
display: table;
table-layout: fixed;
td{
border-color: #fff;
}
.cite-txt{
font-size: 14px;
font-weight: 600;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: calc(100% - 10px);
margin-bottom: 3px;
margin-top: 3px;
}
.authors{
font-size: 12px;
font-weight: 400;
margin-top: 2px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: calc(100% - 10px);
margin-bottom: 3px;
color: #8e8e8e;
}
.publisher{
font-size: 12px;
font-weight: 400;
margin-top: 2px;
margin-bottom: 5px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: calc(100% - 25px);
color: #00a2b7;
}
}
.navigate-back{
background: #f5f5f5;
min-height: 20px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
font-size: 14px;
position: relative;
padding-left: 35px;
a{
text-decoration: none;
color: #333;
}
svg{
width: 16px;
left: 15px;
top: 8px;
position: absolute;
fill: #333;
path{
fill: #333;
}
}
}
.extra-filters{
padding: 8px;
margin-top: -20px;
margin-bottom: 20px;
label{
font-size: 13px;
font-weight: 600;
}
input{
width: 100%;
height: 30px;
box-sizing: border-box;
border: 1px solid #444;
border-radius: 0px;
padding-left: 5px;
margin-bottom: 8px;
margin-top: 3px;
border: 1px solid #a9a9a9;
border-radius: 0px;
padding-left: 5px;
border-radius: 3px;
&:focus{
border-radius: 0px;
box-shadow: none;
outline: none;
}
}
.btn-apply{
background: #00BCD4;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 5px 10px;
}
.btn-reset{
background: #a5a5a5;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 5px 10px;
}
}
.selected-tags{
padding: 10px;
.tag{
background: #00BCD4;
color: #fff;
padding: 1px 5px;
border-radius: 5px;
font-size: 12px;
padding-right: 25px;
position: relative;
margin-right: 4px;
.cross{
position: absolute;
background: transparent;
width: 14px;
height: 14px;
top: 3px;
right: 3px;
border-radius: 7px;
color: #fff;
text-align: center;
text-indent: 0px;
line-height: 12px;
cursor: pointer;
}
}
}
.expanded{
.cite-txt{
width: auto;
word-break: break-word;
white-space: inherit;
}
.authors{
width: auto;
word-break: break-word;
white-space: inherit;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment