therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make buttons stand out with some shading.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-21 17:15:45 +03:00
parent 8e5d17a659
commit bf84a87821
3 changed files with 24 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/timeline/timeline.vue
View file

@ -4,15 +4,15 @@
<div class="title">
{{title}}
</div>
<button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
<button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
Show new ({{timeline.newStatusCount}})
</button>
<button @click.prevent class="base06 error no-press loadmore-button" v-if="timelineError">
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
Error fetching updates
</button>
<button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError">
</div>
<div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
Up-to-date
</button>
</div>
</div>
<div class="panel-body">
<div class="timeline">
@ -43,18 +43,26 @@
.loadmore-button {
position: absolute;
right: 0.6em;
font-size: 14px;
min-width: 6em;
height: 1.8em;
line-height: 100%;
}
.loadmore-text {
position: absolute;
right: 0.6em;
font-size: 14px;
min-width: 6em;
border-radius: 5px;
font-family: arial;
text-align: center;
padding: 0 0.5em 0 0.5em;
opacity: 0.8;
}
.error {
background-color: rgba(255, 48, 16, 0.65);
}
.no-press {
opacity: 0.8;
cursor: default;
}
}