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
div[class*="-input"] + & {
div[class*="-input"]:not(.optional-input) + & {
margin-left: 1px;
.icon-button {

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

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

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

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