fix arrow and make it a little lighter

This commit is contained in:
Jakob Schrettenbrunner 2020-04-13 20:34:07 +02:00
parent d6cdc74f79
commit 6b36f8916e
3 changed files with 13 additions and 16 deletions

View File

@ -2,7 +2,7 @@
<div class="version-select custom-select" :tabindex="tabindex" @blur="open = false">
<div class="selected" :class="{open: open}" @click="open = !open">
<VersionSelectItem :version="selected" />
<span class="arrow down"></span>
<span class="arrow"></span>
</div>
<div class="items" :class="{hidden: !open}">
<div

View File

@ -1,7 +1,7 @@
<template>
<div class="inline-block">
{{ version.name }}
<span class="rounded-full px-2 ml-1" :class="classes">{{version.status}}</span>
<span class="rounded-full ml-2" :class="classes">{{version.status}}</span>
</div>
</template>

View File

@ -99,27 +99,24 @@ $arrow-bg: #000;
}
.selected {
@apply .select-none .border .cursor-pointer .px-4;
@apply .select-none .border .border-grey-lighter .cursor-pointer .px-4;
border-radius: 1rem;
&:hover {
@apply .border-blue;
}
&.open {
@apply .border-blue;
&:hover, &.open {
@apply .bg-grey-lighter .border-grey-lighter;
}
&:after {
position: absolute;
content: "";
top: .5em;
right: 10px;
.arrow {
@apply .inline-block .relative;
top: -0.16em;
left: .5em;
width: 0;
height: 0;
border: 4px solid transparent;
border-color: #fff transparent transparent transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #b8c2cc;
}
}
.items {