jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve readability of OptionalInput widget design styling

This commit is contained in:
Keavon Chambers 2021-07-09 16:02:36 -07:00
parent 29a2b46684
commit 13e73b92bd
3 changed files with 29 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/src/components/widgets/buttons/PopoverButton.vue
View File

@ -37,7 +37,7 @@
} }
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last // TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"] + & { div[class*="-input"]:not(.optional-input) + & {
margin-left: 1px; margin-left: 1px;
.icon-button { .icon-button {

22
client/web/src/components/widgets/inputs/CheckboxInput.vue
View File

@ -26,25 +26,27 @@
padding: 2px; padding: 2px;
border-radius: 2px; border-radius: 2px;
&:hover {
background: var(--color-f-white);
}
.icon { .icon {
fill: var(--color-2-mildblack); fill: var(--color-2-mildblack);
} }
} }
&:hover .checkbox-box {
background: var(--color-f-white);
}
} }
input:checked + label .checkbox-box { input:checked + label {
background: var(--color-accent); .checkbox-box {
background: var(--color-accent);
&:hover { .icon {
background: var(--color-accent-hover); fill: var(--color-f-white);
}
} }
.icon { &:hover .checkbox-box {
fill: var(--color-f-white); background: var(--color-accent-hover);
} }
} }
} }

53
client/web/src/components/widgets/inputs/OptionalInput.vue
View File

@ -11,56 +11,35 @@
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
justify-content: center; justify-content: center;
width: 24px; margin-right: 1px;
width: 23px;
height: 24px; height: 24px;
border: 1px solid var(--color-7-middlegray);
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
background: var(--color-5-dullgray); box-sizing: border-box;
border-right: none;
.checkbox-box {
background: var(--color-e-nearwhite);
.icon {
fill: var(--color-5-dullgray);
}
}
&:hover { &:hover {
background: var(--color-6-lowergray); background: var(--color-6-lowergray);
.checkbox-box {
background: var(--color-f-white);
.icon {
fill: var(--color-6-lowergray);
}
}
} }
} }
input:checked + label { input:checked + label {
background: var(--color-accent); border: 1px solid var(--color-accent);
border-right: none;
.checkbox-box,
.checkbox-box:hover {
background: var(--color-f-white);
.icon {
fill: var(--color-accent);
}
}
&:hover { &:hover {
background: var(--color-accent-hover); border: 1px solid var(--color-accent-hover);
border-right: none;
.checkbox-box, background: none;
.checkbox-box:hover {
.icon {
fill: var(--color-accent-hover);
}
}
} }
} // border: none;
// background: var(--color-e-nearwhite);
// &:hover {
// background: var(--color-f-white);
// }
}
} }
</style> </style>