fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-01 16:08:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revamp UI styling to remove accent color; improve tab navigation

Browse Source
This commit is contained in:
Keavon Chambers
2022-11-04 05:56:33 -07:00
parent f7fd1d94eb
commit ff75e0eae9
30 changed files with 258 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/RadioInput.vue
+11 -5
View File
@@ -1,6 +1,13 @@
<template>
<LayoutRow class="radio-input">
<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="() => handleEntryClick(entry)" :title="entry.tooltip">
<button
:class="{ active: index === selectedIndex }"
v-for="(entry, index) in entries"
:key="index"
@click="() => handleEntryClick(entry)"
:title="entry.tooltip"
:tabindex="index === selectedIndex ? -1 : 0"
>
<IconLabel v-if="entry.icon" :icon="entry.icon" />
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
</button>
@@ -14,7 +21,6 @@
fill: var(--color-e-nearwhite);
height: 24px;
padding: 0 4px;
outline: none;
border: none;
display: flex;
align-items: center;
@@ -29,11 +35,11 @@
}
&.active {
background: var(--color-accent);
color: var(--color-f-white);
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
svg {
fill: var(--color-f-white);
fill: var(--color-2-mildblack);
}
}