fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-18 07:48:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update UI colors and alignment for consistency with the design mockup (#157)

Browse Source 
Closes #111
This commit is contained in:
Keavon Chambers
2021-05-23 19:01:13 -07:00
parent 4b19a459b7
commit 34efac990b
21 changed files with 286 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/web/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -20,18 +20,18 @@
padding: 0 8px;
svg {
fill: #ddd;
fill: var(--color-e-nearwhite);
}
&:hover {
background: #666;
background: var(--color-6-lowergray);
svg {
fill: #fff;
fill: var(--color-f-white);
}
span {
color: #fff;
color: var(--color-f-white);
}
}
}

23
client/web/src/components/widgets/inputs/NumberInput.vue
View File

@@ -2,7 +2,7 @@
<div class="number-input">
<button class="arrow left"></button>
<button class="arrow right"></button>
<input type="text" spellcheck="false" value="25%" />
<input type="text" spellcheck="false" :value="`${value}${unit}`" />
</div>
</template>
@@ -12,7 +12,7 @@
height: 24px;
position: relative;
border-radius: 2px;
background: #111;
background: var(--color-1-nearblack);
overflow: hidden;
input {
@@ -23,13 +23,13 @@
background: none;
padding: 0;
line-height: 24px;
color: #ddd;
color: var(--color-e-nearwhite);
font-size: inherit;
text-align: center;
font-family: inherit;
&::selection {
background: #3194d6;
background: var(--color-accent);
}
}
@@ -46,14 +46,14 @@
padding: 9px 0;
&:hover {
background: #666;
background: var(--color-6-lowergray);
&.right::before {
border-color: transparent transparent transparent #fff;
border-color: transparent transparent transparent var(--color-f-white);
}
&.left::after {
border-color: transparent #fff transparent transparent;
border-color: transparent var(--color-f-white) transparent transparent;
}
}
@@ -68,7 +68,7 @@
height: 0;
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: transparent transparent transparent #ddd;
border-color: transparent transparent transparent var(--color-e-nearwhite);
display: block;
}
}
@@ -84,7 +84,7 @@
height: 0;
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: transparent #ddd transparent transparent;
border-color: transparent var(--color-e-nearwhite) transparent transparent;
display: block;
}
}
@@ -97,6 +97,9 @@ import { defineComponent } from "vue";
export default defineComponent({
components: {},
props: {},
props: {
value: { type: Number, required: true },
unit: { type: String, default: "" },
},
});
</script>

12
client/web/src/components/widgets/inputs/RadioInput.vue
View File

@@ -29,17 +29,17 @@
}
}
button {
background: #555;
fill: #ddd;
& > button {
background: var(--color-5-dullgray);
fill: var(--color-e-nearwhite);
&:hover {
background: #666;
background: var(--color-6-lowergray);
}
&.active {
background: #3194d6;
fill: #fff;
background: var(--color-accent);
fill: var(--color-f-white);
}
}
}

10
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="swatch-pair">
<div class="secondary swatch">
<button @click="clickSecondarySwatch" style="background: white"></button>
<button @click="clickSecondarySwatch" style="background: #ffffff"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
<ColorPicker />
</Popover>
</div>
<div class="primary swatch">
<button @click="clickPrimarySwatch" style="background: black"></button>
<button @click="clickPrimarySwatch" style="background: #000000"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
<ColorPicker />
</Popover>
@@ -24,15 +24,15 @@
.swatch {
width: 28px;
height: 28px;
margin: 2px;
margin: 0 2px;
position: relative;
button {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px #888 solid;
box-shadow: 0 0 0 2px #333;
border: 2px var(--color-7-middlegray) solid;
box-shadow: 0 0 0 2px var(--color-3-darkgray);
margin: 0;
padding: 0;
box-sizing: border-box;