archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 13:15:24 +00:00
Code Issues Projects Releases Wiki Activity

added icon and max-height to select

Browse source
This commit is contained in:
Bram Wiepjes 2019-04-12 12:22:22 +02:00
parent 5538fc76e5
commit 257b4a2f67
2 changed files with 32 additions and 6 deletions
web-frontend
public
grid.html
src/scss/components
_select.scss

22
web-frontend/public/grid.html
View file

@ -247,8 +247,11 @@
<input type="text" class="select-search-input" placeholder="Search views" />
</div>
<ul class="select-items">
<li class="select-item active">
<a href="#" class="select-item-link">Grid view name</a>
<li class="select-item">
<a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i>
Grid view name
</a>
<a href="#" class="select-item-options" data-context=".context">
<i class="fas fa-ellipsis-v"></i>
</a>
@ -270,19 +273,28 @@
</div>
</li>
<li class="select-item">
<a href="#" class="select-item-link">Grid view option 2.</a>
<a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i>
Grid view option 2.
</a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select-item">
<a href="#" class="select-item-link">Grid view 2</a>
<a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i>
Grid view 2
</a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="select-item">
<a href="#" class="select-item-link">Grid view 3</a>
<a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i>
Grid view 3
</a>
<a href="#" class="select-item-options">
<i class="fas fa-ellipsis-v"></i>
</a>

16
web-frontend/src/scss/components/_select.scss
View file

@ -30,7 +30,17 @@
.select-items {
list-style: none;
padding: 0;
margin: 10px 0;
margin: 0;
max-height: (4 * 36px) + 20px; // we show max 8 items
overflow: auto;
&:before,
&:after {
content: "";
display: block;
height: 10px;
width: 100%;
}
}
%select-item-size {
@ -45,6 +55,10 @@
padding: 0 32px 0 10px;
border-radius: 3px;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: $color-neutral-100;
}