Add scheme hints
This commit is contained in:
parent
9fb914fb70
commit
bea87f5be8
|
@ -12,6 +12,7 @@
|
|||
width: calc(33.3% - 15px);
|
||||
margin: 0 15px 15px 0;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
|
||||
.bd-settings-modal & {
|
||||
width: calc(50% - 15px);
|
||||
|
@ -37,6 +38,14 @@
|
|||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.bd-settings-scheme-hint {
|
||||
flex: 1 1 auto;
|
||||
color: #72767d;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.bd-active {
|
||||
cursor: default;
|
||||
|
||||
|
|
|
@ -15,7 +15,8 @@
|
|||
<template v-for="scheme in schemes">
|
||||
<div class="bd-settings-scheme" :class="{'bd-active': checkSchemeActive(scheme)}" @click="() => setActiveScheme(scheme)">
|
||||
<div class="bd-settings-scheme-icon" :style="{'background-image': `url("${scheme.icon_url}")`}"></div>
|
||||
<div class="bd-settings-scheme-name">{{ scheme.name }}</div>
|
||||
<div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
|
||||
<div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
@ -130,6 +130,7 @@
|
|||
{
|
||||
"id": "scheme-1",
|
||||
"name": "Test scheme",
|
||||
"hint": "Sets the span border opacity to 1%.",
|
||||
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
|
||||
"settings": [
|
||||
{
|
||||
|
@ -146,6 +147,7 @@
|
|||
{
|
||||
"id": "scheme-2",
|
||||
"name": "Another test scheme",
|
||||
"hint": "Sets the primary colour to red and the span border opacity to 99%.",
|
||||
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
|
||||
"settings": [
|
||||
{
|
||||
|
@ -170,6 +172,7 @@
|
|||
{
|
||||
"id": "scheme-3",
|
||||
"name": "Final test scheme",
|
||||
"hint": "Sets the primary colour to transparent and the span border opacity to 50%.",
|
||||
"icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
|
||||
"settings": [
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue